/* ============================================================
   SF6 Replay Web - eSports UI layer
   Loaded AFTER bootstrap + style.css. Recolors Bootstrap surfaces
   via CSS variables and adds branded components. Keeps all existing
   markup / IDs / data-binding intact.
   ============================================================ */

/* ---------- palette + Bootstrap variable overrides ---------- */
:root,
:root[data-bs-theme="dark"] {
  --es-bg:#070a0f; --es-panel:#0d1420; --es-panel2:#111a29; --es-line:#1e2c42;
  --es-cyan:#00e5ff; --es-mag:#ff2e6e; --es-amber:#ffb020; --es-white:#eef4ff; --es-mute:#5b6b82;
  --es-ink:#c6d2e4;
  --es-p1:#00e5ff; --es-p2:#ff2e6e; --es-win:#00e5ff; --es-loss:#ff2e6e;
  --es-grid:rgba(30,44,66,.55); --es-veil:rgba(3,5,9,.85);

  /* Bootstrap surfaces */
  --bs-body-bg:#070a0f; --bs-body-bg-rgb:7,10,15;
  --bs-body-color:#c6d2e4; --bs-body-color-rgb:198,210,228;
  --bs-emphasis-color:#eef4ff; --bs-emphasis-color-rgb:238,244,255;
  --bs-secondary-color:rgba(198,210,228,.65);
  --bs-secondary-bg:#111a29; --bs-secondary-bg-rgb:17,26,41;
  --bs-tertiary-bg:#0d1420; --bs-tertiary-bg-rgb:13,20,32;
  --bs-border-color:#1e2c42; --bs-border-color-translucent:rgba(30,44,66,.6);
  --bs-link-color:#00e5ff; --bs-link-color-rgb:0,229,255;
  --bs-link-hover-color:#5eeaff; --bs-link-hover-color-rgb:94,234,255;
  --bs-card-bg:#0d1420; --bs-card-cap-bg:rgba(255,255,255,.02);
}
:root[data-bs-theme="light"] {
  --es-bg:#eef2f8; --es-panel:#ffffff; --es-panel2:#f5f8fc; --es-line:#d3dce8;
  --es-cyan:#0092b8; --es-mag:#d61f5c; --es-amber:#b8790c; --es-white:#111c2c; --es-mute:#6b7a90;
  --es-ink:#33404f;
  --es-p1:#0092b8; --es-p2:#d61f5c; --es-win:#0092b8; --es-loss:#d61f5c;
  --es-grid:rgba(150,170,195,.35); --es-veil:rgba(210,220,235,.6);

  --bs-body-bg:#eef2f8; --bs-body-bg-rgb:238,242,248;
  --bs-body-color:#33404f; --bs-body-color-rgb:51,64,79;
  --bs-emphasis-color:#111c2c; --bs-emphasis-color-rgb:17,28,44;
  /* text-muted 等。dark 値が :root 経由で漏れるとライトで薄すぎるため必ず上書き */
  --bs-secondary-color:rgba(51,64,79,.72);
  --bs-secondary-bg:#f5f8fc; --bs-secondary-bg-rgb:245,248,252;
  --bs-tertiary-bg:#ffffff; --bs-tertiary-bg-rgb:255,255,255;
  --bs-border-color:#d3dce8; --bs-border-color-translucent:rgba(211,220,232,.7);
  --bs-link-color:#0092b8; --bs-link-color-rgb:0,146,184;
  --bs-link-hover-color:#0080a2; --bs-link-hover-color-rgb:0,128,162;
  --bs-card-bg:#ffffff; --bs-card-cap-bg:rgba(0,0,0,.02);
}

/* ---------- base / grid background ---------- */
body {
  font-family:"Segoe UI",system-ui,"Yu Gothic UI","Meiryo",sans-serif;
  background-image:
    linear-gradient(var(--es-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--es-line) 1px,transparent 1px);
  background-size:48px 48px; background-position:center; background-attachment:fixed;
}
:root[data-bs-theme="light"] body { background-image:
  linear-gradient(var(--es-grid) 1px,transparent 1px),
  linear-gradient(90deg,var(--es-grid) 1px,transparent 1px); }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 50% 0%,transparent 40%,var(--es-veil) 100%); }
