:root {
    color-scheme: light dark;
    --bg: #f3f5f8;
    --surface: #ffffff;
    --surface-soft: #edf1f7;
    --text: #172033;
    --muted: #5d687b;
    --line: #d7dde8;
    --brand: #2449a4;
    --brand-hover: #19377e;
    --brand-gradient-end: #4b75d4;
    --accent: #44c4a1;
    --danger: #a11f38;
    --focus: #e49515;
    --header-bg: #101a31;
    --header-text: #ffffff;
    --header-link: #dfe7fa;
    --header-hover: #263453;
    --header-active: #34466d;
    --success: #18805f;
    --neutral: #7a8496;
    --alert-bg: #fce8ed;
    --alert-text: #761428;
    --input-border: #9da8ba;
    --avatar-text: #102a26;
    --code-key: #9ec1ff;
    --code-string: #8ee3c7;
    --code-number: #f6c177;
    --code-boolean: #d9a8ff;
    --code-null: #aeb8ca;
    --guest-glow-accent: rgba(68, 196, 161, .18);
    --guest-glow-brand: rgba(36, 73, 164, .18);
    --shadow: 0 20px 55px rgba(25, 38, 68, .15);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }
button, input { font: inherit; }
button, .button-link {
    border: 0; border-radius: .5rem; background: var(--brand); color: white;
    cursor: pointer; font-weight: 700; padding: .75rem 1rem; text-decoration: none;
}
button:hover, .button-link:hover { background: var(--brand-hover); color: white; }
.secondary-button {
    align-items: center; background: var(--surface-soft); border: 1px solid var(--line);
    border-radius: .5rem; color: var(--text); display: inline-flex; font-weight: 700;
    min-height: 2.75rem; padding: .65rem 1rem; text-decoration: none;
}
.secondary-button:hover { background: var(--line); color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.login-page { display: grid; grid-template-rows: 1fr auto; min-height: 100vh; }
.login-main {
    align-items: center; display: flex; justify-content: center; min-height: 78vh;
    padding: 3rem 1.25rem;
    background:
        radial-gradient(circle at 12% 12%, var(--guest-glow-accent), transparent 35%),
        radial-gradient(circle at 88% 18%, var(--guest-glow-brand), transparent 34%);
}
.login-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
    box-shadow: var(--shadow); max-width: 28rem; padding: 2.5rem; width: 100%;
}
.login-brand, .brand-mark {
    align-items: center; background: linear-gradient(145deg, var(--brand), var(--brand-gradient-end));
    border-radius: .7rem; color: white; display: inline-flex; font-weight: 900;
    justify-content: center;
}
.login-brand { font-size: 2rem; height: 3.6rem; width: 3.6rem; }
.login-card h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: .25rem 0; }
.eyebrow { color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.login-intro { color: var(--muted); margin: 0 0 1.5rem; }
.login-form { display: grid; gap: .6rem; }
.login-form label { font-weight: 700; margin-top: .5rem; }
.login-form input {
    background: var(--surface); border: 1px solid var(--input-border); border-radius: .5rem;
    color: var(--text); padding: .75rem;
}
.login-form button { margin-top: 1rem; width: 100%; }
.alert { background: var(--alert-bg); border-left: 4px solid var(--danger); color: var(--alert-text); margin: 1rem 0; padding: .8rem; }

.skip-link { background: var(--text); color: white; left: 1rem; padding: .6rem; position: fixed; top: -5rem; z-index: 20; }
.skip-link:focus { top: 1rem; }
.app-page { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 100vh; }
.app-header {
    align-items: center; background: var(--header-bg); color: var(--header-text); display: grid;
    gap: 1.5rem; grid-template-columns: auto 1fr auto; min-height: 4.4rem; padding: .65rem 1.5rem;
}
.brand { align-items: center; color: var(--header-text); display: flex; font-size: 1.15rem; font-weight: 800; gap: .65rem; text-decoration: none; }
.brand:hover { color: var(--header-text); }
.brand-mark { height: 2.3rem; width: 2.3rem; }
.primary-nav { display: flex; gap: .25rem; justify-content: center; }
.primary-nav a { border-radius: .4rem; color: var(--header-link); padding: .55rem .7rem; text-decoration: none; }
.primary-nav a:hover { background: var(--header-hover); color: var(--header-text); }
.primary-nav a.active { background: var(--header-active); box-shadow: inset 0 -3px 0 var(--accent); color: var(--header-text); }
.account-menu { position: relative; }
.account-menu summary { align-items: center; cursor: pointer; display: flex; gap: .55rem; list-style: none; }
.avatar { align-items: center; background: var(--accent); border-radius: 50%; color: var(--avatar-text); display: inline-flex; font-weight: 900; height: 2.2rem; justify-content: center; width: 2.2rem; }
.account-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: .6rem;
    box-shadow: var(--shadow); color: var(--text); display: grid; gap: .5rem;
    min-width: 13rem; padding: .8rem; position: absolute; right: 0; top: 3rem; z-index: 10;
}
.account-panel span { color: var(--muted); padding: .35rem; }
.account-panel button { width: 100%; }
.breadcrumbs { background: var(--surface); border-bottom: 1px solid var(--line); padding: .65rem 1.5rem; }
.breadcrumbs ol { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { color: var(--muted); content: "/"; margin-right: .5rem; }
.content { padding: 2.5rem clamp(1.25rem, 4vw, 4rem); }
.page-heading h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: .1rem 0 1.5rem; }
.page-description { color: var(--muted); font-size: 1.05rem; margin: -1rem 0 1.5rem; max-width: 52rem; }
.flash-message { border-left: 4px solid var(--brand); margin: 0 0 1rem; padding: .8rem 1rem; }
.flash-success { border-color: var(--success); }
.flash-error { border-color: var(--danger); }
.status-panel { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; max-width: 48rem; padding: 1.5rem; }
.status-panel ul { display: grid; gap: .8rem; list-style: none; padding: 0; }
.status-dot { background: var(--success); border-radius: 50%; display: inline-block; height: .7rem; margin-right: .65rem; width: .7rem; }
.status-dot.neutral { background: var(--neutral); }
.password-form { display: grid; gap: .65rem; max-width: 32rem; }
.password-form label { font-weight: 700; margin-top: .4rem; }
.password-form input {
    background: var(--surface); border: 1px solid var(--input-border); border-radius: .5rem;
    color: var(--text); padding: .75rem;
}
.password-form button { margin-top: .8rem; }
.app-footer { align-items: center; background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: .85rem; gap: 1rem; justify-content: space-between; padding: 1rem 1.5rem; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.environment { background: var(--surface-soft); border-radius: 1rem; color: var(--text); margin: 0 .6rem; padding: .25rem .6rem; }
.error-panel { max-width: 42rem; }
.error-code { color: var(--brand); font-size: 4rem; font-weight: 900; margin: 0; }
.visually-hidden {
    clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden;
    position: absolute; white-space: nowrap; width: 1px;
}
.secondary-nav {
    border-bottom: 1px solid var(--line); display: flex; gap: .25rem; margin: 0 0 1.5rem;
    overflow-x: auto; padding-bottom: .6rem;
}
.secondary-nav a { border-radius: .4rem; color: var(--muted); flex: 0 0 auto; padding: .5rem .65rem; text-decoration: none; }
.secondary-nav a:hover, .secondary-nav a.active { background: var(--surface-soft); color: var(--text); }
.secondary-nav a.active { box-shadow: inset 0 -2px 0 var(--brand); font-weight: 700; }
.summary-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.summary-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: .75rem;
    color: var(--text); display: grid; gap: .25rem; padding: 1.25rem; text-decoration: none;
}
.summary-card:hover { border-color: var(--brand); color: var(--text); }
.summary-card small { color: var(--muted); line-height: 1.35; }
.section-heading-row {
    align-items: end; display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between;
}
.section-heading-row h2 { margin-bottom: .25rem; }
.section-heading-row p { color: var(--muted); margin-top: 0; }
.summary-value { color: var(--brand); font-size: 2rem; font-weight: 900; }
.module-section { margin-top: 2rem; }
.activity-query {
    align-items: end; background: var(--surface); border: 1px solid var(--line);
    border-radius: .75rem; display: grid; gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); padding: 1rem;
}
.activity-query div { display: grid; gap: .3rem; }
.activity-query label { font-size: .85rem; font-weight: 700; }
.activity-query input, .activity-query select {
    background: var(--surface); border: 1px solid var(--input-border); border-radius: .45rem;
    color: var(--text); min-height: 2.75rem; padding: .55rem .7rem; width: 100%;
}
.activity-query .query-search { grid-column: span 2; }
.query-actions { display: flex !important; flex-direction: row; }
.activity-table { min-width: 78rem; }
.status-badge {
    background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px;
    display: inline-block; font-size: .75rem; font-weight: 800; padding: .15rem .55rem;
}
.status-high { border-color: var(--success); color: var(--success); }
.status-medium { border-color: var(--focus); color: var(--text); }
.status-low { border-color: var(--danger); color: var(--danger); }
.copy-button { font-size: .75rem; margin-left: .5rem; padding: .3rem .55rem; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; gap: 1rem; grid-template-columns: 1rem 1fr; position: relative; }
.timeline li:not(:last-child)::before {
    background: var(--line); content: ""; height: 100%; left: .43rem; position: absolute; top: 1rem; width: 2px;
}
.timeline-marker { background: var(--brand); border-radius: 50%; height: .9rem; margin-top: .4rem; width: .9rem; z-index: 1; }
.timeline article { padding-bottom: 1.5rem; }
.timeline h3, .timeline p { margin: 0 0 .35rem; }
.timeline-time, .timeline-meta { color: var(--muted); font-size: .82rem; }
.observation-card { background: var(--surface); border: 1px solid var(--line); border-radius: .7rem; padding: .95rem 1rem; }
.observation-card summary { cursor: pointer; list-style: none; }
.observation-card summary::-webkit-details-marker { display: none; }
.observation-card-head { display: grid; gap: .25rem; }
.observation-card-body { border-top: 1px solid var(--line); margin-top: .9rem; padding-top: .9rem; }
.detail-list.compact { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.related-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.related-grid article { background: var(--surface-soft); border-radius: .6rem; padding: 1rem; }
.related-grid h3 { margin-top: 0; }
.related-list { display: grid; gap: .75rem; list-style: none; padding: 0; }
.related-list li { border-bottom: 1px solid var(--line); display: grid; padding: 0 0 .75rem; }
.related-list span { color: var(--muted); font-size: .85rem; }
.admin-query {
    align-items: end; background: var(--surface); border: 1px solid var(--line);
    border-radius: .75rem; display: flex; flex-wrap: wrap; gap: .8rem; padding: 1rem;
}
.admin-query div { display: grid; gap: .3rem; }
.admin-query label { font-size: .85rem; font-weight: 700; }
.admin-query input, .admin-query select {
    background: var(--surface); border: 1px solid var(--input-border); border-radius: .45rem;
    color: var(--text); min-height: 2.75rem; padding: .55rem .7rem;
}
.admin-query input { min-width: min(24rem, 70vw); }
.results-summary { color: var(--muted); font-size: .9rem; }
.table-region { border: 1px solid var(--line); border-radius: .65rem; overflow: auto; }
.admin-table { background: var(--surface); border-collapse: collapse; min-width: 48rem; width: 100%; }
.admin-table th, .admin-table td { border-bottom: 1px solid var(--line); padding: .7rem .8rem; text-align: left; vertical-align: top; }
.admin-table th { background: var(--surface-soft); color: var(--text); font-size: .82rem; position: sticky; top: 0; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--surface-soft); }
.sort-indicator { font-size: .7rem; margin-left: .25rem; }
.empty-state { background: var(--surface); border: 1px dashed var(--line); border-radius: .7rem; padding: 2rem; text-align: center; }
.empty-state h2 { margin-top: 0; }
.pagination { align-items: center; display: flex; gap: 1rem; justify-content: space-between; margin-top: 1rem; }
.pagination div { display: flex; flex-wrap: wrap; gap: .3rem; }
.pagination a, .pagination span { border: 1px solid var(--line); border-radius: .35rem; min-width: 2.2rem; padding: .4rem; text-align: center; }
.pagination span { background: var(--brand); color: var(--header-text); }
.detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; margin-bottom: 1rem; padding: 1.25rem; }
.detail-card h2 { margin-top: 0; }
.workspace-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);gap:1.25rem;align-items:start;margin-bottom:1rem}
.workspace-hero-copy{background:linear-gradient(135deg,var(--surface),var(--surface-soft));border:1px solid var(--line);border-radius:.85rem;padding:1.5rem}
.workspace-hero-copy h1{margin:.25rem 0 .5rem;font-size:clamp(2rem,4vw,3rem)}
.workspace-hero-copy p{margin:0;color:var(--muted)}
.workspace-summary{margin:0}
.trip-layout{display:block;width:100%}
.trip-stack{display:grid;gap:20px}
.trip-map{aspect-ratio:900/520;width:100%;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#0f172a,#111827);position:relative}
.trip-map-fallback{display:flex;align-items:center;justify-content:center;height:100%;padding:20px;color:#cbd5e1;text-align:center}
.trip-map-svg{width:100%;height:100%;display:block}
.trip-map-note{position:absolute;left:12px;top:12px;right:12px;z-index:2;background:rgba(15,23,42,.72);backdrop-filter:blur(4px);border:1px solid rgba(148,163,184,.22);border-radius:10px;padding:8px 12px;color:#e2e8f0;font-size:13px;line-height:1.35}
.trip-map-caption{margin-top:12px;color:var(--muted);font-size:.95rem}
.review-attention{align-items:start;border:1px solid var(--line);border-left-width:5px;border-radius:.75rem;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(18rem,1fr);margin:0 0 1rem;padding:1rem 1.25rem}
.review-attention h2{margin:.45rem 0 0}
.review-attention ul{margin:0;padding-left:1.25rem}
.review-attention-no_action_required{border-left-color:#16a34a;background:rgba(22,163,74,.08)}
.review-attention-needs_review{border-left-color:#d97706;background:rgba(217,119,6,.08)}
.review-state{align-items:center;display:inline-flex;font-weight:800;gap:.4rem}
.review-state-no_action_required{color:#16a34a}
.review-state-needs_review,.review-state-conflict{color:#d97706}
.review-state-failed{color:#dc2626}
.evidence-timeline{margin:0;padding:0}
.narrative-workspace textarea{background:var(--surface);border:1px solid var(--input-border);border-radius:.5rem;color:var(--text);display:block;margin:.4rem 0 1rem;max-width:100%;padding:.75rem;width:100%}
.narrative-results{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr));margin:1rem 0}
.narrative-results section{background:var(--surface-soft);border-radius:.65rem;padding:1rem}
.narrative-results h3{margin-top:0}
.operator-requests{margin-top:1rem}
.operator-requests .summary-card{align-items:flex-start;gap:.35rem}
@media (max-width: 900px){.workspace-hero{grid-template-columns:1fr}}
@media (max-width: 900px){.review-attention{grid-template-columns:1fr}}
@media (max-width: 900px){.narrative-results{grid-template-columns:1fr}}
.review-hero {
    align-items: center; background: linear-gradient(135deg, var(--surface), var(--surface-soft));
    border: 1px solid var(--line); border-radius: .85rem; display: grid; gap: 2rem;
    grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1rem; padding: 1.5rem;
}
.review-hero h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin: .2rem 0 .7rem; }
.review-kicker { color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
.review-narrative { font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 75ch; }
.review-score { display: grid; gap: .35rem; justify-items: end; min-width: 10rem; }
.review-score > span:first-child { color: var(--muted); font-size: .82rem; }
.review-score strong { color: var(--brand); font-size: 2rem; }
.review-workspace { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); }
.review-workspace aside { position: sticky; top: 1rem; }
.compact-list { display: grid; gap: .65rem; margin: 0; }
.compact-list div { border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.compact-list dt { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.compact-list dd { margin: .2rem 0 0; }
.evidence-assessment { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidence-assessment > div { background: var(--surface-soft); border-radius: .6rem; padding: 1rem; }
.evidence-assessment h3 { margin-top: 0; }
.evidence-assessment ul { padding-left: 1.2rem; }
.rule-trace { display: grid; gap: .7rem; list-style: none; padding: 0; }
.rule-trace li { border-left: 3px solid var(--brand); display: grid; gap: .2rem; padding: .45rem .8rem; }
.rule-trace span { color: var(--muted); }
.detail-list { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin: 0; }
.detail-list div { border-bottom: 1px solid var(--line); padding: .7rem; }
.detail-list dt { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.detail-list dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.operation-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.engine-form { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); }
.engine-form label { display: grid; font-weight: 700; gap: .3rem; }
.engine-form input { background: var(--surface); border: 1px solid var(--input-border); border-radius: .45rem; color: var(--text); padding: .65rem; }
.engine-form button { align-self: end; }
.json-viewer { background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; margin: 1rem 0; }
.json-viewer summary { cursor: pointer; font-weight: 700; padding: 1rem; }
.json-toolbar { border-top: 1px solid var(--line); padding: .6rem 1rem; }
.json-viewer pre { background: var(--header-bg); color: var(--header-link); margin: 0; max-height: 32rem; overflow: auto; padding: 1rem; }
.json-key { color: var(--code-key); }
.json-string { color: var(--code-string); }
.json-number { color: var(--code-number); }
.json-boolean { color: var(--code-boolean); }
.json-null { color: var(--code-null); font-style: italic; }

@media (max-width: 900px) {
    .app-header { grid-template-columns: auto auto; }
    .primary-nav { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; order: 3; }
    .review-workspace { grid-template-columns: 1fr; }
    .review-workspace aside { position: static; }
    .evidence-assessment { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .login-card { padding: 1.5rem; }
    .app-header { padding: .65rem 1rem; }
    .account-menu summary > span:last-child { display: none; }
    .content { padding: 1.5rem 1rem; }
    .admin-query { align-items: stretch; display: grid; }
    .activity-query .query-search { grid-column: auto; }
    .admin-query input { min-width: 0; width: 100%; }
    .pagination { align-items: flex-start; flex-direction: column; }
    .review-hero { grid-template-columns: 1fr; }
    .review-score { justify-items: start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1422; --surface: #171f31; --surface-soft: #222c41;
        --text: #ecf1fb; --muted: #b1bbcd; --line: #344058;
        --brand: #87a9ff; --brand-hover: #b0c5ff;
    }
    :root { --alert-bg: #431824; --alert-text: #ffdbe3; }
}