:root {
    --bg: #f7f4ed;
    --ink: #1d2023;
    --muted: #5f666f;
    --accent: #a94f32;
    --accent-2: #2f765f;
    --card: #fffdf8;
    --border: #e7decc;
}

html[data-theme="dark"] {
    --bg: #16181d;
    --ink: #e8eaed;
    --muted: #9aa0a6;
    --accent: #b85d3b;
    --accent-2: #4a9b7b;
    --card: #1f2227;
    --border: #3c3f44;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 244, 207, 0.05) 0, transparent 35%),
        radial-gradient(circle at 100% 20%, rgba(211, 240, 231, 0.05) 0, transparent 40%),
        var(--bg);
}

html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
    background: var(--card);
    color: var(--ink);
    border-color: var(--border);
}

html[data-theme="dark"] .list-toggle,
html[data-theme="dark"] .filter-badge,
html[data-theme="dark"] .tab-btn,
html[data-theme="dark"] .expand-btn,
html[data-theme="dark"] .issue,
html[data-theme="dark"] .data-table-wrap,
html[data-theme="dark"] .har-table-wrap,
html[data-theme="dark"] .detail-body,
html[data-theme="dark"] .meta-editor,
html[data-theme="dark"] .annotator,
html[data-theme="dark"] .event {
    background: var(--card);
    color: var(--ink);
    border-color: var(--border);
}

html[data-theme="dark"] .access-dialog {
    background: var(--card);
    color: var(--ink);
    border-color: var(--border);
}

