/* Tezly owner panel. Layout, glass and type follow the Lumelle reference
   one to one; the light is Tezly's: lime on near-black, amber second. */

:root {
  color-scheme: dark;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-base: 14px; --fs-lg: 15px;
  --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 22px; --fs-display: 34px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --side: 252px; --gap: 18px; --max: 1480px;

  --bg: #0b0c08;
  --wash: linear-gradient(160deg, #11140a 0%, #0d0f0a 40%, #14110a 72%, #0a0f0f 100%);
  --orb-1: #8fb51c7a;
  --orb-2: #2c7a6466;
  --orb-3: #b5801f75;
  --orb-4: #8c7a1666;
  --orb-5: #7a9a1a45;
  --orb-6: #9c6e2240;
  --band: #ffffff08;
  --glass: #1b1d1447;
  --glass-2: #ffffff12;
  --glass-3: #ffffff1f;
  --glass-solid: #191b13e6;
  --edge: #ffffff38;
  --edge-2: #ffffff0f;
  --sheen: #ffffff12;
  --catch: #ffffff12;
  --pool: #ffffff06;
  --lift: 0 1px 1px #0000004d, 0 20px 44px -20px #000000bf;
  --blur: blur(20px) saturate(180%);

  --card: #1c1e16;
  --card-3: #ffffff17;
  --ink: #f5f4ed;
  --ink-2: #dddcd1;
  --muted: #b1afa2;
  --line: #f0f5dc17;
  --line-2: #f0f5dc2b;

  --accent: #d7ff3d;
  --accent-ink: #12140a;
  --accent-soft: #d7ff3d24;
  --accent-text: #e2ff80;

  --ch-1: #d7ff3d;
  --ch-2: #f2c14e;
  --ch-3: #7fd1b9;
  --ch-4: #f5f4ed;
  --good: #b9f24a; --good-soft: #b9f24a24;
  --warn: #f2c14e; --warn-soft: #f2c14e26;
  --bad: #ff8a7d;  --bad-soft: #ff8a7d24;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden;
  background: var(--bg); color: var(--ink);
  font: 500 var(--fs-base)/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(118deg, transparent 38%, var(--band) 50%, transparent 62%),
    radial-gradient(circle 40vmax at 4% 6%, var(--orb-1), var(--orb-1) 22%, transparent 64%),
    radial-gradient(circle 30vmax at 96% 8%, var(--orb-2), var(--orb-2) 20%, transparent 62%),
    radial-gradient(circle 42vmax at 94% 98%, var(--orb-3), var(--orb-3) 24%, transparent 64%),
    radial-gradient(circle 28vmax at 26% 98%, var(--orb-4), var(--orb-4) 22%, transparent 62%),
    radial-gradient(circle 20vmax at 60% 30%, var(--orb-5), var(--orb-5) 16%, transparent 68%),
    radial-gradient(circle 16vmax at 40% 62%, var(--orb-6), transparent 70%),
    var(--wash);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
* { scrollbar-width: thin; scrollbar-color: #ffffff24 transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.ico--sm { width: 16px; height: 16px; }
.muted { color: var(--muted); }

/* glass surfaces */
.card, .kpi, .side, .top__bar, .tabbar, .pop {
  position: relative;
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  background-image:
    radial-gradient(130% 70% at 0% 0%, var(--catch), transparent 58%),
    linear-gradient(180deg, var(--sheen), transparent 38%),
    linear-gradient(0deg, var(--pool), transparent 40%);
  box-shadow: inset 0 1px 0 #ffffff24, inset 0 0 22px #ffffff0a, inset 0 -18px 30px -24px #ffffff17, 0 0 0 1px var(--line), var(--lift);
}
.card { border-radius: var(--r-lg); min-width: 0; padding: 18px 20px 20px; }
.card::before, .kpi::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(#ffffff0d, #fff0 40%);
}
.card > *, .kpi > * { position: relative; }
.card--flush { padding: 0; }
.chead { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 14px; }
.chead__text { flex: 1; min-width: 0; }
.chead h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.005em; line-height: 1.25; }
.chead p { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.card--flush .chead { padding: 16px 20px 0; }

/* controls */
.btn, .ibtn, .chip, .seg, .searchpill, .live {
  background-color: var(--glass-2);
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--edge-2), 0 0 0 1px var(--line), 0 2px 6px -3px #00000040;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 13px;
  font-size: var(--fs-md); font-weight: 600; color: var(--ink); white-space: nowrap;
  transition: background-color .2s;
}
.btn:hover, .ibtn:hover, .chip:hover, .searchpill:hover { background-color: var(--glass-3); }
.btn .ico { width: 18px; height: 18px; }
.btn--primary {
  background: linear-gradient(180deg, #e9ff95, var(--accent) 60%) !important;
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -1px 0 #0000001a, 0 8px 20px -8px var(--accent) !important;
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--sm { height: 32px; padding: 0 12px; border-radius: 10px; font-size: var(--fs-sm); }
.btn--sm .ico { width: 16px; height: 16px; }
.btn--dim { opacity: .55; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.ibtn { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; color: var(--ink); }
.ibtn--sm { width: 34px; height: 34px; border-radius: 10px; }
.ibtn__badge {
  position: absolute; top: 7px; right: 7px; display: grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
  background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: 700;
  box-shadow: 0 0 0 2px var(--card);
}
.ibtn__badge.bad { background: var(--bad); color: #2a0b07; }
.kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--glass-3); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-2xs); font-weight: 700; color: var(--muted); }
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 13px; }
.seg button {
  height: 32px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed='true'] { color: var(--ink); background: #ffffff29; box-shadow: inset 0 1px #ffffff40, 0 0 0 1px #ffffff0f, 0 6px 16px -8px #0009; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 11px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.chip i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.chip b { margin-left: 2px; color: var(--ink); font-weight: 700; }
.chip[aria-pressed='false'] { opacity: .6; }
.chip[aria-pressed='false'] i { background: none; box-shadow: inset 0 0 0 1.5px var(--c); }
.chip[aria-pressed='false'] b { color: var(--muted); text-decoration: line-through; }
.chip.is-on { background: var(--accent) !important; color: var(--accent-ink); box-shadow: 0 6px 14px -8px var(--accent) !important; }
.linkbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; color: var(--accent-text); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 99px; font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.delta .ico { width: 11px; height: 11px; stroke-width: 2.6; }
.delta--up { color: var(--good); background: var(--good-soft); }
.delta--down { color: var(--bad); background: var(--bad-soft); }
.delta--flat { color: var(--muted); background: var(--card-3); }
.av { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--h, #e8f1c4); color: #1b1d12; font-size: var(--fs-xs); font-weight: 700; box-shadow: inset 0 0 0 1px #fff9; }
.av--sm { width: 26px; height: 26px; font-size: var(--fs-2xs); }
.av__dot { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px var(--card); }
.thumb { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; background: linear-gradient(155deg, color-mix(in oklab, var(--t) 70%, #fff), var(--t)); color: #1b1d12; box-shadow: inset 0 1px #ffffffb3, inset 0 0 0 1px #fff6, 0 4px 10px -6px #0008; }
.thumb b { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; }
.thumb i { position: absolute; bottom: 5px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 3px; background: #1b1d122e; }
.thumb--sm { width: 30px; height: 30px; border-radius: 9px; }
.thumb--sm b { font-size: var(--fs-2xs); }
.thumb--sm i { display: none; }
.cell__text { min-width: 0; }
.cell__text b { display: block; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell__text small { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amt { font-weight: 600; white-space: nowrap; }
.level { position: relative; height: 6px; min-width: 70px; border-radius: 6px; background: var(--card-3); overflow: hidden; }
.level i { position: absolute; inset: 0; border-radius: inherit; background: var(--good); transform-origin: left; }
.level.is-low i { background: var(--warn); }
.level.is-out i { background: var(--bad); }
.ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; }
.ring__track { fill: none; stroke: var(--card-3); }
.ring__arc { fill: none; stroke: var(--accent); stroke-linecap: round; }
.ring__in { position: relative; text-align: center; line-height: 1.1; }
.ring__in b { font-size: var(--fs-2xs); font-weight: 700; }
.spark { display: block; overflow: visible; }

/* layout */
.app { min-height: 100dvh; }
.main { margin-left: calc(var(--side) + 32px); min-width: 0; padding: 16px 24px 48px 0; }
.main__in { max-width: var(--max); margin: 0 auto; }
.side { position: fixed; top: 16px; bottom: 16px; left: 16px; z-index: 40; width: var(--side); display: flex; flex-direction: column; border-radius: var(--r-xl); }
.side__head { display: flex; align-items: center; gap: 10px; padding: 18px 14px 14px 18px; }
.brand { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: linear-gradient(150deg, #2a2d1c, #14160d); box-shadow: inset 0 1px 0 #ffffff2e, 0 10px 20px -10px #000; }
.mark img { width: 30px; height: 30px; }
.brand__text { min-width: 0; }
.brand__text b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.brand__text small { display: block; margin-top: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav { flex: 1; padding: 4px 12px 16px; overflow: hidden auto; scrollbar-width: none; -webkit-mask: linear-gradient(#000 calc(100% - 22px), #0000); mask: linear-gradient(#000 calc(100% - 22px), #0000); }
.snav__group { margin: 14px 8px 6px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.snav__item { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; margin: 1px 0; padding: 0 12px; border-radius: 13px; font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .2s, color .2s; }
.snav__item > .ico { color: var(--muted); }
.snav__item:hover { color: var(--ink); background: var(--glass-2); }
.snav__item[aria-current='page'] { color: var(--ink); background: #ffffff1a; box-shadow: inset 0 1px #ffffff40, 0 0 0 1px #ffffff0f, 0 6px 16px -8px #0009; }
.snav__item[aria-current='page'] > .ico { color: var(--accent); }
.snav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.snav__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 99px; background: var(--glass-3); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-2xs); font-weight: 700; color: var(--ink); }
.snav__count.is-hot { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.snav__count.is-bad { background: var(--bad); color: #2a0b07; box-shadow: none; }
.side__foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 14px; }
.goal { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.goal__text { flex: 1; min-width: 0; }
.goal__text b { display: block; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal__text small { display: block; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* top bar */
.top { position: relative; z-index: 30; }
.top__bar { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px 10px 16px; border-radius: var(--r-lg); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-md); font-weight: 600; color: var(--muted); }
.crumbs b { color: var(--ink); font-weight: 600; }
.crumbs .ico { width: 14px; height: 14px; }
.top__spacer { flex: 1; }
.searchpill { display: flex; align-items: center; gap: 10px; width: min(360px, 32vw); height: 44px; padding: 0 8px 0 14px; border-radius: 14px; font-size: var(--fs-md); font-weight: 500; color: var(--muted); cursor: text; }
.searchpill:focus-within { color: var(--ink); }
.searchpill input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; }
.searchpill input::placeholder { color: var(--muted); }
.live { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: breathe 2.4s ease-in-out infinite; }
.live.is-idle i { background: var(--muted); animation: none; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 #b9f24a66; } 50% { box-shadow: 0 0 0 5px #b9f24a00; } }
.tools { position: relative; display: flex; align-items: center; gap: 8px; }
.me { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0 10px 0 4px; border-radius: 14px; }
.me:hover { background: var(--glass-2); }
.me .av { width: 36px; height: 36px; }
.me__text { text-align: left; line-height: 1.15; }
.me__text b { display: block; font-size: var(--fs-md); font-weight: 600; }
.me__text small { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); }
.me > .ico { width: 16px; height: 16px; color: var(--muted); }
.demo-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; margin-left: 6px; background: var(--warn-soft); color: var(--warn); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.demo-tag .ico { width: 14px; height: 14px; }
.pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 320px; padding: 8px; border-radius: 18px; background-color: var(--glass-solid); }
.pop[hidden] { display: none; }
.menu__label { padding: 8px 10px 4px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 11px; font-size: var(--fs-md); font-weight: 600; text-align: left; }
.menu__item:hover { background: var(--card-3); }
.menu__item .ico { width: 18px; height: 18px; color: var(--muted); }
.menu__item.is-bad .ico { color: var(--bad); }
.menu__item.is-warn .ico { color: var(--warn); }
.menu__sep { height: 1px; margin: 6px 4px; background: var(--line); }
.menu__empty { padding: 12px 10px; color: var(--muted); font-size: var(--fs-md); }

/* page head */
.phead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin: 14px 0 20px; }
.phead__text { flex: 1 1 260px; min-width: 0; }
.phead h1 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.025em; line-height: 1.04; }
.phead p { margin-top: 8px; max-width: 70ch; color: var(--muted); font-size: var(--fs-base); }
.phead p b { color: var(--ink); font-weight: 700; }
.phead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* home grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.hero { grid-column: span 8; padding: 20px 22px 18px; }
.live-pane { grid-column: span 4; display: flex; flex-direction: column; }
.kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.queue { grid-column: span 7; }
.best { grid-column: span 5; }
.low, .feed, .insight { grid-column: span 4; }
.s12 { grid-column: 1 / -1; } .s8 { grid-column: span 8; } .s6 { grid-column: span 6; } .s4 { grid-column: span 4; }

.hero__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.hero__fig { flex: 1; min-width: 0; }
.hero__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.hero__num { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.hero__value { font-size: var(--fs-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.hero__value small { font-size: 18px; color: var(--muted); font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.hero__chips { margin-bottom: 12px; }
.stack-chart { position: relative; height: 330px; }
.stack-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.area__grid { stroke: var(--line-2); stroke-dasharray: 3 5; }
.area__x, .area__y { fill: var(--muted); font-size: 11px; font-weight: 600; font-family: var(--font); }
.area__cursor { stroke: var(--line-2); }
.area__dot { stroke: var(--bg); stroke-width: 2.5; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: var(--fs-md); padding: 20px; }
.tip { position: absolute; top: 0; z-index: 5; min-width: 170px; padding: 10px 12px; border-radius: 14px; pointer-events: none; background: var(--glass-solid); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 0 #ffffff24, 0 0 0 1px var(--line-2), var(--lift); font-size: var(--fs-xs); color: var(--ink-2); opacity: 0; transition: opacity .12s; }
.tip.on { opacity: 1; }
.tip b { display: block; margin-bottom: 4px; font-size: var(--fs-md); color: var(--ink); }
.tip div { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.tip div span { display: inline-flex; align-items: center; gap: 6px; }
.tip i { width: 8px; height: 8px; border-radius: 3px; }

.live-badge { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 99px; font-size: var(--fs-sm); font-weight: 600; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: breathe 2.4s ease-in-out infinite; }
.live-pane .chead { margin-bottom: 8px; }
.live-pane__big { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.live-pane__num { font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.live-pane__big .muted { font-size: var(--fs-sm); font-weight: 600; line-height: 1.25; }
.live-pane__big .spark { width: 110px; height: 40px; margin-left: auto; }
.funnel { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.funnel__row { display: grid; grid-template-columns: 112px 1fr 34px; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.funnel__row b { text-align: right; color: var(--ink); font-size: var(--fs-md); }
.funnel__bar { position: relative; height: 10px; border-radius: 10px; background: var(--card-3); overflow: hidden; }
.funnel__bar i { position: absolute; inset: 0; border-radius: inherit; opacity: .9; transform-origin: left; }
.live-pane__latest { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; }
.live-pane__latest > small { margin-bottom: 4px; font-weight: 600; color: var(--muted); font-size: var(--fs-xs); }
.latest { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 6px 8px; border-radius: 12px; }
.latest:hover { background: var(--glass-2); }
.latest .cell__text { flex: 1; }
.latest__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); }
.live-pane__goal { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; }
.live-pane__goal .cell__text { flex: 1; }
.live-pane__goal .ring__in b { font-size: var(--fs-sm); }
.goal-edit { display: flex; gap: 6px; align-items: center; }
.goal-edit input { width: 130px; height: 34px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--glass-3); box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 600; outline: 0; }

.kpi { position: relative; display: flex; flex-direction: column; min-height: 124px; padding: 16px 18px 14px; border-radius: var(--r-lg); overflow: hidden; }
.kpi::after { content: ''; position: absolute; top: -50px; right: -40px; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; background: var(--kc, var(--accent)); opacity: .16; filter: blur(30px); }
.kpi__label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.kpi__ico { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border-radius: 11px; background: var(--kc, var(--accent)); color: #14160c; box-shadow: inset 0 1px 0 #fff6, 0 8px 16px -8px var(--kc, var(--accent)); }
.kpi__ico .ico { width: 18px; height: 18px; }
.kpi__value { margin-top: 4px; font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.kpi__value small { font-size: var(--fs-md); color: var(--muted); margin-left: 3px; }
.kpi__foot { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; padding-top: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.kpi__foot .spark { width: 86px; height: 28px; margin-left: auto; color: var(--kc, var(--accent)); }

.queue__list { padding: 0 8px 8px; }
.queue__row { display: grid; grid-template-columns: 62px minmax(0, 1.4fr) auto 96px 104px auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; transition: background .15s; }
.queue__row + .queue__row { box-shadow: 0 -1px 0 var(--line); }
.queue__row:hover { background: var(--glass-2); box-shadow: none; }
.queue__row:hover + .queue__row { box-shadow: none; }
.queue__id { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.queue__items { display: flex; align-items: center; gap: 4px; }
.queue__amt { text-align: right; }
.queue__row .btn { min-width: 104px; }
.steps { display: flex; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.steps li:last-child { flex: none; }
.steps__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--glass-3); box-shadow: inset 0 0 0 2px var(--line-2); }
.steps__dot .ico { width: 10px; height: 10px; stroke-width: 2.6; }
.steps li.is-done .steps__dot { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.steps li.is-now .steps__dot { box-shadow: inset 0 0 0 2px var(--accent); }
.steps li.is-now .steps__dot::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent); }
.steps li.is-now .steps__dot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: var(--accent-soft); animation: ring 2.2s ease-in-out infinite; }
.steps li.is-off .steps__dot { background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad); color: var(--bad); }
@keyframes ring { 0%, 100% { transform: scale(.7); opacity: 1; } 50% { transform: scale(1); opacity: .4; } }
.steps__bar { position: absolute; top: 7px; left: 19px; right: 4px; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.steps__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }

.best__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.best__list li { display: flex; flex-direction: column; gap: 6px; }
.best__row { display: flex; align-items: center; gap: 12px; }
.best__row .cell__text { flex: 1; }
.best__rank { width: 20px; text-align: center; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
.best__n { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
.best__bar { position: relative; height: 5px; margin-left: 32px; border-radius: 5px; background: var(--card-3); overflow: hidden; }
.best__bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ch-2), var(--ch-1)); transform-origin: left; }

.low__row { display: grid; grid-template-columns: auto minmax(0, 1fr) 56px auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.low__row:last-child { border-bottom: 0; }
.low__row .level { min-width: 0; }

.feed__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feed__list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-md); color: var(--ink-2); }
.feed__list li > div { min-width: 0; }
.feed__list li b { color: var(--ink); font-weight: 700; }
.feed__list li em { font-style: normal; color: var(--accent-text); font-weight: 600; }
.feed__list li em.bad { color: var(--bad); }
.feed__list li em.warn { color: var(--warn); }
.feed__list li small { display: block; color: var(--muted); }
.feed__amt { margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--accent-text); white-space: nowrap; }

.insight { display: flex; flex-direction: column; gap: 14px; background-image: linear-gradient(150deg, #d7ff3d24, transparent 60%) !important; }
.insight__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #14160c; background: linear-gradient(150deg, #e9ff95, #b6dc22); box-shadow: inset 0 1px 0 #fff6, 0 10px 20px -10px var(--accent); }
.insight__kicker { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.insight h3 { margin: 4px 0 6px; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.insight p { color: var(--muted); font-size: var(--fs-md); }
.insight .btn { align-self: flex-start; margin-top: auto; }

/* detail pages */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--gap); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th { padding: 14px 12px 10px; text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: 11px 12px; white-space: nowrap; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: var(--glass-2); }
th:first-child, td:first-child { padding-left: 20px; }
th:last-child, td:last-child { padding-right: 20px; }
.right { text-align: right; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; font-size: var(--fs-2xs); font-weight: 700; white-space: nowrap; }
.pill.paid, .pill.done, .pill.open { color: var(--good); background: var(--good-soft); }
.pill.created, .pill.prepared, .pill.processing, .pill.queued, .pill.in_progress { color: var(--warn); background: var(--warn-soft); }
.pill.cancelled, .pill.closed { color: var(--muted); background: var(--card-3); }
.pill.error { color: var(--bad); background: var(--bad-soft); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.shot { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--card-3); box-shadow: 0 0 0 1px var(--line); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot .ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; font-size: var(--fs-xs); color: var(--ink-2); }
.shot .pill { position: absolute; top: 8px; left: 8px; }
.shot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 9px 8px; background: linear-gradient(transparent, #000c); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot .err-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; background: #2a0b07d9; color: #ffc1b9; font-size: var(--fs-2xs); line-height: 1.3; }
.errs { display: flex; flex-direction: column; gap: 10px; }
.err-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--fs-md); }
.err-row .why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.err-row .cnt { font-weight: 700; color: var(--bad); white-space: nowrap; }
.err-row .cnt span { margin-left: 6px; font-weight: 500; color: var(--muted); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tool { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-md); font-weight: 600; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini { padding: 14px; border-radius: 14px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line); }
.mini b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.mini small { color: var(--muted); font-weight: 600; }
.more { display: flex; justify-content: center; margin-top: 18px; }
.empty { padding: 14px 0 4px; color: var(--muted); font-size: var(--fs-md); max-width: 52ch; }

.river { height: 150px; }
.river svg { display: block; width: 100%; height: 100%; overflow: visible; }
.river .tick { stroke: #0b0c088c; stroke-width: 1.5; }
.steps-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 14px; text-align: center; }
.steps-row b { display: block; font-size: var(--fs-2xl); font-weight: 600; }
.steps-row span { display: block; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; }
.steps-row small { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--muted); }
.steps-row .worst small { color: var(--warn); font-weight: 700; }
.verdict { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: #f6d488; font-size: var(--fs-md); font-weight: 600; }
.verdict .ico { color: var(--warn); }

.sk { position: relative; overflow: hidden; border-radius: 12px; background: var(--card-3); }
.sk::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, #ffffff0d, transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.fail { display: grid; place-items: center; gap: 12px; padding: 60px 20px; text-align: center; color: var(--ink-2); }
.fail .ico { width: 28px; height: 28px; color: var(--bad); }
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); padding: 30px 28px; border-radius: var(--r-xl); }
.login-card .mark { margin-bottom: 20px; }
.login-card h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.login-card p { color: var(--muted); margin-bottom: 22px; }
.field { display: grid; gap: 7px; margin-bottom: 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.field input { height: 46px; padding: 0 14px; border: 0; border-radius: 13px; background: var(--glass-2); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--ink); outline: 0; }
.field input:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.login-card .btn { width: 100%; height: 46px; }
.login-card .btn + .btn { margin-top: 10px; }
.form-err { margin: -4px 0 14px; color: var(--bad); font-size: var(--fs-md); font-weight: 600; }
.login-lang { position: fixed; top: 16px; right: 16px; }

/* motion support (GSAP drives the timing; these are the static pieces) */
.word { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ch { display: inline-block; will-change: transform; }
.has-pill { position: relative; }
.pill-thumb {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: #ffffff29; box-shadow: inset 0 1px #ffffff40, 0 0 0 1px #ffffff0f;
}
.snav > .pill-thumb { background: #ffffff1a; }
.has-pill > button, .has-pill > a, .has-pill > div { position: relative; z-index: 1; }
.seg.has-pill button[aria-pressed='true'], .snav.has-pill .snav__item[aria-current='page'] { background: none; box-shadow: none; }
.btn, .ibtn, .chip, .seg button, .snav__item, .me, .tabbar a { transition-property: background-color, color, opacity, transform; transition-duration: .2s, .2s, .2s, .16s; transition-timing-function: ease, ease, ease, cubic-bezier(.23, 1, .32, 1); }
.btn:active, .ibtn:active, .chip:active, .seg button:active, .tabbar a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .queue__row:hover .btn { transform: translateX(-2px); }
}

.tabbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .river.reveal svg { animation: reveal 1.1s var(--ease) both; }
  @keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media (max-width: 1279px) {
  .hero, .live-pane { grid-column: 1 / -1; }
  .live-pane { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .live-pane .chead, .live-pane__goal { grid-column: 1 / -1; }
  .live-pane__latest { grid-area: 2 / 2 / span 2; padding-top: 0; }
  .funnel { border: 0; padding: 0; justify-content: center; }
  .queue, .best { grid-column: 1 / -1; }
  .low, .feed { grid-column: span 6; }
  .insight { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
  .insight .btn { margin-top: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s8, .s6, .s4 { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .me__text, .me > .ico, .live { display: none; }
  .searchpill { width: 44px; justify-content: center; padding: 0; }
  .searchpill input, .searchpill .kbd { display: none; }
}
@media (max-width: 999px) {
  .queue__row { grid-template-columns: 48px minmax(0, 1fr) auto auto; }
  .queue__steps, .queue__items { display: none; }
}
@media (max-width: 860px) {
  .side { display: none; }
  .main { margin-left: 0; padding: 12px 12px calc(108px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: flex; justify-content: space-around; gap: 4px; padding: 8px; border-radius: 22px; }
  .tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 15px; font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
  .tabbar a[aria-current='page'] { color: var(--ink); background: #ffffff1a; box-shadow: inset 0 1px #ffffff40; }
  .tabbar a[aria-current='page'] .ico { color: var(--accent); }
  .tabbar .snav__count { position: absolute; top: 2px; left: 50%; margin-left: 6px; min-width: 18px; height: 16px; padding: 0 5px; }
}
@media (max-width: 760px) {
  .top__bar { gap: 6px; min-height: 58px; padding: 8px; border-radius: 18px; }
  .crumbs > span:not(.demo-tag), .crumbs > .ico, .top__new span { display: none; }
  .tools .ibtn--theme { display: none; }
  .demo-tag { margin-left: 0; padding: 0 8px; }
  .demo-tag .ico { display: none; }
  .crumbs:has(.demo-tag) > b { display: none; }
  .me { padding: 0; height: 42px; }
  .ibtn { width: 42px; height: 42px; border-radius: 13px; }
  .searchpill { width: 42px; height: 42px; border-radius: 13px; }
  .tools .seg button { padding: 0 8px; }
  .phead { margin: 12px 0 16px; }
  .phead__actions { width: 100%; }
  .phead__actions > .btn { flex: 1; }
  .card { border-radius: 18px; padding: 16px; }
  .card--flush { padding: 0; }
  .card--flush .chead { padding: 14px 16px 0; }
  .grid, .kpis { gap: 12px; }
  .kpi { min-height: 112px; padding: 14px; }
  .kpi__value { font-size: 18px; }
  .kpi__ico { width: 30px; height: 30px; border-radius: 10px; }
  .kpi__foot .spark { width: 56px; }
  .kpi__foot > span:not(.delta) { display: none; }
  .hero { padding: 16px; }
  .hero__value { font-size: 30px; }
  .hero__head .seg { width: 100%; }
  .hero__head .seg button { flex: 1; justify-content: center; padding: 0 6px; }
  .hero__chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .stack-chart { height: 230px; }
  .live-pane { display: flex; }
  .low, .feed { grid-column: 1 / -1; }
  .insight { display: flex; }
  .queue__row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 8px; }
  .queue__id { display: none; }
  .queue__row .btn { min-width: 0; }
  .river { height: 100px; }
  .river .tick { display: none; }
  .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
  th:first-child, td:first-child { padding-left: 14px; }
  .pop { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; }
}

/* ── light theme: the reference's light glass, in Tezly's colours ───── */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #eef0e4;
  --wash: linear-gradient(160deg, #eef6d2 0%, #f3f4e4 34%, #f7eed6 66%, #e2efe9 100%);
  --orb-1: #c4ec34a8;   /* lime, top left */
  --orb-2: #7fd1b999;   /* sage, top right */
  --orb-3: #ffc24ec7;   /* amber, bottom right */
  --orb-4: #e6d24fb8;   /* gold, bottom left */
  --orb-5: #d7ff3d75;
  --orb-6: #ffb8545c;
  --band: #ffffff52;
  --glass: #ffffff33;
  --glass-2: #ffffff57;
  --glass-3: #ffffff94;
  --glass-solid: #fbfcf4e6;
  --edge: #fffffff2;
  --edge-2: #ffffff59;
  --sheen: #ffffff57;
  --catch: #ffffff57;
  --pool: #ffffff29;
  --lift: 0 1px 1px #2a32140d, 0 18px 40px -22px #2a32145c;
  --card: #fbfcf6;
  --card-3: #2a321412;
  --ink: #15170f;
  --ink-2: #34362c;
  --muted: #5d6052;
  --line: #2a321417;
  --line-2: #2a32142b;
  --accent: #d7ff3d;
  --accent-ink: #12140a;
  --accent-soft: #9cc4002e;
  --accent-text: #4f6600;
  --ch-1: #c6f02a;
  --ch-2: #f0b437;
  --ch-3: #4fb898;
  --ch-4: #3a4524;
  --good: #3f7a00; --good-soft: #5e9a0024;
  --warn: #8a5f00; --warn-soft: #d6961630;
  --bad: #b22b2a;  --bad-soft: #c432301c;
}
:root[data-theme='light'] body::after { opacity: .09; }
:root[data-theme='light'] :is(.card, .kpi, .side, .top__bar, .tabbar, .pop) {
  box-shadow: inset 0 1px 0 #ffffffe6, inset 0 0 22px #ffffff47, inset 0 -18px 30px -24px #ffffffb3, 0 0 0 1px var(--line), var(--lift);
}
:root[data-theme='light'] :is(.card, .kpi)::before { background: linear-gradient(#ffffff57, #fff0 38%); }
:root[data-theme='light'] :is(.btn, .ibtn, .chip, .seg, .searchpill, .live) {
  box-shadow: inset 0 1px 0 var(--edge), inset 0 0 0 1px var(--edge-2), 0 0 0 1px var(--line), 0 2px 6px -3px #2a321424;
}
:root[data-theme='light'] .seg button[aria-pressed='true'],
:root[data-theme='light'] .pill-thumb {
  background: #ffffffc7; box-shadow: inset 0 1px #fff, 0 0 0 1px #ffffff80, 0 6px 16px -8px #2a321459;
}
:root[data-theme='light'] .snav__item[aria-current='page'],
:root[data-theme='light'] .snav > .pill-thumb,
:root[data-theme='light'] .tabbar a[aria-current='page'] {
  background: var(--glass-3); box-shadow: inset 0 1px 0 var(--edge), 0 0 0 1px var(--line), 0 8px 18px -12px #2a321473;
}
:root[data-theme='light'] .snav__item[aria-current='page'] > .ico,
:root[data-theme='light'] .tabbar a[aria-current='page'] .ico { color: var(--accent-text); }
:root[data-theme='light'] .seg.has-pill button[aria-pressed='true'] { background: none; box-shadow: none; }
:root[data-theme='light'] .kpis > .kpi:nth-child(4) .kpi__ico { color: #f5f4ed; }
:root[data-theme='light'] .verdict { color: #6b4a00; }
:root[data-theme='light'] .insight { background-image: linear-gradient(150deg, #c6f02a3d, transparent 60%) !important; }
:root[data-theme='light'] .area__dot { stroke: var(--card); }
:root[data-theme='light'] .river .tick { stroke: #ffffffb3; }
:root[data-theme='light'] .shot { background: #2a32141a; }
:root[data-theme='light'] * { scrollbar-color: #2a321433 transparent; }

/* theme switch: the new theme opens as a circle from the button */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ── buyer call to action (demo build only) ─────────────────────────── */
.promo {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; overflow: hidden;
  color: #12140a; text-decoration: none;
  background: radial-gradient(120% 90% at 100% 0%, #f2c14e 0%, transparent 55%), linear-gradient(160deg, #eaff8f, #c8f02e);
  box-shadow: inset 0 1px 0 #ffffffa6, 0 14px 30px -14px #9cc400, 0 0 0 1px #00000010;
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s;
}
.promo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #ffffffa8 50%, transparent 62%);
  transform: translateX(-130%); animation: sweep 7s cubic-bezier(.65, 0, .35, 1) 2.2s infinite;
}
.promo__badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; height: 22px; padding: 0 8px; border-radius: 99px; background: #12140a; color: #d7ff3d; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.promo__badge .ico { width: 12px; height: 12px; }
.promo b { font-size: 15px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.promo small { font-size: 12px; line-height: 1.35; color: #2c3214; font-weight: 600; }
.promo__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 4px; height: 36px; border-radius: 12px;
  background: #12140a; color: #f5f4ed; font-size: 13px; font-weight: 700;
}
.promo__btn .ico:last-child { transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.promo:active { transform: scale(.98); }

.cta-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px 0 8px; border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, #ecff9c, var(--accent) 62%); color: #12140a; text-decoration: none;
  font-size: 14.5px; font-weight: 800; letter-spacing: -.005em; white-space: nowrap;
  box-shadow: inset 0 1px 0 #ffffffb0, inset 0 -1px 0 #0000001f, 0 16px 36px -12px #9cc400, 0 0 0 1px #0000001a;
  animation: ctaPulse 2.8s cubic-bezier(.23, 1, .32, 1) 2s infinite;
}
.cta-float::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 36%, #ffffffc4 50%, transparent 64%);
  transform: translateX(-130%); animation: sweep 6s cubic-bezier(.65, 0, .35, 1) 2.6s infinite;
}
.cta-float__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #12140a; color: #d7ff3d; flex: none; }
.cta-float__ico .ico { width: 19px; height: 19px; transform: translateX(-1px); }
.cta-float__arr { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.cta-float:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cta-float:hover .cta-float__arr, .promo:hover .promo__btn .ico:last-child { transform: translateX(3px); }
  .promo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #ffffffa6, 0 18px 34px -14px #9cc400, 0 0 0 1px #00000010; }
}
@keyframes sweep { 0% { transform: translateX(-130%); } 14%, 100% { transform: translateX(130%); } }
@keyframes ctaPulse {
  0% { box-shadow: inset 0 1px 0 #ffffffb0, inset 0 -1px 0 #0000001f, 0 16px 36px -12px #9cc400, 0 0 0 1px #0000001a, 0 0 0 0 #d7ff3d99; }
  60%, 100% { box-shadow: inset 0 1px 0 #ffffffb0, inset 0 -1px 0 #0000001f, 0 16px 36px -12px #9cc400, 0 0 0 1px #0000001a, 0 0 0 16px #d7ff3d00; }
}
@media (prefers-reduced-motion: reduce) { .cta-float, .cta-float::after, .promo::after { animation: none; } }
@media (max-width: 860px) {
  .cta-float { right: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); height: 48px; padding: 0 14px 0 6px; font-size: 13.5px; }
  .cta-float__ico { width: 36px; height: 36px; }
  .main { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
}