/* ============================================================================
   RP2 REPORT — DESIGN SYSTEM  (Apple / iOS 26 glassmorphism, dark charcoal)
   Shared contract: the leader dashboard reuses THESE class names + tokens.
   ----------------------------------------------------------------------------
   TOKENS (:root)      màu / bo góc / bóng / spacing scale / blur / motion
   LAYOUT              .app-shell .app-header .app-main .app-bar .container
   SURFACE             .glass  .glass--raised  .glass--flat  .card  .section
   TYPO                .h1 .h2 .h3 .muted .mono .eyebrow
   BUTTON              .btn  .btn--primary .btn--ghost .btn--danger .btn--icon
                       .btn--sm .btn--block  (hover nhấc, press scale)
   FORM                .field .label .input .textarea .segmented
   CHECKBOX            .check  .check__box  .check-row   (dày, dễ chạm mobile)
   BADGE / CHIP        .badge  .badge--own .badge--infringer .badge--unknown
                       .badge--reported .badge--muted  .pill (--draft/submitted/todo)
   BANNER              .banner .banner--warn .banner--info .banner--danger  (gợi ý)
   BRAND               .brand-grid .brand-card  .stat  .count
   DOMAIN / CHANNEL    .domain-row .domain-row--locked .lock
                       .channel-group .channel-item  .count-badge
   EVIDENCE            .evidence-zone .evidence-grid .evidence-thumb .sha
   COUNTDOWN           .countdown .countdown--hot
   FEEDBACK            .toast-wrap .toast  .skeleton  .spinner  .empty
   MOTION              fade / slide-up / lift / press  (200–300ms cubic-bezier)
   RESPONSIVE          mobile-first 1 cột → ≥720 desktop nhiều cột (leader)
   ============================================================================ */

:root {
  /* ---- charcoal base (gradient rất nhẹ) ---- */
  --bg-0:  #14161c;
  --bg-1:  #0f1115;
  --bg-glow: rgba(90, 130, 255, .05);

  /* ---- glass ---- */
  --glass-bg:      rgba(255, 255, 255, .06);
  --glass-bg-2:    rgba(255, 255, 255, .09);
  --glass-border:  rgba(255, 255, 255, .12);
  --glass-hi:      rgba(255, 255, 255, .22);   /* viền kính sáng cạnh trên */
  --glass-blur:    20px;
  --glass-sat:     160%;

  /* ---- text ---- */
  --text:    rgba(255, 255, 255, .96);
  --text-2:  rgba(235, 240, 255, .68);
  --text-3:  rgba(235, 240, 255, .42);
  --on-accent: #fff;

  /* ---- accents ---- */
  --accent:      #0a84ff;   /* iOS blue */
  --accent-2:    #409cff;
  --accent-soft: rgba(10, 132, 255, .18);
  --success:     #30d158;
  --success-soft: rgba(48, 209, 88, .16);
  --danger:      #ff453a;
  --danger-soft: rgba(255, 69, 58, .16);
  --warn:        #ffd60a;
  --warn-soft:   rgba(255, 214, 10, .14);
  --amber:       #ff9f0a;
  --unknown:     #8e8e93;
  --unknown-soft: rgba(142, 142, 147, .18);

  /* ---- radius ---- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-pill: 999px;

  /* ---- spacing scale (4/8/12/16/24) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* ---- shadow (mềm, sâu) ---- */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, .28);
  --shadow-deep: 0 18px 50px rgba(0, 0, 0, .48);
  --shadow-lift: 0 22px 60px rgba(0, 0, 0, .55);

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s;
  --t-mid:  .24s;
  --t-slow: .32s;

  --maxw: 640px;         /* mobile-first cột đơn */
  --maxw-wide: 1440px;   /* leader/wide dashboard — fill wide desktops (was 1160 → dồn cục) */
  --header-h: 56px;      /* khớp chiều cao sidebar__head (56) → border thẳng hàng */
}