main, footer { position:relative; z-index:1; }
/* ナビはmainより前面に。ドロップダウンがmainの裏に隠れないよう高いz-indexを与える */
.navbar { position:relative; z-index:1030; }
.mono{font-family:"Consolas","SFMono-Regular",monospace}
.es-italic{font-style:italic}
.es-up{text-transform:uppercase;letter-spacing:.08em}

/* ---------- NAVBAR / BRAND ---------- */
.navbar.bg-body-tertiary{ background:rgba(8,11,17,.82)!important; backdrop-filter:blur(10px);
  border-bottom:1px solid var(--es-line); }
:root[data-bs-theme="light"] .navbar.bg-body-tertiary{ background:rgba(255,255,255,.85)!important; }
.navbar-brand{ font-weight:900; font-style:italic; letter-spacing:.02em; display:flex; align-items:center; gap:10px; }
.navbar-brand .b-hex{ filter:drop-shadow(0 0 6px rgba(0,229,255,.55)); flex:0 0 auto; }
.navbar-brand .b-sf6{ color:var(--es-white) } .navbar-brand .b-rep{ color:var(--es-cyan) }
.navbar .nav-link{ font-weight:700; font-size:.9rem; letter-spacing:.02em; color:var(--es-mute); }
.navbar .nav-link:hover{ color:var(--es-white); }
.navbar .nav-link.active{ color:var(--es-cyan); }

/* Discord nav button */
.btn-discord{ --clr:#5865F2; border:1px solid var(--clr); color:var(--clr);
  background:transparent; font-weight:700; }
