/* ============================================================
   trycatch — design tokens & base  (v2: fresh / airy)
   Soft warm-neutral paper, calm teal accent, generous spacing,
   light code theme, rounded friendly chrome.
   ============================================================ */

:root {
  /* accent (set by Tweaks) — calm violet by default */
  --accent: #6d6af0;
  --accent-h: 280;
  --accent-strong: oklch(0.52 0.10 var(--accent-h));
  --accent-soft: color-mix(in oklch, var(--accent) 14%, white);
  --accent-softer: color-mix(in oklch, var(--accent) 6%, white);

  /* soft, faintly-warm neutrals — paper, not corporate grey */
  --bg: oklch(0.989 0.004 120);
  --surface: #ffffff;
  --surface-2: oklch(0.977 0.005 130);
  --surface-3: oklch(0.962 0.006 135);
  --border: oklch(0.935 0.005 140);
  --border-strong: oklch(0.885 0.007 140);

  --text: oklch(0.31 0.014 200);
  --text-2: oklch(0.47 0.012 200);
  --text-3: oklch(0.61 0.01 195);
  --text-faint: oklch(0.73 0.008 190);

  /* status — softened, fresher */
  --error: oklch(0.6 0.16 22);
  --error-soft: oklch(0.962 0.024 25);
  --fatal: oklch(0.52 0.16 8);
  --warning: oklch(0.66 0.12 65);
  --warning-soft: oklch(0.965 0.04 80);
  --info: oklch(0.62 0.1 230);
  --info-soft: oklch(0.962 0.026 230);
  --success: oklch(0.62 0.11 160);
  --success-soft: oklch(0.96 0.03 160);
  --muted-chip: oklch(0.62 0.006 200);

  /* sizing — airy by default */
  --radius: 11px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --row-h: 34px;
  --density-pad: 13px;

  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  --shadow-sm: 0 1px 2px oklch(0.55 0.02 200 / 0.05);
  --shadow-md: 0 6px 22px oklch(0.5 0.02 200 / 0.07), 0 2px 6px oklch(0.5 0.02 200 / 0.05);
  --shadow-lg: 0 18px 50px oklch(0.4 0.03 200 / 0.14), 0 4px 14px oklch(0.4 0.03 200 / 0.07);

  --sidebar-w: 250px;
  --topbar-h: 60px;
  --gutter: 30px;
}

/* compact mode = the dense option (was default) */
[data-density="compact"] {
  --radius: 9px;
  --radius-lg: 13px;
  --row-h: 30px;
  --density-pad: 9px;
  --gutter: 22px;
}

