/* StuLo app — shared styles for every signed-in page */
[hidden]{display:none!important}
:root{
  --navy:#121740; --navy-grad:linear-gradient(155deg,#181F55 0%,#121740 50%,#0F1438 100%); --bright:#465AFF; --blue:#11395B; --teal:#1FA6A8; --green:#267D4B; --green-d:#1E6640;
  --mint:#E9F8F5; --cloud:#F4F8FB; --ink:#263348; --muted:#5B6878; --line:#DCE5EE; --indigo-50:#EEF0FF;
  --shape:var(--r-lg); --sm:var(--r-sm);
  --shadow:0 1px 2px rgba(18,23,64,.04),0 12px 32px -8px rgba(18,23,64,.12);
  --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.16,1,.3,1);
  --display:"Bricolage Grotesque",Manrope,system-ui,sans-serif; --body:Manrope,Inter,system-ui,sans-serif;
  /* app surfaces use one symmetric radius per size; the asymmetric brand corner stays on the landing page */ --r-xs:10px; --r-sm:16px; --r-md:16px; --r-lg:20px; --r-xl:20px;
  --line-2:#C3CEDA; --subtle:#9AA7B6; --bright-2:#8FA0FF; --teal-l:#B7F4EE;
  --r-input:16px; --warn:#C2410C; --warn-2:#EA7A3E; --warn-50:#FFF1E8;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--cloud);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
*:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
h1,h2,h3{font-family:var(--display);color:var(--navy);letter-spacing:-.025em;line-height:1.1;font-weight:600}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* state switching */
body:not(.has-data) [data-state="data"]{display:none!important}
body.has-data [data-state="empty"]{display:none!important}

/* ============ layout ============ */
.app{display:grid;min-height:100vh}
@media(min-width:1024px){.app{grid-template-columns:264px 1fr}}

/* sidebar */
.side{position:fixed;inset:0 auto 0 0;width:280px;z-index:40;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;overscroll-behavior:contain;transform:translateX(-100%);transition:transform .6s var(--ease-soft);overflow-y:auto}
.side.open{transform:none;box-shadow:0 0 0 100vmax rgba(18,23,64,.4)}
@media(min-width:1024px){.side{position:sticky;top:0;height:100vh;width:auto;transform:none}}
.side .logo{padding:4px 10px 16px}
.side .logo svg{height:30px;width:auto}
.nav-group{display:grid;gap:1px;margin-bottom:10px}
.nav-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);padding:4px 12px 4px}
.nav-a{display:flex;align-items:center;gap:12px;padding:7px 12px;border-radius:var(--sm);font-weight:600;color:var(--ink);transition:background .3s var(--ease-soft),color .2s}
.nav-a:hover{background:var(--cloud);color:var(--navy)}
.nav-a.on{background:var(--indigo-50);color:var(--bright);font-weight:600}
.nav-a .tag{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:6px;background:var(--mint);color:var(--green)}
.nav-a .cnt{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
details.more summary{list-style:none;cursor:pointer}
details.more summary::-webkit-details-marker{display:none}
details.more summary .chev{margin-left:auto;transition:transform .6s var(--ease-soft)}
details.more[open] summary .chev{transform:rotate(180deg)}
details.more .nav-a:not(summary){padding-left:44px;font-size:14px}
.side-foot{margin-top:auto;display:grid;gap:8px;padding-top:10px}
.upgrade{border-radius:var(--shape);padding:10px 14px;background:var(--cloud)}
@media(max-height:760px){.upgrade{display:none}}
.upgrade b{display:block;font-family:var(--display);font-size:15px;color:var(--navy);margin-bottom:1px}
.upgrade p{font-size:12.5px;color:var(--muted);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--sm);transition:background .3s var(--ease-soft)}
.me:hover{background:var(--cloud)}
.av{width:36px;height:36px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--mint);color:var(--green);font-weight:600;font-size:13px}
.me b{display:block;font-size:13.5px;color:var(--navy)}
.me small{font-size:12px;color:var(--muted)}
.me .i{margin-left:auto;color:var(--muted)}

