/* =========================================================================
   GiftDeals — Amazon gift-card coupons on one board.

   "Lagoon": a deep teal with a gold ribbon. Teal because the board is about
   money coming back (it reads calm and cool next to the stores' own loud
   colours, which every tile carries), gold because every gift card here is
   drawn as a wrapped present - the ribbon and bow are the one warm thing on
   the page, and they also mark the coupon. Neither hue is used by another
   suite app (see per-app palette memory).

   Tokens, radii, shadows and the chip anatomy are the suite's Material-3 set
   (AmazonGold / Card Vault); the tile is Gift Card Vault's: the store's two-
   tone band with a ribbon-and-bow illustration, a glyph chip, the headline as
   the title, and a white strip straddling header and body.
   ========================================================================= */

:root {
  --m3-primary:        #0f766e;   /* 5.4:1 on white */
  --m3-primary-soft:   #14b8a6;
  --m3-on-primary:     #ffffff;
  --m3-primary-container:#d9f3ee;
  --m3-surface:        #eef4f3;
  --m3-surface-1:      #ffffff;
  --m3-surface-2:      #f3f7f6;
  --m3-surface-3:      #e4eceb;
  --m3-on-surface:     #10201e;
  --m3-on-surface-var: #51625f;
  --m3-outline:        #8a9a97;
  --m3-outline-var:    #d6e1df;
  --m3-error:          #c0262d;
  --gold:              #f2b631;   /* the ribbon */
  --gold-ink:          #94600a;   /* gold that has to carry small text: 4.6:1 */
  --gold-soft:         #fdf1d4;
  --m3-ok:             #15803d;
  --m3-ok-soft:        #e6f4ea;
  --m3-warn:           #b45309;
  --brand-grad:        linear-gradient(140deg, #5eead4 0%, #14b8a6 42%, #0f766e 100%);
  --fill-grad:         linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  --gold-grad:         linear-gradient(135deg, #ffd56a 0%, #f2b631 55%, #d9930f 100%);
  --foil-grad:         linear-gradient(100deg, #0f766e 0%, #14b8a6 40%, #9ff3e3 52%, #14b8a6 64%, #0f766e 100%);
  --brand-glow:        rgba(20,184,166,.38);
  --bg-grad:           radial-gradient(1100px 560px at 86% -12%, #d9f3ee 0%, #eef4f3 58%);
  --shadow-1: 0 1px 2px rgba(16,32,30,.08), 0 1px 3px rgba(16,32,30,.06);
  --shadow-2: 0 2px 6px rgba(16,32,30,.08), 0 8px 22px rgba(16,32,30,.09);
  --shadow-3: 0 14px 36px rgba(16,32,30,.16);
  --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
  --topbar-h: 68px;
  --font: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  --m3-primary:        #2dd4bf;
  --m3-primary-soft:   #14b8a6;
  --m3-on-primary:     #042f2b;
  --m3-primary-container:#0d3a35;
  --m3-surface:        #0b1716;
  --m3-surface-1:      #12211f;
  --m3-surface-2:      #182b29;
  --m3-surface-3:      #203735;
  --m3-on-surface:     #e6f2f0;
  --m3-on-surface-var: #9db3af;
  --m3-outline:        #6f8784;
  --m3-outline-var:    #24403c;
  --m3-error:          #ff8a8a;
  --gold:              #f5c451;
  --gold-ink:          #f5c451;
  --gold-soft:         #3a2d10;
  --m3-ok:             #4ade80;
  --m3-ok-soft:        #12301d;
  --m3-warn:           #f0a64a;
  --fill-grad:         linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
  --brand-glow:        rgba(45,212,191,.30);
  --bg-grad:           radial-gradient(1100px 560px at 86% -12%, #0f3330 0%, #0b1716 60%);
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 4px 14px rgba(0,0,0,.5);
  --shadow-3: 0 12px 32px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-feature-settings: "cv11", "ss01";
  background: var(--bg-grad); background-color: var(--m3-surface);
  color: var(--m3-on-surface); -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
[hidden] { display: none !important; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Topbar — the suite's: a 5% wash of the primary, a tinted hairline.
   ========================================================================= */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--m3-surface-1) 88%, var(--m3-primary) 5%);
  backdrop-filter: saturate(1.35) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--m3-primary) 18%, var(--m3-outline-var));
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 6px 18px -12px var(--brand-glow);
}
html[data-theme="dark"] .topbar { box-shadow: 0 6px 20px -14px #000; }
.topbar-inner {
  max-width: 1240px; margin: 0 auto; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center; background: var(--brand-grad);
  background-size: 160% 160%; animation: sheen 9s ease-in-out infinite;
  box-shadow: 0 6px 16px -6px var(--brand-glow), inset 0 0 0 1px rgba(255,255,255,.22);
}
@keyframes sheen { 0%,100% { background-position: 0% 30%; } 50% { background-position: 100% 70%; } }
.brand-mark .mk-lid { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: 12px 11px; }
.brand-mark .mk-bow { transition: transform .4s cubic-bezier(.34,1.56,.64,1); transform-origin: 12px 8px; }
.brand:hover .mk-lid { transform: translateY(-2.4px) rotate(-7deg); }
.brand:hover .mk-bow { transform: scale(1.18); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-tag { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--m3-on-surface-var); }
.brand-name { font-size: 21px; font-weight: 850; letter-spacing: -.6px; }
.brand-name em { font-style: normal; background: var(--foil-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s linear infinite; }
@keyframes foil { to { background-position: -200% 0; } }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1); color: var(--m3-on-surface-var);
  transition: transform .14s, color .15s, border-color .15s, box-shadow .15s;
}
.icon-btn:hover { transform: translateY(-1px); color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 40%, var(--m3-outline-var)); box-shadow: var(--shadow-1); }

.status { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); font-size: 12px; font-weight: 700; color: var(--m3-on-surface-var); }
.status-ring { position: relative; width: 32px; height: 32px; display: grid; place-items: center; }
.status-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.status-ring .sr-bg { fill: none; stroke: var(--m3-surface-3); stroke-width: 3; }
.status-ring .sr-fg { fill: none; stroke: var(--m3-primary); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 88; stroke-dashoffset: 0; transition: stroke-dashoffset .6s; }
.status-ring b { position: relative; font-size: 10px; font-weight: 850; color: var(--m3-on-surface); }
.status-text { display: inline-flex; align-items: center; gap: 6px; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m3-ok); box-shadow: 0 0 0 0 rgba(21,128,61,.5); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(21,128,61,.45); } 80%,100% { box-shadow: 0 0 0 7px rgba(21,128,61,0); } }

