:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; padding:34px 4%; background:#101015; color:#f6f5f2; font:22px Arial,sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:36px; }
.brand { color:#ef5360; font-size:44px; font-weight:bold; text-decoration:none; }
.brand span { color:#fff; font-size:25px; margin-left:14px; }
#account-label { color:#c2c0c9; font-size:18px; }
main { min-height:62vh; }
h1 { font-size:42px; line-height:1.15; margin:0 0 22px; }
h2 { font-size:28px; }
p { line-height:1.55; color:#cbc8d2; max-width:1000px; }
button, input, select { font:inherit; border-radius:10px; border:2px solid #55525e; padding:14px 20px; margin:6px 10px 6px 0; color:#fff; background:#292631; }
button { cursor:pointer; }
button.primary { background:#e4b554; border-color:#e4b554; color:#141217; font-weight:bold; }
button:focus, a:focus, input:focus, select:focus { outline:5px solid #f6cf70; outline-offset:4px; }
button:disabled { opacity:.5; cursor:default; }
.pairing { display:flex; align-items:flex-start; flex-wrap:wrap; }
.pair-copy { max-width:800px; padding-right:40px; }
.pair-code { font:bold 60px monospace; letter-spacing:7px; color:#fff; margin:24px 0; }
.pair-url { font-size:24px; color:#e6bd66; word-break:break-word; }
.qr { width:240px; min-width:240px; padding:12px; margin:14px 0; background:white; border-radius:10px; }
.qr svg { display:block; width:100%; height:auto; }
.toolbar { margin-bottom:24px; }
.toolbar input { max-width:420px; width:100%; }
.cards { display:flex; flex-wrap:wrap; margin:0 -10px; }
.card { width:calc(25% - 20px); margin:10px; text-align:left; padding:0; border:2px solid #38343e; border-radius:12px; overflow:hidden; background:#22202a; }
.card img { display:block; width:100%; height:250px; object-fit:cover; background:#18161e; }
.card .card-copy { display:block; padding:15px; }
.card strong { display:block; font-size:22px; }
.card small { display:block; margin-top:8px; color:#bcb6c6; }
.notice { padding:18px 22px; border-left:4px solid #e4b554; background:#24202b; }
.player-heading { display:flex; align-items:center; justify-content:space-between; }
.player-heading h1 { font-size:32px; }
video { display:block; width:100%; max-height:70vh; background:#000; }
.player-actions { margin-top:14px; }
footer { margin-top:35px; color:#85808e; font-size:15px; }
footer span { margin-left:15px; }
[hidden] { display:none !important; }
@media (max-width:800px) { body { font-size:18px; padding:22px; } h1 { font-size:32px; } .brand { font-size:34px; } .brand span { font-size:18px; } header { align-items:flex-start; } #account-label { font-size:14px; max-width:120px; } .card { width:calc(50% - 20px); } .card img { height:220px; } .card strong { font-size:18px; } .pair-code { font-size:42px; letter-spacing:4px; } .player-heading { display:block; } }