:root{
  --bg:#07111f;--panel:rgba(13,27,48,.88);--text:#f7fbff;--muted:#9fb0c8;
  --cyan:#18bfff;--green:#2df59c;--orange:#ff922e;--red:#ff4966;--line:rgba(255,255,255,.13);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 18% 0%,rgba(24,191,255,.26),transparent 30%),radial-gradient(circle at 90% 12%,rgba(255,146,46,.16),transparent 24%),linear-gradient(145deg,#050b15,#07111f 50%,#0b1c33)}
.hidden{display:none!important}
.splash{min-height:100vh;display:grid;place-items:center;padding:26px;background:radial-gradient(circle at 50% 25%,rgba(24,191,255,.18),transparent 28%),linear-gradient(145deg,#04101d,#07111f 55%,#0b1c33)}
.splash-card{position:relative;width:min(480px,100%);min-height:640px;display:grid;place-items:center;text-align:center;overflow:hidden;border-radius:38px;border:1px solid var(--line);background:rgba(5,14,27,.72);box-shadow:0 40px 120px rgba(0,0,0,.45)}
.splash-card:not(.splash-card--v20) .splash-logo{width:min(360px,86%);border-radius:28px;box-shadow:0 24px 90px rgba(0,0,0,.38);transition:transform .45s ease, opacity .45s ease}
.enter-btn{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);border:0;border-radius:999px;padding:15px 24px;background:linear-gradient(90deg,var(--cyan),var(--green));color:#031221;font-weight:1000;font-size:17px}
.moped{position:absolute;left:50%;top:37%;transform:translate(-50%,-50%) scale(0);font-size:66px;z-index:5}.trail{position:absolute;left:30%;top:37%;width:0;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(24,191,255,0),rgba(24,191,255,.75),rgba(255,146,46,.7));opacity:0}
.splash.launching .splash-logo{transform:scale(.8);opacity:.12}.splash.launching .moped{animation:mopedRun 1.05s cubic-bezier(.2,.85,.2,1) forwards}.splash.launching .trail{animation:trailRun 1.05s ease forwards}.splash.fadeout{animation:splashFade .45s ease forwards}
@keyframes mopedRun{0%{transform:translate(-50%,-50%) scale(0) rotate(-10deg);left:50%}18%{transform:translate(-50%,-50%) scale(1.05) rotate(-4deg);left:50%}100%{transform:translate(0,-50%) scale(1.1) rotate(8deg);left:128%}}
@keyframes trailRun{0%{width:0;opacity:0}18%{width:100px;opacity:1}100%{width:360px;opacity:0;left:70%}}@keyframes splashFade{to{opacity:0;transform:scale(1.03)}}
.shell{width:min(1120px,calc(100% - 20px));margin:auto;padding:18px 0 72px}
.topbar,.brand,.two,.preview-grid,.history-head,.summary-grid{display:grid;gap:14px}
.topbar{grid-template-columns:1fr auto;align-items:center}.brand{grid-template-columns:auto 1fr;align-items:center}
.mark{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;font-size:32px;font-weight:1000;color:#031221;background:linear-gradient(135deg,var(--cyan),var(--orange))}
.logo{font-size:36px;font-weight:1000;letter-spacing:-2px;line-height:.85}.logo span{color:var(--cyan)}
.brand p,.hero p,.status,.headline,.mini-title{color:var(--muted);margin:5px 0 0}.brand b{color:var(--orange)}
.ghost{border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--text);border-radius:14px;padding:11px 14px;font-weight:900}
.hero{padding:18px 0 10px}.compact h1{font-size:clamp(38px,8vw,70px)}
.badge,.eyebrow{display:inline-flex;width:fit-content;color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;margin:0}
.badge{padding:8px 11px;border-radius:999px;border:1px solid rgba(24,191,255,.28);background:rgba(24,191,255,.1)}
h1{font-size:clamp(42px,8vw,82px);line-height:.88;margin:12px 0 10px;letter-spacing:-5px}h2{font-size:27px;margin:4px 0 0;letter-spacing:-1px}h3{margin:0 0 8px}
.tabs{position:sticky;top:8px;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px;padding:6px;border:1px solid var(--line);border-radius:20px;background:rgba(5,11,21,.72);backdrop-filter:blur(18px)}
.tab,.filter{border:0;border-radius:15px;padding:12px 8px;background:transparent;color:var(--muted);font-weight:1000}.tab.active,.filter.active{background:linear-gradient(90deg,var(--cyan),var(--green));color:#031221}
.screen{display:none}.active-screen{display:grid;gap:14px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032)),var(--panel);border:1px solid var(--line);border-radius:28px;padding:20px;box-shadow:0 28px 80px rgba(0,0,0,.31);backdrop-filter:blur(14px)}
.scan-cta{text-align:center}.big-upload{display:grid!important;place-items:center;width:100%;min-height:78px;border-radius:24px;background:linear-gradient(90deg,var(--cyan),var(--green));color:#031221;font-size:22px;font-weight:1000;margin-bottom:10px}
#imageInput{display:none}.two{grid-template-columns:1fr 1fr}
label{display:grid;gap:8px;margin-bottom:14px;color:var(--muted);font-weight:900;font-size:13px}
input,select{width:100%;border:1px solid var(--line);border-radius:18px;background:#081425;color:var(--text);padding:14px;font:inherit;font-weight:850}
.primary{width:100%;border:0;border-radius:20px;padding:16px 18px;margin-top:5px;font:inherit;font-weight:1000;font-size:15px;color:#031221;background:linear-gradient(90deg,var(--cyan),var(--green))}
.preview-grid{grid-template-columns:1fr 1fr;margin:14px 0}.preview,.preview-grid canvas{width:100%;min-height:160px;max-height:280px;object-fit:contain;background:#050b15;border:1px solid var(--line);border-radius:18px;display:block}.preview{display:none}
.verdict{min-height:84px;display:grid;place-items:center;text-align:center;border-radius:26px;font-size:clamp(32px,8vw,58px);font-weight:1000;letter-spacing:-1px;background:rgba(255,255,255,.055);border:1px solid var(--line);margin-bottom:16px}
.accept{color:var(--green);text-shadow:0 0 28px rgba(45,245,156,.28)}.warning{color:var(--orange);text-shadow:0 0 28px rgba(255,146,46,.28)}.decline{color:var(--red);text-shadow:0 0 28px rgba(255,73,102,.28)}.neutral{color:var(--muted)}
.score-wrap{text-align:center;display:grid;justify-items:center;gap:10px}.score-ring{--score:50;width:168px;height:168px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#07111f 0 57%,transparent 58%),conic-gradient(var(--orange) calc(var(--score)*1%),rgba(255,255,255,.1) 0)}
.score-ring span{font-size:54px;font-weight:1000;line-height:.8}.score-ring small{position:absolute;bottom:43px;color:var(--muted);font-size:11px;font-weight:1000;text-transform:uppercase}
.metrics,.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.metrics div,.summary-grid div{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:18px;padding:13px}.metrics span,.summary-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.metrics strong,.summary-grid strong{font-size:18px}
.notes{background:rgba(0,0,0,.18);border-radius:22px;padding:16px}.notes ul{padding-left:18px;margin:0;color:var(--muted);line-height:1.55}
.history-head{grid-template-columns:1fr auto;align-items:center}.filter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}.history{display:grid;gap:10px}.history-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05)}.pill{padding:8px 10px;border-radius:999px;font-size:11px;font-weight:1000}.pill.ACCEPT{background:rgba(45,245,156,.12);color:var(--green)}.pill.DECLINE{background:rgba(255,73,102,.12);color:var(--red)}.pill.TRAP{background:rgba(255,146,46,.12);color:var(--orange)}
pre{white-space:pre-wrap;color:var(--muted);font-size:14px;line-height:1.45}
@media(max-width:760px){.two,.preview-grid{grid-template-columns:1fr}h1{letter-spacing:-3px}.metrics,.summary-grid{grid-template-columns:1fr 1fr}.tabs,.filter-row{font-size:12px}.splash-card{min-height:560px}}


/* V6 Dashboard + iPhone safe-area polish */
.shell{padding-top:calc(18px + env(safe-area-inset-top))!important;padding-bottom:calc(76px + env(safe-area-inset-bottom))!important}
.splash{padding-top:calc(26px + env(safe-area-inset-top))!important;padding-bottom:calc(26px + env(safe-area-inset-bottom))!important}
.tabs{grid-template-columns:repeat(5,1fr)!important;top:calc(8px + env(safe-area-inset-top))!important}
.stat-block,.insight-grid{display:grid;gap:10px}
.stat-block{grid-template-columns:repeat(4,1fr);margin-bottom:14px}
.insight-grid{grid-template-columns:repeat(4,1fr);margin:16px 0 4px}
.stat-card,.insight-grid div{
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  background:rgba(255,255,255,.055);
}
.stat-card span,.insight-grid span{
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:5px;
}
.stat-card strong,.insight-grid strong{font-size:22px}
.stat-card.blue{box-shadow:inset 0 0 28px rgba(24,191,255,.09)}
.stat-card.red{box-shadow:inset 0 0 28px rgba(255,73,102,.09)}
.stat-card.green{box-shadow:inset 0 0 28px rgba(45,245,156,.09)}
.stat-card.orange{box-shadow:inset 0 0 28px rgba(255,146,46,.09)}
.store-insights{display:grid;gap:10px;margin-top:14px}
.store-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.05);
}
@media(max-width:760px){
  .stat-block,.insight-grid{grid-template-columns:1fr 1fr}
  .tabs{font-size:10px}
}


/* V8 Goal Tracker */
.tabs{grid-template-columns:repeat(6,1fr)!important}
.accept-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.primary.soft{background:linear-gradient(90deg,var(--green),var(--cyan))}
.ghost.wide{width:100%}
.progress-bar{
  width:100%;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  margin:12px 0 0;
}
.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--green));
}
@media(max-width:760px){
  .tabs{font-size:9px}
  .accept-row{grid-template-columns:1fr}
}


