:root {
  --ink: #102829;
  --ink-soft: #183738;
  --ink-faint: #275052;
  --paper: #f3f0e7;
  --paper-deep: #e6e2d7;
  --white: #fffdf7;
  --coral: #ff6b4a;
  --coral-deep: #d9472c;
  --mint: #63d6b3;
  --gold: #e8bb55;
  --red: #d94b3d;
  --line: rgba(16, 40, 41, .14);
  --shadow: 0 20px 55px rgba(16, 40, 41, .09);
  --radius: 18px;
  --font-display: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --font-body: "Aptos", "Gill Sans", "Trebuchet MS", sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Code", "Courier New", monospace;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--font-mono); }
button { color: inherit; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; flex-direction: column; padding: 28px 18px 20px; overflow: hidden; color: #f7f2e8; background: var(--ink); }
.sidebar::before { content: ""; position: absolute; width: 260px; height: 260px; right: -150px; bottom: 70px; border: 1px solid rgba(99, 214, 179, .18); border-radius: 50%; box-shadow: 0 0 0 45px rgba(99, 214, 179, .035), 0 0 0 90px rgba(99, 214, 179, .025); }
.brand { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 10px 28px; }
.brand > span:last-child, .login-brand > span:last-child { display: flex; flex-direction: column; line-height: 1; letter-spacing: .12em; }
.brand strong, .login-brand strong { font: 800 17px/1 var(--font-display); }
.brand small, .login-brand small { margin-top: 6px; color: var(--mint); font: 700 8px/1 var(--font-mono); letter-spacing: .28em; }
.brand-mark { width: 35px; height: 35px; position: relative; display: grid; place-items: center; transform: rotate(30deg); }
.brand-mark i { position: absolute; display: block; border: 2px solid var(--coral); border-radius: 3px; }
.brand-mark i:nth-child(1) { inset: 2px 12px; }
.brand-mark i:nth-child(2) { inset: 8px 7px; border-color: var(--mint); }
.brand-mark i:nth-child(3) { inset: 14px 2px; border-color: var(--paper); }
.nav { position: relative; display: flex; flex-direction: column; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 0 13px; border-radius: 10px; color: rgba(255, 253, 247, .62); font-weight: 650; letter-spacing: .01em; transition: .18s ease; }
.nav-link:hover { color: var(--white); background: rgba(255, 255, 255, .05); transform: translateX(2px); }
.nav-link.active { color: var(--white); background: rgba(99, 214, 179, .13); box-shadow: inset 3px 0 var(--mint); }
.nav-icon { color: var(--coral); font: 700 9px/1 var(--font-mono); letter-spacing: .08em; }
.sidebar-foot { position: relative; margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 16px 12px 3px; border-top: 1px solid rgba(255, 255, 255, .1); }
.sidebar-foot > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sidebar-foot small { color: rgba(255, 255, 255, .45); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.sidebar-foot strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(99, 214, 179, .13); animation: pulse 2s ease-in-out infinite; }

.main { min-width: 0; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 4vw, 56px); border-bottom: 1px solid var(--line); background: rgba(243, 240, 231, .88); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.topbar-context { display: flex; gap: 10px; align-items: center; color: var(--ink-faint); font: 700 10px/1 var(--font-mono); letter-spacing: .1em; }
.eyebrow, .kicker { color: var(--ink-faint); font: 800 10px/1.2 var(--font-mono); letter-spacing: .17em; }
.kicker { color: var(--coral-deep); }
.separator { opacity: .35; }
.quiet-button, .menu-button { padding: 8px 0; border: 0; background: none; cursor: pointer; color: var(--ink-faint); font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.quiet-button:hover { color: var(--coral-deep); }
.menu-button { display: none; }
.content { width: min(1520px, 100%); margin: 0 auto; padding: 43px clamp(22px, 4vw, 56px) 70px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 30px; animation: rise .45s ease both; }
.page-head h1 { margin: 7px 0 4px; font: 750 clamp(34px, 4vw, 53px)/1.03 var(--font-display); letter-spacing: -.045em; }
.page-head p { margin: 0; color: var(--ink-faint); font-size: 16px; }
.head-actions { display: flex; gap: 10px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 750; transition: .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--white); background: var(--coral); box-shadow: 0 8px 20px rgba(217, 71, 44, .18); }
.button-primary:hover { background: var(--coral-deep); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.35); }
.button-danger { color: white; background: var(--red); }
.button-wide { width: 100%; min-height: 51px; justify-content: space-between; padding: 0 22px; }
.button-small { min-height: 37px; padding: 0 14px; font-size: 13px; }

.status-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.4); font: 700 12px var(--font-mono); }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; }
.status-good span { background: var(--mint); box-shadow: 0 0 0 4px rgba(99,214,179,.18); }
.status-bad span { background: var(--red); box-shadow: 0 0 0 4px rgba(217,75,61,.13); }
.hero-status { min-height: 270px; position: relative; display: grid; grid-template-columns: 270px 1fr 1fr; align-items: center; overflow: hidden; padding: 25px clamp(28px, 4vw, 56px); color: var(--white); background: var(--ink); border-radius: 24px; box-shadow: var(--shadow); animation: rise .55s .06s ease both; }
.hero-status::after { content: ""; position: absolute; inset: 0; opacity: .13; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, black, transparent 70%); }
.radar { width: 205px; height: 205px; position: relative; border: 1px solid rgba(99,214,179,.25); border-radius: 50%; }
.radar-ring { position: absolute; border: 1px solid rgba(99,214,179,.18); border-radius: 50%; }
.ring-one { inset: 31px; }.ring-two { inset: 66px; }
.radar-core { position: absolute; inset: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 10px rgba(255,107,74,.14), 0 0 30px var(--coral); }
.radar-sweep { position: absolute; inset: 50% 50% 50% 0; transform-origin: right center; background: linear-gradient(0deg, transparent, rgba(99,214,179,.28)); clip-path: polygon(100% 50%, 0 0, 0 100%); animation: sweep 4s linear infinite; }
.hero-status-copy { position: relative; z-index: 1; }
.hero-status-copy .eyebrow { color: var(--mint); }
.hero-status-copy strong { display: block; margin: 10px 0 0; font: 750 clamp(65px, 8vw, 108px)/.9 var(--font-display); letter-spacing: -.07em; }
.hero-status-copy p { margin: 13px 0 0; color: rgba(255,255,255,.58); }
.hero-facts { position: relative; z-index: 1; margin: 0; display: grid; gap: 18px; padding-left: 45px; border-left: 1px solid rgba(255,255,255,.13); }
.hero-facts div { display: grid; grid-template-columns: 85px 1fr; gap: 10px; }
.hero-facts dt { color: rgba(255,255,255,.45); font-size: 12px; }
.hero-facts dd { margin: 0; font: 600 13px var(--font-mono); overflow-wrap: anywhere; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 17px 0; }
.metric-grid.four { grid-template-columns: repeat(4, 1fr); }
.metric-card { min-height: 125px; position: relative; display: flex; align-items: center; gap: 18px; overflow: hidden; padding: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,247,.72); animation: rise .5s ease both; }
.metric-card:nth-child(2) { animation-delay: .05s; }.metric-card:nth-child(3) { animation-delay: .1s; }.metric-card:nth-child(4) { animation-delay: .15s; }
.metric-number { font: 750 39px/1 var(--font-display); letter-spacing: -.05em; }
.metric-card div { display: flex; flex-direction: column; }
.metric-card strong { font-size: 14px; }.metric-card small { color: var(--ink-faint); }
.metric-index { position: absolute; right: -3px; bottom: -16px; color: rgba(16,40,41,.05); font: 800 65px/1 var(--font-display); }
.accent-coral { border-top: 3px solid var(--coral); }.accent-mint { border-top: 3px solid var(--mint); }.accent-gold { border-top: 3px solid var(--gold); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,247,.78); box-shadow: 0 8px 28px rgba(16,40,41,.035); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.panel-head.padded { padding: 24px 25px 0; }
.panel-head h2 { margin: 5px 0 0; font: 750 23px/1.1 var(--font-display); letter-spacing: -.025em; }
.panel-head a { color: var(--coral-deep); font-weight: 700; }
.panel-tag, .record-count { color: var(--ink-faint); font: 700 9px var(--font-mono); letter-spacing: .12em; }
.split-grid > .panel { padding: 27px; }
.resource-list { display: grid; gap: 22px; }
.resource-row > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; }
.resource-row span { color: var(--ink-faint); }.resource-row strong { font-family: var(--font-mono); font-size: 12px; }
.meter { display: block; width: 100%; height: 6px; appearance: none; border: 0; border-radius: 20px; overflow: hidden; background: var(--paper-deep); }
.meter::-webkit-progress-bar { background: var(--paper-deep); }.meter::-webkit-progress-value { background: linear-gradient(90deg, var(--mint), var(--coral)); border-radius: 20px; }.meter::-moz-progress-bar { background: linear-gradient(90deg, var(--mint), var(--coral)); }
.activity-list { display: grid; gap: 18px; }
.connection-panel { margin-top: 17px; }
.activity-item { display: flex; gap: 12px; align-items: flex-start; }
.activity-mark { width: 9px; height: 9px; margin-top: 6px; flex: 0 0 auto; border: 2px solid var(--coral); border-radius: 50%; }
.activity-item div { display: flex; flex-direction: column; }.activity-item strong { font-size: 13px; }.activity-item small { color: var(--ink-faint); }