/* topbar */
.main{min-width:0}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:14px clamp(16px,3vw,36px);background:rgba(244,248,251,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.top.scrolled{border-color:var(--line);box-shadow:0 8px 20px -14px rgba(18,23,64,.22)}
.burger{width:40px;height:40px;border-radius:var(--sm);background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
@media(min-width:1024px){.burger{display:none}}
.search{flex:1;min-width:0;max-width:460px;display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:var(--r-input);background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:14px}
.search input{flex:1;min-width:0;width:100%;border:0;outline:0;font:inherit;color:var(--navy);background:none}
.search kbd{font:inherit;font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--cloud);color:var(--muted)}
@media(max-width:640px){.search kbd{display:none}}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.demo-tg{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r-md);padding:4px;font-size:12.5px;font-weight:600}
.demo-l{padding:0 8px;color:var(--subtle);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.demo-tg button{padding:6px 10px;border-radius:var(--r-xs);color:var(--muted)}
.demo-tg button[aria-pressed=true]{background:var(--navy);color:#fff}

.icon-btn{position:relative;width:42px;height:42px;border-radius:var(--sm);display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--navy)}
.icon-btn .dot{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--warn-2);box-shadow:0 0 0 2px #fff}

.content{padding:8px clamp(16px,3vw,36px) 40px;max-width:1280px}
.hello{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 0 22px}
.hello h1{font-size:clamp(26px,3vw,34px)}
.hello p{color:var(--muted);margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.chip.prev{--c:var(--warn-2)}
.chip.ok{--c:var(--green)}

.card{background:#fff;border-radius:var(--shape);border:1px solid var(--line);padding:22px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-h h3{font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--sm);background:var(--green);color:#fff;font-weight:600;font-size:14.5px;transition:background .35s var(--ease-soft),transform .45s var(--ease-soft);white-space:nowrap}
.btn:hover{background:var(--green-d);transform:translateY(-1px)}
/* Interaction system — every clickable thing is one of these, so its role is readable at a glance:
   .btn primary (filled green, one per block) · .btn.sec secondary (white, visible border)
   .link tertiary (indigo text + chevron) · .choice selectable option (pill, checked state)
   .st / chips are static status and never react to hover */
.btn.sec{background:#fff;color:var(--navy);border:1.5px solid var(--line-2);box-shadow:none}
.btn.sec:hover{background:#fff;border-color:var(--navy)}
.btn.sm{height:36px;padding:0 14px;font-size:13.5px}
.btn:disabled{background:var(--line);color:var(--subtle);box-shadow:none;cursor:not-allowed;transform:none}
.link{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;font-weight:600;color:var(--bright);white-space:nowrap}
.link svg.i{width:16px;height:16px;transition:transform .3s var(--ease-soft)}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link:hover svg.i{transform:translateX(2px)}
.btn.light{background:rgba(255,255,255,.12);color:#fff}
.btn.light:hover{background:rgba(255,255,255,.2)}
.grid{display:grid;gap:16px;margin-bottom:16px}
.grid>*{min-width:0}
@media(max-width:640px){.ring{width:40px;height:40px;top:14px;right:14px}.kpi small{padding-right:38px}.top{gap:8px}.demo-tg button{padding:6px 8px}.search input::placeholder{color:transparent}.search{max-width:none}}
.fade-in{animation:fadeUp .6s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}

/* ============ EMPTY: setup ============ */
.setup{display:grid;background:var(--navy-grad);color:#fff;border-radius:var(--r-lg);overflow:hidden;position:relative}
.setup::after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-260px;background:radial-gradient(closest-side,rgba(70,90,255,.38),rgba(70,90,255,.20) 40%,rgba(70,90,255,.07) 70%,transparent);filter:blur(44px);pointer-events:none}
@media(min-width:900px){.setup{grid-template-columns:.9fr 1.1fr}}
.setup-l{padding:28px;position:relative;z-index:1}
.setup-l h2{color:#fff;font-size:26px;margin:14px 0 6px}
.setup-l>p{color:rgba(255,255,255,.7);margin-bottom:22px}
.prog{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--teal-l)}
.prog .bar{flex:1;max-width:160px;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.prog .bar i{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:99px}
.steps{list-style:none;display:grid;gap:4px}
.steps li{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--sm);font-weight:600;color:rgba(255,255,255,.6)}
.steps li .n{width:28px;height:28px;flex:none;border-radius:var(--r-xs);display:grid;place-items:center;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.steps li.done{color:rgba(255,255,255,.5);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.steps li.done .n{background:var(--green);color:#fff}
.steps li.cur{background:rgba(255,255,255,.08);color:#fff}
.steps li.cur .n{background:var(--bright);color:#fff}
.steps li small{margin-left:auto;font-size:12px;font-weight:600;color:rgba(255,255,255,.5);text-decoration:none}
.setup-r{padding:12px;position:relative;z-index:1;display:flex}
.drop{flex:1;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:16px}
.drop h3{font-size:19px}
.drop>p{color:var(--muted);font-size:14px;margin-top:-8px}
.zone{flex:1;min-height:170px;border:2px dashed var(--line-2);border-radius:var(--r-md);display:grid;place-items:center;text-align:center;padding:20px;background:var(--cloud);transition:border-color .3s var(--ease-soft),background .2s;cursor:pointer}
.zone:hover,.zone.over{border-color:var(--bright);background:var(--indigo-50)}
.zone .up{width:52px;height:52px;margin:0 auto 12px;border-radius:var(--r-md);background:#fff;display:grid;place-items:center;color:var(--bright);box-shadow:var(--shadow)}
.zone b{display:block;color:var(--navy);font-size:15.5px}
.zone>div>span:not(.btn){display:block;font-size:13px;color:var(--muted);margin-top:2px}
.drop-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.drop-foot .secure{display:flex;align-items:center;gap:6px;color:var(--muted)}

/* ghost KPI */
.kpis{grid-template-columns:repeat(2,1fr)}
@media(min-width:1100px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{position:relative}
.kpi small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.kpi b{display:block;font-family:var(--display);font-size:clamp(24px,2.4vw,32px);color:var(--navy);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.kpi.ghost{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2)}
.kpi.ghost b{color:var(--subtle)}
.skel{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#E8EEF4 0%,#F4F7FA 50%,#E8EEF4 100%);background-size:200% 100%;margin-top:10px}
@keyframes shim{to{background-position:-200% 0}}
.kpi .ico{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--cloud);color:var(--muted)}

/* help row */
.help{grid-template-columns:1fr}
@media(min-width:900px){.help{grid-template-columns:1fr 1fr}}
.coach{display:flex;flex-direction:column;gap:16px}
.coach-h{display:flex;gap:14px;align-items:flex-start}
.coach-f{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:2px}
.coach .av{width:44px;height:44px;border-radius:var(--r-sm);background:var(--indigo-50);color:var(--bright)}
.coach p{color:var(--muted);font-size:14px;margin-top:4px}
.slots{border:0;display:flex;flex-wrap:wrap;gap:8px}
.slots legend{width:100%;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft),color .3s var(--ease-soft)}
.choice svg.i{width:16px;height:16px;color:var(--subtle)}
.choice .ic-check{display:none}
.choice:hover span{border-color:var(--line-2);background:var(--cloud)}
.choice input:checked+span{border-color:var(--bright);background:var(--indigo-50);color:var(--bright)}
.choice input:checked+span .ic-clock{display:none}
.choice input:checked+span .ic-check{display:block;color:var(--bright)}
.choice input:focus-visible+span{outline:2px solid var(--bright);outline-offset:2px}
.ai-box{display:flex;align-items:center;gap:8px;height:48px;padding:0 6px 0 14px;border-radius:var(--r-input);box-shadow:inset 0 0 0 1.5px var(--line);margin:4px 0 12px;transition:box-shadow .3s var(--ease-soft)}
.ai-box:focus-within{box-shadow:inset 0 0 0 1.5px var(--bright)}
.ai-box input{flex:1;min-width:0;border:0;outline:0;font:inherit;color:var(--navy)}
.ai-box button{width:36px;height:36px;border-radius:var(--r-sm);background:var(--bright);color:#fff;display:grid;place-items:center;transition:background .3s var(--ease-soft)}
.ai-box button:disabled{background:var(--line);color:var(--subtle);cursor:not-allowed}
.prompts{display:flex;flex-wrap:wrap;gap:8px}
.prompts-l{display:block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prompts button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px dashed var(--line-2);font-size:13px;font-weight:600;color:var(--ink);transition:border-color .3s var(--ease-soft),color .3s var(--ease-soft),background .3s var(--ease-soft)}
.prompts button::before{content:"+";font-weight:600;color:var(--bright)}
.prompts button:hover{border-style:solid;border-color:var(--bright);color:var(--bright);background:var(--indigo-50)}
.badge-ai{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--bright)}

/* ============ DATA state ============ */
.nba{display:flex;flex-wrap:wrap;align-items:center;gap:18px;background:var(--navy-grad);color:#fff;border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden}
.nba .ic{width:48px;height:48px;flex:none;border-radius:var(--r-md);background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--teal-l)}
.nba-t{flex:1;min-width:240px;position:relative;z-index:1}
.nba-t small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-l)}
.nba-t h3{color:#fff;font-size:19px;margin:4px 0 2px}
.nba-t p{font-size:14px;color:rgba(255,255,255,.7)}
.nba-x{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;color:rgba(255,255,255,.6);transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.nba-x:hover{background:rgba(255,255,255,.1);color:#fff}
.nba .acts{display:flex;gap:8px;position:relative;z-index:1}
.mini{display:block!important;height:6px;margin-top:12px!important;border-radius:99px;background:var(--cloud);overflow:hidden}
.mini i{display:block;height:100%;width:0;border-radius:99px;background:var(--teal);transition:width 1.2s var(--ease-soft)}
.has-data .mini i{width:31.7%}
.kpi .delta{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--green)}
.ring{position:absolute;top:16px;right:16px;width:54px;height:54px}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:var(--cloud)}
.ring .fg{stroke:var(--teal);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;stroke-dasharray:150.8;stroke-dashoffset:150.8;transition:stroke-dashoffset 1.4s var(--ease)}
.has-data .ring .fg{stroke-dashoffset:calc(150.8 - 150.8 * 38 / 120)}

.two{grid-template-columns:1fr}
@media(min-width:1100px){.two{grid-template-columns:1.6fr 1fr}}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--cloud);border-radius:var(--r-input);padding:4px;font-size:14px;font-weight:600}
.seg button{padding:8px 14px;border-radius:12px;font-size:14px;font-weight:600;color:var(--muted)}
.seg button:is([aria-pressed=true],[aria-selected=true]){background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(18,23,64,.08)}
.seg.sm button{padding:5px 10px;font-size:12.5px;border-radius:9px}
.plans{display:grid;gap:12px}
.pl{display:grid;grid-template-columns:96px 1fr 84px;align-items:center;gap:14px}
.pl span{font-weight:600;font-size:14px;color:var(--navy)}
.pl span small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.pl .track{height:12px;border-radius:99px;background:var(--cloud);overflow:hidden}
.pl .track i{display:block;height:100%;width:0;border-radius:99px;background:var(--line-2);transition:width 1s var(--ease)}
.pl.best .track i{background:linear-gradient(90deg,var(--bright),var(--bright-2))}
.pl.cur .track i{background:var(--navy)}
.pl b{font-family:var(--display);font-size:17px;text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
.legend-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted)}
.legend-row span{display:flex;align-items:center;gap:6px}
.legend-row span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.donut-wrap{display:flex;align-items:center;gap:20px}
.donut{width:150px;height:150px;flex:none;position:relative}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:18}
.donut .c{display:grid;place-items:center;position:absolute;inset:0;text-align:center}
.donut .c b{font-family:var(--display);font-size:22px;color:var(--navy);display:block}
.donut .c small{font-size:11.5px;color:var(--muted);font-weight:600}
.lg{list-style:none;display:grid;gap:10px;flex:1;font-size:13.5px}
.lg li{display:flex;align-items:center;gap:8px}
.lg li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}
.lg li b{margin-left:auto;color:var(--navy);font-variant-numeric:tabular-nums}
@media(max-width:480px){.donut-wrap{flex-direction:column;align-items:stretch}.donut{margin:0 auto}}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 10px 10px}
.tbl td{padding:12px 10px;border-top:1px solid var(--line);color:var(--navy);font-weight:600;white-space:nowrap}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.num{text-align:right}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--cloud)}
.tbl td.go{width:28px;color:var(--subtle);padding-right:4px}
.tbl td.go svg{width:18px;height:18px;transition:transform .3s var(--ease-soft),color .3s var(--ease-soft)}
.tbl tbody tr:hover td.go svg{color:var(--navy);transform:translateX(2px)}
.tbl .nm{display:flex;align-items:center;gap:10px}
.tbl .nm i{width:8px;height:8px;border-radius:3px;background:var(--c)}
.tbl .nm small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.st{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--mint);color:var(--green)}
.st.w{background:var(--warn-50);color:var(--warn)}
.tbl-wrap{overflow-x:auto;margin:0 -10px}
.up-list{list-style:none;display:grid;gap:4px}
.up-list li{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.up-list li:first-child{border-top:0}
.up-list li>div{flex:1;min-width:0}
.up-list .link{margin-left:auto}
.tag-ok{margin-left:auto;font-size:12px;font-weight:600;color:var(--green);white-space:nowrap}
.date{width:46px;flex:none;text-align:center;border-radius:var(--r-sm);background:var(--cloud);padding:6px 0;line-height:1.1}
.date b{display:block;font-family:var(--display);font-size:18px;color:var(--navy)}
.date small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.date.hot{background:var(--warn-50)}.date.hot b,.date.hot small{color:var(--warn)}
.up-list strong{display:block;color:var(--navy);font-size:14px}
.up-list span{font-size:13px;color:var(--muted)}

/* tools */
.tools-h{display:flex;align-items:end;justify-content:space-between;margin:28px 0 14px}
.tools-h h2{font-size:22px}
.tools{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.tools{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.tools{grid-template-columns:repeat(6,1fr)}}
.tool{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--shape);background:#fff;border:1px solid var(--line);transition:transform .6s var(--ease-soft),box-shadow .6s var(--ease-soft)}
.tool:hover{transform:translateY(-2px);border-color:var(--line-2)}
.tool .go{position:absolute;top:16px;right:14px;color:var(--subtle);transition:transform .3s var(--ease-soft),color .3s var(--ease-soft)}
.tool .go svg{width:18px;height:18px}
.tool:hover .go{color:var(--navy);transform:translateX(2px)}
.tool .ti{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--cloud);color:var(--navy)}
.tool b{font-size:14.5px;color:var(--navy);line-height:1.25}
.tool span{font-size:12.5px;color:var(--muted);line-height:1.4}
.refer{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px;padding:16px 20px;border-radius:var(--shape);background:var(--mint)}
.refer .ti{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:#fff;color:var(--green)}
.refer p{flex:1;min-width:200px;color:var(--ink);font-size:14px}
.refer p b{color:var(--navy)}
.legal{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.legal svg{flex:none;margin-top:1px}
.legal a{color:var(--bright);font-weight:600}

b,strong{font-weight:600}

/* ============ My loans page ============ */
.page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 0 10px}
.page-h h1{font-size:clamp(26px,3vw,34px)}
.page-h p{color:var(--muted);margin-top:4px}
.page-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sync{font-size:13px;color:var(--muted);margin-right:4px}
.btn svg.i{width:16px;height:16px}
.note{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:20px}
.note svg.i{width:16px;height:16px;color:var(--subtle)}
.note .link{font-size:13px}
.note-more{font-size:13px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:-10px 0 20px;max-width:760px}

/* empty: import */
.import{display:grid;gap:28px;padding:28px;margin-bottom:16px}
@media(min-width:1000px){.import{grid-template-columns:1fr 1.05fr;gap:40px}}
.import h2{font-size:26px;margin-bottom:8px}
.import .imp-l>p{color:var(--muted);margin-bottom:22px;max-width:46ch}
.how{list-style:none;display:grid;gap:0}
.how li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.how li>span{width:28px;height:28px;flex:none;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--cloud);color:var(--navy);font-size:13px;font-weight:600}
.how b{display:block;color:var(--navy);font-size:15px}
.how small{display:block;color:var(--muted);font-size:13.5px;margin:2px 0 6px}
.imp-r{display:flex;flex-direction:column;gap:14px}
.zone.big{min-height:230px}
.zone.big b{font-size:16px}
.imp-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font-size:13.5px;color:var(--muted)}
.secure{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:var(--muted)}
.secure svg.i{width:15px;height:15px}
.secure .link{font-size:12.5px}
.pair{grid-template-columns:1fr}
@media(min-width:900px){.pair{grid-template-columns:1fr 1fr}}
.mini-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.mini-h .ti{width:40px;height:40px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--cloud);color:var(--navy)}
.mini-h h3{font-size:17px}
.mini-h p{color:var(--muted);font-size:13.5px;margin-top:2px}
.up-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.up-row small{font-size:12.5px;color:var(--muted)}
.warn-line{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--muted)}
.warn-line svg.i{width:15px;height:15px;color:var(--warn-2);flex:none;margin-top:1px}

