/* ==========================================================================
   Soft UI shell — floating white nav card, soft grey canvas, two columns.
   Loaded after app.css; every rule here overrides the base sheet, so the
   original stylesheet stays intact and removing this one <link> restores
   the previous look.
   ========================================================================== */
body{font-size:13.5px;letter-spacing:-.005em}
h1,h2,h3,.tile .val{letter-spacing:-.02em}

/* ---- app grid: sidebar + content ---- */
#app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh;background:var(--bg)}
.shell{min-width:0;display:flex;flex-direction:column}

/* ---- sidebar: a white card floating on the canvas ---- */
.sidebar{position:sticky;top:0;align-self:start;height:100vh;padding:16px 12px 16px 16px;display:flex;flex-direction:column;z-index:41}
.sidebar>*{flex:none}
.sidebar{background:none}
.sidebar::before{content:"";position:absolute;inset:16px 0 16px 16px;background:var(--side);border-radius:20px;box-shadow:var(--shadow);z-index:-1}
.sidebar .brand{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px;font-weight:600;line-height:1.3;padding:18px 16px 14px;white-space:normal}
.sidebar .brand i{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#8b9bf0);display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm)}
.sidebar .brand i svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.side-rule{margin:0 16px 12px;border:0;border-top:1px solid var(--side-line)}
.navlabel{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:18px 16px 8px}
.tabs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0 10px}
.tabs a,.navbtn{display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:12px;color:var(--text2);font-size:13.5px;font-weight:500;text-decoration:none;width:100%;transition:background .15s,box-shadow .15s,color .15s}
.tabs a .ni,.navbtn .ni{width:30px;height:30px;border-radius:9px;background:var(--cell);display:grid;place-items:center;flex:none;transition:background .15s,box-shadow .15s}
.tabs a svg,.navbtn svg{width:15px;height:15px;stroke:var(--text2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs a:hover,.navbtn:hover{color:var(--text);text-decoration:none;background:var(--side-hover)}
.tabs a.on{background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--shadow)}
.tabs a.on .ni{background:linear-gradient(135deg,var(--accent),#8b9bf0);box-shadow:var(--shadow-sm)}
.tabs a.on svg{stroke:#fff}
.tabs a .badge{margin-left:auto;background:var(--accent-soft);color:var(--accent2);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:9px}
.side-foot{margin-top:auto;padding:0 10px}

/* ---- top bar: transparent over the canvas ---- */
.topbar{display:flex;align-items:center;gap:12px;padding:16px 24px 8px;background:none;border:0;position:sticky;top:0;z-index:40;min-height:0;backdrop-filter:blur(8px)}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);white-space:nowrap}
.crumb b{color:var(--text);font-weight:600}
.crumb .sl{color:var(--muted)}
.topsearch{position:relative;flex:0 1 260px}
.topsearch input{width:100%;height:38px;padding:0 12px 0 36px;border:1px solid var(--border2);border-radius:12px;background:var(--card);color:var(--text);outline:none;font-size:13px;box-shadow:var(--shadow-sm)}
.topsearch input:focus{border-color:var(--accent)}
.topsearch input::placeholder{color:var(--muted)}
.topsearch svg{position:absolute;left:12px;top:11px;width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.9;stroke-linecap:round}
.icobtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--border2);background:var(--card);display:grid;place-items:center;color:var(--text2);position:relative;flex:none;box-shadow:var(--shadow-sm)}
.icobtn:hover{border-color:var(--accent);color:var(--accent)}
.icobtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icobtn .i-sun{display:none}
[data-theme="dark"] .icobtn .i-sun{display:block}
[data-theme="dark"] .icobtn .i-moon{display:none}
.navtog{display:none}
.bell .n{top:-5px;right:-5px;border-color:var(--card)}
.user>button{height:38px;border-radius:12px;padding:0 10px 0 5px;border-color:var(--border2);background:var(--card);box-shadow:var(--shadow-sm)}
.avatar{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),#8b9bf0)}