/* Refresh: the one primary control in the header, so it gets the fill. While
   a read runs it turns into its own progress bar. */
.refresh-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px 0 12px; border-radius: 999px; border: 0;
  background: var(--fill-grad); color: #fff; font: 750 13px var(--font); letter-spacing: .1px;
  box-shadow: 0 6px 14px -6px var(--brand-glow); transition: transform .14s, filter .15s, box-shadow .2s;
}
.refresh-btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 9px 18px -7px var(--brand-glow); }
.refresh-btn:active { transform: translateY(0) scale(.98); }
.refresh-btn .rf-ico { transition: transform .5s cubic-bezier(.22,1,.36,1); position: relative; z-index: 1; }
.refresh-btn:hover .rf-ico { transform: rotate(140deg); }
.refresh-btn .rf-lbl { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
.refresh-btn .rf-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.22); transition: width .5s; }
.refresh-btn.is-busy { cursor: progress; }
.refresh-btn.is-busy .rf-ico { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.refresh-btn.is-done .rf-ico { animation: pop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 40% { transform: scale(1.35) rotate(200deg); } }

@media (max-width: 560px) {
  .brand-tag, .status-text, .rf-lbl { display: none; }
  .refresh-btn { width: 38px; padding: 0; justify-content: center; }
  .status { padding: 3px; }
  .topbar-inner { padding: 0 14px; }
}

/* =========================================================================
   Asleep — BlinkDeal's wheel, wrapped in a ribbon.
   ========================================================================= */
.locked {
  min-height: calc(100vh - var(--topbar-h) - 60px);
  display: grid; place-items: center; align-content: center; gap: 8px; padding: 20px; overflow: hidden;
}
.wheel-stage { position: relative; width: min(56vh, 78vw); height: min(56vh, 78vw); display: grid; place-items: center; }
.wheel { position: relative; width: 100%; height: 100%; }
.wheel svg { width: 100%; height: 100%; display: block; }
.wheel .rim { fill: none; stroke: var(--m3-outline-var); stroke-width: 2; }
.wheel .inner { fill: var(--m3-surface); stroke: var(--m3-outline-var); stroke-width: 1.5; }
.wheel .seg { fill: url(#seg); opacity: .14; }
.wheel .seg:nth-child(odd) { opacity: .28; }
.wheel .tick { stroke: var(--m3-primary); stroke-width: 2; opacity: .32; }
.wheel .ribbon { fill: var(--gold); opacity: .26; }
.wheel-spin { transform-origin: 200px 200px; animation: turn 30s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
.hub {
  position: absolute; inset: 0; margin: auto; width: 27%; height: 27%; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-1); color: var(--m3-on-surface-var); box-shadow: var(--shadow-2);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s, color .2s;
}
.hub::after { /* the bow on the hub */
  content: ""; position: absolute; top: -9%; left: 50%; width: 46%; height: 26%; transform: translateX(-50%);
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M32 22C26 6 8 4 8 16c0 8 14 7 24 6zm0 0c6-16 24-18 24-6 0 8-14 7-24 6z' fill='none' stroke='%23f2b631' stroke-width='5'/%3E%3Ccircle cx='32' cy='22' r='5' fill='%23f2b631'/%3E%3C/svg%3E");
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.hub:hover::after { transform: translateX(-50%) scale(1.15) rotate(-4deg); }
.hub svg { width: 34%; height: 34%; }
.hub:hover { transform: scale(1.05); color: var(--m3-primary); box-shadow: var(--shadow-3); }
.hub:active { transform: scale(.97); }
.hub:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 4px; }
.hub .shackle { transform-box: fill-box; transform-origin: bottom center; transition: transform .25s; }
.hub:hover .shackle { transform: translateY(-1px) rotate(-8deg); }
.locked-words { text-align: center; max-width: 44ch; }
.locked-words .lock-title { margin: 0; font-size: clamp(30px, 6vw, 52px); font-weight: 850; letter-spacing: -1.4px; line-height: 1.05; }
.locked-words .lock-title b { background: var(--foil-grad); background-size: 200% 100%; -webkit-background-clip: text;
  background-clip: text; color: transparent; animation: foil 7s linear infinite; }
.locked-words p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--m3-on-surface-var); }
.locked-words .resting-meta { font-size: 12px; opacity: .85; }
.locked.working .wheel-spin { animation-duration: 1.2s; }
.locked.working .hub { color: var(--m3-primary); border-color: var(--m3-primary); }
.locked.working .hub .shackle { transform: translateY(-4px) rotate(-100deg); opacity: .5; }
.read-meter { margin: 14px auto 0; width: min(260px, 70vw); height: 6px; border-radius: 99px; background: var(--m3-surface-3); overflow: hidden; }
.read-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--fill-grad); transition: width .5s; }

