/* ============================================================
   antargyan.com — design system (mockup-faithful)
   Brand blue #027CC5 · orange #F26722 · YouTube-style shell
   NEW header (tokens + shell + home). Legacy page styles follow.
   ============================================================ */

:root {
  --brand-blue:      #027CC5;
  --brand-blue-600:  #0268A6;
  --brand-blue-700:  #025487;
  --brand-blue-050:  #E7F3FB;
  --brand-orange:    #F26722;
  --brand-orange-600:#DA5714;
  --brand-orange-050:#FEF0E7;

  --bg-page:   #F7F9FA;
  --surface:   #FFFFFF;
  --surface-2: #EEF1F4;
  --surface-3: #E4E9ED;
  --text:      #0F1720;
  --text-2:    #5B6B7B;
  --border:    #E4E9ED;
  --shadow:    0 1px 2px rgba(15,23,32,.06), 0 4px 16px rgba(15,23,32,.06);
  --shadow-lg: 0 8px 30px rgba(15,23,32,.14);

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --topbar-h:  60px;
  --rail-w:    240px;
  --rail-w-mini: 76px;

  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Baloo 2", var(--font-ui);

  /* legacy aliases so pre-existing pages keep working + darken with the theme */
  --ink:    var(--text);
  --muted:  var(--text-2);
  --line:   var(--border);
  --bg:     var(--bg-page);
  --card:   var(--surface);
  --page:   var(--bg-page);
}

[data-theme="dark"] {
  --bg-page:   #0F1216;
  --surface:   #171B20;
  --surface-2: #21262D;
  --surface-3: #2B323A;
  --text:      #E9EDF0;
  --text-2:    #97A3AF;
  --border:    #262C33;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 10px 34px rgba(0,0,0,.5);
  --brand-blue-050:   #10222E;
  --brand-orange-050: #2A190F;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
.drawer-backdrop { display: none; }
body {
  font-family: var(--font-ui);
  background: var(--bg-page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-blue); color: #fff; }
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

.app-loading { padding: 3rem; text-align: center; color: var(--text-2); }
/* Hidden until blazor.webassembly.js sets display:block on an unhandled exception. */
#blazor-error-ui {
  display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem; background: #fee2a8; color: #1f2937;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
/* legacy content width (used by non-home pages inside .main) */
.page-pad { max-width: 1160px; margin: 0 auto; padding: 1.5rem; }
.muted { color: var(--text-2); }
/* Screen-reader-only: present in the DOM (satisfies FocusOnNavigate + a11y) but visually hidden. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Share control (ShareButton.razor) */
.share-wrap { position: relative; display: inline-block; }
.share-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px;
  border-radius: 999px; font-weight: 700; font-size: 13.5px; background: var(--surface-2);
  color: var(--text); border: 1px solid var(--border); transition: background .15s;
}
.share-btn:hover { background: var(--surface-3); }
.share-btn.share-btn--primary { background: var(--brand-blue); color: #fff; border-color: transparent; }
.share-btn.share-btn--primary:hover { background: var(--brand-blue-600); }
.share-backdrop { position: fixed; inset: 0; z-index: 60; }
.share-menu {
  position: absolute; z-index: 61; top: calc(100% + 6px); right: 0; min-width: 208px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; overflow: hidden;
}
.share-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px;
  border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text); text-align: left;
}
.share-opt:hover { background: var(--surface-2); }
.share-opt span { width: 20px; text-align: center; font-size: 16px; flex: none; }
.share-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* ============================================================
   Top bar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar__left { display: flex; align-items: center; gap: 8px; }
.topbar__right { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text); transition: background .15s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn svg { width: 22px; height: 22px; }

.brand { display: inline-flex; align-items: center; padding: 4px 6px; flex: none; }
.brand__logo { height: 32px; width: auto; max-width: none; display: block; flex: none; }
.search-mini { display: none; }

.search { display: flex; justify-content: center; align-items: center; }
.search__form {
  display: flex; width: min(640px, 100%); height: 44px; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.search__form:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 3px var(--brand-blue-050); }
.search__input { flex: 1; border: none; background: transparent; color: var(--text); padding: 0 20px; font-size: 15px; min-width: 0; }
.search__input::placeholder { color: var(--text-2); }
.search__btn { width: 64px; background: var(--surface-2); border-left: 1px solid var(--border); display: grid; place-items: center; color: var(--text-2); }
.search__btn:hover { background: var(--surface-3); color: var(--text); }
.search__hint {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 12px;
  background: var(--brand-blue-050); color: var(--brand-blue-700); padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
[data-theme="dark"] .search__hint { color: #7FC4EE; }
.search__hint svg { width: 15px; height: 15px; }

.create-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px;
  border-radius: 999px; font-weight: 600; font-size: 13px; background: var(--surface-2); color: var(--text);
}
.create-btn:hover { background: var(--surface-3); }
.create-btn svg { width: 18px; height: 18px; }
.avatar-btn { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; margin-left: 4px; border: none; }
.avatar-gradient { width: 100%; height: 100%; background: conic-gradient(from 120deg, hsl(210 70% 55%), hsl(270 70% 45%)); }
.cart-count {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--brand-orange); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center;
}
.who { font-size: 13px; color: var(--text-2); margin-right: 4px; }
.who .role-chip { background: var(--brand-blue-050); color: var(--brand-blue-700); padding: 2px 8px; border-radius: 999px; font-weight: 700; margin-left: 4px; }
.link-btn {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
a.link-btn { background: var(--brand-blue); color: #fff; }
a.link-btn:hover { background: var(--brand-blue-600); }
button.link-btn { background: transparent; color: var(--brand-blue); border: 1.5px solid var(--border); }
button.link-btn:hover { border-color: var(--brand-blue); background: var(--brand-blue-050); }

/* Base commerce button (cart checkout, etc.); store & product pages override as needed. */
.add-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--brand-orange); color: #fff; transition: background .15s, opacity .15s;
}
.add-btn:hover { background: var(--brand-orange-600); }
.add-btn:disabled { opacity: .55; cursor: default; }

/* ============================================================
   Layout: sidebar + main
   ============================================================ */
.layout { display: grid; grid-template-columns: var(--rail-w) 1fr; }
.layout.rail-mini { grid-template-columns: var(--rail-w-mini) 1fr; }