/* ========================= RESET-ISH / BASE ========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
               "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 78% -8%, var(--bg-glow), transparent 60%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  letter-spacing: .1px;
  overflow-x: hidden;
}
a { color: var(--accent-2); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent-soft); }

/* ========================= LAYOUT ========================= */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }

.app-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  background: rgba(18, 20, 26, .62);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
  transition: transform .28s var(--ease, cubic-bezier(.4, 0, .2, 1));
  will-change: transform;
}
/* Auto-hide top bar on scroll-down, reveal on scroll-up (menubar tự ẩn hiện).
   Toggled by JS (initHeaderAutoHide); window is the scroll container. */
.app-header.app-header--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .app-header { transition: none; }
  .app-header.app-header--hidden { transform: none; }
}
.app-header .brandmark { font-weight: 700; letter-spacing: .3px; font-size: 16px; }
.app-header .brandmark span { color: var(--accent-2); }
.app-header .spacer { flex: 1; }
.app-header .who { display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--text-2); }
.app-header .avatar {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--accent-soft); border: 1px solid var(--glass-border);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--accent-2);
  overflow: hidden;
}

.app-main { flex: 1; width: 100%; padding: var(--s5) var(--s4) calc(var(--s8) + env(safe-area-inset-bottom)); }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; }
.container--wide { max-width: var(--maxw-wide); }

/* symmetric stacks */
.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }

/* ========================= SURFACE / GLASS ========================= */
.glass, .card, .section {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
/* cạnh trên sáng như kính thật */
.glass::before, .card::before, .section::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-hi), transparent 42%);
  opacity: .5; mask: linear-gradient(#000, transparent 60%);
}
.card { padding: var(--s5); }
.section { padding: var(--s5); }
.glass--raised { box-shadow: var(--shadow-deep); background: var(--glass-bg-2); }
.glass--flat { box-shadow: none; background: rgba(255,255,255,.04); }
.card--pad-lg { padding: var(--s6); }
.card--tight { padding: var(--s4); }

.card__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.card__head .grow { min-width: 0; }