/* The key */
.scrim {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--m3-on-surface) 45%, transparent); backdrop-filter: blur(4px);
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.keycard {
  position: relative; width: min(360px, 100%); background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 30px 24px 20px; text-align: center;
  animation: rise .3s cubic-bezier(.22,1,.36,1) both;
}
.kc-bow { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 64px; height: 40px; }
.kc-bow svg { width: 100%; height: 100%; }
.kc-bow path { fill: none; stroke: var(--gold); stroke-width: 5; }
.kc-bow circle { fill: var(--gold); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; } }
.keycard h2 { margin: 0 0 6px; font-size: 19px; font-weight: 850; letter-spacing: -.3px; }
.keycard p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--m3-on-surface-var); }
.key-in {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-2); color: var(--m3-on-surface); font: 700 16px var(--font); letter-spacing: 2px; text-align: center;
}
.key-in:focus-visible { outline: 2px solid var(--m3-primary); outline-offset: 1px; }
.keycard.wrong { animation: shake .32s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.key-err { margin: 8px 0 0 !important; color: var(--m3-error) !important; font-weight: 700; }
.key-row { display: flex; gap: 8px; margin-top: 16px; }
.key-row button { flex: 1; padding: 11px 14px; border-radius: 999px; font: 750 13.5px var(--font); border: 1px solid var(--m3-outline-var); transition: transform .12s, filter .15s; }
.key-cancel { background: var(--m3-surface-2); color: var(--m3-on-surface-var); }
.key-go { border-color: transparent !important; color: #fff; background: var(--fill-grad); box-shadow: 0 5px 13px -4px var(--brand-glow); }
.key-row button:hover { transform: translateY(-1px); }

/* =========================================================================
   Live board
   ========================================================================= */
.live { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 20px 10px; flex: 1; }

/* The read running behind the board */
.read-strip {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  padding: 11px 14px 13px; border-radius: var(--r-md); font-size: 13px; font-weight: 600; color: var(--m3-on-surface-var);
  background: var(--m3-primary-container); border: 1px solid color-mix(in srgb, var(--m3-primary) 25%, transparent);
  animation: rise .3s cubic-bezier(.22,1,.36,1) both;
}
.read-strip b { color: var(--m3-primary); font-variant-numeric: tabular-nums; }
.rs-spin { display: grid; color: var(--m3-primary); animation: spin 1.1s linear infinite; }
.rs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--m3-primary) 14%, transparent); }
.rs-bar i { display: block; height: 100%; width: 0; background: var(--fill-grad); transition: width .6s; }

/* Hero — Gift Card Vault's value card, in Lagoon */
.hero-card {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 20px 22px 18px; color: #fff;
  background: radial-gradient(600px 240px at 0% 0%, rgba(255,255,255,.18), transparent 60%), var(--brand-grad);
  box-shadow: 0 18px 40px -18px var(--brand-glow), var(--shadow-2);
}
.hero-ribbon { position: absolute; top: 0; right: 0; width: 220px; height: 160px; pointer-events: none; }
.hero-card > *:not(.hero-ribbon) { position: relative; }
.hc-label { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.hc-amount { font-size: clamp(28px, 4.6vw, 40px); font-weight: 900; letter-spacing: -1px; line-height: 1.05; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.hc-amount small { font-size: .5em; font-weight: 800; letter-spacing: -.2px; opacity: .92; margin-left: 6px; }
.hc-sub { font-size: 13px; font-weight: 650; opacity: .92; max-width: 60ch; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px; }
.kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.18); color: #fff;
  backdrop-filter: blur(4px); transition: transform .15s, background .15s;
}
button.kpi:hover { transform: translateY(-2px); background: rgba(255,255,255,.24); }
.kpi b { font-size: 21px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11px; font-weight: 700; opacity: .9; }
.kpi.is-gold b { color: #ffe08a; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(3, 1fr); } .kpi:nth-child(n+4) { display: none; } .hero-ribbon { opacity: .6; } }

/* Tabs — a segmented rail with a sliding pill */
.tabs {
  position: relative; display: flex; gap: 4px; margin: 18px 0 12px; padding: 4px; width: max-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; border-radius: 999px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); box-shadow: var(--shadow-1);
}
.tabs::-webkit-scrollbar { display: none; }
.tab-pill { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--fill-grad);
  box-shadow: 0 5px 12px -5px var(--brand-glow); transition: transform .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1); }
