:root { color-scheme: dark; --ink:#eaf4fb; --muted:#a9bdc9; --night:#06131b; --panel:#0c2633; --line:#1e4555; --accent:#ff9c3d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 10% 0%,#123d50,var(--night) 45%); color:var(--ink); font-family:system-ui,sans-serif; }
header, main { max-width:1100px; margin:auto; padding:1.25rem 1.5rem; }
header { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.brand { color:var(--ink); font-weight:800; text-decoration:none; letter-spacing:.06em; }
.brand span, .eyebrow, strong { color:var(--accent); }
nav, nav form { display:flex; gap:1rem; align-items:center; }
nav a, nav button { border:0; background:transparent; color:var(--muted); font:inherit; cursor:pointer; padding:0; text-decoration:none; }
.card { width:min(100%,460px); margin:4rem auto; padding:2rem; border:1px solid var(--line); border-radius:18px; background:rgba(12,38,51,.9); }
.card.wide { width:min(100%,1040px); }
h1 { font-size:clamp(2rem,6vw,4rem); margin:.25rem 0 1rem; }
h2 { margin:1rem 0 .2rem; font-size:1.1rem; }
p, small, span { color:var(--muted); line-height:1.55; }
.eyebrow { font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
form { display:grid; gap:.65rem; margin-top:1.5rem; }
label { font-weight:700; margin-top:.5rem; }
input, select { padding:.8rem; border:1px solid var(--line); border-radius:9px; background:#071a24; color:var(--ink); font:inherit; }
input[type=checkbox] { width:auto; padding:0; }
input[type=range] { padding:0; accent-color:var(--accent); }
button[type=submit], .button-link { margin-top:.75rem; padding:.85rem; border:0; border-radius:9px; background:var(--accent); color:#201005; font-weight:800; cursor:pointer; text-decoration:none; display:inline-block; }
button.danger { background:#d9534f; color:white; }
.button-link.secondary { margin-left:.5rem; background:transparent; color:var(--ink); border:1px solid var(--line); }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid article, .coming, .table-card { padding:1.25rem; border:1px solid var(--line); border-radius:14px; background:rgba(12,38,51,.75); }
.grid strong { display:block; font-size:2.2rem; margin-top:.5rem; }
.coming, .table-card { margin-top:1rem; }
.messages { padding:0; list-style:none; color:var(--muted); }
.messages li { padding:.75rem; background:#123d50; border-radius:8px; margin:.5rem 0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.75rem; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-size:.78rem; text-transform:uppercase; }
td form { margin:0; display:block; }
td form button { margin:0; padding:.5rem .7rem; font-size:.85rem; }
.editor-workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,.8fr); align-items:start; gap:1.25rem; margin-top:1.25rem; }
.editor-stage { position:sticky; top:1rem; }
.card-editor { position:relative; isolation:isolate; width:100%; aspect-ratio:792/612; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:linear-gradient(135deg,#102d3e,#07141c) no-repeat; }
.editor-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(1,8,13,.72),rgba(1,8,13,.08) 52%,rgba(1,8,13,.18)); pointer-events:none; }
.editor-title { position:absolute; top:7%; left:7%; right:7%; display:grid; gap:.35rem; pointer-events:none; text-shadow:0 2px 6px #000; }
.editor-title strong { font-size:clamp(1.4rem,5vw,3.3rem); color:var(--accent); }
.editor-title span { font-size:clamp(.75rem,2vw,1.1rem); color:#fff; }
.qso-overlay { position:absolute; z-index:2; min-height:36.9%; padding:.55rem .85rem; border:1px solid rgba(255,255,255,.35); border-radius:9px; box-shadow:0 8px 28px rgba(0,0,0,.32); touch-action:none; cursor:grab; color:#fff; }
.qso-overlay.dragging { cursor:grabbing; box-shadow:0 0 0 3px var(--accent),0 12px 34px rgba(0,0,0,.5); }
.qso-overlay:focus { outline:3px solid var(--accent); outline-offset:2px; }
.drag-hint { margin:0 0 .25rem; color:#c8e7f2; font-size:clamp(.45rem,1.3vw,.7rem); font-weight:800; text-transform:uppercase; }
.qso-overlay dl { margin:0; }
.qso-overlay dl div { display:grid; grid-template-columns:1fr auto; gap:.5rem; padding:.17rem 0; border-top:1px solid rgba(255,255,255,.18); }
.qso-overlay dl div:first-child { border-top:0; }
.qso-overlay dt { font-size:clamp(.48rem,1.4vw,.78rem); font-weight:800; text-transform:uppercase; color:#c8e7f2; }
.qso-overlay dd { margin:0; font-size:clamp(.52rem,1.55vw,.88rem); }
.editor-help { font-size:.9rem; margin:.75rem 0; }
.editor-controls { margin:0; padding:1rem; border:1px solid var(--line); border-radius:12px; background:#071a24; }
@media(max-width:760px) { header{align-items:flex-start;flex-direction:column} .grid{grid-template-columns:1fr} .card{margin:1rem auto;padding:1rem} .editor-workspace{grid-template-columns:1fr} .editor-stage{position:static} }