/* ====== Cyberpunk Live Admin — Design Tokens ====== */
:root {
  --bg: #04060c;
  --bg-deep: #02030a;
  --surface: rgba(10, 16, 28, 0.62);
  --surface-2: rgba(14, 22, 36, 0.78);
  --surface-soft: rgba(16, 26, 44, 0.45);
  --mr17-warm-orange: #FFA94D;
  --mr17-warm-orange-rgb: 255, 169, 77;
  --border: rgba(var(--mr17-warm-orange-rgb), 0.18);
  --border-2: rgba(var(--mr17-warm-orange-rgb), 0.32);
  --border-strong: rgba(var(--mr17-warm-orange-rgb), 0.55);
  --grid: rgba(var(--mr17-warm-orange-rgb), 0.055);

  --neon-cyan: var(--mr17-warm-orange);
  --neon-cyan-soft: rgba(var(--mr17-warm-orange-rgb), 0.62);
  --neon-mag: #ff2a6d;
  --neon-mag-soft: rgba(255, 42, 109, 0.65);
  --neon-lime: #b8ff5b;
  --neon-amber: #ffb547;
  --neon-violet: #b76dff;

  --text: #dbe7f3;
  --text-dim: #6e8198;
  --text-soft: #9fb1c8;
  --text-bright: #ffffff;

  --cn-readable: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --display: "Orbitron", "Rajdhani", var(--cn-readable);
  --body: "Rajdhani", var(--cn-readable);
  --mono: "JetBrains Mono", "Fira Code", var(--cn-readable), ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-feature-settings: "ss01" on, "cv11" on;
}

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--mr17-warm-orange-rgb), 0.10), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(255, 42, 109, 0.08), transparent 55%),
    var(--bg);
}

/* Scanline + grid overlays */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(255,255,255,0.012) 2px,
    rgba(255,255,255,0.012) 3px
  );
  mix-blend-mode: overlay;
}
.grid-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 100%);
}
#particles {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
}

/* ====== App shell ====== */
.app {
  position: relative; z-index: 10;
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr;
}

/* ====== Header ====== */
.hdr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(4,8,16,0.85), rgba(4,8,16,0.5));
  backdrop-filter: blur(8px);
  position: relative;
}
.hdr::after {
  content: ""; position: absolute; left:0; right:0; bottom:-1px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--neon-cyan) 30%, var(--neon-mag) 60%, transparent 100%);
  opacity: 0.6;
}
.brand {
  display: flex; align-items: center; gap: 12px;
}
.brand-mark {
  width: 32px; height: 32px; position: relative;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-mag));
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.brand-mark::after {
  content:""; position:absolute; inset: 2px;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.brand-mark::before {
  content:"17"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight: 800; font-size: 14px;
  color: var(--neon-cyan); z-index: 2; letter-spacing: -0.5px;
}
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: 2px; color: var(--text-bright);
}
.brand-name span { color: var(--neon-cyan); }
.brand-sub {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 1.5px;
  margin-top: 2px;
}