/* ===================== dark theme ===================== */
[data-theme="dark"] {
  --accent-strong: oklch(0.74 0.12 var(--accent-h));
  --accent-soft: color-mix(in oklch, var(--accent) 26%, var(--surface));
  --accent-softer: color-mix(in oklch, var(--accent) 13%, var(--surface));

  --bg: oklch(0.18 0.006 255);
  --surface: oklch(0.215 0.008 255);
  --surface-2: oklch(0.255 0.009 255);
  --surface-3: oklch(0.3 0.011 255);
  --border: oklch(0.32 0.009 255);
  --border-strong: oklch(0.41 0.012 255);

  --text: oklch(0.94 0.006 255);
  --text-2: oklch(0.8 0.008 255);
  --text-3: oklch(0.66 0.009 255);
  --text-faint: oklch(0.53 0.01 255);

  --error: oklch(0.72 0.15 22);
  --error-soft: oklch(0.33 0.08 25);
  --fatal: oklch(0.74 0.16 8);
  --warning: oklch(0.8 0.12 70);
  --warning-soft: oklch(0.35 0.06 72);
  --info: oklch(0.74 0.1 230);
  --info-soft: oklch(0.33 0.06 230);
  --success: oklch(0.75 0.12 160);
  --success-soft: oklch(0.32 0.06 160);
  --muted-chip: oklch(0.7 0.006 255);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md: 0 6px 22px oklch(0 0 0 / 0.45), 0 2px 6px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 18px 50px oklch(0 0 0 / 0.55), 0 4px 14px oklch(0 0 0 / 0.4);
}
[data-theme="dark"] .badge.fatal { background: oklch(0.34 0.08 10); }
[data-theme="dark"] .flag.regressed { background: oklch(0.34 0.07 332); color: oklch(0.8 0.14 332); }
[data-theme="dark"] .badge.warning { color: oklch(0.82 0.12 80); }
[data-theme="dark"] .flag.escalating { color: oklch(0.82 0.12 60); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: color-mix(in oklch, var(--accent) 22%, transparent); }

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 7px; border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ===================== layout ===================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; }
.app.no-sidebar { grid-template-columns: 1fr; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.sidebar-head { padding: 18px 18px 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(145deg, color-mix(in oklch, var(--accent) 88%, white), var(--accent-strong));
  display: grid; place-items: center; color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.brand-name b { color: var(--accent-strong); }

.proj-switch {
  margin: 0 12px 12px; padding: 8px 11px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; gap: 9px; cursor: pointer; width: calc(100% - 24px);
  transition: background .14s, border-color .14s;
}
.proj-switch:hover { background: var(--surface-3); border-color: var(--border-strong); }

.org-switch {
  margin: 2px 12px 8px; padding: 8px 11px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; gap: 9px; cursor: pointer; width: calc(100% - 24px);
  transition: background .14s, border-color .14s; box-shadow: var(--shadow-sm);
}
.org-switch:hover { background: var(--surface-2); border-color: var(--border-strong); }
.org-switch .nm { flex: 1; min-width: 0; text-align: left; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.proj-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.proj-switch .meta { min-width: 0; flex: 1; text-align: left; display: flex; flex-direction: column; }
.proj-switch .meta .nm { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-switch .meta .sub { color: var(--text-3); font-size: 11px; font-family: var(--mono); }

.nav { flex: 1; overflow-y: auto; padding: 6px 12px 20px; }
.nav-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); font-weight: 700; padding: 16px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border-radius: var(--radius-sm); border: none; background: none;
  color: var(--text-2); font-size: 13.5px; text-align: left; position: relative;
  transition: background .12s, color .12s; margin-bottom: 1px;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-item.active svg { color: var(--accent-strong); }
.nav-item svg { width: 17px; height: 17px; flex: none; color: var(--text-3); }
.nav-item .count {
  margin-left: auto; min-width: 24px; height: 20px; padding: 0 7px;
  border-radius: 999px; border: 1px solid color-mix(in oklch, var(--error) 22%, transparent);
  background: var(--error-soft); color: var(--error);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 1;
}
.nav-item.active .count {
  border-color: color-mix(in oklch, var(--error) 34%, transparent);
  background: color-mix(in oklch, var(--error-soft) 74%, var(--surface));
  color: var(--error);
}

.sidebar-foot { border-top: 1px solid var(--border); padding: 10px 12px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 7px; border-radius: var(--radius-sm); cursor: pointer; }
.user-chip:hover { background: var(--surface-2); }
.avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 11px; }

/* main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: var(--topbar-h); flex: none; border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 82%, transparent);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter);
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs > span:first-child { flex: none; }
.crumbs .sep { color: var(--text-faint); }
.crumbs .cur { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--accent-strong); }

.content { flex: 1; overflow-y: auto; min-height: 0; }
.page { padding: 28px var(--gutter) 80px; max-width: 1320px; margin: 0 auto; }
.page-wide { max-width: 1560px; }

/* responsive grid helpers (collapse on narrow viewports) */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-split { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.grid-rail { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }

.sidebar-backdrop { display: none; }
.menu-btn { display: none !important; }

@media (max-width: 1120px) {
  .grid-split, .grid-rail { grid-template-columns: 1fr; }
  .grid-split .sticky-rail, .grid-rail .sticky-rail { position: static !important; }
}
@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 286px; z-index: 300;
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidebar { transform: none; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; background: oklch(0.2 0.02 255 / 0.42); z-index: 250; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .menu-btn { display: inline-flex !important; }
  .page { padding: 20px 18px 64px; }
}
@media (max-width: 680px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .topbar .search { width: 150px !important; }
}

.page-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; margin: 0; }
.page-head .sub { color: var(--text-3); font-size: 13px; margin-top: 4px; }
.page-head .spacer { flex: 1; }

.issue-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.issue-detail-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* ===================== primitives ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  height: 34px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 550;
  transition: background .14s, border-color .14s, box-shadow .14s; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.danger { color: var(--error); border-color: color-mix(in oklch, var(--error) 28%, var(--border)); }
.btn.danger:hover { background: var(--error-soft); }
.btn.sm { height: 29px; padding: 0 11px; font-size: 12.5px; }
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { width: 29px; }
.btn:disabled { opacity: .5; pointer-events: none; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px;
  border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge.error { background: var(--error-soft); color: var(--error); }
.badge.fatal { background: oklch(0.94 0.035 10); color: var(--fatal); }
.badge.warning { background: var(--warning-soft); color: oklch(0.5 0.12 58); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.debug { background: var(--surface-3); color: var(--text-2); }
.badge.success { background: var(--success-soft); color: var(--success); }
.badge.neutral { background: var(--surface-3); color: var(--text-2); border-color: var(--border); }
.badge.solid-accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge.outline { background: transparent; border-color: var(--border-strong); color: var(--text-2); font-weight: 550; }

.tag-pill {
  display: inline-flex; align-items: center; gap: 0; height: 22px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2); overflow: hidden;
  font-family: var(--mono); font-size: 11px;
}
.tag-pill .k { padding: 0 6px; color: var(--text-3); background: var(--surface-3); height: 100%; display: flex; align-items: center; white-space: nowrap; }
.tag-pill .v { padding: 0 7px; color: var(--text); display: flex; align-items: center; white-space: nowrap; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px 22px; }
.card-head { display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.card-head h3 { margin: 0; font-size: 13.5px; font-weight: 650; letter-spacing: -0.01em; }
.card-head .spacer { flex: 1; }

.kbd {
  font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2);
}

.mono { font-family: var(--mono); }
.muted { color: var(--text-3); }
.faint { color: var(--text-faint); }

/* segmented control */
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--surface-3); border-radius: var(--radius); border: 1px solid var(--border); }
.seg button { height: 26px; padding: 0 12px; border: none; background: none; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--text-2); transition: background .12s, color .12s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-sm); font-weight: 600; }