/* ========================= TYPOGRAPHY ========================= */
.h1 { font-size: 22px; font-weight: 700; letter-spacing: .2px; margin: 0; }
.h2 { font-size: 18px; font-weight: 700; margin: 0; }
.h3 { font-size: 15px; font-weight: 600; margin: 0; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); }
.muted { color: var(--text-2); }
.muted-2 { color: var(--text-3); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
/* Guide (Cẩm nang) reference tables render on BOTH staff and leader pages; guide.js emits an
   inline min-width:520px that forces sideways scroll on phones. Neutralize it here (in the
   shared stylesheet all pages load) so 3–4 short columns fit the screen. !important beats the
   inline style. table.tiny is used only by the guide, so this is safe. */
@media (max-width: 640px) { table.tiny { min-width: 0 !important; } }
.mono { font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }

/* ========================= BUTTONS ========================= */
.btn {
  --btn-bg: var(--glass-bg-2);
  --btn-fg: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), opacity var(--t-mid);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover { border-color: var(--glass-hi); box-shadow: var(--shadow-soft); }
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary {
  --btn-bg: linear-gradient(180deg, var(--accent-2), var(--accent));
  --btn-fg: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 8px 22px var(--accent-soft);
}
.btn--primary:hover { box-shadow: 0 12px 30px var(--accent-soft); filter: brightness(1.05); }
.btn--danger { --btn-bg: var(--danger-soft); --btn-fg: #ffd9d6; border-color: rgba(255,69,58,.35); }
.btn--danger:hover { background: rgba(255,69,58,.24); }
.btn--ghost { --btn-bg: transparent; }
.btn--success { --btn-bg: var(--success-soft); --btn-fg: #c9ffd6; border-color: rgba(48,209,88,.35); }
.btn--sm { min-height: 34px; padding: 0 var(--s4); font-size: 13px; }
.btn--xs { min-height: 28px; padding: 0 var(--s3); font-size: 12px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { min-height: 40px; width: 40px; padding: 0; border-radius: var(--r-pill); }

/* ========================= FORM ========================= */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.input, .textarea {
  width: 100%; min-height: 44px; padding: 10px var(--s4);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-border);
  color: var(--text); font-size: 15px;
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease), box-shadow var(--t-mid);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus {
  outline: none; border-color: var(--accent-2);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.textarea { min-height: 78px; resize: vertical; line-height: 1.5; }

/* segmented control (tabs A/B/C) */
.segmented {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
}
.segmented button {
  flex: 1; min-height: 38px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.segmented button[aria-selected="true"] {
  background: var(--glass-bg-2); color: var(--text);
  box-shadow: var(--shadow-soft); border: 1px solid var(--glass-border);
}

/* ========================= CHECKBOX (dày, dễ chạm) ========================= */
.check { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; user-select: none; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 9px;
  border: 2px solid var(--glass-hi);
  background: rgba(255,255,255,.04);
  display: grid; place-items: center;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-fast) var(--ease);
}
.check__box svg { width: 15px; height: 15px; stroke: var(--on-accent); stroke-width: 3.2;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--t-mid) var(--ease-out); }
.check input:checked + .check__box {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent; transform: scale(1.02);
}
.check input:checked + .check__box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 4px var(--accent-soft); }
.check input:disabled + .check__box { opacity: .4; }
.check--danger input:checked + .check__box { background: linear-gradient(180deg, #ff6b62, var(--danger)); }
.check__label { font-size: 14px; }
.check-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--glass-border);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.check-row:hover { background: rgba(255,255,255,.06); }
.check-row.is-on { background: var(--accent-soft); border-color: rgba(10,132,255,.4); }

/* ========================= BADGE / CHIP / PILL ========================= */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  border: 1px solid var(--glass-border); background: var(--glass-bg-2); color: var(--text-2);
  white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--own       { background: var(--success-soft); color: #7ee89a; border-color: rgba(48,209,88,.4); }
.badge--infringer { background: var(--danger-soft);  color: #ff8f88; border-color: rgba(255,69,58,.42); }
.badge--unknown   { background: var(--unknown-soft); color: #c7c7cc; border-color: rgba(142,142,147,.4); }
.badge--reported  { background: var(--accent-soft);  color: #7fbdff; border-color: rgba(10,132,255,.42); }
.badge--muted     { background: rgba(255,255,255,.05); color: var(--text-3); }
.badge--warn      { background: var(--warn-soft); color: #ffe873; border-color: rgba(255,214,10,.4); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--glass-border); background: var(--glass-bg-2); color: var(--text-2);
}
.pill--todo      { color: var(--text-3); }
.pill--draft     { background: var(--warn-soft); color: #ffe873; border-color: rgba(255,214,10,.4); }
.pill--submitted { background: var(--success-soft); color: #7ee89a; border-color: rgba(48,209,88,.42); }
.pill--late      { background: var(--danger-soft); color: #ff8f88; border-color: rgba(255,69,58,.42); }

/* ========================= BANNER (gợi ý, chưa chắc đúng) ========================= */
.banner {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.5;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
}
.banner .ico { flex: 0 0 auto; font-size: 16px; line-height: 1.4; }
.banner--warn   { background: var(--warn-soft);   border-color: rgba(255,214,10,.36); color: #ffe873; }
.banner--info   { background: var(--accent-soft); border-color: rgba(10,132,255,.36); color: #b6d8ff; }
.banner--danger { background: var(--danger-soft); border-color: rgba(255,69,58,.4);  color: #ffb3ad; }
.banner--success{ background: var(--success-soft);border-color: rgba(48,209,88,.4);  color: #a5f0ba; }
.banner strong { color: inherit; }

/* ========================= BRAND GRID (screen 1) ========================= */
.brand-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.brand-card {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid), background var(--t-mid);
  text-align: left; width: 100%;
}
.brand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-deep); border-color: var(--glass-hi); }
.brand-card:active { transform: translateY(0) scale(.99); }
.brand-card__logo {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .3px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid var(--glass-border); color: var(--text);
}
.brand-card__body { flex: 1; min-width: 0; }
.brand-card__name { font-weight: 700; font-size: 15px; }
.brand-card__meta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: 3px; }
.brand-card__chev { color: var(--text-3); font-size: 20px; }

.stat { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-2); }
.stat b { font-size: 14px; color: var(--text); font-weight: 700; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--glass-bg-2); border: 1px solid var(--glass-border);
  font-size: 12px; font-weight: 700; }

/* ========================= DOMAIN ROW / CHANNELS (screen 2C) ========================= */
.domain-row {
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}
.domain-row__head { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s4); }
.domain-row__title { font-weight: 700; font-size: 15px; word-break: break-all; }
.domain-row__backend { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.domain-row__backend b { color: var(--text); font-weight: 600; }
.domain-row__body { padding: 0 var(--s4) var(--s4); }
.domain-row--locked { opacity: .82; background: rgba(48,209,88,.05); border-color: rgba(48,209,88,.24); }
.domain-row--locked .domain-row__title { color: var(--text-2); }

.lock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: #7ee89a; }
.lock svg { width: 13px; height: 13px; }

/* channel checklist grouped by phase */
.channel-group { margin-top: var(--s3); }
.channel-group__title { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; }
.channel-group__title .eyebrow { color: var(--text-3); }
.channel-list { display: flex; flex-direction: column; gap: var(--s2); }
.channel-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--glass-border);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid), opacity var(--t-mid);
}
.channel-item.is-reported { background: var(--accent-soft); border-color: rgba(10,132,255,.4); }
.channel-item.is-locked { opacity: .5; }
/* the whole row is a clickable <label> toggling the report checkbox — give it hover feedback
   like .check-row. Exclude is-reported so a checked row keeps its accent, and is-locked. */
.channel-item:not(.is-locked):not(.is-reported) { cursor: pointer; }
.channel-item:not(.is-locked):not(.is-reported):hover { background: rgba(255,255,255,.06); border-color: var(--glass-hi, rgba(255,255,255,.34)); }
.channel-item__body { flex: 1; min-width: 0; }
.channel-item__name { font-size: 13.5px; font-weight: 600; }
.channel-item__target { font-size: 11.5px; color: var(--text-3); word-break: break-all; }
.channel-item__sla { font-size: 11px; color: var(--text-3); }
.count-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: #9fcbff; border: 1px solid rgba(10,132,255,.35);
  font-size: 12px; font-weight: 700;
}

/* ========================= EVIDENCE ========================= */
.evidence-zone {
  border: 1.5px dashed var(--glass-hi);
  border-radius: var(--r-md);
  padding: var(--s5); text-align: center;
  background: rgba(255,255,255,.03);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid);
  cursor: pointer;
}
.evidence-zone:hover, .evidence-zone.is-drag { background: var(--accent-soft); border-color: var(--accent-2); }
.evidence-zone__ico { font-size: 26px; margin-bottom: var(--s2); }
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.evidence-thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--glass-border); background: rgba(0,0,0,.3);
}
.evidence-thumb img { width: 100%; height: 100%; object-fit: cover; }
.evidence-thumb .rm {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 0; color: #fff; font-size: 13px; cursor: pointer; display: grid; place-items: center;
}
.evidence-thumb.is-dup { border-color: var(--warn); box-shadow: 0 0 0 2px var(--warn-soft) inset; }
.sha { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: var(--text-3); word-break: break-all; }

/* ========================= COUNTDOWN ========================= */
.countdown {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255,69,58,.14), rgba(255,159,10,.08));
  border: 1px solid rgba(255,69,58,.3);
}
.countdown__label { font-size: 12.5px; font-weight: 700; color: #ffb3ad; letter-spacing: .3px; }
.countdown__clock { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.countdown--hot { animation: pulse-warn 1.6s var(--ease) infinite; }
.countdown--done { background: var(--success-soft); border-color: rgba(48,209,88,.3); }
.countdown--done .countdown__label { color: #7ee89a; }

/* ========================= TOAST ========================= */
.toast-wrap {
  position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  z-index: 90; pointer-events: none; padding: 0 var(--s4);
}
.toast {
  pointer-events: auto; max-width: 460px; width: fit-content;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5); border-radius: var(--r-pill);
  background: rgba(28, 30, 38, .82);
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-deep);
  font-size: 14px; font-weight: 500;
  animation: toast-in var(--t-slow) var(--ease-out);
}
.toast .ico { font-size: 16px; }
.toast--success { border-color: rgba(48,209,88,.4); }
.toast--error   { border-color: rgba(255,69,58,.45); }
.toast--warn    { border-color: rgba(255,214,10,.5); }
.toast--info    { border-color: rgba(10,132,255,.4); }
.toast.is-out { animation: toast-out var(--t-mid) var(--ease) forwards; }

/* ========================= SKELETON / SPINNER / EMPTY ========================= */
.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton--line { height: 14px; margin: 8px 0; }
.skeleton--card { height: 76px; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--glass-border); border-top-color: var(--accent-2);
  animation: spin .7s linear infinite; display: inline-block;
}
.empty { text-align: center; padding: var(--s8) var(--s5); color: var(--text-3); }
.empty__ico { font-size: 34px; margin-bottom: var(--s3); opacity: .7; }