/* V9 merchant brain + header image branding */
.header-logo-img{
  width:52px;
  height:52px;
  border-radius:17px;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.32);
}
.tabs{grid-template-columns:repeat(7,1fr)!important}
@media(max-width:760px){.tabs{font-size:8.5px}}


/* V10 Brand Polish */
.splash-tagline{
  position:absolute;
  top:calc(50% + 160px);
  left:50%;
  transform:translateX(-50%);
  margin:0;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.02em;
  font-size:16px;
  width:90%;
}
.brand-clean{
  display:flex!important;
  align-items:center;
}
.header-logo-img{
  width:68px;
  height:68px;
  border-radius:20px;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}
.topbar{
  align-items:center;
  padding-top:2px;
}
.card{
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.card:active{
  transform:scale(.995);
}
.primary,.big-upload,.tab.active{
  box-shadow:0 14px 38px rgba(24,191,255,.18);
}
.verdict{
  letter-spacing:-.035em;
}
@media(max-width:760px){
  .header-logo-img{width:58px;height:58px;border-radius:18px}
  .splash-tagline{top:calc(50% + 135px);font-size:14px}
}

/* ============================================================
   V11 Premium Polish (UI-only, no logic changes)
   - tighter spacing rhythm
   - sharper typography hierarchy
   - unified button system
   - cleaner glass cards + deeper dark theme
   - polished sticky tab bar
   - smoother mobile layout
   ============================================================ */

:root{
  --bg-0:#050c17;
  --bg-1:#070f1d;
  --bg-2:#0a1628;
  --surface-1:rgba(255,255,255,.04);
  --surface-2:rgba(255,255,255,.07);
  --line-soft:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.55);
  --shadow-md:0 12px 30px -14px rgba(0,0,0,.5);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
}

