/* ===== Launch24 Client Portal — glassmorphism ===== */
:root{
  --ink:#16181D; --ink-soft:#2A2D36; --paper:#FBFAF7;
  --orange:#FF5A2C; --orange-press:#E8410F; --orange-tint:#FFE9E0;
  --muted:#6C6C74; --line:#E4E0D8;

  --text:#F4F3F0; --text-dim:#C4C8D1; --text-faint:#969CA7;
  --ok:#3ECF8E;

  /* glass tuning (navy-black tinted, per spec) */
  --g-fill: rgba(16,18,24,.46);
  --g-fill-soft: rgba(20,23,30,.40);
  --g-fill-solid: rgba(14,16,21,.62);
  --g-border: rgba(255,255,255,.14);
  --g-border-bright: rgba(255,255,255,.26);
  --g-blur: blur(22px) saturate(130%);
  --radius:16px;

  --font-d:'Bricolage Grotesque',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-b); color:var(--text); background:var(--ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
svg{display:block}

/* ---------- LAYER 1+2: rocket environment + darkening ---------- */
.l24-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  /* fallback atmosphere (used until/if the rocket image loads) */
  background:
    radial-gradient(1100px 760px at 24% 36%, rgba(255,90,44,.14), transparent 60%),
    radial-gradient(1200px 900px at 82% 8%, rgba(42,45,54,.65), transparent 70%),
    linear-gradient(160deg, #1b1e27 0%, #121419 48%, #0c0d12 100%);
}
.l24-bg::before{
  content:""; position:absolute; inset:0;
  background-image:url("../img/launch24-rocket-background.webp");
  background-size:cover; background-position:34% 40%;
  /* if the file is missing the element is simply transparent -> fallback shows */
}
.l24-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,11,15,.26) 0%, rgba(10,11,15,.16) 42%, rgba(8,9,12,.64) 100%),
    radial-gradient(900px 600px at 50% 120%, rgba(6,7,10,.55), transparent 70%);
}

/* ---------- APP SHELL ---------- */
.l24-app{
  position:relative; z-index:1;
  min-height:100vh;
  padding:22px 26px 16px 104px;      /* left pad clears floating sidebar */
  display:flex; flex-direction:column; gap:18px;
  max-width:1600px; margin:0 auto;
}