.tab {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; color: var(--m3-on-surface-var); padding: 9px 15px; border-radius: 999px;
  font: 750 13px var(--font); white-space: nowrap; transition: color .2s;
}
.tab:hover { color: var(--m3-on-surface); }
.tab.is-on { color: #fff; }
.tab .ct { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--m3-surface-3); color: var(--m3-on-surface-var); transition: background .2s, color .2s; }
.tab.is-on .ct { background: rgba(255,255,255,.24); color: #fff; }

/* Filters */
.filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.search, .amount, .sel, .dir {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); color: var(--m3-on-surface-var);
  transition: border-color .15s, box-shadow .15s;
}
.search { flex: 1 1 260px; }
.search:focus-within, .amount:focus-within, .sel:focus-within { border-color: var(--m3-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m3-primary) 16%, transparent); }
.search input, .amount input { border: 0; outline: 0; background: transparent; color: var(--m3-on-surface); font: 600 14px var(--font); width: 100%; min-width: 0; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.amount { flex: 0 1 200px; }
.amount span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.amount b { color: var(--m3-on-surface); }
.amount input::-webkit-inner-spin-button { display: none; }
.sortbox { display: inline-flex; gap: 6px; }
.sel-k { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sel select { border: 0; outline: 0; background: transparent; color: var(--m3-on-surface); font: 700 13.5px var(--font); cursor: pointer; padding-right: 2px; }
.sel select option { background: var(--m3-surface-1); }
.dir { font: 700 12.5px var(--font); cursor: pointer; }
.dir:hover { color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 40%, var(--m3-outline-var)); }
.dir svg path { transition: opacity .2s; }
.dir .d-up { opacity: .35; }
.dir.asc .d-up { opacity: 1; } .dir.asc .d-dn { opacity: .35; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); }
.seg button { border: 0; background: transparent; color: var(--m3-on-surface-var); padding: 6px 11px; border-radius: 999px; font: 750 12.5px var(--font); display: inline-grid; place-items: center; transition: background .15s, color .15s; }
.seg button:hover { color: var(--m3-on-surface); }
.seg button.is-on { background: var(--fill-grad); color: #fff; box-shadow: 0 4px 10px -5px var(--brand-glow); }
.view button { padding: 7px 10px; }
.f-k { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--m3-on-surface-var); margin-right: 2px; }
.chips-row .f-k:not(:first-child) { margin-left: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chip anatomy: pill + glyph badge + count. Selected = TONAL, never the
   gradient - six selected brands must not out-shout the board. */
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 5px; border-radius: 999px;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1); color: var(--m3-on-surface);
  font: 700 12.5px var(--font); transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.chip.plain { padding-left: 11px; }
.chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--m3-primary) 35%, var(--m3-outline-var)); }
.chip .g {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 900; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--gc-a), var(--gc-b)); color: var(--gc-x); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.chip .n { font-size: 10.5px; font-weight: 800; color: var(--m3-on-surface-var); padding: 1px 6px; border-radius: 99px; background: var(--m3-surface-3); }
.chip.is-on { background: var(--m3-primary-container); color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 32%, transparent); }
.chip.is-on .n { background: color-mix(in srgb, var(--m3-primary) 14%, transparent); color: var(--m3-primary); }
.chip.is-on::after { content: ""; width: 7px; height: 4px; margin-left: -1px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-1px); }
.chip.more { color: var(--m3-primary); border-style: dashed; }

.tally { margin: 10px 2px 12px; font-size: 13px; color: var(--m3-on-surface-var); font-weight: 600; }
.tally b { color: var(--m3-on-surface); }

