/* ============================================================================
   RP2 REPORT — LIQUID GLASS THEME LAYER  (CaMell v6.3 "macOS Liquid Glass")
   ----------------------------------------------------------------------------
   Load AFTER style.css (+ leader.css). SKIN ONLY — no layout/structure/ID
   changes. Source of truth: CaMell_v6.3/Themes/DarkTheme.xaml
   ("macOS Liquid Glass Dark Theme").
   Recipe:
     1) :root token overrides → v6.3 palette / radius / shadow / motion
     2) body = main_bg.png (fixed, cover) + dark overlay → bg peeks through
     3) every surface = FROSTED TRANSLUCENT glass: backdrop-filter blur+saturate,
        WHITE-alpha borders, soft drop-shadows, iOS spring hover-scale
   ============================================================================ */

/* ========================= 1. TOKEN OVERRIDES (v6.3) ========================= */
:root {
  /* base */
  --bg-0: #0a0e1a;
  --bg-1: #080c18;
  --bg-glow: rgba(0, 232, 255, .06);

  /* frosted glass — panels are TRANSLUCENT, the bg image shows through */
  --glass-bg:      rgba(16, 24, 38, .48);   /* panel glass */
  --glass-bg-2:    rgba(255, 255, 255, .09);/* glass button fill */
  --glass-border:  rgba(255, 255, 255, .22);/* glass edge (white alpha) */
  --glass-hi:      rgba(255, 255, 255, .33);/* normal border / bright edge */
  --glass-blur:    22px;
  --glass-sat:     130%;

  /* extra v6.3 surfaces */
  --lg-card-bg:      rgba(21, 27, 46, .72); /* cards: a bit more opaque for text */
  --lg-soft-bg:      rgba(20, 24, 40, .42); /* tool/soft cards */
  --lg-input-bg:     rgba(13, 16, 32, .88);
  --lg-border-subtle: rgba(255, 255, 255, .19);

  /* text — near-white, softer */
  --text:    #FAFAFF;
  --text-2:  #E8E8F8;
  --text-3:  #CCD0E8;
  --on-accent: #fff;

  /* accents — brighter multi-neon (v6.3) */
  --accent:      #60AFFF;  /* blue */
  --accent-2:    #7DB5FF;
  --lg-cyan:     #00E8FF;
  --lg-teal:     #00FFD0;
  --lg-purple:   #D090FF;
  --lg-pink:     #FF70B8;
  --accent-soft: rgba(96, 175, 255, .18);
  --success:     #00FF80;
  --success-soft: rgba(0, 255, 128, .14);
  --danger:      #FF6060;
  --danger-soft: rgba(255, 96, 96, .16);
  --warn:        #FEF070;
  --warn-soft:   rgba(254, 240, 112, .13);
  --amber:       #FFC04A;
  --unknown:     #CCD0E8;
  --unknown-soft: rgba(204, 208, 232, .14);

  /* radius — rounder v6.3 scale: card 12-14 · button 10 · input 10 · pill 20 · small 6 */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-pill: 20px;

  /* soft drop-shadows (v6.3 keeps them) */
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, .35);                       /* cards */
  --shadow-deep: 0 8px 24px rgba(0, 0, 0, .42);                       /* panels */
  --shadow-lift: 0 12px 36px rgba(0, 0, 0, .5), 0 0 3px rgba(0, 232, 255, .12);

  /* motion — iOS spring/bounce (150/250/380ms) */
  --ease:      cubic-bezier(.22, .61, .36, 1);        /* leave / settle */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --lg-spring: cubic-bezier(.34,1.56,.64,1);          /* overshoot = BackEase */
  --t-fast: .15s;
  --t-mid:  .25s;
  --t-slow: .38s;
}