.hdr-center {
  display: flex; align-items: center; gap: 20px; justify-content: center;
}
.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  background: rgba(255, 42, 109, 0.12);
  border: 1px solid var(--neon-mag-soft);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 2px; color: var(--neon-mag);
  font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 8px) 100%, 0 100%);
}
.live-pill .dot {
  width: 8px; height: 8px; background: var(--neon-mag);
  border-radius: 50%; box-shadow: 0 0 8px var(--neon-mag);
  animation: pulse 1.2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
.stream-title {
  font-family: var(--display); font-size: 14px; font-weight: 500;
  letter-spacing: 1.5px; color: var(--text);
}
.stream-title .accent { color: var(--neon-cyan); }

.hdr-right {
  display: flex; align-items: center; gap: 24px;
}
.metric {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.metric-label {
  font-family: var(--mono); font-size: 9px;
  color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase;
}
.metric-value {
  font-family: var(--display); font-size: 18px; font-weight: 600;
  color: var(--text-bright); letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.metric-value .unit { color: var(--text-dim); font-size: 11px; margin-left: 3px; }
.metric.cyan .metric-value { color: var(--neon-cyan); text-shadow: 0 0 12px rgba(var(--mr17-warm-orange-rgb), 0.5); }
.metric.mag .metric-value { color: var(--neon-mag); text-shadow: 0 0 12px rgba(255,42,109,0.5); }

/* ====== Main grid ====== */
.main {
  display: grid;
  grid-template-columns: 300px 1fr 380px;
  gap: 16px;
  padding: 16px;
  min-height: 0;
}
.col {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 0;
}
.col-left { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); display: grid; }

/* ====== Panel chrome ====== */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
  backdrop-filter: blur(2px);
}
.panel::before {
  /* Top neon strip */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--neon-cyan) 20%, var(--neon-cyan) 80%, transparent 100%);
  opacity: 0.7;
}
.panel.accent-mag::before {
  background: linear-gradient(90deg, transparent 0%, var(--neon-mag) 20%, var(--neon-mag) 80%, transparent 100%);
}
.panel.accent-amber::before {
  background: linear-gradient(90deg, transparent 0%, var(--neon-amber) 20%, var(--neon-amber) 80%, transparent 100%);
}
.panel.accent-lime::before {
  background: linear-gradient(90deg, transparent 0%, var(--neon-lime) 20%, var(--neon-lime) 80%, transparent 100%);
}
/* Corner brackets */
.panel > .corner {
  position: absolute; width: 10px; height: 10px;
  border-color: var(--neon-cyan); pointer-events: none; opacity: 0.85;
}
.panel.accent-mag > .corner { border-color: var(--neon-mag); }
.panel.accent-amber > .corner { border-color: var(--neon-amber); }
.panel.accent-lime > .corner { border-color: var(--neon-lime); }
.panel > .corner.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.panel > .corner.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.panel > .corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.panel > .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.panel-title {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.panel-title .ind {
  width: 6px; height: 6px; background: var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan);
  animation: pulse 2s infinite;
}
.panel.accent-mag .panel-title .ind { background: var(--neon-mag); box-shadow: 0 0 8px var(--neon-mag); }
.panel.accent-amber .panel-title .ind { background: var(--neon-amber); box-shadow: 0 0 8px var(--neon-amber); }
.panel.accent-lime .panel-title .ind { background: var(--neon-lime); box-shadow: 0 0 8px var(--neon-lime); }
.panel-title h3 {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: 2.5px; color: var(--text-bright); text-transform: uppercase;
}
.panel-title .cn {
  font-family: var(--body); font-weight: 500; font-size: 13px;
  letter-spacing: 1px; color: var(--text);
  white-space: nowrap;
}
.panel-meta {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 8px;
}
.panel-meta .tag {
  padding: 2px 6px; border: 1px solid var(--border-2);
  color: var(--neon-cyan); font-size: 9px;
}
.panel-body {
  flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* ====== User profile card ====== */
.user-card {
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.user-row { display: flex; align-items: center; gap: 14px; }
.avatar {
  position: relative;
  width: 56px; height: 56px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(var(--mr17-warm-orange-rgb), 0.15), rgba(255,42,109,0.15));
  border: 1px solid var(--border-2);
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--neon-cyan); letter-spacing: 1px;
  overflow: hidden;
}
.avatar.sm {
  width: 32px; height: 32px; font-size: 12px;
}
.avatar.xs {
  width: 28px; height: 28px; font-size: 11px;
}
.avatar::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
}
.status-dot {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: var(--neon-lime);
  border: 2px solid var(--bg);
  box-shadow: 0 0 6px var(--neon-lime);
}
.user-name {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: 1.5px; color: var(--text-bright);
}
.user-id {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 1.5px; margin-top: 4px;
}
.user-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 9px;
  padding: 2px 6px; letter-spacing: 1px;
  border: 1px solid var(--border-2);
  color: var(--neon-cyan);
  background: rgba(var(--mr17-warm-orange-rgb), 0.06);
}
.chip.mag { color: var(--neon-mag); border-color: var(--neon-mag-soft); background: rgba(255,42,109,0.06); }
.chip.amber { color: var(--neon-amber); border-color: rgba(255,181,71,0.5); background: rgba(255,181,71,0.06); }
.chip.lime { color: var(--neon-lime); border-color: rgba(184,255,91,0.5); background: rgba(184,255,91,0.06); }