html[data-theme="dark"] .save-failure-dialog {
    border-color: #7a3438;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .tab-btn:hover,
html[data-theme="dark"] .list-toggle:hover {
    background: #2a2d33;
}

html[data-theme="dark"] .filter-badge.active {
    background: #294239;
    color: #c1ddd0;
    border-color: #4d7765;
}

html[data-theme="dark"] .tab-btn.active {
    background: #1b3a5c;
    border-color: #2c507a;
    color: #8ab4f8;
}

html[data-theme="dark"] .data-table {
    color: var(--ink);
}

html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .har-table th,
html[data-theme="dark"] .har-table td {
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] .har-table thead th {
    background: #26292f;
    color: #9aa0a6;
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .data-table tr.seek-row:hover td {
    background: #2a2d33;
}

html[data-theme="dark"] .data-table tr.seek-row.active td {
    background: #164a78;
    color: #ffffff;
    box-shadow: inset 0 2px #72c6ff, inset 0 -2px #72c6ff;
}

html[data-theme="dark"] .data-table tr.row-error td,
html[data-theme="dark"] .har-table tbody tr.row-error td {
    background: #3a2224;
    color: #f28b82;
}

html[data-theme="dark"] .data-table tr.row-error.row-alt td,
html[data-theme="dark"] .har-table tbody tr.row-error.row-alt td {
    background: #452628;
    color: #f28b82;
}

html[data-theme="dark"] .data-table tr.row-error.active td {
    background: #6b3033;
    color: #ffffff;
    box-shadow: inset 0 2px #72c6ff, inset 0 -2px #72c6ff;
}

html[data-theme="dark"] .data-table tr.row-warn td {
    background: #4a3f1a;
    color: #fde293;
}

html[data-theme="dark"] .data-table tr.row-warn.row-alt td {
    background: #56491f;
    color: #fde293;
}

html[data-theme="dark"] .data-table tr.row-warn.active td {
    background: #765b14;
    color: #ffffff;
    box-shadow: inset 0 2px #72c6ff, inset 0 -2px #72c6ff;
}

html[data-theme="dark"] .data-table tbody tr.row-alt td {
    background: #2c2f36;
}

html[data-theme="dark"] .har-table td.idx {
    color: #80868b;
}

html[data-theme="dark"] .detail-row td {
    background: #24262b;
}

html[data-theme="dark"] .hdr-name {
    color: #8ab4f8;
}

html[data-theme="dark"] .tag {
    background: #1b3a5c;
    color: #8ab4f8;
}

html[data-theme="dark"] .issue-copy-link-btn {
    background: #2a2d33;
    color: #c5cbc8;
    border-color: #4a4f52;
}

html[data-theme="dark"] .issue strong,
html[data-theme="dark"] .issue p {
    color: #91bea5;
}

html[data-theme="dark"] .api-key-reveal,
html[data-theme="dark"] .pending-tag {
    background: #4a3f1a;
    color: #fde293;
}

html[data-theme="dark"] .privacy-private {
    background: #4a3d2b;
    color: #e7c98c;
}

html[data-theme="dark"] .privacy-shared {
    background: #294239;
    color: #a9d0bd;
}

html[data-theme="dark"] .password-eye-btn {
    background: var(--card);
    color: var(--ink);
    border-color: var(--border);
}

html[data-theme="dark"] .split-handle::after {
    background: #3c3f44;
}

html[data-theme="dark"] .split-handle:hover::after,
html[data-theme="dark"] .split-handle.dragging::after {
    background: #8ab4f8;
}

html[data-theme="dark"] .waterfall-bar {
    background: #8ab4f8;
}

html[data-theme="dark"] .status-ok {
    color: #6fdc9d;
}

html[data-theme="dark"] .status-warn,
html[data-theme="dark"] .waterfall-bar.status-warn {
    color: #f5b45a;
    background: #f5b45a;
}

html[data-theme="dark"] .status-bad,
html[data-theme="dark"] .waterfall-bar.status-bad {
    color: #f28b82;
    background: #f28b82;
}

html[data-theme="dark"] .user-table th,
html[data-theme="dark"] .user-table td {
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .theme-toggle {
    background: var(--card);
    color: var(--ink);
    border-color: var(--border);
}

html[data-theme="dark"] .har-url {
    color: var(--ink);
}

html[data-theme="dark"] .annotation-grid img {
    border-color: var(--border);
}

html[data-theme="dark"] .timeline {
    border-left-color: var(--border);
}

html[data-theme="dark"] ::selection {
    background: #2c507a;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: "Avenir Next", "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 0% 0%, #fff4cf 0, transparent 35%),
        radial-gradient(circle at 100% 20%, #d3f0e7 0, transparent 40%),
        var(--bg);
}

header {
    flex: none;
    padding: 28px 24px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
}

h1 {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: 0.02em;
}

.sub {
    margin-top: 6px;
    color: var(--muted);
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.dev-user-switch {
    min-width: 180px;
}

select,
input,
button {
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--card);
    color: var(--ink);
}

button {
    background: #e8f0fe;
    color: #174ea6;
    border: 1px solid #c2d7ff;
    font-weight: 700;
    cursor: pointer;
}

button:disabled {
    background: #f1f3f4;
    color: #9aa0a6;
    border-color: #e0e0e0;
    cursor: not-allowed;
    opacity: 0.7;
}

html[data-theme="dark"] button {
    background: #1b3a5c;
    color: #8ab4f8;
    border-color: #2c507a;
}

a.button-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    background: #e8f0fe;
    color: #174ea6;
    border: 1px solid #c2d7ff;
    font-weight: 700;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 12px;
}

button.button-link {
    background: #e8f0fe;
    color: #174ea6;
    border: 1px solid #c2d7ff;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}

.extension-update {
    background: #0d7a64;
}

.btn-delete {
    background: #e8f0fe;
    color: #174ea6;
    border: 1px solid #c2d7ff;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-delete:hover {
    background: #d7e5ff;
}

html[data-theme="dark"] a.button-link,
html[data-theme="dark"] button.button-link,
html[data-theme="dark"] .btn-delete {
    background: #1b3a5c;
    color: #8ab4f8;
    border-color: #2c507a;
}

html[data-theme="dark"] .btn-delete:hover {
    background: #254b73;
}

.btn-cancel {
    background: #0d7a64;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.btn-cancel:hover {
    background: #0a6553;
}

.access-dialog {
    width: min(400px, calc(100vw - 32px));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    color: var(--ink);
    background: var(--card);
}

.access-dialog::backdrop {
    background: rgba(29, 32, 35, 0.5);
}

.access-dialog form {
    display: grid;
    gap: 10px;
}

.access-dialog h2 {
    margin: 0 0 6px;
}

.save-failure-dialog {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: min(420px, calc(100vw - 32px));
    border-color: #d17272;
    box-shadow: 0 20px 60px rgba(29, 32, 35, 0.22);
}

.save-failure-dialog h2 {
    color: #a43232;
}

.save-failure-dialog p {
    margin: 0;
    line-height: 1.4;
}

.access-dialog label {
    font-size: 13px;
    font-weight: 700;
}

.access-dialog input,
.access-dialog select {
    width: 100%;
    box-sizing: border-box;
}

.access-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.admin-alert-panel {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--card);
}

.admin-alert-panel h3 {
    margin: 0;
}

.admin-alert-panel textarea {
    width: 100%;
    box-sizing: border-box;
}

.admin-danger-panel {
    border-color: #c0392b;
}

.admin-danger-panel input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.danger-button {
    background: #c0392b;
    color: #fff;
    border-color: #c0392b;
}

.danger-button:disabled {
    background: var(--card);
    color: var(--text-muted, #888);
    border-color: var(--border);
    cursor: not-allowed;
}

.admin-side-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 420px);
    gap: 16px;
    margin: 0;
    align-items: start;
}

.admin-migration-box {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 16px;
    border: 1px solid var(--border);
    background: var(--card);
}

.admin-migration-box h2 {
    margin: 0;
}

.logout-alert-dialog {
    max-width: 520px;
}

main {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 16px;
    padding: 12px 24px 24px;
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

main.list-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

main.list-collapsed .list-col {
    position: absolute;
    top: 12px;
    left: 24px;
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 48px);
    height: auto;
    min-height: 0;
    pointer-events: none;
}

main.list-collapsed .list,
main.list-collapsed #listFilterPanel,
main.list-collapsed #toggleFiltersBtn,
main.list-collapsed #filtersAppliedNotice {
    display: none;
}

main.list-collapsed .list-toolbar {
    width: auto;
    padding: 0;
    align-content: flex-start;
    pointer-events: auto;
}

main.list-collapsed .details {
    grid-column: 1;
    padding-top: 58px;
}

main.full-list {
    grid-template-columns: minmax(0, 1fr);
}

main.full-list .details {
    display: none;
}

main.full-list .list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    gap: 12px;
    padding: 12px;
}