.flash-stack { position: fixed; top: 82px; right: 28px; z-index: 60; width: min(430px, calc(100vw - 40px)); display: grid; gap: 8px; }
.flash { display: flex; justify-content: space-between; gap: 14px; padding: 13px 15px; border: 1px solid; border-radius: 10px; background: var(--white); box-shadow: var(--shadow); }
.flash button { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; }
.flash-success { border-color: rgba(40,146,111,.35); }.flash-error { border-color: rgba(217,75,61,.4); }.flash-warning { border-color: rgba(232,187,85,.55); }
.notice { margin: 0 0 18px; padding: 14px 17px; border-left: 4px solid; border-radius: 5px 12px 12px 5px; background: rgba(255,255,255,.5); }
.notice-warning { border-color: var(--gold); }.notice-danger { border-color: var(--coral); }

.table-panel { overflow: hidden; }
.table-toolbar { min-height: 75px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; border-bottom: 1px solid var(--line); }
.search-field { width: min(420px, 70%); display: flex; align-items: center; gap: 9px; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 16px 20px; border-bottom: 1px solid rgba(16,40,41,.09); text-align: left; }
th { color: var(--ink-faint); background: rgba(230,226,215,.38); font: 750 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
td { font-size: 13px; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: rgba(99,214,179,.035); }
.align-right { text-align: right; }.actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }.actions form { display: inline-flex; }
.inline-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }.inline-actions form { display: inline-flex; }
.identity-cell { display: flex; align-items: center; gap: 11px; }.identity-cell > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--ink); font-weight: 800; }
.state { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font: 750 9px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }.state-on { color: #19684f; background: rgba(99,214,179,.19); }.state-on::before { background: var(--mint); }.state-off { color: #973527; background: rgba(255,107,74,.14); }.state-off::before { background: var(--coral); }
.mini-button, .icon-button { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.mini-button:hover { border-color: var(--coral); color: var(--coral-deep); }.icon-button { width: 30px; height: 30px; padding: 0; color: var(--red); font-size: 20px; }
.empty-state { min-height: 190px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; color: var(--ink-faint); white-space: normal; }.empty-state.compact { min-height: 100px; }.empty-state strong { color: var(--ink); font-size: 16px; }
.muted-row { opacity: .5; }

.form-layout { display: grid; gap: 17px; }
.form-panel { display: grid; grid-template-columns: 55px minmax(170px, 260px) 1fr; gap: 25px; padding: 28px; }
.section-number { color: var(--coral); font: 800 11px var(--font-mono); }
.form-section-copy h2 { margin: 0 0 7px; font: 750 23px var(--font-display); }.form-section-copy p { margin: 0; color: var(--ink-faint); }
.form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }.form-fields.single-column { grid-template-columns: 1fr; }.form-fields.three-columns { grid-template-columns: repeat(3, 1fr); }.field-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 7px; }.field > span { font-size: 12px; font-weight: 750; }.field small { color: var(--ink-faint); font-size: 11px; }
.field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); border: 1px solid rgba(16,40,41,.18); border-radius: 8px; outline: 0; background: rgba(255,255,255,.62); transition: .15s ease; }.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(99,214,179,.13); }
.input-action { display: flex; }.input-action input { border-radius: 8px 0 0 8px; }.input-action button { padding: 0 13px; border: 1px solid var(--line); border-left: 0; background: var(--paper-deep); cursor: pointer; font-size: 11px; font-weight: 750; }.input-action button:last-child { border-radius: 0 8px 8px 0; }
.check-field { display: flex; align-items: center; gap: 9px; font-weight: 650; }.check-field input { width: 17px; height: 17px; accent-color: var(--coral); }
.form-actions { display: flex; justify-content: flex-end; padding: 5px 0 15px; }
.standalone-form { padding: 28px; }.standalone-form .form-actions { padding-bottom: 0; margin-top: 22px; }

