:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #07141d; color: #e8f7f1; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 4vw, 54px); background: #0b202b; border-bottom: 1px solid #294652; }
header h1 { margin: 3px 0 0; font-size: clamp(22px, 4vw, 36px); }
header a { color: #87e8ca; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.play-button { padding: 10px 14px; border: 1px solid #60f0bd; border-radius: 6px; background: #17604e; color: #effff9; font-weight: 800; text-decoration: none; }
.eyebrow { color: #f7bf64; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.notice { padding: 10px clamp(16px, 4vw, 54px); background: #12313c; color: #a7c6bf; }
.notice.error { background: #4a2020; color: #ffd0cc; }
.admin-login { max-width: 420px; margin: 40px auto; padding: 24px; border: 1px solid #355764; border-radius: 8px; background: #0b202b; }
.admin-login input { margin-bottom: 10px; }
nav { display: flex; gap: 8px; padding: 14px clamp(16px, 4vw, 54px) 0; }
button { min-height: 40px; padding: 8px 15px; border: 1px solid #477080; border-radius: 6px; background: #163542; color: #e8f7f1; cursor: pointer; font-weight: 750; }
button:hover, button.active { border-color: #60f0bd; background: #215263; }
main { padding: 20px clamp(16px, 4vw, 54px) 100px; }
section { max-width: 1280px; margin: auto; }
h2 { margin-top: 26px; color: #f7bf64; }
p { color: #a7c6bf; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
label { display: grid; gap: 6px; color: #a7c6bf; font-size: 12px; font-weight: 700; }
input, textarea, select { width: 100%; border: 1px solid #355764; border-radius: 5px; background: #071820; color: #e8f7f1; padding: 10px; }
textarea { min-height: 58vh; resize: vertical; font: 13px/1.5 ui-monospace, monospace; tab-size: 2; }
.split { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(300px, 2fr); gap: 16px; }
.list { display: grid; align-content: start; gap: 7px; }
.list button { text-align: left; }
footer { position: fixed; inset: auto 0 0; border-top: 1px solid #294652; border-bottom: 0; justify-content: flex-end; }
.secondary { background: transparent; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } nav { overflow-x: auto; } }