:root {
    --ink: #202222;
    --ink-soft: #303232;
    --ink-muted: #555858;
    --gold: #aa8247;
    --gold-bright: #d1ae70;
    --gold-pale: #f1e7d7;
    --paper: #f5f3ee;
    --surface: #ffffff;
    --line: #dedbd3;
    --success: #246c50;
    --success-pale: #e4f2eb;
    --danger: #9a3d38;
    --danger-pale: #f8e8e6;
    --info-pale: #eaf0f3;
    --shadow: 0 18px 50px rgba(25, 27, 27, .08);
    --radius: 18px;
    --sidebar: 278px;
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 16px; border-radius: 10px; color: #fff; background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; }
h1 { margin-bottom: 12px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.8vw, 3.5rem); font-weight: 500; }
h2 { margin-bottom: 0; font-size: clamp(1.25rem, 2vw, 1.65rem); }
h3 { margin: 0 0 16px; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { margin-bottom: 10px; color: #805817; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.lead { max-width: 48ch; color: var(--ink-muted); font-size: 1.05rem; }
.meta-line, .field-hint { color: var(--ink-muted); font-size: .82rem; }

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: auto; height: 76px; max-width: 56vw; object-fit: contain; object-position: left center; }
.brand--sidebar { width: 100%; min-height: 102px; padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,.1); }
.brand--sidebar img { width: auto; height: 64px; filter: drop-shadow(0 4px 15px rgba(0,0,0,.22)); }

