:root { --bg:#07111f; --surface:#0e2032; --cyan:#61f1dd; --sand:#e6bd70; --text:#eff8f8; --muted:#9ab0bd; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 80% -20%,#10415c 0,transparent 38%),var(--bg); color:var(--text); font:16px/1.6 Inter,system-ui,sans-serif; }
a { color:var(--cyan); } .shell { width:min(900px,calc(100% - 2rem)); margin:3rem auto; } .eyebrow { color:var(--sand); font:700 .8rem ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase; } h1 { font-size:clamp(2.5rem,8vw,5rem); line-height:1.05; margin:.5rem 0 1rem; } h2 { line-height:1.15; } .lede,.meta { color:var(--muted); }
.toolbar { display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap; } .tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin:2rem 0 1rem; border-bottom:1px solid #1b3a52; } .tab { color:var(--muted); text-decoration:none; padding:.65rem .9rem; border-bottom:3px solid transparent; } .tab:hover,.tab.active { color:var(--cyan); border-color:var(--cyan); }
fieldset { border:1px solid #1b3a52; border-radius:1rem; padding:1rem; margin:1rem 0; background:var(--surface); } legend { color:var(--cyan); font-weight:700; padding:0 .5rem; } label { display:block; color:var(--muted); margin:.75rem 0; } input,textarea { display:block; width:100%; color:var(--text); background:#071725; border:1px solid #28516b; border-radius:.5rem; padding:.65rem; margin-top:.3rem; } textarea { min-height:100px; } input[type=file] { background:transparent; } .row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .check { display:flex; gap:.5rem; align-items:center; } .check input { width:auto; margin:0; }
button { border:0; border-radius:999px; background:var(--cyan); color:#04202b; font-weight:800; padding:.8rem 1.2rem; cursor:pointer; } button.danger { background:#d78187; } .notice { border-radius:.6rem; padding:.8rem 1rem; margin:1rem 0; background:#132b40; } .notice.error { border:1px solid #b45f64; } .notice.success { border:1px solid var(--cyan); } code { color:var(--text); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; } .card { background:linear-gradient(145deg,var(--surface),#0b1929); border:1px solid #1b3a52; border-radius:1rem; padding:1rem; } .card h2 { margin:.6rem 0; } .stack { display:grid; gap:1rem; } details summary { cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center; } details[open] summary { padding-bottom:1rem; border-bottom:1px solid #1b3a52; } .actions { margin-top:1rem; } .delete-form { margin-top:1rem; padding-top:1rem; border-top:1px solid #1b3a52; } .section-head { display:flex; justify-content:space-between; align-items:end; margin:2rem 0 1rem; } .footer-meta { margin-top:3rem; }
@media(max-width:600px) { .row { grid-template-columns:1fr; gap:0; } .section-head { align-items:start; flex-direction:column; } }