:root{--fg:#222;--muted:#666;--bg:#fff;--border:#e5e7eb;--primary:#2563eb;--ok:#16a34a;--err:#dc2626}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,sans-serif;color:var(--fg);background:var(--bg)}
.container{max-width:840px;margin:40px auto;padding:0 16px}
.panel{border:1px solid var(--border);border-radius:12px;padding:16px 16px 8px;margin:16px 0}
.panel.small{font-size:14px;color:var(--muted)}
.desc{color:var(--muted)}
code{background:#f8fafc;border:1px solid var(--border);padding:0 6px;border-radius:6px}
.form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.form label{display:flex;flex-direction:column;font-size:14px;color:var(--muted)}
.form input{height:38px;padding:0 10px;border:1px solid var(--border);border-radius:8px;color:var(--fg)}
.form button{height:38px;padding:0 14px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer}
.form button:hover{opacity:.95}
.tip{margin:8px 4px 0;font-size:14px;color:var(--muted)}
.tip.ok{color:var(--ok)}
.tip.err{color:var(--err)}