:root {
    --signal-red: #FF3B30;
    --signal-orange: #FF6A2A;
    --graphite: #3C4650;
    --ink: #1F252B;
    --data-teal: #0A7F86;
    --cloud: #F5F7F8;
    --paper: #FFFFFF;
    --edge: #D9DEE2;
    --muted: #68737E;
    --danger: #A3261E;
    --success: #176B3A;
    --warning: #8A5A00;
    --shadow: 0 10px 28px rgba(31, 37, 43, .06);
    --radius: 12px;
    --radius-large: 20px;
    --focus: 0 0 0 3px rgba(10, 127, 134, .18);
}

* { box-sizing: border-box; }
html { background: var(--cloud); color: var(--ink); font-family: "Golos Text", Arial, sans-serif; line-height: 1.5; }
body { margin: 0; min-width: 320px; }
a { color: var(--data-teal); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--data-teal); box-shadow: var(--focus); }

.signal-line { height: 4px; background: linear-gradient(90deg, var(--signal-red), var(--signal-orange)); }
.app-header {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(230px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 12px clamp(18px, 3vw, 48px);
    background: var(--paper);
    border-bottom: 1px solid var(--edge);
    position: sticky;
    top: 0;
    z-index: 20;
}
.brand-text { display: inline-flex; flex-direction: column; gap: 1px; width: fit-content; color: var(--ink); text-decoration: none; }
.brand-text strong { color: var(--graphite); font-size: 18px; letter-spacing: -.02em; }
.brand-text span { color: var(--muted); font-size: 12px; }
.header-navigation { justify-self: center; }
.main-nav { display: flex; gap: 6px; }
.nav-link { color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; }
.nav-link:hover { background: var(--cloud); color: var(--ink); }
.nav-link.is-active { color: var(--ink); background: #edf3f3; }
.user-area { justify-self: end; display: flex; align-items: center; gap: 12px; }
.user-meta { text-align: right; display: flex; flex-direction: column; line-height: 1.25; }
.user-meta strong { font-size: 13px; }
.user-meta span { color: var(--muted); font-size: 12px; }
.demo-banner { padding: 8px 20px; text-align: center; background: #fff7e8; color: #76510e; border-bottom: 1px solid #efd9ae; font-size: 13px; }

.page-shell { max-width: 1360px; margin: 0 auto; padding: 36px clamp(16px, 3vw, 42px) 80px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 24px; }
h1, h2, h3 { color: var(--graphite); margin-top: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-bottom: 10px; }
h2 { font-size: 23px; line-height: 1.2; margin-bottom: 14px; }
h3 { font-size: 18px; }
.eyebrow { color: var(--data-teal); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 7px; }
.lead { margin: 0; color: var(--muted); font-size: 17px; max-width: 780px; }
.muted { color: var(--muted); }
.mono { font-family: "IBM Plex Mono", Consolas, monospace; font-size: .9em; }
.break-word { overflow-wrap: anywhere; }
.hash { max-width: 260px; overflow-wrap: anywhere; }

.panel { background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin: 0 0 22px; }
.section-stack > *:last-child { margin-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.section-heading h2 { margin-bottom: 0; }

.button { border: 1px solid transparent; border-radius: 10px; min-height: 42px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }
.button-primary:hover { background: var(--ink); border-color: var(--ink); }
.button-secondary { background: var(--paper); color: var(--ink); border-color: #bfc7cd; }
.button-secondary:hover { background: var(--cloud); }
.button-ghost { background: transparent; color: var(--muted); border-color: transparent; }
.button-ghost:hover { color: var(--ink); background: var(--cloud); }
.button-wide { width: 100%; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; color: var(--graphite); font-weight: 700; }
.field-grow { flex: 1 1 320px; }
.field-wide { grid-column: 1 / -1; }
input, select, textarea { width: 100%; border: 1px solid #bdc6cc; border-radius: 8px; background: var(--paper); color: var(--ink); padding: 10px 11px; min-height: 42px; }
textarea { resize: vertical; min-height: 74px; }
input:hover, select:hover, textarea:hover { border-color: #98a5ad; }
input:disabled, select:disabled, textarea:disabled { background: #eef1f2; color: var(--muted); }

.flash-stack { display: grid; gap: 10px; margin-bottom: 16px; }
.flash-stack:empty { display: none; }
.alert { border: 1px solid; border-radius: 10px; padding: 13px 15px; }
.alert-success { background: #f2fbf6; border-color: #b9dfc8; color: #194d2d; }
.alert-error { background: #fff4f3; border-color: #efb8b4; color: #74231e; }
.alert-warning { background: #fff8ea; border-color: #ead39c; color: #684813; }
.alert-info { background: #f2f8f9; border-color: #b9dadd; color: #254c50; }

.filter-panel { padding: 16px; }
.filter-grid { display: grid; grid-template-columns: minmax(240px, 1fr) 180px 180px auto; align-items: end; gap: 12px; }
.filter-submit { white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.inline-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.document-form { max-width: 980px; }

.table-panel { padding: 0; overflow: hidden; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th { text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; background: #fafbfb; }
.data-table th, .data-table td { border-bottom: 1px solid #e8ecef; padding: 13px 14px; vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfcfc; }
.document-link { color: var(--ink); font-weight: 700; }
.registry-table td:nth-child(4) { min-width: 300px; }
.empty-state { background: var(--paper); border: 1px dashed #bfc7cd; border-radius: var(--radius); padding: 42px 24px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--graphite); font-size: 20px; margin-bottom: 4px; }
.empty-state p { margin: 0; }

.status, .sync-state, .decision { display: inline-flex; align-items: center; width: fit-content; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.status-draft { color: #555f67; background: #eef1f2; }
.status-review { color: #72500c; background: #fff4d8; }
.status-approved { color: #0b5960; background: #e5f5f6; }
.status-registered { color: #1f5735; background: #e7f5ec; }
.status-executed { color: #334f70; background: #e8f0f8; }
.status-archived { color: #5c526b; background: #eeeaf3; }

.document-heading { align-items: center; }
.heading-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.document-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .8fr); gap: 22px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.detail-grid > div { padding: 12px 0; border-bottom: 1px solid #edf0f1; }
.detail-grid > div:nth-child(odd) { padding-right: 18px; }
.detail-grid dt { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
.detail-grid dd { margin: 0; color: var(--ink); }
.workflow-panel { align-self: start; position: sticky; top: 98px; }
.workflow-stack, .workflow-form { display: grid; gap: 10px; }
.workflow-form { padding-top: 12px; border-top: 1px solid #edf0f1; }
.workflow-form:first-child { border-top: 0; padding-top: 0; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.timeline { display: grid; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 0; }
.timeline-marker { width: 9px; height: 9px; border-radius: 50%; background: var(--data-teal); margin: 6px 0 0 3px; box-shadow: 0 0 0 4px #e5f2f3; }
.timeline-item strong { margin-right: 6px; }
.timeline-item p, .decision-card p { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.decision-list { display: grid; gap: 10px; }
.decision-card { border: 1px solid #e6eaec; border-radius: 10px; padding: 12px; }
.decision-approved { background: #e7f5ec; color: #1f5735; }
.decision-returned { background: #fff2ef; color: #7d2e26; }
.decision-card small { color: var(--muted); }
.link-list { display: grid; gap: 8px; }
.link-card { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: 16px; border-top: 1px solid #edf0f1; padding: 12px 0; }
.link-card:first-child { border-top: 0; }
.link-card > div { display: flex; flex-direction: column; }
.link-card small { color: var(--muted); }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.metric-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.metric-grid > div { background: var(--cloud); border-radius: 10px; padding: 12px; }
.metric-grid strong { display: block; font-size: 25px; color: var(--graphite); }
.metric-grid span { color: var(--muted); font-size: 12px; }
.sync-state-create { background: #e7f5ec; color: #1f5735; }
.sync-state-update { background: #e5f5f6; color: #0b5960; }
.sync-state-unchanged { background: #eef1f2; color: #555f67; }
.sync-state-conflict { background: #fff4d8; color: #72500c; }
.sync-state-error { background: #fff2ef; color: #7d2e26; }
.error-list { color: var(--danger); }

.auth-shell { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 40px 0; }
.auth-card { width: min(100%, 440px); background: var(--paper); border: 1px solid var(--edge); border-radius: var(--radius-large); box-shadow: var(--shadow); padding: clamp(24px, 5vw, 42px); }
.auth-card h1 { font-size: 34px; }
.stack-form { display: grid; gap: 15px; margin-top: 24px; }
.legal-note { color: var(--muted); font-size: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #edf0f1; }

@media (max-width: 1050px) {
    .app-header { grid-template-columns: 1fr auto; }
    .header-navigation { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
    .filter-grid { grid-template-columns: 1fr 1fr; }
    .filter-grid .field-grow { grid-column: 1 / -1; }
    .document-layout { grid-template-columns: 1fr; }
    .workflow-panel { position: static; }
    .metric-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .app-header { position: static; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 16px; }
    .header-navigation { overflow-x: auto; max-width: 100%; }
    .user-meta { display: none; }
    .page-shell { padding: 24px 14px 56px; }
    .page-heading { flex-direction: column; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; }
    .filter-grid, .form-grid, .detail-grid, .two-columns { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
    .detail-grid > div:nth-child(odd) { padding-right: 0; }
    .metric-grid, .metric-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .link-card { grid-template-columns: 1fr; gap: 4px; }

    .registry-table { min-width: 0; }
    .registry-table thead { display: none; }
    .registry-table, .registry-table tbody, .registry-table tr, .registry-table td { display: block; width: 100%; }
    .registry-table tr { border-bottom: 1px solid var(--edge); padding: 10px 0; }
    .registry-table tr:last-child { border-bottom: 0; }
    .registry-table td { border: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 6px 14px; }
    .registry-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
    .registry-table td:nth-child(4) { min-width: 0; }
}

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

/* 0.3.0 — administration, directories, extended filters */
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.settings-card { display: flex; min-height: 170px; flex-direction: column; justify-content: space-between; gap: 18px; color: var(--ink); text-decoration: none; }
.settings-card h2 { margin-bottom: 8px; }
.settings-card p { color: var(--muted); margin: 0; }
.settings-card .card-link { color: var(--data-teal); font-weight: 800; }
.admin-list { display: grid; gap: 14px; }
.admin-card { border: 1px solid var(--edge); border-radius: var(--radius); padding: 18px; background: var(--paper); }
.admin-card + .admin-card { margin-top: 0; }
.check-field { display: flex; align-items: center; gap: 9px; min-height: 42px; font-weight: 700; }
.check-field input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--data-teal); }
.field select[multiple] { min-height: 160px; padding: 7px; }
.field select[multiple] option { padding: 7px 8px; border-radius: 5px; }
.filter-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.table-subtext { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.token-list { font-family: var(--mono); color: var(--muted); word-break: break-word; }
.reference-note { border-left: 3px solid var(--data-teal); padding: 10px 14px; background: #f3f9fa; color: var(--muted); }

@media (max-width: 960px) {
    .settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .settings-grid { grid-template-columns: 1fr; }
    .filter-actions .button { flex: 1; }
}