/* ── Lohn Caulder portal concept · sample data only ─────────────────── */

:root{
  --navy-950:#0b1f33; --navy-900:#102a43; --navy-800:#16324c; --navy-700:#1d3f5e;
  --blue-700:#175a9e; --blue-600:#1f6dc2; --blue-500:#3585d6; --blue-050:#ecf3fb; --blue-100:#dbe9f9;
  --ink-900:#16232f; --ink-700:#3e4c59; --ink-500:#627d98; --ink-400:#8fa1b3;
  --line:#e2e8f0; --line-soft:#eef2f6;
  --paper:#f6f8fa; --card:#ffffff;
  --green-700:#256e3f; --green-600:#2f8a4c; --green-050:#e9f6ee; --green-200:#c4e8d1;
  --amber-700:#8a5a12; --amber-600:#b0761e; --amber-050:#fdf3e2; --amber-200:#f3ddb0;
  --red-700:#a32f2f; --red-600:#c23b3b; --red-050:#fbeded; --red-200:#f2cdcd;
  --violet-700:#4f41a3; --violet-600:#6d5bd0; --violet-050:#f0eefb; --violet-200:#ddd8f5;
  --gray-050:#f1f4f7; --gray-200:#dde4ea;
  --r:12px; --r-sm:9px;
  --sh1:0 1px 2px rgba(16,42,67,.05),0 1px 3px rgba(16,42,67,.07);
  --sh2:0 10px 30px rgba(16,42,67,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:400 14px/1.55 "Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink-900);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,select{font:inherit;color:inherit}
::selection{background:var(--blue-100)}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

/* ── brand ─────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:2px solid var(--navy-900);border-radius:8px;
  font-weight:800;font-size:15px;letter-spacing:.04em;color:var(--navy-900);
}
.brand-word{display:flex;flex-direction:column;line-height:1.15}
.brand-word b{font-size:15.5px;font-weight:800;letter-spacing:.10em;color:var(--navy-900);text-transform:uppercase}
.brand-word span{font-size:8.6px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-500);margin-top:2px}
.brand.on-dark .brand-mark{border-color:rgba(255,255,255,.85);color:#fff}
.brand.on-dark .brand-word b{color:#fff}
.brand.on-dark .brand-word span{color:rgba(255,255,255,.55)}

/* ── icons ─────────────────────────────────────────────────────────── */
.ic{display:inline-flex;flex:none;width:18px;height:18px;vertical-align:-4px}
.ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic.lg{width:22px;height:22px}
.ic.sm{width:15px;height:15px}
.ic.fill svg{fill:currentColor;stroke:none}

/* ── login ─────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(480px,1fr) minmax(420px,44%)}
.login-left{display:grid;place-items:center;padding:48px 32px;background:#fff}
.login-card{width:100%;max-width:410px}
.login-card .brand{margin-bottom:38px}
.login-card h1{font-size:26px;font-weight:800;letter-spacing:-.015em;color:var(--navy-900);margin-bottom:10px}
.login-card .sub{color:var(--ink-700);font-size:14.5px;margin-bottom:28px}
.btn-ms{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-weight:600;font-size:14.5px;color:var(--ink-900);box-shadow:var(--sh1);
  transition:box-shadow .15s,border-color .15s;
}
.btn-ms:hover{border-color:var(--ink-400);box-shadow:var(--sh2)}
.btn-ms svg{width:19px;height:19px}
.login-fine{font-size:12.5px;color:var(--ink-500);margin-top:14px}
.login-div{display:flex;align-items:center;gap:12px;margin:30px 0 18px;color:var(--ink-400);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.login-div::before,.login-div::after{content:"";flex:1;height:1px;background:var(--line)}
.persona-row{display:grid;gap:10px}
.persona-btn{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .15s,background .15s;
}
.persona-btn:hover{border-color:var(--blue-500);background:var(--blue-050)}
.persona-btn .av{width:34px;height:34px}
.persona-btn b{display:block;font-size:14px;font-weight:700;color:var(--ink-900)}
.persona-btn span{font-size:12.5px;color:var(--ink-500)}
.persona-btn .go{margin-left:auto;color:var(--ink-400)}

.login-right{
  position:relative;color:#fff;padding:56px 52px;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(900px 520px at 115% -5%,rgba(53,133,214,.30),transparent 62%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 10px),
    linear-gradient(158deg,var(--navy-800),var(--navy-950));
}
.login-right h2{font-size:22px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;max-width:420px}
.login-right .tag{color:rgba(255,255,255,.72);font-size:14px;margin-bottom:26px;max-width:420px}
.login-right ul{list-style:none;display:grid;gap:14px;margin-bottom:40px}
.login-right li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:rgba(255,255,255,.92);max-width:440px}
.login-right li .ic{color:#7db6ea;margin-top:2px}
.login-credit{font-size:11.5px;color:rgba(255,255,255,.45);border-top:1px solid rgba(255,255,255,.12);padding-top:16px}

/* ── shell ─────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:252px 1fr;height:100vh}
.side{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-950));
  color:#fff;display:flex;flex-direction:column;overflow-y:auto;
}
.side-brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.side nav{padding:14px 12px;flex:1}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.38);padding:14px 10px 7px}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;margin:1px 0;
  border-radius:8px;color:rgba(255,255,255,.78);font-size:13.5px;font-weight:500;text-align:left;
  transition:background .12s,color .12s;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav-item.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.nav-item .ic{opacity:.85}
.nav-item .count{margin-left:auto;background:var(--blue-500);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:999px;padding:1px 7px}
.side-foot{padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.08)}
.side-user{display:flex;align-items:center;gap:10px}
.side-user b{display:block;font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.side-user span{font-size:11.5px;color:rgba(255,255,255,.55)}
.side-user .lnk{margin-left:auto;font-size:11.5px;color:rgba(255,255,255,.55)}
.side-user .lnk:hover{color:#fff;text-decoration:none}

.av{width:32px;height:32px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;background:var(--blue-600)}
.av.k{background:#3b6ea5}.av.d{background:#2f8a6f}.av.p{background:#8a5aa5}.av.j{background:#b0761e}

.main{display:flex;flex-direction:column;overflow:hidden}
.top{
  display:flex;align-items:center;gap:16px;padding:0 28px;height:60px;flex:none;
  background:#fff;border-bottom:1px solid var(--line);
}
.top .crumb{font-size:14px;font-weight:600;color:var(--ink-500)}
.top .crumb b{color:var(--ink-900);font-weight:700}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.search{position:relative}
.search input{
  width:250px;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:9px;
  background:var(--paper);font-size:13px;
}
.search input:focus{background:#fff;border-color:var(--blue-500);outline:none}
.search>.ic{position:absolute;left:10px;top:9px;color:var(--ink-400)}
.search-pop{
  position:absolute;top:42px;left:0;width:320px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh2);padding:8px;z-index:40;display:none;
}
.search-pop.open{display:block}
.search-pop .sp-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-400);padding:8px 10px 4px}
.search-pop a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--ink-900);font-size:13px}
.search-pop a:hover{background:var(--paper);text-decoration:none}
.search-pop .ic{color:var(--ink-400)}

.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:var(--ink-500);position:relative}
.iconbtn:hover{background:var(--paper);color:var(--ink-900)}
.iconbtn .dot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:99px;background:var(--red-600);border:1.5px solid #fff}

.content{flex:1;overflow-y:auto}
.wrap{max-width:1160px;margin:0 auto;padding:30px 32px 20px}
.foot{max-width:1160px;margin:0 auto;padding:18px 32px 26px;font-size:11.5px;color:var(--ink-400);
  border-top:1px solid var(--line-soft);width:100%}

/* ── headings / layout helpers ─────────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.page-head h1{font-size:22px;font-weight:800;letter-spacing:-.015em;color:var(--navy-900)}
.page-head .sub{color:var(--ink-500);font-size:13.5px;margin-top:3px;max-width:640px}
.page-head .spacer{flex:1}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-500);margin-bottom:10px}
.backlink:hover{color:var(--ink-900);text-decoration:none}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}
.g31{grid-template-columns:2.05fr 1fr}
.g13{grid-template-columns:1fr 2.05fr}
.stack{display:grid;gap:18px;align-content:start}

/* ── cards & tiles ─────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1)}
.card .card-h{display:flex;align-items:center;gap:10px;padding:16px 20px 0}
.card .card-h h3{font-size:14.5px;font-weight:700;color:var(--ink-900)}
.card .card-h .hint{font-size:12px;color:var(--ink-400)}
.card .card-b{padding:16px 20px 18px}
.card .card-f{padding:12px 20px 14px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-500)}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh1);
  display:block;color:inherit;transition:border-color .15s,box-shadow .15s}
a.tile:hover{text-decoration:none;border-color:var(--blue-500);box-shadow:var(--sh2)}
.tile .t-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tile .t-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.tile .t-ic .ic{width:16px;height:16px}
.tile .t-label{font-size:12px;font-weight:600;color:var(--ink-500)}
.tile .t-val{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink-900);line-height:1.1}
.tile .t-sub{font-size:12px;color:var(--ink-400);margin-top:4px}
.t-ic.blue{background:var(--blue-050);color:var(--blue-600)}
.t-ic.green{background:var(--green-050);color:var(--green-600)}
.t-ic.violet{background:var(--violet-050);color:var(--violet-600)}
.t-ic.amber{background:var(--amber-050);color:var(--amber-600)}
.t-ic.red{background:var(--red-050);color:var(--red-600)}
.t-ic.gray{background:var(--gray-050);color:var(--ink-500)}

.tiles.n5{grid-template-columns:repeat(5,1fr)}
.tiles.n5 .t-val{font-size:23px}

/* ── chips / badges ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.chip .ic{width:12.5px;height:12.5px}
.c-green{background:var(--green-050);border-color:var(--green-200);color:var(--green-700)}
.c-red{background:var(--red-050);border-color:var(--red-200);color:var(--red-700)}
.c-amber{background:var(--amber-050);border-color:var(--amber-200);color:var(--amber-700)}
.c-blue{background:var(--blue-050);border-color:var(--blue-100);color:var(--blue-700)}
.c-violet{background:var(--violet-050);border-color:var(--violet-200);color:var(--violet-700)}
.c-gray{background:var(--gray-050);border-color:var(--gray-200);color:var(--ink-700)}
.c-plain{background:#fff;border-color:var(--line);color:var(--ink-500);font-weight:500}

.ext{display:inline-grid;place-items:center;min-width:36px;padding:2px 6px;border-radius:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.06em}
.ext.pdf{background:var(--red-050);color:var(--red-700)}
.ext.xlsx{background:var(--green-050);color:var(--green-700)}
.ext.docx{background:var(--blue-050);color:var(--blue-700)}
.ext.csv{background:var(--gray-050);color:var(--ink-700)}
.ext.jpg{background:var(--amber-050);color:var(--amber-700)}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;border:1px solid transparent;transition:all .13s;white-space:nowrap}
.btn .ic{width:15px;height:15px}
.btn-pri{background:var(--blue-600);color:#fff}
.btn-pri:hover{background:var(--blue-700)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-700)}
.btn-ghost:hover{border-color:var(--ink-400);color:var(--ink-900)}
.btn-ai{background:var(--violet-050);border-color:var(--violet-200);color:var(--violet-700)}
.btn-ai:hover{background:var(--violet-200)}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:8px}
.btn-link{color:var(--blue-600);font-weight:600;font-size:12.5px;padding:0}
.btn-link:hover{text-decoration:underline}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}

/* ── segmented & tabs ──────────────────────────────────────────────── */
.seg{display:inline-flex;background:var(--gray-050);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink-500)}
.seg button.on{background:#fff;color:var(--ink-900);box-shadow:var(--sh1)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabs a{padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink-500);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink-900);text-decoration:none}
.tabs a.on{color:var(--navy-900);border-bottom-color:var(--blue-600)}

/* ── tables ────────────────────────────────────────────────────────── */
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);overflow:hidden}
.tbl-wrap .tbl-note{padding:11px 18px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-500)}
table.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);background:#fbfcfd}
.tbl td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:hover{background:#fafbfc}
.tbl tr.rowlink{cursor:pointer}
.tbl .t-main{font-weight:600;color:var(--ink-900)}
.tbl .t-sub{font-size:12px;color:var(--ink-500);margin-top:1px}
.tbl .t-dim{color:var(--ink-500)}
.tbl td.r{text-align:right}
.tbl .filecell{display:flex;align-items:center;gap:11px}
.tbl tr.faded{opacity:.38}
.tbl tr.matched-group td{background:#fbfcfd}

/* ── bars (single measure, direct-labeled) ─────────────────────────── */
.bars{display:grid;gap:13px}
.bar-row{display:grid;grid-template-columns:168px 1fr 52px;align-items:center;gap:12px}
.bar-row .b-label{font-size:12.5px;font-weight:600;color:var(--ink-700)}
.bar-row .b-track{height:12px;background:var(--line-soft);border-radius:6px;overflow:hidden}
.bar-row .b-fill{height:100%;background:var(--blue-600);border-radius:0 4px 4px 0;min-width:3px}
.bar-row .b-val{font-size:12.5px;font-weight:700;color:var(--ink-900);text-align:right}

/* ── feed ──────────────────────────────────────────────────────────── */
.feed{display:grid}
.feed-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.feed-item:last-child{border-bottom:none}
.feed-item .f-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center}
.feed-item .f-ic .ic{width:14px;height:14px}
.feed-item b{font-weight:600;color:var(--ink-900)}
.feed-item .f-time{font-size:11.5px;color:var(--ink-400);margin-top:1px}

/* ── right rail cards ──────────────────────────────────────────────── */
.rail-path{font-size:12.5px;color:var(--ink-700);background:var(--paper);border:1px solid var(--line-soft);
  border-radius:8px;padding:10px 12px;line-height:1.7;word-break:break-word}
.rail-path b{color:var(--navy-900)}
.chip-row{display:flex;flex-wrap:wrap;gap:7px}

/* ── AI banner ─────────────────────────────────────────────────────── */
.ai-banner{display:flex;align-items:center;gap:14px;padding:15px 18px;margin-bottom:18px;
  background:linear-gradient(100deg,var(--violet-050),#fff 70%);
  border:1px solid var(--violet-200);border-radius:var(--r)}
.ai-banner .ic{color:var(--violet-600);width:20px;height:20px}
.ai-banner p{font-size:13.5px;color:var(--ink-700)}
.ai-banner p b{color:var(--ink-900)}
.ai-banner .btn{margin-left:auto}

/* ── checklist (client asks / onboarding pack) ─────────────────────── */
.check{display:grid}
.check-item{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.check-item:last-child{border-bottom:none}
.check-item .ck{width:26px;height:26px;flex:none;border-radius:999px;display:grid;place-items:center;
  border:1.6px solid var(--gray-200);color:transparent;transition:all .25s}
.check-item.done .ck{background:var(--green-600);border-color:var(--green-600);color:#fff}
.check-item .ck .ic{width:13px;height:13px}
.check-item .ck-body{flex:1;min-width:0}
.check-item .ck-body b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-900)}
.check-item .ck-body span{font-size:12px;color:var(--ink-500)}
.check-item.done .ck-body b{color:var(--ink-500);text-decoration:line-through;text-decoration-color:var(--ink-400)}
.check-item .pend{width:26px;height:26px;flex:none;border-radius:999px;border:2px dashed var(--gray-200)}
.check-item.working .pend{border-color:var(--blue-500);border-style:solid;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── timeline (auto-approval) ──────────────────────────────────────── */
.tl{display:grid;margin-top:14px}
.tl-step{display:flex;gap:12px;opacity:0;transform:translateY(4px);transition:all .3s}
.tl-step.on{opacity:1;transform:none}
.tl-step .tl-rail{display:flex;flex-direction:column;align-items:center}
.tl-step .tl-dot{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;flex:none;
  background:var(--green-050);color:var(--green-600);border:1.5px solid var(--green-200)}
.tl-step .tl-dot .ic{width:12px;height:12px}
.tl-step .tl-line{width:2px;flex:1;background:var(--line);margin:3px 0;min-height:10px}
.tl-step:last-child .tl-line{display:none}
.tl-step .tl-body{padding-bottom:14px}
.tl-step .tl-body b{font-size:13px;font-weight:600;color:var(--ink-900);display:block}
.tl-step .tl-body span{font-size:12px;color:var(--ink-500)}

/* ── folders / dropzone (client docs) ──────────────────────────────── */
.folders{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.folder-card{display:flex;gap:14px;align-items:center;padding:18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh1);color:inherit;transition:all .15s;position:relative}
.folder-card:hover{text-decoration:none;border-color:var(--blue-500);box-shadow:var(--sh2)}
.folder-card .f-ic{width:44px;height:44px;border-radius:10px;background:var(--blue-050);color:var(--blue-600);
  display:grid;place-items:center}
.folder-card .f-ic .ic{width:22px;height:22px}
.folder-card b{display:block;font-size:14.5px;font-weight:700;color:var(--ink-900)}
.folder-card span{font-size:12.5px;color:var(--ink-500)}
.folder-card .unread-dot{position:absolute;top:14px;right:14px;width:9px;height:9px;border-radius:99px;background:var(--blue-600)}
.dropzone{border:1.6px dashed var(--gray-200);border-radius:var(--r);padding:26px;text-align:center;
  background:#fbfcfe;margin-bottom:16px;transition:all .15s}
.dropzone:hover{border-color:var(--blue-500);background:var(--blue-050)}
.dropzone .ic{width:26px;height:26px;color:var(--blue-600);margin-bottom:8px}
.dropzone b{display:block;font-size:14px;font-weight:700;color:var(--ink-900)}
.dropzone p{font-size:12.5px;color:var(--ink-500);margin:4px 0 12px}
.udot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--blue-600);margin-right:8px;vertical-align:1px}

/* ── signature cards ───────────────────────────────────────────────── */
.sig-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh1)}
.sig-card .s-ic{width:40px;height:40px;border-radius:10px;background:var(--amber-050);color:var(--amber-600);
  display:grid;place-items:center;flex:none}
