:root {
  --ink: #18223a;
  --muted: #667085;
  --line: #e4e9f1;
  --canvas: #f4f7fb;
  --navy: #101c36;
  --blue: #2762e5;
  --cyan: #28c2d1;
  --green: #0f9f6e;
  --red: #d64545;
}

* { box-sizing: border-box; }
body { color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #245bd1; text-decoration: none; }
code, .font-monospace { font-size: .91em; }
.topbar { min-height: 64px; background: linear-gradient(115deg, #0e1931 0%, #162d58 100%); box-shadow: 0 4px 18px rgba(9, 21, 46, .2); z-index: 1040; }
.navbar-brand { font-size: 1rem; font-weight: 720; letter-spacing: -.01em; }
.brand-mark { display: inline-grid; place-items: center; width: 31px; height: 31px; color: #08223a; background: linear-gradient(145deg, #59dfdd, #7eb7ff); border-radius: 9px; font-weight: 900; }
.brand-mark-lg { width: 48px; height: 48px; border-radius: 13px; font-size: 1.35rem; }
.status-dot { display: inline-block; width: 8px; height: 8px; background: #45e0b1; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 4px rgba(69, 224, 177, .13); }
.app-shell { min-height: calc(100vh - 64px); }
.sidebar { --bs-offcanvas-width: 252px; width: 252px; background: #fff; border-right: 1px solid var(--line); }
@media (min-width: 992px) { .sidebar { position: fixed; top: 64px; bottom: 0; left: 0; } .main-content { margin-left: 252px; } }
.sidebar .nav-link { color: #4c5870; border-radius: 9px; padding: .7rem .8rem; font-weight: 600; }
.sidebar .nav-link:hover { color: var(--blue); background: #f1f5ff; }
.sidebar .nav-link.active { color: #194dbd; background: #eaf0ff; }
.nav-icon { display: inline-block; width: 27px; font-size: 1.15rem; }
.nav-section { margin: 1.2rem .8rem .45rem; color: #98a1b2; font-size: .67rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-footer { padding: 1rem .8rem; border-top: 1px solid var(--line); font-size: .82rem; }
.main-content { padding: 34px; max-width: 1700px; }
@media (max-width: 767px) { .main-content { padding: 22px 14px; } }
.page-heading { margin-bottom: 25px; }
.page-heading h1 { margin: .15rem 0 .25rem; color: #13203a; font-size: clamp(1.7rem, 2.5vw, 2.25rem); font-weight: 760; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); }
.eyebrow { color: #2d67d8; font-size: .69rem; font-weight: 850; letter-spacing: .15em; }
.panel, .metric-card, .danger-zone { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 7px rgba(18, 36, 68, .035); overflow: hidden; }
.panel-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-header h2, .panel h2 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 750; }
.panel-header p, .panel > p { margin: 0; color: var(--muted); font-size: .88rem; }
.panel-toolbar { padding: 15px 18px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.search-box { max-width: 520px; }
.type-filter { max-width: 180px; }
.metric-card { height: 100%; min-height: 135px; padding: 21px; }
.metric-label { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.metric-value { margin: 7px 0 5px; color: #122142; font-size: 2.15rem; font-weight: 780; letter-spacing: -.04em; }
.metric-status { margin: 18px 0 8px; font-size: 1.1rem; font-weight: 750; }
.metric-status.ok { color: var(--green); } .metric-status.bad { color: var(--red); }
.table { --bs-table-bg: transparent; }
.table thead th { padding: .85rem 1rem; color: #7d8798; background: #fbfcfe; border-bottom: 1px solid var(--line); font-size: .69rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { padding: .92rem 1rem; border-color: #edf0f5; }
.table tbody tr:hover { background: #fbfcff; }
.table small { color: var(--muted); }
.zone-name { color: #183566; font-weight: 720; }
.status-badge { padding: .4rem .56rem; color: #0d704f; background: #def8eb; border: 1px solid #bcebd7; text-transform: capitalize; }
.status-applying { color: #8a5b00; background: #fff2cc; border-color: #f0d991; }
.status-error, .status-disabled { color: #a22f2f; background: #fde7e7; border-color: #f2c2c2; }
.empty-state { padding: 3.2rem 1rem !important; color: var(--muted); text-align: center; }
.form-panel { padding: 25px; overflow: visible; }
.form-label { color: #344058; font-size: .83rem; font-weight: 700; }
.form-control, .form-select, .input-group-text { border-color: #d7deea; }
.form-control:focus, .form-select:focus { border-color: #6c96ed; box-shadow: 0 0 0 .22rem rgba(39, 98, 229, .11); }
.apply-card { padding: 22px; border-top: 3px solid var(--blue); overflow: visible; }
.apply-steps { margin: 1.2rem 0; padding-left: 1.5rem; color: #4d5970; }
.apply-steps li { margin: .55rem 0; padding-left: .3rem; }
.serial-box { display: flex; flex-direction: column; padding: 13px 15px; background: #f1f5fc; border: 1px solid #dce5f4; border-radius: 9px; }
.serial-box span, .serial-box small { color: var(--muted); font-size: .74rem; }.serial-box strong { font-family: ui-monospace, monospace; font-size: 1.08rem; }
.quick-actions { padding: 8px; }
.quick-action { display: flex; align-items: center; gap: 12px; padding: 14px; color: var(--ink); border-radius: 10px; }
.quick-action:hover { background: #f3f6fb; }
.quick-action > span { display: grid; place-items: center; width: 38px; height: 38px; color: var(--blue); background: #eaf0ff; border-radius: 9px; font-size: 1.2rem; }
.quick-action small { display: block; color: var(--muted); }
.record-owner { font-weight: 700; }.record-type { display: inline-block; min-width: 47px; padding: .25rem .45rem; color: #1c4b9f; background: #e8f0ff; border-radius: 5px; font-size: .72rem; font-weight: 850; text-align: center; }.record-value { max-width: 600px; overflow-wrap: anywhere; }
.record-preview { display: flex; flex-direction: column; gap: 6px; margin: 1rem 0; padding: 15px; background: #101c36; color: #e9efff; border-radius: 9px; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }.record-preview span:nth-child(2) { width: fit-content; padding: 2px 5px; color: #101c36; background: #64dadd; border-radius: 3px; font-size: .7rem; font-weight: 800; }
.timeline { padding: 10px 20px; }.timeline-item { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 0 14px 20px; color: var(--ink); border-bottom: 1px solid #edf0f5; }.timeline-item:last-child { border-bottom: 0; }.timeline-dot { position: absolute; left: 0; width: 9px; height: 9px; background: var(--cyan); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #b9e9eb; }.timeline-item small { display: block; color: var(--muted); }.serial-pill { margin-left: auto; padding: .25rem .5rem; color: #536177; background: #eef2f7; border-radius: 5px; font-family: ui-monospace, monospace; font-size: .74rem; }.history-list .timeline-item { padding-top: 18px; padding-bottom: 18px; }
.soa-grid { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 0; margin: 0; padding: 10px 20px 20px; }.soa-grid dt, .soa-grid dd { margin: 0; padding: 11px 0; border-bottom: 1px solid #edf0f5; overflow-wrap: anywhere; }.soa-grid dt { color: var(--muted); font-weight: 600; }.soa-grid dd { font-family: ui-monospace, monospace; }
.danger-zone { color: #742828; border-color: #f1caca; }.danger-zone summary { padding: 15px 18px; cursor: pointer; font-weight: 750; }.danger-zone > div { padding: 0 18px 18px; }
.zone-preview, .diagnostic-output { margin: 0; padding: 20px; color: #dce8ff; background: #101828; font: .78rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 620px; overflow: auto; }.diagnostic-output { margin: 12px 20px 20px; border-radius: 8px; max-height: 280px; }.panel > h3 { margin: 20px 20px 0; font-size: .85rem; }.zone-input { min-height: 440px; }
.role-badge { color: #254f94; background: #e7effe; border: 1px solid #ccdafa; }.request-id { display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }.user-identity { display: flex; align-items: center; gap: 13px; }.avatar { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; background: #244e9e; border-radius: 13px; font-weight: 800; }.user-identity small { display: block; color: var(--muted); }
.setup-step { display: flex; gap: 12px; align-items: start; }.setup-step > span { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; color: #fff; background: var(--blue); border-radius: 50%; font-weight: 800; }.setup-step h2 { margin-top: 4px; }.qr-wrap { display: flex; justify-content: center; margin: 15px 0; }.qr-wrap img { border: 8px solid #fff; border-radius: 10px; box-shadow: 0 2px 14px rgba(10,30,60,.12); }.secret-box { padding: 12px; background: #f0f3f8; border-radius: 7px; text-align: center; letter-spacing: .08em; overflow-wrap: anywhere; }.enabled-card { padding: 35px; text-align: center; }.success-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; color: #fff; background: var(--green); border-radius: 50%; font-size: 1.8rem; }.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.recovery-grid code { padding: 12px; color: #16243f; background: #edf2fa; border-radius: 6px; text-align: center; }
.login-body { min-height: 100vh; background: radial-gradient(circle at 20% 20%, rgba(48,119,219,.23), transparent 34%), radial-gradient(circle at 80% 80%, rgba(35,196,190,.18), transparent 30%), #0c1730; }.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 25px; }.login-card { width: min(440px, 100%); padding: 34px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.4); border-radius: 18px; }.login-brand { display: flex; align-items: center; gap: 13px; }.login-brand h1 { margin: 0; font-size: 1.5rem; font-weight: 780; }.login-brand p { margin: 2px 0 0; color: var(--muted); }.security-label { width: fit-content; margin-top: 22px; padding: 7px 10px; color: #32725c; background: #e8f8f2; border-radius: 6px; font-size: .75rem; font-weight: 700; }.login-note { margin: 22px 0 0; color: var(--muted); font-size: .76rem; text-align: center; }.login-alert { z-index: 2000; width: min(560px, 90vw); }.error-page { max-width: 650px; margin: 12vh auto; padding: 2rem; text-align: center; }.error-code { color: var(--blue); font-family: ui-monospace, monospace; font-weight: 800; }
@media (max-width: 600px) { .recovery-grid { grid-template-columns: 1fr; }.records-table { min-width: 780px; }.soa-grid { grid-template-columns: 1fr; }.soa-grid dt { padding-bottom: 0; border-bottom: 0; }.soa-grid dd { padding-top: 4px; } }