/* =========================================================================
   The gift card tile — Gift Card Vault's anatomy
   ========================================================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: 14px; }
.gtile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); box-shadow: var(--shadow-1);
  transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  animation: tileIn .45s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes tileIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.gtile:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.grid.settled .gtile { animation: none; }
.gtile.is-dim { opacity: .62; }
.gt-head {
  position: relative; overflow: hidden; padding: 12px 12px 40px 14px; color: var(--gc-fg, #fff);
  background: linear-gradient(135deg, var(--gc-a), var(--gc-b));
}
.gt-head .illus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gt-head .illus .bow { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.gtile:hover .gt-head .illus .bow { transform: scale(1.14) rotate(-6deg); }
.gt-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gt-store { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.gt-store .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-store .glyph {
  flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.2); color: var(--gc-fg, #fff); font-size: 13px; font-weight: 900; letter-spacing: -.02em; text-transform: none;
  backdrop-filter: blur(2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
}
.gt-pills { display: inline-flex; gap: 5px; flex: none; }
.gt-pill { font-size: 9.5px; font-weight: 850; letter-spacing: .5px; text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,.2); color: var(--gc-fg, #fff); backdrop-filter: blur(2px); white-space: nowrap; }
.gt-pill.new { background: #fff; color: var(--m3-primary); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px rgba(255,255,255,.28); } }
.gt-pill.warn { background: #ffe7a8; color: #7a4d00; }
.gt-title { position: relative; display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; color: var(--gc-fg, #fff); }
.gt-title b { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.gt-title span { font-size: 13px; font-weight: 800; opacity: .92; }
.gt-title.none b { font-size: 20px; letter-spacing: -.3px; opacity: .9; }
.gt-sub { position: relative; margin-top: 4px; font-size: 12.5px; font-weight: 650; opacity: .9; color: var(--gc-fg, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the denomination strip, straddling header and body */
.gt-strip {
  position: relative; z-index: 2; margin: -26px 12px 0; padding: 6px; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); border-radius: 14px;
  box-shadow: 0 6px 16px -8px rgba(16,32,30,.32); scroll-snap-type: x proximity;
}
.gt-strip::-webkit-scrollbar { display: none; }
.dn {
  flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px;
  padding: 5px 9px; border-radius: 10px; border: 1px solid transparent; background: var(--m3-surface-2); color: var(--m3-on-surface);
  font: 800 12.5px var(--font); font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, transform .12s;
}
.dn small { font-size: 10px; font-weight: 750; color: var(--m3-ok); }
.dn small.flat { color: var(--m3-on-surface-var); }
.dn small.up { color: var(--m3-error); }
.dn:hover { transform: translateY(-1px); border-color: var(--m3-outline-var); }
.dn.is-on { background: var(--m3-primary-container); border-color: color-mix(in srgb, var(--m3-primary) 40%, transparent); color: var(--m3-primary); }
.dn.custom { color: var(--m3-on-surface-var); font-weight: 700; }

.gt-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 11px 14px 4px; }
.gt-body .k { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--m3-on-surface-var); margin-bottom: 2px; }
.gt-body .v { font-size: 15px; font-weight: 800; color: var(--m3-on-surface); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gt-body .v.ok { color: var(--m3-ok); }
.gt-body .v.bad { color: var(--m3-error); }
.gt-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px 0; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 750; padding: 4px 9px; border-radius: 999px;
  background: var(--m3-surface-2); color: var(--m3-on-surface-var); border: 1px solid var(--m3-outline-var); }
.tag.coupon { background: var(--gold-soft); color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.tag.coupon::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-3a2 2 0 0 0 0-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.tag.offer { background: var(--m3-primary-container); color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 25%, transparent); }
.tag.warn { background: #fff4dc; color: #8a5300; border-color: #f3d59a; }
html[data-theme="dark"] .tag.warn { background: #3a2a10; color: #f5c451; border-color: #5a4318; }
.gt-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 14px; }
.gt-meta { font-size: 11.5px; color: var(--m3-on-surface-var); font-weight: 600; }
.buy {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font: 800 12.5px var(--font); color: var(--m3-primary); background: var(--m3-primary-container);
  border: 1px solid color-mix(in srgb, var(--m3-primary) 28%, transparent); transition: transform .12s, filter .15s, box-shadow .15s;
}
.buy:hover { transform: translateY(-1px); }
.buy.hot { color: #fff; background: var(--fill-grad); border-color: transparent; box-shadow: 0 6px 14px -6px var(--brand-glow); }
.buy.hot:hover { filter: brightness(1.07); }
.buy svg { transition: transform .2s; }
.buy:hover svg { transform: translate(2px, -2px); }

/* Table view */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1); box-shadow: var(--shadow-1); }
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th { position: sticky; top: 0; text-align: left; padding: 11px 12px; font-size: 10.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase;
  color: var(--m3-on-surface-var); background: var(--m3-surface-2); border-bottom: 1px solid var(--m3-outline-var); white-space: nowrap; user-select: none; }
.dtable th[data-sort] { cursor: pointer; }
.dtable th[data-sort]:hover { color: var(--m3-primary); }
.dtable th.sorted { color: var(--m3-primary); }
.dtable th.sorted::after { content: " ↓"; }
.dtable th.sorted.asc::after { content: " ↑"; }
.dtable td { padding: 10px 12px; border-bottom: 1px solid var(--m3-outline-var); vertical-align: middle; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background .12s; }
.dtable tbody tr:hover { background: var(--m3-surface-2); }
.dtable .r { text-align: right; font-variant-numeric: tabular-nums; }
.dtable .b { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; }
.dtable .b .g { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 900; flex: none;
  background: linear-gradient(135deg, var(--gc-a), var(--gc-b)); color: var(--gc-x); }
