/* ============================================================
   LazyLister app. Shared design system for the hub, the 11 tools
   and the account pages. Class names match app.js, so the engine
   needs no changes to pick this up.
   No em dashes anywhere. Mobile first.
   ============================================================ */

:root{
  --night:#070B1A;
  --tile-a:#1D2E78;          /* the icon tile gradient, top left   */
  --tile-b:#0C1440;          /* the icon tile gradient, bottom right */
  --surface:linear-gradient(160deg,#16225C 0%,#0D1540 55%,#0A1033 100%);
  --surface-flat:#0D1540;
  --edge:#28377F;
  --edge-strong:#3A4DA6;
  --field:#080D24;
  --field-line:#243170;
  --ink:#FFFFFF;
  --ink-soft:#C9D1F5;
  --muted:#A3ABCF;
  --faint:#6F79A8;
  --cobalt:#2E5BFF;
  --sky:#8CA2FF;
  --mint:#3DDC97;
  --amber:#FFB547;
  --coral:#FF6B6B;
  --accent:#2E5BFF;          /* kept for app.js, set per tool at runtime */
  --tile:#1D2E78;
  --radius-card:24px;
  --radius-field:14px;
  --radius-btn:16px;
  --lift:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.7);
  --glow:0 18px 50px -18px rgba(46,91,255,.6);
  --maxw:720px;
  --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  font-family:var(--font);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--night)}
