/* ==========================================================================
   app.css — login + authenticated app shell (Phase 1)
   ========================================================================== */

/* ─── Auth shell (login page) ──────────────────────────────────── */
.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 20% 0%,  rgba(29,158,117,0.08), transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(75,123,245,0.06), transparent 50%),
        var(--bg-black);
    padding: var(--space-32) var(--space-16);
}
.auth-shell { width: 100%; max-width: 420px; }
.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-32);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.auth-brand { margin-bottom: var(--space-24); }
.auth-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--space-4);
}
.auth-sub {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: var(--space-24);
}
.auth-notice {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-blue);
    color: var(--text-gray);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-16);
    font-size: 13px;
    border-radius: 0 4px 4px 0;
}
.auth-error {
    background: rgba(255,102,102,0.08);
    border-left: 3px solid var(--color-error);
    color: var(--color-error);
    padding: var(--space-12) var(--space-16);
    margin-bottom: var(--space-16);
    font-size: 13px;
    border-radius: 0 4px 4px 0;
}
.auth-foot { margin-top: var(--space-24); text-align: center; font-size: 12px; }
.auth-foot a { color: var(--accent-teal); }

/* ─── Form field ───────────────────────────────────────────────── */
.field { display: block; margin-bottom: var(--space-16); }
.field-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--space-8);
    font-weight: 500;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"] {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-white);
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 4px;
    transition: border-color var(--transition-fast);
}
.field input:focus {
    border-color: var(--accent-teal);
    outline: none;
    box-shadow: 0 0 0 3px rgba(29,158,117,0.15);
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
    display: inline-block;
    width: 100%;
    background: var(--accent-teal);
    color: var(--bg-black);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 4px;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover { background: #25b486; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.btn-primary:disabled:hover { background: var(--accent-teal); }

/* ─── App shell (authenticated pages) ─────────────────────────── */
.app-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.app-top {
    position: sticky; top: 0;
    z-index: var(--z-sticky);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-12) var(--space-32);
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.app-top .top-nav { flex: 1; justify-content: center; }
.app-main {
    flex: 1;
    padding: var(--space-32) var(--space-32);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

/* ─── User menu in top-right ───────────────────────────────────── */
.user-menu {
    display: flex; align-items: center; gap: var(--space-12);
    font-size: 13px;
}
.user-name { color: var(--text-gray); font-weight: 500; }
.user-logout {
    color: var(--text-soft);
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.user-logout:hover { color: var(--text-white); border-color: var(--accent-teal); }

/* ─── Role pill ────────────────────────────────────────────────── */
.role-pill {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-soft);
}
.role-pill--admin       { color: var(--accent-amber); border-color: rgba(212,160,36,0.4); }
.role-pill--dp_research { color: var(--accent-teal);  border-color: rgba(29,158,117,0.4); }
.role-pill--client      { color: var(--accent-blue);  border-color: rgba(75,123,245,0.4); }

/* ─── Dashboard ────────────────────────────────────────────────── */
.dashboard-head { margin-bottom: var(--space-40); }
.dashboard-head h1 { font-size: 32px; margin-bottom: var(--space-12); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-20);
}
.card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-20);
    color: var(--text-gray);
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-base);
    cursor: pointer;
}
.card:hover {
    border-color: var(--accent-teal);
    background: var(--bg-hover);
    color: var(--text-gray);
    transform: translateY(-2px);
}
.card--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--bg-dark);
}
.card--disabled:hover {
    border-color: var(--border);
    background: var(--bg-dark);
    transform: none;
}
.card-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}
.card-head h3 {
    font-family: var(--font-heading);
    font-size: 17px;
    color: var(--text-white);
}
.card-phase {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.card-phase--live { color: var(--accent-teal); }
.card-desc {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.5;
    margin-bottom: var(--space-16);
}
.card-cta {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-teal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.card--disabled .card-cta { color: var(--text-muted); }

/* ─── Viewer page ──────────────────────────────────────────────── */
.viewer-page { max-width: none; }
.viewer-head { margin-bottom: var(--space-12); }
.viewer-head h1,
.master-item-page .master-list-head h1 {
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 0;
}
.viewer-head .lead { margin-top: 6px; margin-bottom: 0; }
.master-item-page .master-list-head { margin-bottom: var(--space-12); }
.viewer-filters {
    display: flex; flex-wrap: wrap; align-items: end;
    gap: var(--space-16);
    margin-bottom: var(--space-20);
}
.viewer-filters .field { margin-bottom: 0; min-width: 220px; }

.viewer-generator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: var(--space-12);
}
.viewer-main-select {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    margin-bottom: 0;
}
.viewer-main-select .field-label { margin-bottom: 0; }
.viewer-wave-picker {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1 1 720px;
    min-width: 360px;
    margin: 0;
    padding: 0;
    border: 0;
}
.viewer-wave-picker legend {
    display: block;
    flex: 0 0 auto;
    margin-bottom: 0;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.viewer-wave-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 7px;
    align-items: center;
}
.viewer-wave-option {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--text-gray);
    background: transparent;
    font-size: 12px;
}
.viewer-wave-option input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--accent-teal);
}
.viewer-generator .btn-primary {
    width: auto;
    min-width: 96px;
    padding: 8px 16px;
    font-size: 13px;
}
.viewer-facet-toolbar {
    display: flex;
    justify-content: space-between;
    gap: var(--space-12);
    align-items: center;
    margin: 8px 0 10px;
    color: var(--text-soft);
    font-size: 13px;
}
.btn-link {
    background: transparent;
    border: 0;
    color: var(--text-soft);
    padding: 4px 6px;
    font-size: 13px;
}
.btn-link:hover { color: var(--text-white); }
.viewer-facet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.viewer-facet-grid[hidden] { display: none; }
.facet-pane {
    height: 164px;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    overflow: hidden;
}
.facet-pane.is-searching { height: 190px; }
.facet-pane-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}
.facet-pane-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border: 0;
    color: var(--text-white);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}