.user-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  gap: 4px;
}
.user-stat { text-align: left; }
.user-stat-v {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  color: var(--neon-cyan); letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.user-stat-l {
  font-family: var(--mono); font-size: 9px;
  color: var(--text-dim); letter-spacing: 1.5px; margin-top: 2px;
}

/* ====== Ranking lists ====== */
.rank-list {
  flex: 1; overflow: hidden auto;
  padding: 8px 12px 12px;
}
.rank-row {
  display: grid;
  grid-template-columns: 28px 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(var(--mr17-warm-orange-rgb), 0.07);
  position: relative;
  transition: background 0.3s;
}
.rank-row:hover { background: rgba(var(--mr17-warm-orange-rgb), 0.04); }
.rank-row:last-child { border-bottom: none; }
.rank-num {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  color: var(--text-dim); letter-spacing: 0.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.rank-row.top-1 .rank-num { color: var(--neon-amber); text-shadow: 0 0 8px var(--neon-amber); }
.rank-row.top-2 .rank-num { color: var(--neon-cyan); text-shadow: 0 0 6px var(--neon-cyan); }
.rank-row.top-3 .rank-num { color: var(--neon-mag); text-shadow: 0 0 6px var(--neon-mag); }
.rank-name {
  display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.rank-name .n {
  font-family: var(--body); font-size: 13px; font-weight: 500;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.5px;
}
.rank-bar {
  height: 3px; background: rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.rank-bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--neon-cyan), transparent);
  transition: width 0.5s ease;
}
.rank-list.likes .rank-bar .fill {
  background: linear-gradient(90deg, var(--neon-mag), transparent);
}
.rank-val {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text); letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rank-val .u { color: var(--text-dim); font-size: 10px; margin-left: 2px; }
.delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--mono); font-size: 9px;
  padding: 1px 4px; margin-left: 4px;
}
.delta.up { color: var(--neon-lime); background: rgba(184,255,91,0.08); }
.delta.down { color: var(--neon-mag); background: rgba(255,42,109,0.08); }

/* ====== Danmaku feed ====== */
.feed-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--mr17-warm-orange-rgb), 0.02);
  font-family: var(--mono); font-size: 10px;
  color: var(--text-dim); letter-spacing: 1.5px;
}
.feed-toolbar .filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-soft);
}
.feed-toolbar .filter.active {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(var(--mr17-warm-orange-rgb), 0.08);
  box-shadow: 0 0 12px rgba(var(--mr17-warm-orange-rgb), 0.15) inset;
}
.feed-toolbar .filter .c {
  font-variant-numeric: tabular-nums;
  color: inherit; opacity: 0.7;
}
.feed-toolbar .spacer { flex: 1; }
.feed-toolbar .status {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--neon-lime);
}
.feed-toolbar .status .d {
  width: 6px; height: 6px; background: var(--neon-lime);
  border-radius: 50%; box-shadow: 0 0 6px var(--neon-lime);
  animation: pulse 1.2s infinite;
}

.feed {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 16px 24px;
  display: flex; flex-direction: column; gap: 14px;
  scroll-behavior: smooth;
}
.feed::-webkit-scrollbar { width: 4px; }
.feed::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.feed::-webkit-scrollbar-thumb { background: var(--border-2); }

