:root {
    color-scheme: dark;
    --bg: #121611;
    --bg-2: #1b2219;
    --panel: #232b20;
    --line: #354233;
    --text: #edf3e6;
    --muted: #9aa892;
    --accent: #d6ff4a;
    --accent-ink: #1a2208;
    --ok: #8ee08a;
    --warn: #f0c36a;
    --bad: #ff7a62;
    --rec: #ff4d3a;
    --shadow: 0 18px 50px rgba(0, 0, 0, .28);
    font-family: "Segoe UI", "Avenir Next", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(1200px 500px at 10% -10%, #2a3824, transparent 50%), var(--bg); color: var(--text); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.rail { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem; border-right: 1px solid var(--line); background: rgba(18, 22, 17, .88); }
.brand { display: flex; gap: .75rem; align-items: center; text-decoration: none; }
.brand-mark { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(214, 255, 74, .15); }
.brand strong { display: block; letter-spacing: .14em; font-size: .78rem; }
.brand small { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: .68rem; }
.rail nav { display: flex; flex-direction: column; gap: .25rem; }
.rail nav a { text-decoration: none; padding: .65rem .75rem; border-radius: 10px; color: var(--muted); }
.rail nav a.active, .rail nav a:hover { background: var(--panel); color: var(--text); }
.logout { margin-top: auto; }
.logout button, .btn, .btn-ghost, .btn-danger { border: 0; border-radius: 999px; padding: .65rem 1rem; }
.logout button, .btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.btn-danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

main { padding: 1.5rem 1.75rem 3rem; }
.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1.25rem; }
.page-head.tight { align-items: center; margin-bottom: .75rem; }
.page-head.tight a { color: var(--accent); }
h1 { font-size: 1.8rem; font-weight: 620; margin: 0; letter-spacing: -.03em; }
h2 { font-size: 1rem; margin: 0 0 .75rem; }
.lede { color: var(--muted); margin: .35rem 0 1rem; max-width: 62ch; }
.status-line { margin: 0 0 1rem; color: var(--muted); }
.empty { text-align: center; padding: 2.5rem 1rem; }
.empty h2 { font-size: 1.35rem; }
.empty .btn { display: inline-block; text-decoration: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat, .panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.stat { padding: 1rem; }
.stat span { display: block; color: var(--muted); font-size: .8rem; }
.stat strong { font-size: 1.5rem; }
.panel { padding: 1rem; }
.grid-2 { display: grid; grid-template-columns: 1.4fr .8fr; gap: .75rem; }

table { width: 100%; border-collapse: collapse; }
tr.click-row { cursor: pointer; }
tr.click-row:hover td { background: rgba(255, 255, 255, .04); }
th, td { text-align: left; padding: .7rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 550; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.pill { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; background: #2c3628; }
.pill.ok { color: var(--ok); }
.pill.warn { color: var(--warn); }
.pill.bad { color: var(--bad); }
.pill.rec { color: white; background: var(--rec); }
.pill.muted { color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: .75rem; }
.cards.watch { grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); }
.card { overflow: hidden; display: flex; flex-direction: column; }
.card header, .card .meta { display: flex; justify-content: space-between; gap: .5rem; padding: .75rem .85rem; align-items: center; }
.card .meta.actions { flex-wrap: wrap; justify-content: flex-start; }
.card .meta a { color: var(--accent); }
.frame { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #0c0f0b center/cover no-repeat; display: grid; place-items: center; color: var(--muted); text-decoration: none; }
.frame.large { aspect-ratio: 16/9; min-height: 220px; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.frame.live img { display: block; }
.frame.live span { display: none; }
.frame-name, .exit-full { display: none; }
body:has(.frame.expanded) { overflow: hidden; }
.frame:fullscreen, .frame:-webkit-full-screen, .frame.expanded { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; background: #000; overflow: hidden; border-radius: 0; }
.frame:fullscreen img, .frame:-webkit-full-screen img, .frame.expanded img { object-fit: contain; }
.frame:fullscreen .frame-name, .frame:-webkit-full-screen .frame-name, .frame.expanded .frame-name { display: block; position: absolute; left: 1rem; bottom: 1rem; color: white; background: rgba(0, 0, 0, .5); border-radius: 999px; padding: .35rem .75rem; }
.frame:fullscreen .exit-full, .frame:-webkit-full-screen .exit-full, .frame.expanded .exit-full { display: block; position: absolute; right: 1rem; top: 1rem; }
.frame-full { position: absolute; right: .5rem; bottom: .5rem; display: none; z-index: 1; }
.frame.live .frame-full { display: block; }
.frame:fullscreen .frame-full, .frame.expanded .frame-full, .frame:-webkit-full-screen .frame-full { display: none; }
.layout-choice { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; border: 1px solid var(--line); border-radius: 999px; padding: .55rem .8rem; cursor: pointer; }
.layout-choice input { position: absolute; opacity: 0; pointer-events: none; }
.layout-choice:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.monitor-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .45rem; }
.monitor-list:empty { display: none; }
.monitor-list li { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.monitor-list li span { flex: 1; min-width: 8rem; }
.wall-toolbar { display: grid; gap: .6rem; margin-bottom: .75rem; }
.wall-toolbar label { display: flex; align-items: center; gap: .4rem; }
.wall-toolbar input[type="number"] { width: 5rem; }
button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.wall-grid { display: grid; gap: .45rem; height: calc(100vh - 13.5rem); min-height: 280px; }
.wall-grid .frame { aspect-ratio: auto; min-height: 0; height: 100%; }
.wall-grid.layout-1 { grid-template-columns: 1fr; }
.wall-grid.layout-2 { grid-template-columns: 1fr 1fr; }
.wall-grid.layout-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.wall-grid.layout-3 .frame:first-child { grid-row: span 2; }
.wall-grid.layout-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.wall-grid.layout-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.wall-grid.layout-9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.wall-grid:fullscreen, .wall-grid:-webkit-full-screen, .wall-grid.expanded { height: 100%; width: 100%; background: #000; padding: .4rem; }
.wall-grid.expanded { position: fixed; inset: 0; z-index: 40; }
.pad { padding: 0 .85rem; margin: 0 0 .35rem; }
.url { font-size: .78rem; word-break: break-all; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.feed li { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }
.shot { display: block; width: 160px; border-radius: 8px; margin-bottom: .4rem; }
details.more { background: #141a13; border: 1px solid var(--line); border-radius: 16px; padding: .25rem 1rem 1rem; }
details.more summary { cursor: pointer; padding: .85rem 0; font-weight: 650; }
details.more summary:hover { color: var(--accent); }
code.key { display: block; word-break: break-all; padding: .7rem; background: #141a13; border-radius: 10px; }
.key-line { display: flex; gap: .5rem; align-items: flex-start; margin-top: .45rem; }
.key-line code.key { flex: 1; margin: 0; }
.key-line .btn, .key-line .btn-ghost { flex: none; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1rem; }
.perm-grid h2 { margin-bottom: .35rem; }
.guide { margin-bottom: 1rem; }
.guide ol { margin: .35rem 0 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.guide table { margin-top: .75rem; }
.guide td code, .guide p code { font-size: .84rem; }
.sample { margin: .75rem 0 .35rem; padding: .75rem .85rem; overflow-x: auto; background: #141a13; border-radius: 10px; white-space: pre-wrap; }

form.stack, .stack { display: grid; gap: .75rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
label { display: grid; gap: .35rem; font-size: .86rem; color: var(--muted); }
input, select, textarea { background: #141a13; border: 1px solid var(--line); border-radius: 10px; padding: .65rem .7rem; }
textarea { min-height: 80px; }
.full { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: .5rem; }
.check input { width: auto; }
.field-error, .banner.bad { color: var(--bad); }
.banner { border-radius: 12px; padding: .8rem 1rem; background: #2a2418; border: 1px solid #6a5830; margin-bottom: 1rem; }
.banner pre { white-space: pre-wrap; margin: .5rem 0 0; }
.schedule { display: grid; grid-template-columns: 1.2fr .4fr 1fr 1fr; gap: .5rem; align-items: center; }
.muted { color: var(--muted); }
dialog.play-link { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: inherit; width: min(560px, calc(100% - 2rem)); padding: 1.1rem 1.2rem; }
dialog.play-link::backdrop { background: rgba(0, 0, 0, .55); }
dialog.play-link h2 { margin-bottom: .6rem; }
dialog.play-link p { word-break: break-all; margin: 0 0 1rem; }
.inline { display: flex; gap: .4rem; flex-wrap: wrap; }
video { width: min(100%, 960px); aspect-ratio: 16/9; background: black; border-radius: 12px; display: block; }

.auth-body { min-height: 100vh; display: grid; place-items: center; }
.auth-card { width: min(440px, calc(100% - 2rem)); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow); }
.auth-card h1 { margin-bottom: .4rem; }

@media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; }
    .rail { border-right: 0; border-bottom: 1px solid var(--line); }
    .rail nav { flex-direction: row; flex-wrap: wrap; }
    .logout { margin-top: 0; }
    .stats, .grid-2, .form-grid { grid-template-columns: 1fr; }
}