.facet-pane-title span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.facet-caret {
    flex: 0 0 auto;
    color: var(--text-soft);
}
.facet-pane-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 5px 4px 0;
}
.facet-tool {
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border: 0;
    border-radius: 3px;
    color: var(--text-soft);
    background: transparent;
    font-size: 10px;
    line-height: 1;
}
.facet-tool:hover,
.facet-tool.is-active {
    color: var(--text-white);
    background: rgba(255,255,255,0.08);
}
.facet-search-row {
    padding: 5px 6px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}
.facet-search-row[hidden] { display: none; }
.facet-search-input {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    color: var(--text-white);
    font-size: 11px;
    padding: 4px 6px;
}
.facet-values {
    max-height: 130px;
    overflow-y: auto;
    padding: 3px;
}
.facet-pane.is-collapsed { height: auto; }
.facet-pane.is-searching .facet-values { max-height: 104px; }
.facet-pane.is-collapsed .facet-search-row,
.facet-pane.is-collapsed .facet-values { display: none; }
.facet-value {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    padding: 4px 7px;
    border: 0;
    border-radius: 3px;
    color: var(--text-gray);
    background: transparent;
    font-size: 11px;
    text-align: left;
}
.facet-value:hover,
.facet-value.is-selected {
    color: var(--text-white);
    background: rgba(29,158,117,0.16);
}
.facet-value span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.facet-value b {
    flex: 0 0 auto;
    min-width: 28px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--bg-black);
    background: var(--text-soft);
    font-size: 10px;
    text-align: center;
}
.facet-empty { padding: 8px; color: var(--text-muted); font-size: 12px; }
.viewer-chart-shell {
    margin-bottom: var(--space-20);
    padding: var(--space-16);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}