.dtable .pct { font-weight: 900; font-size: 15px; color: var(--m3-ok); }
.dtable .pct.zero { color: var(--m3-on-surface-var); font-weight: 700; }
.dtable .pct.up { color: var(--m3-error); }
.dtable .muted { color: var(--m3-on-surface-var); font-size: 12.5px; }
.dtable .buy { height: 30px; padding: 0 11px; }
@media (max-width: 760px) { .hide-s { display: none; } }

.empty { text-align: center; padding: 50px 20px; color: var(--m3-on-surface-var); }
.empty svg { color: var(--m3-outline); }
.empty p { margin: 10px 0 0; }

/* Footer + credit */
.foot { max-width: 1240px; width: 100%; margin: 0 auto; padding: 18px 20px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--m3-on-surface-var); }
.foot .right { display: inline-flex; align-items: center; gap: 7px; }
.foot img { height: 18px; width: auto; border-radius: 4px; }
.foot .handle { color: var(--m3-primary); font-weight: 800; text-decoration: none; }
.foot .handle:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .live { padding: 14px 14px 8px; }
  .grid { grid-template-columns: 1fr; }
  .sortbox { flex: 1; } .sel { flex: 1; }
  .amount { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================================
   Brand picker — one button and a searchable A–Z list, instead of a wall of
   225 chips. Picked brands sit beside the button as removable chips.
   ========================================================================= */
.brand-row { align-items: flex-start; }
.bpick { position: relative; }
.bp-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 13px; border-radius: 999px;
  border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1); color: var(--m3-on-surface);
  font: 750 13px var(--font); transition: border-color .15s, box-shadow .15s, transform .12s;
}
.bp-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--m3-primary) 40%, var(--m3-outline-var)); }
.bp-btn.is-set { background: var(--m3-primary-container); color: var(--m3-primary); border-color: color-mix(in srgb, var(--m3-primary) 32%, transparent); }
.bp-btn .bp-chev { transition: transform .2s; color: var(--m3-on-surface-var); }
.bp-btn[aria-expanded="true"] .bp-chev { transform: rotate(180deg); }
.chip.picked { padding-right: 9px; }
.chip.picked::after { display: none; }
.chip.picked .x { margin-left: 2px; font-size: 15px; line-height: 1; opacity: .7; }
.chip.picked:hover .x { opacity: 1; }

.bp-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; max-height: min(560px, 70vh);
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); border-radius: var(--r-md);
  box-shadow: var(--shadow-3); overflow: hidden; animation: rise .22s cubic-bezier(.22,1,.36,1) both;
}
.bp-head { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--m3-outline-var); }
.bp-find {
  flex: 1; display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var); color: var(--m3-on-surface-var);
}
.bp-find:focus-within { border-color: var(--m3-primary); }
.bp-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--m3-on-surface); font: 600 14px var(--font); }
.bp-order button { padding: 5px 10px; font-size: 12px; }

.bp-body { position: relative; display: flex; min-height: 0; flex: 1; }
.bp-list { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 8px 6px; scrollbar-width: thin; }
.bp-group h4 {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 8px 10px 5px;
  font-size: 11px; font-weight: 850; letter-spacing: .14em; color: var(--m3-primary);
  background: linear-gradient(var(--m3-surface-1) 75%, transparent);
}
.bp-group h4 span { font-size: 10.5px; font-weight: 750; letter-spacing: 0; color: var(--m3-on-surface-var); }
.bp-row {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--m3-on-surface); font: 650 13.5px var(--font); text-align: left; transition: background .12s;
}
.bp-row:hover { background: var(--m3-surface-2); }
.bp-row.is-on { background: var(--m3-primary-container); }
.bp-row .g {
  flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 900;
  background: linear-gradient(135deg, var(--gc-a), var(--gc-b)); color: var(--gc-x);
}
.bp-tick {
  flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1.6px solid var(--m3-outline); position: relative; transition: background .15s, border-color .15s;
}
.bp-row.is-on .bp-tick { background: var(--m3-primary); border-color: var(--m3-primary); }
.bp-row.is-on .bp-tick::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bp-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-n { flex: none; font-size: 11px; font-weight: 650; color: var(--m3-on-surface-var); }
.bp-pct { flex: none; min-width: 42px; text-align: right; font-size: 12.5px; font-weight: 850; color: var(--m3-ok); font-variant-numeric: tabular-nums; }
.bp-pct.none { color: var(--m3-outline); font-weight: 700; }
.bp-empty { padding: 26px 12px; text-align: center; color: var(--m3-on-surface-var); font-size: 13px; }