.msg {
  display: grid;
  grid-template-columns: 36px 1fr 64px;
  gap: 12px;
  animation: msg-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.msg-avatar {
  position: relative;
}
.msg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msg-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.msg-name {
  font-weight: 600; color: var(--text-bright); letter-spacing: 0.5px;
}
.msg-name.vip { color: var(--neon-amber); }
.msg-name.host { color: var(--neon-cyan); }
.msg-badge {
  font-family: var(--mono); font-size: 9px;
  padding: 1px 5px; letter-spacing: 1px;
}
.msg-bubble {
  background: var(--surface-soft);
  border: 1px solid rgba(255,255,255,0.04);
  border-left: 2px solid var(--neon-cyan);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: 0.3px;
  word-break: break-word;
}
.msg.has-trans .msg-bubble { border-left-color: var(--neon-mag); }
.msg.flagged .msg-bubble { border-left-color: var(--neon-amber); background: rgba(255,181,71,0.04); }
.msg-bubble.translation {
  border-left-color: var(--neon-violet);
  font-size: 13px; color: var(--text-soft);
  background: rgba(183,109,255,0.04);
}
.msg-bubble.translation::before {
  content: "译"; display: inline-block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1px; color: var(--neon-violet);
  border: 1px solid var(--neon-violet); padding: 0 4px;
  margin-right: 8px; vertical-align: 1px;
}
.msg-bubble.annotation {
  border-left-color: var(--neon-amber);
  font-size: 12px; color: var(--text-dim);
  background: rgba(255,181,71,0.03);
  font-family: var(--mono); letter-spacing: 0.3px;
}
.msg-bubble.annotation::before {
  content: "AI 注"; display: inline-block;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1px; color: var(--neon-amber);
  border: 1px solid var(--neon-amber); padding: 0 4px;
  margin-right: 8px; vertical-align: 1px;
}

.msg-time {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.5px;
  text-align: right; padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.msg-time .live {
  display: block; color: var(--neon-cyan); font-size: 9px;
  margin-top: 2px; letter-spacing: 1px;
}

.lang-tag {
  font-family: var(--mono); font-size: 9px;
  padding: 1px 5px; letter-spacing: 1px;
  border: 1px solid var(--border-2);
  color: var(--neon-cyan);
}
.lang-tag.en { color: var(--neon-violet); border-color: rgba(183,109,255,0.5); }
.lang-tag.jp { color: var(--neon-mag); border-color: var(--neon-mag-soft); }
.lang-tag.kr { color: var(--neon-amber); border-color: rgba(255,181,71,0.5); }
.lang-tag.zh { color: var(--neon-lime); border-color: rgba(184,255,91,0.5); }

/* ====== AI Chat ====== */
.ai-stat {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--mr17-warm-orange-rgb), 0.02);
}
.ai-stat .s { display: flex; flex-direction: column; gap: 2px; }
.ai-stat .s-l {
  font-family: var(--mono); font-size: 9px;
  color: var(--text-dim); letter-spacing: 1.5px;
}
.ai-stat .s-v {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  color: var(--neon-cyan); letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.ai-feed {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 14px 14px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.ai-feed::-webkit-scrollbar { width: 4px; }
.ai-feed::-webkit-scrollbar-thumb { background: var(--border-2); }

.ai-msg {
  display: flex; gap: 10px;
  animation: msg-in 0.4s ease;
}
.ai-msg.user { flex-direction: row-reverse; }
.ai-msg .ai-bubble {
  flex: 1; min-width: 0; max-width: calc(100% - 40px);
  background: var(--surface-soft);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 10px 12px;
  font-size: 13px; line-height: 1.5;
  color: var(--text);
}
.ai-msg.ai .ai-bubble {
  border-left: 2px solid var(--neon-cyan);
  background: rgba(var(--mr17-warm-orange-rgb), 0.04);
}
.ai-msg.user .ai-bubble {
  border-right: 2px solid var(--neon-mag);
  background: rgba(255,42,109,0.04);
  text-align: right;
}
.ai-bubble .who {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.5px; color: var(--text-dim);
  margin-bottom: 4px;
}
.ai-msg.ai .ai-bubble .who { color: var(--neon-cyan); }
.ai-msg.user .ai-bubble .who { color: var(--neon-mag); }
.ai-bubble .content {
  font-family: var(--body); font-size: 13.5px;
  letter-spacing: 0.3px; word-break: break-word;
}
.ai-bubble.thinking .content::after {
  content: "▍"; color: var(--neon-cyan);
  animation: blink 0.7s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.ai-suggest {
  padding: 0 14px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-suggest .sug-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 1.5px; color: var(--text-dim);
  margin-top: 4px;
}
.ai-suggest .sug-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.sug {
  font-size: 11px; padding: 5px 10px;
  border: 1px solid var(--border);
  background: rgba(var(--mr17-warm-orange-rgb), 0.04);
  color: var(--text-soft); cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.sug:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(var(--mr17-warm-orange-rgb), 0.1);
}

.ai-input {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
  background: rgba(var(--mr17-warm-orange-rgb), 0.02);
  display: flex; gap: 8px; align-items: center;
}
.ai-input-wrap {
  flex: 1; position: relative;
  display: flex; align-items: center;
}
.ai-input input {
  width: 100%;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-2);
  color: var(--text);
  padding: 8px 12px 8px 28px;
  font-family: var(--body); font-size: 13px;
  outline: none;
  letter-spacing: 0.3px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-input input:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(var(--mr17-warm-orange-rgb), 0.2) inset;
}
.ai-input-wrap::before {
  content: ">"; position: absolute; left: 10px;
  font-family: var(--mono); color: var(--neon-cyan);
  font-weight: 700; font-size: 14px;
  text-shadow: 0 0 6px var(--neon-cyan);
}
.ai-send {
  background: rgba(var(--mr17-warm-orange-rgb), 0.1);
  border: 1px solid var(--neon-cyan-soft);
  color: var(--neon-cyan);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 2px; font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(0 0, 100% 0, 100% 70%, calc(100% - 8px) 100%, 0 100%);
}
.ai-send:hover {
  background: rgba(var(--mr17-warm-orange-rgb), 0.25);
  box-shadow: 0 0 12px rgba(var(--mr17-warm-orange-rgb), 0.4);
}
.ai-send:disabled {
  opacity: 0.4; cursor: not-allowed;
  filter: grayscale(0.5);
}

/* ====== Tweaks overrides ====== */
.tp-root, .tweaks-panel {
  font-family: var(--body) !important;
}

/* Glow utilities */
.glow-cyan { text-shadow: 0 0 8px var(--neon-cyan-soft); }
.glow-mag { text-shadow: 0 0 8px var(--neon-mag-soft); }

/* Subtle glitch on hover for panel titles */
@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
}
.panel:hover .panel-title h3 {
  animation: glitch 0.3s steps(2) 1;
}

/* Layer hint for canvas-particles */
.particles-canvas { display:block; width: 100%; height: 100%; }

/* ====== live.mr17.com Jinja bindings ====== */
body.live-console-body {
  --cn-readable: "HarmonyOS Sans SC", "MiSans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --display: "Orbitron", "Rajdhani", var(--cn-readable);
  --body: "Rajdhani", var(--cn-readable);
  --mono: "JetBrains Mono", var(--cn-readable), ui-monospace, monospace;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
}

body.live-console-body .app-bg {
  display: none;
}

body.live-console-body .app-root {
  position: relative;
  z-index: 10;
  min-height: 100vh;
}

body.live-console-body .live-console__brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.live-console-body .live-console__topbar-meta {
  min-width: 0;
}

body.live-console-body .metric {
  min-width: 4.5rem;
}

body.live-console-body .metric-value {
  white-space: nowrap;
}

body.live-console-body .live-console__live-pill--offline,
body.live-console-body .live-console__live-pill--unavailable {
  color: var(--neon-amber);
  border-color: rgba(255, 181, 71, 0.45);
  background: rgba(255, 181, 71, 0.08);
}

body.live-console-body .live-console__live-pill--offline .dot,
body.live-console-body .live-console__live-pill--unavailable .dot {
  background: var(--neon-amber);
  box-shadow: 0 0 8px var(--neon-amber);
}

body.live-console-body .panel-meta {
  flex-shrink: 0;
}

body.live-console-body .public-live-danmaku__status-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 18px 16px 16px;
}

