:root{
  --teal:#0F7A70; --teal-d:#0F5A52; --teal-tint:#E7F2F0; --teal-mid:#3FA18F;
  --gold:#C6A15B; --gold-d:#8A6D25; --gold-tint:#FBF0DA;
  --ink:#17302C; --ink2:#2C4641; --muted:#6A7C78; --faint:#9AA8A5;
  --bg:#FCFDFC; --card:#ffffff; --line:#EAEEEC; --line2:#F0F3F1;
  --red:#B4622B; --red-tint:#FBEBE2; --green:#2F8F6B; --amber:#C6A15B; --violet:#6d5bd0;
  --sh:0 1px 2px rgba(20,40,36,.04); --sh2:0 2px 10px rgba(20,40,36,.06); --sh3:0 18px 44px rgba(20,40,36,.14);
  --r:12px; --r-lg:16px; --sidebar:236px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--teal)}button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#dbe4e1;border-radius:20px;border:2px solid transparent;background-clip:content-box}
.hidden{display:none!important}.muted{color:var(--muted)}

/* LOGIN */
#login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:22px;background:#F4F8F6;overflow:hidden}
#login::before{content:"";position:absolute;inset:-30%;background:radial-gradient(40% 40% at 30% 25%,#0F7A7018,transparent 60%),radial-gradient(38% 38% at 78% 32%,#C6A15B18,transparent 60%);}
.login-card{position:relative;background:#fff;border:0.5px solid var(--line);border-radius:22px;width:100%;max-width:390px;padding:36px 32px;box-shadow:var(--sh3);text-align:center}
.login-logo{width:52px;height:52px;border-radius:15px;margin:0 auto 15px;display:flex;align-items:center;justify-content:center;background:var(--teal-tint);color:var(--teal);font-weight:800;font-size:23px}
.login-card h1{font-size:22px;margin:0 0 4px;letter-spacing:-.4px;font-weight:700;color:var(--ink)}
.login-card p.sub{color:var(--muted);margin:0 0 22px;font-size:13px}
.login-card input{width:100%;padding:12px 14px;border:0.5px solid var(--line);border-radius:11px;font-size:14px;margin-bottom:10px;background:#FBFDFC}
.login-card input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
.btn-primary{width:100%;padding:12px;border:none;border-radius:11px;color:#fff;font-weight:600;font-size:15px;background:var(--teal)}
.btn-primary:hover{background:var(--teal-d)}
.login-note{margin-top:17px;font-size:12px;color:var(--muted);line-height:1.55}
#login-error{color:var(--red);font-size:12.5px;min-height:16px}
#mode-badge{margin-top:13px}.badge-mode{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:600}
.badge-demo{background:var(--gold-tint);color:var(--gold-d)}.badge-cloud{background:var(--teal-tint);color:var(--teal-d)}

/* SHELL */
#app{display:flex;min-height:100vh;width:100%}
aside{width:var(--sidebar);flex:0 0 var(--sidebar);background:#fff;border-right:0.5px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 6px}
.brand .mk{width:34px;height:34px;border-radius:10px;background:var(--teal-tint);display:flex;align-items:center;justify-content:center;color:var(--teal);font-weight:800}
.brand b{color:var(--ink);font-size:16px;letter-spacing:-.3px;font-weight:700}
.brand span{display:block;font-size:10px;color:var(--faint);font-weight:500;letter-spacing:.3px;margin-top:2px}
.mod-switch{display:flex;gap:3px;margin:12px 14px 6px;padding:3px;background:#EEF4F2;border-radius:11px}
.mod-switch button{flex:1;border:none;background:transparent;color:var(--muted);padding:8px 6px;border-radius:8px;font-size:12px;font-weight:600}
.mod-switch button.on{background:#fff;color:var(--teal-d);box-shadow:var(--sh)}
nav.side{padding:8px 12px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
nav.side .grp{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);padding:12px 10px 5px;font-weight:600}
nav.side button{display:flex;align-items:center;gap:11px;background:transparent;border:none;color:var(--ink2);padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:500;text-align:left;width:100%}
nav.side button .ic{width:17px;text-align:center;color:var(--faint);font-size:15px}
nav.side button:hover{background:#F4F8F6}
nav.side button.active{background:var(--teal-tint);color:var(--teal-d);font-weight:600}
nav.side button.active .ic{color:var(--teal)}
.side-foot{padding:12px 14px;border-top:0.5px solid var(--line);display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12px;flex:0 0 auto}
.side-foot .u{font-size:12px;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.side-foot .u small{display:block;color:var(--faint);font-weight:500;font-size:10.5px}
.side-foot .out{background:#F4F8F6;border:none;color:var(--muted);width:29px;height:29px;border-radius:8px;font-size:14px}
.side-foot .out:hover{background:var(--teal-tint);color:var(--teal-d)}

main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 28px;background:rgba(252,253,252,.82);backdrop-filter:blur(10px);border-bottom:0.5px solid var(--line)}
.topbar .burger{display:none;background:none;border:none;font-size:20px;color:var(--ink)}
.crumb .k{font-size:10px;letter-spacing:.3px;color:var(--faint);font-weight:500}
.crumb h2{margin:1px 0 0;font-size:19px;letter-spacing:-.4px;font-weight:700;color:var(--ink)}
.grow{flex:1}
.search{display:flex;align-items:center;gap:8px;background:#fff;border:0.5px solid var(--line);border-radius:10px;padding:8px 12px;min-width:200px;box-shadow:var(--sh)}
.search input{border:none;background:transparent;outline:none;font-size:13.5px;width:100%}.search kbd{font-size:10px;color:var(--faint);border:0.5px solid var(--line);border-radius:5px;padding:1px 5px}
.content{padding:26px 28px;width:100%;max-width:1500px;margin:0 auto;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.btn{background:var(--teal);color:#fff;border:none;border-radius:10px;padding:9px 15px;font-weight:600;font-size:13.5px;white-space:nowrap;box-shadow:var(--sh)}
.btn:hover{background:var(--teal-d)}
.btn.ghost{background:#fff;color:var(--ink2);border:0.5px solid var(--line);box-shadow:var(--sh)}
.btn.ghost:hover{background:#F4F8F6}
.btn.tiny{padding:6px 11px;font-size:12px;border-radius:8px;box-shadow:none}
.btn.subtle{background:var(--teal-tint);color:var(--teal-d);box-shadow:none}.btn.subtle:hover{background:#DBEDE8}
.btn.danger{background:#fff;color:var(--red);border:0.5px solid #EAD3C6;box-shadow:none}
select,input[type=text],input[type=number],input[type=date],input[type=time],input[type=month],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=search],textarea{font-family:inherit;font-size:13.5px;padding:10px 12px;border:0.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-tint)}
label.lb{font-size:11px;color:var(--muted);letter-spacing:.2px;font-weight:600;display:block;margin-bottom:5px}

.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--card);border:0.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:20px}
.card.pad0{padding:0;overflow:hidden}
.kpi{background:var(--card);border:0.5px solid var(--line);border-radius:var(--r);padding:16px 17px;box-shadow:var(--sh);position:relative;transition:.15s ease}
.kpi:hover{box-shadow:var(--sh2)}
.kpi .ic{position:absolute;top:15px;right:15px;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--teal-tint);color:var(--teal)}
.kpi .n{font-size:27px;font-weight:700;letter-spacing:-.6px;line-height:1.15;color:var(--ink)}
.kpi .l{color:var(--muted);font-size:12.5px;margin-top:4px}
.kpi .sub{font-size:11.5px;margin-top:6px;color:var(--faint)}
.up{color:var(--green)}.down{color:var(--red)}
.sect-h{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 12px}.sect-h h3{margin:0;font-size:16px;font-weight:600}
.card h3{margin:0 0 3px;font-size:15px;font-weight:600;letter-spacing:-.1px}.card .csub{color:var(--muted);font-size:12px;margin:0 0 15px}
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1050px){.two{grid-template-columns:1fr}.three{grid-template-columns:1fr}}

.bars .row{display:flex;align-items:center;gap:11px;margin:10px 0}.bars .lab{width:130px;font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .track{flex:1;height:8px;background:#EEF3F1;border-radius:6px;overflow:hidden}.bars .fill{height:100%;border-radius:6px;background:var(--teal)}
.bars .v{width:36px;text-align:right;font-weight:600;font-size:12.5px}
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donut{width:130px;height:130px;border-radius:50%;flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center}
.donut::after{content:"";position:absolute;inset:19px;background:var(--card);border-radius:50%}
.donut .mid{position:relative;z-index:1;text-align:center}.donut .mid b{font-size:22px;font-weight:700;display:block}.donut .mid span{font-size:10.5px;color:var(--muted)}
.legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px}.legend .li{display:flex;align-items:center;gap:8px}.legend .dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}.legend .li b{margin-left:auto}
.funnel{display:flex;flex-direction:column;gap:7px}.funnel .fr{display:flex;align-items:center;gap:10px}
.funnel .fbar{height:30px;border-radius:8px;display:flex;align-items:center;padding:0 11px;color:#fff;font-weight:600;font-size:12.5px;min-width:44px}.funnel .fl{width:96px;font-size:12px;color:var(--ink2)}

.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;font-size:11px;font-weight:500;background:var(--teal-tint);color:var(--teal-d)}
.tag.g0{background:var(--teal-tint);color:var(--teal-d)}.tag.g1{background:#EAF3EE;color:#2F7C57}.tag.g2{background:var(--gold-tint);color:var(--gold-d)}
.tag .x{cursor:pointer;opacity:.6;font-weight:700}.tag .x:hover{opacity:1}
.tagpick{display:flex;flex-wrap:wrap;gap:6px}.tagpick .opt{padding:5px 10px;border:0.5px solid var(--line);border-radius:8px;font-size:11.5px;font-weight:500;color:var(--muted);cursor:pointer;background:#fff}.tagpick .opt.on{background:var(--teal);border-color:var(--teal);color:#fff}
.tier1{background:var(--gold-tint);color:var(--gold-d)}.tier2{background:var(--teal-tint);color:var(--teal-d)}.tier3{background:#E9EFFB;color:#3355a6}.tier4{background:#EFE9F8;color:#5b46a8}
.lv{font-size:10px;padding:2px 7px;border-radius:6px;background:#EEF3F1;color:var(--ink2);font-weight:500}
.rag{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}.rag-Green{background:var(--green)}.rag-Amber{background:var(--gold)}.rag-Red{background:var(--red)}
.pri-High{color:var(--red)}.pri-Medium{color:var(--gold-d)}.pri-Low{color:var(--muted)}
.st{padding:3px 10px;border-radius:8px;font-size:11px;font-weight:600}
.st-Identified,.st-ToDo,.st-Pending,.st-Notstarted,.st-Pipeline,.st-Draft,.st-Unpaid{background:#EEF3F1;color:#5a6d67}
.st-Drafting,.st-InProgress,.st-Mobilising,.st-Sent{background:var(--gold-tint);color:var(--gold-d)}
.st-Submitted,.st-Internalreview,.st-Active,.st-Partial{background:var(--teal-tint);color:var(--teal-d)}
.st-UnderReview,.st-AtRisk{background:#EFE9F8;color:#5b46a8}
.st-Won,.st-Done,.st-Met,.st-Accepted,.st-Completed,.st-Paid{background:#E4F1EA;color:#2F7C57}
.st-Lost,.st-Blocked,.st-Missed,.st-Overdue{background:var(--red-tint);color:var(--red)}
.st-Declined,.st-OnHold,.st-Closing{background:#F0F2F1;color:#79837f}
.dl{font-weight:600}.dl.red{color:var(--red)}.dl.amber{color:var(--gold-d)}.dl.yellow{color:#a8801a}.dl.green{color:var(--green)}.dl.grey{color:var(--faint)}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 15px;border-bottom:0.5px solid var(--line2);vertical-align:middle;font-size:13px}
th{color:var(--muted);font-size:10.5px;letter-spacing:.2px;font-weight:600;background:#FBFDFC;position:sticky;top:0;cursor:pointer;white-space:nowrap;text-transform:none}
tbody tr{cursor:pointer;transition:.1s}tbody tr:hover{background:#F6FAF8}tbody tr:last-child td{border-bottom:none}

.board{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px}
.col{background:#F6FAF8;border:0.5px solid var(--line);border-radius:14px;min-width:262px;width:262px;flex:0 0 auto;display:flex;flex-direction:column;max-height:76vh}
.col h4{font-size:11px;letter-spacing:.3px;color:var(--muted);margin:0;padding:13px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:600;text-transform:none}
.col .items{padding:0 10px 10px;overflow-y:auto;flex:1;min-height:44px}
.tile{background:#fff;border:0.5px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px;cursor:grab;box-shadow:var(--sh);transition:.14s ease}
.tile:hover{box-shadow:var(--sh2);border-color:#D9E6E1;transform:translateY(-1px)}
.tile .tt{font-weight:600;font-size:13px;line-height:1.35;margin-bottom:7px;color:var(--ink)}
.tile .tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}.tile .meta{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:6px;margin-top:5px}

.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:15px}
.fcard{background:var(--card);border:0.5px solid var(--line);border-radius:var(--r-lg);padding:17px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:9px;transition:.15s ease}
.fcard:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.fcard .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.fcard .cat{font-size:10px;color:var(--teal);font-weight:600;letter-spacing:.2px}
.fcard h4{margin:2px 0 0;font-size:14.5px;line-height:1.3;font-weight:600;color:var(--ink)}
.fcard .note{font-size:12px;color:var(--muted);line-height:1.5;flex:1}.fcard .tags{display:flex;gap:5px;flex-wrap:wrap}.fcard .actions{display:flex;gap:8px;align-items:center;margin-top:2px}

.pj-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-bottom:18px}
.pj-head .meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px}.pj-head .meta div{font-size:12px;color:var(--muted)}.pj-head .meta b{display:block;color:var(--ink);font-size:14px;margin-top:2px;font-weight:600}
.progress{height:8px;background:#EEF3F1;border-radius:6px;overflow:hidden;min-width:160px}.progress .p{height:100%;background:var(--teal)}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:0.5px solid var(--line);margin-bottom:18px;overflow-x:auto}
.subtabs button{border:none;background:none;padding:11px 15px;font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.subtabs button.on{color:var(--teal-d);border-bottom-color:var(--teal);font-weight:600}
.timeline{position:relative;padding-left:8px}.tl-item{display:flex;gap:14px;padding:2px 0 18px;position:relative}
.tl-item::before{content:"";position:absolute;left:6px;top:20px;bottom:-2px;width:2px;background:var(--line)}.tl-item:last-child::before{display:none}
.tl-dot{width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line);flex:0 0 auto;margin-top:3px;z-index:1}
.matrix{display:grid;grid-template-columns:auto repeat(5,1fr);gap:4px;font-size:11px}.matrix .cellm{aspect-ratio:1.7;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}.matrix .axis{display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600}
.mini{display:flex;flex-direction:column;gap:2px}.mini b{font-size:16px;letter-spacing:-.2px;font-weight:700}.mini span{font-size:11px;color:var(--muted)}

.modal{position:fixed;inset:0;background:rgba(20,40,36,.42);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;z-index:60;overflow:auto;padding:36px 16px}
.modal.open{display:flex;animation:fade .16s ease}
.sheet{background:#fff;border-radius:18px;width:100%;max-width:660px;padding:24px;box-shadow:var(--sh3);animation:fade .2s ease}
.sheet.wide{max-width:840px}
.sheet h3{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.3px}.sheet .sh-sub{color:var(--muted);font-size:12.5px;margin:0 0 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}
.field label{font-size:11px;color:var(--muted);letter-spacing:.2px;font-weight:600}
.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.empty{color:var(--muted);text-align:center;padding:48px 20px;font-size:14px}.empty .big{font-size:30px;margin-bottom:8px;color:var(--faint)}
.banner{border-radius:12px;padding:12px 16px;font-size:13px;margin-bottom:16px;border:0.5px solid;display:flex;gap:10px;align-items:center}
.banner.warn{background:var(--gold-tint);border-color:#EEDCB4;color:var(--gold-d)}.banner.info{background:var(--teal-tint);border-color:#CFE6E0;color:var(--teal-d)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.pill-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.fp{padding:7px 13px;border-radius:20px;border:0.5px solid var(--line);background:#fff;font-size:12.5px;color:var(--muted);font-weight:500;box-shadow:var(--sh)}.fp.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.report{white-space:pre-wrap;font-family:'Inter',sans-serif;font-size:13px;line-height:1.65;background:#FBFDFC;border:0.5px solid var(--line);border-radius:12px;padding:18px;max-height:60vh;overflow:auto}

@media(max-width:860px){
 :root{--sidebar:0px}
 aside{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .26s ease;box-shadow:var(--sh3);width:236px;flex-basis:236px}
 body.nav-open aside{transform:none}body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(20,40,36,.4);z-index:25}
 .topbar .burger{display:block}.content{padding:18px 15px}.topbar{padding:12px 15px}.search{min-width:0}.search kbd{display:none}.grid2{grid-template-columns:1fr}.sheet{padding:18px}
}
@media(max-width:560px){.search{display:none}.crumb h2{font-size:17px}.kpi .n{font-size:24px}}

/* ===== EPIC Hub premium + interactive layer ===== */
.kpi .n, .big-serif{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.5px}
.kpi{animation:fadeup .45s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bars .fill{transform-origin:left;animation:growx .7s cubic-bezier(.4,0,.2,1) both}
.funnel .fbar{transform-origin:left;animation:growx .6s cubic-bezier(.4,0,.2,1) both}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.donut{animation:pop .5s cubic-bezier(.34,1.4,.64,1) both}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.tile,.fcard,.card{animation:fadeup .4s ease both}
/* range sliders */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:#DDE9E4;width:100%;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--teal);cursor:pointer;box-shadow:0 1px 4px rgba(15,90,82,.4)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--teal);cursor:pointer}
/* command palette */
#cmdk{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(20,40,36,.35);backdrop-filter:blur(3px)}
#cmdk.open{display:flex;animation:fade .12s ease}
.cmdk-box{background:#fff;border:0.5px solid var(--line);border-radius:16px;width:100%;max-width:540px;box-shadow:var(--sh3);overflow:hidden}
.cmdk-box input{border:none;border-bottom:0.5px solid var(--line);border-radius:0;font-size:15px;padding:15px 18px}
.cmdk-box input:focus{box-shadow:none}
.cmdk-list{max-height:340px;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;font-size:13.5px;cursor:pointer;color:var(--ink2)}
.cmdk-item .k{font-size:10px;color:var(--faint)}
.cmdk-item.sel,.cmdk-item:hover{background:var(--teal-tint);color:var(--teal-d)}
.cmdk-item .ic{width:18px;color:var(--teal)}
.cmdk-empty{padding:20px;text-align:center;color:var(--muted);font-size:13px}
/* calculators / tools */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.calc-grid{grid-template-columns:1fr}}
.calc{border:0.5px solid var(--line);border-radius:14px;padding:16px}
.calc h4{margin:0 0 12px;font-size:14px;font-weight:600}
.calc .out{margin-top:12px;padding:12px 14px;background:var(--teal-tint);border-radius:10px;display:flex;justify-content:space-between;align-items:center}
.calc .out b{font-family:Georgia,serif;font-size:22px;color:var(--teal-d)}
.calc .out.gold{background:var(--gold-tint)}.calc .out.gold b{color:var(--gold-d)}
.calc .rowf{display:flex;gap:10px;margin-bottom:9px}.calc .rowf>div{flex:1}
.tools-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.hero-serif{font-family:Georgia,serif;font-size:44px;letter-spacing:-1px;color:var(--ink);line-height:1.1}
.scen-badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;background:var(--teal-tint);color:var(--teal-d);font-weight:600}

/* ===== Warm cream / gold / grey appearance (per reference light theme) ===== */
:root{
  --bg:#F6F2E8; --bg2:#ECE6D6; --card:#FFFFFF;
  --line:#E7E0CE; --line2:#F0EADB;
  --ink:#201D16; --ink2:#3C3729; --muted:#7C7565; --faint:#A79F8B;
  --gold-tint:#F3EAD4;
}
body{background:var(--bg)}
.crumb h2,.login-card h1,.sheet h3,.hero-serif{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.4px;font-weight:600}
#login{background:#F1ECDF}
.login-logo{background:#F3EAD4;color:#9B7B33}
aside{background:var(--bg);border-right-color:var(--line)}
.brand .mk{background:#F3EAD4;color:#9B7B33}
.mod-switch{background:#ECE6D6}
.mod-switch button.on{background:#fff}
nav.side button.active{background:#EDF3F0;color:var(--teal-d)}
nav.side button.active .ic{color:var(--teal)}
.topbar{background:rgba(246,242,232,.85);border-bottom-color:var(--line)}
.search{background:#fff}
.col{background:#F1ECDE;border-color:var(--line)}
.kpi .ic{background:#F3EAD4;color:#9B7B33}
.bars .track,.progress{background:#E7E0CE}
.donut::after{background:var(--card)}
.side-foot .out,.mod-switch{border-color:var(--line)}
.tag.g0{background:#EAF3EF;color:var(--teal-d)}

/* ===== fill the screen: wider fluid content, tighter background ratio ===== */
.content{max-width:1780px;padding:22px clamp(16px,2.6vw,40px)}
@media(min-width:1500px){ .kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .two{grid-template-columns:1.5fr 1fr} }
@media(min-width:2000px){ .content{max-width:1900px} }
.topbar{padding-left:clamp(16px,2.6vw,40px);padding-right:clamp(16px,2.6vw,40px)}

/* ===== notification center + scan ===== */
.icon-btn{position:relative;background:#fff;border:0.5px solid var(--line);border-radius:10px;width:38px;height:38px;font-size:16px;color:var(--ink2);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#F4F8F6}
.bell-badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:9px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-weight:700}
#notif-panel{position:fixed;top:60px;right:18px;width:346px;max-height:72vh;overflow:auto;background:#fff;border:0.5px solid var(--line);border-radius:16px;box-shadow:var(--sh3);z-index:70;display:none}
#notif-panel.open{display:block;animation:fadeup .18s ease both}
.notif-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:0.5px solid var(--line);position:sticky;top:0;background:#fff}
.notif-h b{font-size:14px}.notif-h a{font-size:11.5px;color:var(--teal);cursor:pointer;font-weight:600}
.notif-i{padding:12px 16px;border-bottom:0.5px solid var(--line2);cursor:pointer;display:flex;gap:10px}
.notif-i:hover{background:#F6FAF8}
.notif-i.unread{background:#FBF5E6}
.notif-i .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:5px;flex:0 0 auto}
.notif-i.read .dot{background:var(--line)}
.notif-i b{font-size:12.5px;display:block}.notif-i p{margin:3px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}
.notif-i .tm{font-size:10px;color:var(--faint);margin-top:3px}
.notif-empty{padding:28px;text-align:center;color:var(--muted);font-size:13px}

/* ===== Tools refinement (budget builder, clocks) ===== */
.tool-card{background:#fff;border:0.5px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:var(--sh)}
.tool-card h4{margin:0 0 2px;font-size:15px;font-weight:600}
.tool-card .hint{font-size:12px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.brow{display:grid;grid-template-columns:1fr 108px 78px 104px 28px;gap:8px;align-items:center;margin-bottom:8px}
.brow.head{font-size:10.5px;color:var(--faint);font-weight:600;margin-bottom:5px}
.brow input,.crow input{padding:8px 10px}
.brow .lt{font-weight:600;font-size:13px;text-align:right;color:var(--ink)}
.brow .del,.crow .del{border:none;background:none;color:var(--faint);cursor:pointer;font-size:14px}
.brow .del:hover,.crow .del:hover{color:var(--red)}
.crow{display:grid;grid-template-columns:1fr 130px 28px;gap:8px;align-items:center;margin-bottom:8px}
.badd{background:var(--teal-tint);color:var(--teal-d);border:none;border-radius:9px;padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;margin-top:2px}
.badd:hover{background:#DBEDE8}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.presets button{border:0.5px solid var(--line);background:#fff;border-radius:20px;padding:4px 11px;font-size:11.5px;color:var(--muted);cursor:pointer}
.presets button:hover{border-color:var(--teal);color:var(--teal-d)}
.rates3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.bsum{background:#FBFAF3;border:0.5px solid var(--line);border-radius:12px;padding:14px 16px}
.bsum .r{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;color:var(--ink2)}
.bsum .r.sub{border-top:0.5px solid var(--line);margin-top:6px;padding-top:8px;font-weight:600;color:var(--ink)}
.bsum .grand{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid var(--teal);margin-top:8px;padding-top:10px}
.bsum .grand span{font-size:13px;color:var(--muted)}
.bsum .grand b{font-family:Georgia,serif;font-size:27px;color:var(--teal-d);letter-spacing:-.4px}
.bsum .etb{text-align:right;font-size:12px;color:var(--gold-d);margin-top:6px}
.tgrid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:720px){.tgrid2{grid-template-columns:1fr}.brow{grid-template-columns:1fr 88px 64px 88px 24px}.rates3{grid-template-columns:1fr 1fr}}
.clocks{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.clockcard{flex:1;min-width:180px;background:#fff;border:0.5px solid var(--line);border-radius:12px;padding:15px 17px;box-shadow:var(--sh)}
.clockcard .lbl{font-size:11px;color:var(--faint);margin-bottom:6px;font-weight:600}
.clockcard .big{font-family:Georgia,serif;font-size:32px;color:var(--teal-d);line-height:1.05}
.clockcard.alt .big{color:var(--ink)}
.clockcard .sub{font-size:12px;color:var(--muted);margin-top:5px}
.tool-inrow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.tool-inrow>div{flex:1;min-width:120px}

/* ===== Tools tabs (clean teal pill) ===== */
.ttabs{display:inline-flex;background:var(--bg2);border:0.5px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.ttabs button{border:none;background:transparent;color:var(--muted);padding:9px 20px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s ease}
.ttabs button:hover{color:var(--ink)}
.ttabs button.on{background:var(--teal);color:#fff;box-shadow:var(--sh)}

/* native date/time controls: match app font + brand picker icon */
input[type=date],input[type=time],input[type=month]{font-variant-numeric:tabular-nums}
input[type=time]::-webkit-calendar-picker-indicator,input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
input[type=time]::-webkit-calendar-picker-indicator:hover,input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}