:root { --bg:#ebebee; --surface:#f6f6f8; --raised:#fff; --border:#dedee3; --text:#1d1d1f; --muted:#5f5f64; --accent:#7c3aed; --danger:#c81e1e; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#1d1d1f; --surface:#242426; --raised:#2d2d30; --border:#3a3a3f; --text:#f5f5f7; --muted:#a8a8ae; --accent:#a78bfa; --danger:#f87171; } }
* { box-sizing: border-box; }
body { margin:0; font: 14px/1.45 -apple-system, system-ui, sans-serif; background:var(--bg); color:var(--text); }
h1 { font-size:18px; margin:0; } h2 { font-size:16px; margin:8px 0 4px; } h3 { font-size:13px; margin:16px 0 6px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
button, select, input, textarea { font:inherit; color:inherit; background:var(--raised); border:1px solid var(--border); border-radius:7px; padding:5px 10px; }
button { cursor:pointer; } button[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
textarea { width:100%; resize:vertical; }
#login { max-width:360px; margin:15vh auto; display:grid; gap:12px; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:12px; }
#login label { display:grid; gap:4px; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); }
#filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .check { display:flex; gap:4px; align-items:center; }
.split { display:grid; grid-template-columns: minmax(320px, 2fr) 3fr; height: calc(100vh - 58px); }
#list { list-style:none; margin:0; padding:0; overflow:auto; border-right:1px solid var(--border); }
#list li.group { padding:10px 14px 4px; color:var(--muted); font-size:13px; font-weight:600; }
#list button.item { display:grid; grid-template-columns:auto 1fr auto; gap:8px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:9px 14px; background:transparent; }
#list button.item:hover, #list button.item[aria-current=true] { background:var(--surface); }
.title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#detail { overflow:auto; padding:16px 20px 40px; }
.meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.badge { font-size:12px; padding:1px 7px; border-radius:99px; border:1px solid var(--border); background:var(--raised); }
.badge.bug { border-color:var(--danger); color:var(--danger); } .badge.critical, .badge.high { background:var(--danger); color:#fff; border-color:var(--danger); }
.muted { color:var(--muted); } .error { color:var(--danger); }
pre { white-space:pre-wrap; word-break:break-word; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:10px; font-size:13px; }
pre.text { font-family:inherit; font-size:14px; }
.row { display:flex; gap:12px; align-items:center; margin:8px 0; } .label { width:64px; color:var(--muted); } .buttons { display:flex; gap:6px; flex-wrap:wrap; }
[hidden] { display:none !important; }