/* ═══════════════════════════════════════════════════════════════
   Bilibili SC Monitor — Theme v3
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Tokens ═══ */
:root {
  /* depth */
  --bg:        #07090e;
  --surface:   #0f131c;
  --surface2:  #171d29;
  --surface3:  #1f2737;

  /* borders */
  --border:     rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.12);

  /* text */
  --text:       #edf0f5;
  --text2:      #8891a0;
  --text3:      #4c5466;

  /* brand */
  --accent:     #4da6ff;
  --accent-dim: rgba(77,166,255,.12);
  --accent-mid: rgba(77,166,255,.22);
  --accent-glow:rgba(77,166,255,.35);
  --pink:       #FB7299;
  --pink-dim:   rgba(251,114,153,.12);

  /* semantic */
  --green:      #3cc954;
  --green-glow: rgba(60,201,84,.35);
  --red:        #f85149;
  --orange:     #f0883e;
  --yellow:     #d29922;

  /* glass */
  --glass:      rgba(15,19,28,.82);
  --glass-border: rgba(255,255,255,.06);

  /* radius + border */
  --r-sm: 6px;  --r: 10px;  --r-lg: 14px;  --r-full: 9999px;
  --card-border-style: solid;  --card-border-width: 1px;

  /* shadows */
  --shadow:     0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.55);
  --glow:       0 0 20px var(--accent-glow);

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, monospace;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* background image (set via JS from CONFIG.BG_IMAGE) */
  --bg-image: none;
}

/* ═══ Global ═══ */
html, body {
  height: 100%; margin: 0; padding: 0;
  background-color: var(--bg);
  color: var(--text);
  font: 14px/1.55 var(--font);
}
body {
  background-image:
    var(--bg-image),
    radial-gradient(ellipse 80% 50% at 50% -15%, rgba(77,166,255,.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(251,114,153,.05) 0%, transparent 65%),
    radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: auto, 100% 100%, 100% 100%, 26px 26px;
  background-position: center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed;
}

/* ═══ Keyframes ═══ */
@keyframes livePulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(1.45); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes toastIn {
  0%   { opacity:0; transform:translateY(16px) scale(.94); filter:blur(8px); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes toastBar {
  from { width:100%; }
  to   { width:0%; }
}
/* ═══ SC Card ═══ */
.sc-card {
  display: flex; margin-bottom: 10px;
  border-radius: var(--radius, var(--r-lg)); overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: var(--card-border-width, 1px) var(--card-border-style, solid) var(--glass-border);
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) {
  .sc-card { background: var(--surface); }
}
.sc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(77,166,255,.1);
  border-color: rgba(255,255,255,.12);
}
.sc-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow), var(--glow);
  position: relative;
  z-index: 1;
  will-change: box-shadow, border-color;
  transform: translateZ(0);           /* promote to GPU layer */
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* selected card shimmer overlay */
.sc-card.selected::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: inherit;
}

/* color bar */
.sc-card-bar {
  width: 5px; flex-shrink: 0; position: relative;
}
.sc-card-bar::after {
  content: ''; position: absolute; inset: 0;
  background: inherit; filter: blur(10px); opacity: .55;
}

/* body */
.sc-card-body { flex:1; padding: 14px 18px; min-width:0; }
.sc-card-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }

/* ═══ Avatar ═══ */
.sc-avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff;
  flex-shrink:0; overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.sc-avatar img { width:100%; height:100%; object-fit:cover; }
a.sc-avatar-link {
  display:block; flex-shrink:0; border-radius:50%;
  transition: transform .15s var(--spring), filter .15s ease;
}
a.sc-avatar-link:hover { transform:scale(1.14); filter:brightness(1.2); }

/* ═══ Typography ═══ */
.sc-uname { font-size:15px; font-weight:600; }
.sc-price {
  margin-left:auto; font-size:16px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  padding:4px 14px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.08);
  transition: transform .15s var(--spring);
}
.sc-price:hover { transform:scale(1.08); }
.sc-time { font-size:11px; color:var(--text3); margin-bottom:6px; }
.sc-msg { font-size:14px; line-height:1.7; word-break:break-word; }

/* ═══ BV ═══ */
.bv-highlight {
  background:var(--accent-dim); border:1px solid rgba(77,166,255,.18);
  border-radius:3px; padding:1px 4px; color:var(--accent);
  font-family:var(--mono); font-size:.93em; cursor:pointer;
  transition:all .15s ease;
}
.bv-highlight:hover,.bv-highlight.active {
  background:var(--accent-mid); border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim), 0 0 14px var(--accent-dim);
}
.sc-card-bv-btn-wrap { float:right; white-space:nowrap; margin-left:8px; }
.sc-card-bv-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 14px; border-radius:var(--r-sm);
  background:var(--surface2); border:1px solid rgba(77,166,255,.18);
  color:var(--accent); font-size:12px; font-family:var(--mono); font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap; line-height:1.6;
  transition:all .15s var(--ease);
}
.sc-card-bv-btn::before {
  content:''; display:inline-block; width:0; height:0;
  border-style:solid; border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent var(--accent);
  transition:border-color .15s ease;
}
.sc-card-bv-btn:hover {
  background:var(--accent-dim); border-color:var(--accent);
  transform:translateY(-2px); box-shadow:0 4px 18px var(--accent-glow);
}
.sc-card-bv-btn:hover::before { border-left-color:#fff; }
.sc-card-bv-btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--accent-mid); }
/* visited BV */
.bv-visited { opacity: .55; filter: grayscale(.4); }
.bv-visited:hover { opacity: .85; filter: grayscale(.1); }

/* ═══ BV Tooltip ═══ */
#bv-tooltip {
  position:fixed; z-index:1000; pointer-events:none;
  max-width:320px; border-radius:var(--r); overflow:hidden;
  background:rgba(15,19,28,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(8px);
  transition:opacity .15s ease, transform .15s var(--ease);
}
@supports not (backdrop-filter:blur(1px)) {
  #bv-tooltip { background:var(--surface3); }
}
#bv-tooltip.show { opacity:1; transform:translateY(0); }
#bv-tooltip img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--surface2); }
#bv-tooltip .bv-info { padding:10px 14px 12px; }
#bv-tooltip .bv-title { font-size:13px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#bv-tooltip .bv-stats { font-size:11px; color:var(--text3); margin-top:6px; display:flex; gap:14px; }

/* ═══ Scrollbar ═══ */
.scroll-container::-webkit-scrollbar { width:6px; }
.scroll-container::-webkit-scrollbar-track { background:transparent; }
.scroll-container::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
.scroll-container::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }

/* ═══ Scroll-to-top ═══ */
#scroll-btn {
  position:absolute; bottom:20px; right:16px;
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#3182ce);
  color:#fff; border:none; font-size:18px; cursor:pointer;
  box-shadow:0 4px 22px var(--accent-glow);
  opacity:0; transform:translateY(16px) scale(.85);
  transition:all .3s var(--spring);
  pointer-events:none; z-index:100;
  display:flex; align-items:center; justify-content:center;
}
#scroll-btn.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#scroll-btn:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 8px 30px var(--accent-glow); }

/* ═══ Footer ═══ */
.app-footer {
  flex-shrink:0; padding:8px 20px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--text3);
}
.app-footer a { color:var(--accent); text-decoration:none; }
.app-footer a:hover { text-decoration:underline; }

/* ═══ Empty ═══ */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:60%; color:var(--text2);
  text-align:center; gap:12px;
}
.empty-state .icon { font-size:52px; opacity:.18; }
.empty-state p { font-size:14px; max-width:320px; line-height:1.6; }