/* input */
.input {
  height: 34px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13px; width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-faint); }
textarea.input { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.55; }

.search {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  flex: 1; transition: border-color .14s, box-shadow .14s;
}
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.search input { border: none; background: none; outline: none; flex: 1; font-size: 13.5px; color: var(--text); font-family: var(--mono); }
.search input::placeholder { color: var(--text-faint); font-family: var(--sans); }

.filter-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
.fdrop { position: relative; }
.fbtn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  font-size: 13px; color: var(--text-2); font-weight: 550;
}
.fbtn:hover { border-color: var(--text-faint); color: var(--text); }
.fbtn .lbl { color: var(--text-faint); }
.fbtn .val { color: var(--text); font-weight: 600; }
.fbtn svg.chev { width: 15px; height: 15px; color: var(--text-faint); }
.fbtn.on { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-softer); }

.menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 340px; overflow-y: auto;
}
.menu.above { top: auto; bottom: calc(100% + 6px); }
.menu.right { left: auto; right: 0; }
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: none; background: none; border-radius: 7px; font-size: 13px; color: var(--text); text-align: left;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.sel { color: var(--accent-strong); font-weight: 600; }
.menu-item .ck { margin-left: auto; color: var(--accent-strong); width: 16px; height: 16px; }
.menu-sep { height: 1px; background: var(--border); margin: 6px 0; }
.menu-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 700; padding: 8px 10px 4px; }

