:root{--bg: #f4f7fb;--surface: #ffffff;--text: #111827;--muted: #6b7280;--primary: #0ea5e9;--primary-strong: #0369a1;--border: #dbe1eb}*{box-sizing:border-box}body{margin:0;font-family:IBM Plex Sans,Segoe UI,sans-serif;background:linear-gradient(150deg,#ecfeff,#f8fafc 40%,#e0f2fe);color:var(--text)}.page{max-width:1200px;margin:0 auto;padding:24px;display:grid;gap:16px}header h1{margin:0}header p{color:var(--muted);margin:8px 0 0}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;display:grid;gap:10px;box-shadow:0 10px 24px #0f172a0f}.panel h2{margin:0;font-size:1rem}input,select,button{width:100%;border-radius:10px;border:1px solid var(--border);padding:10px 12px;font:inherit}button{cursor:pointer;background:#f8fafc}button.primary{background:linear-gradient(120deg,var(--primary) 0%,var(--primary-strong) 100%);color:#fff;border:none}.inline{display:flex;align-items:center;gap:8px}.inline input{width:auto}.auth{grid-template-columns:1fr 1fr auto auto;align-items:end}.auth label{display:grid;gap:6px;font-weight:600}.output pre{margin:0;max-height:320px;overflow:auto;background:#0f172a;color:#e2e8f0;border-radius:10px;padding:12px}@media (max-width: 900px){.auth{grid-template-columns:1fr}}