.viewer-chart-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin-bottom: var(--space-12);
}
.viewer-chart-field {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-width: 128px;
}
.viewer-chart-field span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.viewer-chart-field select {
    min-height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    color: var(--text-white);
    font-size: 12px;
    padding: 6px 28px 6px 8px;
}
.viewer-chart-refresh {
    width: auto;
    min-height: 32px;
    padding: 7px 12px;
}
.viewer-chart-status {
    align-self: center;
    color: var(--text-soft);
    font-size: 12px;
}
.viewer-chart {
    min-height: 360px;
    overflow-x: auto;
}
.viewer-chart-svg {
    display: block;
    min-width: 100%;
}
.viewer-chart-empty {
    padding: var(--space-32);
    color: var(--text-soft);
    font-size: 13px;
}

.viewer-filters select,
.viewer-generator select {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-white);
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 4px;
}
.viewer-generator select {
    width: 128px;
    padding: 6px 28px 6px 8px;
}
@media (min-width: 1680px) {
    .viewer-facet-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .viewer-wave-picker { min-width: 100%; }
    .viewer-facet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .viewer-main-select,
    .viewer-wave-picker {
        align-items: flex-start;
        flex-direction: column;
    }
    .viewer-facet-grid { grid-template-columns: 1fr; }
}
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-white);
    border: 1px solid var(--border-light);
    padding: 10px 16px;
    font-size: 13px;
    border-radius: 4px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.btn-secondary:hover { border-color: var(--accent-teal); background: var(--bg-hover); }

.viewer-table-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: var(--space-8);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.viewer-table {
    width: 100% !important;
    min-width: max-content;
}
.viewer-table-wrap:has(.dt-container) {
    padding-left: 0;
    padding-right: 0;
}
.viewer-table thead th {
    background: var(--bg-elevated);
    color: var(--text-white);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    white-space: nowrap;
}
.viewer-table tbody td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-gray);
    white-space: nowrap;
}
.viewer-table tfoot th {
    background: var(--bg-card);
    color: var(--text-soft);
    padding: 8px 10px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}
.viewer-table tbody tr:hover { background: var(--bg-hover); }
.viewer-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.viewer-table tbody tr.is-selected,
.viewer-table tbody tr.is-selected:hover {
    background: rgba(29,158,117,0.16) !important;
}

/* DataTables wrapper styling (dark theme compat) */
.dt-container, .dt-paging-button {
    color: var(--text-soft) !important;
    background: transparent !important;
}
.dt-container,
.dt-container .dt-layout-row,
.dt-container .dt-scroll,
.dt-container .dt-scroll-head,
.dt-container .dt-scroll-body {
    max-width: 100%;
}
.dt-container { width: 100%; }
.dt-container > .dt-layout-row:not(.dt-layout-table) {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
.dt-container .dt-scroll { overflow: hidden; }
.dt-container .dt-scroll-body { overflow-x: auto !important; }
.dt-container .dt-scroll-headInner { min-width: 100%; }
.dt-container .dt-scroll-headInner table { min-width: 100%; }
.dt-container .dt-input,
.dt-container .dt-search input,
.dt-container .dt-length select {
    background: var(--bg-elevated) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
}
.dt-paging-button.current { color: var(--accent-teal) !important; }
.dt-paging-button:hover  { color: var(--text-white) !important; background: var(--bg-hover) !important; }
.dt-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 var(--space-8) var(--space-8) 0;
}
.dt-button,
.editor-actions .btn-secondary,
.editor-actions .btn-primary {
    width: auto;
}
.dt-button {
    background: var(--bg-elevated) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
}
.dt-button:hover {
    border-color: var(--accent-teal) !important;
    background: var(--bg-hover) !important;
}
.dt-container table.dataTable thead tr > .dtfc-fixed-start,
.dt-container table.dataTable thead tr > .dtfc-fixed-left,
.dt-container table.dataTable thead tr > .dtfc-fixed-start.sorting_1,
.dt-container table.dataTable thead tr > .dtfc-fixed-left.sorting_1 {
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
    background-image: none !important;
    color: var(--text-white) !important;
}
.dt-container table.dataTable tbody tr > .dtfc-fixed-start,
.dt-container table.dataTable tbody tr > .dtfc-fixed-left,
.dt-container table.dataTable tbody tr > .dtfc-fixed-start.sorting_1,
.dt-container table.dataTable tbody tr > .dtfc-fixed-left.sorting_1 {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    background-image: none !important;
    color: var(--text-gray) !important;
    box-shadow: 8px 0 12px rgba(0,0,0,0.24);
}
.dt-container table.dataTable tfoot tr > .dtfc-fixed-start,
.dt-container table.dataTable tfoot tr > .dtfc-fixed-left,
.dt-container table.dataTable tfoot tr > .dtfc-fixed-start.sorting_1,
.dt-container table.dataTable tfoot tr > .dtfc-fixed-left.sorting_1 {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    background-image: none !important;
    color: var(--text-soft) !important;
    box-shadow: 8px 0 12px rgba(0,0,0,0.24);
}
.dt-container table.dataTable tbody tr:hover > .dtfc-fixed-start,
.dt-container table.dataTable tbody tr:hover > .dtfc-fixed-left,
.dt-container table.dataTable tbody tr:hover > .dtfc-fixed-start.sorting_1,
.dt-container table.dataTable tbody tr:hover > .dtfc-fixed-left.sorting_1 {
    background: var(--bg-hover) !important;
    background-color: var(--bg-hover) !important;
    background-image: none !important;
}

