:root{
  --viola:#44348B;
  --viola-scuro:#332767;
  --viola-chiaro:#EDEAF7;
  --lilla:#8A7BC8;
  --ink:#22203A;
  --grigio:#6E6A85;
  --bg:#F6F5FA;
  --verde:#2E9E6B;
  --ambra:#D98A1F;
  --rosso:#C94F4F;
  --nav-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  background:#E9E6F2;
  color:var(--ink);
  min-height:100dvh;
}
button{font-family:inherit;cursor:pointer}
.app{
  max-width:480px;margin:0 auto;min-height:100dvh;background:var(--bg);
  position:relative;box-shadow:0 0 40px rgba(40,30,90,.12);
}

/* ---- Views ---- */
.view{display:none;padding-bottom:calc(var(--nav-h) + 24px)}
.view.active{display:block}

/* ---- Onboarding ---- */
#view-onboarding{background:linear-gradient(170deg,var(--viola) 0%,var(--viola-scuro) 100%);color:#fff;min-height:100dvh;padding-bottom:32px}
.ob-inner{padding:calc(28px + env(safe-area-inset-top)) 24px 8px}
.logo-mark{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:700}
.logo-mark span{color:#B9ACEC}
.ob-sub{font-size:13px;color:#CFC8EA;margin:8px 0 28px;line-height:1.55}
.ob-q{font-size:20px;font-weight:700;margin-bottom:6px}
.ob-q-sub{font-size:12.5px;color:#CFC8EA;margin-bottom:16px}
.persona-card{
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.22);
  border-radius:18px;padding:15px 18px;margin-bottom:10px;cursor:pointer;
  display:flex;align-items:center;gap:14px;transition:background .15s;
}
.persona-card:hover{background:rgba(255,255,255,.15)}
.persona-card.sel{background:#fff;color:var(--ink);border-color:#fff}
.persona-card.sel .p-desc{color:var(--grigio)}
.p-emoji{font-size:25px}
.p-name{font-weight:700;font-size:15px}
.p-desc{font-size:11.5px;color:#CFC8EA;margin-top:2px;line-height:1.4}
.ob-fields{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.ob-field{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:12px;
  padding:9px 14px;display:flex;flex-direction:column;gap:2px;
}
.ob-field span{font-weight:600;color:#CFC8EA;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.ob-field input,.ob-field select{
  background:none;border:none;outline:none;color:#fff;font-family:inherit;font-size:14px;width:100%;
}
.ob-field select option{color:var(--ink)}
.ob-field input::placeholder{color:rgba(255,255,255,.4)}
.ob-consent{display:flex;gap:10px;font-size:11px;color:#CFC8EA;line-height:1.5;margin-top:8px;cursor:pointer}
.ob-consent input{margin-top:2px;accent-color:#fff}
.ob-consent a{color:#fff}
.ob-error{color:#FFB3B3;font-size:12px;font-weight:600;margin-top:10px;min-height:16px}
.btn-primary{
  width:100%;margin-top:10px;background:#fff;color:var(--viola);border:none;border-radius:14px;
  padding:16px;font-weight:700;font-size:15px;transition:transform .15s;
}
.btn-primary:hover{transform:translateY(-1px)}
.ob-footer{text-align:center;font-size:11px;color:#A99BD8;margin-top:18px}

/* ---- Header app ---- */
.app-head{padding:calc(18px + env(safe-area-inset-top)) 22px 12px}
.app-head-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.app-title{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:700;color:var(--viola)}
.persona-chip{background:var(--viola-chiaro);color:var(--viola);font-size:11px;font-weight:700;padding:7px 13px;border-radius:99px;border:1px solid #D8D1EF}
.app-sub{font-size:12px;color:var(--grigio);margin-top:4px}
.filter-row{display:flex;gap:8px;padding:4px 22px 12px;overflow-x:auto;scrollbar-width:none}
.filter-row::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;font-size:11.5px;font-weight:600;padding:8px 15px;border-radius:99px;background:#fff;border:1px solid #E3E0EE;color:var(--grigio)}
.chip.on{background:var(--viola);color:#fff;border-color:var(--viola)}

/* ---- Cards ---- */
.cards{padding:2px 18px 8px}
.section-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio);margin:16px 4px 10px}
.op-card{background:#fff;border-radius:18px;padding:16px 18px;margin-bottom:12px;box-shadow:0 2px 10px rgba(40,30,90,.06);border:1px solid #EEEBF6}
.op-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.tag{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.tag.formazione{background:#E7F4EE;color:var(--verde)}
.tag.finanza{background:#F3EFFA;color:var(--viola)}
.scad{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap}
.scad.hot{background:#FBEDED;color:var(--rosso)}
.scad.mid{background:#FCF3E3;color:var(--ambra)}
.scad.ok{background:#F0F0F5;color:var(--grigio)}
.op-title{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:5px}
.op-ente{font-size:11px;color:var(--lilla);font-weight:700;margin-bottom:6px}
.op-desc{font-size:12.5px;color:var(--grigio);line-height:1.55;margin-bottom:10px}
.op-meta{font-size:11.5px;color:var(--grigio);margin-bottom:12px}
.op-meta b{color:var(--ink)}
.op-cta{display:flex;gap:8px}
.cta-main{
  flex:1;display:block;text-align:center;text-decoration:none;
  background:var(--viola);color:#fff;border:none;border-radius:10px;
  padding:12px;font-weight:700;font-size:12.5px;
}
.cta-main:hover{background:var(--viola-scuro)}
.empty-state{text-align:center;color:var(--grigio);font-size:13px;padding:40px 30px;line-height:1.6}
.demo-banner{
  margin:0 18px 4px;background:#FCF3E3;color:var(--ambra);border:1px solid #F2E2C0;
  border-radius:12px;padding:10px 14px;font-size:11px;font-weight:600;line-height:1.5;
}

/* ---- Timeline ---- */
.tl{padding:6px 22px 8px}
.tl-month{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--viola);margin:18px 0 10px}
.tl-item{display:flex;gap:14px;margin-bottom:14px}
.tl-date{flex-shrink:0;width:48px;height:48px;background:#fff;border:1px solid #EEEBF6;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.tl-date b{font-size:17px}
.tl-date span{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--grigio)}
.tl-body{flex:1;background:#fff;border:1px solid #EEEBF6;border-radius:12px;padding:10px 14px}
.tl-body b{font-size:12.5px;display:block;margin-bottom:2px}
.tl-body span{font-size:11px;color:var(--grigio)}
.tl-days{font-size:10px;font-weight:800;color:var(--rosso);margin-top:4px;display:block}

/* ---- Check ---- */
.check-wrap{padding:6px 22px 8px}
.check-card{background:#fff;border-radius:18px;padding:20px;margin-bottom:14px;border:1px solid #EEEBF6;box-shadow:0 2px 10px rgba(40,30,90,.06)}
.check-card.muted{opacity:.75}
.check-card .ico{font-size:30px;margin-bottom:10px;display:block}
.check-card h3{font-size:15.5px;margin-bottom:6px}
.check-card p{font-size:12.5px;color:var(--grigio);line-height:1.55;margin-bottom:14px}
.check-card .cta-main{width:100%}
.badge-soon{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#FCF3E3;color:var(--ambra);padding:4px 10px;border-radius:6px;margin-left:6px;vertical-align:middle}

/* ---- Profilo ---- */
.prof-wrap{padding:6px 22px 8px}
.prof-card{background:#fff;border-radius:18px;padding:8px 20px;margin-bottom:14px;border:1px solid #EEEBF6}
.prof-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #F3F1F9;font-size:13px}
.prof-row:last-child{border-bottom:none}
.prof-row b{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio);font-weight:700}
.prof-row span{text-align:right;word-break:break-word}
.toggle{width:46px;height:27px;background:#D8D5E6;border-radius:99px;position:relative;border:none;transition:background .15s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;background:#fff;border-radius:50%;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on{background:var(--viola)}
.toggle.on::after{left:22px}
.btn-secondary{
  width:100%;background:#fff;color:var(--viola);border:1.5px solid var(--viola);border-radius:12px;
  padding:13px;font-weight:700;font-size:13px;margin-bottom:14px;
}
.cta-box{background:var(--viola-chiaro);border-color:#D8D1EF;text-align:center;padding:18px 20px}
.cta-box div{font-size:12.5px;color:var(--viola);font-weight:600;line-height:1.5;margin-bottom:12px}
.colophon{text-align:center;font-size:10.5px;color:#A9A5BE;line-height:1.6;padding:6px 0 10px}
.colophon a{color:var(--lilla)}

/* ---- Navbar ---- */
.navbar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid #EBE8F4;
  display:none;justify-content:space-around;align-items:flex-start;
  padding:10px 0 env(safe-area-inset-bottom);z-index:50;
}
.navbar.show{display:flex}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:#A9A5BE;font-size:10px;font-weight:700;width:72px;background:none;border:none}
.nav-item .n-ico{font-size:21px}
.nav-item.on{color:var(--viola)}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(20,15,45,.55);z-index:80;display:none;align-items:flex-end;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:#fff;width:100%;max-width:480px;border-radius:28px 28px 0 0;padding:26px 24px calc(30px + env(safe-area-inset-bottom));animation:up .25s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal h3{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--viola);margin-bottom:8px}
.modal p{font-size:13px;color:var(--grigio);line-height:1.6;margin-bottom:18px}
.modal .close{width:100%;margin-top:10px;background:none;border:none;color:var(--grigio);font-size:12px;font-weight:600;padding:8px}