body.live-console-body .public-live-danmaku__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--neon-amber);
  text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 181, 71, 0.16), rgba(var(--mr17-warm-orange-rgb), 0.1));
  border: 1px solid rgba(255, 181, 71, 0.55);
  clip-path: polygon(20% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 20%);
  box-shadow: 0 0 22px rgba(255, 181, 71, 0.12);
}

body.live-console-body .public-live-danmaku__avatar img,
body.live-console-body .public-live-danmaku__avatar-fallback {
  grid-area: 1 / 1;
}

body.live-console-body .public-live-danmaku__avatar img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.live-console-body .public-live-danmaku__avatar-fallback {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
}

body.live-console-body .public-live-danmaku__identity {
  min-width: 0;
}

body.live-console-body .public-live-danmaku__eyebrow {
  margin: 0 0 3px;
  color: var(--neon-amber);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

body.live-console-body .public-live-danmaku__identity h1 {
  margin: 0;
  color: var(--text-bright);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.live-console-body .public-live-danmaku__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
}

body.live-console-body .public-live-danmaku__state,
body.live-console-body .live-console-profile__stats {
  grid-column: 1 / -1;
}

body.live-console-body .public-live-danmaku__state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.live-console-body .public-live-danmaku__state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-2);
  color: var(--neon-amber);
  background: rgba(255, 181, 71, 0.08);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

body.live-console-body .public-live-danmaku__state-pill--live {
  color: var(--neon-lime);
  border-color: rgba(184, 255, 91, 0.45);
  background: rgba(184, 255, 91, 0.08);
}