.sidebar {
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
  overflow-y: auto; padding: 10px 8px 40px;
}
.nav-sec { padding: 8px 0; border-bottom: 1px solid var(--border); }
.nav-sec:last-child { border-bottom: none; }
.nav-sec__title { font-size: 12px; color: var(--text-2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 8px 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 16px; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text); transition: background .12s; cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--brand-blue-050); color: var(--brand-blue-700); font-weight: 700; }
[data-theme="dark"] .nav-item.active { color: #8ECBF0; }
.nav-item svg { width: 22px; height: 22px; flex: none; }
.nav-item .mini-label { display: none; }
.nav-item .ava-sm { width: 24px; height: 24px; border-radius: 50%; flex: none; }

.layout.rail-mini .nav-sec__title,
.layout.rail-mini .nav-item .lbl { display: none; }
.layout.rail-mini .nav-item { flex-direction: column; gap: 5px; font-size: 10px; padding: 14px 4px; }
.layout.rail-mini .nav-item .mini-label { display: block; }

.main { min-width: 0; padding: 16px 24px 60px; }

/* ============================================================
   Home (scoped so card/thumb/grid names don't touch other pages)
   ============================================================ */
.home { max-width: 1600px; margin: 0 auto; }

.home .chips {
  position: sticky; top: var(--topbar-h); z-index: 20; display: flex; gap: 10px;
  padding: 12px 0; margin-bottom: 8px; overflow-x: auto; background: var(--bg-page); scrollbar-width: none;
}
.home .chips::-webkit-scrollbar { display: none; }
.home .chip {
  flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--text); white-space: nowrap; transition: background .12s;
}
.home .chip:hover { background: var(--surface-3); }
.home .chip.active { background: var(--brand-blue); color: #fff; }

.home .section-head { display: flex; align-items: center; gap: 10px; margin: 26px 2px 14px; }
.home .section-head h2 { font-size: 18px; margin: 0; letter-spacing: -.2px; }
.home .section-head .tri { width: 20px; height: 20px; }
.home .section-head .more { margin-left: auto; font-size: 13px; color: var(--brand-blue); font-weight: 600; }

.home .shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.home .shelf::-webkit-scrollbar { display: none; }
.home .short-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.home .short-card .thumb { aspect-ratio: 9/16; }
.home .short-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .short-card__meta { font-size: 12px; color: var(--text-2); }
/* personalized home rails */
.home .rail-card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.home .rail-card .thumb { aspect-ratio: 16/10; }
.home .rail-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .rail-card__meta { font-size: 12px; color: var(--text-2); }
.recent-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.recent-row__label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.recent-row .chip { text-decoration: none; }

/* interest onboarding modal */
.ob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center;
  justify-content: center; z-index: 1000; padding: 1rem; }
.ob-modal { position: relative; background: var(--card, var(--surface)); border-radius: 16px; box-shadow: var(--shadow);
  max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.75rem; }
.ob-modal h2 { margin: 0 0 .35rem; }
.ob-close { position: absolute; top: .9rem; right: 1rem; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-2); }
.ob-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin: 1.1rem 0 .5rem; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border, var(--line)); background: var(--surface);
  color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ob-chip:hover { border-color: var(--brand-blue); }
.ob-chip.on { background: var(--brand-blue); color: #fff; border-color: transparent; }
.ob-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }

.home .grid { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.home .card { display: flex; flex-direction: column; gap: 12px; cursor: pointer; }
.home .thumb {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, var(--t1,#2b6cb0), var(--t2,#1a4a80)) center/cover no-repeat;
  display: grid; place-items: center;
}
.home .thumb__glyph { font-size: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); opacity: .95; }
.home .thumb__badge {
  position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; padding: 4px 8px; border-radius: 6px; color: #fff;
}
.home .badge-video { background: rgba(2,124,197,.92); }
.home .badge-game  { background: rgba(242,103,34,.94); }
.home .badge-quiz  { background: rgba(124,58,173,.92); }
.home .badge-short { background: rgba(17,17,17,.75); }
.home .thumb__meta {
  position: absolute; right: 8px; bottom: 8px; font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.75); padding: 2px 7px; border-radius: 6px;
}
.home .thumb__play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s; background: rgba(0,0,0,.18); }
.home .card:hover .thumb__play { opacity: 1; }
.home .thumb__play span { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--brand-blue); }
.home .thumb__play svg { width: 26px; height: 26px; margin-left: 3px; }

.home .card__body { display: flex; gap: 12px; }
.home .card__ava { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.home .card__text { min-width: 0; }
.home .card__title { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home .card__creator { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.home .card__creator .verified { color: var(--brand-blue); display: inline-flex; }
.home .card__creator .verified svg { width: 14px; height: 14px; }
.home .card__meta { font-size: 13px; color: var(--text-2); }

.home .loading-row { color: var(--text-2); padding: 8px 2px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr !important; }
  /* Sidebar becomes an off-canvas drawer toggled by the hamburger (rail-mini flag). */
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; z-index: 60;
    width: 264px; max-width: 82vw; height: calc(100vh - var(--topbar-h));
    background: var(--surface); border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg); padding: 10px 8px 40px;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  .layout.rail-mini .sidebar { transform: translateX(0); }
  /* Keep full-size nav items inside the drawer (undo desktop mini-rail collapsing). */
  .layout.rail-mini .nav-sec__title,
  .layout.rail-mini .nav-item .lbl { display: block; }
  .layout.rail-mini .nav-item { flex-direction: row; gap: 16px; font-size: 14px; padding: 10px 12px; }
  .layout.rail-mini .nav-item .mini-label { display: none; }
  .drawer-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 55;
    background: rgba(15, 23, 32, .45); opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .layout.rail-mini .drawer-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 820px) {
  .search__hint { display: none; }
  .main { padding: 12px 14px 60px; }
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar__left { gap: 2px; }
  .brand { padding: 4px 2px; }
  .brand__logo { height: 26px; }
  .icon-btn { width: 38px; height: 38px; }
  /* Collapse the full search bar into an icon; free room for the right-side actions. */
  .search { display: none; }
  .search-mini { display: grid; }
  .create-btn span { display: none; }
  .create-btn { padding: 0; width: 38px; justify-content: center; }
}
@media (max-width: 460px) {
  .create-btn { display: none; }
  .brand__logo { height: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ============================================================
   Legacy page styles (buttons onward — preserved verbatim)
   ============================================================ */
/* ---------- buttons ---------- */
.btn {
    border: 0; border-radius: 10px; padding: .55rem .95rem; font-weight: 700; cursor: pointer;
    font-size: .9rem; transition: transform .05s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-blue); color: #fff; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-orange { background: var(--brand-orange); color: #fff; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-block { width: 100%; }

/* ---------- hero ---------- */
.hero {
    background: linear-gradient(120deg, var(--brand-blue), #0a94d8);
    color: #fff; padding: 3rem 1.5rem; text-align: center;
}
.hero h1 { margin: 0 0 .4rem; font-size: 2.1rem; }
.hero p { margin: 0; opacity: .92; }

.section-title { font-size: 1.25rem; margin: .25rem 0 1rem; }
.muted { color: var(--muted); }

/* ---------- cards ---------- */
.card-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.media-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.media-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(20,40,70,.12); }
.thumb { aspect-ratio: 16/9; background: #dfe6ee center/cover no-repeat; position: relative; }
.duration { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: .72rem; padding: .1rem .35rem; border-radius: 5px; }
.type-chip { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,.9); color: var(--brand-blue); font-size: .68rem; font-weight: 700; text-transform: uppercase; padding: .12rem .4rem; border-radius: 5px; }
.media-meta { padding: .7rem .8rem .9rem; }
.media-title { font-weight: 700; line-height: 1.25; margin-bottom: .25rem; }
.media-sub { color: var(--muted); font-size: .82rem; }

/* ---------- product ---------- */
.price { font-weight: 800; color: var(--brand-blue); }
.price-strike { color: var(--muted); text-decoration: line-through; font-weight: 500; margin-left: .4rem; font-size: .85rem; }

/* ---------- forms ---------- */
.auth-wrap { max-width: 380px; margin: 3rem auto; background: var(--card); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.field input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 9px; font-size: .95rem; }
.field input:focus { outline: 2px solid rgba(2,124,197,.35); border-color: var(--brand-blue); }
.error { color: #c0392b; font-size: .85rem; margin-bottom: .75rem; }
.hint { color: var(--muted); font-size: .8rem; margin-top: 1rem; text-align: center; }
.hint a { color: var(--brand-blue); font-weight: 600; }
.dev-otp { background: rgba(2,124,197,.08); border: 1px dashed var(--brand-blue); color: var(--text);
  border-radius: 9px; padding: .6rem .75rem; font-size: .85rem; margin-bottom: 1rem; text-align: center; }
.dev-otp b { letter-spacing: 2px; }
.linkish { background: none; border: none; color: var(--brand-blue); font-weight: 600; font-size: .8rem;
  cursor: pointer; padding: 0; }
.linkish:disabled { opacity: .5; cursor: default; }

/* ---------- search ---------- */
.searchbar { display: flex; gap: .6rem; margin-bottom: 1.25rem; }
.searchbar input { flex: 1; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; }
.result-row { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1rem; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); margin-bottom: .6rem; }
.result-kind { font-size: .7rem; font-weight: 700; text-transform: uppercase; color: var(--brand-orange); }
.score { color: var(--muted); font-size: .8rem; }

/* ============ discovery: tabs, pills, badges ============ */
.tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--line); margin: 0 0 1.25rem; flex-wrap: wrap; }
.tab {
    border: 0; background: transparent; padding: .6rem .95rem; cursor: pointer;
    font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); }

