:root {
  color-scheme: dark;
  --bg: #060607;
  --panel: #111114;
  --panel-2: #18181c;
  --line: #2a2a31;
  --text: #f5f5f7;
  --muted: #a0a0ab;
  --accent: #ff4d4f;
  --accent-2: #ff9a3c;
  --danger: #ff6b81;
  --ok: #35d07f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #2a1515 0, var(--bg) 56%); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { padding: 24px; }
button, input, select { font: inherit; }

.app-shell { max-width: 1460px; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.eyebrow { margin: 0 0 6px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 0; font-size: 30px; }
h2, h3 { margin: 0; }
.topbar-meta { display: flex; align-items: center; gap: 12px; }
.pill { padding: 8px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); }
.pill-on { background: rgba(53, 208, 127, .14); color: #b7ffd7; }
.pill-off { background: rgba(255, 107, 129, .12); color: #ffd0d8; }
.link-btn { text-decoration: none; display: inline-flex; align-items: center; }

.layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.admin-layout, .live-layout { grid-template-columns: 1fr; }
.panel { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%), var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-height: 0; }
.full-panel { max-width: 1180px; margin: 0 auto; }
.panel-head, .panel-subhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-subhead span, .live-meta, .muted { color: var(--muted); font-size: 13px; }
.live-meta { display: flex; gap: 12px; flex-wrap: wrap; }

.player-frame { position: relative; margin-top: 14px; aspect-ratio: 16 / 9; background: #050816; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.player-frame video, .fallback { width: 100%; height: 100%; object-fit: cover; }
.fallback { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; color: var(--muted); padding: 24px; background: linear-gradient(180deg, rgba(255,77,79,.08), rgba(255,154,60,.03)); }
.fallback strong { color: var(--text); font-size: 18px; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; word-break: break-all; }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.metric span { color: var(--muted); font-size: 13px; }
.metric strong { display: block; font-size: 24px; margin-top: 8px; }

.comments-board { margin-top: 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.comment-feed { margin-top: 12px; display: grid; gap: 10px; min-height: 320px; max-height: 420px; overflow: auto; }
.comment-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 10px 12px; }
.comment-item .user { color: var(--accent-2); font-weight: 600; }
.comment-item .time { color: var(--muted); font-size: 12px; }

.admin-panel { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%), var(--panel); }
.tabs { display: flex; gap: 8px; padding: 4px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 12px; }
.tab { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 12px 10px; border-radius: 10px; cursor: pointer; }
.tab.active { background: rgba(255, 77, 79, .18); color: var(--text); }
.tab-panels { margin-top: 16px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
label.full { grid-column: 1 / -1; }
input, select { width: 100%; background: #0b0b0d; border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px 12px; outline: none; }
input:focus, select:focus { border-color: rgba(255, 77, 79, .85); box-shadow: 0 0 0 3px rgba(255, 77, 79, .16); }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
button { cursor: pointer; }
.primary-btn, .secondary-btn, .ghost-btn { border-radius: 10px; border: 1px solid var(--line); padding: 11px 14px; }
.primary-btn { background: linear-gradient(180deg, #ff7a45, #ff4d4f); color: white; }
.secondary-btn { background: rgba(255, 154, 60, .14); color: #ffd8b5; }
.ghost-btn { background: transparent; color: var(--text); }

.table-wrap { overflow: auto; margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; background: rgba(0,0,0,.12); }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 14px; }
th { color: var(--muted); font-weight: 500; background: rgba(255,255,255,.02); }
.row-btn { background: transparent; border: 0; color: var(--accent); padding: 0; }

.record-list { display: grid; gap: 10px; margin: 14px 0 18px; }
.record-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; }
.record-card strong { font-size: 16px; }
.record-card .info { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 10px; }
.record-card.active { border-color: rgba(255, 77, 79, .85); }
.record-editor { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }

.portal { max-width: 860px; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.portal-card { display: grid; gap: 10px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: 14px; padding: 18px; color: var(--text); text-decoration: none; }
.portal-card strong { font-size: 20px; }
.portal-card span { color: var(--muted); line-height: 1.5; }

@media (max-width: 1120px) {
  .layout { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  body { padding: 14px; }
  .topbar, .panel-head, .panel-subhead { flex-direction: column; align-items: flex-start; }
  .metrics, .form-grid { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: 1fr; }
}