/* issue rows — roomier, soft dividers, rounded hover */
.issue-row {
  display: grid; align-items: center; gap: 16px; padding: 15px 20px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s;
  grid-template-columns: 20px 1fr 130px 90px 72px 86px;
}
.issue-row:hover { background: var(--accent-softer); }
.issue-row:last-child { border-bottom: none; }
.issue-row.head {
  cursor: default; padding-top: 11px; padding-bottom: 11px; background: var(--surface-2);
  position: sticky; top: 0; z-index: 5; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); font-weight: 700;
}
.issue-row.head:hover { background: var(--surface-2); }
.issue-title { min-width: 0; }
.issue-title .t1 { display: flex; align-items: center; gap: 9px; }
.issue-title .ttl { font-weight: 650; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.issue-title .culprit { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.issue-title .meta-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.col-right { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.col-num .big { font-weight: 600; font-size: 13.5px; }
.col-num .lbl { font-size: 10px; color: var(--text-faint); }

.checkbox { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; }
.checkbox.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat .lbl { font-size: 11px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.stat .v { font-size: 29px; font-weight: 700; letter-spacing: -0.025em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.stat .delta { font-size: 12px; font-weight: 600; margin-top: 4px; }
.delta.up { color: var(--error); }
.delta.down { color: var(--success); }
.delta.flat { color: var(--text-3); }

/* code / stacktrace — LIGHT theme (de-corporate) */
.code-block { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; overflow: auto; }
.frame { border-bottom: 1px solid var(--border); }
.frame:last-child { border-bottom: none; }
.frame-head { display: flex; align-items: center; gap: 9px; padding: 10px 16px; background: var(--surface); cursor: pointer; font-family: var(--mono); font-size: 12px; transition: background .12s; }
.frame-head:hover { background: var(--surface-2); }
.frame-head.app { background: var(--accent-softer); }
.frame-head .fn { color: var(--accent-strong); font-weight: 600; }
.frame-head .at { color: var(--text-faint); }
.frame-head .file { color: var(--text-2); }
.frame-head .ln { color: var(--text-faint); }
.frame-head .spacer { flex: 1; }
.code-lines { font-family: var(--mono); font-size: 12px; background: var(--surface-2); color: var(--text-2); padding: 8px 0; overflow-x: auto; border-top: 1px solid var(--border); }
.code-lines .cl { display: flex; padding: 1px 16px; white-space: pre; }
.code-lines .cl .gut { width: 44px; text-align: right; padding-right: 16px; color: var(--text-faint); user-select: none; flex: none; }
.code-lines .cl.hl { background: var(--error-soft); }
.code-lines .cl.hl .gut { color: var(--error); font-weight: 600; }
.code-lines .cl.hl span:last-child { color: var(--text); }

/* breadcrumbs trail */
.crumb-trail { display: flex; flex-direction: column; }
.crumb-item { display: grid; grid-template-columns: 100px 74px 1fr 80px; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 12px; align-items: baseline; }
.crumb-item:last-child { border-bottom: none; }
.crumb-item:hover { background: var(--surface-2); }
.crumb-item .cat { font-family: var(--mono); color: var(--text-3); font-size: 11px; }
.crumb-item .msg { font-family: var(--mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb-item .ts { font-family: var(--mono); color: var(--text-faint); font-size: 11px; text-align: right; }

/* key/value table */
.kv { display: grid; grid-template-columns: 184px 1fr; }
.kv > div { padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 12px; min-width: 0; }
.kv .k { color: var(--text-3); font-family: var(--mono); font-size: 11.5px; background: var(--surface-2); }
.kv .v { font-family: var(--mono); word-break: break-word; }

/* tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { padding: 10px 14px; border: none; background: none; font-size: 13.5px; color: var(--text-3); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--accent-strong); border-bottom-color: var(--accent); font-weight: 650; }
.tab .pill { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); margin-left: 6px; }

.spark { display: block; }

/* bar chart */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.bars .bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; transition: opacity .1s; }
.bars .bar:hover { opacity: 1; }
.bars .bar.err { background: var(--error); }

/* toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.toast-wrap.raised { bottom: 72px; }
.toast { background: var(--text); color: var(--surface); padding: 11px 16px; border-radius: var(--radius); font-size: 13px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: toastin .22s ease; }
.toast svg { width: 17px; height: 17px; color: color-mix(in oklch, var(--accent) 60%, white); }
.pwa-update-prompt {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 1000;
  border: 0;
  background: var(--text);
  color: var(--surface);
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--shadow-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: toastin .22s ease;
}
.pwa-update-prompt:hover { background: color-mix(in oklch, var(--text) 92%, var(--accent)); }
.pwa-update-prompt svg { width: 17px; height: 17px; color: var(--accent); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

.assignees { display: flex; }
.assignees .avatar { width: 23px; height: 23px; font-size: 10px; border: 2px solid var(--surface); margin-left: -7px; }
.assignees .avatar:first-child { margin-left: 0; }

/* utility */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; }
.wrap { flex-wrap: wrap; }
.gap6 { gap: 7px; } .gap8 { gap: 10px; } .gap12 { gap: 15px; } .gap14 { gap: 16px; } .gap16 { gap: 20px; } .gap20 { gap: 26px; }
.divider { height: 1px; background: var(--border); margin: 18px 0; }
.empty { text-align: center; color: var(--text-3); padding: 60px 20px; }
.empty > svg { width: 44px; height: 44px; color: var(--text-faint); margin-bottom: 12px; }

.flag {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.flag.regressed { background: oklch(0.95 0.035 330); color: oklch(0.52 0.16 332); }
.flag.escalating { background: var(--warning-soft); color: oklch(0.5 0.13 50); }
.flag.review { background: var(--accent-soft); color: var(--accent-strong); }

.dsn-box { display: flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.dsn-box code { flex: 1; padding: 10px 13px; font-family: var(--mono); font-size: 12px; color: var(--text); overflow-x: auto; white-space: nowrap; display: flex; align-items: center; }
.dsn-box button { border: none; border-left: 1px solid var(--border-strong); background: var(--surface); padding: 0 14px; color: var(--text-2); display: flex; align-items: center; gap: 6px; font-size: 12px; }
.dsn-box button:hover { background: var(--surface-3); color: var(--accent-strong); }

.switch { display: inline-block; width: 36px; height: 21px; border-radius: 12px; background: var(--border-strong); position: relative; transition: background .16s; flex: none; cursor: pointer; }
.switch.on { background: var(--accent); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: var(--shadow-sm); }
.switch.on::after { transform: translateX(15px); }

.progress { height: 7px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); border-radius: 5px; }

/* login */
.login-wrap { height: 100%; display: grid; place-items: center; background:
  radial-gradient(1000px 520px at 50% -8%, var(--accent-soft), transparent 62%),
  var(--bg); }
.login-card { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 36px 32px; }

@media (max-width: 520px) {
  .topbar { gap: 8px; padding: 0 12px; }
  .crumbs { flex: 1; min-width: 0; }
  .topbar .search { width: 42px !important; padding: 0 10px; flex: none; justify-content: center; }
  .topbar .search input, .topbar .search .kbd { display: none; }
  .page { padding: 18px 14px 56px; }
  .page-head { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .page-head h1 { font-size: 21px; }
  .page-head .sub { font-size: 12px; line-height: 1.45; }
  .page-head .spacer { display: none; }
  .page-head > .btn, .page-head > .fdrop { flex: 1 1 auto; }
  .issue-detail-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .issue-detail-actions { flex-wrap: wrap; justify-content: flex-start; }
  .card-head { flex-wrap: wrap; padding: 13px 14px; }
  .tabs, .seg { max-width: 100%; flex-wrap: wrap; overflow: visible; }
  .tabs { padding-bottom: 1px; }
  .tab, .seg button { flex: none; }
  .filter-bar { align-items: stretch; gap: 8px; }
  .filter-bar .seg { width: 100%; }
  .filter-bar .grow { display: none; }
  .filter-bar .fdrop { flex: 1 1 44%; min-width: 0; }
  .filter-bar .fbtn { width: 100%; justify-content: space-between; }
  .bulk-actions { flex-wrap: wrap; }
  .bulk-actions .grow { display: none; }
  .key-actions { flex-wrap: wrap; }
  .setting-card-row, .num-setting-row { flex-direction: column; align-items: stretch !important; }
  .setting-card-control { width: 100% !important; max-width: none !important; }
  .num-setting-row > .col { align-items: stretch !important; width: 100%; }
  .num-setting-row input.input { width: 100% !important; text-align: left !important; }
  .ds-row { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; padding: 14px !important; }
  .ds-row-control { width: 100%; min-width: 0; }
  .ds-row-control > .input, .ds-row-control > .search { width: 100%; max-width: 100% !important; }
  .confirm-actions { flex-wrap: wrap; }
  .confirm-actions .btn { flex: 1 1 auto; }
  .inline-add { flex-direction: column; align-items: stretch; }
  .inline-add .input { flex: none; min-width: 0; width: 100%; }
  .inline-add .btn { flex: none; width: 100%; justify-content: center; }
  .issue-row {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 9px 12px;
    padding: 13px 14px;
  }
  .issue-row.head {
    grid-template-columns: 20px repeat(3, minmax(0, 1fr));
    align-items: center;
  }
  .issue-row.head > :nth-child(2), .issue-row.head > :nth-child(3) { display: none; }
  .issue-row:not(.head) > :nth-child(3) { display: none !important; }
  .issue-row:not(.head) > :nth-child(4),
  .issue-row:not(.head) > :nth-child(5),
  .issue-row:not(.head) > :nth-child(6) {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
  .issue-title .t1 { min-width: 0; }
  .issue-title .meta-line { gap: 6px; }
  .tag-pill .v { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
  .kv { grid-template-columns: 1fr; }
  .toast-wrap { left: 14px; right: 14px; bottom: 14px; transform: none; align-items: stretch; }
  .toast-wrap.raised { bottom: 66px; }
  .toast { justify-content: center; }
  .pwa-update-prompt { left: 14px; right: 14px; bottom: 14px; transform: none; width: auto; }
  .login-card { width: min(380px, calc(100vw - 28px)); padding: 30px 24px; }
}