:root {
    --bg-base: #0A0E1A;
    --panel-grad: linear-gradient(to bottom, rgba(13, 58, 59, 0.7), rgba(8, 38, 40, 0.7));
    --panel-solid: linear-gradient(to bottom, #0a3230, #071e1d);
    --panel-quiet: rgba(8, 38, 40, 0.4);
    --accent: #009879;
    --accent-light: #4beacc;
    --accent-muted: rgba(56, 165, 157, 0.25);
    --accent-strong: rgba(56, 165, 157, 0.5);
    --accent-glow: rgba(75, 234, 204, 0.15);
    --text: #ffffff;
    --text-secondary: #a0b8b5;
    --text-muted: #6b8584;
    --danger: #f87171;
    --font-main: 'Rajdhani', sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background-color: var(--bg-base);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
  }
  body::before {
    content: '';
    position: fixed; inset: 0;
    background: url('/assets/eden/images/eden_bg-er.jpg') center/cover no-repeat;
    opacity: 0.12;
    z-index: -2;
  }
  body::after {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(56, 165, 157, 0.18) 0%, transparent 55%),
      radial-gradient(ellipse at 70% 80%, rgba(75, 234, 204, 0.10) 0%, transparent 55%);
    z-index: -1;
  }
  a { color: var(--accent-light); text-decoration: none; transition: color .15s ease; }
  a:hover { color: #ffffff; }

  /* Site-wide top strip - mirrors the navigation on the rest of
     eden-daoc.net so the tracker doesn't feel like a separate site. */
  header.sitebar {
    background: rgba(8, 38, 40, 0.55);
    border-bottom: 1px solid var(--accent-muted);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    backdrop-filter: blur(6px);
  }
  header.sitebar .home {
    color: var(--accent-light);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 14px;
  }
  header.sitebar nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
  header.sitebar nav a {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 600;
  }
  header.sitebar nav a:hover { color: var(--accent-light); }
  header.sitebar .me {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }

  /* Bug-tracker sub-bar */
  header.topbar {
    background: linear-gradient(to bottom, rgba(8, 38, 40, 0.85), rgba(8, 38, 40, 0.6));
    border-bottom: 1px solid var(--accent-muted);
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(6px);
  }
  header.topbar .brand {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  header.topbar .brand a { color: var(--accent-light); }
  header.topbar nav { display: flex; gap: 24px; align-items: center; }
  header.topbar nav a {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 600;
  }
  header.topbar nav a:hover, header.topbar nav a.active { color: var(--accent-light); }
  header.topbar .breadcrumb {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Main content */
  main { max-width: 980px; margin: 28px auto; padding: 0 24px 60px; }
  /* Doc pages (e.g. /ticket/help) breathe wider - the table-heavy
     reference reads much better with more horizontal room than a
     bug detail page needs. */
  main:has(.doc-page) { max-width: 1320px; }

  /* Page panel - glassy wrapper used by list and create pages so
     bare title + filters + empty states aren't floating on the bg.
     Detail uses its own .detail panel (intentionally a different
     shape) so we don't stack them. */
  .page-panel {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 10px;
    padding: 24px 28px;
    backdrop-filter: blur(2px);
  }
  .page-panel .empty {
    padding: 60px 16px;
  }

  h1.page-title {
    font-family: var(--font-main);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-light);
    margin: 0 0 8px;
    font-size: 24px;
  }

  /* Filters */
  .filters {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
  }
  /* Primary status row gets a touch more breathing room above the
     secondary controls row. */
  .filters-primary { margin-bottom: 14px; }
  .filters .label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    margin-right: 8px;
  }
  .filters a {
    padding: 5px 12px;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: lowercase;
    transition: all .15s ease;
  }
  .filters a:hover { border-color: var(--accent-strong); color: var(--accent-light); }
  .filters a.active {
    color: var(--accent-light);
    border-color: var(--accent-light);
    background: var(--accent-glow);
  }

  /* Secondary controls row: dropdowns + chips on a single line, with
     a thin top divider so it reads as "more options" under the
     primary status pills. */
  .filters-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 10px 0 14px;
    border-top: 1px solid var(--accent-muted);
    margin-bottom: 4px;
  }
  .select-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .select-control label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 600;
  }
  /* Custom dropdown - we can't reliably theme native <option> popups
     across browsers, so we roll our own button + listbox. JS in the
     layout wires open/close, click-outside, keyboard nav. */
  .custom-select { position: relative; display: inline-block; }
  .select-trigger {
    background: var(--panel-quiet);
    color: var(--text);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 6px 32px 6px 12px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    min-width: 130px;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .select-trigger::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--accent-light);
    border-bottom: 1.5px solid var(--accent-light);
    transform: translateY(-65%) rotate(45deg);
    transition: transform .15s ease;
  }
  .select-trigger[aria-expanded="true"]::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  .select-trigger:hover { border-color: var(--accent-light); }
  .select-trigger:focus,
  .select-trigger[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .select-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--panel-solid);
    border: 1px solid var(--accent-light);
    border-radius: 5px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    z-index: 50;
    min-width: 100%;
  }
  .select-menu[hidden] { display: none; }
  .select-menu [role="option"] {
    padding: 7px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap;
    transition: background .1s ease, color .1s ease;
  }
  .select-menu [role="option"]:hover,
  .select-menu [role="option"].active {
    background: var(--accent-glow);
    color: var(--accent-light);
  }
  .select-menu [role="option"].selected {
    color: var(--accent-light);
    font-weight: 600;
  }
  .select-menu [role="option"].selected::before {
    content: '✓ ';
    color: var(--accent-light);
    margin-right: 4px;
  }
  /* Standalone chip (e.g. staff Private-only toggle) - same shape as
     the pill row, but lives next to the dropdowns so it reads as a
     peer control instead of yet another row. */
  .filter-chip {
    padding: 6px 12px;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .15s ease;
  }
  .filter-chip:hover { border-color: var(--accent-strong); color: var(--accent-light); }
  .filter-chip.active {
    color: var(--accent-light);
    border-color: var(--accent-light);
    background: var(--accent-glow);
  }

  /* Toolbar */
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .toolbar .result-count {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  /* Search control - sits inline in the .filters-controls row next
     to Category / Sort / Private only. flex: 1 lets it absorb the
     leftover width on the right of the dropdowns, then wrap below
     them on narrow viewports (parent has flex-wrap: wrap). */
  .search-control {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .search-input {
    flex: 1;
    min-width: 0;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    color: var(--text);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .search-input::placeholder { color: var(--text-muted); }
  .search-input:hover { border-color: var(--accent-strong); }
  .search-input:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 2px var(--accent-glow);
  }
  /* Hide the WebKit/Blink ✕ in <input type="search"> - we render our
     own Clear button. */
  .search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .btn.search-clear { padding: 5px 12px; font-size: 12px; }

  /* Transcript-list cards. Self-contained layout (.tcard*), no
     reuse of the bug-list .card / .body-cell / .card-meta-row
     classes - sharing them caused inheritance fights every time
     the two layouts diverged.
     Columns left-to-right: msgs · head (title + meta stack, sized
     to content) · summary (flex: 1, vertically centred) · date. */
  .tcard {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 10px;
    /* Grid (not flex) so the head column has a fixed width and
       every summary starts at the same X position across all
       cards. Columns: msgs · head · summary · date. */
    display: grid;
    grid-template-columns: 56px 380px 1fr auto;
    gap: 18px;
    align-items: stretch;
    transition: border-color .15s ease, box-shadow .15s ease;
    color: inherit;
    text-decoration: none;
  }
  .tcard:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 0 16px rgba(75, 234, 204, 0.06);
    text-decoration: none;
  }
  /* Active (in-progress) tickets pinned above the closed list. Same
     warm tint as .card.private on the bug tracker so staff get a
     consistent "needs attention / not the default state" cue. */
  .tcard.active {
    background: linear-gradient(180deg, rgba(248, 196, 121, 0.07), rgba(248, 196, 121, 0.02));
    border-color: rgba(248, 196, 121, 0.3);
  }
  .tcard.active:hover {
    border-color: rgba(248, 196, 121, 0.6);
    box-shadow: 0 0 16px rgba(248, 196, 121, 0.08);
  }
  .tcard-section-header {
    margin: 4px 0 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .tcard-section-count {
    background: rgba(248, 196, 121, 0.16);
    border: 1px solid rgba(248, 196, 121, 0.45);
    color: #f8c479;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
  }
  .tcard-msgs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tcard-msgs .score {
    color: var(--accent-light);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
  }
  .tcard-msgs .label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
  }
  .tcard-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
  }
  .tcard-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
  }
  .tcard-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
  }
  .tcard-reporter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .tcard-summary {
    min-width: 0;
    align-self: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tcard-date {
    align-self: center;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  /* Closed-ticket transcripts (staff). Each parsed message renders
     as a card with a header line (author + timestamp) and a body
     block that reuses the markdown renderer. Bot messages get a
     subtle accent so relayed-vs-typed messages are scannable. */
  /* List of message cards inside the outer .page-panel - same
     panel-in-panel pattern as snippets / prompts / bug comments.
     --panel-quiet (more transparent) over the outer --panel-grad
     gives the visible nesting. */
  .transcript-body { display: flex; flex-direction: column; gap: 10px; }
  .transcript-message {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-left: 3px solid var(--accent-strong);
    border-radius: 6px;
    padding: 12px 16px;
  }
  .transcript-message.bot { border-left-color: var(--accent-light); }
  .transcript-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 12px;
  }
  .transcript-author {
    color: var(--accent-light);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Inline avatar before the chip text. Smaller than the bug-card
     avatars (24 → 20) so it sits flush with the 14px chip text. */
  .transcript-author-avatar {
    width: 20px;
    height: 20px;
  }

  /* AI close-summary panel rendered above the transcript stream.
     Mint accent matches the AI feature color cue; body text bumped
     to full --text contrast since the muted gray was unreadable
     against the dark teal background. */
  .transcript-ai-summary {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(75, 234, 204, 0.45);
    border-left: 3px solid var(--accent-light);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 14px;
  }
  .transcript-ai-summary h3 {
    margin: 0 0 10px;
    color: var(--accent-light);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  .transcript-ai-summary-body {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
  }
  .transcript-ai-summary-body p {
    margin: 0 0 6px;
  }
  .transcript-ai-summary-body p:last-child {
    margin-bottom: 0;
  }
  .transcript-author .bot-tag {
    background: var(--accent-glow);
    color: var(--accent-light);
    border: 1px solid var(--accent-strong);
    border-radius: 3px;
    padding: 0 5px;
    font-size: 10px;
    margin-left: 6px;
    letter-spacing: 1px;
  }
  .transcript-time {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Pin to the right edge whether the author chip is present or
       not (bot-authored rows omit the chip; flex space-between would
       otherwise drift the time to the left when it's the only
       child). */
    margin-left: auto;
  }
  .transcript-message-body { color: var(--text); font-size: 14px; }
  .transcript-message-body p { margin: 4px 0; line-height: 1.5; }
  .transcript-message-body blockquote {
    margin: 4px 0;
    padding: 4px 12px;
    border-left: 2px solid var(--accent-muted);
    color: var(--text-secondary);
    background: rgba(255,255,255,0.02);
    border-radius: 0 4px 4px 0;
  }
  .transcript-message-body code {
    background: rgba(0,0,0,0.3);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.92em;
  }
  .transcript-message-body pre {
    background: rgba(0,0,0,0.4);
    padding: 8px 12px;
    border-radius: 4px;
    overflow-x: auto;
  }
  .transcript-message-body pre code { background: transparent; padding: 0; }
  .transcript-message-body h3 {
    font-size: 14px;
    margin: 8px 0 4px;
    color: var(--accent-light);
  }
  .transcript-fallback { white-space: pre-wrap; font-family: var(--font-mono, monospace); }

  /* Per-message attachment tiles. Sits inside .transcript-message-body
     after the rendered text. Reuses the existing .attachment-tile-wrap
     / .attachment-tile styles from the bug-tracker - just a tighter
     inline grid since transcript messages are usually short. */
  .transcript-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  .transcript-attachments .attachment-tile-wrap {
    width: 220px;
  }

  /* Pagination */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 22px 0 4px;
  }
  .pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    text-decoration: none;
    transition: all .12s ease;
  }
  .pagination a:hover {
    color: var(--accent-light);
    border-color: var(--accent-light);
    background: var(--accent-glow);
  }
  .pagination .active {
    color: var(--accent-light);
    border-color: var(--accent-light);
    background: var(--accent-glow);
    cursor: default;
  }
  .pagination .ellipsis {
    border: none;
    background: transparent;
    color: var(--text-muted);
    min-width: 0;
    padding: 6px 4px;
  }

  /* Buttons */
  .btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 6px;
    background: var(--panel-solid);
    color: var(--accent-light);
    border: 1px solid var(--accent-strong);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
  }
  .btn:hover {
    border-color: var(--accent-light);
    color: var(--text);
    box-shadow: 0 0 12px var(--accent-glow);
    text-decoration: none;
  }
  .btn.primary {
    background: linear-gradient(to bottom, #0e6e62, #075049);
    color: var(--text);
    border-color: var(--accent-light);
  }
  .btn.primary:hover { background: linear-gradient(to bottom, #138a78, #0a685e); }
  .btn.danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.5); }
  .btn:disabled,
  .btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Avatars */
  .avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--accent-muted);
    vertical-align: middle;
    object-fit: cover;
    background: var(--panel-solid);
    flex-shrink: 0;
  }
  .avatar.lg { width: 38px; height: 38px; }
  .avatar.placeholder {
    display: inline-block;
    background: var(--panel-solid);
  }

  /* Cards (list view) */
  .card {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 10px;
    display: flex;
    gap: 18px;
    align-items: stretch;
    transition: border-color .15s ease, box-shadow .15s ease;
    color: inherit;
  }
  .card:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 0 16px rgba(75, 234, 204, 0.06);
    text-decoration: none;
  }
  /* Private bugs (visible to staff + reporter): faint warm tint so
     they're distinguishable in a mixed list. */
  .card.private {
    background: linear-gradient(180deg, rgba(248, 196, 121, 0.07), rgba(248, 196, 121, 0.02));
    border-color: rgba(248, 196, 121, 0.3);
  }
  .card.private:hover { border-color: rgba(248, 196, 121, 0.6); }
  .pill-private {
    background: rgba(248, 196, 121, 0.16);
    border: 1px solid rgba(248, 196, 121, 0.55);
    color: #f8c479;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 8px;
    border-radius: 3px;
    font-weight: 600;
  }
  /* Checkbox label used in forms (e.g. is_private toggle). The
     native checkbox is replaced with a themed square so it matches
     the rest of the Eden controls (mint border, glow on focus,
     filled mint with a white tick when checked). */
  label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
  }
  label.checkbox input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--bg-base);
    border: 1.5px solid var(--accent-strong);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    flex-shrink: 0;
  }
  label.checkbox input[type=checkbox]:hover,
  label.checkbox input[type=checkbox]:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  label.checkbox input[type=checkbox]:checked {
    background: var(--accent-light);
    border-color: var(--accent-light);
  }
  label.checkbox input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--bg-base);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .field-help {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    max-width: 65ch;
  }

  /* Help panel under the new-report form: a structured "how to file
     a great bug" guide. Two-column grid on desktop, single column
     under ~700px so it stays readable on narrow viewports. */
  .help-panel { margin-top: 18px; }
  .help-panel h2 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-light);
    margin: 0 0 18px;
    font-weight: 600;
  }
  .help-panel h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--accent-light);
    margin: 0 0 10px;
    font-weight: 600;
  }
  /* CSS columns flow content top-to-bottom and rebalance across the
     two columns automatically - no fixed rows, no whitespace under
     short sections sitting next to tall ones. break-inside keeps
     each section atomic. */
  .help-grid {
    column-count: 2;
    column-gap: 36px;
  }
  .help-grid section {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;
    margin-bottom: 26px;
  }
  .help-grid section:last-child { margin-bottom: 0; }
  .help-grid p { margin: 0 0 8px; }
  .help-grid ul {
    margin: 0;
    padding-left: 18px;
  }
  .help-grid ul li { margin-bottom: 4px; }
  .help-grid dl { margin: 0; }
  .help-grid dt {
    display: inline-block;
    font-family: ui-monospace, monospace;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    color: var(--accent-light);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 3px;
    margin: 6px 0 3px;
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }
  .help-grid dd {
    margin: 0 0 4px 0;
    color: var(--text-secondary);
  }
  /* Inline dl variant - chip on the left, description on the right
     of the same line. Saves ~2 lines per entry vs the stacked form,
     so the Statuses + Categories sections aren't tower-tall and the
     two-column flow can balance. */
  .help-grid .dl-inline > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
  }
  .help-grid .dl-inline dt { margin: 0; }
  .help-grid .dl-inline dd {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
  }
  .help-grid code {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    color: var(--accent-light);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
  }
  @media (max-width: 700px) {
    .help-grid { grid-template-columns: 1fr; }
  }
  .card .vote-cell {
    flex: 0 0 auto;
    min-width: 56px;
    text-align: center;
    border-right: 1px solid var(--accent-muted);
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .card .vote-cell .score {
    font-weight: 700;
    font-size: 22px;
    color: var(--accent-light);
    line-height: 1;
  }
  .card .vote-cell .label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
  }
  .card .body-cell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  .card .card-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .card h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .card .card-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
    transition: color .15s ease;
  }
  .card:hover .card-comments { color: var(--accent-light); }
  .card-comments svg {
    transform: translateY(-1px);
  }
  .card .card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .card .card-meta-left {
    color: var(--text-secondary);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    min-width: 0;
  }
  .card .card-reporter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .card .card-meta-right {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .card .card-note {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 500;
    background: var(--accent-glow);
    border: 1px solid var(--accent-muted);
    padding: 2px 10px;
    border-radius: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card .card-closed-by {
    color: var(--text-muted);
    font-size: 12px;
  }
  .card .card-closed-by strong {
    color: var(--accent-light);
    font-weight: 600;
  }
  .category {
    background: var(--panel-solid);
    border: 1px solid var(--accent-muted);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: color-mix(in srgb, var(--status-color) 18%, transparent);
    color: var(--status-color);
    border: 1px solid var(--status-color);
  }

  /* Detail view */
  .detail {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 10px;
    padding: 28px 32px;
  }
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 12px;
  }
  .detail h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
  }
  .detail .meta {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
  }
  .detail .body { line-height: 1.7; color: var(--text); }
  .detail .body h3 {
    margin: 22px 0 8px;
    font-size: 14px;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .detail .body p { margin: 0 0 14px; }
  .detail .body strong { color: var(--accent-light); font-weight: 600; }

  /* Doc viewer - used by /ticket/help to render the staff guide. The
     .body class still drives most styling but we add tables, h1/h2,
     ordered lists, anchor offsets, and a sidebar TOC. */
  .doc-page {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
  .doc-toc {
    position: sticky;
    top: 24px;
    align-self: start;
    border-right: 1px solid var(--accent-muted);
    padding-right: 18px;
    font-size: 13px;
  }
  .doc-toc strong {
    display: block;
    color: var(--accent-light);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
  }
  .doc-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .doc-toc li { margin: 4px 0; }
  .doc-toc a {
    color: var(--text-secondary);
    transition: color .12s ease;
  }
  .doc-toc a:hover { color: var(--accent-light); }
  .doc-toc-cross {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--accent-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .doc-toc-cross a { color: var(--accent-light); font-weight: 600; }

  /* Bottom-of-detail action row: Edit on the left, staff Delete on
     the right (when shown). */
  .bug-bottom-actions {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .bug-delete-form { margin: 0; padding: 0; background: none; border: none; }

  /* Snippets management page (/ticket/snippets) - staff edit + create
     + delete via per-card forms. Same panel/colour palette as the
     rest of the bug tracker. */
  .snippet-help {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 18px;
    line-height: 1.55;
  }
  details.snippet-new {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 22px;
  }
  details.snippet-new summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-light);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    list-style: none;
  }
  details.snippet-new summary::-webkit-details-marker { display: none; }
  details.snippet-new[open] summary { margin-bottom: 12px; }
  details.snippet-new summary::before {
    content: '▸ ';
    display: inline-block;
    margin-right: 4px;
    transition: transform .15s ease;
  }
  details.snippet-new[open] summary::before { transform: rotate(90deg); }
  .snippet-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .snippet-card {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-margin-top: 16px;
  }
  .snippet-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .snippet-name {
    background: var(--bg-base);
    border: 1px solid var(--accent-muted);
    color: var(--accent-light);
    font-family: ui-monospace, monospace;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 3px;
    letter-spacing: 0.3px;
  }
  .snippet-meta {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .snippet-card textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    background: var(--bg-base);
    color: var(--text);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.5;
  }
  .snippet-card textarea:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .snippet-card-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
  }
  .snippet-form { margin: 0; padding: 0; background: none; border: none; }
  .snippet-form .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }
  .snippet-form .field label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
  }
  .snippet-form input[type=text] {
    background: var(--bg-base);
    color: var(--text);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
  }
  .snippet-form input[type=text]:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  /* AI prompts page (/ticket/prompts) - one card per feature, each
     with status pill, blurb, override textarea, and a collapsible
     read-only built-in default at the bottom. */
  .prompt-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .prompt-card {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    padding: 16px 18px;
    scroll-margin-top: 16px;
  }
  .prompt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  .prompt-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
  }
  .prompt-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--accent-muted);
  }
  .prompt-status.default {
    color: var(--text-muted);
  }
  .prompt-status.overridden {
    color: var(--accent-light);
    border-color: var(--accent);
    background: var(--accent-muted);
  }
  .prompt-blurb {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
  }
  .prompt-form {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
  }
  .prompt-form textarea {
    width: 100%;
    background: var(--bg-base);
    color: var(--text);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    resize: vertical;
    min-height: 160px;
  }
  .prompt-form textarea:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .prompt-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  details.prompt-default {
    margin-top: 14px;
    border-top: 1px dashed var(--accent-muted);
    padding-top: 12px;
  }
  details.prompt-default summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    list-style: none;
    user-select: none;
  }
  details.prompt-default summary::-webkit-details-marker { display: none; }
  details.prompt-default summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--accent-light);
    transition: transform .15s ease;
  }
  details.prompt-default[open] summary::before { transform: rotate(90deg); }
  details.prompt-default summary:hover { color: var(--accent-light); }
  details.prompt-default pre {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--bg-base);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }

  details.prompt-history {
    margin-top: 14px;
    border-top: 1px dashed var(--accent-muted);
    padding-top: 12px;
  }
  details.prompt-history summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    list-style: none;
    user-select: none;
  }
  details.prompt-history summary::-webkit-details-marker { display: none; }
  details.prompt-history summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--accent-light);
    transition: transform .15s ease;
  }
  details.prompt-history[open] summary::before { transform: rotate(90deg); }
  details.prompt-history summary:hover { color: var(--accent-light); }
  ul.prompt-history-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .prompt-history-item {
    background: var(--bg-base);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .prompt-history-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-secondary);
  }
  .prompt-history-when {
    color: var(--text-muted);
    min-width: 70px;
  }
  .prompt-history-who {
    color: var(--accent-light);
    font-weight: 600;
  }
  .prompt-history-action {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px 6px;
    border-radius: 3px;
  }
  .prompt-history-save {
    color: var(--accent-light);
    background: var(--accent-muted);
  }
  .prompt-history-reset {
    color: var(--danger);
    background: rgba(248, 113, 113, 0.15);
  }
  .prompt-history-ip {
    margin-left: auto;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
    font-size: 11px;
  }
  details.prompt-history-prev {
    margin-top: 6px;
  }
  details.prompt-history-prev summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  details.prompt-history-prev pre {
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 3px;
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
  }

  .doc-body { line-height: 1.7; color: var(--text); }
  .doc-body h1 {
    margin: 0 0 18px;
    font-family: var(--font-main);
    font-size: 26px;
    color: var(--accent-light);
    letter-spacing: 1px;
  }
  .doc-body h2 {
    margin: 32px 0 12px;
    font-family: var(--font-main);
    font-size: 18px;
    color: var(--accent-light);
    letter-spacing: 0.8px;
    border-bottom: 1px solid var(--accent-muted);
    padding-bottom: 6px;
    scroll-margin-top: 16px;
  }
  .doc-body h3 {
    margin: 22px 0 8px;
    font-size: 13px;
    color: var(--accent-light);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
  }
  .doc-body p { margin: 0 0 12px; }
  .doc-body ul, .doc-body ol {
    margin: 0 0 14px 22px;
    padding: 0;
  }
  .doc-body li { margin: 4px 0; }
  .doc-body strong { color: var(--accent-light); font-weight: 600; }
  .doc-body code {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    color: var(--accent-light);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 3px;
  }
  .doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: 13px;
  }
  .doc-body th, .doc-body td {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--accent-muted);
    vertical-align: top;
  }
  .doc-body th {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 1px solid var(--accent-light);
    background: rgba(255, 255, 255, 0.02);
  }
  .doc-body tr:hover td { background: rgba(75, 234, 204, 0.03); }
  .doc-body td code {
    white-space: nowrap;
  }
  @media (max-width: 800px) {
    .doc-page {
      grid-template-columns: 1fr;
    }
    .doc-toc {
      position: static;
      border-right: none;
      border-bottom: 1px solid var(--accent-muted);
      padding-right: 0;
      padding-bottom: 12px;
      margin-bottom: 8px;
    }
  }

  /* Vote buttons */
  .vote-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--panel-solid);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    padding: 4px;
  }
  .vote-buttons button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: all .15s ease;
  }
  .vote-buttons button:hover { color: var(--accent-light); background: var(--accent-glow); }
  .vote-buttons button.active.up { color: #34d399; }
  .vote-buttons button.active.down { color: var(--danger); }
  .vote-buttons .score {
    padding: 0 8px;
    font-weight: 600;
    color: var(--accent-light);
    min-width: 24px;
    text-align: center;
  }

  /* Attachments */
  .attachments { margin: 22px 0 0; }
  .attachments h3 {
    font-size: 12px;
    margin: 0 0 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
  }
  .attachment-tile {
    display: block;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    transition: border-color .15s ease;
    position: relative;
  }
  .attachment-tile:hover { border-color: var(--accent-light); }
  /* Shimmer placeholder while the thumbnail is still loading. The
     ::before sits on top of the panel-quiet background and animates
     a soft mint sweep; the img covers it once decoded. We swap the
     'loaded' class from JS (onload/onerror on the img) so the
     animation stops eating CPU on already-decoded tiles. */
  .attachment-tile::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--accent-glow) 50%,
      transparent 100%);
    background-size: 200% 100%;
    animation: tile-shimmer 1.4s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  .attachment-tile.loaded::before { display: none; }
  @keyframes tile-shimmer {
    0%   { background-position: 150% 0; }
    100% { background-position: -150% 0; }
  }
  .attachment-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: relative; /* stack above the ::before */
    z-index: 1;
    opacity: 0;
    transition: opacity .25s ease;
  }
  .attachment-tile.loaded img { opacity: 1; }
  .attachment-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
  .attachment-delete {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.6); color: var(--danger); border: none;
    width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 14px;
  }
  .attachment-tile-wrap { position: relative; }
  /* Lightbox overlay - appended to <body> on first image click. */
  .lightbox {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
  }
  .lightbox.open { opacity: 1; pointer-events: auto; }
  .lightbox img.lightbox-img {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    cursor: zoom-out;
  }
  .lightbox button {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text);
    border: 1px solid var(--accent-muted);
    border-radius: 50%;
    width: 44px; height: 44px;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }
  .lightbox button:hover {
    background: var(--accent-glow);
    border-color: var(--accent-light);
    color: var(--accent-light);
  }
  .lightbox .lightbox-close { top: 16px; right: 16px; }
  .lightbox .lightbox-nav.prev { left: 16px; top: 50%; transform: translateY(-50%); }
  .lightbox .lightbox-nav.next { right: 16px; top: 50%; transform: translateY(-50%); }
  .lightbox-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 1.5px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 10px;
    border-radius: 3px;
  }
  body.lightbox-open { overflow: hidden; }

  /* Comment-form actions row: Post on the left, Draft button (when
     present) pushed to the right edge. */
  .comment-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .comment-form-actions [data-draft-open] {
    margin-left: auto;
  }

  /* Draft-with-AI modal. Styled like the lightbox - full-screen
     backdrop, centered box - so it shares the body.lightbox-open
     scroll-lock behavior. */
  .draft-modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.78);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .draft-modal-box {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: linear-gradient(to bottom, #0f3a3b, #0a2627);
    border: 1px solid var(--accent-muted);
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  }
  .draft-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .draft-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-light);
  }
  .draft-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
  }
  .draft-modal-close:hover { color: var(--accent-light); }
  .draft-modal-help {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 0 0 14px;
    line-height: 1.5;
  }
  .draft-modal-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .draft-modal-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-top: 8px;
  }
  .draft-modal-grid textarea,
  .draft-modal-flag textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-base);
    color: var(--text);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    resize: vertical;
  }
  .draft-modal-grid textarea:focus,
  .draft-modal-flag textarea:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .draft-modal-flag .draft-modal-label {
    display: block;
    margin-bottom: 6px;
  }
  .draft-modal-error {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: var(--danger);
    font-size: 12px;
  }
  .draft-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
  }

  /* Top-of-viewport navigation progress bar. Shown on click of any
     internal page link so the user gets immediate feedback while the
     server renders the next page. The browser navigation away will
     unmount the DOM, so we never need to hide it manually - the
     fresh page loads with the bar back at scaleX(0). */
  #nav-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent-light));
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
  }
  #nav-progress.active {
    opacity: 1;
    animation: nav-progress 9s cubic-bezier(.05, .7, .1, 1) forwards;
  }
  @keyframes nav-progress {
    0%   { transform: scaleX(0); }
    20%  { transform: scaleX(0.4); }
    50%  { transform: scaleX(0.7); }
    100% { transform: scaleX(0.94); }
  }

  /* In-place loading state for the bug list - swapped in via JS on
     click of a filter / pagination link so the user sees motion in
     the body of the page, not just the top progress bar. */
  .list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }
  .list-loading .spinner {
    width: 22px; height: 22px;
    border: 2px solid var(--accent-muted);
    border-top-color: var(--accent-light);
    border-radius: 50%;
    animation: list-loading-spin .7s linear infinite;
  }
  @keyframes list-loading-spin { to { transform: rotate(360deg); } }
  /* Non-image attachments (text/plain) - show as a labeled download
     pill instead of a thumbnail tile. */
  .attachment-text {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color .15s ease;
  }
  .attachment-text:hover { border-color: var(--accent-light); color: var(--accent-light); text-decoration: none; }
  .attachment-text .icon { font-size: 18px; flex-shrink: 0; color: var(--accent-light); }
  .attachment-text .name { flex: 1; min-width: 0; word-break: break-word; }
  .attachment-text .size { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

  /* Comments */
  .comments { margin-top: 36px; }
  .comments h2 {
    font-size: 13px;
    margin: 0 0 14px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .comment {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .comment.staff-note {
    border-color: var(--accent-light);
    background: var(--accent-glow);
  }
  .comment .comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--accent-muted);
  }
  .comment.staff-note .comment-header { border-bottom-color: var(--accent-light); }
  .comment .author { font-weight: 600; color: var(--accent-light); }
  .comment .when { color: var(--text-muted); font-size: 12px; margin-left: auto; }
  .comment .body { padding: 14px 18px; line-height: 1.6; color: var(--text); }
  /* Per-comment Edit / Delete pills. The phpBB Renegade theme styles
   * raw <button> elements with a dark background that makes them look
   * disabled, so re-establish the .btn look at higher specificity for
   * these two buttons - smaller (10px / 4-10px padding) than the main
   * Post comment / Update buttons. */
  .comment .comment-controls {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .comment .comment-controls .comment-edit-btn,
  .comment .comment-controls .comment-delete-btn {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--panel-solid);
    color: var(--accent-light);
    border: 1px solid var(--accent-strong);
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all .15s ease;
  }
  .comment .comment-controls .comment-edit-btn:hover,
  .comment .comment-controls .comment-delete-btn:hover {
    border-color: var(--accent-light);
    color: var(--text);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .comment .comment-controls .comment-delete-btn {
    color: var(--danger);
    border-color: rgba(248, 113, 113, 0.45);
  }
  .comment .comment-controls .comment-delete-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.25);
  }
  .staff-tag {
    color: var(--accent-light);
    font-size: 10px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--accent-light);
    padding: 1px 6px;
    border-radius: 3px;
  }

  /* Forms */
  form.bug-form, form.comment-form, form.staff-controls {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 8px;
    padding: 22px;
    margin-top: 16px;
  }
  form .field { margin-bottom: 14px; }
  form label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  form input[type=text], form select, form textarea {
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--accent-muted);
    color: var(--text);
    border-radius: 4px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 15px;
    transition: border-color .15s ease;
  }
  form input[type=text]:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  form textarea { min-height: 160px; resize: vertical; }

  /* BBCode toolbar above textareas. Same idiom as phpBB's editor -
     click a button to wrap the current selection, or insert empty
     tags at the cursor when nothing is selected. */
  .bbcode-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .bbcode-toolbar button {
    background: var(--panel-solid);
    border: 1px solid var(--accent-muted);
    color: var(--text-secondary);
    padding: 5px 10px;
    border-radius: 3px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all .15s ease;
  }
  .bbcode-toolbar button:hover {
    border-color: var(--accent-light);
    color: var(--accent-light);
    background: var(--bg-base);
  }
  .bbcode-toolbar .help {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: lowercase;
    letter-spacing: 0.3px;
    align-self: center;
  }

  /* File input: styled to match the Eden theme via the
     ::file-selector-button pseudo (well-supported in evergreen
     browsers). Native picker + native multi-file support kept. */
  form input[type=file] {
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--accent-muted);
    color: var(--text-secondary);
    border-radius: 4px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
  }
  form input[type=file]:focus {
    outline: none;
    border-color: var(--accent-light);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
  form input[type=file]::file-selector-button {
    background: var(--panel-solid);
    color: var(--accent-light);
    border: 1px solid var(--accent-strong);
    border-radius: 4px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin-right: 12px;
    transition: all .15s ease;
  }
  form input[type=file]::file-selector-button:hover {
    border-color: var(--accent-light);
    color: var(--text);
    box-shadow: 0 0 8px var(--accent-glow);
  }

  /* Empty state */
  .empty {
    color: var(--text-muted);
    text-align: center;
    padding: 60px 16px;
    font-size: 15px;
  }
  .error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid var(--danger);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--danger);
  }

  /* AI draft "Flag as bad" rows (rendered under each tunable
     prompt card on /tickets?prompts). */
  .flag-card {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: border-color .15s ease, opacity .15s ease;
  }
  .flag-card.addressed {
    opacity: 0.6;
    border-color: rgba(75, 234, 204, 0.5);
  }
  .flag-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  .flag-addressed {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .flag-addressed input[type="checkbox"] { cursor: pointer; }
  .flag-when {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  .flag-card-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
  }
  .flag-reason {
    margin: 6px 0 8px;
    color: var(--text);
    line-height: 1.45;
  }
  .flag-reason-edit {
    width: 100%;
    min-height: 60px;
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 8px 10px;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 14px;
    resize: vertical;
  }
  .flag-card details { margin: 6px 0; }
  .flag-card details > summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 0;
  }
  .flag-card details[open] > summary { color: var(--accent-light); }
  .flag-card .flag-count {
    background: var(--accent-glow);
    border: 1px solid var(--accent-strong);
    color: var(--accent-light);
    padding: 0 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 6px;
    font-weight: 600;
  }
  .flag-card pre {
    background: var(--panel-quiet);
    border: 1px solid var(--accent-muted);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 4px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
  }

  /* Reporter info snapshot panel (staff-only foldable, /tickets?id=<n>). */
  .reporter-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  /* Sits in the middle of .bug-bottom-actions when the panel is
     expanded; populated dynamically by renderReporterInfoPanel.
     Hidden (display:none via :empty) when the panel is folded. */
  .reporter-info-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .reporter-info-status:empty { display: none; }
  .reporter-info-captured { white-space: nowrap; }
  .reporter-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 12px;
  }
  .reporter-card {
    background: var(--panel-grad);
    border: 1px solid var(--accent-muted);
    border-radius: 8px;
    padding: 14px 18px;
  }
  .reporter-card.empty {
    color: var(--text-muted);
    font-style: italic;
  }
  /* Mint border for the Account card, Discord-blurple for the
     Discord card - matches the Discord embeds' visual cue. */
  .reporter-card-account {
    border-left: 3px solid #4beacc;
  }
  .reporter-card-discord {
    border-left: 3px solid #5865f2;
  }
  .reporter-card h3 {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-light);
  }
  .reporter-card-body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .reporter-card-body strong { color: var(--text); }
  .reporter-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(56, 165, 157, 0.15);
  }
  .reporter-section > strong {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }
  .reporter-empty { color: var(--text-muted); font-style: italic; }
  .reporter-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
  }
  .reporter-role {
    display: inline-block;
    color: var(--role-color, #94a3b8);
    background: color-mix(in srgb, var(--role-color, #94a3b8) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--role-color, #94a3b8) 40%, transparent);
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
  }

  /* Flagged-output list nested under each tunable prompt card. The
     summary stays inline with the prompt-form footer; the body is
     a column of flag-cards reusing the styles from the (now-removed)
     standalone flags page. */
  .prompt-flags {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--border, rgba(255, 255, 255, 0.08));
  }
  .prompt-flags > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-muted);
  }
  .prompt-flags-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tuner-prompt-block {
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-darker, rgba(0, 0, 0, 0.25));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    padding: 10px 12px;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
  }