body.live-console-body .public-live-danmaku__state-meta {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.live-console-body .live-console-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

body.live-console-body .live-console-profile__stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.live-console-body .live-console-profile__stats strong {
  overflow: hidden;
  color: var(--neon-cyan);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.live-console-body .live-console-profile__stats span {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
}

body.live-console-body .live-console-board {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 12px 12px;
  overflow: hidden auto;
  list-style: none;
}

body.live-console-body .live-console-board-slot {
  display: flex;
  flex: 1;
  min-height: 0;
}

body.live-console-body .live-console-board__rank {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

body.live-console-body .live-console-board__row[data-rank="1"] .live-console-board__rank { color: var(--neon-amber); text-shadow: 0 0 8px rgba(255, 181, 71, 0.55); }
body.live-console-body .live-console-board__row[data-rank="2"] .live-console-board__rank { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(var(--mr17-warm-orange-rgb), 0.45); }
body.live-console-body .live-console-board__row[data-rank="3"] .live-console-board__rank { color: var(--neon-mag); text-shadow: 0 0 8px rgba(255, 42, 109, 0.45); }

body.live-console-body .live-console-board__avatar img,
body.live-console-body .event-log__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.live-console-body .live-console-board__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body.live-console-body .live-console-board__name b {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.live-console-body .live-console-board__name small {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
}

body.live-console-body .live-console-board__value {
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.live-console-body .live-console-board__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), transparent);
  opacity: 0.75;
}

body.live-console-body .live-console-board--likes .live-console-board__bar {
  background: linear-gradient(90deg, var(--neon-mag), transparent);
}

body.live-console-body .live-console-card__empty {
  flex: 1;
  padding: 22px 16px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
}

body.live-console-body .live-console-metrics {
  display: grid;
  gap: 1px;
  padding: 8px 0 10px;
}

body.live-console-body .live-console-metrics div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px dashed rgba(var(--mr17-warm-orange-rgb), 0.08);
}

body.live-console-body .live-console-metrics div:last-child {
  border-bottom: 0;
}

body.live-console-body .live-console-metrics span {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
}

body.live-console-body .live-console-metrics strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.live-console-body .live-console-feed,
body.live-console-body .live-console-ai {
  height: 100%;
}

body.live-console-body .live-console-seg {
  display: inline-flex;
  gap: 8px;
  min-width: 0;
}

body.live-console-body .live-console-toggle {
  margin-left: auto;
}

body.live-console-body #live-danmaku-translation-summary {
  padding: 0 16px;
}

body.live-console-body .live-danmaku__translation-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.5px;
}

body.live-console-body .public-live-danmaku__list {
  margin: 0;
  list-style: none;
}

body.live-console-body .event-log__item.msg {
  grid-template-columns: 36px minmax(0, 1fr);
  margin: 0;
  border: 0;
  background: transparent;
}

body.live-console-body .event-log__item.msg + .event-log__item.msg {
  margin-top: 0;
}

body.live-console-body .event-log__avatar {
  color: var(--neon-cyan);
  text-decoration: none;
}

body.live-console-body .event-log__avatar-link:hover,
body.live-console-body .event-log__avatar-link:focus-visible {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 14px rgba(var(--mr17-warm-orange-rgb), 0.28);
  outline: none;
}

body.live-console-body .event-log__body {
  min-width: 0;
}

body.live-console-body .event-log__header {
  min-width: 0;
}

body.live-console-body .event-log__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.live-console-body .event-log__time {
  margin-left: auto;
  flex-shrink: 0;
}

body.live-console-body .event-log__content {
  margin: 0;
}

body.live-console-body .event-log__content--emoji-message {
  display: inline-flex;
  width: auto;
  max-width: min(18rem, 100%);
}

body.live-console-body .session-emoji-message__image {
  max-width: 100%;
  max-height: 8rem;
  object-fit: contain;
}

body.live-console-body .event-log__translation,
body.live-console-body .event-log__translation-note,
body.live-console-body .event-log__translation-loading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin: 6px 0 0;
  border-radius: 0;
  line-height: 1.5;
  text-align: left;
}

body.live-console-body .event-log__translation {
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--neon-violet);
  background: rgba(183, 109, 255, 0.05);
  color: var(--text-soft);
  padding: 7px 10px;
  font-size: 13px;
}

body.live-console-body .event-log__translation-note,
body.live-console-body .event-log__translation-loading {
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--neon-amber);
  background: rgba(255, 181, 71, 0.045);
  color: var(--text-soft);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
}

body.live-console-body .event-log__translation-label,
body.live-console-body .event-log__translation-note-label,
body.live-console-body .event-log__translation-loading-title {
  align-self: start;
  padding: 0 4px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  white-space: nowrap;
}

body.live-console-body .event-log__translation-label {
  color: var(--neon-violet);
}

body.live-console-body .event-log__translation-note-label,
body.live-console-body .event-log__translation-loading-title {
  color: var(--neon-amber);
}

body.live-console-body .event-log__translation-text,
body.live-console-body .event-log__translation-note-text,
body.live-console-body .event-log__translation-loading-meta {
  min-width: 0;
  text-align: left !important;
  white-space: pre-wrap;
}

