:root { color-scheme: dark; --bg:#080b12; --card:#111827; --muted:#93a4bd; --text:#eef4ff; --accent:#7dd3fc; --danger:#fb7185; --ok:#86efac; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top, #18233d, var(--bg)); color:var(--text); }
.shell { max-width: 1180px; margin: 0 auto; padding: 32px 18px 80px; }
.hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:24px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; }
h1 { margin:.1em 0; font-size: clamp(2rem, 5vw, 4rem); }
h2 { margin-top:0; }
.notice { color:#fde68a; max-width:780px; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.card { background:rgba(17,24,39,.88); border:1px solid rgba(148,163,184,.2); border-radius:20px; padding:20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.wide { grid-column: 1 / -1; }
label { display:block; margin:10px 0; color:var(--muted); }
input, select { width:100%; margin-top:6px; border-radius:12px; border:1px solid #334155; background:#0b1220; color:var(--text); padding:12px; }
button { border:0; border-radius:12px; padding:11px 14px; margin:6px 6px 6px 0; background:#0ea5e9; color:white; font-weight:700; cursor:pointer; }
button:hover { filter:brightness(1.1); }
button.danger, .danger { background:var(--danger); color:#19040a; }
pre { white-space:pre-wrap; background:#050812; border:1px solid #263244; border-radius:14px; padding:12px; max-height:260px; overflow:auto; color:#cbd5e1; }
.device-row { display:grid; grid-template-columns: 1fr 1.4fr auto; gap:8px; align-items:end; }
.form-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
ul { padding-left:18px; }
.boards { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.board { display:grid; grid-template-columns: repeat(6, 42px); gap:5px; margin:10px 0 18px; }
.cell { width:42px; height:42px; border-radius:9px; border:1px solid #334155; background:#0b1220; color:#e2e8f0; }
.cell.hit { background:#ef4444; } .cell.miss { background:#334155; } .cell.ship { outline:2px solid #38bdf8; }
@media (max-width:800px) { .grid,.boards,.form-grid { grid-template-columns:1fr; } .hero { flex-direction:column; } .device-row { grid-template-columns:1fr; } }