:root { color-scheme: dark; --bg:#0b1014; --card:#121a20; --line:#263640; --text:#e8f1f2; --muted:#9bb0b8; --accent:#67e8c2; --warn:#f3c969; --danger:#ff8585; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0,#13272b 0,var(--bg) 36%); color:var(--text); font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
header,main,footer { width:min(100% - 2rem,980px); margin:auto; }
header { display:flex; align-items:center; gap:1rem; padding:2rem 0 1.5rem; border-bottom:1px solid var(--line); }
.mark { display:grid; place-items:center; width:3rem; height:3rem; border:1px solid var(--accent); color:var(--accent); font-weight:800; font-size:1.4rem; transform:rotate(45deg); }
.mark::first-letter { transform:rotate(-45deg); }
h1 { margin:0; letter-spacing:.18em; font-size:1.2rem; } header p { margin:0; color:var(--muted); font-size:.9rem; }
.status { margin-left:auto; color:var(--muted); font-size:.85rem; }
main { padding:1.5rem 0 3rem; }
.notice { border-left:3px solid var(--warn); background:#201d13; padding:.8rem 1rem; margin-bottom:1.5rem; }
nav { display:flex; gap:.5rem; margin-bottom:1rem; }
button,select { border:1px solid var(--line); border-radius:6px; background:#18232a; color:var(--text); padding:.65rem 1rem; font:inherit; cursor:pointer; }
button:hover { border-color:var(--accent); } button:disabled { opacity:.5; cursor:not-allowed; }
.tab.active,.primary { color:#071310; background:var(--accent); border-color:var(--accent); font-weight:700; }
.panel { background:color-mix(in srgb,var(--card) 95%,transparent); border:1px solid var(--line); border-radius:10px; padding:1.25rem; box-shadow:0 20px 50px #0004; }
label { display:block; color:var(--muted); font-size:.9rem; margin:.5rem 0; }
textarea { width:100%; min-height:260px; resize:vertical; border:1px solid var(--line); border-radius:7px; background:#090e12; color:var(--text); padding:1rem; font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }
textarea:focus,select:focus,button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.actions { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; margin-top:.75rem; }.actions label { margin-right:-.25rem; }
.review { border-top:1px solid var(--line); margin-top:1.25rem; padding-top:.75rem; }.review h2 { font-size:1rem; }
.summary { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }.badge { background:#1c2b31; border:1px solid #34505a; border-radius:999px; padding:.25rem .6rem; font-size:.8rem; }
.warnings { color:var(--warn); margin:.75rem 0; white-space:pre-line; }.confirm { color:var(--warn); margin:1rem 0; }.confirm input { margin-right:.5rem; }
.error { color:var(--danger); min-height:1.5rem; }.hidden { display:none !important; }
footer { color:var(--muted); text-align:center; border-top:1px solid var(--line); padding:1rem; font-size:.8rem; }
@media(max-width:600px){ header{align-items:flex-start}.status{display:none}.actions{align-items:stretch;flex-direction:column}textarea{min-height:210px} }