main.full-list .issue {
    margin: 0;
}

.list-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.admin-migration {
    margin: 16px 24px;
    padding: 0;
}

.admin-migration textarea,
.admin-migration input[type="file"] {
    width: min(520px, 100%);
}

.list-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.list-filter-panel {
    display: contents;
}

.list-toggle {
    align-self: flex-start;
    background: #fff;
    color: #5f6368;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.list-toggle:hover {
    background: #f1f3f4;
}

.filter-search input {
    width: min(240px, 40vw);
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 16px;
}

.stat-tile {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    padding: 12px;
}

.stat-tile strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
}

.stat-tile span {
    color: var(--muted);
    font-size: 12px;
}

.stats-chart-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    padding: 14px;
    margin-bottom: 16px;
}

.jira-pie-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.jira-pie {
    width: 220px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 34px var(--card);
}

.jira-pie-legend {
    display: grid;
    gap: 8px;
}

.jira-pie-legend-row {
    display: grid;
    grid-template-columns: 14px minmax(80px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.jira-pie-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.stats-table-wrap {
    height: auto;
    max-height: calc(100vh - 290px);
}

.stats-table th,
.stats-table td {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jira-pie-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.list-filter-badges {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-filter-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.badge-filter-picker input {
    width: 150px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
}

.badge-filter-help {
    white-space: nowrap;
}

.admin-selection-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.selection-toggle,
.issue-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.issue-select-checkbox,
#selectVisibleIssues {
    width: auto;
    margin: 0;
}

.filter-badge {
    background: #fff;
    color: #5f6368;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
}

.filter-badge.active {
    background: #dcebe3;
    color: #24594d;
    border-color: #9fc4b2;
}

.filter-badge.or-filter {
    background: #d98a4d;
    color: #713816;
    border-color: #b9682d;
}

.filter-badge.or-filter.active {
    background: #dcebe3;
    color: #24594d;
    border-color: #9fc4b2;
}

html[data-theme="dark"] .filter-badge.or-filter {
    background: #f1c18b;
    color: #5c2f0e;
    border-color: #d99a57;
}

html[data-theme="dark"] .filter-badge.or-filter.active {
    background: #294239;
    color: #c1ddd0;
    border-color: #4d7765;
}

.filter-badge:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.online-tag {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid #9fc4b2;
    border-radius: 999px;
    background: #dcebe3;
    color: #24594d;
    font-size: 11px;
    font-weight: 700;
}

html[data-theme="dark"] .online-tag {
    background: #294239;
    color: #c1ddd0;
    border-color: #4d7765;
}

.issue-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.issue-resolution-btn {
    background: #2f765f;
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.issue-reopen-btn {
    background: #d7ecff;
    color: #185a85;
    border: 1px solid #a8d2f0;
}

html[data-theme="dark"] .issue-reopen-btn {
    background: #1b3a5c;
    color: #8ab4f8;
    border-color: #2c507a;
}

.issue-copy-link-btn {
    background: #f2efe8;
    color: #5f6368;
    border: 1px solid #d6cfc2;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}

.issue-copy-link-btn:disabled {
    color: #9aa0a6;
    background: #f1f3f4;
    cursor: not-allowed;
    opacity: 0.7;
}

html[data-theme="dark"] .issue-copy-link-btn:disabled {
    color: #777f82;
    background: #292c31;
    border-color: #3d4247;
}

.theme-toggle {
    background: #fff;
    color: #5f6368;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.panel {
    background: color-mix(in srgb, var(--card) 90%, white 10%);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(31, 30, 24, 0.08);
}

.list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

.issue {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 8px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
}

.issue.current {
    box-shadow: 0 0 0 2px #4f8dcc;
}

html[data-theme="dark"] .issue.current {
    box-shadow: 0 0 0 2px #b6bbc3;
}

.issue-preview {
    display: block;
    width: 100%;
    max-width: 160px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #101414;
}

.issue-media-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 10px;
}

.issue-media-row.no-preview {
    grid-template-columns: minmax(0, 1fr);
}

.issue-meta {
    min-width: 0;
    display: grid;
    gap: 5px;
    align-content: start;
}

.issue-description {
    margin: 10px 0 6px;
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.issue-teams {
    margin-bottom: 8px;
}

.issue-tags {
    min-height: 0;
}

.issue-actions {
    margin-top: 12px;
}

.issue:hover {
    transform: translateY(-1px);
}

.row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
}

.tag {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f3ff;
    color: #184f8d;
    font-size: 12px;
}

.details {
    padding: 16px;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.timeline {
    margin-top: 16px;
    border-left: 3px solid #eadfcd;
    padding-left: 12px;
}

.event {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.event.seekable {
    cursor: pointer;
}

.event.seekable:hover {
    border-color: var(--accent-2);
}

.event.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(217, 72, 59, 0.18);
}

.meta {
    color: var(--muted);
    font-size: 13px;
}

.ai-generated-note {
    color: var(--accent-2);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

.ai-diagnosis-result {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}

.ai-diagnosis-hypothesis {
    margin-bottom: 6px;
}

.ai-diagnosis-evidence {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
}

.jira-option-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.jira-option-control select {
    flex: 1;
    min-width: 0;
}

.jira-option-refresh,
#jiraProjectRefreshBtn,
#jiraProjectFavoriteBtn {
    flex: 0 0 auto;
    width: 32px;
    min-height: 32px;
    padding: 4px;
    border-radius: 6px;
}

#jiraProjectFavoriteBtn.active {
    color: #f9ab00;
    border-color: #f9ab00;
}

.jira-project-favorites {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.jira-project-favorite {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    border: 1px solid #c6dafc;
    background: #e8f0fe;
    color: #1a73e8;
    overflow: hidden;
}

.jira-project-favorite-chip,
.jira-project-favorite-remove {
    min-height: 26px;
    padding: 3px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.jira-project-favorite-remove {
    width: 26px;
    padding: 3px;
    border-left: 1px solid currentColor;
    font-size: 16px;
}

.jira-project-favorite.active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}

html[data-theme="dark"] .jira-project-favorite {
    background: #1b3a5c;
    border-color: #2c507a;
    color: #8ab4f8;
}

html[data-theme="dark"] .jira-project-favorite.active {
    background: #8ab4f8;
    border-color: #8ab4f8;
    color: #12213b;
}

.meta-editor label.jira-credential-waiver {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--ink);
    font-size: 13px;
}

.meta-editor label.jira-credential-waiver input {
    width: auto;
    margin: 0;
}

.jira-credential-warning {
    align-self: center;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

html[data-theme="dark"] .jira-credential-warning {
    color: #ff8f87;
}

.plugin-download-link {
    color: var(--accent-2);
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.plugin-download-link:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

html[data-theme="dark"] .plugin-download-link {
    color: #6fdc9d;
}

.recording-player {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 44vh;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #000;
}

.video-stage {
    position: relative;
}

.annotation-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    pointer-events: none;
}

.annotation-overlay.hidden {
    display: none;
}

.annotation-overlay img {
    max-width: 92%;
    max-height: 88%;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}

.annotation-overlay-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

.annotation-markers {
    position: relative;
    height: 14px;
    margin-top: 6px;
}

.annotation-markers.hidden {
    display: none;
}

.annotation-marker {
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #ff734e;
    cursor: pointer;
    padding: 0;
}

.annotation-marker:hover {
    background: #d9483b;
}

html[data-theme="dark"] button.annotation-marker,
button.annotation-marker {
    background: #ff734e;
    color: transparent;
}

html[data-theme="dark"] button.annotation-marker:hover,
button.annotation-marker:hover {
    background: #d9483b;
}

.screenshot-capture-frame {
    display: grid;
    gap: 10px;
}

.screenshot-capture-frame a {
    display: block;
}

.screenshot-player {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 44vh;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #000;
}

.sync-layout {
    display: grid;
    grid-template-columns: var(--split-left, 50%) 10px minmax(0, 1fr);
    gap: 0;
    margin-top: 12px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.split-handle {
    align-self: stretch;
    width: 10px;
    cursor: col-resize;
    background: transparent;
    position: relative;
}

.split-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: #e5e7eb;
    border-radius: 2px;
}

.split-handle:hover::after,
.split-handle.dragging::after {
    background: #1a73e8;
}

.sync-video-col,
.sync-tabs-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sync-video-col {
    overflow-y: auto;
}

.sync-tabs-col {
    padding-left: 10px;
    overflow: hidden;
}

.tab-panel {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.tab-panel.hidden {
    display: none;
}

.sync-timeline-col .timeline {
    margin-top: 8px;
    max-height: 420px;
    overflow: auto;
}

.tab-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.tab-btn {
    background: #fff;
    color: #5f6368;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.tab-btn:hover {
    background: #f1f3f4;
}

.tab-btn.active {
    background: #e8f0fe;
    border-color: #c6dafc;
    color: #1a73e8;
}

.info-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.info-tab-btn {
    background: #fff;
    color: #5f6368;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
}

.info-tab-btn.active {
    background: #e8f0fe;
    border-color: #c6dafc;
    color: #1a73e8;
}

.info-tab-panel {
    margin-top: 8px;
}

.jira-create-panel {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
}

.jira-create-panel>.row {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px !important;
    margin-top: 14px;
}

.jira-create-panel>.row .meta {
    flex: 1 1 220px;
    min-width: 0;
}

.jira-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent-2);
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
}

.jira-follow-btn:hover {
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.data-table-wrap {
    height: 100%;
    min-height: 200px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    color: #202124;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid #f1f3f4;
    white-space: nowrap;
    vertical-align: top;
}

.data-table td.wrap-cell {
    white-space: normal;
    word-break: break-word;
}

.bam-comments {
    margin-top: 18px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.bam-comments h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.comment-form textarea {
    display: block;
    width: 100%;
    resize: vertical;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
}

.comment-form {
    position: relative;
}

.mention-menu {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    max-height: 180px;
    overflow: auto;
    border: 1px solid var(--border);
    background: var(--card);
}

.mention-menu button {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 7px 8px;
    background: transparent;
    color: var(--ink);
    text-align: left;
}

.mention-menu button:hover,
.mention-menu button.active {
    background: #f1f3f4;
}

.mention-menu span {
    color: var(--muted);
}

.comment-form button,
.comment-reply-btn {
    margin-top: 6px;
    font-size: 12px;
    padding: 5px 8px;
}

.bam-comment-list {
    margin-top: 12px;
}

.bam-comment {
    border-top: 1px solid var(--border);
    padding: 10px 0;
}

.bam-comment-reply {
    margin-left: 18px;
    padding-left: 12px;
    border-left: 2px solid var(--border);
}

.bam-comment-meta {
    color: var(--muted);
    font-size: 12px;
}

.bam-comment-message {
    margin-top: 5px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.actions-table {
    table-layout: fixed;
}

.actions-table th:nth-child(1) {
    width: 36px;
}

.actions-table th:nth-child(2) {
    width: 80px;
}

.actions-table th:nth-child(4) {
    width: 32%;
}

.actions-table th:nth-child(5) {
    width: 92px;
}

.actions-table td.action-locator {
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table thead th {
    position: sticky;
    top: 0;
    background: #f5f6f7;
    color: #5f6368;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    z-index: 1;
}

.data-table tr.seek-row {
    cursor: pointer;
}

.data-table tr.seek-row:hover td {
    background: #f1f3f4;
}

.data-table tr.seek-row.active td {
    background: #d7ecff;
    color: #073b68;
    box-shadow: inset 0 2px #1976d2, inset 0 -2px #1976d2;
}

.data-table tr.row-error td {
    background: #fff0ef;
    color: #c5221f;
}

.data-table tr.row-error.row-alt td {
    background: #ffe1de;
    color: #c5221f;
}

.data-table tr.row-error.active td {
    background: #ffd9d4;
    color: #7f1d1d;
    box-shadow: inset 0 2px #1976d2, inset 0 -2px #1976d2;
}

.data-table tr.row-warn td {
    background: #fff6e0;
    color: #8e6711;
}

.data-table tr.row-warn.row-alt td {
    background: #ffefc7;
    color: #8e6711;
}

.data-table tr.row-warn.active td {
    background: #ffe3a3;
    color: #6b4300;
    box-shadow: inset 0 2px #1976d2, inset 0 -2px #1976d2;
}

.level-cell {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.02em;
}

.expand-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 1;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
}

.request-type-icon {
    display: inline-grid;
    width: 24px;
    height: 20px;
    margin-left: 5px;
    place-items: center;
    border-radius: 4px;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.request-type-document {
    background: #536dfe;
}

.request-type-script {
    background: #f59e0b;
}

.request-type-stylesheet {
    background: #0d9488;
}

.request-type-image {
    background: #db2777;
}

.request-type-font {
    background: #7c3aed;
}

.request-type-xhr {
    background: #0284c7;
}

.request-type-beacon {
    background: #65a30d;
}

.request-type-media {
    background: #ea580c;
}

.request-type-websocket {
    background: #16a34a;
}

.request-type-other {
    background: #6b7280;
}

.payload-icon {
    display: inline-block;
    margin-left: 4px;
    color: #d97706;
    font-size: 11px;
    vertical-align: middle;
}

.detail-row td {
    white-space: normal;
    background: #f8f9fa;
    font-size: 11px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 6px;
}

.request-url-block {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.request-url-block code {
    display: block;
    overflow-wrap: anywhere;
    color: var(--ink);
    font: inherit;
    font-size: 11px;
}

.hdr-name {
    color: #184f8d;
}

.app-data-heading {
    margin: 10px 0 4px;
    font-size: 13px;
}

.info-scroll {
    height: 100%;
    min-height: 200px;
    overflow: auto;
    padding-right: 4px;
}

.detail-body {
    max-height: 220px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    margin: 4px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.detail-actions button {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 8px;
}

.har-table {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.network-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    margin: 8px 0 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
}

.network-filters label {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.network-filters select,
.network-filters input,
.network-filter-clear {
    min-height: 32px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.network-filters select {
    min-width: 92px;
}

.network-threshold {
    display: flex;
    align-items: center;
    gap: 5px;
}

.network-threshold input {
    width: 82px;
}

.network-filter-count {
    margin-left: auto;
    padding-bottom: 7px;
    white-space: nowrap;
}

[data-filter-hidden] {
    display: none;
}

.data-table tbody tr.row-alt td {
    background: #eef1f4;
}

.har-table tbody tr.row-error td {
    background: #fff0ef;
}

.har-table tbody tr.row-error.row-alt td {
    background: #ffe1de;
}

.har-table td.idx {
    color: #80868b;
    width: 34px;
}

.har-table td.har-url {
    max-width: 220px;
}

.waterfall-cell {
    width: 220px;
    min-width: 180px;
}

.waterfall-bar {
    display: block;
    height: 8px;
    border-radius: 2px;
    background: #1a73e8;
}

.waterfall-bar.status-warn {
    background: #e37400;
}

.waterfall-bar.status-bad {
    background: #c5221f;
}

.har-table-wrap {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

.har-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.har-table th,
.har-table td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid #f0e9dc;
    white-space: nowrap;
}

.har-table thead th {
    position: sticky;
    top: 0;
    background: #fbf7ef;
    z-index: 1;
}

.har-table td.num {
    text-align: right;
}

.har-table td.har-url {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-ok {
    color: #188038;
}

.status-warn {
    color: #e37400;
}

.status-bad {
    color: #c5221f;
    font-weight: 700;
}

@media (max-width: 1200px) {
    main.full-list .list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sync-layout {
        grid-template-columns: 1fr;
    }

    .split-handle {
        display: none;
    }

    .sync-tabs-col {
        padding-left: 0;
    }
}

.meta-editor {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.meta-editor label {
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
}

.meta-editor input,
.meta-editor select,
.meta-editor textarea {
    font: inherit;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--card);
}

.annotator {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.annotator-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.annotator-toolbar button {
    padding: 6px 10px;
    font-size: 13px;
}

.annotator-toolbar button.active {
    outline: 2px solid var(--accent-2);
}

.annotator canvas {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #000;
    touch-action: none;
    cursor: crosshair;
}

.annotation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin-top: 6px;
}

.annotation-grid img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.annotation-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.annotation-jump {
    font-size: 12px;
    padding: 3px 8px;
}

.url-list {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13px;
    word-break: break-all;
}

html[data-theme="dark"] a {
    color: #e8eaed;
}

html[data-theme="dark"] a:visited {
    color: #bdc1c6;
}

.admin-panel {
    margin: 0 24px 24px;
    padding: 16px;
}

.admin-main {
    display: flex;
    height: calc(100vh - 200px);
    gap: 0;
}

.admin-col {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 24px 24px;
    min-width: 300px;
}

.admin-left {
    border-right: 1px solid var(--border);
}

.admin-splitter {
    width: 4px;
    background: var(--border);
    cursor: col-resize;
    user-select: none;
    flex-shrink: 0;
}

.admin-splitter:hover {
    background: var(--accent);
}

.admin-create {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.user-team-picker {
    min-width: 220px;
    margin: 0;
    padding: 7px 10px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.user-team-picker legend {
    padding: 0 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.user-team-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-key-display {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-2) 10%, var(--card));
    color: var(--ink);
    overflow-wrap: anywhere;
}

.admin-bams {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.admin-bams h2 {
    margin: 0 0 12px;
}

.admin-bam-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.admin-tag-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.85rem;
}

.admin-tag-filter input {
    width: 150px;
}

.admin-bam-table td:first-child,
.admin-bam-table th:first-child {
    width: 32px;
}

.admin-team-table {
    background: var(--card);
}

.team-detail-row>td {
    background: rgba(0, 0, 0, 0.02);
}

.team-detail-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.75fr) minmax(260px, 1.25fr);
    gap: 16px;
    padding: 10px 0;
}

.team-expand-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    line-height: 1;
}

.user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.user-table th,
.user-table td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}

.user-table select,
.user-table button {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
}

.user-table .api-key-inline {
    max-width: 280px;
    overflow-wrap: anywhere;
    text-align: left;
    font-family: ui-monospace, monospace;
    font-size: 11px;
}

.api-key-reveal {
    font-family: ui-monospace, monospace;
    background: #fff4cf;
    padding: 2px 6px;
    border-radius: 6px;
    word-break: break-all;
}

.copy-key-btn {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
}

.login-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pending-tag {
    background: #fff4cf;
    color: #8e6711;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
}

.privacy-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

.bam-key-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    background: #e8f0fe;
    color: #174ea6;
    font-family: monospace;
}

.bam-key-tag-lg {
    font-size: 15px;
    padding: 3px 12px;
    margin-right: 8px;
}

.bam-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

html[data-theme="dark"] .bam-key-tag {
    background: #1b3a5c;
    color: #8ab4f8;
}

.mention-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
    background: #dcebe3;
    color: #0b7f5f;
}

html[data-theme="dark"] .mention-badge {
    background: #16382c;
    color: #6fdc9d;
}

.privacy-private {
    background: #f3e4c7;
    color: #8a5a22;
}

.privacy-shared {
    background: #dcebe3;
    color: #2f765f;
}

.resolution-open {
    background: #e3eee8;
    color: #2f765f;
}

.resolution-closed {
    background: #e5e7e7;
    color: #59636b;
}

.password-field {
    display: flex;
    gap: 6px;
    align-items: center;
}

.password-field input {
    flex: 1;
}

.password-eye-btn {
    width: 40px;
    height: 38px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    background: #fff;
    color: #5f6368;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
}

.password-eye-btn:hover {
    background: #f1f3f4;
}

.chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

.chip-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.chip-option input {
    width: auto;
    padding: 0;
    margin: 0;
}

.badge-group {
    padding: 8px 0;
}

.badge-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-bottom: 4px;
}

.badge-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.badge-chip {
    background: #e8f0fe;
    border-color: #c6dafc;
    color: #1a73e8;
}

.badge-add {
    display: inline-flex;
    gap: 4px;
}

.badge-add input {
    width: 140px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
}

.new-badge-btn {
    width: 26px;
    padding: 0;
    border-radius: 999px;
    font-weight: 700;
}

.team-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background: var(--card);
}

html[data-theme="dark"] .chip-option {
    background: var(--card);
    border-color: var(--border);
    color: var(--ink);
}

html[data-theme="dark"] .badge-chip {
    background: #1b3a5c;
    border-color: #2c507a;
    color: #8ab4f8;
}

.hidden {
    display: none;
}

.audit-detail {
    display: inline-block;
    margin-right: 10px;
    color: var(--muted);
}

@media (max-width: 980px) {
    main {
        grid-template-columns: 1fr;
        height: auto;
        overflow: visible;
    }

    html,
    body {
        overflow: auto;
    }

    .list,
    .details {
        max-height: none;
        min-height: 0;
        height: auto;
    }

    main.full-list .list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 560px) {
    .issue-media-row {
        grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
    }
}

/* User instructions */
html.instructions-root {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.instructions-page {
    height: auto;
    min-height: 100%;
    overflow: visible;
    background: var(--bg);
}

.guide-header {
    position: relative;
    align-items: center;
    padding: 24px max(24px, calc((100vw - 1280px) / 2)) 18px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
}

.guide-header h1 {
    font-size: 2rem;
    letter-spacing: 0;
}

.guide-eyebrow,
.guide-kicker {
    margin: 0 0 5px;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.guide-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 920px);
    justify-content: center;
    align-items: start;
    gap: 48px;
    height: auto;
    overflow: visible;
    padding: 38px 24px 64px;
}

.guide-nav {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}

.guide-nav a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.guide-nav a:hover,
.guide-nav a.active {
    color: var(--ink);
    background: color-mix(in srgb, var(--accent-2) 12%, transparent);
}

.guide-nav a.active {
    box-shadow: inset 3px 0 var(--accent-2);
}

.guide-content {
    min-width: 0;
}

.guide-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 42px;
    align-items: center;
    padding: 20px 0 38px;
}

.guide-intro h2 {
    max-width: 680px;
    margin: 0 0 14px;
    font-size: 2.35rem;
    line-height: 1.08;
    letter-spacing: 0;
}

.guide-intro p:not(.guide-kicker) {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.capture-illustration {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: var(--card);
    box-shadow: 8px 8px 0 color-mix(in srgb, var(--accent-2) 16%, transparent);
    transform: rotate(1deg);
}

.capture-title,
.capture-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.capture-title {
    margin-bottom: 12px;
    font-size: 0.78rem;
}

.capture-title strong {
    margin-right: auto;
}

.capture-version {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.7rem;
}

.capture-settings {
    color: var(--muted);
    font-size: 0.95rem;
}

.capture-action {
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.capture-action.primary {
    border-color: var(--accent-2);
    background: var(--accent-2);
    color: white;
}

.capture-toggle {
    padding: 10px 3px 3px;
    color: var(--muted);
    font-size: 0.7rem;
}

.toggle-track {
    width: 30px;
    height: 17px;
    padding: 2px;
    border-radius: 9px;
    background: var(--accent-2);
}

.toggle-track span {
    display: block;
    width: 13px;
    height: 13px;
    margin-left: auto;
    border-radius: 50%;
    background: white;
}

.guide-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    list-style: none;
}

.guide-flow li {
    min-width: 0;
    padding: 18px 12px;
    border-right: 1px solid var(--border);
}

.guide-flow li:first-child {
    padding-left: 0;
}

.guide-flow li:last-child {
    border-right: 0;
}

.guide-flow li>span {
    display: block;
    margin-bottom: 16px;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
}

.guide-flow strong,
.guide-flow small {
    display: block;
}

.guide-flow strong {
    margin-bottom: 5px;
    font-size: 0.88rem;
}

.guide-flow small {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.guide-section {
    scroll-margin-top: 24px;
    padding: 64px 0 8px;
    border-bottom: 1px solid var(--border);
}

.guide-section-heading {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.guide-section-heading>span {
    padding-top: 4px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
}

.guide-section h2,
.guide-section h3,
.guide-section p {
    letter-spacing: 0;
}

.guide-section h2 {
    margin: 0 0 6px;
    font-size: 1.65rem;
}

.guide-section h3 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.guide-section-heading p,
.guide-section p {
    color: var(--muted);
    line-height: 1.6;
}

.guide-section-heading p {
    margin: 0;
}

.role-grid,
.evidence-grid,
.metadata-map {
    display: grid;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--border);
}

.role-grid {
    grid-template-columns: repeat(3, 1fr);
}

.evidence-grid {
    grid-template-columns: repeat(5, 1fr);
}

.metadata-map {
    grid-template-columns: repeat(2, 1fr);
}

.role-grid>div,
.evidence-grid>div,
.metadata-map>div {
    min-width: 0;
    padding: 18px;
    background: var(--card);
}

.role-grid p,
.evidence-grid p,
.metadata-map p {
    margin: 7px 0 0;
    font-size: 0.87rem;
}

.metadata-map span {
    color: var(--accent-2);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.guide-note {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 18px;
    margin: 22px 0 0;
    padding: 15px 18px;
    border-left: 4px solid var(--accent-2);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--accent-2) 9%, var(--card));
    line-height: 1.55;
}

.guide-note span {
    color: var(--muted);
}

.guide-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
}

.guide-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.55;
}

.guide-list strong {
    color: var(--ink);
}

.good-list li::marker {
    color: var(--accent-2);
}

.step-list {
    border-top: 1px solid var(--border);
}

.step-list>div {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.step-list span {
    color: var(--accent);
    font-weight: 800;
}

.step-list p {
    margin: 0;
}

.step-list strong {
    color: var(--ink);
}

.guide-fineprint {
    margin: 18px 0 0;
    font-size: 0.84rem;
}

.visibility-rule {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.visibility-rule>div:not(.visibility-arrow) {
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
}

.visibility-rule p {
    margin: 12px 0 0;
    font-size: 0.88rem;
}

.visibility-arrow {
    color: var(--accent);
    font-size: 1.4rem;
    text-align: center;
}

.visibility-state {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
}

.visibility-state.private {
    background: #f2e5c9;
    color: #704d16;
}

.visibility-state.shared {
    background: #d7ece2;
    color: #185944;
}

html[data-theme="dark"] .visibility-state.private {
    background: #4a3d2b;
    color: #e7c98c;
}

html[data-theme="dark"] .visibility-state.shared {
    background: #294239;
    color: #c1ddd0;
}

.filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.filter-strip span {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.guide-checklist ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-checklist li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    color: var(--muted);
    line-height: 1.5;
}

.guide-checklist li span {
    color: var(--accent-2);
    font-weight: 900;
}

.guide-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 48px 0 8px;
    color: var(--muted);
    font-size: 0.88rem;
}

.guide-footer strong {
    color: var(--ink);
}

@media (max-width: 980px) {
    .guide-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .guide-nav {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        overflow-x: auto;
        padding: 8px 0;
        border-left: 0;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        scrollbar-width: thin;
    }

    .guide-nav a {
        flex: 0 0 auto;
    }

    .guide-nav a.active {
        box-shadow: inset 0 -3px var(--accent-2);
    }

    .guide-flow {
        grid-template-columns: repeat(3, 1fr);
    }

    .guide-flow li:nth-child(3) {
        border-right: 0;
    }

    .guide-flow li:nth-child(-n + 3) {
        border-bottom: 1px solid var(--border);
    }

    .evidence-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 680px) {
    .guide-header {
        align-items: flex-start;
    }

    .guide-header h1 {
        font-size: 1.55rem;
    }

    .guide-layout {
        padding: 18px 16px 40px;
    }

    .guide-intro,
    .guide-columns,
    .role-grid,
    .metadata-map,
    .visibility-rule,
    .guide-checklist ul {
        grid-template-columns: 1fr;
    }

    .guide-intro {
        gap: 24px;
    }

    .guide-intro h2 {
        font-size: 1.8rem;
    }

    .capture-illustration {
        transform: none;
    }

    .visibility-arrow {
        transform: rotate(90deg);
    }

    .evidence-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .guide-note,
    .guide-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 440px) {

    .guide-flow,
    .evidence-grid {
        grid-template-columns: 1fr;
    }

    .guide-flow li,
    .guide-flow li:first-child {
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .guide-flow li:last-child {
        border-bottom: 0;
    }
}