/* ---------- GLASS BASE ---------- */
.glass{
  position:relative; border-radius:var(--radius);
  background:var(--g-fill);
  -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur);
  border:1px solid var(--g-border);
  box-shadow:0 24px 50px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12);
}
/* top-edge reflection + gradient hairline */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.4), rgba(255,255,255,.04) 34%, transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* ---------- HEADER ---------- */
.l24-header{
  display:flex; align-items:center; gap:22px;
  padding:14px 20px;
}
.l24-brandblock{display:flex;align-items:center;gap:18px}
.l24-wordmark{font-family:var(--font-d);font-weight:800;font-size:22px;letter-spacing:-.02em;color:#fff}
.l24-wordmark span{color:var(--orange)}
.l24-divider{width:1px;height:34px;background:linear-gradient(var(--g-border),transparent)}
.l24-greet{flex:1;min-width:0}
.eyebrow{font-family:var(--font-b);font-size:11.5px;font-weight:600;letter-spacing:.005em;text-transform:none;color:var(--text-dim)}
.l24-hello{font-family:var(--font-d);font-weight:700;font-size:19px;letter-spacing:-.01em;margin-top:3px;color:#fff}
.l24-substatus{font-size:12.5px;color:var(--text-dim);margin-top:1px}
.l24-headright{display:flex;align-items:center;gap:12px}
.l24-iconbtn{
  position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--g-fill-soft);border:1px solid var(--g-border);color:var(--text-dim);transition:.2s var(--ease);
}
.l24-iconbtn:hover{color:#fff;border-color:var(--g-border-bright)}
.l24-iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.l24-iconbtn--sm{width:32px;height:32px;border-radius:9px}
.l24-iconbtn--sm svg{width:15px;height:15px}
.l24-dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px rgba(16,18,24,.9),0 0 8px var(--orange)}
.l24-account{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;border-radius:12px;border:1px solid transparent;transition:.2s var(--ease)}
.l24-account:hover{background:var(--g-fill-soft);border-color:var(--g-border)}
.l24-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:12.5px;color:#fff;background:linear-gradient(135deg,#3a3f4b,#23262f);border:1px solid var(--g-border-bright)}
.l24-acctmeta{display:flex;flex-direction:column;line-height:1.25}
.l24-acctname{font-size:13px;font-weight:600;color:#fff}
.l24-acctbiz{font-size:11px;color:var(--text-faint)}
.l24-caret{width:16px;height:16px;stroke:var(--text-faint);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- SIDEBAR ---------- */
.l24-sidebar{
  position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:5;
  width:62px; padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--g-fill-solid);
}
.l24-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:10px;
  font-family:var(--font-d);font-weight:800;font-size:16px;color:#2a1206;
  background:linear-gradient(135deg,#ff7d57,var(--orange));box-shadow:0 8px 18px -6px rgba(255,90,44,.6)}
.l24-nav{list-style:none;display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.l24-navspacer{flex:1}
.l24-navitem{position:relative;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--text-faint);transition:.18s var(--ease)}
.l24-navitem svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.l24-navitem:hover{color:#fff;background:rgba(255,255,255,.07)}
.l24-navitem.is-active{color:#fff;background:rgba(255,90,44,.16);box-shadow:inset 0 0 0 1px rgba(255,90,44,.42)}
.l24-navitem.is-active::before{content:"";position:absolute;left:-14px;top:12px;height:18px;width:3px;border-radius:3px;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.l24-logout:hover{color:#ff9f86}
/* tooltip */
.l24-navitem[data-tip]::after{
  content:attr(data-tip);position:absolute;left:52px;top:50%;transform:translateY(-50%) translateX(-4px);
  background:rgba(12,13,17,.94);color:#fff;font-size:11.5px;white-space:nowrap;padding:5px 9px;border-radius:7px;
  border:1px solid var(--g-border);opacity:0;pointer-events:none;transition:.16s var(--ease);
}
.l24-navitem:hover[data-tip]::after{opacity:1;transform:translateY(-50%) translateX(0)}

/* ---------- MAIN GRID ---------- */
.l24-grid{
  display:grid; gap:16px; align-items:start;
  grid-template-columns:288px minmax(0,1fr) 332px;
  grid-template-areas:
    "build  perf    stats"
    "build  midrow  preview";
}
.build-progress{grid-area:build; align-self:stretch; display:flex; flex-direction:column}
.performance{grid-area:perf}
.stats-col{grid-area:stats; display:flex; flex-direction:column; gap:16px}
.mid-row{grid-area:midrow; display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px}
.preview{grid-area:preview}
/* wrappers */
.stats-col .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- CARD BASICS ---------- */
.card{padding:18px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-title{font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:-.01em;margin-top:6px;color:#fff}
.card-sub{font-size:12px;color:var(--text-dim);margin-top:4px;max-width:30ch}
.pill{font-family:var(--font-m);font-size:10.5px;letter-spacing:.03em;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--g-border);color:var(--text-dim)}
.link{font-size:12px;color:var(--text-dim);border-bottom:1px solid transparent;transition:.18s}
.link:hover{color:#fff;border-color:var(--g-border-bright)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:600;font-size:13px;border-radius:11px;padding:11px 16px;transition:.18s var(--ease)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{width:100%;margin-top:14px;background:rgba(255,255,255,.05);border:1px solid var(--g-border);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--g-border-bright)}
.demo-flag{display:inline-block;margin-top:8px;font-family:var(--font-b);font-size:11px;letter-spacing:0;text-transform:none;color:var(--text-faint)}

/* ---------- TIMELINE ---------- */
.timeline{list-style:none;position:relative;margin-top:4px;flex:1}
.tl-step{position:relative;padding:8px 8px 18px 38px;border-radius:10px;cursor:pointer;transition:background .15s var(--ease)}
.tl-step:hover,.tl-step:focus-visible{background:rgba(255,255,255,.045);outline:none}
.tl-step:last-child{padding-bottom:8px}
.tl-step::before{content:"";position:absolute;left:19px;top:30px;bottom:2px;width:2px;background:rgba(255,255,255,.1)}
.tl-step:last-child::before{display:none}
.tl-node{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-m);font-size:10px;color:var(--text-faint);
  background:rgba(20,22,28,.9);border:2px solid rgba(255,255,255,.18)}
.tl-node svg{width:11px;height:11px;stroke:#0e1013;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tl-step.done .tl-node{background:var(--ok);border-color:var(--ok);color:#0e1013}
.tl-step.done::before{background:linear-gradient(var(--ok),rgba(62,207,142,.25))}
/* active emphasis lives on the node only — no oversized rectangle */
.tl-step.active .tl-node{background:var(--orange);border-color:var(--orange);color:#2a1206;box-shadow:0 0 0 4px rgba(255,90,44,.14)}
.tl-lbl{display:block;font-weight:600;font-size:13.5px;color:#fff;line-height:1.2}
.tl-step.active .tl-lbl{color:#fff}
.tl-step.upcoming .tl-lbl{color:var(--text-faint);font-weight:500}
.tl-meta{display:block;font-family:var(--font-b);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-dim);margin-top:3px}
.tl-step.active .tl-meta{color:#ffb79e}
.tl-desc{display:block;font-size:11.5px;color:var(--text-dim);margin-top:3px;max-width:32ch}
@media (prefers-reduced-motion:no-preference){
  .tl-step.active .tl-node{animation:nodepulse 2.6s var(--ease) infinite}
  @keyframes nodepulse{0%,100%{box-shadow:0 0 0 4px rgba(255,90,44,.14),0 0 10px rgba(255,90,44,.4)}50%{box-shadow:0 0 0 6px rgba(255,90,44,.07),0 0 16px rgba(255,90,44,.58)}}
}

/* ---------- PERFORMANCE CHART ---------- */
.seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--g-border);border-radius:10px;padding:3px}
.seg button{font-family:var(--font-m);font-size:11px;letter-spacing:.03em;color:var(--text-dim);padding:5px 10px;border-radius:7px;transition:.16s}
.seg button.is-active{background:rgba(255,90,44,.18);color:#ffcbb8;box-shadow:inset 0 0 0 1px rgba(255,90,44,.4)}
.chart{position:relative;margin-top:4px}
.chart-svg{width:100%;height:168px;display:block;overflow:visible}
.chart-x{display:flex;justify-content:space-between;font-family:var(--font-b);font-size:10.5px;color:var(--text-faint);margin-top:8px}
.chart-grid{stroke:rgba(255,255,255,.045);stroke-width:1}
.chart-area{fill:url(#l24area)}
.chart-line{fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 3px 8px rgba(255,90,44,.28))}
.chart-dot{fill:#fff;stroke:var(--orange);stroke-width:2.5}
.chart-tip{position:absolute;transform:translate(-50%,-115%);background:rgba(12,13,17,.95);border:1px solid var(--g-border);border-radius:8px;padding:6px 9px;font-size:11px;pointer-events:none;opacity:0;transition:.12s;white-space:nowrap}
.chart-tip b{font-family:var(--font-d)}

/* ---------- STATS ---------- */
/* compact stats: centred, bold value, no decorative icons */
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:128px;padding:20px 16px}
.stat-label{font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.stat-num{font-family:var(--font-d);font-weight:800;font-size:38px;letter-spacing:-.03em;color:#fff;line-height:1}
.stat-num--sm{font-size:24px}
.stat-cap{font-size:12px;color:var(--text-dim);max-width:24ch}
.days-num{font-family:var(--font-d);font-weight:800;font-size:38px;letter-spacing:-.03em;color:#fff;line-height:1}

/* ---------- CARE USAGE DONUT ---------- */
.usage-body{display:flex;align-items:center;gap:14px}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:104px;height:104px}
.ring-track{stroke:rgba(255,255,255,.09)}
.ring-val{stroke:var(--orange);filter:drop-shadow(0 0 6px rgba(255,90,44,.55));transition:stroke-dashoffset 1s var(--ease)}
.ring-ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring-ctr b{display:block;font-family:var(--font-d);font-weight:800;font-size:26px;color:#fff;line-height:1}
.ring-ctr span{font-family:var(--font-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.usage-legend{list-style:none;display:flex;flex-direction:column;gap:8px;min-width:0}
.usage-legend li{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-dim);white-space:nowrap}
.usage-legend b{color:#fff;font-weight:600}
.ring-ctr b{font-size:23px}
.swatch{width:10px;height:10px;border-radius:3px;flex:none}

/* ---------- REQUESTS ---------- */
.req-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.req{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 13px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.req:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.req:focus-visible{outline:none;border-color:rgba(255,90,44,.55)}
.req--progress{box-shadow:inset 3px 0 0 rgba(255,90,44,.45)}
.req--action{border-color:rgba(255,90,44,.38);background:rgba(255,90,44,.045)}
.req--action:hover{border-color:rgba(255,90,44,.6);background:rgba(255,90,44,.07)}
.req-body{flex:1;min-width:0}
.req-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.35}
.req-d{display:block;font-family:var(--font-b);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--text-dim);margin-top:3px}
.req-status{flex:none;font-size:11.5px;font-weight:500;color:var(--text-faint);white-space:nowrap;margin-top:1px}
.req-status--progress{color:#ffb79e}
.req-status--action{color:#ffb79e;font-weight:600}
.req-status--done{color:var(--text-dim)}
.req-d{display:block;font-family:var(--font-b);font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--text-dim);margin-top:3px}
.status{flex:none;display:inline-flex;align-items:center;font-family:var(--font-b);font-weight:600;font-size:11px;letter-spacing:0;text-transform:none;padding:4px 10px;border-radius:7px;line-height:1.5;white-space:nowrap}
/* brand-restrained statuses: neutral / orange / green only */
.s-progress{color:#ffb79e;background:rgba(255,90,44,.16);border:1px solid rgba(255,90,44,.34)}
.s-review{color:#ffcdbb;background:rgba(255,90,44,.10);border:1px solid rgba(255,90,44,.22)}
.s-queued{color:var(--text-dim);background:rgba(255,255,255,.06);border:1px solid var(--g-border)}
.s-open{color:var(--text-dim);background:rgba(255,255,255,.06);border:1px solid var(--g-border)}
.s-completed{color:var(--ok);background:rgba(62,207,142,.13);border:1px solid rgba(62,207,142,.32)}

/* ---------- WEBSITE PREVIEW ---------- */
.browser{border-radius:11px;overflow:hidden;border:1px solid var(--g-border-bright);background:#0b0d11;box-shadow:0 16px 34px -22px #000}
.browser-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--g-border)}
.browser-bar i{width:8px;height:8px;border-radius:50%;background:#394050}
.browser-url{margin-left:8px;font-family:var(--font-m);font-size:9.5px;color:var(--text-faint)}
.browser-shot{height:132px;padding:18px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(420px 180px at 76% 0,rgba(255,90,44,.26),transparent 60%),linear-gradient(160deg,#1a1d25,#0e1015)}
.shot-h{font-family:var(--font-d);font-weight:800;font-size:18px;letter-spacing:-.02em;max-width:76%;color:#fff}
.shot-h b{color:var(--orange)}
.shot-s{font-size:10.5px;color:var(--text-dim);margin-top:6px;max-width:66%}
.preview-status{font-family:var(--font-b);font-size:11.5px;letter-spacing:0;color:var(--text-dim);margin-top:12px;text-transform:none}

/* ---------- FOOTER ---------- */
.l24-footer{display:flex;align-items:center;gap:14px;padding:4px 6px 2px;font-size:11px;color:var(--text-faint)}
.l24-foot-mark{font-family:var(--font-d);font-weight:800;font-size:13px;color:var(--text-dim)}
.l24-foot-mark span{color:var(--orange)}

/* ---------- ENTRANCE ANIMATION ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-anim]{opacity:0;transform:translateY(14px);animation:rise .6s var(--ease) forwards}
  [data-anim="header"]{animation-delay:.02s}
  [data-anim="sidebar"]{animation-delay:.10s;transform:translateY(-50%) translateX(-14px)}
  .l24-grid [data-anim="panel"]:nth-child(1){animation-delay:.14s}
  .l24-grid [data-anim="panel"]:nth-child(2){animation-delay:.20s}
  .l24-grid [data-anim="panel"]:nth-child(3){animation-delay:.26s}
  .l24-grid [data-anim="panel"]:nth-child(4){animation-delay:.30s}
  .l24-grid [data-anim="panel"]:nth-child(5){animation-delay:.34s}
  .l24-grid [data-anim="panel"]:nth-child(6){animation-delay:.38s}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  .l24-sidebar[data-anim]{animation-name:riseSb}
  @keyframes riseSb{to{opacity:1;transform:translateY(-50%) translateX(0)}}
}
.card,.l24-iconbtn,.l24-account,.btn{transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card[data-anim]:hover{border-color:var(--g-border-bright);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .l24-grid{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"build perf" "build stats" "midrow midrow" "preview preview"}
  .mid-row{grid-template-columns:260px minmax(0,1fr)}
}
@media (max-width:860px){
  .l24-app{padding:16px 16px 14px 16px}
  .l24-sidebar{position:sticky;left:auto;top:auto;transform:none;flex-direction:row;width:100%;justify-content:center;gap:4px;order:5}
  .l24-sidebar[data-anim]{animation-name:rise}
  .l24-navspacer{flex:0;width:16px}
  .l24-logo{display:none}
  .l24-navitem.is-active::before{display:none}
  .l24-grid{grid-template-columns:1fr;grid-template-areas:"build" "perf" "stats" "midrow" "preview"}
  .mid-row{grid-template-columns:1fr}
  .stats-col .stat-row{grid-template-columns:1fr 1fr}
  .l24-header{flex-wrap:wrap;gap:12px}
  .l24-greet{order:3;flex-basis:100%}
}
@media (max-width:460px){
  .stats-col .stat-row{grid-template-columns:1fr}
  .l24-acctmeta{display:none}
}
@media (max-width:760px){
  .l24-bg::before{background-image:url("../img/launch24-rocket-mobile.webp")}
}

/* ======================= AI CREDIT BAR ======================= */
.l24-credits{padding:12px 18px}
.cr-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cr-top{margin-bottom:9px}
.cr-label{font-size:12.5px;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:7px}
.cr-hint{width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;font-family:var(--font-m);color:var(--text-faint);background:rgba(255,255,255,.07);border:1px solid var(--g-border);cursor:help}
.cr-count{font-family:var(--font-b);font-size:13px;font-weight:500;color:var(--text-dim)}
.cr-count b{font-family:var(--font-d);font-weight:800;font-size:20px;color:var(--text);letter-spacing:-.02em;margin-right:3px}
.cr-of{color:var(--text-faint)}
.cr-track{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.cr-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ff7d57,var(--orange));box-shadow:0 0 10px -2px rgba(255,90,44,.55);transition:width 1s var(--ease)}
.cr-bot{margin-top:9px}
.cr-used{font-family:var(--font-b);font-size:12px;letter-spacing:0;color:var(--text-dim)}
.cr-view{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#ffcbb8;transition:.16s var(--ease)}
.cr-view svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cr-view:hover{color:#fff}

/* ======================= NOTIFICATIONS ======================= */
.l24-notifwrap{position:relative}
.l24-notif{position:absolute;top:50px;right:0;width:308px;padding:6px;z-index:40;background:var(--g-fill-solid)}
.l24-notif[hidden]{display:none}
.l24-notif-head{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 10px;border-bottom:1px solid var(--g-border);margin-bottom:4px}
.l24-notif-head b{font-size:13px;color:#fff}
.l24-notif-head span{font-family:var(--font-m);font-size:9.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em}
.nt{display:flex;gap:10px;padding:11px 10px;border-radius:10px;text-align:left}
.nt:hover{background:rgba(255,255,255,.05)}
.nt-ic{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--text-faint)}
.nt.action .nt-ic{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.nt-body{flex:1;min-width:0}
.nt-t{font-size:12.5px;font-weight:600;color:#fff}
.nt-b{font-size:11.5px;color:var(--text-dim);margin-top:2px;line-height:1.4}
.nt-w{font-family:var(--font-b);font-size:11px;color:var(--text-faint);margin-top:4px;text-transform:none;letter-spacing:0}

/* ======================= MODAL ======================= */
.l24-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.l24-modal[hidden]{display:none}
.l24-modal-backdrop{position:absolute;inset:0;background:rgba(6,7,10,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease}
.l24-modal-card{position:relative;width:min(540px,100%);max-height:86vh;overflow:auto;padding:26px 26px 24px;background:var(--g-fill-solid);animation:pop .22s var(--ease)}
.l24-modal-x{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--text-dim);background:rgba(255,255,255,.05);border:1px solid var(--g-border);transition:.16s var(--ease)}
.l24-modal-x:hover{color:#fff;background:rgba(255,255,255,.1)}
.l24-modal-x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.l24-modal-backdrop,.l24-modal-card{animation:none}}
.m-eyebrow{font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.m-title{font-family:var(--font-d);font-weight:800;font-size:21px;letter-spacing:-.02em;color:#fff;margin:6px 48px 4px 0}
.m-sub{font-size:13px;color:var(--text-dim);line-height:1.55}
.m-section{margin-top:18px}
.m-section h4{font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim);margin-bottom:8px}
.m-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.m-row:last-child{border-bottom:0}
.m-row span:first-child{color:var(--text-dim)}
.m-row span:last-child{color:#fff;font-weight:500;text-align:right}
.m-list{display:flex;flex-direction:column;gap:8px;list-style:none}
.m-list li{font-size:12.5px;color:var(--text-dim);padding-left:16px;position:relative}
.m-list li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--orange)}
.m-field{display:block;margin-top:14px}
.m-field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px}
.m-input,.m-textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--g-border);border-radius:10px;padding:11px 13px;color:#fff;font:inherit;font-size:13px}
.m-textarea{min-height:96px;resize:vertical}
.m-input:focus,.m-textarea:focus{outline:none;border-color:rgba(255,90,44,.5)}
.m-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn-primary{background:linear-gradient(135deg,#ff7d57,var(--orange));color:#2a1206;box-shadow:0 10px 24px -12px rgba(255,90,44,.7)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;filter:none;box-shadow:none}
.m-note{font-size:11px;color:var(--text-faint);margin-top:16px;line-height:1.55;border-top:1px solid rgba(255,255,255,.06);padding-top:12px}
.credit-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:11px;color:#ffcbb8;background:rgba(255,90,44,.14);border:1px solid rgba(255,90,44,.32);padding:5px 11px;border-radius:999px}
.m-ok{color:var(--ok)}
.uh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.uh:last-child{border-bottom:0}
.uh-t{font-size:13px;color:#fff;font-weight:500}
.uh-d{font-family:var(--font-b);font-size:11.5px;color:var(--text-dim);text-transform:none;letter-spacing:0;margin-top:2px}
.uh-amt{font-family:var(--font-d);font-weight:800;font-size:15px;color:#fff;white-space:nowrap}

/* request approve inline action + ring button reset */
.req-approve{font-family:var(--font-b);font-size:11px;font-weight:600;color:#2a1206;background:linear-gradient(135deg,#ff7d57,var(--orange));padding:5px 11px;border-radius:7px;white-space:nowrap;transition:.16s}
.req-approve:hover{filter:brightness(1.05)}
.req-approve:disabled{opacity:.5;cursor:not-allowed;filter:none}
.ring{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;cursor:pointer}
.link{cursor:pointer}

/* ======================= CARE PLAN CARD ======================= */
.care-card{gap:6px}
.care-tier{font-family:var(--font-d);font-weight:800;font-size:20px;letter-spacing:-.02em;color:#fff;line-height:1.1;white-space:nowrap}
.care-pkg{font-size:12.5px;color:var(--text-dim)}
.care-price{font-family:var(--font-m);font-size:11px;color:var(--text-faint);letter-spacing:.02em}

/* ======================= NEXT UP PANEL ======================= */
.nextup{display:flex;flex-direction:column}
.nextup.is-action{box-shadow:0 24px 50px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,90,44,.28)}
.nextup-body{display:flex;flex-direction:column;gap:11px;flex:1;justify-content:flex-start;align-items:flex-start;padding-top:4px}
.nextup-flag{font-family:var(--font-b);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.nextup-flag.is-action{color:#ffb79e}
.nextup-title{font-family:var(--font-d);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--text);line-height:1.12}
.nextup-sub{font-size:13px;color:var(--text-dim);line-height:1.55}
.nextup-btn{width:auto;margin-top:6px;padding:9px 16px}
.nextup-btn.is-action{background:transparent;border:1px solid rgba(255,90,44,.5);color:#ffcbb8;box-shadow:none}
.nextup-btn.is-action:hover{background:rgba(255,90,44,.1);border-color:rgba(255,90,44,.72)}
.nextup-btn:not(.is-action){background:rgba(255,255,255,.05);border:1px solid var(--g-border);color:var(--text)}
.nextup-btn:not(.is-action):hover{background:rgba(255,255,255,.09)}