/* Look & feel borrowed from qkrh.dev: dark base, frosted-glass cards, teal accent. */
:root { color-scheme: dark; --bg:#111; --fg:#fff; --mut:rgba(255,255,255,.6); --glass:rgba(0,0,0,.3); --hover:rgba(255,255,255,.07);
  --acc:rgba(0,255,180,.5); --accs:rgb(0,255,180); --bd:rgba(255,255,255,.12); --bad:#ff6b6b; --ok:#3fe0a5; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--fg); font:16px/1.5 sans-serif; }
main { max-width:700px; margin:0 auto; padding:4rem 1rem; }
h1 { font-size:2rem; margin:0 0 1rem; } h2 { font-size:1.05rem; margin:2rem 0 .5rem; }
form, .card { background:var(--glass); border-left:4px solid var(--acc); border-radius:4px; padding:1rem; margin:1.5rem 0 0;
  display:flex; flex-direction:column; gap:.75rem; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.25s; }
form:hover, .card:hover { background:var(--hover); }
label { display:flex; flex-direction:column; gap:.25rem; color:var(--mut); font-size:.9rem; }
textarea, input, select { background:rgba(0,0,0,.35); color:var(--fg); border:1px solid var(--bd); border-radius:4px; padding:.5rem; font:inherit; }
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--accs); }
textarea { min-height:9rem; resize:vertical; font-family:ui-monospace,monospace; }
.row { display:flex; gap:.75rem; } .row > * { flex:1; }
button { background:rgba(0,255,180,.15); color:var(--fg); border:1px solid var(--acc); border-radius:4px; padding:.55rem 1rem; font:inherit; cursor:pointer; transition:.25s; }
button:hover { background:rgba(0,255,180,.28); } button:disabled { opacity:.5; cursor:wait; }
button.danger { background:transparent; border-color:var(--bad); color:var(--bad); padding:.2rem .6rem; } button.danger:hover { background:rgba(255,107,107,.15); }
button.link { background:none; border:0; color:var(--mut); padding:0; text-decoration:underline; }
pre { margin:0; white-space:pre-wrap; word-break:break-word; font-family:ui-monospace,monospace; background:rgba(0,0,0,.35); border:1px solid var(--bd); border-radius:4px; padding:.75rem; }
table { width:100%; border-collapse:collapse; font-size:.9rem; } th,td { text-align:left; padding:.4rem .3rem; border-bottom:1px solid var(--bd); } th { color:var(--mut); font-weight:500; }
.msg.err { color:var(--bad); } .msg.ok { color:var(--ok); } .mut { color:var(--mut); font-size:.9rem; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; } header h1 { margin:0; }
@media (max-width:600px) { main { padding:2rem 1rem; } h1 { font-size:1.6rem; } .row { flex-direction:column; } }
[hidden] { display:none !important; }