/* ─── Rolling editor ───────────────────────────────────────────── */
.editor-page { max-width: none; }
.editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-16);
}
.editor-status {
    font-size: 13px;
    color: var(--text-soft);
}
.editor-status.text-success { color: var(--color-success); }
.editor-status.text-error { color: var(--color-error); }
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: var(--space-24);
    background: rgba(0,0,0,0.72);
}
.modal-backdrop[hidden] { display: none; }
.editor-modal {
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.56);
}
.editor-modal-head,
.editor-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-20);
    border-bottom: 1px solid var(--border);
}
.editor-modal-foot {
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    border-bottom: 0;
}
.editor-modal-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    padding: var(--space-20);
}
.editor-modal .field { margin-bottom: 0; }
.editor-modal select,
.editor-modal input,
.editor-modal textarea {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-white);
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 4px;
}
.editor-modal textarea {
    min-height: 88px;
    resize: vertical;
}
.modal-close {
    color: var(--text-soft);
    font-size: 24px;
    line-height: 1;
    padding: 0 4px;
}
.modal-close:hover { color: var(--text-white); }
.field--wide { grid-column: 1 / -1; }

/* ─── Audit log ────────────────────────────────────────────────── */
.audit-page { max-width: none; }
.audit-tabs { display: flex; gap: var(--space-16); margin-bottom: var(--space-20); border-bottom: 1px solid var(--border); }
.audit-tabs a {
    padding: var(--space-12) var(--space-16);
    color: var(--text-soft);
    font-size: 13px;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.audit-tabs a.active { color: var(--text-white); border-bottom-color: var(--accent-teal); }
.audit-filters {
    display: flex; gap: var(--space-16); flex-wrap: wrap; align-items: end;
    margin-bottom: var(--space-16);
}
.audit-filters label {
    display: flex; flex-direction: column; gap: 4px; font-size: 12px;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.audit-filters select, .audit-filters input {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-white);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.audit-diff code {
    display: block;
    margin-top: 4px;
    max-width: 600px;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 11px;
}

/* ─── Master tables ────────────────────────────────────────────── */
.master-landing,
.master-item-page { max-width: none; }
.master-group { margin-bottom: var(--space-32); }
.master-group-heading {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-teal);
    margin-bottom: var(--space-16);
}

.master-list-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: var(--space-24);
    margin-bottom: var(--space-20);
}
.master-list-head h1 { font-size: 28px; }