.btn-discord:hover{ background:var(--clr); color:#fff; }

/* CTA (submit) button */
.btn-cta{ background:var(--es-cyan); color:#07121a; font-weight:900; text-transform:uppercase;
  letter-spacing:.04em; border:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.btn-cta:hover{ filter:brightness(1.08); color:#07121a; }
.btn-cta.mag{ background:var(--es-mag); color:#fff; }
:root[data-bs-theme="light"] .btn-cta{ color:#fff; }

/* ---------- links ---------- */
a{ text-decoration:none; }

/* ---------- HERO ---------- */
.es-hero{ position:relative; margin-top:6px; border:1px solid var(--es-line); border-radius:12px;
  overflow:hidden; min-height:300px; display:flex; align-items:center; background:var(--es-panel); }
.es-hero-bg{ position:absolute; inset:0; background:
  linear-gradient(120deg,#0a1a24,#120a16 60%,#0a1119),
  radial-gradient(circle at 22% 45%,rgba(0,229,255,.18),transparent 45%),
  radial-gradient(circle at 78% 60%,rgba(255,46,110,.16),transparent 45%);
  opacity:.95; }
.es-hero-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(7,10,15,.92) 0%,rgba(7,10,15,.55) 45%,transparent 78%); }
.es-hero-scan{ position:absolute; inset:0; z-index:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.10) 3px 4px); }
.es-hero-in{ position:relative; z-index:1; padding:44px 40px; max-width:660px; }
.es-hero .kick{ color:var(--es-cyan); font-weight:800; font-size:.8rem; letter-spacing:.18em; }
.es-hero h1{ font-size:2.7rem; line-height:1.04; font-style:italic; font-weight:900; margin:.35em 0 .2em;
  color:#eef4ff; text-shadow:0 4px 30px rgba(0,229,255,.25); }
.es-hero h1 em{ color:var(--es-cyan); font-style:italic; }
.es-hero p{ color:#cdd8e8; font-size:1rem; margin:.2em 0 1.2em; }

/* ---------- PAGE HEAD ---------- */
.es-page-head h1{ font-size:1.8rem; font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:.04em; margin:0; color:var(--es-white); }
.es-page-head .sub{ color:var(--es-mute); font-size:.9rem; }

/* ---------- STAT STRIP ---------- */
.es-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.es-stat{ background:var(--es-panel); border:1px solid var(--es-line); border-radius:10px;
  padding:16px 18px; position:relative; overflow:hidden; }
.es-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--es-cyan); }
.es-stat.p2::before{ background:var(--es-mag); } .es-stat.am::before{ background:var(--es-amber); }
.es-stat .k{ font-size:.72rem; color:var(--es-mute); text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.es-stat .v{ font-size:1.8rem; font-weight:900; font-style:italic; margin-top:4px; font-variant-numeric:tabular-nums; color:var(--es-white); }

/* ---------- SECTION HEADER ---------- */
.es-sec-h{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.es-sec-h h2{ font-size:1.2rem; font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:.06em; margin:0; color:var(--es-white); white-space:nowrap; }
.es-sec-h .bar{ flex:1; height:1px; background:linear-gradient(90deg,var(--es-line),transparent); }
.es-sec-h .tag{ font-size:.72rem; color:var(--es-mute); }
.es-sec-h a.more{ font-size:.78rem; color:var(--es-cyan); font-weight:700; }

/* ---------- LINK CARDS (menu) ---------- */
.es-linkgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.es-linkcard{ background:var(--es-panel); border:1px solid var(--es-line); border-radius:11px;
  padding:20px; transition:.15s; cursor:pointer; display:block; color:inherit; }
.es-linkcard:hover{ border-color:var(--es-cyan); transform:translateY(-3px);
  box-shadow:0 10px 24px -14px rgba(0,229,255,.5); color:inherit; }
.es-linkcard .ic{ font-size:1.6rem; color:var(--es-cyan); }
.es-linkcard .t{ font-weight:900; font-style:italic; margin-top:10px; font-size:1rem; color:var(--es-white); }
.es-linkcard .d{ color:var(--es-mute); font-size:.78rem; margin-top:4px; line-height:1.5; }

/* ---------- PANELS / TWO COL ---------- */
.es-two{ display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:start; }
.es-panel{ background:var(--es-panel); border:1px solid var(--es-line); border-radius:11px; padding:18px 20px; }
.es-panel h3{ margin:0 0 12px; font-size:.95rem; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.05em; color:var(--es-white); }
.es-cap{ font-size:.72rem; color:var(--es-mute); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; font-weight:700; }

/* ---------- BARS (char usage) ---------- */
.es-bar-row{ display:flex; align-items:center; gap:12px; margin:11px 0; }
.es-bar-row .cn{ width:96px; font-size:.82rem; font-weight:700; font-style:italic; white-space:nowrap; color:var(--es-white); }
.es-bar-track{ flex:1; height:16px; background:#0a121e; border-radius:4px; overflow:hidden; }
:root[data-bs-theme="light"] .es-bar-track{ background:#e2e8f1; }
.es-bar-fill{ height:100%; background:linear-gradient(90deg,var(--es-cyan),#0088aa); border-radius:4px; }
.es-bar-fill.mag{ background:linear-gradient(90deg,var(--es-mag),#aa0844); }
.es-bar-row .bn{ width:52px; text-align:right; font-family:Consolas,monospace; font-size:.78rem; color:var(--es-mute); }

/* ---------- PLAYER ROWS (top players) ---------- */
.es-pl-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--es-line); }
.es-pl-row:last-child{ border:0; }
.es-pl-rank{ width:22px; font-weight:900; font-style:italic; color:var(--es-mute); font-size:.9rem; }
.es-pl-rank.top{ color:var(--es-amber); }
.es-pl-nm{ flex:1; font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--es-white); }
.es-pl-ch{ font-size:.72rem; color:var(--es-mute); }
.es-pl-wr{ font-family:Consolas,monospace; font-size:.78rem; color:var(--es-cyan); }
.es-pl-mr{ font-family:Consolas,monospace; font-size:.78rem; color:var(--es-amber); width:64px; text-align:right; }

/* ---------- REPLAY CARDS (duel) ---------- */
.es-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.es-card{ background:linear-gradient(160deg,var(--es-panel2),var(--es-panel)); border:1px solid var(--es-line);
  border-radius:11px; overflow:hidden; transition:.16s; cursor:pointer; position:relative; }
.es-card:hover{ transform:translateY(-3px); border-color:var(--es-cyan); box-shadow:0 10px 30px -12px rgba(0,229,255,.4); }
.es-card .thumb{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.thumb-duel{ position:absolute; inset:0; display:flex; align-items:center;
  background:linear-gradient(105deg,rgba(0,60,80,.55) 0%,rgba(0,60,80,.55) 46%,rgba(90,10,40,.55) 54%,rgba(90,10,40,.55) 100%),#0a1119; }
.thumb-duel::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 26% 50%,rgba(0,229,255,.28),transparent 40%),
             radial-gradient(circle at 74% 50%,rgba(255,46,110,.28),transparent 40%); }
.thumb-duel .td{ flex:1; text-align:center; font-weight:900; font-style:italic; font-size:1.1rem; z-index:1;
  padding:0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.thumb-duel .td.l{ color:#7bf2ff } .thumb-duel .td.r{ color:#ff86ad }
.thumb-duel .td-vs{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) skewX(-8deg);
  font-weight:900; font-style:italic; font-size:1.4rem; color:#fff; z-index:2; text-shadow:0 0 14px rgba(255,176,32,.9); }
.thumb-scan{ position:absolute; inset:0; z-index:1; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 3px); }
.es-card .rid{ position:absolute; top:8px; left:8px; background:rgba(4,7,12,.85); color:var(--es-cyan);
  font-size:.66rem; font-weight:800; padding:3px 8px; border-radius:4px; letter-spacing:.06em; z-index:2; }
.es-card .res{ position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:6px; z-index:2;
  display:grid; place-items:center; font-weight:900; font-size:.8rem; font-style:italic; }
.es-card .res.win{ background:var(--es-cyan); color:#07121a; } .es-card .res.loss{ background:var(--es-mag); color:#fff; }
.es-card .play{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:.16s; z-index:3; }
.es-card:hover .play{ opacity:1; }
.es-card .play span{ width:52px; height:52px; border-radius:50%; background:rgba(0,229,255,.9);
  display:grid; place-items:center; color:#07121a; font-size:1.3rem; padding-left:4px; }
.es-card .body{ padding:12px 14px; }
.es-duel{ display:flex; align-items:center; gap:8px; }
.es-side{ flex:1; min-width:0; } .es-side.r{ text-align:right; }
.es-side .ch{ font-weight:800; font-size:.95rem; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-side.l .ch{ color:var(--es-p1); } .es-side.r .ch{ color:var(--es-p2); }
.es-side .nm{ font-size:.72rem; color:var(--es-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-side .mr{ font-size:.68rem; color:var(--es-amber); font-weight:700; font-family:Consolas,monospace; }
.es-vs{ font-weight:900; font-style:italic; color:var(--es-mute); font-size:.8rem; }
.es-card .meta{ display:flex; justify-content:space-between; margin-top:10px; padding-top:9px;
  border-top:1px solid var(--es-line); font-size:.68rem; color:var(--es-mute); }
.es-mtag{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.es-mtag.ranked{ color:var(--es-cyan); }
.es-fav-btn{ position:absolute; top:8px; right:8px; z-index:3; width:26px; height:26px; border-radius:6px;
  background:rgba(4,7,12,.85); border:1px solid var(--es-line); color:var(--es-mute); cursor:pointer;
  font-size:.9rem; display:grid; place-items:center; padding:0; line-height:1; }
.es-fav-btn:hover{ color:var(--es-amber); border-color:var(--es-amber); }
.es-fav-btn.on{ color:var(--es-amber); border-color:var(--es-amber); background:rgba(255,176,32,.15); }
.es-views-tag{ position:absolute; bottom:8px; right:8px; z-index:2; background:rgba(4,7,12,.85); color:var(--es-ink);
  font-size:.66rem; font-weight:700; padding:2px 7px; border-radius:4px; }
/* status badge on card thumb (production has a processing status, not just W/L) */
.es-card .es-card-status{ position:absolute; bottom:8px; left:8px; z-index:2; }
.es-card .es-rank{ position:absolute; top:8px; left:8px; z-index:2; background:rgba(4,7,12,.85); color:var(--es-amber);
  font-size:.72rem; font-weight:900; font-style:italic; padding:2px 8px; border-radius:4px; }
.es-card .es-rank + .rid{ top:8px; left:auto; right:44px; }
/* grid inside the fixed-height scroll container */
.es-grid.es-list-grid{ padding:1rem; }
/* card grid lists flow in the page (no inner scroll box — cards need no sticky header).
   This restores natural window-scroll infinite scrolling. */
#all-tab .table-responsive,
#popular-tab .table-responsive,
#fav-tab .table-responsive{ max-height:none !important; overflow:visible !important; }
.es-card .replay-link{ color:var(--es-cyan); font-weight:800; }
.es-card .player-stats-link{ color:var(--es-white); }
.es-card .player-stats-link:hover{ color:var(--es-cyan); }

/* ---------- CHIPS ---------- */
.es-chip{ display:inline-block; padding:2px 8px; border-radius:4px; font-size:.72rem; font-weight:800; font-style:italic; }
.es-chip.cy{ background:rgba(0,229,255,.14); color:var(--es-cyan); }
.es-chip.mg{ background:rgba(255,46,110,.14); color:var(--es-mag); }
.es-chip.am{ background:rgba(255,176,32,.14); color:var(--es-amber); }

/* ---------- PROFILE HEADER ---------- */
.es-profile{ display:flex; align-items:center; gap:20px; background:linear-gradient(120deg,var(--es-panel2),var(--es-panel));
  border:1px solid var(--es-line); border-radius:12px; padding:22px 26px; position:relative; overflow:hidden; }
.es-profile::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  background:radial-gradient(circle,rgba(0,229,255,.14),transparent 70%); }
.es-avatar{ width:70px; height:70px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--es-cyan),#0066aa); color:#07121a; font-weight:900; font-style:italic; font-size:1.8rem; flex:0 0 auto; }
.es-profile .pn{ font-size:1.5rem; font-weight:900; font-style:italic; color:var(--es-white); }
.es-profile .pmeta{ color:var(--es-mute); font-size:.85rem; margin-top:2px; }
.es-profile .pstats{ margin-left:auto; display:flex; gap:26px; text-align:center; }
.es-profile .pstats .k{ font-size:.68rem; color:var(--es-mute); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.es-profile .pstats .v{ font-size:1.4rem; font-weight:900; font-style:italic; font-variant-numeric:tabular-nums; color:var(--es-white); }

/* ---------- AI COACH TIMELINE ---------- */
.es-timeline{ display:flex; flex-direction:column; gap:10px; }
.es-tl-item{ display:flex; gap:12px; background:var(--es-panel); border:1px solid var(--es-line); border-radius:9px; padding:12px 14px; transition:.14s; }
.es-tl-item:hover{ border-color:var(--es-cyan); }
.es-tl-time{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; }
.es-tl-time .jump{ width:38px; height:38px; border-radius:50%; background:rgba(0,229,255,.14); color:var(--es-cyan);
  display:grid; place-items:center; font-size:1rem; cursor:pointer; border:1px solid rgba(0,229,255,.35); }
.es-tl-time .ts{ font-family:Consolas,monospace; font-size:.72rem; color:var(--es-mute); }
.es-tl-cat{ display:inline-block; font-size:.68rem; font-weight:900; font-style:italic; text-transform:uppercase;
  letter-spacing:.05em; padding:2px 8px; border-radius:4px; margin-bottom:5px; }
.es-tl-txt{ font-size:.86rem; line-height:1.6; color:var(--es-ink); }
.es-persp{ font-size:.66rem; font-weight:800; padding:1px 6px; border-radius:3px; margin-left:6px; }
.es-persp.p1{ background:rgba(0,229,255,.14); color:var(--es-cyan); }
.es-persp.p2{ background:rgba(255,46,110,.14); color:var(--es-mag); }

/* ---------- FORM CARD / TABS ---------- */
.es-form-card{ background:var(--es-panel); border:1px solid var(--es-line); border-radius:12px; padding:24px; }
.es-recommend{ background:linear-gradient(90deg,rgba(0,229,255,.1),transparent); border:1px solid rgba(0,229,255,.35);
  border-left:3px solid var(--es-cyan); border-radius:8px; padding:14px 18px; margin-bottom:20px; font-size:.86rem; }
.es-recommend b{ color:var(--es-cyan); }

/* ---------- nav-tabs (Bootstrap) accent ---------- */
.nav-tabs{ border-bottom:1px solid var(--es-line); }
.nav-tabs .nav-link{ color:var(--es-mute); font-weight:800; font-style:italic; letter-spacing:.02em; border:0; border-bottom:2px solid transparent; }
.nav-tabs .nav-link:hover{ color:var(--es-white); border-color:transparent; }
.nav-tabs .nav-link.active{ color:var(--es-cyan); background:transparent; border-bottom-color:var(--es-cyan); }

/* ---------- VIDEO BOX ---------- */
.es-video-box{ position:relative; aspect-ratio:16/9; border-radius:11px; overflow:hidden; border:1px solid var(--es-line); background:#000; }
.es-controls{ display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.es-ctrl{ background:var(--es-panel); border:1px solid var(--es-line); border-radius:6px; color:var(--es-ink);
  padding:8px 12px; font-weight:700; font-size:.82rem; cursor:pointer; font-family:Consolas,monospace; }
.es-ctrl:hover{ border-color:var(--es-cyan); color:var(--es-cyan); }

/* ---------- YT CARD ---------- */
.es-yt-thumb{ position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,#1a0d16,#0a1119); overflow:hidden; display:grid; place-items:center; }
.es-yt-thumb .ytlogo{ color:var(--es-mag); font-size:2.4rem; }
.es-yt-thumb .pill{ position:absolute; bottom:8px; right:8px; background:rgba(4,7,12,.85); color:#fff; font-size:.66rem; padding:2px 7px; border-radius:4px; font-weight:700; }
.es-tagrow{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.es-tagrow .t{ font-size:.68rem; color:var(--es-cyan); background:rgba(0,229,255,.1); padding:2px 8px; border-radius:20px; }

/* ---------- FAQ / HELP ---------- */
.es-faq{ background:var(--es-panel); border:1px solid var(--es-line); border-radius:10px; padding:16px 20px; margin-bottom:12px; }
.es-faq h3{ margin:0 0 8px; font-size:1rem; font-weight:900; font-style:italic; color:var(--es-white); }
.es-faq h3 .q{ color:var(--es-cyan); margin-right:8px; }
.es-faq p{ margin:0; color:var(--es-ink); font-size:.88rem; line-height:1.7; }

/* ---------- BANNER / NOTE ---------- */
.es-banner{ background:linear-gradient(90deg,rgba(255,176,32,.14),transparent); border:1px solid rgba(255,176,32,.4);
  border-left:3px solid var(--es-amber); border-radius:8px; padding:11px 16px; font-size:.86rem; color:#ffe0a8; }
:root[data-bs-theme="light"] .es-banner{ color:#7a5200; }

/* ---------- footer ---------- */
footer.footer{ border-top:1px solid var(--es-line); }
.es-foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  color:var(--es-mute); font-size:.8rem; }
.es-foot a{ color:var(--es-mute); } .es-foot a:hover{ color:var(--es-cyan); }

/* ---------- youtube list cards (real thumbnails) ---------- */
.yt-list-card{ transition:.16s; overflow:hidden; }
.yt-list-card:hover{ transform:translateY(-3px); border-color:var(--es-cyan); box-shadow:0 10px 30px -12px rgba(0,229,255,.4); }
.yt-list-card .card-img-top{ border-bottom:1px solid var(--es-line); }
.yt-list-card .card-title{ font-weight:800; font-style:italic; }

/* ---------- responsive ---------- */
@media(max-width:900px){
  .es-grid,.es-linkgrid{ grid-template-columns:repeat(2,1fr); }
  .es-stats{ grid-template-columns:repeat(2,1fr); }
  .es-two{ grid-template-columns:1fr; }
  .es-hero h1{ font-size:2.1rem; }
  .es-profile{ flex-wrap:wrap; } .es-profile .pstats{ margin-left:0; width:100%; justify-content:space-between; }
}
@media(max-width:560px){ .es-grid,.es-linkgrid{ grid-template-columns:1fr; } }