.language { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); }
.language a { min-width: 40px; padding: 7px 10px; border-radius: 999px; color: var(--ink-muted); font-size: .75rem; font-weight: 800; text-align: center; text-decoration: none; }
.language a:hover, .language a[aria-current="page"] { color: #fff; background: var(--ink); }

.auth-shell { background:
    linear-gradient(115deg, rgba(24,26,26,.96) 0 44%, rgba(24,26,26,.88) 44% 54%, transparent 54%),
    radial-gradient(circle at 85% 18%, rgba(209,174,112,.32), transparent 35%),
    var(--paper);
}
.auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1180px, calc(100% - 40px)); min-height: 108px; margin: 0 auto; }
.auth-topbar .brand img { filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.auth-main { display: grid; align-items: center; min-height: calc(100vh - 108px); width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 40px 0 90px; }
.auth-card { width: min(100%, 540px); margin-left: auto; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(255,255,255,.72); border-radius: 26px; background: rgba(255,255,255,.96); box-shadow: 0 30px 100px rgba(0,0,0,.18); backdrop-filter: blur(16px); }
.auth-card .brand { margin-bottom: 28px; }
.text-link { display: inline-flex; margin-top: 22px; color: var(--ink-muted); font-weight: 700; text-underline-offset: 4px; }
.secret-box { margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.secret-box dt { margin-top: 12px; color: var(--ink-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.secret-box dt:first-child { margin-top: 0; }
.secret-box dd { margin: 5px 0 0; overflow-wrap: anywhere; }

.portal-layout { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; z-index: 30; top: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; color: #f6f4ef; background:
    linear-gradient(160deg, rgba(170,130,71,.12), transparent 32%),
    var(--ink); box-shadow: 12px 0 40px rgba(25,27,27,.08); }
.main-nav { display: grid; gap: 3px; padding: 20px 14px; }
.main-nav a { display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 9px 13px; border-radius: 10px; color: rgba(255,255,255,.72); font-size: .9rem; font-weight: 650; text-decoration: none; }
.main-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.main-nav a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(170,130,71,.28), rgba(170,130,71,.08)); }
.nav-mark { width: 7px; height: 7px; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; }
.main-nav a[aria-current="page"] .nav-mark { border-color: var(--gold-bright); background: var(--gold-bright); box-shadow: 0 0 0 4px rgba(209,174,112,.12); }
.sidebar-foot { display: grid; gap: 15px; margin-top: auto; padding: 20px 27px 28px; border-top: 1px solid rgba(255,255,255,.1); }
.identity { display: grid; gap: 2px; }
.identity strong { overflow: hidden; text-overflow: ellipsis; }
.identity span { color: rgba(255,255,255,.58); font-size: .78rem; }

.portal-main { min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: flex-end; min-height: 72px; padding: 12px clamp(20px,4vw,56px); border-bottom: 1px solid rgba(222,219,211,.78); background: rgba(245,243,238,.9); backdrop-filter: blur(16px); }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; border: 0; color: var(--ink); background: transparent; font-weight: 750; }
.nav-close { display: none; align-items: center; justify-content: space-between; min-height: 44px; margin: 12px 14px 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; color: inherit; background: transparent; }
.content { width: min(1480px, 100%); margin: 0 auto; padding: clamp(28px,4vw,58px); }
.page-heading { display: flex; align-items: start; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.page-heading p:last-child { max-width: 66ch; margin-bottom: 0; color: var(--ink-muted); }
.role-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid rgba(170,130,71,.35); border-radius: 999px; color: #77592e; background: var(--gold-pale); font-size: .74rem; font-weight: 800; white-space: nowrap; }

.notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding: 14px 17px; border: 1px solid transparent; border-radius: 12px; font-size: .9rem; }
.notice button { width: 30px; height: 30px; border: 0; border-radius: 8px; color: inherit; background: transparent; cursor: pointer; font-size: 1.25rem; }
.notice--success { border-color: rgba(36,108,80,.22); color: #18523c; background: var(--success-pale); }
.notice--error { border-color: rgba(154,61,56,.22); color: #7e2e2a; background: var(--danger-pale); }
.notice--info { border-color: #cedbe2; color: #33505e; background: var(--info-pale); }

.panel { margin-top: 22px; padding: clamp(20px,3vw,32px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 30px rgba(25,27,27,.035); }
.panel:first-of-type { margin-top: 0; }
.panel--focus { border-color: rgba(170,130,71,.45); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-heading p { margin: 5px 0 0; color: var(--ink-muted); }

.form-stack { display: grid; gap: 17px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px 20px; }
.form-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.form-grid.compact, .form-stack.compact { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.span-2 { grid-column: 1 / -1; }
label { display: grid; align-content: start; gap: 7px; color: var(--ink-muted); font-size: .79rem; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #cbc9c2; border-radius: 9px; color: var(--ink); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; }
textarea { resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #aba89e; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(170,130,71,.15); }
input:disabled { color: #747676; background: #eee; }
.check { display: flex; align-items: center; align-self: center; gap: 9px; min-height: 46px; }
.check input { width: 20px; min-height: 20px; }
.form-actions, .action-row { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.form-actions { justify-content: flex-end; }
.action-row { margin-top: 16px; }
.action-row label { min-width: 180px; flex: 1 1 180px; }
.action-row--border { padding-top: 20px; border-top: 1px solid var(--line); }
.review-form { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); }
.button--primary { color: #fff; background: var(--ink); }
.button--primary:hover { background: #090a0a; }
.button--secondary { border-color: rgba(170,130,71,.5); color: #6f5128; background: var(--gold-pale); }
.button--quiet { border-color: rgba(128,128,128,.25); color: inherit; background: transparent; }
.button--danger { border-color: rgba(154,61,56,.3); color: var(--danger); background: var(--danger-pale); }
.button--small { min-height: 36px; padding: 7px 11px; font-size: .78rem; }

.metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.metric-card { position: relative; display: grid; min-height: 168px; padding: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 7px 30px rgba(25,27,27,.035); text-decoration: none; }
.metric-card::after { position: absolute; right: -24px; bottom: -42px; width: 120px; height: 120px; border: 18px solid var(--gold-pale); border-radius: 50%; content: ""; }
.metric-card > span:first-child { max-width: 20ch; color: var(--ink-muted); font-size: .82rem; font-weight: 750; }
.metric-card strong { align-self: end; font-family: Georgia, "Times New Roman", serif; font-size: 2.7rem; font-weight: 500; }
.metric-arrow { position: absolute; top: 20px; right: 22px; color: var(--gold); font-size: 1.15rem; }

.table-wrap { max-width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink-muted); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
.table-link { color: #745426; font-weight: 800; text-underline-offset: 3px; }
code { padding: 2px 5px; border-radius: 4px; background: #eeece7; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82em; overflow-wrap: anywhere; }

.status { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid #d1cfc8; border-radius: 999px; color: var(--ink-muted); background: #f1f0ed; font-size: .68rem; font-weight: 850; white-space: nowrap; }
.status--approved, .status--active, .status--completed, .status--delivered, .status--won, .status--available, .status--resolved { border-color: rgba(36,108,80,.24); color: var(--success); background: var(--success-pale); }
.status--submitted, .status--planned, .status--in-progress, .status--assigned, .status--open { border-color: rgba(170,130,71,.3); color: #745426; background: var(--gold-pale); }
.status--rejected, .status--cancelled, .status--lost, .status--repair { border-color: rgba(154,61,56,.22); color: var(--danger); background: var(--danger-pale); }

.record-list, .card-list { display: grid; gap: 12px; }
.record { display: block; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.record--link { text-decoration: none; }
.record--link:hover, .project-card:hover { border-color: rgba(170,130,71,.55); box-shadow: 0 8px 22px rgba(25,27,27,.06); }
.record > p:last-child { margin-bottom: 0; }
.record-main { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.record-main > div { display: grid; gap: 3px; }
.record-main strong { overflow-wrap: anywhere; }
.record-main span:not(.status):not(.project-number) { color: var(--ink-muted); font-size: .82rem; }
.review-note { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold); color: var(--ink-muted); background: var(--paper); }
.empty-state { margin: 0; padding: 28px; border: 1px dashed #c9c6bd; border-radius: 12px; color: var(--ink-muted); text-align: center; }

.card-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.project-card { display: grid; align-content: start; gap: 7px; min-height: 160px; padding: 20px; border: 1px solid var(--line); border-radius: 13px; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease; }
.project-card .status { align-self: end; justify-self: start; margin-top: auto; }
.project-number { color: #805817; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 26px; }
.facts div { padding: 14px; border-radius: 10px; background: var(--paper); }
.facts dt { color: var(--ink-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.facts dd { margin: 4px 0 0; font-weight: 750; }
.two-column, .three-column { display: grid; gap: 22px; }
.two-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
.three-column { grid-template-columns: repeat(3,minmax(0,1fr)); }
.plain-list, .timeline { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plain-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list small { color: var(--ink-muted); }
.timeline { border-left: 2px solid var(--gold-pale); }
.timeline li { position: relative; display: grid; gap: 2px; padding: 4px 0 12px 18px; }
.timeline li::before { position: absolute; top: 9px; left: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); content: ""; }
.timeline span { color: var(--ink-muted); font-size: .8rem; }

.message { margin: 10px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.message--initial { border-left: 4px solid var(--gold); background: #fff; }
.message strong { margin-right: 10px; }
.message time { color: var(--ink-muted); font-size: .72rem; }
.message p { margin: 8px 0 0; white-space: normal; }

.inventory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.inventory-card { padding: 20px; border: 1px solid var(--line); border-radius: 13px; }
.inventory-card--low { border-color: rgba(154,61,56,.28); background: linear-gradient(135deg,#fff,var(--danger-pale)); }
.quantity { font-family: Georgia,"Times New Roman",serif; font-size: 1.5rem; font-weight: 500; }

@media (max-width: 1120px) {
    .metric-grid, .card-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .three-column { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .portal-layout { display: block; }
    .sidebar { position: fixed; left: 0; width: min(var(--sidebar), calc(100vw - 48px)); transform: translateX(-110%); transition: transform .22s ease; }
    .nav-open .sidebar { transform: translateX(0); box-shadow: 30px 0 80px rgba(0,0,0,.35); }
    .nav-open::after { position: fixed; z-index: 25; inset: 0; background: rgba(0,0,0,.42); content: ""; }
    .topbar { justify-content: space-between; }
    .nav-toggle { display: inline-flex; }
    .nav-close { display: flex; }
    body.nav-open { overflow: hidden; }
    .two-column { grid-template-columns: 1fr; }
    .auth-shell { background: radial-gradient(circle at 80% 5%,rgba(209,174,112,.25),transparent 28%), var(--paper); }
}

@media (max-width: 620px) {
    .auth-topbar, .auth-main { width: min(100% - 24px, 540px); }
    .auth-topbar { min-height: 88px; }
    .auth-main { min-height: calc(100vh - 88px); padding: 20px 0 50px; }
    .auth-card { padding: 25px 20px; border-radius: 18px; }
    .brand img { width: auto; height: 64px; }
    .content { padding: 25px 14px 50px; }
    .topbar { min-height: 64px; padding: 9px 14px; }
    .nav-toggle span:last-child { display: none; }
    .page-heading { display: grid; margin-bottom: 24px; }
    .page-heading .role-chip { justify-self: start; }
    .panel { padding: 18px 14px; border-radius: 14px; }
    .form-grid, .form-pair, .metric-grid, .card-list, .inventory-grid, .facts { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .record-main { display: grid; }
    .record-main .status, .record-main .button { justify-self: start; }
    .button { width: 100%; }
    .action-row > * { width: 100%; }
    .language a { min-width: 36px; padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.mfa-settings { margin-top: 24px; }
.mfa-settings .field-hint { max-width: 75ch; }
.mfa-settings .secret-box { margin-block: 20px; overflow-wrap: anywhere; }
.mfa-settings .secret-box dd { min-width: 0; }
.mfa-settings .action-row { margin-top: 16px; }