.bp-rail { flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 4px; border-left: 1px solid var(--m3-outline-var); }
.bp-rail button {
  border: 0; background: transparent; padding: 0 5px; min-height: 14px; border-radius: 5px; cursor: pointer;
  font: 800 10.5px var(--font); color: var(--m3-primary); line-height: 1.25;
}
.bp-rail button:hover:not(:disabled) { background: var(--m3-primary-container); }
.bp-rail button:disabled { color: var(--m3-outline-var); cursor: default; }
.bp-rail.bands { justify-content: flex-start; gap: 6px; }
.bp-rail.bands button { font-size: 10px; padding: 3px 6px; white-space: nowrap; }

.bp-foot { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-top: 1px solid var(--m3-outline-var); }
.bp-count { flex: 1; text-align: center; font-size: 12px; font-weight: 650; color: var(--m3-on-surface-var); }
.bp-clear, .bp-done { height: 32px; padding: 0 14px; border-radius: 999px; font: 750 12.5px var(--font); border: 1px solid var(--m3-outline-var); }
.bp-clear { background: var(--m3-surface-2); color: var(--m3-on-surface-var); }
.bp-done { background: var(--fill-grad); color: #fff; border-color: transparent; }

/* Phones: the list becomes a bottom sheet. */
@media (max-width: 560px) {
  .bp-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 78vh; border-radius: 20px 20px 0 0; }
  body.bp-open::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.35); }
}

/* =========================================================================
   Compact layout (2026-10-17): the best deal on one slim line, every control
   on the next. No tabs, no category chips, no Buying / Sort boxes.
   ========================================================================= */
.live { padding-top: 14px; }
.hero-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 10px 16px; border-radius: var(--r-sm);
  box-shadow: 0 10px 24px -16px var(--brand-glow), var(--shadow-1);
}
.hero-ribbon { display: none; }
.hc-bow { width: 30px; height: 19px; flex: none; }
.hc-bow svg { width: 100%; height: 100%; display: block; }
.hc-bow path { fill: none; stroke: #ffd56a; stroke-width: 5; }
.hc-bow circle { fill: #ffd56a; }
.hc-label { font-size: 10px; letter-spacing: .14em; }
.hc-amount { font-size: 20px; letter-spacing: -.4px; margin: 0; white-space: nowrap; }
.hc-amount small { font-size: 13px; margin-left: 4px; }
.hc-sub { flex: 1 1 220px; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpis { display: inline-flex; gap: 6px; margin: 0; grid-template-columns: none; }
.kpi { display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.kpi b { font-size: 13px; }
@media (max-width: 760px) { .kpi:nth-child(n+4) { display: inline-flex; } .hc-sub { flex-basis: 100%; order: 5; } }

.filters { margin: 10px 0 6px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar .search { flex: 0 1 200px; height: 34px; padding: 0 12px; gap: 6px; }
.toolbar .search input { font-size: 13px; }
.toolbar .seg button { padding: 5px 10px; font-size: 12px; }
.toolbar .bp-btn { height: 34px; font-size: 12.5px; }
.toolbar .chips.brands:empty { display: none; }
.toolbar .tb-gap { flex: 1 1 0; }
.toolbar .dir { width: 34px; height: 34px; padding: 0; justify-content: center; }
.toolbar .view button { padding: 6px 9px; }
.tally { margin: 6px 2px 10px; font-size: 12.5px; }
@media (max-width: 560px) {
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .tb-gap { display: none; }
}

/* =========================================================================
   Instant deal alerts - the WhatsApp channel, as on every other board.
   ========================================================================= */
.alert-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  display: inline-grid; place-items: center; text-decoration: none; color: var(--m3-primary);
  border: 1px solid color-mix(in srgb, var(--m3-primary) 40%, var(--m3-outline-var));
  background: color-mix(in srgb, var(--m3-primary) 10%, var(--m3-surface-1));
  transition: transform .14s, box-shadow .15s, background .15s;
}
.alert-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); background: color-mix(in srgb, var(--m3-primary) 18%, var(--m3-surface-1)); }
.alert-btn:hover svg { animation: bellSwing .7s ease; transform-origin: 50% 10%; }
.alert-ping {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
  background: #25d366; box-shadow: 0 0 0 2px var(--m3-surface);
  animation: alertPing 1.8s ease-out infinite;
}
@keyframes alertPing {
  0% { box-shadow: 0 0 0 2px var(--m3-surface), 0 0 0 2px rgba(37, 211, 102, .55); }
  100% { box-shadow: 0 0 0 2px var(--m3-surface), 0 0 0 10px rgba(37, 211, 102, 0); }
}
@keyframes bellSwing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-11deg); } 75% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .alert-ping, .alert-btn:hover svg { animation: none; } }

/* =========================================================================
   Broadcast - the unlisted /broadcast/ page only (broadcast.js adds it).
   ========================================================================= */
