:root {
  --red: #c9272e;
  --red-dark: #9f1e24;
  --red-soft: #fff0f1;
  --nav: #172326;
  --nav-2: #0f181a;
  --bg: #f5f7f8;
  --panel: #ffffff;
  --ink: #162225;
  --muted: #5d6b70;
  --muted-2: #78868a;
  --line: #dce3e5;
  --line-strong: #c8d1d4;
  --green: #16714f;
  --green-soft: #e9f7f0;
  --amber: #7d5708;
  --amber-soft: #fff5d9;
  --blue: #24658a;
  --focus: #2e7dad;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(20, 34, 37, .05);
  --shadow: 0 14px 40px rgba(20, 34, 37, .08);
  --sidebar: 264px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(46, 125, 173, .45);
  outline-offset: 2px;
}
input:focus, select:focus, textarea:focus { border-color: var(--focus) !important; box-shadow: 0 0 0 3px rgba(46, 125, 173, .12); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -70px; padding: 11px 16px; border-radius: 0 0 10px 10px; background: #fff; color: var(--nav); font-weight: 800; transition: top .15s ease; }
.skip-link:focus { top: 0; }

.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; transition: grid-template-columns .2s ease; }
.sidebar { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 18px 14px calc(18px + env(safe-area-inset-bottom)); overflow: auto; color: #fff; background: linear-gradient(180deg, var(--nav-2), var(--nav)); scrollbar-width: thin; scrollbar-color: #415054 transparent; }
.sidebar-head { display: flex; min-height: 68px; align-items: center; gap: 8px; }
.brand, .auth-brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand { flex: 1; min-width: 0; padding: 2px 6px 14px; }
.brand strong, .brand small, .auth-brand strong, .auth-brand small { display: block; }
.brand strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.brand small { margin-top: 1px; color: #aebbc0; font-size: 12px; }
.logo { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: #fff; color: var(--red); box-shadow: inset 0 -5px 0 var(--red); font-size: 15px; font-weight: 950; letter-spacing: -.04em; }
.logo.inverse { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 -4px 0 rgba(255, 255, 255, .82); }
.menu-close { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 28px; cursor: pointer; }
.sidebar-collapse { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: rgba(255, 255, 255, .06); color: #dce4e6; font-size: 20px; line-height: 1; }
.sidebar-collapse:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.environment-badge { display: flex; min-height: 36px; align-items: center; gap: 7px; margin: 0 5px 14px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(255, 255, 255, .04); color: #c5d0d3; font-size: 12px; }
.environment-badge > span:first-child { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #f1b84b; }
.environment-label { min-width: 0; font-size: 10px; line-height: 1.4; }
.environment-badge b { margin-left: auto; color: #fff; font-size: 11px; text-transform: uppercase; }
.nav-tools { display: grid; grid-template-columns: 1fr; gap: 7px; margin-bottom: 10px; }
.nav-tools a { display: flex; min-height: 46px !important; align-items: center; gap: 8px; }
.nav-tools kbd { margin-left: auto; }
.nav-tools a, .sidebar-foot a { min-height: 40px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; color: #dce4e6; font-size: 12px; font-weight: 700; text-decoration: none; }
.nav-tools a:hover, .sidebar-foot a:hover, .nav-tools a[aria-current="page"], .sidebar-foot a[aria-current="page"] { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; }
.nav-tools kbd { float: right; padding: 1px 5px; border: 0; border-radius: 5px; background: #0b1214; color: #93a4a8; font-family: inherit; font-size: 10px; }
.module-nav { flex: 1; }
.nav-group { border-top: 1px solid rgba(255, 255, 255, .065); }
.nav-group summary { display: flex; min-height: 44px; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 9px; color: #f2f5f5; cursor: pointer; font-size: 12px; font-weight: 800; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { background: rgba(255, 255, 255, .045); }
.nav-symbol { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .07); color: #ff9ca0; font-size: 13px; }
.nav-group summary em { margin-left: auto; color: #89999d; font-size: 11px; font-style: normal; font-weight: 700; }
.nav-group a { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 9px; margin: 1px 0; padding: 7px 9px 7px 41px; border-radius: 8px; color: #b8c6c9; font-size: 12px; line-height: 1.3; text-decoration: none; }
.nav-group a:hover, .nav-group a[aria-current="page"] { background: #2a393c; color: #fff; }
.nav-group a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--red); }
.nav-group a small { flex: 0 0 auto; color: #798a8e; font-size: 10px; }
.nav-group .nav-overview { color: #ffa8ab; font-weight: 800; }
.nav-group .nav-more { color: #9bc3cc; }
.sidebar-foot { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sidebar-foot form { margin: 0; }
.sidebar-foot form button { width: 100%; min-height: 40px; justify-content: flex-start; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: transparent; color: #dce4e6; font-size: 12px; }
.sidebar-foot form button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-tool-icon, .nav-foot-icon { display: none; }
.menu-overlay { display: none; }

body.sidebar-collapsed { --sidebar: 78px; }
body.sidebar-collapsed:not(.sidebar-peek) .sidebar { padding-right: 10px; padding-left: 10px; overflow-x: hidden; }
body.sidebar-collapsed:not(.sidebar-peek) .sidebar-head { justify-content: center; }
body.sidebar-collapsed:not(.sidebar-peek) .brand { justify-content: center; padding-right: 0; padding-left: 0; }
body.sidebar-collapsed:not(.sidebar-peek) .brand-copy,
body.sidebar-collapsed:not(.sidebar-peek) .environment-label,
body.sidebar-collapsed:not(.sidebar-peek) .nav-label,
body.sidebar-collapsed:not(.sidebar-peek) .nav-group summary em,
body.sidebar-collapsed:not(.sidebar-peek) .nav-tools kbd { display: none; }
body.sidebar-collapsed:not(.sidebar-peek) .sidebar-collapse { margin-left: 0; }
body.sidebar-collapsed:not(.sidebar-peek) .sidebar-collapse > span[data-sidebar-toggle-icon] { font-size: 22px; }
body.sidebar-collapsed:not(.sidebar-peek) .environment-badge { justify-content: center; margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; }
body.sidebar-collapsed:not(.sidebar-peek) .nav-tools { grid-template-columns: 1fr; }
body.sidebar-collapsed:not(.sidebar-peek) .nav-tools a,
body.sidebar-collapsed:not(.sidebar-peek) .sidebar-foot a,
body.sidebar-collapsed:not(.sidebar-peek) .sidebar-foot form button { justify-content: center; padding-right: 0; padding-left: 0; font-size: 0; }
body.sidebar-collapsed:not(.sidebar-peek) .nav-tool-icon,
body.sidebar-collapsed:not(.sidebar-peek) .nav-foot-icon { display: grid; place-items: center; font-size: 18px; }
body.sidebar-collapsed:not(.sidebar-peek) .nav-group summary { justify-content: center; padding-right: 0; padding-left: 0; }
body.sidebar-collapsed:not(.sidebar-peek) .nav-group > :not(summary) { display: none; }

main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; min-height: 76px; align-items: center; gap: 18px; padding: 10px 24px; border-bottom: 1px solid rgba(220, 227, 229, .9); background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); }
.menu { display: none; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; font-size: 20px; }
.topbar-title { min-width: 170px; }
.topbar-title strong, .topbar-title small { display: block; }
.topbar-title strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title small { margin-top: 1px; color: var(--muted); font-size: 12px; }
.topbar-title small span { color: #a4afb2; }
.global-search { width: min(480px, 42vw); margin: 0 auto; }
.global-search input, .big-search input, .filterbar input, .records input[type="search"] { width: 100%; height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fa; color: var(--ink); }
.global-search input::placeholder, input::placeholder, textarea::placeholder { color: #849196; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions form { margin: 0; }
.user-chip { display: flex; min-height: 48px; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 12px; text-decoration: none; }
.user-chip:hover, .user-chip[aria-current="page"] { background: #f0f3f4; }
.user-chip b, .user-chip small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip b { font-size: 12px; }
.user-chip small { color: var(--muted); font-size: 11px; }
.avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--red-soft); color: var(--red); font-weight: 900; }
.content { width: 100%; max-width: 1640px; margin: 0 auto; padding: 28px; }
.workspace-heading { margin-bottom: 18px; }
.workspace-heading h1 { font-size: clamp(25px, 2.4vw, 34px); letter-spacing: -.035em; }
.session-label { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--muted); text-decoration: none; font-size: 12px; }

h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.18; }
.eyebrow { color: var(--red); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow.light { color: #ffb4b7; }
.button, button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 10px 15px; border: 1px solid transparent; border-radius: 10px; background: var(--nav); color: #fff; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.button:hover, button:hover { background: #263639; }
.button:active, button:active { transform: translateY(1px); }
button:disabled { cursor: wait; opacity: .58; }
.button.primary { background: var(--red); }
.button.primary:hover { background: var(--red-dark); }
.button.ghost, .ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.button.ghost:hover, .ghost:hover { border-color: var(--line-strong); background: #f5f7f8; }
.button.subtle { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .09); color: #fff; }
.small { min-height: 38px; padding: 8px 11px; font-size: 12px; }
.danger { color: #a22228 !important; }

.hero { display: flex; align-items: stretch; justify-content: space-between; gap: 30px; padding: 31px 34px; border: 1px solid #d5dedc; border-radius: 22px; background: linear-gradient(110deg, #ffffff 0%, #f7faf8 66%, #edf3f0 100%); color: var(--ink); box-shadow: var(--shadow-sm); }
.operation-hero { position: relative; overflow: hidden; }
.operation-hero::after { position: absolute; right: 34%; bottom: -72px; width: 220px; height: 220px; border: 1px solid rgba(22, 34, 37, .08); border-radius: 50%; content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; max-width: 730px; }
.hero h1 { max-width: 760px; margin: 8px 0 12px; font-size: clamp(34px, 3.5vw, 51px); letter-spacing: -.06em; line-height: .98; }
.operation-hero h1 em { color: var(--red); font-style: normal; }
.hero p { max-width: 660px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.operation-hero .eyebrow.light { color: var(--red); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero-status { position: relative; z-index: 1; display: flex; align-self: center; min-width: 238px; max-width: 270px; flex-direction: column; justify-content: center; gap: 5px; padding: 17px 18px; border: 1px solid #d5dedc; border-radius: 15px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 24px rgba(20, 34, 37, .04); }
.hero-status-head, .hero-status-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-status-head { margin-bottom: 7px; color: var(--muted-2); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.hero-status b, .hero-status strong, .hero-status small { display: block; }
.hero-status strong { font-size: 16px; letter-spacing: -.02em; }
.hero-status small { margin-top: 1px; color: var(--muted); font-size: 11px; }
.hero-status-foot { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 10px; }
.hero-status-foot span:first-child { color: var(--red); font-weight: 900; letter-spacing: .1em; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #2d9b73; box-shadow: 0 0 0 5px rgba(45, 155, 115, .13); }
.beta-note { display: flex; min-height: 47px; align-items: center; gap: 11px; margin: 13px 0 22px; padding: 9px 13px; border: 1px solid #e2d39d; border-radius: 12px; background: #fffaf0; color: #634a13; }
.beta-note strong, .beta-note span { display: block; }
.beta-note strong { display: inline; margin-right: 7px; font-size: 12px; }
.beta-note div > span { margin-top: 2px; color: #725d2a; font-size: 11px; }
.badge.beta { flex: 0 0 auto; min-height: 23px; padding: 5px 8px; background: #9c711d; color: #fff; }
.section-heading, .panel-head, .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.section-heading { align-items: end; margin: 25px 0 12px; }
.section-heading h2, .panel-head h2, .page-head h1 { margin: 5px 0 0; }
.section-heading h2, .panel-head h2 { font-size: 21px; letter-spacing: -.02em; }
.section-heading > a, .panel-head > a { color: var(--red); font-size: 13px; font-weight: 800; text-decoration: none; }
.section-heading > a:hover, .panel-head > a:hover { text-decoration: underline; }
.page-head { margin-bottom: 18px; }
.badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.page-head h1 { font-size: clamp(27px, 2.7vw, 38px); letter-spacing: -.035em; }
.page-head p, .panel-head p { max-width: 850px; margin: 8px 0 0; color: var(--muted); line-height: 1.6; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.metrics > article, .metrics > div { display: flex; min-height: 94px; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.metrics strong, .metrics span { display: block; }
.metrics strong { font-size: 25px; letter-spacing: -.03em; }
.metrics article div > span, .metrics > div > span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.metric-icon { display: grid !important; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 19px; font-weight: 900; }
.metric-icon.muted-icon { background: var(--amber-soft); color: var(--amber); }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.module-card { position: relative; display: flex; min-height: 156px; align-items: flex-start; gap: 14px; padding: 19px 40px 19px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: inherit; box-shadow: var(--shadow-sm); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.module-card:hover { transform: translateY(-2px); border-color: #c6d0d3; box-shadow: var(--shadow); }
.module-icon, .heading-symbol { display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; background: #f0f3f4; color: var(--red); font-weight: 900; }
.module-icon { width: 46px; height: 46px; font-size: 19px; }
.heading-symbol { display: inline-grid; width: 42px; height: 42px; margin-right: 5px; vertical-align: middle; font-size: 18px; }
.module-card b { color: var(--red); font-size: 12px; }
.module-card h3 { margin: 4px 0 7px; font-size: 18px; }
.module-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.card-arrow { position: absolute; right: 17px; top: 20px; color: #9aa6aa; font-size: 18px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 14px; }
.panel { margin-top: 16px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.flow-list, .activity-list { display: grid; margin-top: 13px; }
.flow-list > a { display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 10px 5px; border-top: 1px solid var(--line); text-decoration: none; }
.flow-list > a:first-child { border-top: 0; }
.flow-list > a:hover strong { color: var(--red); }
.flow-list > a > span:nth-child(2) { flex: 1; }
.flow-list strong, .flow-list small { display: block; }
.flow-list strong { font-size: 13px; }
.flow-list small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.flow-list i { color: #8c999d; font-style: normal; }
.flow-number { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #f0f3f4; color: var(--red); font-size: 12px; font-weight: 900; }
.activity-list > div { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-top: 1px solid var(--line); }
.activity-list > div:first-child { border-top: 0; }
.activity-list strong, .activity-list small { display: block; }
.activity-list strong { font-size: 12px; font-weight: 750; }
.activity-list small { color: var(--muted); font-size: 11px; }
.activity-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }

.module-stats { min-width: 120px; text-align: right; }
.module-stats b, .module-stats span { display: block; }
.module-stats b { font-size: 36px; letter-spacing: -.04em; }
.module-stats span { color: var(--muted); font-size: 12px; }
.filterbar, .source-strip { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.filterbar input { max-width: 520px; }
.filterbar span, .source-strip span, .result-count { color: var(--muted); font-size: 12px; }
.filterbar span { margin-left: auto; }
.source-strip { flex-wrap: wrap; }
.technical-strip { border-style: dashed; background: #fafbfb; }
.screen-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.screen-card { display: flex; min-height: 170px; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: inherit; box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.screen-card:hover { transform: translateY(-2px); border-color: #c4cfd2; box-shadow: var(--shadow); }
.screen-card-top { display: flex; justify-content: space-between; gap: 8px; }
.type, .tier, .badge, .status-pill { display: inline-flex; min-height: 25px; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; background: #edf1f2; color: #526267; font-size: 10px; font-weight: 850; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.tier.good, .badge.green, .status-pill.green { background: var(--green-soft); color: var(--green); }
.tier.warn, .badge.amber, .status-pill.amber { background: var(--amber-soft); color: var(--amber); }
.screen-card h3 { margin: 14px 0 6px; font-size: 16px; }
.screen-card p { flex: 1; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.screen-card footer { display: flex; justify-content: space-between; margin-top: 13px; color: var(--muted-2); font-size: 11px; }
.validation-catalog > summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.validation-catalog > summary::-webkit-details-marker { display: none; }
.validation-catalog > summary b, .validation-catalog > summary small { display: block; }
.validation-catalog > summary small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.validation-catalog > summary i { font-size: 20px; font-style: normal; transition: transform .15s ease; }
.validation-catalog[open] > summary i { transform: rotate(180deg); }
.validation-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.validation-list a { padding: 11px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.validation-list a:hover { border-color: var(--line-strong); background: #f8fafb; }
.validation-list span, .validation-list small { display: block; }
.validation-list span { font-size: 13px; font-weight: 750; }
.validation-list small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.validation-state { display: flex; min-height: 300px; align-items: center; justify-content: center; gap: 22px; padding: 45px; }
.validation-state > div { max-width: 680px; }
.validation-state h2 { margin: 7px 0 10px; font-size: 26px; }
.validation-state p { margin: 0; color: var(--muted); line-height: 1.7; }
.validation-icon { display: grid; width: 76px; height: 76px; flex: 0 0 auto; place-items: center; border-radius: 22px; background: var(--amber-soft); color: var(--amber); font-size: 30px; }

.notice { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 13px 15px; border: 1px solid #ddcc91; border-radius: 12px; background: var(--amber-soft); color: #614807; }
.notice b { flex: 0 0 auto; }
.notice span { color: #715b22; }
.trust { margin: 18px 0; padding: 9px 17px; border-left: 4px solid var(--red); color: #48575b; }
.screen-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr); gap: 14px; align-items: start; }
.screen-layout .panel { margin-top: 0; }
.form-panel fieldset { margin: 0 0 22px; padding: 0; border: 0; }
.form-panel legend { width: 100%; margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 850; }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.field.wide { grid-column: span 2; }
.field > span { color: #2f3d41; font-size: 13px; font-weight: 800; }
.field em { margin-left: 3px; color: var(--red); font-style: normal; }
.field input, .field select, .field textarea, .doc-upload input, .reauth-box input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--ink); }
.field textarea { min-height: 100px; resize: vertical; }
.field small { color: var(--muted); font-size: 11px; }
.sensitive-field > span i { margin-left: 7px; padding: 2px 6px; border-radius: 999px; background: var(--red-soft); color: var(--red-dark); font-size: 9px; font-style: normal; text-transform: uppercase; }
.blocked { padding: 11px; border: 1px dashed #dfaeb1; border-radius: 9px; background: #fff8f8; color: #8e3539; font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.records { position: sticky; top: 94px; max-height: calc(100vh - 116px); max-height: calc(100dvh - 116px); overflow: auto; }
.record { padding: 14px 0; border-top: 1px solid var(--line); }
.record:first-of-type { border-top: 0; }
.record strong, .record small { display: block; }
.record > div > strong { font-size: 13px; }
.record small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.record-data { display: grid; gap: 4px; margin-top: 9px; }
.record-data span { color: var(--muted); font-size: 11px; }
.record-data b { margin-right: 5px; color: #344247; }
.record footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.record footer a, .link { min-height: 32px; padding: 6px 0; border: 0; background: none; color: var(--red); font-size: 12px; font-weight: 800; text-decoration: none; }
.record footer form { display: flex; gap: 5px; margin: 0; }
.inline-actions { display: flex; gap: 6px; }
.approve, .reject { min-height: 36px; padding: 7px 10px; font-size: 11px; }
.approve { background: var(--green); }
.reject { border-color: #e5b9bc; background: #fff; color: #a22228; }
.report-search { max-width: 620px; margin-top: 15px; }
.table { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.table table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 11px 12px; border-bottom: 1px solid var(--line); background: #fff; text-align: left; vertical-align: top; font-size: 12px; }
.table th { position: sticky; top: 0; z-index: 2; background: #f2f5f6; color: #334246; font-size: 11px; letter-spacing: .025em; text-transform: uppercase; }
.table th:first-child, .table td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.table th:first-child { z-index: 3; background: #edf1f2; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafcfc; }
.table tbody tr:hover td:first-child { background: #fafcfc; }
.table tbody tr[hidden] { display: none !important; }
.result-count { white-space: nowrap; }
.evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.evidence-grid div { padding: 11px; border-radius: 10px; background: #f5f7f8; }
.evidence-grid b, .evidence-grid span { display: block; }
.evidence-grid b { font-size: 11px; }
.evidence-grid span { margin-top: 4px; color: var(--muted); font-size: 11px; word-break: break-word; }
.technical-details > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 800; }
.technical-details[open] > summary { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #f2f5f6; color: #46565b; font-size: 10px; }

.doc-upload { display: grid; grid-template-columns: minmax(180px, .6fr) minmax(260px, 1.4fr) auto; gap: 10px; align-items: end; margin-top: 14px; }
.doc-list { display: grid; gap: 0; margin-top: 15px; }
.doc-list a { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; min-height: 58px; padding: 11px 2px; border-top: 1px solid var(--line); text-decoration: none; }
.doc-list a span, .doc-list a small { color: var(--muted); font-size: 11px; }
.doc-list a small { grid-column: 1 / -1; }
.empty, .empty-state { padding: 24px; color: var(--muted); text-align: center; }
.empty-state { display: grid; justify-items: center; }
.empty-state > span { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 9px; border-radius: 16px; background: #f0f3f4; color: var(--red); font-size: 23px; }
.empty-state strong { color: var(--ink); }
.empty-state p { max-width: 560px; margin: 5px 0 0; font-size: 13px; }
.message-card { display: flex; min-height: 320px; align-items: center; justify-content: center; gap: 20px; }
.message-card > div { max-width: 650px; }
.message-card h1 { margin: 7px 0 9px; font-size: 28px; }
.message-card p { margin: 0; color: var(--muted); }
.message-icon { display: grid; width: 64px; height: 64px; flex: 0 0 auto; place-items: center; border-radius: 18px; background: var(--red-soft); color: var(--red); font-size: 26px; font-weight: 900; }

.flow-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.flow-grid a { padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.flow-grid b, .flow-grid strong, .flow-grid span { display: block; }
.flow-grid b { color: var(--red); font-size: 10px; }
.flow-grid strong { margin: 5px 0; font-size: 13px; }
.flow-grid span { color: var(--muted); font-size: 11px; }
.flowline { display: flex; align-items: stretch; gap: 9px; padding: 8px 0; overflow: auto; }
.flowstep { min-width: 200px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }
.flowstep > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; }
.flowstep strong { display: block; margin: 9px 0; font-size: 13px; }
.flowstep a { margin-right: 6px; color: var(--red); font-size: 11px; }
.flowstep small { display: block; margin-top: 9px; color: var(--muted); font-size: 10px; }
.flowline i { display: grid; place-items: center; color: #9aa5a8; }
.big-search { display: flex; gap: 9px; margin: 16px 0; }
.search-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.result { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.result span { color: var(--muted); font-size: 11px; }
.rule { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid var(--line); }
.rule:first-of-type { border-top: 0; }
.rule b { font-size: 13px; }
.rule span { color: var(--muted); font-size: 12px; text-align: right; }

.toast { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; padding: 11px 14px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; }
.toast.ok { border-color: #b9ddcd; background: var(--green-soft); color: #145f43; }
.toast.error { border-color: #efc4c6; background: #fff0f1; color: #8e2329; }
.toast.static { text-align: left; }
.toast button { min-width: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; color: currentColor; font-size: 20px; }
.app-message { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 100; max-width: min(420px, calc(100vw - 40px)); padding: 13px 16px; border-radius: 12px; background: var(--nav); color: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); font-size: 13px; }
.app-message.error { background: #8e2329; }
.app-message.ok { background: var(--green); }

.auth-shell { position: relative; min-height: 100vh; min-height: 100dvh; padding: 40px; background: #eef1ef; }
.auth-shell::before { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255, 255, 255, .48), transparent 46%); content: ""; pointer-events: none; }
.auth-layout { position: relative; display: grid; width: min(1060px, 100%); min-height: min(660px, calc(100vh - 80px)); min-height: min(660px, calc(100dvh - 80px)); grid-template-columns: minmax(320px, .88fr) minmax(430px, 1.12fr); margin: 0 auto; overflow: hidden; border: 1px solid #d6dfdd; border-radius: 22px; background: #fff; box-shadow: 0 24px 70px rgba(24, 39, 42, .11); }
.auth-story { position: relative; display: flex; flex-direction: column; padding: 42px; overflow: hidden; border-right: 1px solid #d9e1df; background: #e5ebe8; color: var(--ink); }
.auth-story::before { position: absolute; right: 32px; bottom: 64px; width: 142px; height: 218px; border-right: 1px solid rgba(23, 35, 38, .14); border-bottom: 1px solid rgba(23, 35, 38, .14); border-radius: 0 0 74px 0; content: ""; transform: skewY(-24deg); }
.auth-story::after { position: absolute; right: 87px; bottom: 147px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(201, 39, 46, .11); content: ""; }
.auth-brand { position: relative; z-index: 1; color: var(--ink); }
.auth-story .logo.inverse { background: var(--nav); color: #fff; box-shadow: inset 0 -4px 0 var(--red); }
.auth-brand strong { font-size: 15px; }
.auth-brand small { color: #657378; font-size: 12px; }
.auth-story-copy { position: relative; z-index: 1; max-width: 390px; margin: auto 0; }
.auth-story-copy h1 { margin: 10px 0 17px; font-size: clamp(36px, 4vw, 53px); letter-spacing: -.055em; }
.auth-story-copy p { max-width: 360px; margin: 0; color: #536267; font-size: 15px; line-height: 1.7; }
.auth-story-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; color: #536267; font-size: 11px; }
.auth-story-footer > span { width: 30px; height: 1px; background: var(--red); }
.auth-environment { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: #68777b; font-size: 11px; }
.auth-environment i { width: 7px; height: 7px; border-radius: 50%; background: #d89522; box-shadow: 0 0 0 4px rgba(216, 149, 34, .12); }
.auth-story > .auth-environment { margin-top: 15px; }
.login-card { display: flex; flex-direction: column; justify-content: center; width: min(460px, 100%); margin: 0 auto; padding: 52px 58px; background: #fff; }
.login-heading { margin-bottom: 25px; }
.login-heading h2 { margin: 8px 0 8px; font-size: 32px; letter-spacing: -.04em; }
.login-heading p { margin: 0; color: var(--muted); }
.mobile-logo { display: none; margin-bottom: 20px; }
.login-environment { display: none; margin-bottom: 22px; }
.passkey-button { display: flex; width: 100%; min-height: 62px; align-items: center; justify-content: flex-start; gap: 11px; padding: 10px 12px; border: 1px solid #ccd7d5; border-radius: 11px; background: #f7f9f8; color: var(--ink); text-align: left; }
.passkey-button:hover { border-color: #9baead; background: #f0f4f2; }
.passkey-button > span:nth-child(2) { flex: 1; }
.passkey-button b, .passkey-button small { display: block; }
.passkey-button b { font-size: 13px; }
.passkey-button small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.passkey-button i { color: #7b898d; font-style: normal; }
.passkey-support { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.passkey-button:disabled { cursor: not-allowed; opacity: .62; }
.passkey-symbol { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--nav); color: #fff; font-size: 18px; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: #7b898d; font-size: 11px; }
.auth-divider::before, .auth-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.login-form { display: grid; gap: 15px; }
.login-submit { width: 100%; min-height: 48px; margin-top: 2px; background: var(--nav); }
.login-submit:hover { background: #263639; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 76px; }
.password-control button { position: absolute; right: 5px; top: 5px; min-height: 34px; padding: 5px 8px; border: 0; background: transparent; color: var(--red); font-size: 11px; }
.caps-lock { color: var(--amber) !important; }
.login-help { display: grid; gap: 2px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: left; }
.login-help strong { color: #435156; }
.privacy-note { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin: 15px 0 0; color: var(--muted); font-size: 10px; }

.account-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; }
.account-grid .panel { margin-top: 0; }
.security-state { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid #b9ddcd; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 800; }
.security-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.profile-identity { display: flex; align-items: center; gap: 13px; }
.profile-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 17px; background: var(--red-soft); color: var(--red); font-size: 22px; font-weight: 900; }
.profile-identity h2, .profile-identity p { margin: 0; }
.profile-identity h2 { font-size: 18px; }
.profile-identity p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.profile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 18px 0 0; }
.profile-facts div { padding: 11px 0; border-top: 1px solid var(--line); }
.profile-facts div:nth-child(odd) { padding-right: 12px; }
.profile-facts dt { color: var(--muted); font-size: 11px; }
.profile-facts dd { margin: 3px 0 0; font-size: 12px; font-weight: 750; }
.security-summary { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, #172326, #293a3d); color: #fff; }
.security-summary h2 { margin: 5px 0 7px; font-size: 22px; }
.security-summary p { margin: 0; color: #c9d5d7; font-size: 13px; }
.security-illustration { display: grid; width: 76px; height: 76px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: rgba(255, 255, 255, .08); color: #ffb0b3; font-size: 33px; }
.security-illustration.small { width: 56px; height: 56px; margin-bottom: 7px; border-color: var(--line); background: #f0f3f4; color: var(--red); font-size: 25px; }
.passkey-panel .panel-head { align-items: center; }
.passkey-list { display: grid; margin-top: 15px; }
.passkey-item { display: flex; min-height: 78px; align-items: center; gap: 13px; padding: 13px 2px; border-top: 1px solid var(--line); }
.passkey-item:first-child { border-top: 0; }
.passkey-item > div { flex: 1; }
.passkey-item strong, .passkey-item small, .passkey-item div > span { display: block; }
.passkey-item strong { font-size: 13px; }
.passkey-item small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.passkey-item div > span { width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 10px; }
.passkey-item-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: #eef2f3; color: var(--nav); font-size: 20px; }
.reauth-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 15px; border: 1px solid #e1cf94; border-radius: 12px; background: var(--amber-soft); }
.reauth-box p { max-width: 650px; margin: 3px 0 0; color: #715b22; font-size: 12px; }
.reauth-box form { display: flex; gap: 8px; }
.reauth-box input { min-width: 210px; }
.domain-advisory { display: flex; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 11px; background: #f2f5f6; color: var(--muted); }
.domain-advisory > span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #dce4e6; color: var(--ink); font-size: 11px; font-weight: 900; }
.domain-advisory p { margin: 0; font-size: 11px; }
.domain-advisory strong { display: block; color: var(--ink); }
.domain-advisory code { color: var(--ink); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-form { display: grid; gap: 13px; margin-top: 16px; }
.settings-form button { justify-self: start; }
.session-current { display: flex; align-items: center; gap: 11px; margin: 17px 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.session-current > span { color: var(--green); }
.session-current > div { min-width: 0; flex: 1; }
.session-current strong, .session-current small { display: block; }
.session-current small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.session-current > b { color: var(--green); font-size: 10px; text-transform: uppercase; }

.admin-metrics { margin-bottom: 14px; }
.admin-metrics > article { display: block; min-height: 82px; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 14px; }
.admin-grid .panel { margin-top: 0; }
.user-list { display: grid; margin-top: 13px; }
.user-list article { display: flex; min-height: 61px; align-items: center; gap: 11px; padding: 10px 2px; border-top: 1px solid var(--line); }
.user-list article:first-child { border-top: 0; }
.user-list article > div { flex: 1; }
.user-list strong, .user-list small { display: block; }
.user-list small { color: var(--muted); font-size: 11px; }
.security-guidance ul { padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.role-card { padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.role-card > b, .role-card > small { display: block; }
.role-card > small { margin: 3px 0 10px; color: var(--muted); font-size: 11px; }

.selection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.select-card { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; }
.select-card strong, .select-card small { display: block; }
.select-card small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.bonus-table input[type="text"], .bonus-table input:not([type]) { min-width: 180px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.score-check { width: 20px; height: 20px; }
.score-value { color: var(--green); font-weight: 850; }

@media (max-width: 1280px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .validation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-layout { grid-template-columns: 1fr; }
  .records { position: static; max-height: none; }
}

@media (max-width: 980px) {
  .auth-shell { padding: 0; }
  .auth-layout { min-height: 100vh; min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .auth-story { display: none; }
  .login-card { max-width: 480px; padding: 34px; }
  .mobile-logo { display: grid; }
  .login-environment { display: flex; }
  .dashboard-grid, .account-grid, .settings-grid, .admin-grid { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .global-search { display: none; }
}

@media (max-width: 820px) {
  body.menu-open { overflow: hidden; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: calc(-1 * var(--sidebar) - 18px); width: var(--sidebar); max-width: calc(100vw - 46px); visibility: hidden; box-shadow: none; transition: left .2s ease; }
  .menu-open .sidebar { left: 0; visibility: visible; box-shadow: 18px 0 50px rgba(0, 0, 0, .25); }
  .menu-close { display: inline-grid; place-items: center; }
  .sidebar-collapse { display: none; }
  .menu-overlay { position: fixed; inset: 0; z-index: 35; display: block; border: 0; border-radius: 0; background: rgba(5, 12, 14, .52); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; }
  .menu-open .menu-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu { display: inline-grid; place-items: center; }
  .topbar { min-height: 68px; gap: 11px; padding: 9px 12px; padding-top: calc(9px + env(safe-area-inset-top)); }
  .topbar-title { min-width: 0; flex: 1; }
  .global-search, .install-button, .user-chip > span:last-child, .topbar-actions > form { display: none; }
  .user-chip { min-height: 44px; padding: 4px; }
  .content { padding: 16px; }
  .field input, .field select, .field textarea, .big-search input, .filterbar input { font-size: 16px; }
  .sidebar a, .sidebar button, .nav-group summary { min-height: 44px; }
  .hero { align-items: flex-start; flex-direction: column; padding: 24px; }
  .hero-status { width: 100%; min-width: 0; align-self: stretch; }
  .module-grid, .screen-grid, .search-cols, .validation-list { grid-template-columns: 1fr; }
  .field-grid, .evidence-grid { grid-template-columns: 1fr; }
  .field.wide { grid-column: auto; }
  .flow-grid { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .module-stats { text-align: left; }
  .validation-state { align-items: flex-start; flex-direction: column; padding: 28px; }
  .doc-upload { grid-template-columns: 1fr; align-items: stretch; }
  .role-grid, .selection-grid { grid-template-columns: 1fr; }
  .reauth-box { align-items: stretch; flex-direction: column; }
  .reauth-box form { align-items: stretch; flex-direction: column; }
  .reauth-box input { min-width: 0; }
}

@media (max-width: 560px) {
  .content { padding: 13px; }
  .topbar-title small { display: none; }
  .hero { border-radius: 18px; }
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 14px; }
  .hero-actions { width: 100%; }
  .hero-actions .button { width: 100%; }
  .beta-note { align-items: flex-start; }
  .metrics { grid-template-columns: 1fr; }
  .metrics > article, .metrics > div { min-height: 78px; }
  .module-card { min-height: 140px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .panel { padding: 17px; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .filterbar { align-items: stretch; flex-direction: column; }
  .filterbar span { margin-left: 0; }
  .login-card { padding: 26px 22px; }
  .login-heading h2 { font-size: 27px; }
  .profile-facts { grid-template-columns: 1fr; }
  .security-summary { align-items: flex-start; flex-direction: column; }
  .passkey-item { align-items: flex-start; flex-wrap: wrap; }
  .passkey-item form { width: 100%; }
  .passkey-item form button { width: 100%; }
  .settings-form button { width: 100%; }
}

/* A compact rail grows over the page on hover or keyboard focus. It does not
   push tables around, and returns to its rail once focus/pointer leave. */
@media not all and (max-width: 820px) {
  body.sidebar-peek .sidebar { position: fixed; left: 0; top: 0; width: 264px; box-shadow: 16px 0 40px #0003; }
  body.sidebar-peek main { grid-column: 2; }
  body.sidebar-collapsed:not(.sidebar-peek) .sidebar-head { flex-direction: column; gap: 0; }
  body.sidebar-collapsed:not(.sidebar-peek) .sidebar-collapse { display: none; }
  body.sidebar-collapsed:not(.sidebar-peek) .environment-badge { border: 0; background: transparent; gap: 7px; }
  body.sidebar-collapsed:not(.sidebar-peek) .environment-badge b { margin: 0; font-size: 9px; }
}

/* Quiet work surfaces: fewer decorative panels, consistent spacing. */
.beta-note { border: 0; border-left: 2px solid var(--line-strong); border-radius: 0; background: transparent; padding: 5px 12px; }
.badge.beta { display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; line-height: 1; border-radius: 5px; }
.module-card { min-height: 132px; border-radius: 12px; box-shadow: none; }
.metrics > article, .metrics > div { border-radius: 12px; box-shadow: none; }
@media (min-width: 1101px) { .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.auth-layout { max-width: 940px; min-height: 600px; border-radius: 16px; box-shadow: 0 12px 40px #18272a0a; }
.auth-story-copy h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.14; letter-spacing: -.045em; }
.auth-story-copy p { max-width: 240px; }
.auth-story::before, .auth-story::after { display: none; }
.login-card { width: 100%; max-width: 440px; padding: 40px; }
@media (max-width: 560px) {
  .login-card { padding: 28px 24px; }
  .auth-layout { min-height: 100dvh; }
}
@media (pointer: coarse) {
  button, .button, .sidebar a, .nav-group summary { min-height: 44px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #101719;
    --panel: #172326;
    --ink: #edf3f1;
    --muted: #aec0c0;
    --muted-2: #90a3a4;
    --line: #2d3d40;
    --line-strong: #435357;
    --red: #ff858b;
    --green: #7cd8aa;
    --amber: #efca78;
    --blue: #84c7ed;
    --red-soft: #3b2023;
    --green-soft: #153b2d;
    --amber-soft: #3b3016;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .24);
    --shadow: 0 14px 40px rgba(0, 0, 0, .3);
  }
  body { background: var(--bg); color: var(--ink); }
  .topbar { border-bottom-color: rgba(45, 61, 64, .9); background: rgba(15, 24, 26, .9); }
  .menu { border-color: var(--line); background: var(--panel); color: var(--ink); }
  .button.ghost, .ghost { border-color: var(--line); background: var(--panel); color: var(--ink); }
  .button.ghost:hover, .ghost:hover { border-color: var(--line-strong); background: #1e2d30; }
  .hero { border-color: #304145; background: linear-gradient(110deg, #172326 0%, #1a292b 66%, #203436 100%); }
  .hero-status { border-color: #3a4c4f; background: rgba(14, 23, 25, .72); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
  .beta-note { border-color: #675422; background: transparent; color: #ecdca8; }
  .beta-note div > span { color: #c9b87f; }
  .metrics > article, .metrics > div, .module-card, .panel, .filterbar, .source-strip, .screen-card, .flowstep { background: var(--panel); }
  .module-card:hover, .screen-card:hover { border-color: var(--line-strong); }
  .module-icon, .heading-symbol, .flow-number, .empty-state > span { background: #243336; }
  .table th, .table td { background: var(--panel); }
  .table th { background: #1e2e31; color: #d3dfde; }
  .table th:first-child { background: #223336; }
  .table tbody tr:hover td, .table tbody tr:hover td:first-child { background: #1d2b2e; }
  .validation-list a:hover { background: #1d2b2e; }
  .technical-strip, .domain-advisory { background: #1b292c; }
  .notice { border-color: #675422; background: var(--amber-soft); color: #ecdca8; }
  .notice span, .reauth-box p { color: #c9b87f; }
  .blocked { border-color: #6c3a3d; background: #2b1b1d; color: #f1b6b8; }
  .field input, .field select, .field textarea, .doc-upload input, .reauth-box input,
  .global-search input, .big-search input, .filterbar input, .records input[type="search"] { border-color: var(--line-strong); background: #1b292c; color: var(--ink); }
  .field > span { color: #d6e1e0; }
  .auth-shell { background: #101719; }
  .auth-shell::before { background: linear-gradient(120deg, rgba(255, 255, 255, .05), transparent 46%); }
  .auth-layout { border-color: #304145; background: var(--panel); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
  .auth-story { border-right-color: #304145; background: #1e2c2f; }
  .auth-story-copy p, .auth-story-footer { color: #aec0c0; }
  .auth-brand small { color: #9aadae; }
  .login-card { background: var(--panel); }
  .passkey-button { border-color: #3d4d50; background: #1b292c; }
  .passkey-button:hover { border-color: #627477; background: #223336; }
  .auth-divider { color: #90a3a4; }
  .login-help strong { color: #d6e1e0; }
  .privacy-note { color: #90a3a4; }
  .profile-avatar, .passkey-item-icon, .security-illustration.small { background: #243336; }
  .user-chip:hover, .user-chip[aria-current="page"] { background: #1e2d30; }
  .session-current { background: #1b292c; }
  .logo { color: #c9272e; box-shadow: inset 0 -5px 0 #c9272e; }
  .toast.error { border-color: #74393d; background: #351f23; color: #ffbec2; }
  .toast.ok { border-color: #37694e; background: #173528; color: #a6e8c5; }
  .reject { background: var(--panel); color: #ffadb2; border-color: #77454a; }
  .approve { background: var(--green-soft); color: var(--green); border-color: #37694e; }
  .button.primary { background: #b72830; color: #fff; }
  .sidebar-foot form button { background: transparent !important; }
  .login-submit { background: var(--action-bg, #b63d48); color: var(--action-ink, #fff); }
}

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

@media print {
  .sidebar, .topbar, .menu-overlay, .actions, .app-message { display: none !important; }
  .shell { display: block; }
  .content { max-width: none; padding: 0; }
  .panel { box-shadow: none; }
}