body.live-console-body .public-live-danmaku__empty {
  margin: 16px;
  padding: 48px 16px;
  border: 1px dashed var(--border-2);
  background: rgba(16, 26, 44, 0.32);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-align: center;
}

body.live-console-body .live-console-ai__head {
  flex-shrink: 0;
}

body.live-console-body .live-console-ai__foot {
  flex: 0 0 auto;
}

body.live-console-body .live-console-ai__body {
  flex: 1;
  min-height: 0;
}

body.live-console-body .live-console-ai-chat {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  min-height: 0;
}

body.live-console-body .live-console-ai-chat .ai-chat__log {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 14px;
  scroll-padding-bottom: 12px;
  scrollbar-width: thin;
}

body.live-console-body .live-console-ai-chat .ai-chat__log > .ai-message:first-child {
  margin-top: auto;
}

body.live-console-body .live-console-ai-chat .ai-chat__log::-webkit-scrollbar {
  width: 4px;
}

body.live-console-body .live-console-ai-chat .ai-chat__log::-webkit-scrollbar-thumb {
  background: var(--border-2);
}

body.live-console-body .live-console-ai-chat .ai-message {
  align-items: flex-start;
  gap: 8px;
}

body.live-console-body .live-console-ai-chat .ai-message__avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 0;
  border-color: var(--border-2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
}

body.live-console-body .live-console-ai-chat .ai-message--assistant .ai-message__avatar {
  background: linear-gradient(135deg, rgba(var(--mr17-warm-orange-rgb), 0.22), rgba(255, 42, 109, 0.18));
  color: var(--neon-cyan);
  border-color: rgba(var(--mr17-warm-orange-rgb), 0.5);
}

body.live-console-body .live-console-ai-chat .ai-message__bubble {
  max-width: calc(100% - 36px);
  padding: 9px 10px;
  border-radius: 0;
  border-color: rgba(255, 255, 255, 0.06);
  background: var(--surface-soft);
  color: var(--text);
  box-shadow: none;
  font-size: 13px;
  line-height: 1.55;
}

body.live-console-body .live-console-ai-chat .ai-message--assistant .ai-message__bubble {
  border-left: 2px solid var(--neon-cyan);
  background: rgba(var(--mr17-warm-orange-rgb), 0.045);
}

body.live-console-body .live-console-ai-chat .ai-message--user .ai-message__bubble {
  border-right: 2px solid var(--neon-mag);
  background: rgba(255, 42, 109, 0.055);
}

body.live-console-body .live-console-ai-chat .ai-message__bubble--markdown h3,
body.live-console-body .live-console-ai-chat .ai-message__bubble--markdown h4,
body.live-console-body .live-console-ai-chat .ai-message__bubble--markdown h5 {
  font-size: 13px;
}

body.live-console-body .live-console-ai-chat .ai-message__typing {
  width: 42px;
  height: 18px;
  color: var(--neon-cyan);
}

body.live-console-body .live-console-ai-chat .ai-chat__composer {
  --ai-composer-padding: 8px;
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: end;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: rgba(var(--mr17-warm-orange-rgb), 0.025);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: none;
}

body.live-console-body .live-console-ai-chat .ai-chat__input {
  width: 100%;
  min-height: 38px;
  max-height: 96px;
  align-self: stretch;
  resize: none;
  overflow-y: auto;
  border-radius: 0;
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  background: rgba(0, 0, 0, 0.38);
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.3px;
  outline: none;
  scrollbar-width: none;
}

body.live-console-body .live-console-ai-chat .ai-chat__input::-webkit-scrollbar {
  display: none;
}

body.live-console-body .live-console-ai-chat .ai-chat__input:focus {
  border-color: var(--neon-cyan);
  background: rgba(0, 0, 0, 0.48);
  box-shadow: 0 0 12px rgba(var(--mr17-warm-orange-rgb), 0.18) inset;
}

body.live-console-body .live-console-ai-chat .ai-chat__send {
  width: 38px;
  height: 38px;
  align-self: stretch;
  border-radius: 0;
  border: 1px solid var(--neon-cyan-soft);
  background: rgba(var(--mr17-warm-orange-rgb), 0.12);
  color: var(--neon-cyan);
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% 72%, calc(100% - 8px) 100%, 0 100%);
}