.sig-card.signed .s-ic{background:var(--green-050);color:var(--green-600)}
.sig-card b{display:block;font-size:14px;font-weight:700;color:var(--ink-900)}
.sig-card span{font-size:12.5px;color:var(--ink-500)}
.sig-card .btn{margin-left:auto}

/* ── policy steps ──────────────────────────────────────────────────── */
.steps{display:grid;gap:0}
.step-row{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.step-row:last-child{border-bottom:none}
.step-row .yrs{flex:none;width:92px;font-weight:700;color:var(--navy-900);font-size:12.5px}
.step-row .desc{color:var(--ink-700)}

/* ── AI drawer ─────────────────────────────────────────────────────── */
.drawer-scrim{position:fixed;inset:0;background:rgba(11,31,51,.18);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.drawer-scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:408px;max-width:94vw;background:#fff;z-index:61;
  box-shadow:-18px 0 50px rgba(16,42,67,.18);transform:translateX(102%);transition:transform .22s ease;
  display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-h{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.drawer-h .d-title{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;color:var(--ink-900)}
.drawer-h .d-title .ic{color:var(--violet-600)}
.drawer-h .d-close{margin-left:auto;color:var(--ink-400)}
.drawer-h .d-ctx{margin-top:9px;font-size:12px;color:var(--ink-500);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.drawer-b{flex:1;overflow-y:auto;padding:16px 18px;display:grid;gap:12px;align-content:start}
.d-hello{font-size:13px;color:var(--ink-700);background:var(--paper);border:1px solid var(--line-soft);
  border-radius:10px;padding:12px 14px}
.d-prompts{display:grid;gap:8px}
.d-prompt{display:flex;align-items:center;gap:9px;text-align:left;padding:10px 13px;border:1px solid var(--line);
  border-radius:10px;background:#fff;font-size:13px;font-weight:500;color:var(--ink-900);transition:all .13s}
.d-prompt:hover{border-color:var(--violet-600);background:var(--violet-050)}
.d-prompt .ic{color:var(--violet-600);width:14px;height:14px}
.msg{display:grid;gap:6px}
.msg-u{justify-self:end;max-width:85%;background:var(--blue-050);border:1px solid var(--blue-100);
  border-radius:12px 12px 3px 12px;padding:9px 13px;font-size:13px;color:var(--ink-900)}
.msg-a{max-width:96%;background:#fff;border:1px solid var(--line);border-radius:3px 12px 12px 12px;
  padding:11px 14px;font-size:13px;color:var(--ink-700);box-shadow:var(--sh1)}
.msg-a b{color:var(--ink-900)}
.msg-a ul{margin:7px 0 2px 17px;display:grid;gap:4px}
.msg-a .src{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;font-weight:600;
  color:var(--ink-500);background:var(--paper);border:1px solid var(--line-soft);border-radius:6px;padding:3px 8px}
.msg-a .mail-block{background:var(--paper);border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;
  margin-top:8px;font-size:12.5px;white-space:pre-line;color:var(--ink-700)}
.typing{display:inline-flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:3px 12px 12px 12px;width:fit-content}
.typing i{width:6px;height:6px;border-radius:99px;background:var(--ink-400);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,70%,100%{opacity:.25}35%{opacity:1}}
.drawer-f{border-top:1px solid var(--line);padding:12px 16px 10px}
.drawer-f .d-inrow{display:flex;gap:8px}
.drawer-f input{flex:1;padding:9px 13px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.drawer-f input:focus{border-color:var(--violet-600);outline:none}
.drawer-f .d-send{width:38px;height:38px;border-radius:10px;background:var(--violet-600);color:#fff;display:grid;place-items:center}
.drawer-f .d-note{font-size:10.5px;color:var(--ink-400);margin-top:8px}

/* ── modal ─────────────────────────────────────────────────────────── */
.modal-scrim{position:fixed;inset:0;background:rgba(11,31,51,.44);display:grid;place-items:center;z-index:80;padding:20px}
.modal{background:#fff;border-radius:14px;box-shadow:var(--sh2);width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.97);opacity:0}}
.modal-h{display:flex;align-items:center;gap:10px;padding:18px 22px 0}
.modal-h h3{font-size:16.5px;font-weight:800;color:var(--navy-900)}
.modal-h .d-close{margin-left:auto;color:var(--ink-400)}
.modal-b{padding:14px 22px 20px;overflow-y:auto}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px 18px;border-top:1px solid var(--line-soft)}
.doc-mock{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:8px 0 14px}
.doc-mock h4{font-size:13px;font-weight:700;color:var(--ink-900);margin-bottom:3px}
.doc-mock .doc-sub{font-size:11px;color:var(--ink-500);margin-bottom:14px}
.doc-mock .ln{height:7px;border-radius:4px;background:var(--gray-200);opacity:.6;margin:7px 0}
.doc-mock .ln.w60{width:60%}.doc-mock .ln.w80{width:80%}.doc-mock .ln.w45{width:45%}
.doc-mock .sig-line{margin-top:20px;padding-top:8px;border-top:1.5px solid var(--ink-400);width:220px;
  font-size:10.5px;color:var(--ink-500)}
.mail-pre{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  font-size:13px;color:var(--ink-700);white-space:pre-line;line-height:1.65}

/* ── toast ─────────────────────────────────────────────────────────── */
#toast-root{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:95;display:grid;gap:8px;justify-items:center}
.toast{background:var(--navy-900);color:#fff;font-size:13px;font-weight:500;padding:11px 18px;border-radius:10px;
  box-shadow:var(--sh2);max-width:520px;text-align:center;animation:rise .22s ease}
@keyframes rise{from{transform:translateY(8px);opacity:0}}

/* ── misc ──────────────────────────────────────────────────────────── */
.balance-big{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--navy-900)}
.balance-big small{font-size:14px;font-weight:600;color:var(--ink-500);letter-spacing:0}
.kv{display:grid;gap:8px;margin-top:12px}
.kv .kv-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.kv .kv-row:last-child{border-bottom:none}
.kv .kv-row span{color:var(--ink-500)}
.kv .kv-row b{font-weight:700;color:var(--ink-900)}
.field{display:grid;gap:5px;margin-bottom:12px}
.field label{font-size:11.5px;font-weight:700;color:var(--ink-500);letter-spacing:.04em;text-transform:uppercase}
.field input,.field select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;width:100%}
.field input:focus,.field select:focus{border-color:var(--blue-500);outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.note{font-size:12.5px;color:var(--ink-500)}
.note b{color:var(--ink-700)}
.callout{display:flex;gap:11px;background:var(--blue-050);border:1px solid var(--blue-100);border-radius:10px;
  padding:12px 14px;font-size:12.5px;color:var(--ink-700)}
.callout .ic{color:var(--blue-600);flex:none;margin-top:1px}
.dev-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prog{height:7px;background:var(--line-soft);border-radius:4px;overflow:hidden;margin:8px 0 6px}
.prog i{display:block;height:100%;background:var(--blue-600);border-radius:0 4px 4px 0}
.mini-list{display:grid;gap:9px;font-size:13px}
.mini-list .ml-row{display:flex;align-items:center;gap:10px}
.mini-list .ml-row .who{font-weight:600;color:var(--ink-900)}
.mini-list .ml-row .when{color:var(--ink-500);font-size:12.5px}
.mini-list .ml-row .chip{margin-left:auto}
.empty-hint{padding:26px;text-align:center;color:var(--ink-400);font-size:13px}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1120px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles.n5{grid-template-columns:repeat(3,1fr)}
  .g31,.g13,.g2{grid-template-columns:1fr}
  .dev-cards{grid-template-columns:1fr}
  .login{grid-template-columns:1fr}
  .login-right{display:none}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{flex-direction:row;align-items:center;overflow-x:auto;padding:0 8px}
  .side-brand{border-bottom:none;padding:12px 10px}
  .side .brand-word{display:none}
  .side nav{display:flex;padding:8px 4px;align-items:center}
  .nav-label{display:none}
  .nav-item{white-space:nowrap}
  .side-foot{border-top:none;margin-left:auto}
  .side-user b,.side-user span,.side-user .lnk{display:none}
  .wrap{padding:20px 16px}
  .top{padding:0 14px}
  .search input{width:150px}
  .folders{grid-template-columns:1fr}
}