.credential-card { position: relative; overflow: hidden; padding: 30px; border-radius: 21px; color: var(--white); background: var(--ink); box-shadow: var(--shadow); }
.credential-stripe { position: absolute; width: 240px; height: 600px; top: -200px; right: -60px; transform: rotate(28deg); background: linear-gradient(90deg, transparent, rgba(99,214,179,.09), rgba(255,107,74,.17)); }
.credential-head { position: relative; display: flex; justify-content: space-between; margin-bottom: 27px; }.credential-head .eyebrow { color: var(--mint); }
.credential-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.12); }
.credential-grid > div { min-height: 105px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 20px; background: rgba(16,40,41,.96); }
.credential-grid span { color: rgba(255,255,255,.45); font-size: 11px; }.credential-grid strong { margin-top: 6px; font: 600 15px var(--font-mono); overflow-wrap: anywhere; }.credential-grid button { position: absolute; right: 12px; top: 12px; border: 0; color: var(--mint); background: none; cursor: pointer; font: 700 9px var(--font-mono); text-transform: uppercase; }.credential-secret { grid-column: 1 / -1; }.credential-secret strong { padding-right: 90px; color: var(--gold); }
.instructions { margin-top: 17px; padding: 27px; }.instruction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.instruction-grid article { padding-left: 17px; border-left: 2px solid var(--paper-deep); }.instruction-grid article > span { color: var(--coral-deep); font: 800 9px var(--font-mono); letter-spacing: .13em; }.instruction-grid h3 { margin: 7px 0 10px; font: 750 16px var(--font-display); }.instruction-grid ol { margin: 0; padding-left: 18px; color: var(--ink-faint); font-size: 13px; }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 20px; border: 1px dashed rgba(217,75,61,.35); border-radius: 12px; }.danger-zone div { display: flex; flex-direction: column; }.danger-zone span { color: var(--ink-faint); font-size: 12px; }
.maintenance-zone form { flex: 0 0 auto; }

