@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #eef1f5; --paper: #ffffff; --ink: #1f2933; --muted: #6b7a8c; --line: #d5dbe3;
  --accent: #0e6e6b; --accent-ink: #ffffff;
  --critical: #b3261e; --high: #c9711a; --medium: #2b6cb0; --low: #5b6b7b;
  --open: #b3261e; --in_progress: #c9711a; --resolved: #0e6e6b; --closed: #6b7a8c;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #151a21; --paper: #1e242d; --ink: #e6eaf0; --muted: #98a4b3; --line: #313a46;
    --accent: #3fb3ad; --accent-ink: #0d1a1a; --medium: #6aa6e8; --low: #98a4b3; --closed: #98a4b3; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; } h2 { font-size: 1.1rem; font-weight: 600; margin: 2rem 0 .75rem; }
h2 small { color: var(--muted); font-weight: 400; font-size: .85rem; margin-left: .5rem; }
.muted { color: var(--muted); }

.top { display: flex; align-items: center; gap: 1.5rem; padding: 0 1.5rem; height: 52px; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.top nav { display: flex; gap: 1.25rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.top nav a { color: var(--ink); } .top a.me { color: var(--muted); font-size: .9rem; }
main { max-width: 1100px; margin: 1.75rem auto; padding: 0 1.5rem; }

.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; background: #e3f3f2; color: #0b4e4c; border: 1px solid #b7dedc; }
.flash.err { background: #fbe9e7; color: #7a1a14; border-color: #f0c2bd; }
@media (prefers-color-scheme: dark) { .flash { background: #163b3a; color: #bfe7e5; border-color: #22514f; } .flash.err { background: #4a1d19; color: #f6c9c5; border-color: #6e2a25; } }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.btn, button { font: inherit; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.btn.primary, button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.danger { color: var(--critical); border-color: var(--critical); background: transparent; }
button.link { border: 0; background: none; padding: 0; } button.link.danger { color: var(--critical); }
button:hover, .btn:hover { filter: brightness(.95); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tabs { list-style: none; display: flex; gap: .25rem; padding: 0; margin: .5rem 0 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a { display: block; padding: .5rem .8rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a b { font-weight: 500; margin-left: .2rem; } .tabs a.on { color: var(--ink); border-color: var(--accent); }
.tabs a:hover { text-decoration: none; color: var(--ink); }

.filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.filters input[name=q] { flex: 1; min-width: 180px; }

table.bugs { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table.bugs th { text-align: left; font-weight: 500; color: var(--muted); font-size: .85rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
table.bugs td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.bugs tr:last-child td { border-bottom: 0; }
table.bugs td.id { color: var(--muted); width: 3rem; }
table.bugs .cc { display: block; color: var(--muted); font-size: .8rem; }
/* 严重级别用行左侧色条编码 */
tr.sev-critical td:first-child { box-shadow: inset 3px 0 var(--critical); }
tr.sev-high td:first-child { box-shadow: inset 3px 0 var(--high); }
tr.sev-medium td:first-child { box-shadow: inset 3px 0 var(--medium); }
tr.sev-low td:first-child { box-shadow: inset 3px 0 var(--low); }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 500; white-space: nowrap; border: 1px solid currentColor; }
.severity-critical { color: var(--critical); } .severity-high { color: var(--high); } .severity-medium { color: var(--medium); } .severity-low { color: var(--low); }
.status-open { color: var(--open); } .status-in_progress { color: var(--in_progress); } .status-resolved { color: var(--resolved); } .status-closed { color: var(--closed); }

.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; color: var(--muted); }
.empty { padding: 2.5rem; text-align: center; color: var(--muted); background: var(--paper); border: 1px dashed var(--line); border-radius: 8px; }

.narrow { max-width: 420px; margin: 3rem auto; } .narrow.wide { max-width: 760px; margin-top: 0; } .narrow.left { margin: 2rem 0; }
.stack { display: flex; flex-direction: column; gap: .9rem; }
.stack label { display: flex; flex-direction: column; gap: .3rem; font-weight: 500; font-size: .9rem; }
.stack textarea { resize: vertical; font-weight: 400; } .stack input, .stack select { font-weight: 400; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .9rem; }
.actions { display: flex; gap: 1rem; align-items: center; }
form.inline { display: inline; }
td.ops { white-space: nowrap; } td.ops > * + * { margin-left: .75rem; }
fieldset.group { border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .9rem; margin: 0; background: var(--paper); }
fieldset.group legend { padding: 0 .4rem; color: var(--muted); font-size: .85rem; }
.stack label.check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stack label.check .hint { flex-basis: 100%; margin-left: 1.5rem; }
.hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
input[type=file] { padding: .35rem; }

.attachments { list-style: none; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.attachments li { width: 160px; }
.attachments img { display: block; width: 160px; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }
.attachments a:hover img { border-color: var(--accent); }
.attachments .fname { display: block; font-size: .78rem; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachments .fname button { font-size: .78rem; margin-left: .3rem; }
.timeline .comment .attachments { margin-top: .5rem; }

.bug-detail .crumbs { color: var(--muted); margin: 0 0 .25rem; font-size: .9rem; }
.bug-detail h1 .id { color: var(--muted); font-weight: 400; }
.bug-detail .meta { color: var(--muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: -.5rem 0 1.25rem; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2rem; align-items: start; }
.cols.equal { grid-template-columns: 1fr 1fr; }
.desc { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--medium); border-radius: 8px; padding: 1rem 1.25rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sev-critical .desc { border-left-color: var(--critical); } .sev-high .desc { border-left-color: var(--high); } .sev-low .desc { border-left-color: var(--low); }
.timeline { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.timeline .comment { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; }
.timeline .who { margin-bottom: .35rem; } .timeline .who .muted { margin-left: .5rem; font-size: .85rem; }
.timeline .event { color: var(--muted); font-size: .9rem; padding: .2rem 1rem; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem; }
.card h2 { margin: 0; }
.side { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .75rem; font-size: .9rem; } .side dt { color: var(--muted); }

@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; } .top { padding: 0 1rem; height: auto; min-height: 52px; flex-wrap: wrap; }
  table.bugs th:nth-child(3), table.bugs td:nth-child(3), table.bugs th:nth-child(7), table.bugs td:nth-child(7) { display: none; }
}
@media (prefers-reduced-motion: no-preference) { button, .btn, .tabs a { transition: filter .12s, color .12s; } }