/* ========================= 2. BODY / BACKGROUND ========================= */
body {
  /* dark 3D puzzle w/ blue neon glow + dark overlay so text pops
     but the image peeks through the translucent panel gaps */
  background-image:
    linear-gradient(rgba(8, 12, 24, .74), rgba(10, 14, 26, .84)),
    url(assets/main_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Segoe UI Variable", "Segoe UI Variable Text", Inter, "Segoe UI",
               -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400; /* v6.3: light/normal weights, softer */
  color: var(--text);
}
a { color: var(--accent); }
::selection { background: rgba(0, 232, 255, .28); }

/* focus = cyan 1.5px ring */
:focus-visible {
  outline: 1.5px solid var(--lg-cyan);
  outline-offset: 2px;
}

/* softer heading weights */
.h1 { font-weight: 600; }
.h2 { font-weight: 600; }
.h3 { font-weight: 500; }

/* ---- thin scrollbar: 6px → 8px hover, opacity .25 → .65 ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar:hover { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .65); }

/* ========================= 3. HEADER / TOPBAR / NAV ========================= */
.app-header {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid var(--lg-border-subtle);
  box-shadow: var(--shadow-deep);
}
.app-header .brandmark { font-weight: 600; color: var(--text); }
.app-header .brandmark span {
  background: linear-gradient(90deg, var(--accent), var(--lg-cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent);
}
.app-header .avatar, .nv-avatar {
  border-radius: 50%; /* keep circular despite pill=20 */
  background: var(--accent-soft);
  border: 1px solid var(--glass-border);
  color: var(--accent);
}

.nav-btn { border-radius: var(--r-pill); color: var(--text-3); font-weight: 500; }
.nav-btn:hover { background: rgba(255, 255, 255, .09); color: var(--text); }
.nav-btn.is-active {
  background: rgba(255, 255, 255, .12);
  color: var(--text);
  border-color: rgba(255,255,255,.33);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 3px rgba(0, 232, 255, .12);
}
.nav-soon { border-color: var(--lg-border-subtle); color: var(--text-3); }

/* ========================= 4. GLASS SURFACES ========================= */
/* panels */
.glass, .section {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
}
/* cards: a bit more opaque for text readability */
.card {
  background: var(--lg-card-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.glass--raised { background: rgba(21, 27, 46, .72); box-shadow: var(--shadow-lift); }
.glass--flat { background: var(--lg-soft-bg); }
/* frosted top edge */
.glass::before, .card::before, .section::before, .kpi::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .33), transparent 42%);
  opacity: .35;
}

/* soft / tool cards */
.check-row, .channel-item, .drill-domain, .evidence-zone,
.segmented, .date-field {
  background: var(--lg-soft-bg);
  border-color: var(--lg-border-subtle);
}
.check-row, .channel-item, .drill-domain { border-radius: var(--r-md); }

/* ========================= 5. BRAND CARDS / KPI / STAT ========================= */
.brand-card {
  background: var(--lg-card-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.brand-card:hover { border-color: rgba(255,255,255,.33); box-shadow: var(--shadow-lift); }
.brand-card__logo {
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(96, 175, 255, .28), rgba(0, 232, 255, .1));
  border: 1px solid var(--glass-border);
}
.brand-card__name { font-weight: 600; }

.kpi, .brandsum, .fraud-item {
  background: var(--lg-card-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.kpi__val { font-weight: 600; }
.kpi--good   .kpi__val { color: var(--success); text-shadow: 0 0 3px rgba(0, 255, 128, .12); }
.kpi--warn   .kpi__val { color: var(--warn); }
.kpi--bad    .kpi__val { color: var(--danger); }
.kpi--accent .kpi__val { color: var(--accent); text-shadow: 0 0 3px rgba(0, 232, 255, .12); }
.kpi--alert {
  border-color: rgba(255, 96, 96, .45);
  /* leader.css paints old iOS-red rgba(255,69,58,.12) — re-wash with v6.3 red */
  background: linear-gradient(160deg, rgba(255, 96, 96, .12), var(--lg-card-bg));
}
.stat b { font-weight: 600; }
.count { border-color: var(--glass-border); background: rgba(255, 255, 255, .09); }
.stat-chip { background: rgba(255, 255, 255, .09); border-color: var(--lg-border-subtle); }
.stat-chip--own       { color: var(--success); border-color: rgba(0,255,128,.35);  background: var(--success-soft); }
.stat-chip--foreign,
.stat-chip--notreported { color: var(--danger); border-color: rgba(255,96,96,.4); background: var(--danger-soft); }
.stat-chip--reported  { color: var(--accent-2); border-color: rgba(96,175,255,.4); background: var(--accent-soft); }

/* ========================= 6. PILL / BADGE (radius 20, neon tints) ========================= */
.badge, .pill, .count-badge, .sev, .cover-tag, .drill-chan {
  border-radius: var(--r-pill);
}
.badge, .pill { background: rgba(255, 255, 255, .09); border-color: var(--glass-border); font-weight: 600; }
.badge--own       { background: var(--success-soft); color: var(--success);  border-color: rgba(0, 255, 128, .38); }
.badge--infringer { background: var(--danger-soft);  color: #FF9C9C;         border-color: rgba(255, 96, 96, .42); }
.badge--unknown   { background: var(--unknown-soft); color: var(--unknown);  border-color: rgba(204, 208, 232, .35); }
.badge--reported  { background: var(--accent-soft);  color: var(--accent-2); border-color: rgba(96, 175, 255, .42); }
.badge--warn      { background: var(--warn-soft);    color: var(--warn);     border-color: rgba(254, 240, 112, .38); }
.pill--draft      { background: var(--warn-soft);    color: var(--warn);     border-color: rgba(254, 240, 112, .38); }
.pill--submitted  { background: var(--success-soft); color: var(--success);  border-color: rgba(0, 255, 128, .4); }
.pill--late       { background: var(--danger-soft);  color: #FF9C9C;         border-color: rgba(255, 96, 96, .42); }
.count-badge      { background: var(--accent-soft);  color: var(--accent-2); border-color: rgba(96, 175, 255, .38); }
.sev--high { color: #FF9C9C; border-color: rgba(255, 96, 96, .42); }
.sev--med  { color: var(--warn); border-color: rgba(254, 240, 112, .4); }
.sev--low  { background: var(--unknown-soft); color: var(--unknown); border-color: rgba(204, 208, 232, .35); }
.cover-tag { background: var(--success-soft); color: var(--success); border-color: rgba(0, 255, 128, .32); }
.cover-tag--miss { background: var(--warn-soft); color: var(--warn); border-color: rgba(254, 240, 112, .34); }
.drill-chan.is-on { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(96, 175, 255, .4); }
.lock { color: var(--success); }

/* ========================= 7. MATRIX TABLE (leader) ========================= */
.matrix-wrap { border-radius: var(--r-lg); }
table.matrix thead th {
  background: rgba(16, 24, 38, .72);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,.33);
  color: var(--text-3);
}
table.matrix tbody td { border-bottom: 1px solid var(--lg-border-subtle); }
table.matrix tbody tr:hover { background: rgba(255, 255, 255, .07); }
table.matrix tbody tr.is-missing { background: rgba(255, 96, 96, .1); }
table.matrix tbody tr.is-missing:hover { background: rgba(255, 96, 96, .16); }
table.matrix tbody tr.is-late td .submit-time { color: var(--danger); }
.nv-name { font-weight: 600; }
.cell-alert { color: var(--danger); font-weight: 700; }

/* ========================= 8. TABS / SEGMENTED ========================= */
.segmented { border-radius: var(--r-pill); border: 1px solid var(--lg-border-subtle); }
.segmented button { border-radius: calc(var(--r-pill) - 3px); font-weight: 500; }
.segmented button[aria-selected="true"] {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255,255,255,.33);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* ========================= 9. BUTTONS ========================= */
.btn {
  border-radius: 10px;
  font-weight: 500;
  /* glass button: white-alpha fill + white glass border */
  --btn-bg: rgba(255, 255, 255, .09);
  border-color: var(--glass-border);
}
.btn:hover { border-color: var(--accent); box-shadow: var(--shadow-soft); }
.btn--icon { border-radius: 10px; }

/* primary = solid v6.3 blue */
.btn--primary {
  --btn-bg: #60AFFF;
  --btn-fg: var(--on-accent);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(96, 175, 255, .3);
}
.btn--primary:hover { --btn-bg: #7DB5FF; filter: none; box-shadow: 0 8px 24px rgba(96, 175, 255, .38); border-color: transparent; }
.btn--primary:active { --btn-bg: #2563EB; }

.btn--danger { --btn-bg: var(--danger-soft); --btn-fg: #FFC9C9; border-color: rgba(255, 96, 96, .4); }
.btn--danger:hover { background: rgba(255, 96, 96, .26); border-color: rgba(255, 96, 96, .55); }
.btn--success { --btn-bg: var(--success-soft); --btn-fg: #B8FFD9; border-color: rgba(0, 255, 128, .4); }
.btn--ghost { --btn-bg: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, .09); }

/* ========================= 10. FORMS / INPUTS ========================= */
.input, .textarea {
  background: rgba(13, 16, 32, .88);
  border: 1.5px solid rgba(255,255,255,.33);
  border-radius: 10px;
  color: var(--text);
  caret-color: #00E8FF;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); font-style: italic; }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(13, 16, 32, .92);
  box-shadow: 0 0 0 .5px var(--accent), 0 0 0 4px var(--accent-soft); /* reads as 2px blue */
}
.label { font-weight: 500; color: var(--text-2); }

/* search / date (leader toolbar) */
.date-field {
  border-radius: var(--r-pill);
  background: var(--lg-input-bg);
  border: 1.5px solid rgba(255, 255, 255, .33);
}
.date-field input[type="date"] { color: var(--text); caret-color: var(--lg-cyan); }
.date-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* checkbox */
.check__box { border-color: rgba(255,255,255,.33); background: rgba(13, 16, 32, .6); border-radius: var(--r-sm); }
.check input:checked + .check__box { background: linear-gradient(180deg, #7DB5FF, #60AFFF); }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px rgba(0, 232, 255, .25); }
.check-row.is-on { background: var(--accent-soft); border-color: rgba(96, 175, 255, .42); }

/* ========================= 11. BANNERS / COUNTDOWN / SUBMIT BAR ========================= */
.banner { border-radius: var(--r-md); border-color: var(--lg-border-subtle); background: var(--lg-soft-bg); }
.banner--warn   { background: var(--warn-soft);   border-color: rgba(254, 240, 112, .34); color: #FEF3A0; }
.banner--info   { background: var(--accent-soft); border-color: rgba(96, 175, 255, .36);  color: #C6E0FF; }
.banner--danger { background: var(--danger-soft); border-color: rgba(255, 96, 96, .42);   color: #FFC0BD; }
.banner--success{ background: var(--success-soft);border-color: rgba(0, 255, 128, .38);   color: #B8FFD9; }

.countdown {
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(255, 96, 96, .16), rgba(255, 192, 74, .08));
  border: 1px solid rgba(255, 96, 96, .35);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: var(--shadow-soft);
}
.countdown__label { color: #FFC0BD; }
.countdown__clock { font-weight: 700; }
.countdown--done { background: var(--success-soft); border-color: rgba(0, 255, 128, .35); }
.countdown--done .countdown__label { color: var(--success); }

.submit-bar {
  background: rgba(16, 24, 38, .55);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-top: 1px solid var(--lg-border-subtle);
}

/* domain rows */
.domain-row {
  background: var(--lg-card-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.domain-row--locked { background: rgba(0, 255, 128, .06); border-color: rgba(0, 255, 128, .26); }
.channel-item.is-reported { background: var(--accent-soft); border-color: rgba(96, 175, 255, .42); }
.evidence-zone { border: 1.5px dashed rgba(255,255,255,.33); border-radius: var(--r-md); }
.evidence-zone:hover, .evidence-zone.is-drag { background: var(--accent-soft); border-color: var(--accent); }
.evidence-thumb { border-radius: var(--r-sm); border-color: var(--glass-border); }

/* gap / fraud accents */
.gap-domain { background: rgba(255, 96, 96, .1); border-color: rgba(255, 96, 96, .28); border-radius: var(--r-md); }
.gap-domain .g-staff { color: #FFC0BD; }
.brandsum.has-gap {
  border-color: rgba(255, 96, 96, .4);
  /* leader.css paints old iOS-red rgba(255,69,58,.08) — re-wash with v6.3 red */
  background: linear-gradient(160deg, rgba(255, 96, 96, .08), var(--lg-card-bg));
}
.fraud-item--high { border-color: rgba(255, 96, 96, .45); }
.fraud-item--med  { border-color: rgba(254, 240, 112, .32); }

/* ========================= 12. MODAL / LOGIN / TOAST ========================= */
.modal-wrap { background: rgba(6, 9, 18, .55); }
.modal-mask { background: rgba(6, 9, 18, .55); } /* leader drill scrim = same as staff modal */
.modal {
  background: rgba(21, 27, 46, .72);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.33);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
.modal-panel {
  background: rgba(16, 24, 38, .82);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-left: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lift);
}
.modal-close { background: rgba(255, 255, 255, .09); border-color: var(--glass-border); border-radius: 10px; }
.modal-close:hover { border-color: var(--accent); background: rgba(255, 255, 255, .14); }

/* login: its own bg image + frosted card */
.login-wrap {
  background-image:
    linear-gradient(rgba(8, 12, 24, .68), rgba(10, 14, 26, .8)),
    url(assets/login_bg.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.login-card {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.33);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
.login-card .logo {
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, #60AFFF, #00E8FF);
  box-shadow: 0 10px 28px rgba(96, 175, 255, .35);
}
/* login decoration — 2 glow ellipse quanh card (v6.3 KEEP list) so it isn't a bare card */
.login-wrap { position: relative; overflow: hidden; isolation: isolate; }
.login-wrap::before, .login-wrap::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  filter: blur(90px); pointer-events: none; opacity: .55;
}
.login-wrap::before {
  width: 520px; height: 520px; top: -160px; left: -120px;
  background: radial-gradient(circle, rgba(0, 232, 255, .45), transparent 68%);
}
.login-wrap::after {
  width: 560px; height: 560px; bottom: -180px; right: -140px;
  background: radial-gradient(circle, rgba(96, 175, 255, .40), transparent 70%);
}
.login-wrap > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .login-wrap::before { animation: lg-glow-a 9s var(--ease) infinite alternate; }
  .login-wrap::after  { animation: lg-glow-b 11s var(--ease) infinite alternate; }
}
@keyframes lg-glow-a { to { transform: translate(40px, 30px) scale(1.08); } }
@keyframes lg-glow-b { to { transform: translate(-36px, -28px) scale(1.06); } }
/* subtle glass halo ring around the login card */
.login-card { position: relative; }
.login-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  padding: 1px; background: linear-gradient(160deg, rgba(0,232,255,.5), rgba(96,175,255,.15), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.toast {
  background: rgba(16, 24, 38, .78);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-deep);
}
.toast--success { border-color: rgba(0, 255, 128, .4); }
.toast--error   { border-color: rgba(255, 96, 96, .45); }
.toast--info    { border-color: rgba(96, 175, 255, .4); }

.spinner { border-color: var(--glass-border); border-top-color: var(--lg-cyan); }
.skeleton { border-radius: var(--r-md); }

/* ========================= 13. MOTION — iOS SPRING (v6.3) ========================= */
@media (prefers-reduced-motion: no-preference) {

  /* cards / tools: hover spring-scale 1.045 (250ms overshoot), leave 380ms settle */
  .brand-card, .brandsum, .domain-row, .fraud-item, .channel-item, .check-row {
    transition:
      transform 380ms cubic-bezier(.22,.61,.36,1),
      box-shadow 250ms var(--ease),
      border-color 250ms var(--ease),
      background 250ms var(--ease);
    will-change: transform;
  }
  .brand-card:hover, .brandsum:hover, .domain-row:hover, .fraud-item:hover {
    transform: scale(1.045);
    transition: transform 250ms cubic-bezier(.34,1.56,.64,1),
                box-shadow 250ms var(--ease), border-color 250ms var(--ease);
  }
  .brand-card:active { transform: scale(1.01); }

  /* stat/KPI cards: subtler 1.015 */
  .kpi, .stat-chip {
    transition: transform 380ms cubic-bezier(.22,.61,.36,1), box-shadow 250ms var(--ease);
    will-change: transform;
  }
  .kpi:hover, .stat-chip:hover {
    transform: scale(1.015);
    transition: transform 250ms cubic-bezier(.34,1.56,.64,1), box-shadow 250ms var(--ease);
  }

  /* buttons: press scale .97 */
  .btn { transition: transform 150ms var(--lg-spring), box-shadow 250ms var(--ease),
                     background 250ms var(--ease), border-color 250ms var(--ease), opacity 250ms; }
  .btn:active { transform: scale(.97); }
  .modal-close:active { transform: scale(.97); }

  /* nav: subtle white-alpha bg + tiny spring scale */
  .nav-btn { transition: transform 250ms cubic-bezier(.34,1.56,.64,1),
                         background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease); }
  .nav-btn:hover { transform: scale(1.04); }
  .nav-btn:active { transform: scale(.97); }
  .segmented button { transition: background 250ms var(--ease), color 250ms var(--ease); }

  /* thumbnails spring */
  .thumb-row img { transition: transform 250ms cubic-bezier(.34,1.56,.64,1), border-color 250ms var(--ease); }
  .thumb-row img:hover { transform: scale(1.045); }

  /* takedown cards: v6.3 spring scale (overrides leader.css translateY(-2px)) */
  .tk-card {
    transition: transform 250ms cubic-bezier(.34,1.56,.64,1), box-shadow 250ms var(--ease);
    will-change: transform;
  }
  .tk-card:hover { transform: scale(1.045); }

  /* entrance: ONE fade-in-up on the VIEW per route-swap (v6.3) —
     KHÔNG animate từng card, tránh cả trang "bung" mỗi lần render */
  .view { animation: lg-fade-in-up 380ms var(--ease-out); }
}

@keyframes lg-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ========================= 14. SPLASH LOADER — 3-dot stagger (v6.3) ========================= */
/* Dùng: <div class="splash-dots"><span></span><span></span><span></span></div> */
.splash-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.splash-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lg-cyan);
  box-shadow: 0 0 6px rgba(0, 232, 255, .45);
  opacity: .35;
}
@media (prefers-reduced-motion: no-preference) {
  .splash-dots span { animation: lg-dot-pulse 900ms var(--ease) infinite both; }
  .splash-dots span:nth-child(2) { animation-delay: 150ms; }
  .splash-dots span:nth-child(3) { animation-delay: 300ms; }
}
@keyframes lg-dot-pulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  40%      { opacity: 1;   transform: scale(1.15); }
}

/* ========================= 15. SUB-TAB UNDERLINE (v6.3) ========================= */
/* 2px accent underline trượt vào dưới tab đang chọn (.segmented / [role=tab]) */
.segmented button, [role="tab"] { position: relative; }
.segmented button::after, [role="tab"]::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--lg-cyan));
  box-shadow: 0 0 6px rgba(0, 232, 255, .4);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
}
.segmented button[aria-selected="true"]::after,
[role="tab"][aria-selected="true"]::after,
[role="tab"].is-active::after {
  opacity: 1;
  transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
  .segmented button::after, [role="tab"]::after {
    transition: transform 250ms var(--lg-spring), opacity 250ms var(--ease);
  }
}

/* reduced motion: kill spring transforms too (style.css already zeroes durations) */
@media (prefers-reduced-motion: reduce) {
  .brand-card:hover, .brandsum:hover, .domain-row:hover, .fraud-item:hover,
  .kpi:hover, .stat-chip:hover, .nav-btn:hover, .thumb-row img:hover,
  .tk-card:hover { transform: none; }
  .splash-dots span { animation: none; opacity: .7; }
}