body.live-console-body .live-console-ai-chat .ai-chat__send:not(:disabled):hover,
body.live-console-body .live-console-ai-chat .ai-chat__send:not(:disabled):focus-visible {
  border-color: var(--border-strong);
  background: rgba(var(--mr17-warm-orange-rgb), 0.22);
  box-shadow: 0 0 14px rgba(var(--mr17-warm-orange-rgb), 0.28);
  transform: none;
}

body.live-console-body .live-console-ai-chat .ai-chat__send:disabled {
  opacity: 0.42;
}

body.live-console-body .live-console-ai-chat .ai-chat__send svg,
body.live-console-body .live-console-ai-reset svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.live-console-body .ai-suggest.live-console-ai__chips {
  padding: 0;
}

body.live-console-body .live-console-ai__chips .sug-label {
  width: 100%;
}

body.live-console-body .live-console-ai__chips .sug {
  display: inline-flex;
}

body.live-console-body .live-profile-card-popover {
  z-index: 80;
}

body.live-console-body .live-profile-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-2);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45), 0 0 32px rgba(var(--mr17-warm-orange-rgb), 0.14);
}

body.live-console-body .live-console-ai-link {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  background: rgba(var(--mr17-warm-orange-rgb), 0.08);
  color: var(--neon-cyan);
  cursor: pointer;
  font-family: var(--display);
  letter-spacing: 1.4px;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 0 12px rgba(var(--mr17-warm-orange-rgb), 0.42);
}

body.live-console-body .live-console-ai-link span {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
}

body.live-console-body .live-console-ai-link strong {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 700;
}

body.live-console-body .live-console-ai-link:hover,
body.live-console-body .live-console-ai-link:focus-visible {
  border-color: var(--border-strong);
  background: rgba(var(--mr17-warm-orange-rgb), 0.14);
  outline: none;
}

body.live-console-body .live-console-ai-reset {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-2);
  background: rgba(255, 42, 109, 0.08);
  color: var(--neon-mag);
  cursor: pointer;
}

body.live-console-body .live-console-ai-reset svg {
  width: 15px;
  height: 15px;
}

body.live-console-body .live-console-ai-reset:hover,
body.live-console-body .live-console-ai-reset:focus-visible {
  border-color: var(--neon-mag);
  background: rgba(255, 42, 109, 0.14);
  outline: none;
}

@media (max-width: 1240px) {
  body.live-console-body .main {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  body.live-console-body .live-console__col--right {
    display: none;
  }

  body.live-console-body .hdr-right {
    gap: 14px;
  }
}

@media (max-width: 920px) {
  html {
    overflow: auto;
  }

  body.live-console-body {
    overflow: auto;
  }

  body.live-console-body .app-root {
    min-height: 100vh;
  }

  body.live-console-body .app.live-console {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  body.live-console-body .hdr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 12px 14px;
  }

  body.live-console-body .hdr-center {
    justify-content: flex-start;
  }

  body.live-console-body .hdr-right {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body.live-console-body .metric {
    align-items: flex-start;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border);
    background: rgba(16, 26, 44, 0.32);
  }

  body.live-console-body .live-console-ai-link {
    align-items: flex-start;
  }

  body.live-console-body .metric-value {
    max-width: 100%;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
  }

  body.live-console-body .main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
    padding: 12px 14px 18px;
  }

  body.live-console-body .col-left {
    display: flex;
  }

  body.live-console-body .live-console__col--right {
    display: flex;
  }

  body.live-console-body .live-console-feed,
  body.live-console-body .live-console-ai {
    height: auto;
    min-height: 46vh;
  }

  body.live-console-body .public-live-danmaku__list {
    max-height: 70vh;
  }
}

@media (max-width: 560px) {
  body.live-console-body .brand-sub,
  body.live-console-body .stream-title {
    display: none;
  }

  body.live-console-body .brand-name {
    font-size: 14px;
  }

  body.live-console-body .hdr-right {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.live-console-body .feed-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body.live-console-body .live-console-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.live-console-body .feed-toolbar .filter {
    justify-content: center;
    padding-inline: 6px;
  }

  body.live-console-body .live-console-toggle {
    justify-content: center;
    margin-left: 0;
  }

  body.live-console-body .public-live-danmaku__status-card {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 16px 14px;
  }

  body.live-console-body .public-live-danmaku__avatar {
    width: 56px;
    height: 56px;
  }

  body.live-console-body .event-log__item.msg {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    padding-inline: 12px;
  }

  body.live-console-body .event-log__header {
    flex-wrap: wrap;
  }

  body.live-console-body .event-log__time {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}