.card-actions { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.pill {
    display: inline-block; background: var(--bg); color: var(--muted);
    font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; text-transform: capitalize;
}
.pill-free { background: rgba(2,124,197,.1); color: var(--brand-blue); }
.pill-paid { background: rgba(242,103,34,.12); color: var(--brand-orange); }
.pill-points { background: rgba(242,103,34,.12); color: var(--brand-orange); }

.thumb-game { background-color: #1f2b45; }
.thumb-quiz { background-color: #123a55; }
.play-badge {
    position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--brand-blue);
    font-size: 1.1rem; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.media-card:hover .play-badge { opacity: 1; }

.hero-games { background: linear-gradient(120deg, var(--brand-orange), #f2952a); }

.creator-link { color: var(--brand-blue); font-weight: 600; }
.creator-link:hover { text-decoration: underline; }

/* ============ play runner ============ */
.play-wrap { max-width: 760px; }
.play-head { display: flex; gap: .5rem; margin-bottom: 1rem; }
.play-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.play-q { margin: 0 0 1.25rem; font-size: 1.3rem; line-height: 1.35; }
.play-options { display: grid; gap: .6rem; }
.play-option {
    text-align: left; padding: .85rem 1rem; border: 1.5px solid var(--line); background: #fff;
    border-radius: 12px; font-size: 1rem; cursor: pointer; transition: border-color .12s, background .12s;
}
.play-option:hover { border-color: var(--brand-blue); }
.play-option.chosen { border-color: var(--brand-blue); background: rgba(2,124,197,.07); font-weight: 600; }
.play-nav { display: flex; gap: .6rem; justify-content: space-between; margin-top: 1.25rem; }
.play-summary { text-align: center; }
.summary-badge {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center;
    background: rgba(2,124,197,.12); color: var(--brand-blue); font-size: 1.8rem;
}

/* ============ channel ============ */
.channel-cover { height: 200px; background: #dfe6ee center/cover no-repeat;
    background-image: linear-gradient(120deg, var(--brand-blue), var(--brand-orange)); }
.channel-head { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: -46px; }
.channel-avatar {
    width: 108px; height: 108px; border-radius: 50%; border: 4px solid var(--card);
    background: var(--brand-blue) center/cover no-repeat; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff; font-size: 2rem; font-weight: 800;
}
.channel-id { flex: 1; padding-bottom: .25rem; }
.channel-name { margin: 0; font-size: 1.6rem; display: flex; align-items: center; gap: .5rem; }
.verified { color: var(--brand-blue); font-size: 1rem; }
.channel-stats { display: flex; gap: 1.1rem; margin-top: .4rem; color: var(--muted); font-size: .9rem; }
.chip-row { display: flex; gap: .35rem; margin-top: .55rem; flex-wrap: wrap; }
.channel-cta { padding-bottom: .5rem; }
.channel-bio { color: var(--ink); max-width: 720px; margin: 1rem 0 1.5rem; }

/* ============ shorts ============ */
.shorts-stage { display: grid; place-items: center; padding: 1.25rem; }
.shorts-scroll {
    height: calc(100vh - 62px - 3rem); overflow-y: auto; scroll-snap-type: y mandatory;
    display: flex; flex-direction: column; gap: 1rem; width: min(420px, 100%); padding-bottom: 1rem;
}
.shorts-scroll::-webkit-scrollbar { width: 0; }
.short {
    position: relative; scroll-snap-align: start; flex: 0 0 auto;
    aspect-ratio: 9/16; border-radius: 18px; overflow: hidden;
    background: #1a2230 center/cover no-repeat; box-shadow: var(--shadow);
}
.short-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.78)); }
.short-open {
    position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.9); color: var(--brand-blue); font-size: 1.4rem; cursor: pointer;
}
.short-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; }
.short-title { font-weight: 800; font-size: 1.05rem; margin-bottom: .25rem; }
.short-creator a, .short-creator span { color: #fff; opacity: .95; font-weight: 600; }
.short-creator a:hover { text-decoration: underline; }
.short-stats { opacity: .85; font-size: .82rem; margin-top: .35rem; }

/* ============ responsive ============ */
@media (max-width: 640px) {
    .topnav { gap: .1rem; font-size: .9rem; }
    .topnav a { padding: .5rem .55rem; }
    .channel-head { flex-wrap: wrap; }
    .channel-cta { width: 100%; }
}

/* ============ quiz results ============ */
.score-ring {
    width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center;
    font-weight: 800; font-size: 1.4rem; color: #fff; background: var(--brand-blue);
}
.score-ring.ok { background: linear-gradient(135deg, var(--brand-blue), #17a673); }
.score-ring.warn { background: linear-gradient(135deg, #e08a2b, var(--brand-orange)); }

.result-list { text-align: left; margin: 1.25rem 0; display: grid; gap: .6rem; }
.result-item { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: .7rem .85rem; }
.result-item.r-correct { border-left-color: #17a673; }
.result-item.r-wrong { border-left-color: #e0563f; }
.r-head { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.r-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: .8rem; background: var(--bg); color: var(--muted); }
.r-correct .r-icon { background: rgba(23,166,115,.15); color: #17a673; }
.r-wrong .r-icon { background: rgba(224,86,63,.15); color: #e0563f; }
.r-q { flex: 1; }
.r-marks { color: var(--muted); font-variant-numeric: tabular-nums; }
.r-body { margin: .4rem 0 0 2rem; font-size: .9rem; color: var(--ink); display: grid; gap: .15rem; }
.r-label { color: var(--muted); font-weight: 600; margin-right: .3rem; }
.r-explain { color: var(--muted); font-style: italic; margin-top: .2rem; }

/* ============ live multiplayer ============ */
.live-wrap { max-width: 900px; }
.live-setup { max-width: 420px; margin: 0 auto; }
.live-setup .or { text-align: center; color: var(--muted); margin: .75rem 0; font-size: .85rem; }
.hero-join { display: inline-block; margin-top: 1rem; background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.hero-join:hover { background: rgba(255,255,255,.25); }

.lobby-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.room-code { font-size: 2rem; font-weight: 800; letter-spacing: .18em; color: var(--brand-blue); }

.player-list { display: grid; gap: .4rem; }
.player-row { display: flex; align-items: center; justify-content: space-between;
    padding: .55rem .8rem; background: var(--bg); border-radius: 10px; }
.player-row.me { outline: 2px solid rgba(2,124,197,.35); }
.player-name { font-weight: 600; }
.dot-on, .dot-off { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-on { background: #17a673; }
.dot-off { background: #cbd3dd; }

.live-grid { display: grid; grid-template-columns: 1fr 260px; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .live-grid { grid-template-columns: 1fr; } }
.live-board { position: sticky; top: 80px; }

.opt-correct { border-color: #17a673 !important; background: rgba(23,166,115,.1) !important; }
.opt-wrong { border-color: #e0563f !important; background: rgba(224,86,63,.1) !important; }
.answer-note { margin-top: 1rem; padding: .7rem .9rem; border-radius: 10px; font-weight: 600; }
.answer-note.ok { background: rgba(23,166,115,.12); color: #14875f; }
.answer-note.no { background: rgba(224,86,63,.1); color: #b5432f; }

.board-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center;
    gap: .5rem; padding: .5rem .6rem; border-radius: 9px; }
.board-row.me { background: rgba(2,124,197,.08); }
.board-rank { color: var(--muted); font-weight: 700; text-align: center; }
.board-name { font-weight: 600; }
.board-score { font-weight: 800; color: var(--brand-blue); font-variant-numeric: tabular-nums; }

/* ============================================================
   Wider content wrapper for inner pages
   ============================================================ */
.page-pad-wide { max-width: 1360px; margin: 0 auto; }

/* ============================================================
   Watch page (mockup, scoped under .watch-scope)
   ============================================================ */
.watch-scope .watch { display: grid; grid-template-columns: minmax(0,1fr) 402px; gap: 24px; align-items: start; }
.watch-scope .player {
  aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: radial-gradient(120% 120% at 50% 0%, #0a3a5f, #04121f); display: grid; place-items: center;
}
.watch-scope .player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.watch-scope .player__big { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; color: var(--brand-blue); box-shadow: var(--shadow-lg); }
.watch-scope .player__big svg { width: 34px; height: 34px; margin-left: 4px; }
.watch-scope .player__lock { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; background: rgba(0,0,0,.5); color: #fff; font-weight: 600; }
.watch-scope .player__glyph { font-size: 60px; opacity: .9; }

.watch-scope .v-title { font-size: 20px; font-weight: 700; margin: 16px 0 10px; letter-spacing: -.3px; }
.watch-scope .v-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.watch-scope .v-owner { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.watch-scope .v-owner__ava { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.watch-scope .v-owner__name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 5px; }
.watch-scope .v-owner__name a { color: inherit; }
.watch-scope .v-owner__subs { font-size: 13px; color: var(--text-2); }
.watch-scope .verified { color: var(--brand-blue); display: inline-flex; }
.watch-scope .verified svg { width: 15px; height: 15px; }
.watch-scope .pill-group { display: flex; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.watch-scope .pill-group .wbtn { border-radius: 0; background: transparent; }
.watch-scope .pill-group .wbtn + .wbtn { border-left: 1px solid var(--border); }
.watch-scope .wbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
  font-weight: 600; font-size: 14px; background: var(--surface-2); color: var(--text);
}
.watch-scope .wbtn:hover { background: var(--surface-3); }
.watch-scope .wbtn svg { width: 18px; height: 18px; }
.watch-scope .wbtn--on { color: var(--brand-blue); }
.watch-scope .wbtn--on svg { fill: var(--brand-blue); stroke: var(--brand-blue); }

.watch-scope .access-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--brand-orange-050); border: 1px solid rgba(242,103,34,.35); margin: 16px 0; }
.watch-scope .access-banner .lock { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-orange); color: #fff; display: grid; place-items: center; flex: none; }
.watch-scope .access-banner b { display: block; }
.watch-scope .access-banner small { color: var(--text-2); }
.watch-scope .access-banner .abtn { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 700; background: var(--brand-orange); color: #fff; }

.watch-scope .desc-box { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; }
.watch-scope .desc-box .desc-meta { font-weight: 700; margin-bottom: 6px; }
.watch-scope .desc-box p { margin: 0 0 10px; white-space: pre-wrap; }
.watch-scope .tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--brand-blue-700); background: var(--brand-blue-050); padding: 3px 8px; border-radius: 6px; margin: 2px 4px 2px 0; }
[data-theme="dark"] .watch-scope .tag { color: #86C6EE; }

.watch-scope .rail-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.watch-scope .up-next { display: flex; flex-direction: column; gap: 12px; }
.watch-scope .mini-card { display: grid; grid-template-columns: 168px 1fr; gap: 10px; cursor: pointer; }
.watch-scope .mini-card .m-thumb {
  aspect-ratio: 16/9; border-radius: var(--radius-sm); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--t1,#2b6cb0), var(--t2,#1a4a80)) center/cover no-repeat; display: grid; place-items: center;
}
.watch-scope .mini-card .m-glyph { font-size: 26px; opacity: .95; }
.watch-scope .mini-card__title { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.watch-scope .mini-card__meta { font-size: 12px; color: var(--text-2); }

.watch-scope .comments { margin-top: 24px; }
.watch-scope .comments h3 { font-size: 16px; margin: 0 0 12px; }

@media (max-width: 1100px) {
  .watch-scope .watch { grid-template-columns: 1fr; }
  .watch-scope .watch__rail { order: 3; }
}

/* ============================================================
   Store page (mockup, scoped under .store-scope)
   ============================================================ */
.store-scope .store-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.store-scope .store-head h1 { margin: 0; }
.store-scope .cart-summary { font-size: 13px; color: var(--text-2); }
.store-scope .store-note {
  display: flex; align-items: center; gap: 10px; font-size: 13px; background: var(--brand-blue-050);
  color: var(--brand-blue-700); padding: 10px 14px; border-radius: var(--radius); margin: 12px 0 20px;
}
[data-theme="dark"] .store-scope .store-note { color: #86C6EE; }
.store-scope .flash { font-size: 13px; color: var(--brand-blue-700); background: var(--brand-blue-050); padding: 8px 12px; border-radius: 8px; margin-bottom: 14px; }

.store-scope .grid { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.store-scope .card { display: flex; flex-direction: column; gap: 10px; }
.store-scope .thumb {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, var(--t1,#2b6cb0), var(--t2,#1a4a80)) center/cover no-repeat; display: grid; place-items: center;
}
.store-scope .thumb__glyph { font-size: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.store-scope .thumb__badge {
  position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; padding: 4px 8px; border-radius: 6px; color: #fff;
}
.store-scope .badge-video { background: rgba(2,124,197,.92); }
.store-scope .badge-game { background: rgba(242,103,34,.94); }
.store-scope .badge-quiz { background: rgba(124,58,173,.92); }
.store-scope .card__title { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.store-scope .card__creator { font-size: 13px; color: var(--text-2); }
.store-scope .card__meta { font-size: 13px; color: var(--text-2); }
.store-scope .price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.store-scope .price__now { font-size: 16px; font-weight: 800; color: var(--text); }
.store-scope .price__was { font-size: 13px; color: var(--text-2); text-decoration: line-through; }
.store-scope .price__off { font-size: 12px; font-weight: 700; color: var(--brand-orange); }
.store-scope .add-btn {
  margin-top: 8px; width: 100%; height: 38px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--brand-orange); color: #fff;
}
.store-scope .add-btn:hover { background: var(--brand-orange-600); }
.store-scope .add-btn.free { background: var(--brand-blue); }
.store-scope .add-btn.free:hover { background: var(--brand-blue-600); }

/* ============================================================
   Sidebar subscriptions (creator rows)
   ============================================================ */
.nav-item .ava-sm { background-size: cover; background-position: center; }

/* live-game question timer */
.qtimer { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 0 0 14px; }
.qtimer__bar { height: 100%; background: var(--brand-blue); border-radius: 999px; transition: width .4s linear; }
.qtimer__bar.urgent { background: var(--brand-orange); }
.pill-urgent { background: var(--brand-orange) !important; color: #fff !important; }

/* ============================================================
   Cart page
   ============================================================ */
.cart-scope h1 { margin: 0 0 1.25rem; }
.cart-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { .cart-grid { grid-template-columns: 1fr; } }

.cart-lines { display: flex; flex-direction: column; gap: .75rem; }
.cart-line {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1rem;
}
.cart-line__thumb { width: 56px; height: 56px; border-radius: 10px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; }
.cart-line__title { font-weight: 700; }
.cart-line__total { font-weight: 800; color: var(--brand-blue); white-space: nowrap; }

.cart-summary-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow); position: sticky; top: calc(var(--topbar-h) + 12px);
}
.cart-summary-box h3 { margin: 0 0 1rem; }
.cart-row { display: flex; justify-content: space-between; padding: .35rem 0; color: var(--text-2); }
.cart-row--total { border-top: 1px solid var(--border); margin-top: .35rem; padding-top: .7rem; color: var(--text); font-weight: 800; font-size: 1.05rem; }
/* Checkout billing panel */
.billing-panel { margin-top: 1.5rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem 1.5rem; box-shadow: var(--shadow); }
.billing-panel h3 { margin: 0 0 .25rem; }
.billing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-top: 1rem; }
@media (max-width: 640px) { .billing-grid { grid-template-columns: 1fr; } }
.bfield { display: flex; flex-direction: column; gap: .3rem; }
.bfield--wide { grid-column: 1 / -1; }
.bfield label { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.bfield input, .bfield select { padding: .55rem .7rem; border: 1.5px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font-size: .92rem; }
.bfield input:focus, .bfield select:focus { border-color: var(--brand-blue); outline: none; }
.order-billing { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); line-height: 1.5; }

.cart-empty { text-align: center; padding: 3rem 1rem; }
.cart-empty__glyph { font-size: 3rem; margin-bottom: .5rem; }
.abtn {
  display: inline-block; margin-top: .75rem; background: var(--brand-blue); color: #fff;
  padding: .6rem 1.1rem; border-radius: 999px; font-weight: 700;
}
.abtn:hover { background: var(--brand-blue-600); }

/* order confirmation */
.order-done {
  max-width: 560px; margin: 1rem auto; text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow);
}
.order-done__check {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-blue-050); color: var(--brand-blue); font-size: 1.8rem; font-weight: 800;
}
.order-items { margin-top: 1.25rem; text-align: left; border-top: 1px solid var(--border); }
.order-line { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--border); }

/* ---------- KBC solo gameplay ---------- */
.play-wrap--kbc { max-width: 1080px; }
.kbc-grid { display: grid; grid-template-columns: 1fr 280px; gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .kbc-grid { grid-template-columns: 1fr; } }

.pill-winnings { background: rgba(242,103,34,.12); color: var(--brand-orange, #F26722); font-weight: 700; }

.lifelines { display: flex; gap: .6rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.lifeline {
  border: 2px solid var(--brand-blue, #027CC5); background: var(--card); color: var(--brand-blue, #027CC5);
  border-radius: 999px; padding: .4rem .95rem; font-weight: 700; font-size: .85rem; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.lifeline:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2,124,197,.25); }
.lifeline.used, .lifeline:disabled { opacity: .38; cursor: default; text-decoration: line-through; }

.kbc-expert { border-left: 3px solid var(--brand-orange, #F26722); }

.play-option .poll-bar {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; min-width: 130px;
}
.play-option .poll-bar .poll-fill {
  display: block; height: 8px; border-radius: 4px; background: var(--brand-blue, #027CC5);
  min-width: 2px; max-width: 90px; flex: 0 0 auto;
}
.play-option .poll-bar em { font-style: normal; font-size: .8rem; font-weight: 700; opacity: .8; }
.play-option { display: flex; align-items: center; gap: .6rem; }

.play-option.opt-correct { border-color: #1d9e55; background: rgba(29,158,85,.12); font-weight: 700; }
.play-option.opt-wrong { border-color: #d64545; background: rgba(214,69,69,.10); }

.kbc-ladder { position: sticky; top: 84px; padding: 1rem 1.1rem; }
.kbc-ladder .rung {
  display: flex; align-items: center; gap: .55rem; padding: .34rem .55rem; border-radius: 8px;
  font-size: .85rem; border: 1px solid transparent;
}
.kbc-ladder .rung-no { width: 1.4rem; text-align: right; opacity: .55; font-variant-numeric: tabular-nums; }
.kbc-ladder .rung-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbc-ladder .rung-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.kbc-ladder .rung.safe .rung-amt { color: var(--brand-orange, #F26722); }
.kbc-ladder .rung.current {
  border-color: var(--brand-blue, #027CC5); background: rgba(2,124,197,.10); font-weight: 700;
}
.kbc-ladder .rung.cleared { opacity: .55; }
.kbc-ladder .rung.cleared .rung-label { text-decoration: line-through; }

.kbc-final { font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; margin: .4rem 0; color: var(--brand-orange, #F26722); }
.kbc-final span { font-size: 1rem; font-weight: 600; opacity: .7; }

.ms-box { font-size: 1rem; }

/* ---------- content report box (Watch page) ---------- */
.report-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .9rem 1rem; margin: .75rem 0; display: grid; gap: .55rem; max-width: 520px;
}
.report-box select, .report-box input {
  padding: .5rem .65rem; border: 1px solid var(--border, #dfe5ea); border-radius: 8px; background: var(--card); color: inherit;
}

/* small buttons used on catalog cards */
.btn-sm { padding: .3rem .7rem; font-size: .8rem; border-radius: 8px; }

/* ---- store: variant picker ------------------------------------------------ */
.variant-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}
.variant-modal{background:var(--surface,#fff);color:inherit;border-radius:14px;padding:1.1rem 1.25rem;width:min(440px,100%);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.variant-modal__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.variant-modal__head h3{margin:0;font-size:1.05rem}
.variant-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.variant-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;padding:.7rem .85rem;border:1px solid var(--border,#dcdcdc);border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left}
.variant-row:hover{border-color:var(--accent,#1976d2);background:rgba(25,118,210,.06)}
.variant-row__price{font-weight:700;white-space:nowrap}

/* ---- cart: quantity + coupon ---------------------------------------------- */
.cart-line__qty{display:flex;align-items:center;gap:.35rem;margin-top:.3rem}
.qty-btn{width:26px;height:26px;border-radius:8px;border:1px solid var(--border,#dcdcdc);background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1}
.qty-btn:disabled{opacity:.5;cursor:default}
.qty-val{min-width:1.6rem;text-align:center;font-weight:600}
.cart-line__end{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.link-danger{background:none;border:none;color:#d05555;cursor:pointer;font-size:.8rem;padding:0}
.coupon-box{margin:.6rem 0 .2rem}
.coupon-row{display:flex;gap:.5rem}
.coupon-input{flex:1;padding:.5rem .7rem;border:1px solid var(--border,#dcdcdc);border-radius:8px;background:transparent;color:inherit;font:inherit;text-transform:uppercase}
.coupon-msg{margin-top:.4rem;font-size:.8rem;color:#d08a3e}

/* ---- my orders -------------------------------------------------------------- */
.orders-list{display:flex;flex-direction:column;gap:.75rem;max-width:760px}
.order-card{border:1px solid var(--border,#dcdcdc);border-radius:12px;overflow:hidden}
.order-card__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;padding:.85rem 1rem;background:transparent;color:inherit;border:none;cursor:pointer;font:inherit;text-align:left}
.order-card__num{font-weight:700}
.order-card__end{display:flex;align-items:center;gap:.7rem}
.order-card__amt{font-weight:700}
.order-card__body{border-top:1px solid var(--border,#dcdcdc);padding:.6rem 1rem .9rem}
.order-line--sum{font-size:.88rem;opacity:.9}
.order-line--grand{font-weight:700;opacity:1;border-top:1px solid var(--border,#dcdcdc);margin-top:.3rem;padding-top:.5rem}

/* ============================================================
   KBC hot-seat game — glam TV-show stage (scoped to .play-wrap--kbc)
   ============================================================ */
.play-wrap--kbc{
  max-width:none; margin:0; padding:24px clamp(12px,3vw,40px) 56px; color:#f4f6ff; border-radius:16px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(60,120,255,.20), transparent 55%),
    radial-gradient(120% 80% at 80% 0%, rgba(150,70,230,.22), transparent 55%),
    radial-gradient(100% 60% at 50% 120%, rgba(60,120,255,.18), transparent 60%),
    linear-gradient(180deg,#151147 0%,#0b0e2a 45%,#05061a 100%);
}
.play-wrap--kbc::before{
  content:""; position:absolute; inset:0 0 auto 0; height:340px; pointer-events:none; filter:blur(2px);
  background:
    conic-gradient(from 200deg at 15% -10%, transparent 0 30deg, rgba(80,150,255,.16) 40deg, transparent 55deg),
    conic-gradient(from 320deg at 85% -10%, transparent 0 30deg, rgba(170,90,240,.16) 40deg, transparent 55deg);
}
.kbc-stage{ position:relative; display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; max-width:1280px; margin:0 auto; }
@media (max-width:1000px){ .kbc-stage{ grid-template-columns:1fr; } }
.kbc-main{ position:relative; display:flex; flex-direction:column; align-items:center; }

.kbc-topbar{ width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-bottom:14px; }
.kbc-status{ display:flex; gap:10px; flex-wrap:wrap; }
.kbc-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px;
  background:rgba(9,14,40,.7); border:1px solid rgba(246,201,69,.35); color:#e9edff; font-size:13px; font-weight:600; }
.kbc-chip--gold{ color:#f6c945; border-color:rgba(246,201,69,.7); }
.kbc-timer{ justify-self:center; width:104px; height:104px; border-radius:50%; padding:6px; transition:background .4s linear;
  background:conic-gradient(#f6c945 calc(var(--pct,100)*1%), rgba(60,90,170,.35) 0); box-shadow:0 0 22px rgba(246,201,69,.35); }
.kbc-timer__in{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 35%,#12183c,#080b22); border:1px solid rgba(246,201,69,.25); }
.kbc-timer__in b{ font-size:22px; color:#f6c945; font-variant-numeric:tabular-nums; line-height:1; }
.kbc-timer__in small{ font-size:9px; letter-spacing:1.5px; color:#9fb0e0; margin-top:3px; }
.kbc-timer.urgent{ box-shadow:0 0 26px rgba(255,80,80,.6); background:conic-gradient(#ff5a5a calc(var(--pct,100)*1%), rgba(60,90,170,.35) 0); }
.kbc-timer.urgent .kbc-timer__in b{ color:#ff6b6b; }
.kbc-level{ justify-self:end; display:flex; align-items:center; gap:10px; padding:8px 16px; border-radius:12px;
  background:rgba(9,14,40,.7); border:1px solid rgba(246,201,69,.45); }
.kbc-level__badge{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#0a0e28; font-weight:900;
  background:radial-gradient(circle at 40% 30%,#ffe27a,#e0a92e); box-shadow:0 0 12px rgba(246,201,69,.5); }
.kbc-level__t{ font-size:14px; font-weight:800; color:#f6c945; }
.kbc-level__p{ font-size:11px; color:#9fb0e0; }

.kbc-lifelines{ display:flex; gap:14px; justify-content:center; margin-bottom:18px; flex-wrap:wrap; }
.kbc-ll{ min-width:132px; padding:11px 20px; border-radius:999px; font-weight:800; font-size:14px; cursor:pointer; color:#f6c945;
  background:linear-gradient(180deg,rgba(20,26,60,.9),rgba(10,14,36,.9)); border:2px solid rgba(246,201,69,.6);
  box-shadow:0 3px 0 rgba(0,0,0,.3), inset 0 0 14px rgba(246,201,69,.12); transition:transform .1s, box-shadow .15s; }
.kbc-ll:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 0 18px rgba(246,201,69,.4), inset 0 0 16px rgba(246,201,69,.2); }
.kbc-ll:disabled{ cursor:default; }
.kbc-ll.used{ color:#6a7099; border-color:rgba(120,130,170,.4); text-decoration:line-through; opacity:.5; box-shadow:none; }

.kbc-qbox{ width:100%; max-width:940px; padding:30px clamp(18px,4vw,54px); margin-bottom:22px; border-radius:18px;
  background:linear-gradient(180deg,rgba(12,18,50,.92),rgba(7,10,30,.92)); border:2px solid rgba(246,201,69,.7);
  box-shadow:0 0 0 4px rgba(9,12,34,.9), 0 0 34px rgba(60,110,220,.25), inset 0 0 60px rgba(30,50,120,.25); }
.kbc-q{ margin:0; text-align:center; font-family:Georgia,"Times New Roman",serif; font-weight:700; color:#fdfefe;
  font-size:clamp(20px,2.4vw,30px); line-height:1.35; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.kbc-orn{ text-align:center; color:#f6c945; letter-spacing:6px; margin:12px 0 22px; opacity:.85; font-size:13px; }
.kbc-expert{ text-align:center; color:#cfe0ff; background:rgba(60,110,220,.15); border:1px solid rgba(120,160,255,.4);
  border-radius:10px; padding:8px 12px; margin-bottom:14px; font-size:14px; }
.kbc-expert b{ color:#f6c945; }

.kbc-opts{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
@media (max-width:640px){ .kbc-opts{ grid-template-columns:1fr; } }
.kbc-opt{ position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:58px; padding:0 18px 0 10px;
  color:#eef3ff; font-size:clamp(15px,1.4vw,18px); font-weight:600; text-align:left; cursor:pointer;
  background:linear-gradient(180deg,rgba(14,22,58,.95),rgba(9,13,36,.95)); border:2px solid rgba(246,201,69,.55);
  clip-path:polygon(22px 0,100% 0,calc(100% - 22px) 100%,0 100%); transition:transform .08s, box-shadow .15s, border-color .15s, background .15s; }
.kbc-opt::after{ content:""; position:absolute; left:12%; right:6%; bottom:6px; height:2px; border-radius:2px; opacity:.7;
  background:linear-gradient(90deg,transparent,rgba(80,160,255,.9),transparent); }
.kbc-opt:hover:not(:disabled){ transform:translateY(-1px); border-color:#f6c945; box-shadow:0 0 18px rgba(246,201,69,.35); }
.kbc-opt__l{ flex:none; width:42px; height:42px; display:grid; place-items:center; font-family:Georgia,serif; font-weight:800; font-size:20px; color:#f6c945;
  background:linear-gradient(180deg,rgba(20,28,66,.9),rgba(10,15,40,.9)); border:2px solid rgba(246,201,69,.75);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.kbc-opt__t{ flex:1; }
.kbc-opt.chosen{ background:linear-gradient(180deg,#ffd75a,#e6a92c); color:#1a1300; border-color:#fff0b8; box-shadow:0 0 22px rgba(246,201,69,.6); }
.kbc-opt.chosen .kbc-opt__l{ color:#1a1300; background:rgba(255,255,255,.35); border-color:#fff; }
.kbc-opt.chosen::after{ opacity:0; }
.kbc-opt.correct{ background:linear-gradient(180deg,#38c26b,#1f8f4c); color:#04240f; border-color:#8ff0b3; box-shadow:0 0 22px rgba(56,194,107,.6); }
.kbc-opt.wrong{ background:linear-gradient(180deg,#e8524e,#b3302d); color:#2a0605; border-color:#ffb3b0; box-shadow:0 0 22px rgba(232,82,78,.6); }
.kbc-opt.correct .kbc-opt__l, .kbc-opt.wrong .kbc-opt__l{ color:#fff; background:rgba(255,255,255,.25); border-color:#fff; }
.kbc-opt:disabled{ cursor:default; }
.kbc-poll{ position:relative; margin-left:auto; width:90px; height:10px; border-radius:6px; background:rgba(0,0,0,.35); }
.kbc-poll__fill{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#6aa0ff,#3ea1ff); }
.kbc-poll em{ position:absolute; right:0; top:-16px; font-size:11px; font-style:normal; color:#cfe0ff; }

.kbc-note{ margin:16px 0 4px; padding:10px 16px; border-radius:10px; font-weight:700; text-align:center; }
.kbc-note.ok{ background:rgba(56,194,107,.16); border:1px solid rgba(56,194,107,.5); color:#8ff0b3; }
.kbc-note.no{ background:rgba(232,82,78,.16); border:1px solid rgba(232,82,78,.5); color:#ffb3b0; }

.kbc-actions{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:22px; z-index:2; }
.kbc-lock{ display:inline-flex; align-items:center; gap:12px; padding:16px 48px; font-size:20px; font-weight:900; letter-spacing:1px; cursor:pointer; text-transform:uppercase;
  color:#1a1300; background:linear-gradient(180deg,#ffe27a 0%,#f6c945 45%,#e0a12a 100%); border:none;
  clip-path:polygon(26px 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,26px 100%,0 50%);
  box-shadow:0 0 30px rgba(246,201,69,.55), 0 6px 0 rgba(150,100,10,.5); transition:transform .08s, box-shadow .15s; }
.kbc-lock:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 0 40px rgba(246,201,69,.8), 0 6px 0 rgba(150,100,10,.5); }
.kbc-lock:disabled{ filter:grayscale(.4) brightness(.8); cursor:default; box-shadow:0 4px 0 rgba(120,80,10,.4); }
.kbc-lock__ico{ font-size:18px; }
.kbc-walk{ background:none; border:1px solid rgba(246,201,69,.4); color:#e9d9a0; padding:9px 18px; border-radius:999px; font-weight:600; cursor:pointer; text-decoration:none; font-size:13px; }
.kbc-walk:hover{ border-color:#f6c945; color:#f6c945; }
.kbc-podium{ width:min(560px,80%); height:70px; margin-top:8px; border-radius:50%; filter:blur(1px);
  background:radial-gradient(ellipse at 50% 40%, rgba(80,160,255,.5), rgba(60,110,220,.15) 55%, transparent 70%); box-shadow:0 0 60px rgba(60,120,255,.4); }

.kbc-ladder{ position:sticky; top:80px; border-radius:16px; padding:16px 14px; border:2px solid rgba(246,201,69,.6);
  background:linear-gradient(180deg,rgba(12,18,50,.92),rgba(7,10,30,.92)); box-shadow:0 0 26px rgba(30,50,120,.3); }
.kbc-ladder__h{ text-align:center; font-family:Georgia,serif; font-weight:800; letter-spacing:2px; color:#f6c945; padding:6px 0 12px; }
.kbc-ladder__list{ display:flex; flex-direction:column; gap:6px; }
.kbc-rung{ display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; font-weight:700;
  color:#c7d2f2; background:rgba(255,255,255,.02); border:1px solid transparent; }
.kbc-rung__n{ color:#8a97c4; font-size:13px; }
.kbc-rung__l{ font-size:14px; }
.kbc-rung__p{ color:#f6c945; font-variant-numeric:tabular-nums; }
.kbc-rung.cleared{ color:#7f8ab5; }
.kbc-rung.cleared .kbc-rung__p{ color:#b79a4a; }
.kbc-rung.safe{ background:linear-gradient(90deg,rgba(120,70,220,.35),rgba(90,50,180,.15)); border-color:rgba(150,110,240,.5); }
.kbc-rung.safe .kbc-rung__l, .kbc-rung.safe .kbc-rung__n{ color:#e6dcff; }
.kbc-rung.current{ background:linear-gradient(90deg,#ffd75a,#e6a92c); color:#1a1300; border-color:#fff0b8; box-shadow:0 0 18px rgba(246,201,69,.5); }
.kbc-rung.current .kbc-rung__n, .kbc-rung.current .kbc-rung__l, .kbc-rung.current .kbc-rung__p{ color:#1a1300; }
.kbc-safe{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:rgba(9,14,40,.6); border:1px solid rgba(246,201,69,.35); }
.kbc-safe__ico{ font-size:20px; color:#f6c945; }
.kbc-safe b{ display:block; font-size:12px; color:#f6c945; letter-spacing:.5px; }
.kbc-safe small{ font-size:11px; color:#9fb0e0; }

.kbc-summary{ max-width:520px; margin:40px auto; text-align:center; padding:34px; border-radius:18px; color:#f4f6ff;
  background:linear-gradient(180deg,rgba(12,18,50,.95),rgba(7,10,30,.95)); border:2px solid rgba(246,201,69,.6); box-shadow:0 0 40px rgba(60,110,220,.3); }
.kbc-summary__badge{ font-size:56px; }
.kbc-final{ font-size:44px; font-weight:900; color:#f6c945; margin:6px 0; }
.kbc-final span{ font-size:18px; color:#9fb0e0; font-weight:600; }

/* ---- KBC animations + sound toggle ---- */
.kbc-chip--btn{ cursor:pointer; }
.kbc-chip--btn:hover{ border-color:rgba(246,201,69,.8); }

@keyframes kbc-pop{ 0%{ transform:scale(.85); } 55%{ transform:scale(1.06); } 100%{ transform:scale(1); } }
@keyframes kbc-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
@keyframes kbc-glowpulse{ 0%,100%{ box-shadow:0 0 22px rgba(56,194,107,.55); } 50%{ box-shadow:0 0 40px rgba(56,194,107,.95); } }

.kbc-opt.correct{ animation:kbc-pop .45s ease, kbc-glowpulse 1.1s ease-in-out 1; }
.kbc-opt.wrong{ animation:kbc-shake .42s ease; }
.kbc-timer.urgent{ animation:kbc-timerpulse .8s ease-in-out infinite; }
@keyframes kbc-timerpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* badge bounce on win */
.kbc-summary__badge.pop{ animation:kbc-badge 1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes kbc-badge{ 0%{ transform:scale(0) rotate(-25deg); opacity:0; } 60%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.kbc-summary.won .kbc-final{ animation:kbc-pop .6s ease .2s both; }

/* confetti burst */
.kbc-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:18px; }
.kbc-confetti .cf{ position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:.95;
  animation-name:kbc-fall; animation-timing-function:cubic-bezier(.3,.6,.5,1); animation-iteration-count:1; animation-fill-mode:both; }
.kbc-confetti .cf0{ background:#f6c945; } .kbc-confetti .cf1{ background:#3ea1ff; }
.kbc-confetti .cf2{ background:#ff5a8a; } .kbc-confetti .cf3{ background:#38c26b; }
.kbc-confetti .cf4{ background:#a06bff; } .kbc-confetti .cf5{ background:#ff9d3a; }
@keyframes kbc-fall{
  0%{ transform:translateY(-20px) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform:translateY(560px) rotate(720deg); opacity:.9; }
}

/* ---- KBC multiplayer: setup + lobby panels ---- */
.kbc-panel{ max-width:460px; margin:30px auto; padding:30px clamp(20px,4vw,40px); border-radius:18px; text-align:center; color:#f4f6ff;
  background:linear-gradient(180deg,rgba(12,18,50,.95),rgba(7,10,30,.95)); border:2px solid rgba(246,201,69,.7);
  box-shadow:0 0 0 4px rgba(9,12,34,.9), 0 0 34px rgba(60,110,220,.28); }
.kbc-panel__h{ margin:0 0 18px; font-family:Georgia,serif; color:#f6c945; text-shadow:0 2px 10px rgba(0,0,0,.5); }
.kbc-field{ text-align:left; margin-bottom:14px; }
.kbc-field label{ display:block; font-size:12px; font-weight:700; letter-spacing:.5px; color:#9fb0e0; margin-bottom:6px; text-transform:uppercase; }
.kbc-field input{ width:100%; padding:11px 14px; border-radius:10px; font-size:16px; color:#f4f6ff;
  background:rgba(9,14,40,.7); border:1.5px solid rgba(246,201,69,.4); }
.kbc-field input:focus{ outline:none; border-color:#f6c945; box-shadow:0 0 0 3px rgba(246,201,69,.2); }
.kbc-or{ margin:14px 0; color:#7f8ab5; font-size:13px; letter-spacing:1px; }
.kbc-roomlabel{ font-size:12px; letter-spacing:3px; color:#9fb0e0; margin-top:6px; }
.kbc-roomcode{ font-family:"Courier New",monospace; font-size:44px; font-weight:800; letter-spacing:8px; color:#f6c945;
  text-shadow:0 0 22px rgba(246,201,69,.5); margin:2px 0 4px; }
.kbc-waiting{ color:#cfe0ff; font-size:14px; padding:8px; opacity:.85; }
.kbc-rung.me{ background:linear-gradient(90deg,rgba(60,120,255,.28),rgba(60,120,255,.08)); border-color:rgba(120,170,255,.5); }
.dot-on{ width:10px; height:10px; border-radius:50%; background:#38c26b; box-shadow:0 0 8px rgba(56,194,107,.8); }
.dot-off{ width:10px; height:10px; border-radius:50%; background:#6a7099; }
a.kbc-lock{ text-decoration:none; }

/* ============================================================
   Product detail page
   ============================================================ */
.pd-back{ margin-bottom:14px; }
.pd-back a{ color:var(--brand-blue); font-weight:600; font-size:14px; }
.pd{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:start; }
@media (max-width:820px){ .pd{ grid-template-columns:1fr; gap:20px; } }
.pd__media{ position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:var(--surface-2);
  box-shadow:var(--shadow); display:grid; place-items:center; }
.pd__glyph{ font-size:64px; opacity:.85; }
.pd__kind{ color:var(--text-2); text-transform:capitalize; font-size:13px; font-weight:600; letter-spacing:.3px; }
.pd__title{ margin:.25rem 0 .4rem; font-size:clamp(22px,3vw,32px); line-height:1.2; }
.pd__rating{ color:var(--text-2); font-size:14px; margin-top:6px; }
.pd__short{ margin:14px 0; font-size:15px; color:var(--text); }
.pd__price{ display:flex; align-items:baseline; gap:10px; margin:16px 0; }
.pd__price .price__now{ font-size:30px; font-weight:800; color:var(--brand-blue); }
.pd__variants{ margin:16px 0; }
.pd__vlabel{ font-size:13px; font-weight:700; color:var(--text-2); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; }
.pd__variant{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left;
  padding:12px 14px; margin-bottom:8px; border-radius:12px; cursor:pointer; font:inherit;
  background:var(--surface); border:1.5px solid var(--border); transition:border-color .12s, box-shadow .12s; }
.pd__variant:hover{ border-color:var(--brand-blue); }
.pd__variant.sel{ border-color:var(--brand-blue); box-shadow:0 0 0 3px var(--brand-blue-050); }
.pd__variant .price{ font-weight:800; color:var(--brand-blue); }
.pd__cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.pd__cta .add-btn,
.pd__cta .pd__buy{
  flex:1 1 150px; height:48px; margin-top:0; padding:0 20px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:700; font-size:15px; color:#fff;
  transition:background .15s, opacity .15s;
}
.pd__cta .add-btn{ background:var(--brand-orange); }
.pd__cta .add-btn:hover{ background:var(--brand-orange-600); }
.pd__cta .pd__buy{ background:var(--brand-blue); }
.pd__cta .pd__buy:hover{ background:var(--brand-blue-600); }
.pd__cta .add-btn:disabled,
.pd__cta .pd__buy:disabled{ opacity:.55; cursor:default; }
.pd__desc{ margin-top:34px; max-width:820px; }
.pd__desc h3{ margin:0 0 10px; }
.pd__desc p{ color:var(--text); line-height:1.6; white-space:pre-wrap; }

/* ===== Question images in play ===== */
.q-image{ max-width:100%; max-height:220px; border-radius:12px; margin:10px auto; display:block; }
.kbc-qbox .q-image{ max-height:180px; }

/* ===== Channel: social links ===== */
.channel-social{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:4px 0 14px; }
.channel-social a{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600;
  color:var(--brand-blue); background:var(--brand-blue-050); padding:5px 11px; border-radius:999px; }
.channel-social a:hover{ background:var(--brand-blue); color:#fff; }

/* ===== Search page ===== */
.search-page h1{ margin-bottom:14px; }
.search-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.search-filters .chip{ padding:6px 14px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface);
  color:var(--text); font-size:13.5px; font-weight:600; cursor:pointer; }
.search-filters .chip:hover{ border-color:var(--brand-blue); }
.search-filters .chip.active{ background:var(--brand-blue); color:#fff; border-color:transparent; }
.search-taxfilters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 10px; }
.search-taxfilters select{ padding:6px 10px; border-radius:8px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; font-weight:500; cursor:pointer; }
.search-taxfilters .chip{ padding:6px 12px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; }
.search-meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--text-2); font-size:13.5px; margin:12px 0 14px; }
.search-mode{ font-size:12px; font-weight:700; color:var(--brand-blue); background:var(--brand-blue-050); padding:3px 9px; border-radius:999px; }
.search-glyph{ position:absolute; inset:0; display:grid; place-items:center; font-size:42px; opacity:.85; }
.search-snip{ font-size:12.5px; color:var(--text-2); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.thumb-creator{ background:linear-gradient(135deg,#7c3aad,#027cc5); }
.search-empty{ text-align:center; padding:44px 0; }
.search-empty__glyph{ font-size:44px; margin-bottom:8px; }