/* ========================= LOGIN ========================= */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--s6); }
.login-card { width: 100%; max-width: 380px; text-align: center; padding: var(--s8) var(--s6); }
.login-card .logo {
  width: 62px; height: 62px; margin: 0 auto var(--s4); border-radius: 20px;
  display: grid; place-items: center; font-weight: 800; font-size: 20px;
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  box-shadow: 0 12px 30px var(--accent-soft);
}
.login-card .tg-slot { margin-top: var(--s6); min-height: 48px; display: grid; place-items: center; }

/* ========================= VIEW TRANSITIONS ========================= */
.view { animation: view-in var(--t-slow) var(--ease-out); }
.fade-in { animation: fade var(--t-mid) var(--ease); }
.slide-up { animation: slide-up var(--t-slow) var(--ease-out); }

@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-warn { 0%,100% { box-shadow: 0 0 0 0 rgba(255,69,58,.0); } 50% { box-shadow: 0 0 0 6px rgba(255,69,58,.12); } }

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

/* ========================= RESPONSIVE (leader ≥720) ========================= */
@media (min-width: 720px) {
  .app-main { padding: var(--s6) var(--s6) var(--s8); }
  .brand-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
}
@media (min-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
}

/* sticky submit bar (staff) */
.submit-bar {
  position: sticky; bottom: 0; z-index: 30;
  margin: var(--s5) calc(-1 * var(--s4)) 0;
  padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(15,17,21,.92), rgba(15,17,21,.4));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--glass-border);
}

/* ========================= NAV BAR (header menu) ========================= */
.app-header nav { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.app-header nav::-webkit-scrollbar { display: none; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 32px; padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent; color: var(--text-2);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.nav-btn:hover { background: var(--glass-bg-2); color: var(--text); }
.nav-btn.is-active { background: var(--glass-bg-2); color: var(--text); border-color: var(--glass-border); box-shadow: var(--shadow-soft); }
.nav-btn:disabled { opacity: .45; cursor: not-allowed; background: transparent; }
.nav-soon {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--r-pill);
  background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--text-3);
}

/* ========================= MODAL (glass) ========================= */
.modal-wrap {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: var(--s5);
  background: rgba(10, 12, 16, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade var(--t-mid) var(--ease);
}
.modal { width: 100%; max-width: 380px; padding: var(--s5); animation: slide-up var(--t-slow) var(--ease-out); }

/* utility */
.hidden { display: none !important; }
.divider { height: 1px; background: var(--glass-border); margin: var(--s4) 0; border: 0; }
.hr-soft { height: 1px; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); border: 0; margin: var(--s3) 0; }