body{
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(24,191,255,.18), transparent 60%),
    radial-gradient(900px 500px at 95% 8%, rgba(255,146,46,.10), transparent 55%),
    radial-gradient(800px 700px at 50% 110%, rgba(45,245,156,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}

/* ---------- Layout rhythm ---------- */
.shell{
  width:min(1120px, calc(100% - 16px));
  gap:16px;
}
.active-screen{gap:16px}

/* ---------- Typography hierarchy ---------- */
h1{
  font-weight:900;
  letter-spacing:-.04em;
  background:linear-gradient(180deg,#ffffff 0%, #cfe5ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.compact h1{font-size:clamp(34px, 8vw, 56px); line-height:.92}
h2{font-weight:850; letter-spacing:-.02em; font-size:22px}
h3{font-weight:800; letter-spacing:-.01em; font-size:15px; color:#e7eef9}
.hero p{font-size:14.5px; line-height:1.5; max-width:46ch}
.eyebrow,.badge{
  font-size:10.5px;
  letter-spacing:.16em;
  font-weight:900;
}
.badge{
  padding:7px 11px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(24,191,255,.16), rgba(45,245,156,.10));
  border:1px solid rgba(24,191,255,.32);
  color:#9be4ff;
}
.mini-title{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
  font-weight:800;
}

/* ---------- Brand block ---------- */
.brand{gap:12px}
.logo{font-size:30px; letter-spacing:-1.5px}
.brand p{font-size:12px; margin-top:3px; opacity:.85}
.header-logo-img{
  width:54px; height:54px; border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---------- Cards (glass) ---------- */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(10,20,36,.78);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.card + .card{margin-top:0}
.dashboard-hero{
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(24,191,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(10,20,36,.82);
  border:1px solid rgba(24,191,255,.18);
}

/* ---------- Tab bar ---------- */
.tabs{
  padding:5px;
  border-radius:18px;
  border:1px solid var(--line-soft);
  background:rgba(5,12,23,.78);
  box-shadow:var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.02);
  gap:4px;
  margin:6px 0 12px;
}
.tab{
  border-radius:13px;
  padding:10px 6px;
  font-size:11.5px;
  letter-spacing:.02em;
  font-weight:800;
  color:#8ea1bd;
  transition:color .18s ease, background .18s ease, transform .15s ease;
}
.tab:hover{color:#fff}
.tab.active{
  background:linear-gradient(135deg, var(--cyan), var(--green));
  color:#021321;
  box-shadow:0 8px 22px -8px rgba(24,191,255,.55);
}

/* ---------- Buttons (unified) ---------- */
.primary,.big-upload{
  border:0;
  border-radius:16px;
  padding:15px 18px;
  font-weight:900;
  font-size:15px;
  letter-spacing:.01em;
  color:#021321;
  background:linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow:0 14px 30px -12px rgba(24,191,255,.55);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.primary:hover,.big-upload:hover{filter:brightness(1.05)}
.primary:active,.big-upload:active{transform:translateY(1px) scale(.995)}
.primary.soft{background:linear-gradient(135deg, var(--green), var(--cyan))}
.big-upload{
  min-height:64px;
  font-size:17px;
  border-radius:18px;
}
.ghost{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.04);
  color:#dbe7f7;
  border-radius:14px;
  padding:11px 14px;
  font-weight:800;
  font-size:13px;
  transition:background .18s ease, border-color .18s ease;
}
.ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22)}
.enter-btn{
  bottom:36px;
  padding:14px 26px;
  border-radius:999px;
  font-size:15px;
  letter-spacing:.04em;
  box-shadow:0 18px 40px -12px rgba(24,191,255,.6);
}

/* ---------- Inputs ---------- */
input,select{
  background:#06121f;
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:13px 14px;
  font-weight:700;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus,select:focus{
  outline:none;
  border-color:rgba(24,191,255,.55);
  box-shadow:0 0 0 4px rgba(24,191,255,.12);
}
label{
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9aacc4;
  font-weight:800;
  gap:6px;
  margin-bottom:12px;
}

/* ---------- Verdict + score ---------- */
.verdict{
  border-radius:20px;
  font-size:clamp(28px, 7.5vw, 48px);
  letter-spacing:-.04em;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-soft);
  margin-bottom:18px;
  min-height:78px;
}
.score-ring{
  width:148px; height:148px;
  background:
    radial-gradient(circle, #07111f 0 56%, transparent 57%),
    conic-gradient(var(--orange) calc(var(--score)*1%), rgba(255,255,255,.08) 0);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
}
.score-ring span{font-size:48px}
.score-ring small{bottom:38px; font-size:10px; letter-spacing:.12em}

/* ---------- Stat / insight cards ---------- */
.stat-card,.insight-grid div,.summary-grid div,.metrics div{
  border-radius:16px;
  border:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding:13px 14px;
}
.stat-card span,.insight-grid span,.summary-grid span,.metrics span{
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8da0ba;
  font-weight:800;
  margin-bottom:6px;
}
.stat-card strong,.insight-grid strong{font-size:24px; letter-spacing:-.02em}
.metrics strong,.summary-grid strong{font-size:18px; letter-spacing:-.01em}
.stat-card.blue{box-shadow:inset 0 0 0 1px rgba(24,191,255,.16)}
.stat-card.red{box-shadow:inset 0 0 0 1px rgba(255,73,102,.18)}
.stat-card.green{box-shadow:inset 0 0 0 1px rgba(45,245,156,.18)}
.stat-card.orange{box-shadow:inset 0 0 0 1px rgba(255,146,46,.18)}

/* ---------- History items / pills ---------- */
.history-item,.store-item{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line-soft);
  padding:13px 14px;
  transition:border-color .18s ease, transform .15s ease;
}
.history-item:hover,.store-item:hover{border-color:var(--line-strong)}
.pill{
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 10px;
}

/* ---------- Filter row ---------- */
.filter-row{
  padding:5px;
  border-radius:14px;
  border:1px solid var(--line-soft);
  background:rgba(5,12,23,.6);
  gap:4px;
}
.filter{
  border-radius:10px;
  padding:9px 6px;
  font-size:11.5px;
  font-weight:800;
  color:#8ea1bd;
}
.filter.active{box-shadow:0 6px 18px -8px rgba(24,191,255,.5)}

/* ---------- Notes block ---------- */
.notes{
  background:rgba(0,0,0,.22);
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:14px 16px;
}
.notes ul{font-size:13.5px; line-height:1.55}

/* ---------- Splash polish ---------- */
.splash-card{
  border-radius:32px;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(24,191,255,.18), transparent 55%),
    rgba(5,12,23,.78);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.7);
}
.splash-tagline{
  font-size:14px;
  letter-spacing:.02em;
  font-weight:700;
  color:#9fb3cf;
}

/* ---------- Mobile refinements ---------- */
@media(max-width:760px){
  .shell{width:calc(100% - 14px); gap:14px}
  .card{padding:16px; border-radius:20px}
  .compact h1{font-size:34px; letter-spacing:-1.5px}
  h2{font-size:19px}
  .tabs{
    grid-template-columns:repeat(7, minmax(0,1fr))!important;
    padding:4px;
    border-radius:16px;
    gap:2px;
  }
  .tab{font-size:10px; padding:9px 2px; border-radius:11px}
  .stat-block,.insight-grid{grid-template-columns:1fr 1fr; gap:8px}
  .stat-card strong,.insight-grid strong{font-size:20px}
  .big-upload{min-height:58px; font-size:16px}
  .verdict{min-height:70px}
  .score-ring{width:128px; height:128px}
  .score-ring span{font-size:40px}
  .preview-grid{gap:10px}
  .accept-row{grid-template-columns:1fr; gap:8px}
  .filter-row{grid-template-columns:repeat(4,1fr)}
  .header-logo-img{width:48px; height:48px; border-radius:14px}
  .logo{font-size:26px}
}

/* ============================================================
   V11.1 QA fixes
   - brand colors aligned to logo
   - tab overflow fix (Profile/Me)
   - hide debug in production
   - tighter hero spacing
   ============================================================ */

/* Brand: white "Gig" + cyan ".l" + white "y", matches logo */
.logo,
.logo *{
  background:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important;
}
.logo{
  color:#ffffff;
  font-weight:1000;
  letter-spacing:-1.5px;
  display:inline-flex;
  align-items:baseline;
  gap:0;
  line-height:.9;
}
.logo .logo-i{
  position:relative;
  display:inline-block;
  color:#ffffff;
}
.logo .logo-i::after{
  content:"";
  position:absolute;
  left:50%;
  top:.03em;
  width:.16em;
  height:.16em;
  transform:translateX(-50%);
  border-radius:999px;
  background:var(--cyan);
}
.logo .logo-dot,
.logo .logo-l{
  color:var(--cyan);
  font-style:normal;
  margin:0 1px;
}
.logo .logo-l{font-weight:inherit; margin:0}
.logo span{color:#ffffff}
.brand p{color:#9fb3cf}
.brand p b{color:var(--orange); font-weight:900; letter-spacing:.02em}

/* Hero: tighter rhythm + alignment */
.hero.compact{padding:6px 0 4px; display:grid; gap:10px}
.hero.compact .badge{margin:0}
.hero.compact h1{margin:2px 0 2px; line-height:.95}
.hero.compact > p{margin:0; color:#9fb3cf}
.topbar{padding:2px 0 0}

/* Tab bar: prevent Profile/Me from overflowing on narrow widths */
.tabs{
  grid-template-columns:repeat(7, minmax(0,1fr))!important;
  overflow:hidden;
}
.tab{
  min-width:0;
  padding-left:4px;
  padding-right:4px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}

/* Production: hide debug-only blocks (toggle with body.debug to show) */
.debug-only{display:none!important}
body.debug .debug-only{display:block!important}

@media(max-width:380px){
  .tab{font-size:9.5px; padding:8px 2px; letter-spacing:0}
  .compact h1{font-size:30px}
  .logo{font-size:24px}
  .header-logo-img{width:44px; height:44px; border-radius:13px}
}

/* ============================================================
   V12 Premium Product Pass
   - 8-column tab grid (Settings added)
   - onboarding overlay
   - toast feedback
   - settings list rows
   - empty states
   - micro-interactions (tap states, tab transitions)
   - tighter mobile rhythm
   ============================================================ */

/* Tab grid expands to 8 columns for new Settings tab */
.tabs{
  grid-template-columns:repeat(9, minmax(0,1fr))!important;
}
@media(max-width:760px){
  .tabs{grid-template-columns:repeat(9, minmax(0,1fr))!important; gap:2px; padding:4px}
  .tab{font-size:9.5px; padding:9px 2px; letter-spacing:0}
}
@media(max-width:380px){
  .tab{font-size:8px; padding:8px 1px}
}

/* Tab transitions */
.screen{opacity:0; transform:translateY(4px); transition:none}
.active-screen{
  opacity:1; transform:translateY(0);
  animation:screenIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes screenIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}

/* Button tap feedback */
button{ -webkit-tap-highlight-color:transparent }
.primary:active,.big-upload:active,.ghost:active,.tab:active,.filter:active,.settings-row:active{
  transform:scale(.97);
}
.primary,.ghost,.big-upload,.tab,.filter,.settings-row{
  transition:transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .2s ease, filter .2s ease;
}

/* Success pulse for save buttons */
.btn-success{
  background:linear-gradient(135deg, var(--green), #19d585)!important;
  color:#021321!important;
  animation:btnPulse .4s ease;
}
@keyframes btnPulse{
  0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(28px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  background:linear-gradient(135deg, rgba(10,20,36,.96), rgba(7,17,31,.96));
  color:#eaf3ff;
  padding:13px 18px;
  border:1px solid rgba(45,245,156,.35);
  border-radius:14px;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.01em;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  box-shadow:0 18px 50px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
  max-width:88vw;
  text-align:center;
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast.error{ border-color:rgba(255,73,102,.4) }
.toast .t-ico{ margin-right:8px }

/* ---------- Onboarding overlay ---------- */
.onboarding{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(24,191,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(5,12,23,.96), rgba(7,17,31,.98));
  backdrop-filter:blur(20px);
  animation:fadeIn .3s ease;
}
.onb-card{
  width:min(440px,100%);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(10,20,36,.86);
  border:1px solid var(--line-soft);
  border-radius:28px;
  padding:28px 24px 22px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7);
  display:grid; gap:18px;
}
.onb-progress{display:flex; gap:6px; justify-content:center; margin:0}
.onb-dot{
  width:24px; height:5px; border-radius:999px;
  background:rgba(255,255,255,.12);
  transition:background .25s ease, width .25s ease;
}
.onb-dot.active{ background:linear-gradient(90deg,var(--cyan),var(--green)); width:36px }
.onb-slides{ position:relative; min-height:240px }
.onb-slide{
  display:none;
  text-align:center;
  padding:8px 4px;
}
.onb-slide.active{
  display:grid; gap:12px;
  animation:slideIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.onb-icon{
  font-size:60px; line-height:1;
  margin:8px auto 4px;
  filter:drop-shadow(0 12px 24px rgba(24,191,255,.25));
}
.onb-slide h2{
  font-size:24px; font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 0%, #cfe5ff 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin:0;
}
.onb-slide p{
  color:#aebfd6; font-size:14.5px; line-height:1.55; max-width:36ch;
  margin:0 auto;
}
.onb-actions{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
}
.onb-actions .ghost{ padding:12px 16px }
.onb-actions .primary{ margin-top:0 }

/* ---------- Settings list ---------- */
.settings-list{ padding:8px }
.settings-row{
  width:100%;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  border-radius:14px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.settings-row:last-child{ border-bottom:0 }
.settings-row:hover{ background:rgba(255,255,255,.04) }
.s-ico{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(24,191,255,.15), rgba(45,245,156,.08));
  border:1px solid rgba(24,191,255,.18);
  font-size:18px;
}
.s-body{ display:grid; gap:2px; min-width:0 }
.s-body strong{ font-size:15px; font-weight:800; letter-spacing:-.01em; color:#f0f6ff }
.s-body small{ font-size:12px; color:#8da0ba; font-weight:600 }
.s-chev{ color:#5e7390; font-size:22px; font-weight:700; padding-right:4px }

/* ---------- Empty states ---------- */
.empty-state{
  text-align:center;
  padding:28px 18px;
  display:grid; gap:8px; justify-items:center;
  color:var(--muted);
}
.empty-state .e-ico{
  font-size:42px; line-height:1;
  filter:drop-shadow(0 8px 18px rgba(24,191,255,.18));
  margin-bottom:4px;
}
.empty-state h4{
  margin:0; color:#e7eef9; font-size:15.5px; font-weight:850; letter-spacing:-.01em;
}
.empty-state p{
  margin:0; font-size:13px; line-height:1.5; max-width:32ch; color:#8da0ba;
}

/* ---------- Demo banner ---------- */
.demo-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px;
  margin:0 0 12px;
  border-radius:14px;
  border:1px solid rgba(255,146,46,.32);
  background:linear-gradient(90deg, rgba(255,146,46,.12), rgba(255,73,102,.06));
  color:#ffd9b6;
  font-size:12.5px;
  font-weight:700;
}
.demo-banner b{ color:var(--orange) }
.demo-banner .ghost{ padding:7px 11px; font-size:11.5px }

/* ---------- Mobile tightening ---------- */
@media(max-width:760px){
  .onb-card{ padding:24px 20px 18px; border-radius:24px }
  .onb-slide h2{ font-size:21px }
  .onb-icon{ font-size:54px }
  .settings-row{ padding:12px 10px; grid-template-columns:38px 1fr auto; gap:10px }
}

/* ===========================================================
   V13 — Growth engine (Daily dashboard, streaks, achievements,
   return triggers, locked Pro cards). All additive.
   =========================================================== */

/* Welcome-back banner */
.welcome-back{
  position:relative;
  margin:0 0 14px;
  padding:14px 44px 14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(24,191,255,.16), rgba(45,245,156,.10));
  border:1px solid rgba(24,191,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 30px -18px rgba(24,191,255,.4);
}
.welcome-back .wb-eye{
  display:block; font-size:10px; font-weight:1000; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:4px;
}
.welcome-back .wb-title{ font-size:17px; font-weight:1000; letter-spacing:-.01em }
.welcome-back .wb-sub{ color:var(--muted); font-size:13px; margin-top:2px }
.welcome-back .wb-close{
  position:absolute; top:8px; right:10px; background:transparent;
  border:0; color:var(--muted); font-size:18px; line-height:1; padding:6px;
}

/* Today hero card */
.today-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(24,191,255,.10), rgba(45,245,156,.06)) , var(--panel);
  border:1px solid rgba(24,191,255,.20);
}
.today-hero .th-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px;
}
.today-hero .th-title{ font-size:20px; font-weight:1000; letter-spacing:-.02em }
.today-hero .th-date{ color:var(--muted); font-size:12px; margin-top:2px }
.streak-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:999px; font-weight:1000; font-size:13px;
  background:linear-gradient(90deg, var(--orange), #ff5b3a);
  color:#1a0a02; box-shadow:0 6px 22px -8px rgba(255,146,46,.55);
  white-space:nowrap;
}
.streak-chip.zero{
  background:rgba(255,255,255,.06); color:var(--muted);
  box-shadow:none;
}
.streak-chip .sc-flame{ font-size:14px }

.today-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:14px;
}
.today-cell{
  padding:12px 14px; border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
}
.today-cell .tc-label{
  display:block; color:var(--muted); font-size:10px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px;
}
.today-cell .tc-value{ font-size:22px; font-weight:1000; letter-spacing:-.02em }
.today-cell .tc-sub{ display:block; color:var(--muted); font-size:11px; margin-top:2px }
.today-cell.accent-green .tc-value{ color:var(--green) }
.today-cell.accent-cyan .tc-value{ color:var(--cyan) }
.today-cell.accent-orange .tc-value{ color:var(--orange) }
.today-cell.accent-red .tc-value{ color:var(--red) }

.goal-bar-wrap{ margin-top:4px }
.goal-bar-row{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:12px; color:var(--muted); margin-bottom:6px;
}
.goal-bar-row b{ color:var(--text); font-weight:1000 }
.goal-bar{
  position:relative; height:10px; border-radius:999px;
  background:rgba(255,255,255,.06); overflow:hidden;
}
.goal-bar > span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--green));
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}

/* Achievements */
.badge-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
}
.badge-tile{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:12px 8px; border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); position:relative; overflow:hidden;
}
.badge-tile .b-emoji{
  font-size:28px; line-height:1; margin-bottom:6px; filter:grayscale(1) opacity(.45);
}
.badge-tile .b-name{ font-size:11px; font-weight:1000; letter-spacing:.02em }
.badge-tile .b-prog{ font-size:10px; color:var(--muted); margin-top:2px }
.badge-tile.unlocked{
  background:linear-gradient(135deg, rgba(24,191,255,.14), rgba(45,245,156,.08));
  border-color:rgba(24,191,255,.35);
  box-shadow:0 8px 24px -16px rgba(24,191,255,.5);
}
.badge-tile.unlocked .b-emoji{ filter:none }
.badge-tile.unlocked .b-name{ color:var(--text) }
.badge-tile.unlocked .b-prog{ color:var(--cyan) }