/* ---- canvas ---- */
.wrap{max-width:1560px;padding:8px 24px 90px}
.page{max-width:1180px;padding:8px 24px 60px}
.card{border-radius:var(--r);box-shadow:var(--shadow);border-color:transparent}
[data-theme="dark"] .card{border-color:var(--border)}
.dash-head h1{font-size:21px;font-weight:700}
.page h2{font-size:19px;font-weight:700}
.btn{height:38px;border-radius:12px;font-weight:600;font-size:12.6px;border-color:var(--border2);background:var(--card);box-shadow:var(--shadow-sm)}
.btn.sm{height:32px;border-radius:10px}
.btn.primary{background:linear-gradient(135deg,var(--accent),#8b9bf0);border-color:transparent;color:#fff}
.btn.primary:hover{background:linear-gradient(135deg,#5165dd,#7d8def)}
.btn.good{background:var(--good-tint);border-color:transparent;color:var(--good-fg)}
.btn.bad{background:var(--crit-tint);border-color:transparent;color:var(--crit-fg)}
.btn.warn{background:var(--warn-tint);border-color:transparent;color:var(--warn-fg)}
.btn.needs{background:var(--needs-tint);border-color:transparent;color:var(--needs-fg)}
.search input,.tog,.dd-btn{height:38px;border-radius:12px;box-shadow:var(--shadow-sm)}
.search svg{top:11px}
.clear,select.sel.h32{height:38px}
select.sel{border-radius:10px;height:32px}
.chip{border-radius:999px;height:28px;border-color:transparent;background:var(--accent-soft)}
.banner{border-radius:14px;padding:11px 16px;border-color:transparent;background:var(--warn-tint)}
.banner.sync{background:var(--accent-soft)}

/* ---- KPI tiles: value left, soft gradient icon chip right ---- */
.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.tile{padding:16px 18px;border-radius:var(--r);box-shadow:var(--shadow);border-color:transparent;position:relative}
[data-theme="dark"] .tile{border-color:var(--border)}
.tile .lab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;padding-right:52px}
.tile .lab svg{position:absolute;top:16px;right:18px;width:38px;height:38px;padding:10px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#8b9bf0);stroke:#fff!important;box-sizing:border-box;box-shadow:var(--shadow-sm)}
.tile .val{font-size:24px;font-weight:700;color:var(--text)}
.tile .sub{margin-top:6px;padding-right:52px}
.tile .sub b{color:var(--good-fg);font-weight:700}

/* ---- two-column analytics ---- */
.grid2,.grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.gridsrc{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
@media (max-width:1080px){.grid2,.grid3,.gridsrc,.kpis{grid-template-columns:1fr}}
.panel{padding:18px 18px 14px}
.panel h3{font-size:14.5px;font-weight:700}
.panel .ph{gap:14px}
.panel .ph>.num{white-space:nowrap;flex:none;align-self:flex-start}
.mx-card{padding:18px 20px 16px;margin-bottom:14px}
.mx-head h2{font-size:15px;font-weight:700}
.legend i{background:var(--heat)}

/* ---- bars: rounded, soft palette ---- */
.brow{border-radius:10px;padding:5px 8px}
.brow .track{height:8px;background:var(--cell);border-radius:999px;overflow:hidden}
.brow .fill{height:8px;border-radius:999px;background:var(--c1)}
.bars .brow:nth-child(6n+2) .fill{background:var(--c2)}
.bars .brow:nth-child(6n+3) .fill{background:var(--c3)}
.bars .brow:nth-child(6n+4) .fill{background:var(--c4)}
.bars .brow:nth-child(6n+5) .fill{background:var(--c5)}
.bars .brow:nth-child(6n+6) .fill{background:var(--c6)}
.brow .r{color:var(--good-fg)}

/* ---- donut card ---- */
.donut-card .dwrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:8px 0 4px}
.donut{width:150px;height:150px;border-radius:50%;flex:none;position:relative;display:grid;place-items:center}
.donut::after{content:"";position:absolute;inset:22px;border-radius:50%;background:var(--card)}
.donut .mid{position:relative;z-index:1;text-align:center}
.donut .mid b{display:block;font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--text)}
.donut .mid span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.dlegend{display:flex;flex-direction:column;gap:6px;min-width:150px;flex:1}
.dleg{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font-size:12.5px;padding:5px 7px;border-radius:9px;color:var(--text)}
.dleg:hover{background:var(--cell)}
.dleg.on{background:var(--accent-soft)}
.dleg.dim{opacity:.42}
.dleg i{width:9px;height:9px;border-radius:3px;flex:none}
.dleg .n{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.dleg .p{color:var(--muted);font-size:11.5px;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* ---- tables ---- */
.tbl-card{margin-bottom:14px}
table.dt th{background:none;border-top:0;border-bottom:1px solid var(--border);font-size:10.5px;letter-spacing:.07em;color:var(--muted)}
table.dt td{border-bottom:1px solid var(--border)}
.pill{border-radius:999px;height:20px;font-weight:600;background:var(--cell2);color:var(--text2)}
.pill.dm{background:var(--dm-tint);color:var(--dm-fg)}
.pill.ready{background:var(--good-tint);color:var(--good-fg)}
.pill.st-approved{background:var(--good-tint);color:var(--good-fg)}
.pill.st-rejected{background:var(--crit-tint);color:var(--crit-fg)}
.pill.st-hold{background:var(--warn-tint);color:var(--warn-fg)}
.pill.needs{background:var(--needs-tint);color:var(--needs-fg)}
.pill.vby{background:var(--good-tint);color:var(--good-fg)}
.act-pill{border-radius:999px;font-weight:600}
table.dt .good{color:var(--good-fg)}
.pager button{border-radius:9px;height:32px;min-width:32px}
.pager button.on{background:var(--accent);border-color:var(--accent)}

/* ---- heat cells: pale → saturated, so ink flips at the top of the ramp ---- */
.cell{border-radius:10px;height:48px}
.cell.sel{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.cell small{color:var(--good-fg)}
.cell.inkw{color:#fff}
.cell.inkw small{color:rgba(255,255,255,.9)}
.cell.light{color:#0b1220}
.cell.light small{color:var(--good-ink)}

/* ---- preview pane (the second column) ---- */
.layout{grid-template-columns:minmax(0,1fr) 430px;gap:14px}
.pane{top:14px;max-height:calc(100vh - 28px)}
.pane-top,.pane-foot{padding:12px 16px}
.pane-top{border-color:var(--border)}
.dr-status,details.editblk,.vs-stat{border-radius:12px}
.f input,.f select,.f textarea{border-radius:10px;background:var(--cell)}
.hist div,.dr-note{border-radius:10px}
.dr-note.warn{color:var(--warn-fg);background:var(--warn-tint)}
.dr-note.needs{color:var(--needs-fg);background:var(--needs-tint)}
.dr-note.needs b{color:var(--needs-fg)}
.vs-row,.vs-lead,.act button,.notif,.dd-item{border-radius:9px}

/* ---- floating chrome ---- */
#tip,.toast,.bulk{background:var(--pop);border:1px solid var(--pop-line);color:var(--text);box-shadow:var(--shadow-lg)}
#tip{border-radius:10px}
.toast{border-radius:12px}
.bulk{border-radius:14px;left:auto;right:24px}
body.stacked .bulk,body.narrow .bulk{left:50%;right:auto}
.pop{border-radius:var(--r);box-shadow:var(--shadow-lg);background:var(--card);border-color:var(--border2)}
.dd-pop{border-radius:12px;box-shadow:var(--shadow-lg)}
.offline{color:var(--warn-fg);background:var(--warn-tint);border-color:transparent;border-radius:999px;padding:7px 16px;box-shadow:var(--shadow)}
.drop{border-radius:var(--r);border-color:var(--border2)}
.qrow,.mrow{border-radius:12px}

/* ---- login ---- */
.login{background:radial-gradient(900px 500px at 15% -10%,rgba(94,114,228,.13),transparent 62%),var(--bg)}
.login .box{border-radius:20px;box-shadow:var(--shadow-lg);border-color:transparent}
.login h1{font-weight:700}
.login .err{color:var(--crit-fg);background:var(--crit-tint);border-color:transparent;border-radius:12px}
.login .dev input{border-radius:12px;height:38px;background:var(--cell)}
.login .dev .warn{color:var(--warn-fg)}
.brand.lg i{border-radius:14px;background:linear-gradient(135deg,var(--accent),#8b9bf0)}
.brand.lg i svg{stroke:#fff}
.form-inline input{height:38px;border-radius:12px;background:var(--cell)}

/* ---- responsive ---- */
@media (max-width:1180px){
  #app{grid-template-columns:96px minmax(0,1fr)}
  .sidebar{padding:16px 8px 16px 12px}
  .sidebar::before{inset:16px 0 16px 12px}
  .sidebar .brand span,.tabs a .t,.navbtn .t,.navlabel{display:none}
  .sidebar .brand{justify-content:center;padding:18px 0 14px}
  .side-rule{margin:0 12px 12px}
  .tabs a,.navbtn{justify-content:center;padding:0}
}
@media (max-width:820px){
  #app{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;width:264px;padding:16px 12px;transform:translateX(-100%);transition:transform .2s}
  .sidebar::before{inset:16px 0 16px 12px;box-shadow:var(--shadow-lg)}
  .sidebar .brand span,.tabs a .t,.navbtn .t,.navlabel{display:block}
  .sidebar .brand{justify-content:flex-start;padding:18px 16px 14px}
  .tabs a,.navbtn{justify-content:flex-start;padding:0 12px}
  body.nav-open .sidebar{transform:none}
  .navtog{display:grid}
  .topbar{padding:14px}
  .crumb,.presence{display:none}
  .wrap{padding:6px 14px 90px}
  .page{padding:6px 14px 60px}
}
@media (max-width:560px){.topsearch{display:none}}

/* ==========================================================================
   Panels: Dashboard / Leads / Analytics + the lead dialog
   ========================================================================== */
.filter-slot{margin-bottom:6px}
.filter-slot:empty{display:none}
.tabs a .badge{margin-left:auto;font-variant-numeric:tabular-nums}
.tabs a .badge:empty{display:none}
.dash-head{margin-bottom:16px}

/* verifier cards */
.verifiers{margin-bottom:14px}
.vcard{padding:18px 18px 14px}
.vtop{display:flex;align-items:center;gap:14px}
.vcard .avatar.lg{width:44px;height:44px;border-radius:14px;font-size:15px;flex:none}
.vwho{font-weight:700;font-size:14.5px;color:var(--text)}
.vsub{font-size:12px;color:var(--text2);margin-top:2px}
.vnum{margin-left:auto;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.vbar{height:8px;border-radius:999px;background:var(--cell);margin:14px 0 12px;overflow:hidden}
.vbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#8b9bf0)}
.vfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.vfoot .btn.sm{text-decoration:none}

/* the lead pane is a centred dialog, from every view */
.pane{display:none}
.pane.as-drawer,body.stacked .pane.as-drawer,body.narrow .pane.as-drawer{display:flex;position:fixed;inset:0;margin:auto;top:0;right:0;bottom:0;left:0;width:min(820px,calc(100vw - 32px));height:min(90vh,940px);max-height:none;z-index:49;border-radius:20px;border:1px solid var(--border);box-shadow:var(--shadow-lg);background:var(--card)}
.scrim{background:rgba(52,71,103,.35);backdrop-filter:blur(2px)}
[data-theme="dark"] .scrim{background:rgba(3,6,12,.6)}
.pane-top .x{width:32px;height:32px;border-radius:10px}
.pane-body{padding:16px 20px 20px}
.pane-foot{border-radius:0 0 20px 20px}
.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
@media (max-width:820px){.facts{grid-template-columns:1fr 1fr}.pane.as-drawer{width:100vw;height:100vh;border-radius:0}}
.layout{display:block}

/* ---- lead dialog: approval row + email-verified tick ---- */
.approve-row{align-items:center;gap:14px;padding:14px 16px}
.approve-row .cur{margin-right:auto;display:flex;flex-direction:column;gap:3px}
.ap-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--text)}
.ap-title svg{width:16px;height:16px;stroke:var(--good);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ap-title.muted{color:var(--text2);font-weight:600}
.ap-by{font-size:12px;color:var(--text2)}
.approve-row.done{background:var(--good-tint);border-color:transparent}
.approve-row.done .ap-by{color:var(--good-fg);font-weight:600}
.ap-btn{height:40px;padding:0 18px;font-size:13.5px;background:linear-gradient(135deg,#4aab72,#6cc793);color:#fff}
.ap-btn:hover{background:linear-gradient(135deg,#3f9c66,#5fbd88)}
.ap-btn svg{stroke:#fff}
.email-fact{grid-column:1/-1}
.vchk{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--text2);cursor:pointer;user-select:none}
.vchk input{width:16px;height:16px;accent-color:var(--good);cursor:pointer;margin:0}
.vchk input:disabled{opacity:.5}
.vbox{display:inline-flex;align-items:center;gap:7px;margin-top:8px;margin-left:12px;padding:6px 11px;border-radius:10px;background:var(--good-tint);color:var(--good-fg);font-size:12.5px}
.vbox svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vbox b{font-weight:700}

/* ---- lead dialog: always-open edit form, clickable facts ---- */
.editblk{margin-top:16px;border:1px solid var(--border);border-radius:14px;background:var(--cell)}
.edit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 16px 10px}
.edit-head h3{margin:0 0 2px;font-size:14px;font-weight:700;color:var(--text)}
.edit-head p{margin:0;font-size:12px;color:var(--text2)}
.editblk .inner{padding:0 16px 14px;border-top:0}
.editblk .inner h4{margin:14px 0 8px}
.editblk .inner h4:first-child{margin-top:4px}
.f input,.f select,.f textarea{background:var(--card)}
.fact.editable{cursor:pointer;border-radius:8px;margin:-4px -6px;padding:4px 6px;transition:background .12s}
.fact.editable:hover{background:var(--accent-soft)}
.fact.editable:hover .k::after{content:" · edit";color:var(--accent2);font-weight:600}
.lp-id{position:relative;padding-right:80px}
.edit-jump{position:absolute;right:0;top:0}

/* ---- verification verdicts: valid / risky / invalid ---- */
.pill.vby.vr-risky,.vbox.vr-risky{background:var(--warn-tint);color:var(--warn-fg)}
.pill.vby.vr-risky i{background:var(--warn)}
.pill.vby.vr-invalid,.vbox.vr-invalid{background:var(--crit-tint);color:var(--crit-fg)}
.pill.vby.vr-invalid i{background:var(--crit)}
.vdrop{margin-top:4px}
.vdrop .ico{background:var(--good-tint)}
.vdrop svg{stroke:var(--good-fg)}

/* ---- password sign-in + member password management ---- */
.mrow{grid-template-columns:36px 1fr auto}
.macts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mrow .btn.bad{visibility:visible}
.mrow:hover .btn.bad{visibility:visible}
.pw-scrim{position:fixed;inset:0;z-index:80;background:rgba(52,71,103,.35);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px}
[data-theme="dark"] .pw-scrim{background:rgba(3,6,12,.6)}
.pw-dialog{width:min(420px,100%);padding:22px 22px 18px;border-radius:18px;box-shadow:var(--shadow-lg)}
.pw-dialog h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--text)}
.pw-dialog p{margin:0 0 14px;font-size:12.5px;line-height:1.5}
.pw-dialog .f{margin-bottom:10px}
.pw-dialog input{width:100%;height:38px;padding:0 11px;border:1px solid var(--border2);border-radius:10px;background:var(--cell);color:var(--text);outline:none;font-size:13.5px}
.pw-dialog input:focus{border-color:var(--accent);background:var(--card)}
.pw-err{font-size:12.5px;color:var(--crit-fg);min-height:18px;margin:2px 0 4px}
.pw-err:empty{min-height:0}
.pw-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.login .dev label{margin:10px 0 4px}
#pw-login{border-top:1px solid var(--border);margin-top:14px;padding-top:14px}