.firewall-banner { min-height: 170px; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 25px; margin-bottom: 17px; padding: 24px 32px; overflow: hidden; border-radius: var(--radius); color: var(--white); background: var(--ink); }.firewall-banner.restricted { background: linear-gradient(120deg, var(--ink), #532e27); }.firewall-banner strong { display: block; margin: 6px 0; font: 800 30px var(--font-display); letter-spacing: .04em; }.firewall-banner p { margin: 0; color: rgba(255,255,255,.55); }.firewall-banner a { position: relative; color: var(--mint); font-weight: 750; }
.shield-graphic { width: 100px; height: 115px; position: relative; margin: auto; clip-path: polygon(50% 0, 93% 17%, 84% 73%, 50% 100%, 16% 73%, 7% 17%); background: rgba(99,214,179,.12); border: 1px solid var(--mint); }.shield-graphic i { position: absolute; left: 50%; top: 50%; height: 2px; background: var(--mint); transform-origin: left; }.shield-graphic i:nth-child(1) { width: 38px; transform: rotate(0); }.shield-graphic i:nth-child(2) { width: 34px; transform: rotate(120deg); }.shield-graphic i:nth-child(3) { width: 34px; transform: rotate(240deg); }
.rule-action { font: 800 9px var(--font-mono); }.action-accept { color: #197151; }.action-drop, .action-reject { color: var(--red); }
.rule-builder { margin-top: 17px; }.rule-builder summary { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px; cursor: pointer; list-style: none; }.rule-builder summary > span { display: flex; flex-direction: column; gap: 5px; }.rule-builder summary > i, .user-card summary i { font: 300 27px var(--font-display); transition: .2s; }.rule-builder[open] summary > i, .user-card details[open] summary i { transform: rotate(45deg); }.rule-builder form { padding: 4px 26px 25px; border-top: 1px solid var(--line); }.rule-builder .form-fields { padding-top: 22px; }

.chart-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 17px; }.chart-panel { min-width: 0; padding: 27px; }.chart-wide { grid-column: 1 / -1; }.chart-panel canvas { width: 100%; display: block; }.chart-legend { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font: 700 9px var(--font-mono); text-transform: uppercase; }.chart-legend i { width: 8px; height: 8px; border-radius: 50%; }.legend-coral { background: var(--coral); }.legend-mint { background: var(--mint); }.legend-gold { background: var(--gold); }
.user-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.user-card { position: relative; padding: 23px; }.user-card.disabled { opacity: .55; }.user-avatar { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 16px; color: var(--white); background: var(--ink); font: 750 17px var(--font-display); }.user-main { display: flex; flex-direction: column; }.user-main strong { font: 750 18px var(--font-display); }.user-main code { color: var(--ink-faint); font-size: 11px; }.role-badge { position: absolute; right: 18px; top: 18px; padding: 5px 8px; border-radius: 30px; font: 750 8px var(--font-mono); text-transform: uppercase; }.role-admin { color: #9c3825; background: rgba(255,107,74,.15); }.role-operator { color: #17644d; background: rgba(99,214,179,.18); }.role-viewer { background: var(--paper-deep); }.user-card dl { margin: 20px 0; padding: 13px 0; border-block: 1px solid var(--line); }.user-card dl div { display: flex; justify-content: space-between; gap: 10px; }.user-card dt { color: var(--ink-faint); font-size: 11px; }.user-card dd { margin: 0; font-size: 11px; }.user-card summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; color: var(--coral-deep); font-weight: 750; }.user-card details form { display: grid; gap: 13px; margin-top: 15px; }
.account-grid { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(350px,1.35fr); gap: 17px; }.account-profile, .password-form { padding: 28px; }.account-profile .large { width: 70px; height: 70px; font-size: 22px; }.account-profile h2 { margin: 9px 0 0; font: 750 27px var(--font-display); }.account-profile > code { color: var(--ink-faint); }.account-profile dl { margin: 28px 0 0; display: grid; gap: 10px; }.account-profile dl div { display: flex; justify-content: space-between; gap: 15px; padding-top: 10px; border-top: 1px solid var(--line); }.account-profile dt { color: var(--ink-faint); }.account-profile dd { margin: 0; text-align: right; }.password-form { display: grid; gap: 17px; }.password-form .panel-head { margin-bottom: 3px; }.password-form .button { justify-self: end; }
.audit-layout { grid-template-columns: 1.25fr .75fr; align-items: start; }.audit-layout > .panel { padding: 0; }.log-panel .panel-head { padding: 25px 25px 0; }.log-panel pre { max-height: 660px; margin: 0; padding: 20px; overflow: auto; color: #b8efd9; background: #0a2021; font-size: 10px; white-space: pre-wrap; }.log-panel .notice { margin: 0 20px 15px; }
.error-page { min-height: 65vh; display: grid; place-items: center; align-content: center; gap: 15px; text-align: center; }.error-page > span { color: var(--coral); font: 800 90px/1 var(--font-display); }.error-page h1 { margin: 0 0 15px; }

.login-page { min-height: 100vh; color: var(--ink); background: var(--paper); }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(400px, .75fr); }
.login-story { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: clamp(30px, 5vw, 70px); color: var(--white); background: var(--ink); }
.login-story::before { content: ""; position: absolute; width: min(55vw, 720px); aspect-ratio: 1; right: -15%; bottom: -35%; border: 1px solid rgba(99,214,179,.21); border-radius: 50%; box-shadow: 0 0 0 80px rgba(99,214,179,.035), 0 0 0 160px rgba(255,107,74,.025); }
.login-grid { position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(120deg, black, transparent 72%); }
.login-brand { position: relative; display: flex; align-items: center; gap: 14px; }.brand-mark-large { width: 48px; height: 48px; }.login-brand strong { font-size: 21px; }.login-copy { position: relative; margin: auto 0; max-width: 760px; }.login-copy .kicker { color: var(--mint); }.login-copy h1 { margin: 18px 0 23px; font: 730 clamp(48px, 6.3vw, 92px)/.98 var(--font-display); letter-spacing: -.055em; }.login-copy h1 em { color: var(--coral); font-style: normal; }.login-copy p { max-width: 590px; color: rgba(255,255,255,.62); font-size: clamp(16px, 1.5vw, 20px); }.signal-card { position: relative; display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5); font: 700 9px var(--font-mono); letter-spacing: .12em; }.signal-card div:first-child { display: flex; align-items: center; gap: 10px; }
.login-panel { display: grid; place-items: center; padding: 35px; background: var(--paper); }.login-form { width: min(390px, 100%); }.form-heading { margin-bottom: 31px; }.form-heading h2 { margin: 9px 0 8px; font: 750 34px var(--font-display); letter-spacing: -.04em; }.form-heading p { margin: 0; color: var(--ink-faint); }.login-form > .field { margin: 17px 0; }.login-form .button { margin-top: 10px; }.form-footnote { margin-top: 24px; color: var(--ink-faint); font-size: 11px; text-align: center; }
.login-mobile-brand { display: none; align-items: center; gap: 11px; margin-bottom: 50px; }.login-mobile-brand > span:last-child { display: flex; flex-direction: column; font-family: var(--font-display); letter-spacing: .12em; }.login-mobile-brand small { margin-top: 5px; color: var(--coral-deep); font: 700 8px var(--font-mono); letter-spacing: .2em; }
.sidebar-scrim { display: none; }

@keyframes pulse { 50% { opacity: .55; box-shadow: 0 0 0 7px rgba(99,214,179,0); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1120px) {
  .hero-status { grid-template-columns: 210px 1fr; }.hero-facts { display: none; }
  .user-grid { grid-template-columns: repeat(2, 1fr); }.metric-grid.four { grid-template-columns: repeat(2,1fr); }
  .form-panel { grid-template-columns: 45px 180px 1fr; }.form-fields.three-columns { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .shell { display: block; }.sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 270px; transition: transform .25s ease; }.menu-open .sidebar { transform: translateX(0); }.sidebar-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(8,26,27,.45); backdrop-filter: blur(3px); }.menu-open .sidebar-scrim { display: block; }.menu-button { display: block; }
  .content { padding-top: 31px; }.topbar-context { display: none; }.page-head { align-items: flex-start; flex-direction: column; }
  .hero-status { grid-template-columns: 150px 1fr; min-height: 220px; }.radar { width: 135px; height: 135px; }.ring-one { inset: 22px; }.ring-two { inset: 46px; }
  .metric-grid, .split-grid, .chart-grid, .user-grid, .account-grid { grid-template-columns: 1fr; }.metric-grid.four { grid-template-columns: 1fr 1fr; }.chart-wide { grid-column: auto; }
  .form-panel { grid-template-columns: 38px 1fr; }.form-panel .form-fields { grid-column: 1 / -1; }.instruction-grid { grid-template-columns: 1fr; }.audit-layout { grid-template-columns: 1fr; }
  .login-layout { grid-template-columns: 1fr; }.login-story { display: none; }.login-mobile-brand { display: flex; }.login-panel { min-height: 100vh; }
  .firewall-banner { grid-template-columns: 100px 1fr; }.firewall-banner a { grid-column: 2; }
}
@media (max-width: 540px) {
  .content, .topbar { padding-inline: 17px; }.page-head h1 { font-size: 39px; }.head-actions { width: 100%; flex-wrap: wrap; }.head-actions .button { flex: 1; }
  .hero-status { grid-template-columns: 1fr; padding: 28px; }.radar { position: absolute; right: -25px; opacity: .45; }.hero-status-copy strong { font-size: 78px; }
  .metric-grid, .metric-grid.four { grid-template-columns: 1fr; }.form-fields, .form-fields.three-columns { grid-template-columns: 1fr; }.field-full { grid-column: auto; }
  .form-panel { grid-template-columns: 1fr; }.section-number { padding-bottom: 8px; border-bottom: 1px solid var(--line); }.credential-grid { grid-template-columns: 1fr; }.credential-secret { grid-column: auto; }.credential-grid strong { font-size: 12px; }.danger-zone { align-items: stretch; flex-direction: column; }
  .firewall-banner { grid-template-columns: 1fr; text-align: center; }.firewall-banner a { grid-column: auto; }.shield-graphic { transform: scale(.8); }.login-story { min-height: 430px; padding: 28px; }.login-copy { margin-top: 75px; }.login-copy p { font-size: 15px; }.signal-card { display: none; }.login-panel { padding: 30px 22px; }
  .flash-stack { right: 15px; top: 75px; }.table-toolbar { padding-inline: 16px; }.record-count { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }