@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { color-scheme: dark; --ink:#eef4ef; --muted:#9caea4; --bg:#101816; --panel:#18231f; --line:#2d4038; --accent:#f1b24a; --danger:#e77d6e; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 80% 0%, #294b3c 0, transparent 35%), var(--bg); font:16px 'DM Sans', sans-serif; } .shell { width:min(1100px, calc(100% - 32px)); margin:0 auto; padding:48px 0 72px; } header,.panel-head,.preset-row,.actions { display:flex; align-items:center; gap:16px; } header { justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:26px; } .eyebrow { color:var(--accent); letter-spacing:.12em; font-weight:700; margin:0 0 8px; } h1,h2 { font-family:'Space Grotesk', sans-serif; margin:0; } h1 { font-size:clamp(2rem, 5vw, 3.5rem); } h2 { font-size:1.2rem; } a,button { border:1px solid var(--accent); background:var(--accent); color:#1a1d17; border-radius:5px; padding:10px 14px; font:600 14px 'DM Sans',sans-serif; cursor:pointer; text-decoration:none; } button.secondary { background:transparent; color:var(--ink); border-color:var(--line); } .status { color:var(--muted); min-height:24px; margin:24px 0; } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .panel { border:1px solid var(--line); background:rgba(24,35,31,.9); padding:22px; border-radius:6px; } .panel-head { justify-content:space-between; margin-bottom:18px; } .preset-row { border-top:1px solid var(--line); padding:14px 0; flex-wrap:wrap; } .preset-row strong { flex:1 1 160px; } .preset-row span { color:var(--muted); font-size:14px; } dialog { color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px; width:min(620px, calc(100% - 32px)); } dialog::backdrop { background:rgba(0,0,0,.7); } label { display:grid; gap:8px; margin:16px 0; color:var(--muted); } input,textarea { width:100%; border:1px solid var(--line); border-radius:4px; background:#101816; color:var(--ink); padding:11px; font:inherit; } textarea { min-height:240px; font-family:monospace; resize:vertical; } .hint,.empty { color:var(--muted); font-size:14px; } .error { color:var(--danger); min-height:22px; } .actions { justify-content:flex-end; } @media (max-width:700px) { .shell { padding-top:28px; } header { align-items:flex-start; flex-direction:column; } .grid { grid-template-columns:1fr; } }