/* Locked Pro cards */
.pro-card{
  position:relative; padding:16px;
  border:1px dashed rgba(255,255,255,.18); border-radius:18px;
  background:rgba(255,255,255,.025);
  display:flex; align-items:center; gap:12px;
  margin-bottom:10px;
}
.pro-card .p-ico{
  width:42px; height:42px; flex:0 0 42px;
  border-radius:12px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg, var(--cyan), var(--orange));
  color:#031221;
}
.pro-card .p-body{ flex:1; min-width:0 }
.pro-card .p-body strong{ display:block; font-size:14px; font-weight:1000 }
.pro-card .p-body small{ display:block; color:var(--muted); font-size:12px; margin-top:2px }
.pro-card .p-tag{
  align-self:flex-start; padding:4px 8px; border-radius:999px;
  font-size:10px; font-weight:1000; letter-spacing:.1em;
  background:linear-gradient(90deg, var(--orange), #ffd166); color:#1a0a02;
}

/* Modal */
.modal-back{
  position:fixed; inset:0; z-index:60;
  background:rgba(2,8,18,.78); backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.modal-back.show{ opacity:1; pointer-events:auto }
.modal-card{
  width:100%; max-width:380px;
  background:var(--panel); border:1px solid var(--line); border-radius:24px;
  padding:22px; transform:translateY(12px); transition:transform .25s ease;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.modal-back.show .modal-card{ transform:translateY(0) }
.modal-card .m-eye{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:10px; font-weight:1000; letter-spacing:.16em;
  background:linear-gradient(90deg, var(--orange), #ffd166); color:#1a0a02;
  margin-bottom:10px;
}
.modal-card h3{ font-size:20px; font-weight:1000; letter-spacing:-.02em; margin:0 0 6px }
.modal-card p.m-sub{ color:var(--muted); font-size:13px; margin:0 0 16px }
.modal-card label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }
.modal-card input[type=email]{
  width:100%; padding:14px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--text); font:inherit;
}
.modal-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px }

/* Share card overlay */
.share-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(2,8,18,.85); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.share-overlay.show{ display:flex }
.share-card-wrap{
  width:100%; max-width:340px;
  display:flex; flex-direction:column; gap:14px;
}
#shareCanvas{
  width:100%; height:auto; border-radius:24px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  background:#0a1628;
}

