:root{ --bg:#0b0b0f; --panel:#14141b; --muted:#9aa4b2; --txt:#e7eaf0; --brand:#8b5cf6; --accent:#3b82f6; --border:#2a2a33; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--txt); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial; }
a{ color:var(--accent); text-decoration:none; }
.hdr{ position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(8px); background:rgba(11,11,15,.7); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.brand{ font-weight:800; letter-spacing:.5px; }
.brand .muted{ color:var(--muted); font-weight:600; margin-left:6px; }
.nav a{ margin-left:14px; padding:8px 10px; border-radius:999px; }
.nav a:hover{ background:rgba(255,255,255,.06); }
.wrap{ max-width:980px; margin:32px auto; padding:0 16px; }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.row{ margin-bottom:12px; }
.modes{ display:flex; gap:12px; align-items:center; }
.mode input{ margin-right:6px; }
select{ background:#0e0e14; color:var(--txt); border:1px solid var(--border); border-radius:10px; padding:8px; }
textarea{ width:100%; background:#0e0e14; color:var(--txt); border:1px solid var(--border); border-radius:12px; padding:10px; resize:vertical; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
button{ background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer; }
button:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.diag{ font-size:12px; color:var(--muted); margin-top:8px; }
.ftr{ padding:24px 16px; text-align:center; color:var(--muted); border-top:1px solid var(--border); margin-top:32px; }