:root{--bg:#f7f7f5;--fg:#1b1b1f;--muted:#5d5d66;--card:#fff;--line:#e3e3e0;--accent:#2f5bd3;--accent-hover:#2346a8;--green:#1a8a4a;--green-bg:#eafaf1;--red:#c62828;--red-bg:#fdecea;--radius:8px}
@media (prefers-color-scheme:dark){:root{--bg:#141417;--fg:#ececf1;--muted:#a0a0ab;--card:#1d1d22;--line:#2c2c33;--accent:#7d9cff;--accent-hover:#5a7de8;--green:#4ade80;--green-bg:#1a2e1f;--red:#f87171;--red-bg:#2e1a1a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,sans-serif}
main{max-width:720px;margin:0 auto;padding:32px 16px}
h1{margin:0 0 4px;font-size:1.6rem}
h2{margin:0 0 16px;font-size:1.25rem}
.muted,.meta{color:var(--muted)}
.meta{font-size:.85rem}

/* ── Tabs ─────────────────────────────────────────────────────────── */
#tabs{display:flex;gap:4px;margin:16px 0 8px}
#tabs button{padding:8px 20px;border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;background:var(--card);color:var(--muted);font:inherit;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
#tabs button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[role="tabpanel"]{background:var(--card);border:1px solid var(--line);border-radius:0 var(--radius) var(--radius) var(--radius);padding:24px 20px;margin-bottom:24px}
[role="tabpanel"][hidden]{display:none}

/* ── Form ─────────────────────────────────────────────────────────── */
form{margin:0}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px}
.field input,.field select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--fg);font:inherit}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
form button{width:100%;padding:12px;border:0;border-radius:var(--radius);background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;transition:background .15s}
form button:hover{background:var(--accent-hover)}
form button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Messages ─────────────────────────────────────────────────────── */
.error{color:var(--red);min-height:1.5em;margin-top:8px;font-weight:500}
.success{color:var(--green);min-height:1.5em;margin-top:8px;font-weight:500}

/* ── Request list ─────────────────────────────────────────────────── */
ul{list-style:none;padding:0;margin:0}
li{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:8px 0;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}
li .req-info{flex:1;min-width:200px}
li .req-info strong{display:block;font-size:.95rem}
li .req-info small{color:var(--muted);font-size:.82rem}
li .req-info .topic{display:inline-block;background:var(--line);padding:2px 8px;border-radius:4px;font-size:.8rem;font-weight:600;margin-top:4px}
li .req-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:600}
.badge.open{background:var(--red-bg);color:var(--red)}
.badge.done{background:var(--green-bg);color:var(--green)}
.btn-sm{padding:6px 14px;border:0;border-radius:var(--radius);background:var(--green);color:#fff;font:inherit;font-weight:600;cursor:pointer;font-size:.82rem;transition:opacity .15s}
.btn-sm:hover{opacity:.85}
.btn-sm:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn-sm:disabled{opacity:.4;cursor:not-allowed}

/* ── Queue stats ──────────────────────────────────────────────────── */
.queue-stats{margin-bottom:12px;font-size:.9rem;color:var(--muted)}
.queue-actions{margin-bottom:12px}
.queue-actions button{padding:8px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.queue-actions button:hover{background:var(--line)}
.queue-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:480px){
  main{padding:16px 10px}
  [role="tabpanel"]{padding:16px 12px}
  li{flex-direction:column;align-items:flex-start}
  li .req-actions{width:100%;justify-content:flex-end}
}