.bc-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 15px; border: 0; border-radius: 999px;
  font: 800 14px/1 Inter, system-ui, sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #14b8a6, var(--m3-primary) 60%, #0b4f49);
  box-shadow: 0 10px 26px -8px var(--brand-glow), inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .15s;
}
.bc-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--brand-glow), inset 0 0 0 1px rgba(255,255,255,.22); }
.bc-fab em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gold-grad); color: #3a2604; font-size: 11.5px; font-weight: 900; }
.bc-fab em[hidden] { display: none; }
.bc-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4, 20, 18, .5); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; }
.bc-scrim.on { opacity: 1; }
.bc {
  position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(1040px, 100vw);
  display: flex; flex-direction: column; background: var(--m3-surface); color: var(--m3-on-surface);
  box-shadow: -20px 0 50px -20px rgba(0,0,0,.35); transform: translateX(102%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.bc.on { transform: none; }
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--m3-outline-var); }
.bc-head h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.bc-head p { margin: 2px 0 0; font-size: 12.5px; font-weight: 650; color: var(--m3-on-surface-var); }
.bc-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1);
  color: var(--m3-on-surface-var); font-size: 22px; line-height: 1; cursor: pointer; }
.bc-x:hover { color: var(--m3-primary); }
.bc-body { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; padding: 20px 22px 26px; }
.bc-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bc-snap { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2); background: #0a4f4a; }
.bc-snap canvas { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; }
.bc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bc-btn { flex: 1 1 auto; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--m3-outline-var); background: var(--m3-surface-1);
  color: var(--m3-on-surface); font: 750 13.5px/1.1 Inter, system-ui, sans-serif; cursor: pointer; transition: transform .12s, background .15s, color .15s; }
.bc-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--m3-primary) 40%, var(--m3-outline-var)); }
.bc-btn.hot { background: var(--m3-primary); border-color: var(--m3-primary); color: #fff; }
[data-theme="dark"] .bc-btn.hot { color: #04201d; }
.bc-btn.is-ok { background: #15803d; border-color: #15803d; color: #fff; }
.bc-btn.is-bad { background: #b45309; border-color: #b45309; color: #fff; }
.bc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bc-seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var); }
.bc-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: 750 13px/1 Inter, system-ui, sans-serif; color: var(--m3-on-surface-var); cursor: pointer; }
.bc-seg button[aria-checked="true"] { background: var(--m3-surface-1); color: var(--m3-primary); box-shadow: var(--shadow-1); }
.bc-count { font-size: 12px; font-weight: 700; color: var(--m3-on-surface-var); }
.bc-text { min-height: 260px; flex: 1; resize: vertical; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--m3-outline-var);
  background: var(--m3-surface-1); color: var(--m3-on-surface); font: 500 13px/1.5 ui-monospace, Consolas, monospace; }
.bc-text:focus { outline: 2px solid color-mix(in srgb, var(--m3-primary) 50%, transparent); outline-offset: 1px; }

/* each pick: brand, the card it posts at, the discount (empty = the board's) */
.bc-picks { display: flex; flex-direction: column; gap: 8px; }
.bcp { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: var(--m3-surface-1); border: 1px solid var(--m3-outline-var); box-shadow: inset 4px 0 0 var(--gc-a); }
.bcp-g { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 900;
  color: var(--gc-fg, #fff); background: linear-gradient(135deg, var(--gc-a), var(--gc-b)); }
.bcp-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bcp-nm b { font-size: 14px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcp-nm small { font-size: 12px; font-weight: 700; color: var(--m3-primary); }
.bcp-f { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; height: 34px; border-radius: 10px;
  background: var(--m3-surface-2); border: 1px solid var(--m3-outline-var); }
.bcp-f[hidden] { display: none; }
.bcp-f span { font-size: 11px; font-weight: 800; color: var(--m3-on-surface-var); text-transform: uppercase; letter-spacing: .04em; }
.bcp-f select, .bcp-f input { border: 0; background: none; color: var(--m3-on-surface); font: 750 13px/1 Inter, system-ui, sans-serif; outline: none; }
.bcp-f select { cursor: pointer; max-width: 104px; }
.bcp-f select option { color: #10201e; }
.bcp-amt input { width: 74px; }
.bcp-pct input { width: 44px; }
.bcp-f input.bad { color: #dc2626; }
.bcp-f:focus-within { border-color: var(--m3-primary); }
.bcp-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--m3-on-surface-var); font-size: 20px; cursor: pointer; }
.bcp-x:hover { background: var(--m3-surface-2); color: #dc2626; }
.bcp-empty { margin: 0; padding: 14px; border-radius: 12px; border: 1px dashed var(--m3-outline-var); font-size: 13px; font-weight: 600; color: var(--m3-on-surface-var); }
@media (max-width: 860px) {
  .bc-body { grid-template-columns: 1fr; }
  .bc-snap { max-width: 420px; }
}
@media (max-width: 560px) {
  .bc-fab span { display: none; }
  .bc-fab { padding: 14px; }
  .bcp { flex-wrap: wrap; }
  .bcp-nm { flex-basis: calc(100% - 90px); }
  .bc-body { padding: 14px 16px 22px; }
}