:root{
  --navy:#0E1B3D; --navy-2:#081128; --navy-3:#16295A; --ink:#14203F; --muted:#5B6683; --line:#E3E1DA;
  --cream:#FBF6EE; --paper:#FFFFFF; --lime:#ABDE43; --lime-d:#7EA82F; --gold:#F2B33D; --coral:#E8603C;
  --teal:#1FA39A; --purple:#6D35B4; --ok:#2E9D5B; --warn:#D99016; --bad:#D2452F;
  --r:14px; --sh:0 1px 2px rgba(14,27,61,.06),0 8px 24px rgba(14,27,61,.08);
  --hf:'Montserrat',system-ui,sans-serif; --bf:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--bf);color:var(--ink);background:var(--cream);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--hf);margin:0;line-height:1.15;color:var(--navy)}
a{color:var(--purple)}
button{font-family:var(--hf);cursor:pointer}
input,select,textarea{font-family:var(--bf);font-size:15px;color:var(--ink)}
.hidden{display:none!important}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;transition:transform .12s,box-shadow .12s,background .12s;text-decoration:none;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-lime{background:var(--lime);color:var(--navy);box-shadow:0 6px 18px rgba(171,222,67,.35)}
.btn-lime:hover{background:#b9e85a}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3)}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-ghost-w{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.btn-ghost-w:hover{background:rgba(255,255,255,.16)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-wa{background:#25D366;color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.link-btn{background:none;border:0;color:var(--purple);font-weight:600;padding:0;font-family:var(--bf);font-size:14px;text-decoration:underline}

/* ===== Landing ===== */
.landing{min-height:100vh;background:radial-gradient(1200px 600px at 85% -10%,#24407f 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#2b1b5c 0%,transparent 55%),var(--navy);color:#fff;position:relative;overflow:hidden}
.landing .wrap{max-width:1180px;margin:0 auto;padding:28px 20px 60px;position:relative;z-index:1}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--hf);font-weight:800;letter-spacing:.5px;color:#fff;font-size:17px}
.logo .mark{width:36px;height:36px;border-radius:10px;background:var(--lime);display:grid;place-items:center}
.logo small{display:block;font-weight:500;font-size:11px;letter-spacing:1.5px;opacity:.7;text-transform:uppercase}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;margin-top:56px}
.kicker{display:inline-flex;gap:8px;align-items:center;background:rgba(171,222,67,.14);color:var(--lime);border:1px solid rgba(171,222,67,.35);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;font-family:var(--hf)}
.hero h1{color:#fff;font-size:clamp(34px,5vw,58px);font-weight:900;margin:18px 0 16px;letter-spacing:-1px}
.hero h1 em{font-style:normal;color:var(--lime)}
.hero p.lead{font-size:18px;color:#C9D2EA;max-width:560px;margin:0 0 26px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.stats div b{display:block;font-family:var(--hf);font-size:26px;color:#fff}
.stats div span{font-size:13px;color:#9FB0D6}
.card-auth{background:#fff;color:var(--ink);border-radius:22px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.tabs{display:flex;background:#F1EEE6;border-radius:999px;padding:4px;margin-bottom:20px}
.tabs button{flex:1;border:0;background:transparent;padding:10px;border-radius:999px;font-weight:700;color:var(--muted);font-size:14px}
.tabs button.on{background:var(--navy);color:#fff}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}
.fld .hint{font-size:12px;color:var(--muted);margin-top:4px}
.in{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:11px 13px;outline:none;transition:border .12s, box-shadow .12s}
.in:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(109,53,180,.12)}
textarea.in{min-height:96px;resize:vertical;line-height:1.5}
.err{background:#FDECEA;color:var(--bad);padding:10px 12px;border-radius:10px;font-size:13px;margin-bottom:12px}
.journey{margin-top:70px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.jstep{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px}
.jstep .n{font-family:var(--hf);font-weight:900;color:var(--lime);font-size:13px;letter-spacing:1px}
.jstep h4{color:#fff;font-size:15px;margin:6px 0 4px}
.jstep p{margin:0;font-size:12.5px;color:#9FB0D6}
.deco{position:absolute;right:-120px;top:120px;width:520px;opacity:.12;pointer-events:none}

/* Access card after creation */
.access-card{background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#fff;border-radius:18px;padding:22px;margin:6px 0 16px;position:relative;overflow:hidden}
.access-card .lbl{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#9FB0D6}
.access-card .val{font-family:var(--hf);font-size:28px;font-weight:900;color:var(--lime);letter-spacing:1px}
.access-card .row{display:flex;justify-content:space-between;gap:12px;margin-top:10px}

/* ===== App shell ===== */
.shell{display:grid;grid-template-columns:290px 1fr;min-height:100vh}
.side{background:var(--navy);color:#fff;position:sticky;top:0;height:100vh;overflow-y:auto;padding:20px 14px 30px}
.side .logo{padding:0 8px 18px}
.side-prog{background:rgba(255,255,255,.06);border-radius:14px;padding:14px;margin:0 4px 18px;display:flex;gap:14px;align-items:center}
.side-prog .txt b{font-family:var(--hf);font-size:14px;display:block}
.side-prog .txt span{font-size:12px;color:#9FB0D6}
.grp{margin:14px 6px 6px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#7F8DB3;font-weight:700;font-family:var(--hf)}
.nav-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:#D5DCEE;padding:9px 10px;border-radius:10px;font-family:var(--bf);font-size:14px;font-weight:500}
.nav-it:hover{background:rgba(255,255,255,.06)}
.nav-it.on{background:var(--lime);color:var(--navy);font-weight:700}
.nav-it .dot{width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:2px solid #42537F;display:grid;place-items:center;font-size:11px;font-weight:800;font-family:var(--hf)}
.nav-it .dot.p{border-color:var(--gold);color:var(--gold)}
.nav-it .dot.c{background:var(--lime);border-color:var(--lime);color:var(--navy)}
.nav-it.on .dot{border-color:var(--navy);color:var(--navy)}
.nav-it.on .dot.c{background:var(--navy);color:var(--lime)}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;background:rgba(251,246,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:12px 28px}
.topbar .who{font-family:var(--hf);font-weight:700;color:var(--navy);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap}
.chip.folio{font-family:var(--hf);letter-spacing:.5px}
.save{font-size:12.5px;color:var(--muted);white-space:nowrap}
.save.ok{color:var(--ok)} .save.bad{color:var(--bad)}
.topbar .sp{flex:1}
.burger{display:none;border:0;background:var(--navy);color:#fff;border-radius:10px;width:40px;height:40px;font-size:18px}
.content{max-width:1060px;margin:0 auto;padding:30px 28px 120px}

/* Module hero */
.mhero{background:#fff;border-radius:22px;padding:26px 28px;box-shadow:var(--sh);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-bottom:22px;position:relative;overflow:hidden}
.mhero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lime)}
.mhero .step{font-family:var(--hf);font-weight:800;font-size:12px;letter-spacing:1.5px;color:var(--purple);text-transform:uppercase}
.mhero h2{font-size:clamp(24px,3vw,32px);font-weight:900;margin:6px 0 8px}
.mhero p{margin:0;color:var(--muted);max-width:640px}
.mhero .meta{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tip{background:#F4F9E6;border:1px solid #DCEDB3;border-radius:16px;padding:14px 16px;display:flex;gap:12px;margin-bottom:22px;font-size:14px}
.tip .ic{font-size:20px;line-height:1}
.tip b{font-family:var(--hf);color:var(--lime-d);font-size:12px;letter-spacing:1px;text-transform:uppercase;display:block;margin-bottom:2px}
.card{background:#fff;border-radius:18px;box-shadow:var(--sh);padding:22px 24px;margin-bottom:18px}
.card h3{font-size:18px;font-weight:800;margin-bottom:4px}
.card .sub{color:var(--muted);font-size:13.5px;margin:0 0 16px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 14px}
.span2{grid-column:span 2}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{font-family:var(--hf);font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:2px solid var(--line);white-space:nowrap;font-weight:700}
.tbl td{padding:6px;border-bottom:1px solid #F0EEE8;vertical-align:middle}
.tbl td .in{padding:8px 9px;border-radius:8px;font-size:14px;min-width:70px}
.tbl td.num,.tbl th.num{text-align:right}
.tbl .calc{font-weight:700;color:var(--navy);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.tbl tfoot td{font-weight:800;color:var(--navy);border-top:2px solid var(--line);border-bottom:0;font-family:var(--hf)}
.del{border:0;background:#F6F4EE;color:var(--muted);width:30px;height:30px;border-radius:8px;font-size:16px}
.del:hover{background:#FDECEA;color:var(--bad)}
.add{margin-top:12px}

/* Likert */
.q{padding:14px 0;border-bottom:1px solid #F0EEE8}
.q:last-child{border-bottom:0}
.q .qt{font-weight:600;margin-bottom:10px;display:flex;gap:10px}
.q .qt .qn{flex:0 0 28px;height:28px;border-radius:8px;background:#F1EEE6;display:grid;place-items:center;font-family:var(--hf);font-weight:800;font-size:12px;color:var(--navy)}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:13px;font-family:var(--bf);font-weight:500;color:var(--ink)}
.opt:hover{border-color:var(--navy)}
.opt.on{background:var(--navy);border-color:var(--navy);color:#fff}
.opt.on.imp{background:var(--purple);border-color:var(--purple)}
.qrow{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.qrow .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;margin-right:4px}

/* KPIs */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:var(--sh);border-top:4px solid var(--lime)}
.kpi .l{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.kpi .v{font-family:var(--hf);font-weight:900;font-size:24px;color:var(--navy);margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted)}
.kpi.bad{border-top-color:var(--bad)} .kpi.warn{border-top-color:var(--gold)} .kpi.ok{border-top-color:var(--ok)}

/* Alerts */
.alert{display:flex;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:10px;font-size:14px;align-items:flex-start}
.alert .ic{font-weight:900;font-family:var(--hf);width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px}
.alert.bad{background:#FDECEA} .alert.bad .ic{background:var(--bad)}
.alert.warn{background:#FFF5E0} .alert.warn .ic{background:var(--warn)}
.alert.ok{background:#E8F6EE} .alert.ok .ic{background:var(--ok)}
.alert.info{background:#EEF1FA} .alert.info .ic{background:var(--navy-3)}
.alert b{font-family:var(--hf)}

.navfoot{display:flex;justify-content:space-between;gap:10px;margin-top:26px;flex-wrap:wrap}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill.ok{background:#E8F6EE;color:var(--ok)} .pill.warn{background:#FFF5E0;color:#A86B06} .pill.bad{background:#FDECEA;color:var(--bad)} .pill.info{background:#EEF1FA;color:var(--navy-3)}

/* matrix price */
.mx{display:grid;grid-template-columns:110px repeat(3,1fr);gap:6px;font-size:13px}
.mx div{padding:10px;border-radius:10px;background:#F6F4EE;text-align:center}
.mx .h{background:transparent;font-weight:700;color:var(--muted);font-family:var(--hf);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;display:grid;place-items:center}
.mx .sel{background:var(--navy);color:#fff;font-weight:700;box-shadow:0 0 0 3px var(--lime)}

.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

.gauge-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(30px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:all .25s;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(8,17,40,.6);display:grid;place-items:center;z-index:90;padding:16px}
.modal{background:#fff;border-radius:20px;max-width:520px;width:100%;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.35);max-height:90vh;overflow:auto}
.modal h3{font-size:22px;font-weight:900;margin-bottom:8px}

/* Closing */
.closing{background:linear-gradient(135deg,var(--navy) 0%,#22357A 100%);color:#fff;border-radius:24px;padding:34px;position:relative;overflow:hidden}
.closing h2{color:#fff;font-size:clamp(24px,3vw,34px);font-weight:900}
.closing h2 em{color:var(--lime);font-style:normal}
.closing p{color:#C9D2EA;font-size:16px;max-width:680px}
.closing ul{color:#DDE4F5;padding-left:18px}

/* Admin */
.admin{max-width:1200px;margin:0 auto;padding:30px 20px}
.bar{height:8px;background:#EEE9DE;border-radius:99px;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--lime-d);border-radius:99px}

/* ===== REPORT ===== */
.rep-toolbar{position:sticky;top:0;z-index:30;background:var(--navy);color:#fff;display:flex;gap:10px;align-items:center;padding:10px 20px;flex-wrap:wrap}
.rep-toolbar .sp{flex:1}
.report{background:#E9E6DE;padding:24px 0 60px}
.page{width:216mm;min-height:279mm;margin:0 auto 18px;background:#fff;box-shadow:0 6px 30px rgba(0,0,0,.12);padding:16mm 16mm 20mm;position:relative;font-size:10.5pt;line-height:1.45;color:#1B2440}
.page h2.sec{font-family:var(--hf);font-weight:900;font-size:20pt;color:var(--navy);margin:0 0 4mm;display:flex;align-items:baseline;gap:10px}
.page h2.sec .n{color:var(--lime-d);font-size:13pt}
.page h3{font-size:12pt;font-weight:800;margin:6mm 0 2.5mm;color:var(--navy)}
.page .secline{height:3px;background:linear-gradient(90deg,var(--lime) 0 60px,var(--line) 60px);margin-bottom:6mm}
.page .pfoot{position:absolute;left:16mm;right:16mm;bottom:9mm;display:flex;justify-content:space-between;font-size:8pt;color:#8A93AD;border-top:1px solid #EEE;padding-top:3mm}
.page p{margin:0 0 3mm}
.rbox{background:#F7F5EF;border-radius:10px;padding:4mm 5mm;margin-bottom:4mm;break-inside:avoid}
.rbox h4{font-size:9pt;text-transform:uppercase;letter-spacing:1px;color:var(--purple);margin:0 0 1.5mm;font-weight:800}
.rgrid2{display:grid;grid-template-columns:1fr 1fr;gap:4mm}
.rgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.rkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:3mm;margin-bottom:5mm}
.rkpi{border-radius:10px;padding:3.5mm;background:var(--navy);color:#fff}
.rkpi .l{font-size:7.5pt;text-transform:uppercase;letter-spacing:.8px;color:#9FB0D6}
.rkpi .v{font-family:var(--hf);font-weight:900;font-size:14pt;color:var(--lime)}
.rtbl{width:100%;border-collapse:collapse;font-size:9pt;margin-bottom:4mm}
.rtbl th{background:var(--navy);color:#fff;font-family:var(--hf);font-weight:700;font-size:8pt;text-transform:uppercase;letter-spacing:.5px;padding:2mm;text-align:left}
.rtbl td{padding:1.8mm 2mm;border-bottom:1px solid #ECE9E1}
.rtbl td.num,.rtbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.rtbl tr.tot td{font-weight:800;background:#F4F9E6}
.rtbl tr.neg td.num.neg{color:var(--bad)}
.cover{background:var(--navy);color:#fff;padding:0;overflow:hidden}
.cover .cv-in{padding:22mm 18mm;position:relative;z-index:1;height:279mm;display:flex;flex-direction:column}
.cover .cv-k{font-family:var(--hf);letter-spacing:3px;font-size:9pt;color:var(--lime);font-weight:800}
.cover h1{color:#fff;font-size:38pt;font-weight:900;margin:8mm 0 4mm;letter-spacing:-1px;line-height:1.05}
.cover .cv-sub{font-size:13pt;color:#C9D2EA;max-width:140mm}
.cover .cv-meta{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;border-top:1px solid rgba(255,255,255,.2);padding-top:6mm}
.cover .cv-meta .l{font-size:8pt;letter-spacing:1.5px;color:#9FB0D6;text-transform:uppercase}
.cover .cv-meta .v{font-family:var(--hf);font-weight:800;font-size:12pt}
.canvas-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-areas:"a k p r s" "a rk p c s" "co co i i i";gap:2mm;font-size:8.3pt}
.canvas-grid>div{background:#F7F5EF;border-radius:8px;padding:2.5mm;min-height:30mm}
.canvas-grid h5{margin:0 0 1.5mm;font-family:var(--hf);font-size:7.5pt;text-transform:uppercase;color:var(--purple);letter-spacing:.6px}
.canvas-grid ul{margin:0;padding-left:3.5mm}

.foda{display:grid;grid-template-columns:1fr 1fr;gap:3mm}
.foda>div{border-radius:10px;padding:4mm;color:#fff;min-height:40mm}
.foda h4{color:#fff;font-family:var(--hf);margin:0 0 2mm;font-size:10pt;letter-spacing:1px}
.foda ul{margin:0;padding-left:4mm;font-size:9pt}
.ralert{padding:2.5mm 3.5mm;border-radius:8px;margin-bottom:2mm;font-size:9pt;border-left:4px solid}
.ralert.bad{background:#FDECEA;border-color:var(--bad)} .ralert.warn{background:#FFF5E0;border-color:var(--warn)} .ralert.ok{background:#E8F6EE;border-color:var(--ok)} .ralert.info{background:#EEF1FA;border-color:var(--navy-3)}
.closing-page{background:var(--navy);color:#fff}
.closing-page h2{color:#fff}

@media print{
  @page{size:letter;margin:0}
  body{background:#fff}
  .rep-toolbar,.toast{display:none!important}
  .report{background:#fff;padding:0}
  .page{box-shadow:none;margin:0;page-break-after:always;break-after:page;width:216mm;height:279mm;min-height:0;overflow:hidden}
  .page:last-child{page-break-after:auto}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .journey{grid-template-columns:repeat(2,1fr)}
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:290px;z-index:60;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.4)}
  .burger{display:inline-grid;place-items:center}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .topbar{padding:10px 16px}
  .content{padding:20px 16px 100px}
  .topbar .hide-m{display:none}
}
@media (max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .mhero{grid-template-columns:1fr;padding:20px}
  .card{padding:18px 16px}
  .landing .wrap{padding:20px 16px 40px}
  .hero{margin-top:30px}
  .page{width:100%;min-height:0;padding:18px}
  .report{padding:0}
}