.master-filter {
    display: flex; gap: var(--space-12); align-items: center;
    margin-bottom: var(--space-16);
}
.master-filter input[type="search"] {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-white);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    min-width: 280px;
}

.master-pagination {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--space-20);
    font-size: 13px;
}

.master-edit-page { max-width: 600px; }
.master-edit-head { margin-bottom: var(--space-24); }
.master-edit-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-24);
}
.master-edit-actions {
    display: flex; gap: var(--space-12); margin-top: var(--space-16);
}

.btn-danger {
    background: rgba(255,102,102,0.1);
    color: var(--color-error);
    border: 1px solid rgba(255,102,102,0.3);
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 3px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-danger:hover { background: rgba(255,102,102,0.2); border-color: var(--color-error); }

/* ─── Export page ──────────────────────────────────────────────── */
.export-page { max-width: 640px; }
.export-head { margin-bottom: var(--space-32); }
.export-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-24);
}
.export-presets {
    border: none;
    margin-bottom: var(--space-20);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.export-presets legend { margin-bottom: var(--space-12); }
.export-presets label {
    display: flex; align-items: center; gap: var(--space-12);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    color: var(--text-gray);
}
.export-presets label:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.export-presets input[type="radio"] { accent-color: var(--accent-teal); }

/* ─── Regenerate QC ───────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-12);
    margin: var(--space-24) 0;
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-16);
}
.stat-card span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: var(--space-8);
}
.stat-card strong {
    color: var(--text-bright);
    font-size: 24px;
    font-family: var(--font-heading);
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 720px) {
    .app-top {
        flex-wrap: wrap;
        padding: var(--space-12) var(--space-16);
        gap: var(--space-12);
    }
    .app-top .top-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .app-main { padding: var(--space-20) var(--space-16); }
    .auth-card { padding: var(--space-20); }
}

/* ─── Wide-page override — let tabular pages use the full window ─────────────
   The .app-main wrapper centers narrow text content at 1280 px, but the
   viewer / audit / master-landing pages explicitly opt-in to full width by
   declaring max-width:none on their own root. The :has() rule below lifts
   the .app-main clamp so the child max-width:none takes effect. Browsers
   that don't support :has() (pre-2023) fall back to the original 1280 px
   layout — acceptable for an internal admin app. */
.app-main:has(.viewer-page),
.app-main:has(.editor-page),
.app-main:has(.audit-page),
.app-main:has(.master-landing),
.app-main:has(.master-item-page),
.app-main:has(.regenerate-page) {
    max-width: none;
}

@media (max-width: 1400px) {
    .app-main:has(.viewer-page),
    .app-main:has(.editor-page),
    .app-main:has(.audit-page),
    .app-main:has(.master-landing),
    .app-main:has(.master-item-page),
    .app-main:has(.regenerate-page) {
        padding-left: var(--space-12);
        padding-right: var(--space-12);
    }
    .viewer-wave-grid { max-height: 120px; overflow-y: auto; }
    .viewer-table-wrap { padding: var(--space-8); }
    .viewer-table thead th,
    .viewer-table tbody td {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 720px) {
    .viewer-filters,
    .viewer-generator { align-items: stretch; }
    .viewer-filters .field,
    .viewer-filters label,
    .viewer-generator .field,
    .viewer-wave-picker {
        min-width: 100%;
        width: 100%;
    }
    .viewer-facet-toolbar { align-items: flex-start; flex-direction: column; }
    .viewer-facet-grid { grid-template-columns: 1fr; }
    .editor-modal-body { grid-template-columns: 1fr; }
    .editor-actions .btn-primary,
    .editor-actions .btn-secondary { width: 100%; }
    .viewer-table-wrap {
        width: calc(100% + var(--space-24));
        max-width: none;
        margin-left: calc(var(--space-12) * -1);
        margin-right: calc(var(--space-12) * -1);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        padding: var(--space-8) var(--space-16);
    }
}