body{
  min-height:100vh;
  background:var(--night);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  position:relative;
  isolation:isolate;
}
/* Night sky: one cobalt glow from the top and a faint grid that fades out */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 560px at 50% -220px,rgba(46,91,255,.30),transparent 70%),
    radial-gradient(700px 500px at 110% 110%,rgba(61,220,151,.05),transparent 70%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(140,162,255,.055) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,rgba(140,162,255,.055) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 75%);
}
a{color:inherit}
button{font-family:inherit}
::selection{background:rgba(46,91,255,.45);color:#fff}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:8px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(14px,4vw,28px);
  padding-top:max(12px,env(safe-area-inset-top));
  background:rgba(7,11,26,.72);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(40,55,127,.6);
}
.topbar-right{display:flex;align-items:center;gap:10px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  font-weight:800;font-size:19px;letter-spacing:-.03em;min-height:40px}
.brand .ai{font-weight:400;color:var(--sky)}
.brand svg{flex:0 0 auto}
.topbar .back{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  font-weight:600;font-size:15px;color:var(--ink-soft);
  text-decoration:none;padding:8px 12px 8px 6px;border-radius:12px;transition:background .15s,color .15s;
}
.topbar .back:hover{background:rgba(46,91,255,.14);color:#fff}
.topbar .back svg{width:18px;height:18px}
.plan-pill{
  font-family:var(--mono);font-size:12px;color:var(--ink-soft);
  background:rgba(13,21,64,.8);border:1px solid var(--edge);
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.plan-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 10px var(--mint)}
.plan-pill b{color:#fff;font-weight:500}
.logout-btn{
  border:1px solid var(--edge);background:transparent;color:var(--ink-soft);
  padding:7px 13px;border-radius:999px;cursor:pointer;font-size:13.5px;font-weight:600;
  min-height:36px;transition:border-color .15s,color .15s;
}
.logout-btn:hover{border-color:var(--sky);color:#fff}
@media(max-width:560px){.topbar .plan-pill{display:none}.brand{font-size:17px}}

/* ---------- page shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:34px 18px 110px}

.tool-head{display:flex;align-items:center;gap:18px;margin:6px 0 10px}
.tool-icon{
  width:76px;height:76px;flex:0 0 auto;border-radius:22px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--tile-a),var(--tile-b));
  border:1px solid var(--edge-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px -12px rgba(46,91,255,.65);
}
.tool-icon svg{width:50px;height:50px}
.tool-head .job{display:block;font-family:var(--mono);font-size:13px;color:var(--sky);margin-bottom:4px}
.tool-head h1{
  font-weight:800;font-size:clamp(32px,7vw,48px);line-height:.96;letter-spacing:-.04em;margin:0;
}
.tagline{color:var(--muted);font-size:17px;margin:4px 0 26px;max-width:56ch}

/* ---------- card + form ---------- */
.card{
  background:var(--surface);border:1px solid var(--edge);
  border-radius:var(--radius-card);box-shadow:var(--lift);
  padding:clamp(20px,4vw,28px);
}
.field{margin-bottom:20px}
.field:last-of-type{margin-bottom:24px}
.field > label{display:block;font-weight:600;font-size:15.5px;margin-bottom:9px;color:#fff}
.field > label .opt{font-weight:400;color:var(--faint);margin-left:6px}
.field .hint{color:var(--muted);font-size:13.5px;margin-top:8px}

.in,textarea.in,select.in{
  width:100%;background:var(--field);border:1.5px solid var(--field-line);
  border-radius:var(--radius-field);padding:14px 15px;font-size:16px;color:#fff;font-family:inherit;
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
.in::placeholder,textarea.in::placeholder{color:#5F6A99}
.in:focus,textarea.in:focus,select.in:focus{
  border-color:#5B7BFF;background:#0A1030;box-shadow:0 0 0 4px rgba(46,91,255,.22);
}
textarea.in{min-height:124px;resize:vertical;line-height:1.5}
select.in{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238CA2FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:44px;
}
select.in option{background:#0D1540;color:#fff}
input[type=number]::-webkit-inner-spin-button{opacity:.4}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.row2{grid-template-columns:1fr}}

.money{position:relative}
.money .sym{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:16px;pointer-events:none}
.money .in{padding-left:31px}

/* ---------- image upload ---------- */
.drop{
  display:block;border:1.5px dashed var(--edge-strong);border-radius:var(--radius-field);
  background:rgba(8,13,36,.7);padding:22px 18px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.drop:hover,.drop.over{border-color:var(--sky);background:rgba(46,91,255,.08)}
.drop .ico{width:34px;height:34px;margin:0 auto 8px;color:var(--sky);display:block}
.drop b{display:block;font-size:15px;color:#fff}
.drop span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.drop input[type=file]{display:none}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{position:relative;width:80px;height:80px;border-radius:14px;overflow:hidden;border:1px solid var(--edge-strong);background:#0A1030}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border:none;border-radius:8px;
  background:rgba(7,11,26,.8);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
}

/* ---------- repeatable links ---------- */
.links .link-row{display:flex;gap:8px;margin-bottom:8px}
.links .link-row .in{flex:1}
.links .link-row button{
  flex:0 0 auto;width:48px;border:1.5px solid var(--field-line);background:var(--field);
  border-radius:var(--radius-field);color:var(--muted);font-size:20px;cursor:pointer;
}
.links .add{
  background:none;border:none;color:var(--sky);font-weight:600;font-size:14.5px;
  cursor:pointer;padding:6px 2px;display:inline-flex;align-items:center;gap:6px;
}
.links .add svg{width:16px;height:16px}

/* ---------- run button ---------- */
.run-btn,.go{
  width:100%;border:none;border-radius:var(--radius-btn);cursor:pointer;
  background:linear-gradient(180deg,#4A70FF 0%,#2E5BFF 55%,#2449E0 100%);color:#fff;
  font-weight:700;font-size:17px;padding:17px;min-height:56px;letter-spacing:-.005em;font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 34px -12px rgba(46,91,255,.85);
  transition:transform .12s,filter .15s,box-shadow .15s;
}
.run-btn:hover,.go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.run-btn:active,.go:active{transform:translateY(1px)}
.run-btn:disabled,.go:disabled{opacity:.7;cursor:default;transform:none;filter:none}
.run-btn .spin,.go .spin{
  display:inline-block;width:17px;height:17px;margin-right:10px;vertical-align:-3px;
  border:2.4px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- messages ---------- */
.note{margin-top:14px;border-radius:14px;padding:13px 15px;font-size:14.5px;font-weight:500;line-height:1.45}
.note.err{background:rgba(255,107,107,.1);color:#FFB3B3;border:1px solid rgba(255,107,107,.35)}
.note.err .why{display:block;font-weight:400;color:#E59A9A;font-size:12.5px;margin-top:5px;word-break:break-word}

/* ============================================================
   RESULTS
   ============================================================ */
.result{margin-top:22px;animation:rise .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.result .res-card{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--radius-card);
  box-shadow:var(--lift);padding:clamp(20px,4vw,28px);
}
.result .res-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cobalt),var(--sky),transparent);
}
.res-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;
  color:var(--sky);margin-bottom:16px}
.res-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}

/* working state, shown while an employee runs */
.working{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.working .badge{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--tile-a),var(--tile-b));border:1px solid var(--edge-strong);
  animation:pulse 1.6s ease-in-out infinite;
}
.working .badge svg{width:38px;height:38px}
.working b{display:block;font-size:18px;font-weight:700}
.working span{display:block;color:var(--muted);font-size:14px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(46,91,255,.55)}50%{box-shadow:0 0 0 12px rgba(46,91,255,0)}}
.shimmer{height:14px;border-radius:7px;margin-top:12px;
  background:linear-gradient(90deg,#141E4F 0%,#22317A 50%,#141E4F 100%);background-size:200% 100%;
  animation:shimmer 1.3s linear infinite}
.shimmer.w80{width:80%}.shimmer.w60{width:60%}.shimmer.w90{width:90%}
@keyframes shimmer{to{background-position:-200% 0}}

/* verdict pill */
.verdict{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15.5px;
  padding:10px 15px;border-radius:13px;margin-bottom:8px;border:1px solid transparent}
.verdict.good{background:rgba(61,220,151,.12);color:#7FF0C0;border-color:rgba(61,220,151,.35)}
.verdict.warn{background:rgba(255,181,71,.12);color:#FFCB80;border-color:rgba(255,181,71,.35)}
.verdict.bad{background:rgba(255,107,107,.12);color:#FFA3A3;border-color:rgba(255,107,107,.35)}
.verdict.brand{background:rgba(46,91,255,.16);color:#C9D4FF;border-color:rgba(91,123,255,.45)}
.verdict .v-ico{width:18px;height:18px;flex:0 0 auto}

/* rich markdown body */
.rich{font-size:16px;color:var(--ink-soft);line-height:1.65}
.rich h2{font-weight:800;font-size:20px;color:#fff;letter-spacing:-.02em;margin:24px 0 9px}
.rich h2:first-child{margin-top:4px}
.rich h3{font-weight:700;font-size:16px;color:#fff;margin:16px 0 6px}
.rich p{margin:0 0 11px}
.rich strong{color:#fff;font-weight:700}
.rich ul{margin:0 0 12px;padding-left:2px;list-style:none}
.rich li{position:relative;padding-left:24px;margin-bottom:8px}
.rich li::before{content:"";position:absolute;left:4px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--sky)}
.rich .qa{background:var(--field);border:1px solid var(--field-line);border-radius:14px;padding:14px 16px;margin:0 0 10px}

/* stat grid (profit / landed) */
.bigstat{text-align:center;padding:8px 0 18px;border-bottom:1px solid var(--edge);margin-bottom:16px}
.bigstat .lbl{font-size:14px;font-weight:600;color:var(--muted)}
.bigstat .val{font-weight:800;font-size:clamp(46px,12vw,66px);line-height:1;letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.bigstat .val.pos{color:var(--mint);text-shadow:0 0 30px rgba(61,220,151,.35)}
.bigstat .val.neg{color:var(--coral)}
.bigstat .sub{color:var(--muted);font-size:14px;margin-top:8px}
.breakdown{display:flex;flex-direction:column;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:14px;overflow:hidden}
.breakdown .row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0B1238;padding:13px 16px;font-size:15px}
.breakdown .row .k{color:var(--ink-soft)}
.breakdown .row .v{font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.breakdown .row.minus .v{color:#FFA3A3}
.breakdown .row.total{background:#101A4A}
.breakdown .row.total .k,.breakdown .row.total .v{font-weight:800;font-size:16px;color:#fff}
.metric-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.metric{background:#0B1238;border:1px solid var(--edge);border-radius:14px;padding:14px 16px}
.metric .k{font-size:13.5px;font-weight:600;color:var(--muted)}
.metric .v{font-weight:800;font-size:28px;letter-spacing:-.03em;margin-top:3px;font-variant-numeric:tabular-nums}

/* comp price gauge */
.gauge{margin:6px 0 4px}
.gauge .track{position:relative;height:12px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,107,107,.7),rgba(255,181,71,.7) 45%,rgba(61,220,151,.8));margin:34px 0 10px}
.gauge .pin{position:absolute;top:-10px;transform:translateX(-50%);text-align:center}
.gauge .pin .dot{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--cobalt);
  box-shadow:0 0 0 6px rgba(46,91,255,.25);margin:0 auto}
.gauge .pin .tag{font-weight:700;font-size:14px;margin-top:8px;white-space:nowrap;color:#fff;background:none;border:none;padding:0}
.gauge .ends{display:flex;justify-content:space-between;color:var(--muted);font-size:13.5px;font-weight:600;margin-top:24px}
.list-callout{
  background:linear-gradient(135deg,#3D68FF,#1F45C9);color:#fff;border-radius:18px;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 4px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--glow);
}
.list-callout .k{font-size:14px;font-weight:600;opacity:.9}
.list-callout .v{font-weight:800;font-size:36px;line-height:1;letter-spacing:-.03em;margin-top:2px}
.list-callout .meta{text-align:right;font-size:13.5px;opacity:.92;font-weight:600}

/* option cards (offer reply) + copyable fields */
.opt-card,.copy-field{background:#0B1238;border:1px solid var(--edge);border-radius:16px;padding:16px 17px;margin-bottom:12px}
.opt-card .head,.copy-field .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.opt-card .label,.copy-field .label{font-weight:700;font-size:14.5px;color:var(--sky)}
.opt-card .body,.copy-field .body{font-size:15.5px;color:var(--ink-soft);line-height:1.6;white-space:pre-wrap}
.copy-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge-strong);
  background:rgba(13,21,64,.9);color:var(--ink-soft);font-weight:600;font-size:13px;min-height:34px;
  padding:6px 12px;border-radius:10px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;font-family:inherit}
.copy-btn:hover{border-color:var(--sky);color:#fff}
.copy-btn.done{background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.45);color:#7FF0C0}
.copy-btn svg{width:14px;height:14px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.tag{background:rgba(46,91,255,.14);border:1px solid rgba(91,123,255,.35);border-radius:999px;padding:5px 11px;
  font-size:13px;font-weight:600;color:#C9D4FF}

/* ============================================================
   STORY STUDIO (Listing to Post flagship)
   ============================================================ */
.script-block{margin-bottom:8px}
.script-line{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--edge)}
.script-line:last-child{border-bottom:none}
.script-line .beat{flex:0 0 96px;font-family:var(--mono);font-size:12.5px;color:var(--sky);padding-top:3px}
.script-line .say{font-size:16px;color:#fff;line-height:1.5}

.studio{margin-top:8px}
.studio-grid{display:grid;grid-template-columns:252px 1fr;gap:24px;align-items:start}
@media(max-width:620px){.studio-grid{grid-template-columns:1fr;justify-items:center}}
.story-canvas-wrap{width:252px;border-radius:22px;overflow:hidden;background:#05081A;aspect-ratio:9/16;
  border:1px solid var(--edge-strong);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),var(--glow)}
.story-canvas-wrap canvas{width:100%;height:100%;display:block}
.studio-controls{width:100%}
.studio-controls .sc-field{margin-bottom:14px}
.studio-controls label{display:block;font-weight:600;font-size:14px;margin-bottom:7px;color:#fff}
.studio-controls .swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:11px;cursor:pointer;border:2px solid rgba(255,255,255,.2)}
.swatch.sel{border-color:#fff;box-shadow:0 0 0 3px rgba(46,91,255,.6)}
.dl-btn{width:100%;border:1px solid var(--edge-strong);border-radius:var(--radius-btn);background:#fff;color:#070B1A;
  font-weight:700;font-size:16px;padding:15px;min-height:52px;cursor:pointer;margin-top:6px;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform .12s,filter .15s}
.dl-btn:hover{transform:translateY(-1px)}
.dl-btn svg{width:18px;height:18px}
.studio-note{color:var(--muted);font-size:13px;margin-top:12px;line-height:1.5}

/* tiny utility */
.divider{height:1px;background:var(--edge);margin:22px 0}
.sub-h{font-weight:800;font-size:19px;letter-spacing:-.02em;margin:0 0 12px;color:#fff}
.regen{background:none;border:none;color:var(--sky);font-weight:600;font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:8px 2px;min-height:40px;font-family:inherit}
.regen:hover{color:#fff}
.regen svg{width:16px;height:16px}

/* ============================================================
   HUB
   ============================================================ */
.wrap.hub{max-width:1080px}
.hub-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 0 8px}
.hub-hero h1{font-weight:800;font-size:clamp(40px,7vw,68px);line-height:.94;letter-spacing:-.045em;margin:0}
.hub-hero p{color:var(--muted);font-size:18px;max-width:44ch;margin:14px 0 0;line-height:1.5}
.shift{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;
  background:var(--surface);border:1px solid var(--edge);box-shadow:var(--lift)}
.shift .faces{display:flex}
.shift .faces span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;margin-left:-8px;
  background:linear-gradient(150deg,var(--tile-a),var(--tile-b));border:1px solid var(--edge-strong)}
.shift .faces span:first-child{margin-left:0}
.shift .faces svg{width:24px;height:24px}
.shift b{display:block;font-size:15.5px}
.shift small{display:block;color:var(--muted);font-size:13px;font-family:var(--mono)}

.cat{margin-top:44px}
.cat-label{display:flex;align-items:baseline;gap:14px;margin:0 0 16px}
.cat-label h2{font-weight:800;font-size:24px;letter-spacing:-.03em;margin:0;color:#fff}
.cat-label span{color:var(--muted);font-size:15px}
.cat-label .ln{flex:1;height:1px;background:var(--edge);align-self:center}
/* six-column grid: two wide cards then three, so five employees fill two full rows */
.hub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.hub-grid > .hub-card{grid-column:span 2}
.hub-grid > .hub-card:nth-child(-n+2){grid-column:span 3}
.hub-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--edge);border-radius:22px;padding:20px;
  text-decoration:none;color:inherit;box-shadow:var(--lift);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,border-color .18s;
}
.hub-card:hover{transform:translateY(-3px);border-color:#4460D8;box-shadow:var(--lift),var(--glow)}
.hub-card .ic{
  width:60px;height:60px;border-radius:18px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,var(--tile-a),var(--tile-b));border:1px solid var(--edge-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -10px rgba(46,91,255,.6);
}
.hub-card .ic svg{width:40px;height:40px}
.hub-card .txt{min-width:0}
.hub-card .job{display:block;font-family:var(--mono);font-size:12.5px;color:var(--sky);margin-bottom:3px}
.hub-card h3{font-size:19px;font-weight:700;margin:0 0 5px;letter-spacing:-.02em;color:#fff}
.hub-card p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}
.hub-card .go-to{position:absolute;right:18px;top:20px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--sky);border:1px solid var(--edge);transition:background .18s,color .18s,border-color .18s}
.hub-card:hover .go-to{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.hub-card .go-to svg{width:16px;height:16px}
.hub-card.flag{flex-direction:row;align-items:center;gap:20px;border-color:rgba(61,220,151,.5);
  background:radial-gradient(500px 220px at 0% 0%,rgba(61,220,151,.12),transparent 70%),var(--surface)}
.hub-card.flag .ic{width:84px;height:84px;border-radius:24px;border-color:rgba(61,220,151,.6)}
.hub-card.flag .ic svg{width:56px;height:56px}

.flag-badge{display:inline-block;font-family:var(--mono);font-size:12px;color:#7FF0C0;background:rgba(61,220,151,.12);
  border:1px solid rgba(61,220,151,.4);padding:3px 9px;border-radius:999px;margin-bottom:8px}
.hub-card.soon{border-style:dashed;border-color:var(--edge-strong);background:rgba(10,16,51,.6);box-shadow:none;cursor:default}
.hub-card.soon:hover{transform:none;box-shadow:none;border-color:var(--edge-strong)}
.hub-card.soon .ic{opacity:.75}
.soon-badge{display:inline-block;font-family:var(--mono);font-size:12px;color:var(--sky);background:rgba(46,91,255,.14);
  border:1px solid rgba(91,123,255,.35);padding:3px 9px;border-radius:999px;margin-bottom:8px}
.hub-card.locked{opacity:.45;filter:grayscale(.8)}
.hub-grid > .hub-card.flag{grid-column:span 4}
.hub-grid > .hub-card.soon{grid-column:span 2}
@media(max-width:920px){
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-grid > .hub-card,.hub-grid > .hub-card:nth-child(-n+2){grid-column:span 1}
  .hub-grid > .hub-card:last-child:nth-child(odd),.hub-grid > .hub-card.flag,.hub-grid > .hub-card.soon{grid-column:span 2}
}
@media(max-width:560px){
  .hub-grid{grid-template-columns:1fr}
  .hub-grid > .hub-card,.hub-grid > .hub-card:nth-child(-n+2),.hub-grid > .hub-card:last-child:nth-child(odd),
  .hub-grid > .hub-card.flag,.hub-grid > .hub-card.soon{grid-column:auto}
  .hub-card,.hub-card.flag{flex-direction:row;align-items:flex-start;gap:14px;padding:16px 16px 16px 14px}
  .hub-card .ic,.hub-card.flag .ic{width:52px;height:52px;border-radius:16px}
  .hub-card .ic svg,.hub-card.flag .ic svg{width:36px;height:36px}
  .hub-card .txt{padding-right:30px}
  .hub-card .go-to{right:12px;top:14px;width:30px;height:30px}
  .hub-card h3{font-size:17.5px}
}
.hub-foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--edge);display:flex;flex-wrap:wrap;gap:10px 22px;
  justify-content:space-between;color:var(--faint);font-size:13.5px}
.hub-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.hub-foot a{color:var(--muted);text-decoration:none}
.hub-foot a:hover{color:#fff}

/* ============================================================
   ACCOUNT PAGES (log in, create account, reset, activate)
   ============================================================ */
.auth{min-height:100vh;display:flex;flex-direction:column}
.auth-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:clamp(28px,7vh,72px) 18px 60px}
.auth-card{
  position:relative;width:100%;max-width:440px;
  background:var(--surface);border:1px solid var(--edge);border-radius:28px;
  box-shadow:var(--lift),0 40px 90px -40px rgba(46,91,255,.55);
  padding:clamp(26px,5vw,38px) clamp(22px,5vw,36px) 30px;
}
.auth-mark{display:grid;place-items:center;margin:-2px auto 16px;width:74px;height:74px;border-radius:22px;
  background:linear-gradient(150deg,var(--tile-a),var(--tile-b));border:1px solid var(--edge-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 34px -12px rgba(46,91,255,.7)}
.auth-mark svg{animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(2deg)}}
.auth-card h1{font-weight:800;font-size:clamp(28px,6vw,34px);letter-spacing:-.04em;line-height:1.02;text-align:center;margin:0}
.auth-card .lead{text-align:center;color:var(--muted);font-size:16px;margin:10px 0 26px}
.auth-card .field{margin-bottom:16px}
.auth-card .field label{display:block;font-weight:600;font-size:14.5px;margin-bottom:7px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-soft);margin-bottom:13px;cursor:pointer}
.check input{margin-top:2px;accent-color:var(--cobalt);width:18px;height:18px;flex-shrink:0}
.check a{color:var(--sky);text-decoration:underline;text-underline-offset:2px}
.auth-card .go{margin-top:8px}
.secondary{width:100%;background:transparent;color:#fff;border:1.5px solid var(--edge-strong);font-weight:700;font-size:15.5px;
  padding:14px;min-height:52px;border-radius:var(--radius-btn);margin-top:12px;cursor:pointer;font-family:inherit;transition:border-color .15s}
.secondary:hover{border-color:var(--sky)}
.swap{text-align:center;font-size:15px;color:var(--muted);margin:22px 0 0}
.swap a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid var(--sky)}
.mini{text-align:center;font-size:14px;margin:14px 0 0}
.mini a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.mini a:hover{color:#fff}
.auth-note,.auth-err{display:none;margin-top:16px;border-radius:14px;padding:13px 15px;font-size:14.5px;font-weight:500;line-height:1.45}
.auth-note{background:rgba(46,91,255,.14);border:1px solid rgba(91,123,255,.45);color:#D6DEFF}
.auth-err{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.4);color:#FFB3B3}
.auth-ok{background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.45);color:#9FF3CE}
.paid-banner{display:flex;gap:12px;align-items:flex-start;margin:0 0 20px;padding:13px 15px;border-radius:14px;
  background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.4);color:#BDF7DC;font-size:14.5px;line-height:1.45}
.paid-banner svg{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--mint)}
.auth-foot{text-align:center;font-size:13px;color:var(--faint);padding:0 18px 28px}
.auth-foot a{color:var(--muted)}

/* toast for messages carried between pages */
.ll-toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;
  max-width:min(92vw,460px);padding:13px 18px;border-radius:14px;font-size:15px;font-weight:600;color:#fff;
  background:rgba(13,21,64,.96);border:1px solid var(--edge-strong);box-shadow:0 20px 50px -10px rgba(0,0,0,.7);
  animation:rise .35s ease both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* hub while the plan is being confirmed */
.checking .hub-card:not(.soon){opacity:.55;pointer-events:none}
.manage-link{font-size:13.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:7px 4px}
.manage-link:hover{color:#fff}
.auth-foot a{margin-left:12px;text-underline-offset:3px}