/* data: summary + toolbar */
.sumbar{display:grid;grid-template-columns:repeat(2,1fr);padding:0;margin-bottom:16px}
@media(min-width:900px){.sumbar{grid-template-columns:repeat(4,1fr)}}
.sumbar>div{padding:18px 22px;border-left:1px solid var(--line)}
.sumbar>div:first-child{border-left:0}
@media(max-width:899px){.sumbar>div:nth-child(3){border-left:0}.sumbar>div:nth-child(n+3){border-top:1px solid var(--line)}}
.sumbar small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sumbar b{font-family:var(--display);font-size:26px;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:tabular-nums}
.sumbar span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.seg em{font-style:normal;margin-left:6px;color:var(--subtle)}
.seg button[aria-pressed=true] em{color:var(--bright)}
.search.sm{flex:0 1 240px;height:36px}
.toolbar{justify-content:flex-end;column-gap:20px}
.sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sort select{height:36px;padding:0 32px 0 12px;border-radius:var(--r-input);border:1px solid var(--line);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23121740' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);-webkit-appearance:none;appearance:none;cursor:pointer}

/* data: loan list (accordion) */
.lay{display:grid;gap:16px;align-items:start}
@media(min-width:1150px){.lay{grid-template-columns:1fr 320px}}
.loans{padding:6px 8px}
.loan{border-top:1px solid var(--line)}
.loan:first-child{border-top:0}
.loan-h{width:100%;display:grid;grid-template-columns:10px minmax(0,2.2fr) minmax(96px,1fr) minmax(72px,.8fr) minmax(132px,1fr) 20px;align-items:center;gap:14px;padding:14px;border-radius:var(--r-md);text-align:left;transition:background .3s var(--ease-soft)}
.loan-h:hover{background:var(--cloud)}
.loan-h>i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.ln b{display:block;color:var(--navy);font-size:15px}
.ln small,.lc small{display:block;font-size:12.5px;color:var(--muted)}
.lc{text-align:left}
.lc b{color:var(--navy);font-variant-numeric:tabular-nums;font-size:15px}
.loan-h .st{justify-self:start}
.loan-h .tog{width:20px;height:20px;color:var(--subtle);transition:transform .45s var(--ease-soft),color .3s}
.loan-h[aria-expanded=true] .tog{transform:rotate(90deg);color:var(--navy)}
.loan-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-soft)}
.loan.open .loan-b{grid-template-rows:1fr}
.loan-b>div{overflow:hidden}
.loan-in{padding:4px 14px 20px 38px}
.paid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:13px;color:var(--muted);margin-bottom:16px}
.paid b{color:var(--navy)}
.paid .bar{height:6px;border-radius:99px;background:var(--cloud);overflow:hidden}
.paid .bar i{display:block;height:100%;border-radius:99px;background:var(--green)}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 20px;margin-bottom:16px}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{font-size:14px;font-weight:600;color:var(--navy);margin-top:2px}
.loan-act{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.loan-act .btn{margin-left:auto}
.list-empty{padding:40px 20px;text-align:center;color:var(--muted)}
.list-empty b{display:block;color:var(--navy);font-size:16px;margin-bottom:4px}
.list-empty-a{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.list-empty span{display:block}
.toolbar #resetF{margin-right:4px}
@media(max-width:760px){
  .loan-h{grid-template-columns:10px minmax(0,1fr) auto 20px;gap:10px;padding:12px 8px}
  .loan-h .lc.rate,.loan-h .st{display:none}
  .loan-h .lc{text-align:right}
  .loan-in{padding:4px 8px 18px 28px}
  .paid{grid-template-columns:1fr}
  .toolbar{justify-content:flex-start}
}

/* data: side column */
.side-col{display:grid;gap:16px}
.svc{list-style:none}
.svc li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.svc li:first-child{border-top:0;padding-top:0}
.svc .av{width:36px;height:36px;border-radius:var(--r-sm);background:var(--cloud);color:var(--navy);font-size:12px}
.svc b{display:block;color:var(--navy);font-size:14px}
.svc small{font-size:12.5px;color:var(--muted)}
.svc .link{margin-left:auto}
.attn{border-color:#F5D6C2;background:#FFFBF8}
.attn h3{display:flex;align-items:center;gap:8px;font-size:16px;margin-bottom:6px}
.attn h3 svg.i{width:18px;height:18px;color:var(--warn-2)}
.attn p{font-size:13.5px;color:var(--ink);margin-bottom:10px}

b,strong{font-weight:600}

/* ============ AI coach page ============ */
.coach-wrap{display:grid;gap:16px;align-items:start;margin-top:14px}
@media(min-width:1200px){.coach-wrap{grid-template-columns:1fr 300px}}
.chat{display:flex;flex-direction:column;height:calc(100vh - 110px);min-height:540px;padding:0;overflow:hidden}
.chat-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.bot{width:38px;height:38px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--indigo-50)}
.bot svg{width:22px;height:22px}
.chat-h b{display:block;font-size:15px;color:var(--navy)}
.chat-h small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.chat-h small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.chat-h .btn{margin-left:auto}
.msgs{flex:1;overflow-y:auto;padding:22px 18px 8px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{display:flex;gap:10px;max-width:760px;animation:msgIn .45s var(--ease-soft) both}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}}
.msg .bot{width:30px;height:30px;border-radius:9px}
.msg .bot svg{width:18px;height:18px}
.bubble{padding:12px 15px;border-radius:16px 16px 16px 4px;background:var(--cloud);color:var(--ink);font-size:14.5px;line-height:1.55}
.bubble p+p,.bubble p+ul,.bubble ul+p{margin-top:8px}
.bubble ul{padding-left:18px}
.bubble li+li{margin-top:4px}
.bubble a{color:var(--bright);font-weight:600}
.bubble .src{display:block;margin-top:10px;font-size:12px;color:var(--muted)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .bubble{background:var(--navy);color:#fff;border-radius:16px 16px 4px 16px}
.typing{display:inline-flex;gap:4px;padding:16px 15px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--subtle);animation:dot 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.starters{margin:6px 0 0 40px;max-width:720px}
.starters .prompts-l{margin-bottom:10px}
.st-grid{display:grid;gap:8px}
@media(min-width:700px){.st-grid{grid-template-columns:1fr 1fr}}
.starter{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;color:var(--navy);transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.starter small{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.starter svg.i{width:18px;height:18px;margin-left:auto;color:var(--subtle);transition:transform .3s var(--ease-soft),color .3s var(--ease-soft)}
.starter:hover{border-color:var(--line-2);background:var(--cloud)}
.starter:hover svg.i{color:var(--navy);transform:translateX(2px)}
.composer{padding:12px 18px 14px;border-top:1px solid var(--line)}
.cbox{display:flex;align-items:flex-end;gap:8px;padding:6px;border-radius:var(--r-input);background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .3s var(--ease-soft)}
.cbox:hover:not(:focus-within){box-shadow:inset 0 0 0 1.5px var(--line-2)}
.cbox:focus-within{box-shadow:inset 0 0 0 1.5px var(--bright)}
.cbox textarea{flex:1;min-width:0;border:0;outline:0;resize:none;font:inherit;font-size:15px;line-height:1.45;color:var(--navy);padding:8px 6px;max-height:160px;background:none}
.cbox textarea::placeholder{color:var(--subtle)}
.cbtn{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.cbtn svg{width:18px;height:18px}
.cbtn.att{color:var(--muted)}
.cbtn.att:hover{background:var(--cloud);color:var(--navy)}
.cbtn.send{background:var(--bright);color:#fff}
.cbtn.send:hover:not(:disabled){background:#3346E6}
.cbtn.send:disabled{background:var(--line);color:var(--subtle);cursor:not-allowed}
.c-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}
.c-foot kbd{font:inherit;font-weight:600;padding:1px 5px;border-radius:5px;background:var(--cloud)}
.ctx{display:none}
@media(min-width:1200px){.ctx{display:grid;gap:16px;position:sticky;top:76px}}
.kv{list-style:none}
.kv li{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv li:first-child{border-top:0;padding-top:0}
.kv span{color:var(--muted)}
.kv b{display:block;color:var(--navy);font-size:14px}
.kv .link{margin-left:auto}
.ctx p.small{font-size:13px;color:var(--muted);margin:-6px 0 12px}
@media(max-width:640px){.chat{height:calc(100dvh - 150px);min-height:420px;border-radius:var(--r-lg)}.starters{margin-left:0}}

/* hover on every control (inputs, icon buttons, segmented options) */
.search,.ai-box{transition:box-shadow .3s var(--ease-soft)}
.search:hover:not(:focus-within){box-shadow:inset 0 0 0 1.5px var(--line-2)}
.search:focus-within{box-shadow:inset 0 0 0 1.5px var(--bright)}
.ai-box:hover:not(:focus-within){box-shadow:inset 0 0 0 1.5px var(--line-2)}
.ai-box button:not(:disabled):hover{background:#3346E6}
.sort select{transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.sort select:hover{border-color:var(--line-2)}
.sort select:focus{outline:none;border-color:var(--bright)}
.icon-btn,.burger{transition:background .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.icon-btn:hover,.burger:hover{background:var(--cloud);box-shadow:inset 0 0 0 1px var(--line-2)}
.seg button,.demo-tg button{transition:color .3s var(--ease-soft),background .3s var(--ease-soft)}
.seg button:not([aria-pressed=true]):not([aria-selected=true]):hover{color:var(--navy);background:rgba(255,255,255,.7)}
.demo-tg button:not([aria-pressed=true]):hover{color:var(--navy);background:var(--cloud)}
.logo{transition:opacity .3s var(--ease-soft)}
.logo:hover{opacity:.8}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}

/* calm, non-decorative defaults: sentence-case helper labels, plain icons, solid suggestion chips */
.prompts-l,.slots legend{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.prompts button{border:1px solid var(--line);border-style:solid}
.prompts button::before{content:none}
.prompts button:hover{border-color:var(--line-2);background:var(--cloud);color:var(--navy)}
.zone .up{width:auto;height:auto;margin:0 auto 10px;background:none;box-shadow:none;color:var(--muted)}
.tool .ti{width:auto;height:auto;justify-content:start;place-items:start;background:none;color:var(--navy)}

/* controls share the input radius: symmetric, no brand-cut corner */
.btn,.icon-btn,.burger,.nba-x,.ai-box button,.cbtn,.starter,.zone{border-radius:var(--r-input)}
.seg,.demo-tg{border-radius:var(--r-input)}
.demo-tg button{border-radius:8px}
.nav-a,.loan-h,.me{border-radius:10px}

/* ============ Shell: profile menu, sidebar without footer ============ */
.side{gap:0}
.pm{position:relative}
.pm-btn{display:flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 5px;border-radius:var(--r-input);background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s var(--ease-soft)}
.pm-btn:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.pm-btn .av,.pm-head .av{width:32px;height:32px;border-radius:9px;font-size:12px;font-weight:700}
.pm-btn b{font-size:14px;font-weight:600;color:var(--navy)}
.pm-btn svg.chev{width:16px;height:16px;color:var(--muted);transition:transform .3s var(--ease-soft)}
.pm-btn[aria-expanded=true] svg.chev{transform:rotate(180deg)}
.pm-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:256px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .2s var(--ease-soft),transform .25s var(--ease-soft)}
.pm.open .pm-menu{opacity:1;transform:none;pointer-events:auto}
.pm-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.pm-head b{display:block;font-size:14px;color:var(--navy)}
.pm-head small{font-size:12.5px;color:var(--muted)}
.pm-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink);transition:background .2s var(--ease-soft),color .2s var(--ease-soft)}
.pm-menu a svg.i{width:18px;height:18px;color:var(--muted)}
.pm-menu a:hover,.pm-menu a:focus-visible{background:var(--cloud);color:var(--navy);outline:none}
.pm-menu a.on{background:var(--indigo-50);color:var(--bright)}
.pm-menu a.on svg.i{color:var(--bright)}
.pm-menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
@media(max-width:640px){.pm-btn b{display:none}.pm-btn{padding:0 6px 0 5px}}

/* ============ Shared page components ============ */
.page-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 0 18px}
.page-h h1{font-size:clamp(26px,3vw,34px)}
.page-h p{color:var(--muted);margin-top:4px;max-width:60ch}
.h2{font-size:18px;margin-bottom:4px}
.sub{color:var(--muted);font-size:14px}
.stack{display:grid;gap:16px}
.split{display:grid;gap:16px;align-items:start}
@media(min-width:1100px){.split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.cols-2{display:grid;gap:16px}
@media(min-width:900px){.cols-2{grid-template-columns:1fr 1fr}}
.cols-3{display:grid;gap:16px}
@media(min-width:900px){.cols-3{grid-template-columns:repeat(3,1fr)}}

/* tabs */
.tabs{display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:var(--r-input);background:#E7EDF3;margin-bottom:20px}
.tabs+*{clear:both}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:8px 14px;border-radius:12px;font-size:14px;font-weight:600;color:var(--muted);transition:color .3s var(--ease-soft),background .3s var(--ease-soft)}
.tabs button:hover{color:var(--navy);background:rgba(255,255,255,.6)}
.tabs button[aria-selected=true]{color:var(--navy);background:#fff;box-shadow:0 1px 2px rgba(18,23,64,.08)}
[role=tabpanel][hidden]{display:none}

/* form fields */
.fgrid{display:grid;gap:16px}
@media(min-width:700px){.fgrid.two{grid-template-columns:1fr 1fr}}
.f{display:grid;gap:6px;align-content:start}
.f label,.f .lbl{font-size:13.5px;font-weight:600;color:var(--navy)}
.f small{font-size:12.5px;color:var(--muted)}
.f input,.f select,.f textarea{width:100%;height:44px;padding:0 14px;border-radius:var(--r-input);border:1px solid var(--line);background:#fff;font:inherit;font-size:15px;color:var(--navy);outline:none;transition:border-color .3s var(--ease-soft),box-shadow .3s var(--ease-soft);-webkit-appearance:none;appearance:none}
.f textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical;line-height:1.5}
.f select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23121740' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px;cursor:pointer}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--line-2)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--bright)}
.f input::placeholder,.f textarea::placeholder{color:var(--subtle)}
.f .pre{position:relative}
.f .pre span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:15px}
.f .pre input{padding-left:28px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.form-foot .saved{font-size:13px;color:var(--green);font-weight:600;opacity:0;transition:opacity .3s}
.form-foot .saved.on{opacity:1}

/* toggle switch */
.sw{position:relative;display:inline-block;width:40px;height:24px;flex:none;cursor:pointer}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .3s var(--ease-soft)}
.sw span::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .3s var(--ease-soft)}
.sw:hover span{background:var(--subtle)}
.sw input:checked+span{background:var(--green)}
.sw input:checked+span::after{transform:translateX(16px)}
.sw input:focus-visible+span{outline:2px solid var(--bright);outline-offset:2px}

/* rows */
.rows{list-style:none}
.rows>li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.rows>li:first-child{border-top:0;padding-top:0}
.rows>li:last-child{padding-bottom:0}
.rows .t{flex:1;min-width:0}
.rows .t b{display:block;font-size:14.5px;font-weight:600;color:var(--navy)}
.rows .t span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.rows .ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--cloud);color:var(--navy)}
.rows .ic svg{width:18px;height:18px}

/* big selectable cards (onboarding, loan rescue) */
.picks{display:grid;gap:10px}
@media(min-width:700px){.picks.two{grid-template-columns:1fr 1fr}}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick>span{display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:var(--r-input);border:1px solid var(--line);background:#fff;transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.pick b{display:block;font-size:15px;font-weight:600;color:var(--navy)}
.pick small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.pick .dot{width:20px;height:20px;flex:none;margin-top:1px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:border-color .3s,background .3s}
.pick .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .3s var(--ease-soft)}
.pick:hover>span{border-color:var(--line-2);background:var(--cloud)}
.pick input:checked+span{border-color:var(--bright);background:var(--indigo-50)}
.pick input:checked+span .dot{border-color:var(--bright);background:var(--bright)}
.pick input:checked+span .dot::after{transform:scale(1)}
.pick input[type=checkbox]+span .dot{border-radius:6px}
.pick input:focus-visible+span{outline:2px solid var(--bright);outline-offset:2px}

/* misc */
.bar{height:8px;border-radius:99px;background:var(--cloud);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--teal);transition:width 1.2s var(--ease-soft)}
.empty{padding:36px 20px;text-align:center}
.empty b{display:block;font-size:16px;font-weight:600;color:var(--navy);margin-bottom:4px}
.empty p{color:var(--muted);font-size:14px;max-width:44ch;margin:0 auto 14px}
.kv2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}
@media(min-width:760px){.kv2{grid-template-columns:repeat(4,1fr)}}
.kv2 dt{font-size:12.5px;color:var(--muted)}
.kv2 dd{font-size:15px;font-weight:600;color:var(--navy);margin-top:2px}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;background:var(--cloud);color:var(--ink)}
.tag.g{background:var(--mint);color:var(--green)}
.tag.w{background:var(--warn-50);color:var(--warn)}
.tag.b{background:var(--indigo-50);color:var(--bright)}
.tbl td.act{text-align:right}
.toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,16px);opacity:0;padding:10px 16px;border-radius:var(--r-input);background:var(--navy);color:#fff;font-size:14px;font-weight:600;pointer-events:none;transition:opacity .3s var(--ease-soft),transform .3s var(--ease-soft)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.split>*,.cols-2>*,.cols-3>*,.stack>*{min-width:0}

.note.long{flex-wrap:nowrap;align-items:flex-start;max-width:900px}.note.long svg.i{flex:none;margin-top:1px}

/* text fields show focus with the blue border only, no ring */
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* squircle corners everywhere; circles and pills stay round */
*,*::before,*::after{corner-shape:squircle}
.au-art::after,.au-art::before,.bar,.bar i,.chat-h small::before,.chip::before,.choice span,.fbar,.fbar i,.icon-btn .dot,.mini,.mini i,.paid .bar,.paid .bar i,.pick .dot,.pick .dot::after,.pl .track,.pl .track i,.plan-l .dot,.plan-l .dot::after,.prog .bar,.prog .bar i,.prompts button,.st,.stackbar,.steps-bar div i,.sw span,.sw span::after,.typing i{corner-shape:round}

/* an error replaces the field hint instead of adding a line, so fields don't jump */
.f.bad>small:not(.err){display:none}

/* ---------- modal ---------- */
html.mdl-open{overflow:hidden}
dialog.mdl{width:min(100% - 32px,640px);max-height:min(100dvh - 48px,880px);margin:auto;padding:0;border:0;border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:0 40px 80px -24px rgba(18,23,64,.45);overflow:hidden}
dialog.mdl.sm{width:min(100% - 32px,440px)}
dialog.mdl.lg{width:min(100% - 32px,760px)}
dialog.mdl[open]{display:flex;flex-direction:column;animation:mdlIn .35s var(--ease-soft)}
dialog.mdl::backdrop{background:rgba(18,23,64,.42);backdrop-filter:blur(3px);animation:mdlFade .3s ease}
@keyframes mdlIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mdlFade{from{opacity:0}}
dialog.mdl form{display:flex;flex-direction:column;min-height:0}
.mdl-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px 0}
.mdl-h h2{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--navy)}
.mdl-h p{margin-top:4px;font-size:14px;color:var(--muted)}
.mdl-x{width:36px;height:36px;flex:none;margin:-6px -8px 0 0;border:0;border-radius:var(--r-input);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.mdl-x:hover{background:var(--cloud);color:var(--navy)}
.mdl-x svg{width:18px;height:18px}
.mdl-b{padding:18px 24px 4px;overflow-y:auto;min-height:0}
.mdl-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px 22px;border-top:1px solid var(--line);margin-top:14px}
.mdl-txt{font-size:14.5px;color:var(--ink)}
.pw{position:relative}.pw input{padding-right:52px}
.pw-t{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:10px;background:none;display:grid;place-items:center;color:var(--navy);cursor:pointer;transition:background .2s}
.pw-t:hover{background:var(--cloud)}
.pw-t svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-t .off{display:none}.pw-t[aria-pressed=true] .on{display:none}.pw-t[aria-pressed=true] .off{display:block}
.mdl .f .err{display:none;color:var(--warn)}
.mdl .f.bad .err{display:block}
.mdl .f.bad input,.mdl .f.bad select,.mdl .f.bad textarea{border-color:var(--warn)}
.mdl .opt{font-weight:500;color:var(--muted)}
.mdl .sec-l{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin:18px 0 10px}
.mdl .sec-l:first-child{margin-top:0}
.chks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--bright);cursor:pointer}
.btn.danger{background:var(--warn)}.btn.danger:hover{background:#A3350A}
@media(max-width:560px){dialog.mdl{width:100%;max-height:92dvh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0}.mdl-f .btn{flex:1}}
.link.danger-l{color:var(--warn)}.link.danger-l:hover{color:#A3350A}
.loan-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:16px;border-top:1px solid var(--line)}
.loan-act .btn{margin-left:0;order:-1}

/* ---------- dashboard tour ---------- */
.tour-btn{position:fixed;right:16px;bottom:72px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:var(--r-input);background:#fff;color:var(--navy);font:inherit;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px -10px rgba(18,23,64,.35),inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .2s}
.tour-btn:hover{box-shadow:0 10px 30px -10px rgba(18,23,64,.35),inset 0 0 0 1px var(--line-2)}
.tour-btn svg{width:16px;height:16px;color:var(--bright)}
.tour-btn em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);padding-left:8px;border-left:1px solid var(--line)}
.tour-ring{position:absolute;z-index:70;border-radius:var(--r-lg);box-shadow:0 0 0 2px var(--bright),0 0 0 9999px rgba(18,23,64,.38);pointer-events:none;transition:all .35s var(--ease-soft)}
.tour-pop{position:absolute;z-index:71;width:min(360px,calc(100vw - 32px));padding:18px 18px 14px;border-radius:var(--r-lg);background:#fff;box-shadow:0 30px 60px -20px rgba(18,23,64,.5);animation:mdlIn .3s var(--ease-soft);transition:top .35s var(--ease-soft),left .35s var(--ease-soft)}
.tour-k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bright);margin-bottom:6px}
.tour-pop h3{font-size:17px;font-weight:600;color:var(--navy)}
.tour-pop p:not(.tour-k){font-size:14px;color:var(--muted);margin-top:4px}
.tour-f{display:flex;align-items:center;gap:8px;margin-top:14px}.tour-f span{flex:1}
.tour-f .link{font-size:13px;color:var(--muted)}