@media (max-width:380px){
  .today-grid{ grid-template-columns:1fr 1fr }
  .badge-grid{ grid-template-columns:repeat(3,1fr) }
}
  .s-ico{ width:38px; height:38px; border-radius:11px; font-size:16px }
  .s-body strong{ font-size:14.5px }
  .demo-banner{ font-size:11.5px; padding:10px 12px }
}

/* V13 — Smart Insights Feed */
.insights-card{ position:relative }
.insights-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px }
.ghost.small{ padding:8px 12px; font-size:14px; border-radius:12px; min-height:0 }
.insights-feed{ display:flex; flex-direction:column; gap:10px }
.insight{ display:grid; grid-template-columns:42px 1fr auto; gap:12px; align-items:flex-start; padding:14px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line); transition:transform .15s ease, background .15s ease }
.insight:hover{ background:rgba(255,255,255,.06) }
.insight .i-ico{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:rgba(24,191,255,.14); color:var(--cyan) }
.insight.win .i-ico{ background:rgba(45,245,156,.16); color:var(--green) }
.insight.warn .i-ico{ background:rgba(255,146,46,.16); color:var(--orange) }
.insight.alert .i-ico{ background:rgba(255,73,102,.16); color:var(--red) }
.insight .i-body{ min-width:0 }
.insight .i-title{ font-size:14.5px; font-weight:800; line-height:1.3; color:var(--text) }
.insight .i-sub{ margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.4 }
.insight .i-tag{ font-size:10px; font-weight:900; letter-spacing:1px; color:var(--muted); text-transform:uppercase; padding:5px 8px; border-radius:8px; background:rgba(255,255,255,.05); white-space:nowrap }
.insights-empty{ padding:18px; text-align:center; color:var(--muted); font-size:13px; border:1px dashed var(--line); border-radius:14px }

/* Today's Edge — insights polish */
.insights-meta{ margin-top:4px; font-size:11px; color:var(--muted); letter-spacing:.3px }
#insightsUpdated::before{ content:"●"; color:var(--green); margin-right:6px; font-size:9px; vertical-align:middle }
.insight{ border-left-width:3px }
.insight.win{ border-left-color:var(--green) }
.insight.warn{ border-left-color:var(--orange) }
.insight.alert{ border-left-color:var(--red) }
.insight.info{ border-left-color:var(--cyan) }
.insight .i-title b{ color:var(--cyan); font-weight:900 }
.insight.win .i-title b{ color:var(--green) }
.insight.warn .i-title b{ color:var(--orange) }
.insight.alert .i-title b{ color:var(--red) }

/* Daily Scoreboard */
.scoreboard-card{ position:relative; overflow:hidden }
.scoreboard-card::before{
  content:""; position:absolute; inset:-40% 40% auto -20%; height:140%;
  background:radial-gradient(60% 60% at 30% 30%, rgba(24,191,255,.10), transparent 70%);
  pointer-events:none;
}
.sb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; position:relative }
.sb-extra{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding:8px 12px; border-radius:14px; background:linear-gradient(135deg, rgba(45,245,156,.16), rgba(24,191,255,.12)); border:1px solid rgba(45,245,156,.28) }
.sb-extra-label{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted) }
.sb-extra strong{ font-size:18px; font-weight:900; color:var(--green); letter-spacing:-.02em }
.sb-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; position:relative }
.sb-cell{
  display:flex; flex-direction:column; gap:6px; padding:14px;
  border-radius:16px; background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.sb-label{ font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted) }