/* input with a trailing unit, like % */
.f .post{position:relative}.f .post input{width:100%;padding-right:34px}.f .post span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px;pointer-events:none}

/* ---------- vertical rhythm: every stacked block on a page gets the same gap ---------- */
:is(.content,.content>section)>:is(.card,.grid,.cols-2,.cols-3,.split,.stack,.sumbar,.toolbar,.tabs,.mem-g,.calc-g,.sks,.lay,h2.h2,.card-row)+:is(.card,.grid,.cols-2,.cols-3,.split,.stack,.sumbar,.toolbar,.tabs,.mem-g,.calc-g,.sks,.lay,h2.h2,.card-row,p.sub){margin-top:20px}
:is(.content,.content>section)>h2.h2+*{margin-top:12px}
/* table row actions stay on one line */
.tbl td.act{white-space:nowrap}
.tbl td.act>*+*{margin-left:6px}
.tbl td.act>.icon-btn,.tbl td.act>.btn{display:inline-grid;vertical-align:middle}.tbl td.act>.btn{display:inline-flex}

/* Manrope swaps "(c)" for ©, which breaks "501(c)(3)" */
html{font-feature-settings:"calt" 0}


/* ---------- date field (datepicker.js) ---------- */
.dp{position:relative}
.dp input{width:100%;padding-right:46px}
.dp-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:10px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.dp-btn:hover,.dp.open .dp-btn{background:var(--indigo-50);color:var(--bright)}
.dp-btn svg,.dp-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dp.open input{border-color:var(--bright)}
.dp-pop{position:fixed;inset:auto;margin:0;z-index:200;width:316px;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:0 24px 50px -16px rgba(18,23,64,.35);font-family:inherit;animation:mdlIn .2s var(--ease-soft)}
.dp-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.dp-h select{flex:1;min-width:0;height:34px;padding:0 26px 0 10px;border:1px solid var(--line);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23121740' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;font:inherit;font-size:14px;font-weight:600;color:var(--navy);-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .2s}
.dp-h select:hover{border-color:var(--line-2)}.dp-h select:focus{outline:none;border-color:var(--bright)}
.dp-h .dp-y{flex:0 0 76px}
.dp-nav{width:34px;height:34px;flex:none;border:0;border-radius:10px;background:none;color:var(--navy);display:grid;place-items:center;cursor:pointer}
.dp-nav:hover{background:var(--cloud)}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-g b{font-size:11.5px;font-weight:600;color:var(--subtle);text-align:center;padding:6px 0}
.dp-g button{height:36px;border:0;border-radius:10px;background:none;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s}
.dp-g button:hover{background:var(--cloud)}
.dp-g button.today{color:var(--bright);font-weight:600;box-shadow:inset 0 0 0 1px var(--indigo-50)}
.dp-g button.on{background:var(--bright);color:#fff;font-weight:600}
.dp-f{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dp-f button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--bright);padding:6px 8px;border-radius:8px;cursor:pointer}
.dp-f button:hover{background:var(--indigo-50)}
.dp-f [data-clear]{color:var(--muted)}

/* info lines (page notes and the legal line): no fill, darker text, blue icon */
.note,.note-more{color:#3A475A}
.note{font-size:13.5px}
.note svg.i{color:var(--bright)}
.legal{color:#3A475A;font-size:13px}
.legal svg{color:var(--bright)}

/* even padding in the top bar; the content tucks up under it so the gap to the page title stays the same */
.top{padding-bottom:13px}
.content{padding-top:0;margin-top:-9px}
.page-h,.hello{margin-top:14px}

/* small icon buttons (row actions like delete) */
.icon-btn.sm{width:32px;height:32px}
.icon-btn.sm svg,.icon-btn.sm svg.i{width:15px;height:15px}

/* tour button sits at the bottom of the left menu */
.side .tour-btn{position:static;right:auto;bottom:auto;margin-top:auto;width:100%;justify-content:flex-start;box-shadow:inset 0 0 0 1px var(--line);background:#fff;flex:none}
.side .tour-btn:hover{box-shadow:inset 0 0 0 1px var(--line-2);background:var(--cloud)}
.side .tour-btn span{flex:1;text-align:left}

/* the browser caps <dialog> at 100% minus ~38px; lift it so the phone sheet spans edge to edge */
dialog.mdl{max-width:none;max-height:min(100dvh - 48px,880px)}
dialog.mdl:focus,dialog.mdl:focus-visible{outline:none}
@media(max-width:560px){
  dialog.mdl,dialog.mdl.sm,dialog.mdl.lg{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;inset:auto 0 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .mdl-h{padding:20px 20px 0}.mdl-b{padding:16px 20px 4px}.mdl-f{padding:14px 20px 18px}
}

/* account state banners (past due, canceled, stale sync) */
.acct-w{display:grid;gap:12px;margin:14px 0 6px}
.acct-b{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-lg);background:#fff;border:1.5px solid #F3C4A2}
.acct-b.w{background:#FFF6F0;border-color:#F0B48C}
.acct-b.b{border-color:#C9CFFF}
.acct-b .ab-i{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--warn);color:#fff}
.acct-b.b .ab-i{background:var(--bright)}
.acct-b .ab-i svg{width:18px;height:18px}
.acct-b>div{flex:1;min-width:0}.acct-b b{display:block;font-size:15px;font-weight:600;color:var(--navy)}.acct-b span{font-size:13.5px;color:var(--ink)}
@media(max-width:600px){.acct-b{flex-wrap:wrap}.acct-b .btn{width:100%;justify-content:center}}
.acct-w+.page-h,.acct-w+.hello{margin-top:14px}

/* admin "logged in as" bar */
.imp{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:28px;min-height:56px;padding:8px clamp(16px,3vw,28px);background:#C4452A;color:#fff;overflow-x:auto;scrollbar-width:none}
.imp::-webkit-scrollbar{display:none}
.imp-f{display:grid;gap:1px;flex:none}.imp-f small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}.imp-f b{font-size:13px;font-weight:700;white-space:nowrap}
.imp-a{position:relative;margin-left:auto;flex:none}
.imp-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:#fff;color:#C4452A;font-size:13.5px;font-weight:600}.imp-btn svg{width:14px;height:14px}
.imp-m{position:fixed;right:clamp(16px,3vw,28px);top:52px;min-width:200px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-input);box-shadow:var(--shadow);display:none;z-index:70}
.imp-a.open .imp-m{display:grid}
.sw-l{display:grid;gap:4px;margin-top:12px}.sw-u{display:grid;gap:2px;width:100%;padding:10px 12px;border-radius:var(--r-input);text-align:left;transition:background .2s}.sw-u:hover,.sw-u:focus-visible{background:var(--cloud)}.sw-u b{font-size:14.5px;font-weight:600;color:var(--navy)}.sw-u small{font-size:12.5px;color:var(--muted)}
.imp-m button{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink);text-align:left}.imp-m button:hover{background:var(--cloud)}.imp-m svg{width:16px;height:16px;color:var(--muted)}
.imp-on .top{top:56px}
@media(min-width:1024px){.imp-on .side{top:56px;height:calc(100vh - 56px)}}
.imp-l>li:first-child{border-top:0}
@media(max-width:640px){.imp{gap:16px;overflow:visible}.imp-f:nth-child(2),.imp-f:nth-child(3),.imp-f:nth-child(5),.imp-f:nth-child(6){display:none}.imp-f b{font-size:12.5px}.imp-btn{height:32px;padding:0 12px}}

/* demo states popover */
.demo-more{display:grid;place-items:center;width:30px;height:28px;padding:0!important}.demo-more svg{width:15px;height:15px}
.demo-more[aria-expanded=true]{background:var(--cloud);color:var(--navy)}
.demo-m{position:fixed;right:16px;bottom:64px;z-index:61;width:260px;display:grid;gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-input);box-shadow:var(--shadow)}
.dm-f{display:grid;gap:4px}.dm-f span{font-size:12px;font-weight:600;color:var(--muted)}
.dm-f select{height:38px;padding:0 34px 0 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23121740' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .2s}
.dm-f select:hover{border-color:var(--line-2)}.dm-f select:focus{outline:none;border-color:var(--bright)}

/* field errors on regular pages, same as in popups */
.f .err{display:none;color:var(--warn)}
.f.bad .err{display:block}
.f.bad input,.f.bad select,.f.bad textarea{border-color:var(--warn)}

.steps-l{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink)}

/* one vertical rhythm: 20px between stacked blocks and below page titles */
.page-h,.hello{margin-bottom:20px}
.stack,.side-col,.lay,.ctx{gap:20px}

/* popups with no button row keep the same bottom space as the others */
.mdl form:not(:has(.mdl-f)) .mdl-b{padding-bottom:24px}
@media(max-width:560px){.mdl form:not(:has(.mdl-f)) .mdl-b{padding-bottom:20px}}
/* one size for stat numbers and card titles */
.kpi b,.sumbar b{font-size:28px}
.mini-h h3{font-size:18px}
/* horizontal banners share one padding */
.nba,.card.resume-c,.acct-b{padding:18px 22px}
@media(max-width:600px){.nba,.card.resume-c,.acct-b{padding:16px 18px}}

/* small gray labels: darker gray so they meet 4.5:1 contrast */
.nav-label,.demo-l,.mdl .sec-l,.dp-g b{color:var(--muted)}

/* no single word left alone on the last line */
body{text-wrap:pretty}
h1,h2,h3,h4,.zone b,.zone span{text-wrap:balance}

/* one status style everywhere: tags in headers and cards, loan and form statuses, plan labels */
.tag,.st{font-family:var(--body);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap;vertical-align:middle}
.tag svg,.st svg{width:14px;height:14px;flex:none}
.nav-a .tag{height:20px;padding:0 7px;font-size:10.5px;letter-spacing:.04em}

/* side menu: quieter inactive items, sections set apart by space */
.nav-group{gap:2px;margin-bottom:0}
.nav-group+.nav-group{margin-top:24px}
.nav-label{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted);padding:0 12px 6px}
.nav-a{position:relative;gap:12px;padding:8px 12px;font-size:14.5px;font-weight:500;color:#3A475A}
.nav-a svg{width:20px;height:20px;flex:none;color:var(--muted);transition:color .2s}
.nav-a:hover{background:var(--cloud);color:var(--navy)}
.nav-a:hover svg{color:var(--navy)}
.nav-a.on{background:var(--indigo-50);color:var(--bright);font-weight:600}
.nav-a.on svg{color:var(--bright)}
.nav-a .cnt{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--cloud);font-size:11.5px;color:var(--muted)}
.nav-a.on .cnt{background:#fff;color:var(--bright)}
/* spacing shrinks with the window height so the menu never needs to scroll (the admin bar takes 56px) */
.side{--vh:100vh}
.imp-on .side{--vh:calc(100vh - 56px)}
.nav-a{padding:clamp(3px,calc((var(--vh) - 560px) / 40),8px) 12px}
.nav-group+.nav-group{margin-top:clamp(6px,calc((var(--vh) - 560px) / 14),24px)}
.nav-label{padding-bottom:clamp(2px,calc((var(--vh) - 560px) / 56),6px)}
.side .logo{padding-bottom:clamp(6px,calc((var(--vh) - 560px) / 22),16px)}
@media(max-height:640px){.nav-a{font-size:14px}}
.side{overflow-y:auto;scrollbar-width:none}.side::-webkit-scrollbar{display:none}

/* My loans: title, description and filters sit over the list, aligned left */
.loans-col{display:grid;gap:14px;min-width:0}
.lh h2{font-size:18px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.lh .sub{margin-top:2px}
.loans-col .toolbar{justify-content:flex-start;margin:0;column-gap:20px;row-gap:10px}
.loans-col .toolbar #resetF{margin:0 0 0 4px}
@media(max-width:640px){
  .loans-col .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .loans-col .sort{flex-direction:column;align-items:stretch;gap:6px}
  .loans-col .sort select{width:100%;height:40px}
  .loans-col .toolbar #resetF{margin:0;align-self:end;justify-self:start;height:40px}
}
/* card titles: room between the title, its description and the content below */
.card-h{margin-bottom:20px}
.mini-h{margin-bottom:20px}
.mini-h p{margin-top:6px;line-height:1.5}