.sb-value{ font-size:24px; font-weight:900; letter-spacing:-.02em; color:var(--text) }
.sb-cell:nth-child(1) .sb-value{ color:var(--cyan) }
.sb-cell:nth-child(2) .sb-value{ color:var(--text) }
.sb-cell:nth-child(3) .sb-value{ color:var(--green) }
.sb-cell:nth-child(4) .sb-value{ color:var(--orange) }
.sb-best{
  margin-top:12px; display:flex; align-items:center; gap:12px; padding:14px;
  border-radius:16px; background:linear-gradient(135deg, rgba(255,193,7,.10), rgba(24,191,255,.06));
  border:1px solid rgba(255,193,7,.28); position:relative;
}
.sb-best-ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:22px; background:rgba(255,193,7,.18) }
.sb-best-body{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.sb-best-label{ font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--muted) }
.sb-best-body strong{ font-size:15px; font-weight:900; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sb-best-body small{ font-size:12px; color:var(--muted) }

/* =========================================================
   v14: Platform chips, notes, OCR fallback, modals, Pro list
   ========================================================= */
#v14ScanBlock{display:grid;gap:12px;margin:14px 0 6px}
.v14-platform-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.v14-eyebrow{display:inline-flex;color:var(--cyan);font-size:11px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;margin-right:4px}
.v14-platform-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.v14-chip{--chip:rgba(255,255,255,.18);border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);padding:7px 11px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em}
.v14-chip.on{background:linear-gradient(90deg,var(--chip),rgba(255,255,255,.06));color:#fff;border-color:var(--chip);box-shadow:0 0 0 1px var(--chip) inset,0 8px 22px -10px var(--chip)}
.v14-conf{font-size:11px;font-weight:900;padding:5px 9px;border-radius:999px;letter-spacing:.04em}
.v14-conf.ok{background:rgba(45,245,156,.14);color:var(--green)}
.v14-conf.warn{background:rgba(255,146,46,.16);color:var(--orange)}
.v14-conf.low{background:rgba(255,73,102,.16);color:var(--red)}

.v14-notes{border:1px solid var(--line);border-radius:18px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.v14-notes-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:#fff;font-weight:900;letter-spacing:.02em}
.v14-notes-dot{width:9px;height:9px;border-radius:50%;background:var(--accent,var(--cyan));box-shadow:0 0 14px var(--accent,var(--cyan))}
.v14-notes-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.v14-notes-list li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;color:var(--muted);font-size:13.5px;line-height:1.45}
.v14-notes-list li b{color:#fff}
.v14-tag{font-size:10px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;background:rgba(24,191,255,.14);color:var(--cyan);padding:4px 8px;border-radius:999px;white-space:nowrap;align-self:center}

.v14-fallback{border:1px solid rgba(255,146,46,.45);border-radius:18px;padding:14px;background:linear-gradient(180deg,rgba(255,146,46,.10),rgba(255,73,102,.04))}
.v14-fb-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#fff;font-weight:900}
.v14-fb-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange);animation:v14pulse 1.6s infinite}
@keyframes v14pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.v14-fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.v14-fb-grid label{display:grid;gap:4px;font-size:11px;font-weight:900;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.v14-fb-grid input{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-size:15px;font-weight:700}
.v14-fb-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Modals */
.v14-modal{position:fixed;inset:0;z-index:9999;background:rgba(2,8,20,.78);backdrop-filter:blur(14px);display:grid;place-items:end center;padding:0;animation:v14fade .2s ease}
.v14-modal.hidden{display:none}
@keyframes v14fade{from{opacity:0}to{opacity:1}}
.v14-modal-card{width:100%;max-width:480px;background:linear-gradient(180deg,#0a1628,#070f1d);border:1px solid var(--line);border-radius:24px 24px 0 0;padding:22px 18px 28px;position:relative;max-height:92vh;overflow-y:auto;box-shadow:0 -20px 60px -10px rgba(24,191,255,.35);animation:v14slide .25s cubic-bezier(.22,.9,.35,1)}
@keyframes v14slide{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(min-width:560px){.v14-modal{place-items:center}.v14-modal-card{border-radius:24px}}
.v14-modal-close{position:absolute;top:10px;right:10px;border:0;background:rgba(255,255,255,.07);color:#fff;width:36px;height:36px;border-radius:50%;font-size:22px;line-height:1;font-weight:900;cursor:pointer}
.v14-modal-card h2{margin:6px 0 4px;font-size:22px}
.v14-input{width:100%;box-sizing:border-box;padding:12px 14px;margin-top:10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:15px}

.v14-fb-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px}
.v14-fb-cats button{padding:11px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--muted);font-weight:800;font-size:13px;text-align:left;cursor:pointer}
.v14-fb-cats button.on{background:linear-gradient(90deg,rgba(24,191,255,.18),rgba(45,245,156,.10));color:#fff;border-color:var(--cyan)}

/* Pro */
.eyebrow.gold{color:#ffcf57}
.primary.gold{background:linear-gradient(90deg,#ffcf57,#ff922e);color:#1a0d00}
.v14-pro-list{display:grid;gap:8px;margin:14px 0}
.v14-pro-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);color:#fff;text-align:left;cursor:pointer;font:inherit;width:100%}
.v14-pro-row.voted{border-color:#ffcf57;background:linear-gradient(90deg,rgba(255,207,87,.12),rgba(255,146,46,.06))}
.v14-pro-info{flex:1;display:grid;gap:2px}
.v14-pro-info strong{font-size:14.5px}
.v14-pro-info small{color:var(--muted);font-size:12px;line-height:1.35}
.v14-pro-vote{display:flex;align-items:center;gap:8px}
.v14-pro-count{font-weight:1000;font-size:18px;color:#ffcf57;min-width:24px;text-align:right}
.v14-pro-btn{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff}
.v14-pro-row.voted .v14-pro-btn{background:#ffcf57;color:#1a0d00}

.v14-pro-cta{border-top:1px solid var(--line);margin-top:8px}

/* ============ Gig.ly v15 — Daily Dashboard, Platform Notes, Smart History Filters ============ */
.v15-daily-card, .v15-platnotes-card { position:relative; }
.v15-dd-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; }
.v15-dd-live { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted,#9aa6b2); padding:4px 8px; border-radius:999px; background:rgba(110,231,183,.08); border:1px solid rgba(110,231,183,.18); }
.v15-dot { width:6px; height:6px; border-radius:50%; background:#6ee7b7; box-shadow:0 0 8px #6ee7b7; animation:v15pulse 1.6s infinite; }
@keyframes v15pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.v15-dd-section { padding:12px 0; border-top:1px solid rgba(255,255,255,.06); }
.v15-dd-section:first-of-type { border-top:0; padding-top:6px; }
.v15-dd-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:8px; }
.v15-dd-label { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#9aa6b2); font-weight:600; }
.v15-dd-best, .v15-dd-sub { font-size:12px; color:var(--text,#e5edf5); opacity:.85; }
.v15-spark { width:100%; height:60px; display:block; --accent:#6ee7b7; }
.v15-spark-axis { display:flex; justify-content:space-between; font-size:10px; color:var(--muted,#9aa6b2); margin-top:4px; }

.v15-mix { display:flex; flex-direction:column; gap:10px; }
.v15-mix-bar { display:flex; height:10px; width:100%; border-radius:6px; overflow:hidden; background:rgba(255,255,255,.05); }
.v15-mix-bar > span { display:block; height:100%; min-width:2px; }
.v15-mix-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.v15-mix-list li { display:grid; grid-template-columns:14px 1fr auto; gap:8px; align-items:center; font-size:13px; }
.v15-mix-dot { width:10px; height:10px; border-radius:50%; }
.v15-mix-name { color:var(--text,#e5edf5); }
.v15-mix-val { color:var(--muted,#9aa6b2); font-variant-numeric:tabular-nums; }

.v15-pace-bar { position:relative; height:10px; border-radius:6px; background:rgba(255,255,255,.06); overflow:visible; margin-bottom:6px; }
.v15-pace-bar > #v15PaceFill { position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,#6ee7b7,#34d399); border-radius:6px; transition:width .4s ease; }
.v15-pace-marker { position:absolute; top:-3px; bottom:-3px; width:2px; background:#fbbf24; box-shadow:0 0 6px rgba(251,191,36,.7); transition:left .4s ease; border-radius:2px; }
.v15-pace-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--muted,#9aa6b2); font-variant-numeric:tabular-nums; }

.v15-empty { font-size:13px; color:var(--muted,#9aa6b2); margin:6px 0 0; padding:10px; background:rgba(255,255,255,.03); border-radius:8px; text-align:center; }

/* Platform Notes cards on dashboard */
.v15-platnotes { display:flex; flex-direction:column; gap:10px; }
.v15-pn-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-left:3px solid var(--pc,#6ee7b7); border-radius:10px; padding:10px 12px; }
.v15-pn-card header { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:14px; }
.v15-pn-dot { width:8px; height:8px; border-radius:50%; background:var(--pc,#6ee7b7); }
.v15-pn-card ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.v15-pn-card li { display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:start; font-size:12.5px; line-height:1.4; color:var(--text,#e5edf5); }
.v15-pn-tag { font-size:10px; padding:2px 6px; border-radius:4px; background:var(--pc,#6ee7b7); color:#0b1220; font-weight:700; white-space:nowrap; align-self:start; }

/* Smart History Filters */
.v15-hist-filters { display:flex; flex-direction:column; gap:10px; padding:10px 0; margin:8px 0; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); }
.v15-hf-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.v15-hf-label { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted,#9aa6b2); font-weight:700; min-width:60px; }
.v15-hf-chips { display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.v15-hf-chip { font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--text,#e5edf5); cursor:pointer; transition:all .15s ease; font-weight:600; }
.v15-hf-chip:hover { background:rgba(255,255,255,.06); }
.v15-hf-chip.on { background:var(--pc,#6ee7b7); color:#0b1220; border-color:transparent; }
.v15-hf-sliders { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v15-hf-slide { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted,#9aa6b2); }
.v15-hf-slide span b { color:var(--text,#e5edf5); font-variant-numeric:tabular-nums; }
.v15-hf-slide input[type=range] { width:100%; accent-color:#6ee7b7; }
.v15-hf-summary { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--muted,#9aa6b2); }
.v15-hf-summary .ghost.small { padding:4px 10px; font-size:12px; }
.v15-hist-plat { display:inline-block; font-size:10px; padding:1px 6px; border-radius:4px; color:#0b1220; font-weight:700; margin-left:6px; vertical-align:middle; }

@media (max-width:380px){ .v15-hf-sliders { grid-template-columns:1fr; } }

/* ===== Gig.ly v16 ===== */
.v16-empty-card{position:relative;overflow:hidden;text-align:center;padding:28px 20px;border:1px solid rgba(255,255,255,.08)}
.v16-empty-glow{position:absolute;inset:-30% -10% auto -10%;height:160px;background:radial-gradient(60% 100% at 50% 0%, var(--accent, #6ee7b7) 0%, transparent 70%);opacity:.18;filter:blur(20px);pointer-events:none}
.v16-empty-title{margin:6px 0 6px;font-size:22px;letter-spacing:-.01em}
.v16-empty-sub{color:var(--muted,#9aa6b2);max-width:34ch;margin:0 auto 16px;font-size:14px;line-height:1.45}
.v16-empty-cta{width:100%;max-width:320px;margin:0 auto;padding:14px 18px;font-size:16px;border-radius:14px}
.v16-empty-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:14px;color:var(--muted,#9aa6b2);font-size:12px}

.v16-streak-card{padding:16px}
.v16-streak-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.v16-streak-head h2{margin:2px 0 0;font-size:18px}
.v16-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;background:rgba(255,255,255,.06);color:var(--muted,#9aa6b2);border:1px solid rgba(255,255,255,.06)}
.v16-badge.warm{background:rgba(255,176,80,.12);color:#ffb050;border-color:rgba(255,176,80,.25)}
.v16-badge.steady{background:rgba(110,231,183,.12);color:#6ee7b7;border-color:rgba(110,231,183,.25)}
.v16-badge.iron{background:linear-gradient(135deg, rgba(255,215,140,.18), rgba(110,231,183,.18));color:#f6d27a;border-color:rgba(246,210,122,.35)}
.v16-streak-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.v16-day{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.v16-day span{font-size:11px;color:var(--muted,#9aa6b2);font-weight:600}
.v16-day i{display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.v16-day.hit i{background:var(--accent,#6ee7b7);box-shadow:0 0 0 3px rgba(110,231,183,.18)}
.v16-day.today{border-color:rgba(110,231,183,.35)}
.v16-day.future{opacity:.5}
.v16-streak-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.v16-streak-stats div{background:rgba(255,255,255,.03);padding:10px;border-radius:10px;text-align:center;border:1px solid rgba(255,255,255,.05)}
.v16-streak-stats span{display:block;font-size:11px;color:var(--muted,#9aa6b2);margin-bottom:3px}
.v16-streak-stats strong{font-size:16px}

.v16-invite-card{padding:18px 16px;background:linear-gradient(180deg, rgba(110,231,183,.05), transparent 60%)}
.v16-invite-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.v16-invite-head h2{margin:2px 0 4px;font-size:18px}
.v16-invite-sub{color:var(--muted,#9aa6b2);font-size:13px;margin:0;line-height:1.4}
.v16-invite-icon{font-size:26px;line-height:1}
.v16-invite-form{display:flex;gap:8px;margin-bottom:10px}
.v16-invite-form input{flex:1;padding:11px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:inherit;font-size:14px}
.v16-invite-form input:focus{outline:none;border-color:var(--accent,#6ee7b7)}
.v16-invite-form button{padding:11px 14px;border-radius:10px;font-size:13px;white-space:nowrap}
.v16-invite-share{display:flex;gap:6px;margin-bottom:6px}
.v16-invite-share input{flex:1;padding:9px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--muted,#9aa6b2);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.v16-invite-share button{padding:9px 12px;border-radius:8px;font-size:12px}
.v16-invite-status{min-height:18px;font-size:12px;color:var(--accent,#6ee7b7);opacity:0;transition:opacity .2s;margin:6px 0 4px}
.v16-invite-status.show{opacity:1}
.v16-invite-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#9aa6b2)}
.v16-invite-meta strong{color:#fff}
.v16-invite-divider{opacity:.5}

.v14-conf.v16-conf{padding:4px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em}
.v14-conf.v16-conf.ok{background:rgba(110,231,183,.14);color:#6ee7b7;border:1px solid rgba(110,231,183,.3)}
.v14-conf.v16-conf.warn{background:rgba(255,176,80,.14);color:#ffb050;border:1px solid rgba(255,176,80,.3)}
.v14-conf.v16-conf.low{background:rgba(255,107,107,.14);color:#ff8a8a;border:1px solid rgba(255,107,107,.3)}

.v16-hist-presets{margin:12px 0 8px}
.v16-hp-label{display:block;font-size:11px;color:var(--muted,#9aa6b2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-weight:600}
.v16-hp-chips{display:flex;flex-wrap:wrap;gap:6px}
.v16-hp-chip{padding:7px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:inherit;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:all .15s}
.v16-hp-chip:hover{border-color:rgba(110,231,183,.3)}
.v16-hp-chip.on{background:rgba(110,231,183,.14);border-color:rgba(110,231,183,.4);color:#6ee7b7}

/* ============ v17: Shift Mode + Hot Zone Heatmap ============ */
.v17-shift-card{position:relative;overflow:hidden}
.v17-shift-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.v17-shift-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(255,255,255,.04);flex-shrink:0;margin-top:6px;transition:all .25s}
.v17-shift-dot.on{background:#6ee7b7;box-shadow:0 0 0 4px rgba(110,231,183,.18);animation:v17pulse 1.6s ease-in-out infinite}
@keyframes v17pulse{0%,100%{box-shadow:0 0 0 4px rgba(110,231,183,.18)}50%{box-shadow:0 0 0 8px rgba(110,231,183,.06)}}

.v17-shift-idle{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0 4px}
.v17-shift-start{padding:14px 28px;font-size:15px;border-radius:999px;font-weight:700;letter-spacing:.02em;box-shadow:0 8px 24px -10px rgba(110,231,183,.5)}
.v17-shift-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:11px;color:var(--muted,#9aa6b2)}
.v17-shift-tips span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}

.v17-shift-live{display:flex;flex-direction:column;gap:14px}
.v17-hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v17-hud-cell{padding:12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden}
.v17-hud-cell::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:currentColor;opacity:.6}
.v17-hud-cell.accent-green{color:#6ee7b7}
.v17-hud-cell.accent-cyan{color:#22d3ee}
.v17-hud-cell.accent-orange{color:#ffb050}
.v17-hud-cell.accent-red{color:#ff8a8a}
.v17-hud-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.85;font-weight:600}
.v17-hud-value{font-size:22px;font-weight:700;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums}
.v17-hud-sub{font-size:11px;color:var(--muted,#9aa6b2);margin-top:2px}

.v17-shift-meta{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.03);font-size:12px;color:var(--muted,#9aa6b2)}
.v17-shift-meta b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.v17-shift-actions{display:flex;gap:8px}

/* Hot Zone heatmap */
.v17-heat-card{padding-bottom:18px}
.v17-heat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.v17-heat-select{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.v17-heat-wrap{display:flex;gap:6px;align-items:stretch}
.v17-heat-yaxis{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted,#9aa6b2);font-weight:600;padding:1px 0;width:24px}
.v17-heat-grid{flex:1;display:grid;grid-template-columns:repeat(24,1fr);grid-auto-rows:1fr;gap:2px;aspect-ratio:24/7;min-height:84px}
.v17-heat-cell{border-radius:2px;background:rgba(110,231,183,calc(var(--i,0) * 0.95));border:1px solid rgba(255,255,255,.04);transition:transform .12s}
.v17-heat-cell:hover{transform:scale(1.4);z-index:2;border-color:rgba(255,255,255,.4)}
.v17-heat-cell.best{box-shadow:0 0 0 1.5px #ffb050,0 0 12px -2px rgba(255,176,80,.6)}
.v17-heat-xaxis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted,#9aa6b2);padding-left:30px;margin-top:6px;font-weight:600}
.v17-heat-legend{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;color:var(--muted,#9aa6b2)}
.v17-heat-bar{flex-shrink:0;width:80px;height:8px;border-radius:4px;background:linear-gradient(90deg,rgba(110,231,183,.05),rgba(110,231,183,.95))}
.v17-heat-best{margin-left:auto;color:#ffb050;font-weight:600}

@media (max-width:380px){
  .v17-hud-value{font-size:19px}
  .v17-heat-xaxis{font-size:9px}
}

/* ============ v18: Launch Readiness Pass ============ */

/* Sync indicator pill — top-right, subtle */
.v18-sync{
  position:fixed; top:max(10px, env(safe-area-inset-top)); right:10px; z-index:80;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px 6px 9px; border-radius:999px;
  background:rgba(7,17,31,.78); border:1px solid var(--line, rgba(255,255,255,.13));
  color:var(--muted, #9fb0c8); font-size:11px; font-weight:700; letter-spacing:.02em;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  cursor:pointer; transition:all .2s ease;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
}
.v18-sync:hover{ border-color:rgba(255,255,255,.22); color:#fff }
.v18-sync-dot{
  width:7px; height:7px; border-radius:999px; background:#9fb0c8; flex-shrink:0;
  box-shadow:0 0 0 3px rgba(159,176,200,.12);
}
.v18-sync-ok       .v18-sync-dot{ background:#2df59c; box-shadow:0 0 0 3px rgba(45,245,156,.18); animation:v18sync 2.4s ease-in-out infinite }
.v18-sync-queued   .v18-sync-dot{ background:#ffb050; box-shadow:0 0 0 3px rgba(255,176,80,.18); animation:v18sync 1.4s ease-in-out infinite }
.v18-sync-off      .v18-sync-dot{ background:#9fb0c8 }
.v18-sync-auth     .v18-sync-dot{ background:#9fb0c8 }
.v18-sync-checking .v18-sync-dot{ background:#18bfff; animation:v18sync 1s ease-in-out infinite }
.v18-sync-ok       { color:#2df59c; border-color:rgba(45,245,156,.28) }
.v18-sync-queued   { color:#ffb050; border-color:rgba(255,176,80,.28) }
.v18-sync-off      { color:#9fb0c8 }
.v18-sync-auth     { color:#9fb0c8 }
@keyframes v18sync { 0%,100% { opacity:1 } 50% { opacity:.55 } }

/* Toast variants */
.toast.v18-toast-ok    { border-color:rgba(45,245,156,.45); color:#cffbe2 }
.toast.v18-toast-info  { border-color:rgba(24,191,255,.4) }
.toast.v18-toast-warn  { border-color:rgba(255,176,80,.5); color:#fff1d6 }

/* Sticky Scan FAB — bottom-right, one-thumb friendly */
.v18-fab{
  position:fixed; right:14px;
  bottom:max(18px, calc(env(safe-area-inset-bottom) + 14px));
  z-index:75;
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 18px 14px 16px; border:0; border-radius:999px;
  background:linear-gradient(90deg, var(--cyan,#18bfff), var(--green,#2df59c));
  color:#031221; font-weight:900; font-size:14px; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 18px 38px -14px rgba(24,191,255,.55), 0 6px 14px -6px rgba(45,245,156,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  animation:v18fabIn .35s cubic-bezier(.2,.85,.2,1);
}
.v18-fab:hover{ transform:translateY(-1px) }
.v18-fab:active{ transform:scale(.97) }
.v18-fab[hidden]{ display:none }
.v18-fab-ico{ font-size:17px; line-height:1 }
.v18-fab-label{ line-height:1 }
@keyframes v18fabIn { from { transform:translateY(20px); opacity:0 } to { transform:translateY(0); opacity:1 } }

/* Pro CTA bar in dashboard Pro card */
.v18-pro-cta{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,176,80,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,176,80,.28);
}
.v18-pro-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.v18-pro-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 60% }
.v18-pro-meta strong{ color:#ffb050; font-size:13px; font-weight:800; letter-spacing:.02em }
.v18-pro-meta span{ color:var(--muted,#9fb0c8); font-size:12px }
.v18-pro-btn{
  padding:11px 16px; border-radius:999px; font-size:13px; font-weight:900;
  background:linear-gradient(90deg, #ffb050, #ff922e);
  color:#1a0d00;
  box-shadow:0 12px 28px -10px rgba(255,146,46,.55);
  white-space:nowrap;
}
.v18-pro-fine{
  margin:10px 0 0; font-size:11px; color:var(--muted,#9fb0c8); opacity:.85;
  text-align:center; letter-spacing:.01em;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  .v18-sync-dot, .v18-fab, .v17-shift-dot.on { animation:none !important }
}

/* Tighter mobile spacing for the floating elements when keyboard appears */
@media (max-width:380px){
  .v18-sync{ font-size:10px; padding:5px 9px 5px 8px }
  .v18-fab{ padding:13px 15px 13px 13px; font-size:13px }
}

/* ============================================================
   V20 Splash — centered logo, balanced spacing, no squish
   ============================================================ */
.splash{
  min-height:100svh;
  padding:clamp(18px,5vw,32px);
}
.splash-card.splash-card--v20{
  width:min(440px,100%);
  min-height:min(720px,calc(100svh - 32px));
  max-height:calc(100svh - 24px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,6vh,56px);
  padding:clamp(28px,6vw,44px) clamp(20px,5vw,32px) clamp(36px,7vh,56px);
  border-radius:36px;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(24,191,255,.20), transparent 58%),
    rgba(5,12,23,.82);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 50px 140px -30px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.splash-card--v20 .splash-logo-wrap{
  width:100%;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0; /* allow flex shrink without squish */
}
.splash-card--v20 .splash-logo{
  display:block;
  width:auto;
  height:auto;
  max-width:min(360px,82%);
  max-height:min(58svh,520px);
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45)) drop-shadow(0 0 60px rgba(24,191,255,.10));
  transition:transform .45s ease, opacity .45s ease;
}
.splash-card--v20 .enter-btn--v20{
  position:static;
  transform:none;
  left:auto; bottom:auto;
  flex:0 0 auto;
  min-width:min(280px,72%);
  padding:16px 28px;
  border-radius:999px;
  font-size:17px;
  font-weight:1000;
  letter-spacing:.01em;
  color:#031221;
  background:linear-gradient(90deg,var(--cyan),var(--green));
  border:0;
  box-shadow:
    0 18px 40px -12px rgba(24,191,255,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  animation:v20Pulse 2.5s ease-in-out infinite;
  transition:transform .18s ease, box-shadow .18s ease, opacity .4s ease;
}
.splash-card--v20 .enter-btn--v20:active{
  transform:scale(.97);
}
@keyframes v20Pulse{
  0%,100%{ box-shadow:0 18px 40px -12px rgba(24,191,255,.45), 0 0 0 0 rgba(45,245,156,.35) }
  50%   { box-shadow:0 22px 48px -10px rgba(24,191,255,.65), 0 0 0 10px rgba(45,245,156,0) }
}
.splash.launching .splash-card--v20 .splash-logo{
  transform:scale(.92);
  opacity:.18;
}
.splash.launching .splash-card--v20 .enter-btn--v20{
  opacity:0;
  transform:scale(.94);
  animation:none;
}
.splash.fadeout{ animation:splashFade .4s ease forwards }

@media (max-width:380px){
  .splash-card.splash-card--v20{
    min-height:calc(100svh - 20px);
    border-radius:28px;
    gap:24px;
    padding:24px 18px 30px;
  }
  .splash-card--v20 .splash-logo{ max-height:54svh }
  .splash-card--v20 .enter-btn--v20{ min-width:80%; font-size:16px; padding:15px 24px }
}
@media (min-height:850px){
  .splash-card--v20 .splash-logo{ max-height:60svh }
}