:root {
  color-scheme: dark;
  --bg: #080a0f;
  --surface: #11141c;
  --surface-2: #171b24;
  --surface-3: #202633;
  --line: #292f3b;
  --line-bright: #394354;
  --text: #f4f7fb;
  --muted: #929aaa;
  --accent: #64e8bb;
  --accent-2: #27b98c;
  --violet: #9b8cff;
  --danger: #ff6b7d;
  --warning: #f6bd60;
  --info: #6db7ff;
  --radius: 16px;
  --shadow: 0 24px 80px rgb(0 0 0 / 35%);
  --sidebar-width: 226px;
  --content-max: 1520px;
  --page-gutter: clamp(18px, 2.2vw, 34px);
  --topbar-height: 78px;
  --body-glow: rgb(93 226 179 / 8%);
  --sidebar-bg: rgb(10 12 18 / 94%);
  --topbar-bg: rgb(8 10 15 / 75%);
  --panel-from: rgb(24 28 37 / 98%);
  --panel-to: rgb(15 18 25 / 98%);
  --input-bg: #0b0d13;
  --subtle-bg: rgb(5 7 11 / 25%);
  --table-head-bg: rgb(6 8 13 / 20%);
  --row-hover: rgb(255 255 255 / 1.5%);
  --panel-inset: rgb(255 255 255 / 2%);
  --strong-muted: #d6dae2;
  --secondary-text: #dce0e7;
  --nav-text: #aeb5c2;
  --button-primary-text: #06110e;
  --login-card-from: #171b23;
  --login-card-to: #0f1219;
  --dialog-from: #1a1e28;
  --dialog-to: #10131a;
}

/* Author styles must never override the native hidden state. In particular,
   completed card-detail reads hide their loading label with this attribute. */
[hidden] { display: none !important; }

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #edf2f7;
  --line: #dbe3ec;
  --line-bright: #c4ceda;
  --text: #152033;
  --muted: #647186;
  --accent: #087f67;
  --accent-2: #0b9476;
  --violet: #6658d3;
  --danger: #c93652;
  --warning: #9a6512;
  --info: #236ca8;
  --shadow: 0 20px 55px rgb(37 54 75 / 13%);
  --body-glow: rgb(11 148 118 / 11%);
  --sidebar-bg: rgb(255 255 255 / 94%);
  --topbar-bg: rgb(244 247 251 / 88%);
  --panel-from: rgb(255 255 255 / 99%);
  --panel-to: rgb(248 250 252 / 99%);
  --input-bg: #ffffff;
  --subtle-bg: rgb(231 237 244 / 55%);
  --table-head-bg: rgb(235 240 246 / 78%);
  --row-hover: rgb(8 127 103 / 4.5%);
  --panel-inset: rgb(255 255 255 / 75%);
  --strong-muted: #263449;
  --secondary-text: #27354a;
  --nav-text: #536176;
  --button-primary-text: #ffffff;
  --login-card-from: #ffffff;
  --login-card-to: #f8fafc;
  --dialog-from: #ffffff;
  --dialog-to: #f5f8fb;
}

:root[data-theme="light"] .flash-info { color: #16567f; background: rgb(35 108 168 / 9%); }
:root[data-theme="light"] .flash-success { color: #08745e; background: rgb(8 127 103 / 9%); }
:root[data-theme="light"] .flash-danger { color: #a9203d; background: rgb(201 54 82 / 9%); }
:root[data-theme="light"] .critical-notice,
:root[data-theme="light"] .recovery-form p { color: #754907; }
:root[data-theme="light"] .critical-notice span { color: #7b6848; }
:root[data-theme="light"] .upstream-current strong { color: #234f72; }
:root[data-theme="light"] .button-danger { color: #a9203d; }
:root[data-theme="light"] .button-warning { color: #754907; }
:root[data-theme="light"] .provider-contract > span { color: #205f8d; }
:root[data-theme="light"] .issued-list code { color: #6f4808; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f7fb; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #edf2f7;
    --line: #dbe3ec; --line-bright: #c4ceda; --text: #152033; --muted: #647186;
    --accent: #087f67; --accent-2: #0b9476; --violet: #6658d3; --danger: #c93652;
    --warning: #9a6512; --info: #236ca8; --shadow: 0 20px 55px rgb(37 54 75 / 13%);
    --body-glow: rgb(11 148 118 / 11%); --sidebar-bg: rgb(255 255 255 / 94%);
    --topbar-bg: rgb(244 247 251 / 88%); --panel-from: rgb(255 255 255 / 99%);
    --panel-to: rgb(248 250 252 / 99%); --input-bg: #ffffff; --subtle-bg: rgb(231 237 244 / 55%);
    --table-head-bg: rgb(235 240 246 / 78%); --row-hover: rgb(8 127 103 / 4.5%);
    --panel-inset: rgb(255 255 255 / 75%); --strong-muted: #263449; --secondary-text: #27354a;
    --nav-text: #536176; --button-primary-text: #ffffff; --login-card-from: #ffffff;
    --login-card-to: #f8fafc; --dialog-from: #ffffff; --dialog-to: #f5f8fb;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: clip; background: radial-gradient(circle at 70% -10%, var(--body-glow), transparent 30rem), var(--bg); }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 18px 14px 14px; border-right: 1px solid var(--line); background: var(--sidebar-bg); display: flex; flex-direction: column; overflow: hidden; z-index: 20; backdrop-filter: blur(20px); }
.brand { display: flex; flex: none; gap: 11px; align-items: center; margin: 0 4px 12px; padding: 2px 4px 17px; border-bottom: 1px solid var(--line); }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--button-primary-text); background: linear-gradient(145deg, var(--accent), #3dc49a); font-weight: 900; box-shadow: 0 12px 30px rgb(100 232 187 / 20%); }
.brand-mark.large { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; }
.brand strong { display: block; font-size: 14px; letter-spacing: .005em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.nav { display: grid; align-content: start; gap: 14px; min-height: 0; padding: 1px 3px 10px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-bright) transparent; }
.nav-group { display: grid; gap: 4px; }
.nav-group-label { margin: 0; padding: 0 11px 4px; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.nav-group-links { display: grid; gap: 3px; }
.nav-link { min-height: 39px; display: flex; gap: 9px; align-items: center; padding: 5px 8px; border: 1px solid transparent; border-radius: 11px; color: var(--nav-text); font-size: 13px; font-weight: 680; transition: color .15s ease, background .15s ease, border-color .15s ease; }
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.active { color: var(--text); background: linear-gradient(90deg, rgb(100 232 187 / 13%), rgb(100 232 187 / 4%)); border-color: rgb(100 232 187 / 20%); }
.nav-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); font-size: 15px; }
.nav-link.active .nav-icon { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.sidebar-foot { flex: none; margin-top: auto; padding: 13px 4px 0; border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--sidebar-bg); }
.online { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 7px; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgb(100 232 187 / 8%); }
.sidebar-foot form { margin: 0; }
.logout-button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--nav-text); background: var(--subtle-bg); cursor: pointer; font-weight: 750; }
.logout-button:hover { color: var(--text); border-color: var(--line-bright); background: var(--surface); }
.logout-button small { max-width: 92px; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-scrim { display: none; }
.main { min-width: 0; min-height: 100vh; overflow-x: clip; }
.topbar { min-height: var(--topbar-height); border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 10; }
.topbar-inner { width: 100%; max-width: var(--content-max); min-height: var(--topbar-height); margin: 0 auto; padding: 13px var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.page-heading { min-width: 0; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(22px, 2vw, 27px); letter-spacing: -.035em; }
.eyebrow { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; margin: 0; }
.topbar-meta { display: flex; align-items: center; gap: 10px; color: var(--secondary-text); font-size: 13px; }
.theme-toggle { min-width: 80px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-bright); border-radius: 11px; color: var(--text); background: var(--surface); cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / 5%); }
.theme-toggle:hover { border-color: var(--accent-2); }
.theme-icon { font-size: 15px; line-height: 1; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }
.theme-label { font-size: 10px; font-weight: 800; }
.theme-toggle-login { position: fixed; top: 18px; right: 18px; z-index: 30; }
.role-pill { color: var(--accent); background: rgb(100 232 187 / 10%); border: 1px solid rgb(100 232 187 / 20%); padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.mobile-nav { display: none; border: 1px solid var(--line); color: var(--text); background: var(--surface); border-radius: 10px; padding: 8px 10px; }
.content { width: 100%; max-width: var(--content-max); min-width: 0; margin: 0 auto; padding: 24px var(--page-gutter) 38px; display: grid; align-content: start; gap: 18px; }
.content > * { min-width: 0; }
.flash { width: calc(100% - (var(--page-gutter) * 2)); max-width: calc(var(--content-max) - (var(--page-gutter) * 2)); margin: 16px auto 0; padding: 12px 15px; border-radius: 12px; border: 1px solid; font-size: 12px; }
.flash-info { color: #bcdfff; background: rgb(109 183 255 / 9%); border-color: rgb(109 183 255 / 25%); }
.flash-success { color: #aaf0d5; background: rgb(100 232 187 / 9%); border-color: rgb(100 232 187 / 25%); }
.flash-danger { color: #ffc2ca; background: rgb(255 107 125 / 9%); border-color: rgb(255 107 125 / 28%); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { min-height: 122px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-2), var(--surface)); position: relative; overflow: hidden; }
.stat-card::after { content: ""; width: 80px; height: 80px; border-radius: 50%; position: absolute; right: -26px; bottom: -32px; background: rgb(155 140 255 / 8%); }
.stat-card > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-card strong { display: block; margin: 10px 0 6px; font-size: 31px; letter-spacing: -.04em; }
.stat-card small { color: var(--muted); }
.stat-card.warning { border-color: rgb(246 189 96 / 20%); }
.stat-card.danger { border-color: rgb(255 107 125 / 20%); }
.stat-card.success { border-color: rgb(100 232 187 / 22%); }
.panel { background: linear-gradient(145deg, var(--panel-from), var(--panel-to)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px var(--panel-inset) inset; overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { margin: 3px 0 0; letter-spacing: -.025em; }
.panel-head h2 { font-size: 20px; }
.panel-head h3 { font-size: 18px; }
.panel-caption { color: var(--muted); font-size: 11px; margin: 7px 0 0; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
table { border-collapse: collapse; width: 100%; min-width: 900px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; background: var(--table-head-bg); }
td { font-size: 13px; color: var(--secondary-text); }
td small { display: block; margin-top: 6px; color: #7e8696; font-size: 11px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }
.task-link { color: var(--text); font-weight: 800; }
.task-link:hover { color: var(--accent); }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; word-break: normal; overflow-wrap: anywhere; }
.task-business-title { display: block; font-family: inherit; line-height: 1.45; overflow-wrap: anywhere; }
.task-card-value { display: block; line-height: 1.45; word-break: normal; overflow-wrap: anywhere; }
.task-card-copy, .routing-copy-value { width: 100%; margin: 0; padding: 0; color: inherit; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.task-card-copy:hover, .routing-copy-value:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.task-card-copy:focus-visible, .routing-copy-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.task-card-copy-secondary { margin-top: 6px; color: #7e8696; font-size: 12px; }
.badge { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 5px 9px; border: 1px solid var(--line-bright); border-radius: 999px; color: var(--secondary-text); background: var(--subtle-bg); font-size: 10px; font-weight: 800; white-space: nowrap; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { color: var(--accent); border-color: rgb(100 232 187 / 28%); background: rgb(100 232 187 / 7%); }
.badge-danger { color: var(--danger); border-color: rgb(255 107 125 / 28%); background: rgb(255 107 125 / 7%); }
.badge-warning { color: var(--warning); border-color: rgb(246 189 96 / 28%); background: rgb(246 189 96 / 7%); }
.badge-info { color: var(--info); border-color: rgb(109 183 255 / 28%); background: rgb(109 183 255 / 7%); }
.badge-muted { color: #777f8f; }
.button { border: 1px solid transparent; border-radius: 11px; padding: 10px 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--text); font-weight: 750; font-size: 12px; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.button-primary { color: var(--button-primary-text); background: linear-gradient(135deg, var(--accent), #41c99b); box-shadow: 0 12px 30px rgb(100 232 187 / 12%); }
.button-quiet { background: var(--surface-3); border-color: var(--line-bright); }
.button-danger { background: rgb(255 107 125 / 12%); color: #ffc1c9; border-color: rgb(255 107 125 / 30%); }
.button-warning { background: rgb(246 189 96 / 12%); color: #ffe2ac; border-color: rgb(246 189 96 / 30%); }
.button-small { padding: 7px 10px; font-size: 10px; }
.button-block { width: 100%; padding: 13px 16px; }
.empty-state { min-height: 170px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--strong-muted); }
.empty-state.wide { grid-column: 1 / -1; }
.filter-panel { padding: 16px; }
.filter-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.task-center-filter { grid-template-columns: minmax(300px, 1.8fr) minmax(150px, .7fr) minmax(140px, .55fr) minmax(150px, .7fr) auto auto; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 750; }
input, select, textarea { width: 100%; color: var(--text); border: 1px solid var(--line-bright); background: var(--input-bg); border-radius: 10px; padding: 11px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgb(100 232 187 / 8%); }
textarea { resize: vertical; min-height: 92px; }
.result-count { color: var(--muted); font-size: 12px; }
.task-center-intro .panel-head { border-bottom: 0; }
.task-center-intro-head { padding-bottom: 10px; }
.task-center-loading { overflow: hidden; }
.task-center-loading .panel-head { align-items: center; }
.task-loading-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }
.task-loading-grid span { min-height: 92px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(100deg, var(--subtle-bg) 24%, color-mix(in srgb, var(--surface-3) 72%, var(--accent) 8%) 38%, var(--subtle-bg) 52%); background-size: 220% 100%; animation: task-loading-shimmer 1.2s ease-in-out infinite; }
@keyframes task-loading-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }
.task-center-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 0 20px 14px; }
.task-source-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }
.task-source-summary a { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle-bg); transition: border-color .15s ease, background .15s ease; }
.task-source-summary a:hover, .task-source-summary a.active { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--subtle-bg)); }
.task-source-summary strong { display: block; color: var(--text); font-size: 21px; letter-spacing: -.035em; }
.task-source-summary span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 750; }
.task-center-gates { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.task-center-refresh-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; }
.task-center-freshness { color: var(--muted); font-size: 10px; white-space: nowrap; }
.task-event-status { color: var(--muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.task-event-status[data-state="connected"] { color: var(--accent); }
.task-event-status[data-state="incoming"] { color: var(--warning); }
.task-event-status[data-state="retrying"] { color: var(--danger); }
.task-sound-toggle.is-enabled { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
.task-sound-volume { display: grid; grid-template-columns: auto 86px auto; align-items: center; gap: 7px; }
.task-sound-volume span, .task-sound-volume output { color: var(--muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.task-sound-volume input { width: 86px; padding: 0; accent-color: var(--accent); }
.order-notification-host { position: fixed; z-index: 90; top: 84px; right: 24px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.order-notification { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 16px 17px; border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); border-radius: 15px; background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); box-shadow: 0 18px 50px rgb(0 0 0 / 24%); opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .22s ease, transform .22s ease; pointer-events: auto; }
.order-notification.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.order-notification-bell { font-size: 28px; transform-origin: 50% 10%; animation: order-bell-ring .75s ease-in-out 2; }
.order-notification div { display: grid; gap: 4px; }
.order-notification strong { color: var(--text); font-size: 14px; }
.order-notification small { color: var(--muted); font-size: 11px; }
.order-notification button { width: 30px; height: 30px; padding: 0; color: var(--muted); border: 0; border-radius: 50%; background: transparent; font-size: 20px; cursor: pointer; }
.order-notification button:hover { color: var(--text); background: var(--subtle-bg); }
@keyframes order-bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-16deg); } 60% { transform: rotate(11deg); } 80% { transform: rotate(-7deg); } }
.task-today-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0 20px 14px; }
.task-today-summary article { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle-bg); }
.task-today-summary span, .task-today-summary small { display: block; color: var(--muted); font-size: 10px; font-weight: 750; }
.task-today-summary strong { display: block; margin: 4px 0 3px; color: var(--text); font-size: 22px; letter-spacing: -.035em; }
.task-today-summary .success strong { color: var(--accent); }
.task-today-summary .danger strong { color: var(--danger); }
.task-today-summary .rate strong { color: var(--info); }
.task-today-summary .latest strong { font-size: 14px; line-height: 1.45; letter-spacing: -.01em; }
.task-center-row > td:nth-child(2) { min-width: 0; }
.task-center-row > td:nth-child(2) small { max-width: 200px; line-height: 1.45; }
.task-plan { display: inline-flex; width: max-content; padding: 5px 9px; border: 1px solid var(--line-bright); border-radius: 999px; font-size: 11px; line-height: 1.2; }
.task-plan-plus { color: var(--accent); border-color: rgb(100 232 187 / 30%); background: rgb(100 232 187 / 9%); }
.task-plan-pro20 { color: var(--danger); border-color: rgb(255 107 125 / 32%); background: rgb(255 107 125 / 10%); }
.task-upstream-history { color: var(--muted); font-size: 9px; line-height: 1.45; }
.task-protocol { display: block; width: max-content; font-size: 13px; font-weight: 850; line-height: 1.35; }
.task-protocol-cat { color: var(--info); }
.task-protocol-space { color: var(--accent); }
.task-protocol-unknown { color: var(--muted); }
.unified-task-table { min-width: 1040px; table-layout: fixed; }
.unified-task-table th:nth-child(1) { width: 23%; }
.unified-task-table th:nth-child(2) { width: 14%; }
.unified-task-table th:nth-child(3) { width: 13%; }
.unified-task-table th:nth-child(4) { width: 19%; }
.unified-task-table th:nth-child(5) { width: 7%; }
.unified-task-table th:nth-child(6) { width: 9%; }
.unified-task-table th:nth-child(7) { width: 7%; }
.unified-task-table th:nth-child(8) { width: 8%; }
.unified-task-table td { min-width: 0; }
.unified-task-table th { font-size: 12px; }
.unified-task-table td { font-size: 14px; line-height: 1.55; }
.unified-task-table td small { margin-top: 6px; font-size: 12px; line-height: 1.55; }
.unified-task-table .task-business-title { font-size: 14px; }
.unified-task-table .task-plan { font-size: 13px; }
.unified-task-table .badge,
.unified-task-table .button-small { font-size: 12px; }
.unified-task-table .task-upstream-history { font-size: 11px; }
.unified-task-table td:last-child .button { padding-inline: 7px; white-space: nowrap; }
.unified-task-table .task-link,
.unified-task-table td:nth-child(4) .mono { display: block; word-break: normal; overflow-wrap: anywhere; }
.task-source-shadow > td:first-child { box-shadow: inset 3px 0 var(--info); }
.task-source-v2 > td:first-child { box-shadow: inset 3px 0 var(--accent); }
.task-source-legacy > td:first-child { box-shadow: inset 3px 0 var(--violet); }
.observation-panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.auto-refresh-control { display: inline-flex; align-items: center; gap: 9px; }
.auto-refresh-status { color: var(--muted); font-size: 10px; white-space: nowrap; }
.auto-refresh-status.is-refreshing { color: var(--info); }
.auto-refresh-status.is-current { color: var(--accent); }
.auto-refresh-status.is-error { color: var(--danger); }
.observation-list { display: grid; gap: 14px; padding: 18px; }
.observation-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--subtle-bg); }
.observation-card:hover { border-color: var(--line-bright); }
.observation-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 18px 15px; border-bottom: 1px solid var(--line); }
.observation-title { display: grid; min-width: 0; gap: 6px; }
.observation-kicker, .observation-facts span, .observation-card-pair span, .observation-source-message span, .observation-detail-summary span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .055em; }
.observation-request-id { max-width: 1050px; font: 700 12px/1.5 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.observation-status { display: flex; flex: none; align-items: center; gap: 10px; }
.observation-status > span:last-child { color: var(--muted); font-size: 10px; white-space: nowrap; }
.observation-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.observation-facts > div { min-width: 0; min-height: 86px; padding: 14px 18px; border-right: 1px solid var(--line); }
.observation-facts > div:last-child { border-right: 0; }
.observation-facts strong, .observation-facts small { display: block; min-width: 0; overflow-wrap: anywhere; }
.observation-facts strong { margin-top: 8px; color: var(--secondary-text); font-size: 12px; line-height: 1.5; }
.observation-facts small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.observation-card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.observation-card-pair > div { min-width: 0; padding: 12px 13px; border: 1px solid var(--line-bright); border-radius: 11px; background: var(--input-bg); }
.observation-card-pair code { display: block; margin-top: 8px; color: var(--text); font: 12px/1.6 "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.observation-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px 16px; }
.observation-source-message { display: grid; min-width: 0; gap: 6px; }
.observation-source-message strong { color: var(--secondary-text); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.observation-card-actions { display: flex; flex: none; align-items: center; gap: 9px; }
.observation-empty { margin: 0; }
.observation-detail-refresh { display: grid; gap: 20px; }
.observation-detail-refresh > [data-refresh-region] { display: grid; gap: 20px; }
.observation-detail-heading h2 { max-width: min(1100px, 75vw); font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.observation-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle-bg); }
.observation-detail-summary > div { display: grid; align-content: center; min-width: 0; min-height: 84px; padding: 14px 16px; border-right: 1px solid var(--line); }
.observation-detail-summary > div:last-child { border-right: 0; }
.observation-detail-summary strong, .observation-detail-summary small { display: block; overflow-wrap: anywhere; }
.observation-detail-summary strong { margin-top: 8px; color: var(--secondary-text); font-size: 12px; line-height: 1.5; }
.observation-detail-summary small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.observation-detail-summary .badge { margin-top: 8px; }
.detail-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; padding: 0 2px 8px; }
.detail-heading h2 { margin: 5px 0 0; font-size: 27px; }
.back-link { display: block; color: var(--muted); font-size: 12px; margin-bottom: 15px; }
.detail-state { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.critical-notice { margin: 0; padding: 15px 17px; background: rgb(246 189 96 / 8%); border: 1px solid rgb(246 189 96 / 28%); border-radius: 13px; display: grid; gap: 5px; color: #ffe4b2; }
.critical-notice span { color: #bba985; font-size: 12px; }
.upstream-current { padding: 14px 17px; border: 1px solid rgb(109 183 255 / 28%); border-radius: 13px; background: rgb(109 183 255 / 8%); display: grid; gap: 6px; }
.upstream-current span { color: var(--info); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.upstream-current strong { color: #d7eaff; font-size: 13px; line-height: 1.65; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 20px; }
.details { padding: 20px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-item { background: var(--subtle-bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; min-width: 0; }
.detail-item.full { grid-column: 1 / -1; }
.detail-item > span { color: var(--muted); font-size: 10px; font-weight: 750; display: block; margin-bottom: 7px; }
.detail-item > div { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.detail-item strong { font-size: 13px; min-width: 0; word-break: break-word; }
.cat-full-value { white-space: pre-wrap; }
.cat-inline-error { margin: 18px 24px 0; padding: 13px 15px; color: var(--danger); border: 1px solid rgb(255 107 125 / 28%); border-radius: 12px; background: rgb(255 107 125 / 7%); }
.cat-live-page { display: contents; }
.cat-live-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.cat-filter { grid-template-columns: minmax(300px, 2fr) repeat(4, minmax(130px, 1fr)) auto; }
.cat-export, .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-actions form { margin: 0; }
.cat-table { min-width: 1380px; table-layout: fixed; }
.cat-table th:nth-child(1) { width: 12%; }
.cat-table th:nth-child(2), .cat-table th:nth-child(3) { width: 15%; }
.cat-table th:nth-child(4) { width: 7%; }
.cat-table th:nth-child(5) { width: 12%; }
.cat-table th:nth-child(6), .cat-table th:nth-child(7) { width: 8%; }
.cat-table th:nth-child(8) { width: 11%; }
.cat-table th:nth-child(9) { width: 15%; }
.cat-table th:nth-child(10) { width: 12%; }
.cat-key-cell { min-width: 0; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.cat-reason { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cat-refresh-form { padding: 22px 24px; }
.cat-json { margin: 0; padding: 22px 24px; overflow: auto; max-height: 680px; white-space: pre-wrap; word-break: break-word; color: var(--secondary-text); background: var(--input-bg); font: 12px/1.7 "SFMono-Regular", Consolas, monospace; }
.cat-audit-record + .cat-audit-record { border-top: 1px solid var(--line); }
.cat-audit-record h4 { margin: 0; padding: 18px 24px 0; color: var(--secondary-text); font-size: 12px; }
@media (max-width: 1250px) { .cat-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.copy-button { color: var(--accent); background: transparent; border: 0; cursor: pointer; font-size: 10px; }
.sensitive-actions { border-top: 1px solid var(--line); margin-top: 2px; padding: 18px 24px; display: flex; align-items: center; gap: 14px; }
.sensitive-actions p { color: var(--muted); font-size: 11px; margin: 0; line-height: 1.6; }
.failure-meter { text-align: right; }
.failure-meter span { color: var(--muted); font-size: 10px; display: block; }
.failure-meter strong { color: var(--warning); font-size: 17px; }
.control-stack { padding: 20px 24px; display: grid; gap: 14px; }
.inline-control { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 5px; }
.action-grid form, .action-grid .button { width: 100%; }
.timeline { padding: 10px 24px 24px; }
.timeline-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-index { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--violet); font-weight: 800; font-size: 11px; }
.timeline-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.timeline-item p { margin: 7px 0; color: var(--secondary-text); font-size: 12px; }
.timeline-item small { color: #717a89; }
.upstream-message { margin: 9px 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle-bg); }
.upstream-message > span { color: var(--info); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.upstream-message p { margin: 5px 0 0; line-height: 1.6; }
.upstream-message code { display: inline-block; margin-top: 8px; color: var(--warning); font-size: 9px; }
.upstream-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.secure-dialog { color: var(--text); background: linear-gradient(145deg, var(--dialog-from), var(--dialog-to)); border: 1px solid var(--line-bright); border-radius: 18px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.secure-dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(5px); }
.secure-dialog form { padding: 24px; display: grid; gap: 14px; }
.secure-dialog p { color: var(--muted); line-height: 1.65; margin: 0; font-size: 12px; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; }
.dialog-head h3 { margin: 4px 0 0; }
.dialog-close { color: var(--muted); background: var(--surface-3); border: 1px solid var(--line); border-radius: 9px; width: 32px; height: 32px; cursor: pointer; }
.action-dialog { overflow: hidden; }
.action-dialog[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--line-bright)); }
.action-dialog[data-tone="warning"] { border-color: color-mix(in srgb, var(--warning) 45%, var(--line-bright)); }
.action-dialog-body { display: grid; gap: 18px; padding: 24px; }
.action-dialog-message { min-height: 42px; color: var(--secondary-text) !important; font-size: 13px !important; white-space: pre-line; }
.action-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.action-dialog-actions .button { min-width: 96px; }
.manual-grid, .provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px; }
.provider-grid { padding: 0; }
.manual-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--subtle-bg); }
.manual-head, .manual-actions { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.manual-head h3 { margin: 10px 0 0; font-size: 15px; }
.age { color: var(--muted); font-size: 10px; }
.manual-info { display: grid; gap: 6px; padding: 17px 0; }
.manual-info span, .manual-info small { color: var(--muted); font-size: 11px; }
.manual-actions form { margin-left: auto; }
.provider-card { padding: 22px; }
.provider-head { display: flex; align-items: center; gap: 13px; }
.provider-head .badge { margin-left: auto; }
.provider-head h2 { margin: 3px 0 0; }
.provider-logo { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: rgb(100 232 187 / 8%); border: 1px solid rgb(100 232 187 / 20%); font-weight: 900; }
.provider-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 20px 0; }
.provider-state-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.provider-metrics > div { border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.provider-metrics dt { color: var(--muted); font-size: 10px; }
.provider-metrics dd { margin: 6px 0 0; font-weight: 800; font-size: 13px; }
.provider-config .button { width: 100%; }
.provider-contract { margin: 0 0 16px; padding: 14px; border: 1px solid rgb(109 183 255 / 20%); border-radius: 12px; background: rgb(109 183 255 / 6%); }
.provider-contract > span { color: #bfe0ff; font-size: 10px; font-weight: 800; }
.provider-contract > div { margin: 10px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.provider-contract code { color: var(--info); background: rgb(109 183 255 / 8%); border: 1px solid rgb(109 183 255 / 20%); border-radius: 7px; padding: 4px 6px; font-size: 10px; }
.provider-contract b { color: var(--muted); }
.provider-contract p { color: var(--muted); font-size: 10px; line-height: 1.7; margin: 0; }
.provider-contract p code { border: 0; background: none; padding: 0; }
.provider-contract p a { color: var(--info); text-decoration: underline; text-underline-offset: 2px; }
.provider-config-state { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 15px; }
.provider-config-state strong { color: var(--secondary-text); font-size: 12px; }
.provider-config-state span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.provider-legacy-config, .routing-advanced-connections { border: 1px solid var(--line); border-radius: 12px; background: var(--subtle-bg); }
.provider-legacy-config { margin: 4px 0 14px; }
.provider-legacy-config summary, .routing-advanced-connections > summary { cursor: pointer; padding: 13px 15px; color: var(--secondary-text); font-weight: 800; }
.provider-legacy-config > div, .routing-advanced-connections > div { border-top: 1px solid var(--line); padding: 15px; }
.routing-advanced-connections { margin-top: 18px; }
.routing-advanced-connections > div > p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.routing-module-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.routing-module-nav a { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--secondary-text); text-decoration: none; display: grid; gap: 3px; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.routing-module-nav a:hover { border-color: var(--accent); color: var(--text); }
.routing-module-nav a.active { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 58%, var(--panel)); color: var(--text); }
.routing-module-nav strong { font-size: 15px; }
.routing-module-nav span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.routing-module-intro { padding: 22px 24px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--accent-soft) 22%, var(--panel))); }
.routing-module-intro .eyebrow { margin: 0 0 5px; }
.routing-module-intro h2 { margin: 0; font-size: clamp(25px, 3vw, 38px); }
.routing-module-intro p:last-child { margin: 9px 0 0; max-width: 920px; color: var(--secondary-text); line-height: 1.7; }
.routing-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.routing-flow-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px; }
.routing-flow-number { width: 42px; height: 42px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 900; }
.routing-flow-card h3 { margin: 3px 0 12px; font-size: 18px; line-height: 1.45; }
.routing-flow-card ol { margin: 0; padding-left: 20px; color: var(--secondary-text); line-height: 1.7; }
.routing-product-catalog .panel-head form { flex: 0 0 auto; }
.routing-products-table { min-width: 980px; table-layout: fixed; }
.routing-products-table th:nth-child(1) { width: 82px; }
.routing-products-table th:nth-child(2) { width: 245px; }
.routing-products-table th:nth-child(3) { width: 220px; }
.routing-products-table th:nth-child(4) { width: 205px; }
.routing-products-table th:nth-child(5) { width: 190px; }
.routing-products-table th:nth-child(6) { width: 150px; }
.routing-products-table td { vertical-align: top; overflow-wrap: anywhere; }
.routing-products-table td > strong { display: block; }
.routing-products-table small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.5; }
.routing-product-priority-form { display: grid; gap: 6px; }
.routing-product-priority-form > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.routing-product-priority-form .button { min-width: 0; min-height: 31px; padding: 6px 8px; }
.routing-product-priority-form [data-product-priority-status] { min-height: 13px; font-size: 9px; }
.routing-product-priority-form [data-product-priority-status][data-tone="success"] { color: var(--success); }
.routing-product-priority-form [data-product-priority-status][data-tone="danger"] { color: var(--danger); }
.routing-cross-module-note { margin: 0 22px 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle-bg); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.routing-cross-module-note div { display: grid; gap: 4px; }
.routing-cross-module-note small { color: var(--muted); }
.provider-settings-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.api-key-field { display: grid; gap: 9px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.api-key-field legend { color: var(--secondary-text); padding: 0 6px; font-size: 10px; font-weight: 800; }
.api-key-field > label:not(:last-child) { display: flex; grid-template-columns: none; align-items: center; gap: 9px; }
.api-key-field > label:not(:last-child) input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; }
.provider-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.provider-settings-form .reauth-box { background: var(--subtle-bg); }
.spacex-summary { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 20px; }
.spacex-intro { padding: 24px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.spacex-intro h2 { margin: 5px 0 10px; font-size: 24px; }
.spacex-intro p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 720px; margin: 0; }
.spacex-state { min-width: max-content; display: grid; justify-items: end; gap: 8px; }
.spacex-state small { color: var(--muted); font-size: 10px; }
.issue-card .panel-head { padding-bottom: 18px; }
.issue-form { padding: 18px 22px 22px; display: grid; grid-template-columns: 1fr .7fr; gap: 12px; align-items: end; }
.issue-form .button, .funding-check { grid-column: 1 / -1; }
.funding-check { display: flex; grid-template-columns: none; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle-bg); }
.funding-check input { width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; }
.funding-check span { font-size: 10px; line-height: 1.55; }
.recovery-form { grid-template-columns: 1fr; }
.recovery-form p { margin: 0; color: #ffe4b2; font-size: 11px; line-height: 1.7; }
.recovery-form .button { grid-column: 1; }
.issued-panel { border-color: rgb(246 189 96 / 35%); }
.issued-list { padding: 20px 24px 24px; display: grid; gap: 10px; }
.issued-list > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line-bright); border-radius: 11px; padding: 12px 14px; background: var(--input-bg); }
.issued-list span { color: var(--muted); font-size: 10px; }
.issued-list code { color: #fff1c9; font-size: 13px; word-break: break-all; }
.order-flash { margin: 0; }
.empty-state.compact { min-height: 110px; }
.audit-list { padding: 4px 24px 20px; }
.audit-list article { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.audit-list article:last-child { border-bottom: 0; }
.audit-icon { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-bright); border-radius: 9px; color: var(--accent); }
.audit-list article > div > div { display: flex; justify-content: space-between; gap: 10px; }
.audit-list strong { font-size: 12px; }
.audit-list article > div > div span, .audit-list small { color: var(--muted); font-size: 10px; }
.audit-list p { color: var(--secondary-text); font-size: 12px; margin: 6px 0; }
.audit-list a { color: var(--accent); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 15%, rgb(100 232 187 / 10%), transparent 25rem); }
.login-card { width: min(460px, 100%); border: 1px solid var(--line-bright); background: linear-gradient(145deg, var(--login-card-from), var(--login-card-to)); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(25px, 5vw, 42px); }
.login-brand { display: flex; align-items: center; gap: 15px; }
.login-brand h1 { margin: 3px 0 0; }
.login-copy { color: var(--muted); line-height: 1.75; font-size: 13px; margin: 25px 0; }
.login-card .flash { margin: 0 0 16px; }
.stack-form { display: grid; gap: 14px; }
.security-note { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 17px 0 0; text-align: center; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.settings-form { padding: 22px 24px 24px; }
.settings-copy { color: var(--muted); font-size: 11px; line-height: 1.7; margin: 0; }
.reauth-box { display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgb(5 7 11 / 28%); }
.reauth-box > strong { color: #d9dee6; font-size: 11px; }
.totp-enrollment { display: grid; gap: 14px; padding: 22px 24px 24px; }
.totp-enrollment .stack-form { padding: 3px 0 0; }
.totp-enrollment > small { color: var(--muted); font-size: 10px; }
.totp-qr-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px; padding: 18px; border: 1px solid var(--line-bright); border-radius: 15px; background: var(--subtle-bg); }
.totp-qr-card img { display: block; width: min(280px, 100%); height: auto; padding: 8px; border-radius: 12px; background: #fff; }
.totp-qr-card div { display: grid; gap: 7px; }
.totp-qr-card strong { color: var(--text); font-size: 15px; }
.totp-qr-card span { color: var(--muted); font-size: 11px; line-height: 1.7; }
.enrollment-secret { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; padding: 14px; border: 1px solid rgb(246 189 96 / 28%); border-radius: 13px; background: rgb(246 189 96 / 7%); }
.enrollment-secret > span { grid-column: 1 / -1; color: var(--warning); font-size: 10px; font-weight: 800; }
.enrollment-secret code { color: #fff0cd; font: 13px/1.6 "SFMono-Regular", Consolas, monospace; word-break: break-all; }
[data-theme="light"] .reauth-box > strong { color: var(--secondary-text); }
[data-theme="light"] .enrollment-secret code { color: #714806; }
.sensitive-page { background: var(--bg); }
.sensitive-panel { max-width: 1100px; margin: 40px auto; }
.sensitive-panel > .critical-notice { margin: 20px 24px; }
.countdown { color: var(--warning); border: 1px solid rgb(246 189 96 / 25%); border-radius: 999px; padding: 6px 10px; font-size: 10px; }
.secret-meta { padding: 0 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.secret-meta div { border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.secret-meta dt { color: var(--muted); font-size: 10px; }
.secret-meta dd { margin: 6px 0 0; font-size: 12px; }
.secret-value { display: block; width: calc(100% - 48px); margin: 20px 24px; min-height: 360px; font: 11px/1.6 "SFMono-Regular", Consolas, monospace; }
.secret-actions { display: flex; gap: 12px; padding: 0 24px 24px; }
.secret-actions form { margin-left: auto; }
.session-inline { display: grid; gap: 10px; padding: 18px 24px 24px; border-top: 1px solid var(--line); }
.session-inline > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.session-inline .secret-value { width: 100%; min-height: 230px; max-height: 520px; margin: 0; }
.session-inline .button { justify-self: start; }
.routing-notice { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(320px, 1.3fr); align-items: center; gap: 22px; padding: 22px 24px; border: 1px solid; border-radius: var(--radius); background: var(--surface); }
.routing-notice h2 { margin: 5px 0 0; font-size: 21px; }
.routing-notice p:not(.eyebrow) { margin: 0; color: var(--secondary-text); font-size: 12px; line-height: 1.75; }
.routing-notice code { color: var(--info); font-family: "SFMono-Regular", Consolas, monospace; }
.routing-notice small { grid-column: 1 / -1; color: var(--danger); }
.routing-active-routes { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--warning) 24%, var(--line)); }
.routing-active-routes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.routing-active-routes-head strong { font-size: 14px; }
.routing-notice .routing-active-routes-head small { color: var(--secondary-text); }
.routing-active-routes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.routing-active-route { min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface) 90%, transparent); }
.routing-active-route > span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.routing-active-route > strong { display: block; margin-top: 7px; font-size: 14px; line-height: 1.35; }
.routing-notice .routing-active-route > small { display: block; margin-top: 6px; color: var(--secondary-text); line-height: 1.45; }
.routing-active-route-success { border-color: color-mix(in srgb, var(--success) 40%, var(--line)); }
.routing-active-route-info { border-color: color-mix(in srgb, var(--info) 38%, var(--line)); }
.routing-active-route-warning { border-color: color-mix(in srgb, var(--warning) 42%, var(--line)); }
.routing-notice-warning { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)); background: color-mix(in srgb, var(--warning) 7%, var(--surface)); }
.routing-notice-danger { border-color: color-mix(in srgb, var(--danger) 38%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.routing-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.routing-summary-grid article { min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, var(--surface-2), var(--surface)); }
.routing-summary-grid span, .routing-summary-grid small { display: block; color: var(--muted); font-size: 10px; }
.routing-summary-grid strong { display: block; margin: 8px 0 5px; font-size: 26px; }
.routing-credentials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.routing-credentials-grid > :only-child { width: min(100%, 980px); margin-inline: auto; grid-column: 1 / -1; }
.routing-credential-card { min-width: 0; }
.routing-credential-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.routing-credential-card > header h3 { margin: 4px 0 0; font-size: 17px; }
.routing-credential-card > header p:not(.eyebrow) { max-width: 640px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.routing-credential-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; }
.routing-credential-form > label { min-width: 0; }
.routing-credential-base, .routing-credential-key, .routing-credential-actions, .routing-credential-note { grid-column: 1 / -1; }
.routing-credential-key { min-width: 0; margin: 0; padding: 13px; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); align-items: center; gap: 10px 16px; border: 1px solid var(--line-bright); border-radius: 12px; }
.routing-credential-key legend { padding: 0 7px; color: var(--info); font-size: 10px; font-weight: 850; }
.routing-credential-key > label:not(.routing-credential-secret) { display: flex; align-items: center; gap: 7px; }
.routing-credential-key input[type="radio"] { width: 15px; height: 15px; flex: 0 0 auto; margin: 0; }
.routing-credential-secret { grid-column: 1 / -1; transition: opacity .15s ease; }
.routing-credential-secret.is-inactive { opacity: .5; }
.routing-credential-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.routing-credential-note { color: var(--muted); font-size: 9px; line-height: 1.65; }
.routing-section, .routing-section > *, .routing-adapter-grid, .routing-policy-grid,
.routing-credentials-grid, .routing-handoff-panel, .routing-card-pool { min-width: 0; }
.routing-section { display: grid; gap: 14px; }
.routing-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; padding: 2px 2px 0; }
.routing-section-head h2 { margin: 5px 0 0; font-size: 23px; }
.routing-section-head p:not(.eyebrow) { max-width: 900px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.routing-adapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.routing-adapter-card { min-width: 0; }
.routing-adapter-card > header { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.routing-adapter-card h3 { margin: 4px 0; font-size: 17px; }
.routing-adapter-card header code { color: var(--muted); font: 10px/1.5 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.routing-adapter-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: 20px; }
.routing-card-badges { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.routing-adapter-config-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--info) 4%, var(--subtle-bg)); }
.routing-adapter-config-link span { color: var(--muted); font-size: 9px; line-height: 1.55; }
.routing-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 16px 20px; }
.routing-fact { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--subtle-bg); }
.routing-fact span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-fact strong { display: block; color: var(--secondary-text); font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.routing-connection-form { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(150px, .8fr) minmax(130px, .65fr) auto; gap: 10px; align-items: end; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--subtle-bg); }
.routing-connection-form label { display: grid; gap: 7px; min-width: 0; }
.routing-connection-form label > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-connection-form > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.6; }
.routing-raw { border-top: 1px solid var(--line); }
.routing-raw summary { padding: 12px 20px; color: var(--info); font-size: 10px; font-weight: 800; cursor: pointer; }
.routing-raw pre { max-height: 500px; margin: 0; padding: 4px 20px 18px; overflow: auto; color: var(--secondary-text); white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.65 "SFMono-Regular", Consolas, monospace; }
.routing-matrix-panel .routing-raw { border: 0; }
.routing-matrix-panel .routing-raw summary { padding: 7px 0; }
.routing-matrix-panel .routing-raw pre { min-width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); }
.routing-compatibility-details { margin: 0 20px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle-bg); }
.routing-compatibility-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
.routing-compatibility-details > summary::-webkit-details-marker { display: none; }
.routing-compatibility-details > summary span:first-child { display: grid; gap: 4px; }
.routing-compatibility-details > summary strong { color: var(--secondary-text); font-size: 11px; }
.routing-compatibility-details > summary small { color: var(--muted); font-size: 9px; }
.routing-compatibility-details > summary span:last-child { color: var(--info); font-size: 18px; transition: transform .18s ease; }
.routing-compatibility-details[open] > summary span:last-child { transform: rotate(45deg); }
.routing-compatibility-details > div { border-top: 1px solid var(--line); }
.routing-matrix { min-width: 760px; table-layout: fixed; }
.routing-matrix th:nth-child(1), .routing-matrix th:nth-child(2) { width: 24%; }
.routing-matrix th:nth-child(3) { width: 14%; }
.routing-matrix th:nth-child(4) { width: 38%; }
.routing-matrix td strong { overflow-wrap: anywhere; }
.routing-disabled-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.routing-revision { flex: none; padding: 7px 10px; border: 1px solid var(--line-bright); border-radius: 999px; color: var(--muted); font: 10px/1 "SFMono-Regular", Consolas, monospace; }
.routing-policy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.routing-policy-card { min-width: 0; }
.routing-policy-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 19px 20px; border-bottom: 1px solid var(--line); }
.routing-policy-card h3 { margin: 5px 0 0; font-size: 16px; }
.routing-policy-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 20px 20px; }
.routing-policy-form > label, .routing-sync-form label { display: grid; gap: 7px; }
.routing-policy-form > label > span, .routing-sync-form label > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.routing-axis-policy { min-width: 0; margin: 0; padding: 13px; display: grid; grid-template-columns: 1fr; gap: 10px; border: 1px solid var(--line-bright); border-radius: 12px; }
.routing-axis-policy legend { padding: 0 7px; color: var(--violet); font-size: 10px; font-weight: 850; }
.routing-axis-policy label { min-width: 0; display: grid; gap: 7px; }
.routing-axis-policy label > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-policy-form > button, .routing-policy-contract-note, .routing-policy-pair-note, .routing-policy-advanced, .routing-route-selection-status, .routing-policy-feedback { grid-column: 1 / -1; }
.routing-policy-advanced { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--subtle-bg); }
.routing-policy-advanced > summary { cursor: pointer; padding: 12px 14px; color: var(--secondary-text); font-size: 10px; font-weight: 850; }
.routing-policy-advanced[open] > summary { border-bottom: 1px solid var(--line); }
.routing-policy-advanced-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.routing-policy-advanced-body > .routing-policy-contract-note,
.routing-policy-advanced-body > .routing-policy-pair-note,
.routing-policy-advanced-body > .routing-funding-policy,
.routing-policy-advanced-body > input[type="hidden"] { grid-column: 1 / -1; }
.routing-route-preset { grid-column: 1 / -1; display: grid; gap: 7px; padding: 14px; border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--violet) 7%, var(--panel)); }
.routing-route-preset > span { color: var(--text); font-size: 11px; font-weight: 900; }
.routing-route-preset > small { color: var(--muted); line-height: 1.55; }
.routing-distribution-policy { grid-column: 1 / -1; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.routing-distribution-policy > legend { padding: 0 6px; font-weight: 900; color: var(--text); }
.routing-distribution-policy > label { display: grid; gap: 7px; }
.routing-distribution-policy > label > span { font-size: 11px; font-weight: 900; color: var(--muted); }
.routing-distribution-weights { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.routing-distribution-weights.is-active { display: grid; }
.routing-distribution-weights label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.routing-distribution-weights label span { grid-column: 1 / -1; font-size: 11px; font-weight: 900; color: var(--muted); }
.routing-distribution-weights label small { color: var(--muted); }
.routing-distribution-weights p { grid-column: 1 / -1; margin: 0; color: var(--muted); line-height: 1.55; }
.routing-route-safety { background: color-mix(in srgb, var(--success) 6%, var(--panel)); }
.routing-route-selection-status { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--info) 28%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--info) 5%, var(--panel)); }
.routing-route-selection-status strong { color: var(--info); font-size: 10px; }
.routing-route-selection-status small { color: var(--secondary-text); font-size: 9px; line-height: 1.6; overflow-wrap: anywhere; }
.routing-policy-feedback { margin: 0; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 10px; color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--panel)); font-size: 10px; font-weight: 800; }
.routing-policy-feedback[hidden] { display: none; }
.routing-policy-contract-note { display: grid; gap: 5px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle-bg); }
.routing-policy-contract-note strong { color: var(--info); font-size: 10px; }
.routing-policy-contract-note small { color: var(--muted); font-size: 9px; line-height: 1.6; }
.routing-policy-pair-note { display: none; gap: 5px; padding: 10px 11px; border: 1px solid rgba(15,139,111,.25); border-radius: 10px; background: rgba(15,139,111,.06); }
.routing-policy-pair-note.is-active { display: grid; }
.routing-policy-pair-note strong { color: var(--brand-strong); font-size: 10px; }
.routing-policy-pair-note small { color: var(--muted); font-size: 9px; line-height: 1.6; }
.routing-fixed-field.is-inactive, .routing-auto-field.is-inactive { opacity: .55; }
.routing-funding-policy { grid-column: 1 / -1; min-width: 0; margin: 2px 0; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; border: 1px solid var(--line-bright); border-radius: 13px; }
.routing-funding-policy legend { padding: 0 7px; color: var(--info); font-size: 10px; font-weight: 850; }
.routing-funding-policy > label { display: grid; gap: 7px; }
.routing-funding-policy label > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-funding-policy > small, .routing-checkbox { grid-column: 1 / -1; }
.routing-funding-policy > small { color: var(--muted); font-size: 9px; line-height: 1.65; }
.routing-checkbox { display: flex !important; align-items: center; gap: 9px !important; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle-bg); }
.routing-checkbox input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; }
.routing-handoff-head-actions { display: grid; justify-items: end; gap: 9px; }
.routing-handoff-head-actions .auto-refresh-control { justify-content: flex-end; }
.routing-handoff-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--subtle-bg); }
.routing-handoff-stats > div { min-width: 0; padding: 14px 18px; border-right: 1px solid var(--line); }
.routing-handoff-stats > div:last-child { border-right: 0; }
.routing-handoff-stats span, .routing-handoff-stats strong { display: block; }
.routing-handoff-stats span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-handoff-stats strong { margin-top: 6px; font-size: 18px; }
.routing-product-sync { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--info) 5%, var(--subtle-bg)); }
.routing-product-sync strong, .routing-product-sync small { display: block; }
.routing-product-sync strong { font-size: 12px; }
.routing-product-sync small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.routing-handoff-body { display: grid; grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr); }
.routing-handoff-form { display: grid; align-content: start; gap: 12px; padding: 19px 20px; border-right: 1px solid var(--line); }
.routing-handoff-form > label { display: grid; gap: 7px; }
.routing-handoff-form > label > span, .routing-handoff-form legend { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-handoff-form fieldset { margin: 0; padding: 12px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 11px; }
.routing-handoff-form legend { padding: 0 6px; }
.routing-handoff-form > small, .routing-stop-form small { color: var(--muted); font-size: 9px; line-height: 1.65; }
.routing-shadow-summary { display: grid; align-content: start; gap: 12px; padding: 19px 20px; }
.routing-shadow-summary > p { margin: -5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.routing-stop-form { display: grid; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--danger) 5%, var(--subtle-bg)); }
.routing-allocation-list { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--subtle-bg); }
.routing-allocation-list > strong { font-size: 10px; }
.routing-allocation-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.routing-allocation-list span { min-width: 0; color: var(--secondary-text); font-size: 10px; overflow-wrap: anywhere; }
.routing-allocation-list small { color: var(--muted); font-size: 9px; }
.routing-shadow-list { display: grid; gap: 8px; }
.routing-shadow-list article { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle-bg); }
.routing-shadow-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.routing-shadow-list p { margin: 7px 0; color: var(--secondary-text); font-size: 10px; line-height: 1.55; }
.routing-shadow-list small { color: var(--muted); font-size: 9px; }
.routing-task-center-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; }
.routing-task-center-link h2 { margin: 5px 0 7px; font-size: 21px; }
.routing-task-center-link p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; }
.routing-task-center-link .button { flex: 0 0 auto; }
.routing-task-detail-heading { min-width: 0; }
.routing-task-detail-heading > div { min-width: 0; }
.routing-task-detail-heading p:last-child { margin: 7px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.routing-task-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 20px 20px; }
.routing-task-summary-grid .routing-fact-secondary { background: color-mix(in srgb, var(--subtle-bg) 72%, transparent); }
.routing-task-summary-grid .routing-fact-secondary span,
.routing-task-summary-grid .routing-fact-secondary strong,
.routing-task-summary-grid .routing-fact-secondary .routing-copy-value { color: var(--muted); }
.routing-card-copy-fact .routing-copy-value { display: block; color: var(--secondary-text); font-size: 11px; font-weight: 800; white-space: pre-wrap; overflow-wrap: anywhere; }
.routing-task-detail-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.routing-task-auto-refresh { display: contents; }
.routing-task-refresh-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 12px; }
.routing-task-refresh-bar span { color: var(--muted); font-size: 12px; font-weight: 700; }
.routing-task-refresh-bar span.is-refreshing { color: var(--info); }
.routing-task-refresh-bar span.is-current { color: var(--success); }
.routing-task-refresh-bar span.is-error { color: var(--danger); }
.routing-callback-replay { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 20px; }
.routing-callback-replay > div { display: grid; gap: 5px; }
.routing-callback-replay h3, .routing-callback-replay p { margin: 0; }
.routing-callback-replay p, .routing-callback-replay small { color: var(--muted); font-size: 11px; line-height: 1.65; }
.routing-callback-replay form { display: grid; justify-items: end; gap: 6px; }
.routing-task-detail-grid > * { min-width: 0; }
.routing-task-resources-body { min-width: 0; padding: 14px; }
.routing-task-resources .routing-task-list { gap: 0; }
.routing-task-resources .routing-task-card { box-shadow: none; }
.routing-task-resources .routing-task-card > header { padding: 14px 16px; }
.routing-task-resources .routing-route-timeline { padding: 6px 16px 14px; }
.routing-business-timeline { display: grid; padding: 4px 22px 20px; }
.routing-business-timeline article { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.routing-business-timeline article:last-child { border-bottom: 0; }
.routing-business-timeline article > div { min-width: 0; }
.routing-business-timeline .timeline-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.routing-business-timeline p { margin: 7px 0; color: var(--secondary-text); line-height: 1.65; overflow-wrap: anywhere; }
.routing-business-timeline small { color: var(--muted); }
.routing-inline-warning { margin: 0 20px 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); border-radius: 11px; color: var(--secondary-text); background: color-mix(in srgb, var(--warning) 7%, var(--subtle-bg)); }
.routing-cards-table { min-width: 1040px; table-layout: fixed; }
.routing-cards-table td { vertical-align: top; }
.routing-card-pool-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 12px 18px 0; }
.routing-card-pool-bulk-workspace { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; }
.routing-card-pool-controls { display: flex; align-items: end; justify-content: flex-end; gap: 12px; }
.routing-card-pool-sort { display: grid; gap: 4px; min-width: 190px; }
.routing-card-pool-sort span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-card-pool-sort select { min-height: 34px; padding: 6px 9px; }
.routing-card-view-toggle { display: flex; justify-content: flex-end; gap: 7px; }
.routing-card-view-toggle .button { min-height: 34px; padding: 7px 14px; }
.routing-card-view-toggle .is-active { color: #fff; border-color: var(--accent); background: var(--accent); }
.routing-card-policy-bulk-form { display: grid; grid-template-columns: minmax(190px, 250px) auto; align-items: end; gap: 6px 8px; }
.routing-card-policy-bulk-form label { display: grid; gap: 4px; }
.routing-card-policy-bulk-form label span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-card-policy-bulk-form select { min-height: 34px; padding: 6px 9px; }
.routing-card-policy-bulk-form small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; }
.routing-card-policy-bulk-form small[data-tone="success"] { color: var(--success); }
.routing-card-policy-bulk-form small[data-tone="danger"] { color: var(--danger); }
.routing-card-delete-bulk-form { display: grid; grid-template-columns: auto auto minmax(180px, auto); align-items: center; gap: 6px 10px; padding-left: 16px; border-left: 1px solid var(--line); }
.routing-card-delete-bulk-form > strong { font-size: 11px; white-space: nowrap; }
.routing-card-delete-bulk-form > small { grid-column: 1 / -1; color: var(--muted); font-size: 8px; line-height: 1.5; }
.routing-card-delete-bulk-form > small[data-tone="success"] { color: var(--success); }
.routing-card-delete-bulk-form > small[data-tone="danger"] { color: var(--danger); }
.routing-card-select-all, .routing-card-delete-selection { display: inline-flex; align-items: center; gap: 7px; color: var(--secondary-text); font-size: 10px; font-weight: 800; cursor: pointer; }
.routing-card-select-all input, .routing-card-delete-selection input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.routing-card-delete-selection.is-disabled { color: var(--muted); cursor: not-allowed; }
.routing-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 16px 18px 20px; }
.routing-card-grid.is-hidden, [data-card-pool-view].is-hidden { display: none; }
.routing-payment-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--panel-from), var(--panel-to)); box-shadow: var(--shadow-soft); }
.routing-payment-card.is-deleted, .routing-cards-table tr.is-deleted { opacity: .5; pointer-events: none; }
.routing-payment-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 16px 11px; }
.routing-payment-card > header div { min-width: 0; }
.routing-card-heading { display: flex; align-items: flex-start; gap: 10px; }
.routing-card-heading .routing-card-delete-selection { flex: 0 0 auto; margin-top: 2px; }
.routing-payment-card > header span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.routing-payment-card > header strong { display: block; margin-top: 5px; font-size: 18px; letter-spacing: .055em; }
.routing-payment-card-balance { padding: 4px 16px 14px; }
.routing-payment-card-balance span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.routing-payment-card-balance strong { display: block; margin-top: 4px; color: var(--accent); font-size: 25px; line-height: 1.15; }
.routing-card-snapshot-warning { display: block; margin-top: 7px; color: var(--warning); font-size: 10px; font-weight: 800; line-height: 1.45; }
.routing-card-secret { margin: 0 13px 13px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 4%, var(--input-bg)); transition: border-color .18s ease, background .18s ease; }
.routing-card-secret.is-loaded { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--input-bg)); }
.routing-card-secret.is-error { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: color-mix(in srgb, var(--danger) 5%, var(--input-bg)); }
.routing-card-secret-loading, .routing-card-secret-unavailable { display: block; color: var(--muted); font-size: 11px; line-height: 1.55; }
.routing-card-secret-fields { display: grid; gap: 9px; }
.routing-card-secret-fields > div { min-width: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.routing-card-secret-fields span { color: var(--muted); font-size: 10px; font-weight: 800; }
.routing-card-secret-fields strong { min-width: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; user-select: all; }
.routing-card-secret-fields button { min-width: 34px; padding: 3px 0; color: var(--accent); border: 0; background: transparent; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.routing-card-secret-note { display: block; margin-top: 9px; color: var(--warning); font-size: 10px; line-height: 1.55; }
.routing-card-secret .button { margin-top: 7px; }
.routing-card-note-badge { margin: 0 13px 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--line)); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--warning) 8%, var(--panel)); font-size: 11px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.routing-card-note-badge.is-empty { color: var(--muted); border-color: var(--line); background: var(--input-bg); font-weight: 700; }
.routing-card-note-form { display: grid; gap: 8px; margin: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); }
.routing-card-note-form label { display: grid; gap: 6px; }
.routing-card-note-form label > span { color: var(--muted); font-size: 10px; font-weight: 850; }
.routing-card-note-form input { width: 100%; min-width: 0; }
.routing-card-note-status { color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.routing-card-note-status[data-tone="success"] { color: var(--success); }
.routing-card-note-status[data-tone="danger"] { color: var(--danger); }
.routing-cards-table .routing-card-secret { min-width: 220px; margin: 8px 0 0; padding: 8px; }
.routing-cards-table .routing-card-note-form { min-width: 220px; margin: 0 0 8px; padding: 8px; }
.routing-cards-table .routing-card-delete-selection { margin: 0 0 8px; }
.routing-cards-table .routing-card-secret-fields > div { grid-template-columns: 36px minmax(0, 1fr) auto; }
.routing-payment-card dl { margin: 0; padding: 13px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--subtle-bg); }
.routing-payment-card dl div { min-width: 0; }
.routing-payment-card dt { color: var(--muted); font-size: 10px; font-weight: 800; }
.routing-payment-card dd { margin: 4px 0 0; font-size: 13px; line-height: 1.5; font-weight: 750; overflow-wrap: anywhere; }
.routing-payment-card dl small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.routing-card-policy-form { padding: 13px 13px 14px; display: grid; gap: 9px; }
.routing-card-policy-form label { display: grid; gap: 5px; }
.routing-card-policy-form label > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.routing-card-policy-form select { min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 12px; }
.routing-card-policy-status { min-height: 14px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.routing-card-policy-status[data-tone="success"] { color: var(--success); }
.routing-card-policy-status[data-tone="danger"] { color: var(--danger); }
.routing-card-order-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.routing-card-order-actions .button { min-width: 0; min-height: 32px; padding: 6px 7px; font-size: 9px; }
.routing-cards-table .routing-card-policy-form { min-width: 0; width: 100%; padding: 0; }
.routing-card-delete-form { display: grid; gap: 6px; padding: 0 13px 13px; }
.routing-card-delete-form small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.routing-cards-table .routing-card-delete-form { min-width: 0; padding: 10px 0 0; }
.routing-card-refresh-form { display: grid; justify-items: end; gap: 5px; min-width: 190px; }
.routing-card-refresh-form small { color: var(--muted); font-size: 9px; text-align: right; }
.routing-card-pool .routing-raw { border: 0; }
.routing-card-pool .routing-raw summary { padding: 7px 0; }
.routing-card-pool .routing-raw pre { min-width: 280px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); }
.routing-sync-form { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 12px; align-items: end; padding: 17px 20px; border-top: 1px solid var(--line); background: var(--subtle-bg); }
.routing-sync-form > div strong, .routing-sync-form > div small { display: block; }
.routing-sync-form > div strong { font-size: 12px; }
.routing-sync-form > div small { margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.routing-task-list { display: grid; gap: 14px; }
.routing-task-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--panel-from), var(--panel-to)); }
.routing-task-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.routing-task-card > header h3 { margin: 5px 0; font: 16px/1.4 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.routing-task-card > header small { display: block; color: var(--muted); font-size: 10px; }
.routing-task-card > header > div:last-child { display: grid; justify-items: end; gap: 8px; }
.routing-task-route-control { display: grid; gap: 13px; padding: 18px 22px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--violet) 4%, var(--subtle-bg)); }
.routing-axis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.routing-axis-grid fieldset { min-width: 0; margin: 0; padding: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 1px solid var(--line-bright); border-radius: 12px; }
.routing-axis-grid fieldset.is-auto { border-color: var(--line); }
.routing-axis-grid legend { padding: 0 7px; color: var(--violet); font-size: 10px; font-weight: 850; }
.routing-axis-grid label { min-width: 0; display: grid; gap: 7px; }
.routing-axis-grid label > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-compatibility-hint { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--subtle-bg); font-size: 10px; line-height: 1.6; }
.routing-compatibility-hint strong { flex: 0 0 auto; }
.routing-compatibility-hint span { color: var(--secondary-text); }
.routing-compatibility-hint[data-tone="success"] { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.routing-compatibility-hint[data-tone="success"] strong { color: var(--accent); }
.routing-compatibility-hint[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.routing-compatibility-hint[data-tone="danger"] strong { color: var(--danger); }
.routing-task-route-control > small { color: var(--muted); font-size: 9px; line-height: 1.65; }
.routing-route-lock { display: grid; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: var(--subtle-bg); }
.routing-route-lock > div { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 15px; }
.routing-route-lock > div > strong { color: var(--secondary-text); font-size: 10px; }
.routing-route-lock p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.routing-route-lock code { color: var(--warning); }
.routing-manual-review { display: grid; gap: 14px; padding: 18px 22px; border-top: 1px solid rgb(255 184 77 / 30%); background: color-mix(in srgb, var(--warning) 5%, var(--subtle-bg)); }
.routing-manual-review h4 { margin: 4px 0 6px; color: var(--primary-text); font-size: 14px; }
.routing-manual-review p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.routing-manual-review > label { display: grid; gap: 7px; }
.routing-manual-review > label > span { color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-manual-review textarea { min-height: 92px; resize: vertical; }
.routing-manual-outcomes { display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }
.routing-manual-outcomes legend { margin-bottom: 2px; color: var(--muted); font-size: 9px; font-weight: 800; }
.routing-manual-outcome { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); cursor: pointer; }
.routing-manual-outcome:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 72%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.routing-manual-outcome input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.routing-manual-outcome > span { display: grid; gap: 4px; }
.routing-manual-outcome strong { color: var(--primary-text); font-size: 10px; }
.routing-manual-outcome small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.routing-manual-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.routing-manual-review-unavailable { border-color: rgb(255 107 125 / 30%); }
.routing-route-timeline { padding: 8px 22px 20px; }
.routing-route-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.routing-route-step:last-child { border-bottom: 0; }
.routing-route-step p { margin: 6px 0; color: var(--secondary-text); font-size: 11px; line-height: 1.6; }
.routing-route-step small { color: var(--muted); font-size: 9px; }
.routing-route-step .routing-raw { margin-top: 8px; border: 1px solid var(--line); border-radius: 9px; }
.routing-route-step .routing-raw summary { padding: 9px 11px; }
.routing-route-step .routing-raw pre { padding: 0 11px 11px; }
.routing-empty { min-height: 120px; display: grid; place-items: center; padding: 24px; color: var(--muted); border: 1px dashed var(--line-bright); border-radius: 13px; background: var(--subtle-bg); text-align: center; font-size: 11px; }
.routing-empty.compact { min-height: 80px; }
.routing-contract-raw > .routing-raw { border: 0; }
.routing-contract-raw > .routing-raw summary { padding: 18px 24px; }
.routing-contract-raw > .routing-raw pre { padding: 0 24px 24px; }
.error-shell { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.error-shell h1 { margin: 0; }
.error-shell p { color: var(--muted); }
.error-code { font-size: 58px; font-weight: 900; color: var(--accent); opacity: .3; }
.main-history-intro { overflow: hidden; }
.history-tabs { display: flex; gap: 8px; padding: 0 24px 22px; flex-wrap: wrap; }
.history-tabs a { display: inline-flex; min-height: 36px; align-items: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 800; text-decoration: none; }
.history-tabs a:hover, .history-tabs a.active { border-color: var(--accent); background: var(--subtle-bg); color: var(--accent); }
.history-filters { padding: 18px 20px; display: grid; gap: 15px; }
.history-filters form { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(130px, 1fr)) auto auto; gap: 10px; align-items: end; }
.history-export { display: flex; flex-wrap: wrap; gap: 9px; }
.history-records { display: grid; gap: 16px; }
.history-record { overflow: visible; }
.history-record > header { padding: 19px 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-bottom: 1px solid var(--line); }
.history-record h3 { margin: 5px 0 0; font-size: 17px; font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.history-state { flex: none; padding: 6px 10px; border-radius: 999px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 10px; font-weight: 850; }
.history-card-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 22px 0; }
.history-card-pair > div { min-width: 0; padding: 14px; border: 1px solid var(--line-bright); border-radius: 12px; background: var(--input-bg); }
.history-card-pair span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 800; }
.history-plaintext-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.history-plaintext { margin: 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.65 "SFMono-Regular", Consolas, monospace; }
.history-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 18px 22px 22px; }
.history-field { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--subtle-bg); }
.history-field-full { grid-column: 1 / -1; }
.history-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.history-field strong { display: block; color: var(--secondary-text); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.history-result-body { margin: 0; max-height: 480px; overflow: auto; color: var(--secondary-text); white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.7 "SFMono-Regular", Consolas, monospace; }
.history-related { margin: 0 22px 20px; border: 1px solid var(--line-bright); border-radius: 12px; background: var(--subtle-bg); }
.history-related-title { padding: 13px 15px; color: var(--info); font-size: 11px; font-weight: 800; }
.history-related article { border-top: 1px solid var(--line); }
.history-unavailable-list { margin: 0 22px 20px; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--warning) 7%, transparent); }
.history-unavailable-list strong { display: block; color: var(--warning); font-size: 11px; }
.history-unavailable-list p, .history-unavailable-list ul { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.history-unavailable { color: var(--warning); font-size: 11px; line-height: 1.6; }
.history-pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.history-pager > :last-child { justify-self: end; }
.history-pager > span { color: var(--muted); font-size: 10px; }

@media (max-width: 1500px) {
  :root { --sidebar-width: 206px; --page-gutter: 18px; }
  .content { padding-top: 20px; gap: 15px; }
  .routing-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .routing-adapter-card > header { padding: 17px 18px; }
  .routing-facts { padding: 14px 16px; }
  .routing-credential-form, .routing-policy-form { padding: 16px 17px 18px; }
  .cat-table { display: block; min-width: 0; }
  .cat-table thead { display: none; }
  .cat-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
  .cat-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle-bg); }
  .cat-table td { display: block; width: auto; min-width: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .cat-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
  .cat-table td:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 1360px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: calc((min(86vw, var(--sidebar-width)) + 24px) * -1); width: min(86vw, var(--sidebar-width)); transition: left .2s ease; box-shadow: var(--shadow); }
  body.sidebar-open .sidebar { left: 0; }
  body.sidebar-open { overflow: hidden; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 15; display: block; border: 0; padding: 0; background: rgb(0 0 0 / 52%); opacity: 0; pointer-events: none; transition: opacity .2s ease; backdrop-filter: blur(2px); }
  body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .mobile-nav { display: inline-block; }
  .topbar-inner { justify-content: flex-start; gap: 14px; }
  .topbar-meta { margin-left: auto; }
}
@media (max-width: 1200px) {
  .unified-task-wrap { overflow-x: visible; }
  .unified-task-table { display: block; min-width: 0; }
  .unified-task-table thead { display: none; }
  .unified-task-table tbody { display: grid; gap: 12px; padding: 14px; }
  .unified-task-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--subtle-bg); }
  .unified-task-table td { display: block; width: auto; min-width: 0 !important; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
  .unified-task-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .unified-task-table td:nth-last-child(-n+2) { border-bottom: 0; }
  .unified-task-table tbody tr:hover td { background: transparent; }
  .routing-credentials-grid { grid-template-columns: 1fr; }
  .routing-adapter-grid { grid-template-columns: 1fr; }
  .routing-matrix, .routing-cards-table { min-width: 0; }
  .routing-matrix thead, .routing-cards-table thead { display: none; }
  .routing-matrix tbody, .routing-cards-table tbody { display: grid; gap: 12px; padding: 14px; }
  .routing-matrix tr, .routing-cards-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--subtle-bg); }
  .routing-matrix td, .routing-cards-table td { display: block; width: auto; min-width: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; overflow-wrap: anywhere; }
  .routing-matrix td::before, .routing-cards-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
  .routing-matrix td:nth-last-child(-n+2), .routing-cards-table td:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 1100px) {
  .routing-active-routes-grid { grid-template-columns: 1fr; }
  .routing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .spacex-summary { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .history-filters form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .observation-facts, .observation-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-handoff-body { grid-template-columns: 1fr; }
  .routing-handoff-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .routing-product-sync { grid-template-columns: 1fr; align-items: stretch; }
  .routing-policy-grid { grid-template-columns: 1fr; }
  .routing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-connection-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-connection-form > small { grid-column: 1 / -1; }
  .routing-sync-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-sync-form > div { grid-column: 1 / -1; }
  .routing-card-refresh-form { min-width: 0; justify-items: stretch; }
  .routing-card-refresh-form small { text-align: left; }
  .observation-facts > div:nth-child(2), .observation-detail-summary > div:nth-child(2) { border-right: 0; }
  .observation-facts > div:nth-child(-n+2), .observation-detail-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .filter-form { grid-template-columns: 1fr 1fr; }
  .task-center-filter { grid-template-columns: 1fr 1fr; }
  .task-source-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-today-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-today-summary .latest { grid-column: 1 / -1; }
  .task-center-toolbar { align-items: flex-start; flex-direction: column; }
  .task-loading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-center-refresh-meta { width: 100%; justify-content: space-between; }
  .manual-grid, .provider-grid { grid-template-columns: 1fr; }
  .history-card-pair { grid-template-columns: 1fr; }
  .routing-notice { grid-template-columns: 1fr; }
  .routing-active-routes-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .routing-adapter-grid { grid-template-columns: 1fr; }
  .routing-flow-grid { grid-template-columns: 1fr; }
  .routing-module-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-axis-grid { grid-template-columns: 1fr; }
  .routing-section-head { align-items: flex-start; flex-direction: column; }
  .routing-disabled-actions { justify-content: flex-start; }
  .routing-cross-module-note { align-items: flex-start; flex-direction: column; }
  .routing-credential-card > header, .routing-adapter-config-link { align-items: flex-start; flex-direction: column; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .panel-head > :last-child { max-width: 100%; }
  .cat-table tbody { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .routing-card-grid { grid-template-columns: 1fr; padding: 12px; }
  :root { --page-gutter: 16px; --topbar-height: 70px; }
  .content { padding-top: 16px; padding-bottom: 28px; }
  .topbar-inner { padding-top: 10px; padding-bottom: 10px; }
  .admin-name { display: none; }
  .theme-toggle { min-width: 38px; width: 38px; padding: 0; }
  .theme-toggle .theme-label { display: none; }
  .theme-toggle-login { top: 12px; right: 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { min-height: 112px; padding: 16px; }
  .stat-card strong { font-size: 27px; }
  .filter-form { grid-template-columns: 1fr; }
  .task-center-filter { grid-template-columns: 1fr; }
  .task-loading-grid { grid-template-columns: 1fr; padding: 0 14px 14px; }
  .task-source-summary { grid-template-columns: 1fr 1fr; padding: 0 16px 16px; }
  .task-today-summary { grid-template-columns: 1fr 1fr; padding: 0 16px 12px; }
  .totp-qr-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .task-center-gates { width: 100%; }
  .task-center-toolbar { padding: 0 16px 12px; }
  .task-center-refresh-meta { align-items: flex-start; flex-direction: column; }
  .task-sound-volume { grid-template-columns: auto minmax(90px, 1fr) auto; width: 100%; }
  .task-sound-volume input { width: 100%; }
  .order-notification-host { top: 74px; right: 16px; }
  .detail-heading { align-items: flex-start; flex-direction: column; }
  .details, .provider-metrics, .provider-state-metrics { grid-template-columns: 1fr; }
  .routing-module-nav { grid-template-columns: 1fr; }
  .routing-flow-card { grid-template-columns: 1fr; }
  .detail-item.full { grid-column: auto; }
  .action-grid { grid-template-columns: 1fr; }
  .inline-control { grid-template-columns: 1fr; }
  .cat-table { min-width: 0; }
  .table-wrap .cat-table thead { display: none; }
  .table-wrap .cat-table,
  .table-wrap .cat-table tbody,
  .table-wrap .cat-table tr,
  .table-wrap .cat-table td { display: block; width: 100%; }
  .table-wrap .cat-table tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table-wrap .cat-table tr:last-child { border-bottom: 0; }
  .table-wrap .cat-table td { border: 0; padding: 4px 0; }
  .table-wrap .cat-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .table-wrap .cat-table td:empty { display: none; }
  .table-wrap .cat-table td:last-child { padding-top: 10px; }
  .table-wrap .cat-table td:last-child .button { width: 100%; }
  .sensitive-actions { flex-direction: column; align-items: flex-start; }
  .panel-head { padding: 18px; }
  .secret-actions { flex-direction: column; }
  .secret-actions form, .secret-actions .button { margin: 0; width: 100%; }
  .session-inline .button { width: 100%; }
  .spacex-intro { align-items: flex-start; flex-direction: column; }
  .spacex-state { justify-items: start; }
  .issue-form { grid-template-columns: 1fr; }
  .issue-form .button, .funding-check { grid-column: auto; }
  .issued-list > div { grid-template-columns: 1fr; }
  .history-pager { grid-template-columns: 1fr; text-align: center; }
  .history-pager > :last-child, .history-pager > * { justify-self: stretch; }
  .history-filters form, .history-field-grid { grid-template-columns: 1fr; }
  .history-field-full { grid-column: auto; }
  .history-record > header { flex-direction: column; }
  .history-card-pair, .history-field-grid { padding-left: 16px; padding-right: 16px; }
  .history-related, .history-unavailable-list { margin-left: 16px; margin-right: 16px; }
  .observation-records-head, .observation-card-head, .observation-card-foot { align-items: stretch; flex-direction: column; }
  .observation-panel-actions, .observation-status, .observation-card-actions { justify-content: space-between; }
  .auto-refresh-control { width: 100%; justify-content: space-between; }
  .routing-handoff-head-actions { width: 100%; justify-items: stretch; }
  .observation-list { padding: 12px; }
  .observation-facts, .observation-card-pair, .observation-detail-summary { grid-template-columns: 1fr; }
  .observation-facts > div, .observation-detail-summary > div { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .observation-facts > div:last-child, .observation-detail-summary > div:last-child { border-bottom: 0; }
  .observation-card-pair { padding: 12px; }
  .observation-card-actions { align-items: stretch; flex-direction: column; }
  .observation-card-actions .button { width: 100%; }
  .observation-detail-heading h2 { max-width: calc(100vw - 32px); font-size: 20px; }
  .observation-detail-heading .detail-state { width: 100%; align-items: stretch; flex-direction: column; }
  .routing-summary-grid, .routing-facts, .routing-policy-form, .routing-policy-advanced-body, .routing-sync-form, .routing-connection-form, .routing-funding-policy, .routing-axis-grid fieldset, .routing-credential-form, .routing-credential-key { grid-template-columns: 1fr; }
  .routing-handoff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-handoff-stats > div:nth-child(2) { border-right: 0; }
  .routing-handoff-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .routing-allocation-list > div { grid-template-columns: 1fr auto; }
  .routing-allocation-list small { grid-column: 1 / -1; }
  .routing-matrix tr, .routing-cards-table tr { grid-template-columns: 1fr; }
  .routing-matrix td, .routing-cards-table td, .routing-matrix td:nth-last-child(-n+2), .routing-cards-table td:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .routing-matrix td:last-child, .routing-cards-table td:last-child { border-bottom: 0; }
  .routing-policy-form > button, .routing-policy-contract-note, .routing-policy-pair-note, .routing-route-preset, .routing-route-selection-status, .routing-policy-feedback, .routing-sync-form > div, .routing-connection-form > small, .routing-funding-policy > small, .routing-checkbox { grid-column: auto; }
  .routing-adapter-card > header, .routing-task-card > header { flex-direction: column; }
  .routing-card-badges { margin-left: 0; justify-content: flex-start; }
  .routing-credential-base, .routing-credential-key, .routing-credential-actions, .routing-credential-note, .routing-credential-secret { grid-column: auto; }
  .routing-credential-actions, .routing-credential-actions .button { width: 100%; }
  .routing-task-card > header > div:last-child { justify-items: start; }
  .routing-disabled-actions, .routing-disabled-actions .button { width: 100%; }
  .routing-route-timeline { padding-left: 15px; padding-right: 15px; }
  .routing-task-route-control, .routing-route-lock, .routing-manual-review { padding-left: 15px; padding-right: 15px; }
  .routing-compatibility-hint { flex-direction: column; }
}

.card-admin-hero,
.card-admin-results {
  overflow: hidden;
}

.card-admin-query {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 20px;
  border-top: 1px solid var(--line);
}

.card-admin-query label {
  display: grid;
  gap: 8px;
}

.card-admin-query textarea {
  min-height: 150px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.5;
}

.card-admin-issue-form {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(150px, .45fr) minmax(220px, 1fr) minmax(260px, 1.2fr) auto;
  align-items: end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--line);
}

.card-admin-issue-form label,
.card-admin-exchange-reason {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.card-admin-issue-form label > span,
.card-admin-exchange-reason > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.card-admin-issued { overflow: hidden; }
.card-admin-issued-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px 0;
}
.card-admin-issued-tools > span { color: var(--muted); font-size: 11px; }

.card-admin-results .panel-head {
  border-bottom: 1px solid var(--line);
}

.card-admin-result-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.card-admin-bulk-actions,
.card-admin-result-head,
.card-admin-row-actions,
.card-admin-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-admin-bulk-actions,
.card-admin-result-head {
  justify-content: space-between;
}

.card-admin-bulk-actions {
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line-bright);
  border-radius: 13px;
  background: var(--surface-2);
}

.card-admin-bulk-actions > div:first-child {
  display: grid;
  gap: 8px;
}

.card-admin-result-list {
  display: grid;
  gap: 12px;
}

.card-admin-result {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}

.card-admin-result-missing {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.card-admin-result-missing span {
  color: var(--muted);
}

.selection-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.selection-check input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.selection-check-all {
  color: var(--accent);
  font-size: 12px;
}

.selection-check-locked {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.selection-check-locked > span:first-child {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  background: var(--surface);
}

.card-admin-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.card-admin-code-grid > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.card-admin-code-grid small,
.card-admin-meta {
  color: var(--muted);
  font-size: 11px;
}

.card-admin-code-grid code {
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 13px;
}

.card-admin-code-grid-single { grid-template-columns: minmax(0, 1fr); }

.card-admin-code-copy {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  font: 700 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
  text-align: left;
  cursor: pointer;
}

.card-admin-code-copy:hover { color: var(--accent); }

.card-admin-exchange-reason {
  flex: 1 1 280px;
}

.card-admin-meta {
  flex-wrap: wrap;
}

.card-admin-row-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.card-center { overflow: hidden; }
.card-center-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
}
.card-center-summary article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}
.card-center-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }
.card-center-summary strong { font-size: 24px; }
.card-center-summary .success strong { color: var(--success); }
.card-center-summary .warning strong { color: var(--warning); }
.card-center-summary .danger strong { color: var(--danger); }
.card-center .history-tabs { padding-inline: 20px; }
.card-center-filter {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(150px, .75fr)) repeat(2, minmax(150px, .8fr)) auto auto;
  align-items: end;
  gap: 10px;
  padding: 18px 20px;
  border-block: 1px solid var(--line);
}
.card-center-filter label { display: grid; gap: 7px; min-width: 0; }
.card-center-filter label > span { color: var(--muted); font-size: 11px; font-weight: 800; }
.card-center-table { width: 100%; border-collapse: collapse; }
.card-center-table th,
.card-center-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.card-center-table th { color: var(--muted); background: var(--surface-2); font-size: 11px; }
.card-center-table td { font-size: 12px; }
.card-center-table td > strong,
.card-center-table td > small { display: block; }
.card-center-table td > small { margin-top: 5px; color: var(--muted); }
.card-center-table form { margin: 0; }
.card-center-card-list { display: grid; gap: 10px; padding: 18px 20px; }
.card-center-card {
  display: grid;
  grid-template-columns: 90px minmax(260px, 1.3fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-2);
}
.card-center-card-head { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.card-center-card .card-admin-meta { display: grid; gap: 4px; }
.card-center-card form { margin: 0; }
.card-center-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  color: var(--muted);
  font-size: 12px;
}
.card-center-pager > :last-child { justify-self: end; }

@media (max-width: 720px) {
  .card-admin-query,
  .card-admin-issue-form,
  .card-admin-code-grid {
    grid-template-columns: 1fr;
  }
  .card-admin-query .button {
    width: 100%;
  }
  .card-admin-bulk-actions,
  .card-admin-result-head {
    align-items: stretch;
    flex-direction: column;
  }
  .card-admin-bulk-actions .inline-actions,
  .card-admin-bulk-actions .button,
  .card-admin-row-actions .button {
    width: 100%;
  }
  .card-admin-row-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .card-center-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-center-filter { grid-template-columns: 1fr; }
  .card-center-filter .button { width: 100%; }
  .card-center-card { grid-template-columns: 1fr; }
  .card-center-pager { grid-template-columns: 1fr; text-align: center; }
  .card-center-pager > * { justify-self: stretch !important; }
}

@media (min-width: 721px) and (max-width: 1180px) {
  .card-admin-issue-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-admin-issue-form .button { min-height: 46px; }
  .card-center-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-center-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-center-card { grid-template-columns: 70px minmax(220px, 1fr); }
}

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

/* --------------------------------------------------------------------------
   2026 product UI refresh
   One visual system for every operational page. Business behavior stays in
   the server renderers; this layer only improves hierarchy and responsiveness.
   -------------------------------------------------------------------------- */

:root {
  --radius: 18px;
  --content-max: 1480px;
  --page-gutter: clamp(16px, 2vw, 30px);
  --topbar-height: 82px;
  --shadow-soft: 0 8px 28px rgb(0 0 0 / 13%);
  --shadow-panel: 0 1px 2px rgb(0 0 0 / 10%), 0 12px 38px rgb(0 0 0 / 9%);
  --accent-soft: rgb(100 232 187 / 9%);
  --panel: var(--surface);
  --success: var(--accent);
}

:root[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f8fafb;
  --surface-3: #eef3f5;
  --line: #e1e7ec;
  --line-bright: #cdd7de;
  --text: #142034;
  --muted: #657286;
  --accent: #07866b;
  --accent-2: #0b9b7a;
  --body-glow: rgb(7 134 107 / 8%);
  --panel-from: #ffffff;
  --panel-to: #fcfdfd;
  --shadow-panel: 0 1px 2px rgb(32 52 68 / 4%), 0 12px 36px rgb(34 55 72 / 6%);
  --shadow-soft: 0 8px 26px rgb(34 55 72 / 7%);
  --accent-soft: rgb(7 134 107 / 8%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface-2: #f8fafb;
    --surface-3: #eef3f5;
    --line: #e1e7ec;
    --line-bright: #cdd7de;
    --text: #142034;
    --muted: #657286;
    --accent: #07866b;
    --accent-2: #0b9b7a;
    --body-glow: rgb(7 134 107 / 8%);
    --panel-from: #ffffff;
    --panel-to: #fcfdfd;
    --shadow-panel: 0 1px 2px rgb(32 52 68 / 4%), 0 12px 36px rgb(34 55 72 / 6%);
    --shadow-soft: 0 8px 26px rgb(34 55 72 / 7%);
    --accent-soft: rgb(7 134 107 / 8%);
  }
}

html {
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(circle at 82% -8%, var(--body-glow), transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 93%, var(--surface)), var(--bg) 22rem);
}

.sidebar {
  padding: 20px 14px 14px;
  border-right-color: color-mix(in srgb, var(--line) 86%, transparent);
  box-shadow: 12px 0 40px rgb(0 0 0 / 3%);
}

.brand {
  margin-bottom: 14px;
  padding: 2px 5px 18px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.brand strong { font-size: 15px; }
.brand small { margin-top: 3px; font-size: 11px; }
.nav { gap: 16px; padding-right: 2px; }
.nav-group { gap: 5px; }
.nav-group-label { padding: 0 11px 3px; font-size: 10px; letter-spacing: .08em; }
.nav-link { min-height: 40px; gap: 10px; padding: 5px 8px; border-radius: 12px; font-size: 13px; }
.nav-icon { width: 29px; height: 29px; flex-basis: 29px; }
.nav-link.active { box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 7%, transparent); }
.sidebar-foot { padding-top: 14px; }

.topbar {
  border-bottom-color: color-mix(in srgb, var(--line) 88%, transparent);
  box-shadow: 0 1px 0 rgb(255 255 255 / 2%);
}

.topbar-inner { padding-block: 12px; }
.page-heading { display: grid; gap: 4px; }
.topbar h1 { margin: 0; font-size: clamp(23px, 2vw, 29px); line-height: 1.08; }
.page-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.topbar-meta { flex: none; }
.theme-toggle { height: 38px; border-radius: 12px; }
.role-pill { padding: 6px 10px; }

.content {
  padding-top: 22px;
  padding-bottom: 46px;
  gap: 16px;
}

.content > .routing-module-nav:first-child { margin-top: -2px; }

.eyebrow {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: none;
}

.panel {
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--panel-from), var(--panel-to));
  box-shadow: var(--shadow-panel);
}

.panel-head { padding: 17px 19px; gap: 18px; }
.panel-head h2 { margin-top: 5px; font-size: 19px; line-height: 1.25; }
.panel-head h3 { margin-top: 5px; font-size: 17px; line-height: 1.3; }
.panel-caption { max-width: 920px; margin-top: 7px; font-size: 11px; line-height: 1.65; }

.stats-grid { gap: 11px; }
.stat-card {
  min-height: 112px;
  padding: 17px 18px;
  border-radius: 17px;
  background: linear-gradient(155deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-soft);
}
.stat-card::after { right: -34px; bottom: -42px; width: 96px; height: 96px; }
.stat-card > span { font-size: 11px; }
.stat-card strong { margin: 8px 0 4px; font-size: 29px; }
.stat-card small { font-size: 10px; }

.button {
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 11px;
  font-size: 11px;
  letter-spacing: .005em;
  box-shadow: none;
}
.button-primary { box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 13%, transparent); }
.button-small { min-height: 32px; padding: 6px 10px; font-size: 10px; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-soft); }

label { gap: 6px; font-size: 11px; }
input, select, textarea {
  min-height: 40px;
  padding: 10px 11px;
  border-radius: 11px;
  font-size: 12px;
}
textarea { min-height: 96px; line-height: 1.55; }

.filter-panel { padding: 14px; }
.filter-form, .task-center-filter, .cat-filter { gap: 10px; }
.result-count { font-size: 11px; white-space: nowrap; }
.badge { padding: 5px 9px; font-size: 10px; }
.empty-state { min-height: 150px; padding: 26px; }
.empty-state span { max-width: 520px; font-size: 11px; line-height: 1.6; }

.table-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
}
table { min-width: 760px; }
th, td { padding: 12px 14px; }
th { font-size: 10px; letter-spacing: .055em; text-transform: none; }
td { font-size: 12px; line-height: 1.5; }
td small { margin-top: 4px; font-size: 10px; }
.task-link { line-height: 1.45; }

.task-source-summary { gap: 9px; padding: 0 19px 18px; }
.task-source-summary a { padding: 12px 14px; border-radius: 12px; }
.task-source-summary strong { font-size: 19px; }
.task-source-summary span { font-size: 10px; }
.task-center-freshness { margin: 0; }

.observation-list { gap: 11px; padding: 15px; }
.observation-card { border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.observation-card-head { padding: 14px 16px 13px; }
.observation-request-id { max-width: 920px; font-size: 11px; }
.observation-facts > div { min-height: 76px; padding: 12px 16px; }
.observation-facts strong { margin-top: 6px; }
.observation-card-pair { padding: 12px 16px; }
.observation-card-pair > div { padding: 10px 12px; }
.observation-card-foot { padding: 12px 16px 14px; }

.detail-heading { padding-bottom: 4px; }
.detail-heading h2 { font-size: 25px; }
.detail-grid { gap: 16px; }
.details { padding: 17px 19px; gap: 10px; }
.detail-item { padding: 11px 12px; }
.timeline { padding: 7px 20px 20px; }
.timeline-item { padding: 14px 0; }

.manual-grid, .provider-grid { gap: 14px; padding: 17px; }
.provider-grid { padding: 0; }
.manual-card, .provider-card { border-radius: 15px; }
.provider-card { padding: 18px; }
.provider-metrics { gap: 8px; margin: 16px 0; }
.provider-metrics > div { padding: 11px; }
.provider-contract { padding: 12px; }

.routing-module-nav { gap: 8px; margin-bottom: 14px; }
.routing-module-nav a {
  min-height: 64px;
  padding: 11px 13px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 5px 18px rgb(0 0 0 / 3%);
}
.routing-module-nav a.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 7px 20px color-mix(in srgb, var(--accent) 7%, transparent); }
.routing-module-nav strong { font-size: 13px; }
.routing-module-nav span { font-size: 10px; line-height: 1.45; }

.routing-module-intro {
  margin-bottom: 14px;
  padding: 19px 21px;
  border-radius: 17px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 62%, var(--surface)), var(--surface) 55%),
    var(--surface);
  box-shadow: var(--shadow-soft);
}
.routing-module-intro h2 { font-size: clamp(23px, 2.4vw, 31px); }
.routing-module-intro p:last-child { margin-top: 7px; font-size: 11px; line-height: 1.65; }
.routing-flow-grid { gap: 13px; }
.routing-flow-card { gap: 14px; padding: 17px; }
.routing-flow-number { width: 38px; height: 38px; border-radius: 12px; }
.routing-flow-card h3 { margin-bottom: 9px; font-size: 16px; }
.routing-flow-card ol { font-size: 11px; line-height: 1.7; }

.routing-summary-grid, .routing-policy-grid, .routing-adapter-grid, .routing-credentials-grid { gap: 12px; }
.routing-adapter-card, .routing-credential-card, .routing-policy-card, .routing-task-card { box-shadow: var(--shadow-soft); }
.routing-adapter-card > header, .routing-credential-card > header, .routing-task-card > header { padding: 16px 18px; }
.routing-facts { padding: 12px 15px; gap: 8px; }
.routing-facts > div { padding: 10px 11px; }
.routing-credential-form, .routing-policy-form { padding: 15px 17px 17px; }
.routing-funding-policy { padding: 12px; }
.routing-notice { padding: 18px 20px; }
.routing-product-sync { padding: 12px 18px; }
.routing-handoff-stats > div { padding: 12px 16px; }
.routing-handoff-form, .routing-shadow-summary { padding: 16px 18px; }
.routing-cross-module-note { margin: 0 19px 16px; padding: 12px 14px; }

.routing-card-view-toggle { padding: 0; }
.routing-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 16px 18px 20px; }
.routing-card-policy-form > .button,
.routing-card-delete-form .button { min-height: 38px; padding: 8px 10px; font-size: 11px; }
.routing-card-order-actions .button { min-height: 30px; }
.routing-sync-form { padding: 14px 18px; }

.spacex-summary { gap: 16px; }
.spacex-intro { padding: 20px; }
.spacex-intro h2 { font-size: 21px; }
.issue-form { padding: 16px 19px 19px; }
.issued-list { padding: 17px 19px 20px; }

.history-records { gap: 13px; }
.history-record > header { padding: 16px 19px; }
.history-record h3 { font-size: 15px; }
.history-card-pair { padding: 15px 19px 0; }
.history-field-grid { padding: 15px 19px 19px; }
.history-filters { padding: 15px 17px; }
.history-tabs { padding: 0 19px 18px; }
.audit-list { padding: 3px 19px 17px; }
.audit-list article { padding: 13px 0; }

.card-admin-query { padding: 17px 19px; }
.card-admin-result-form { padding: 15px; }
.card-admin-result { padding: 13px; }

/* Laptop layouts: turn wide operational tables into readable cards before
   narrow columns force identifiers and card numbers into vertical text. */
@media (max-width: 1500px) {
  :root { --page-gutter: 17px; }
  .routing-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .unified-task-wrap { overflow-x: visible; }
  .unified-task-table { display: block; min-width: 0; }
  .unified-task-table thead { display: none; }
  .unified-task-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 13px; }
  .unified-task-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
  .unified-task-table td { display: block; width: auto; min-width: 0 !important; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; overflow-wrap: anywhere; }
  .unified-task-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; }
  .unified-task-table td:nth-last-child(-n+2) { border-bottom: 0; }
  .unified-task-table tbody tr:hover td { background: transparent; }
  .unified-task-table .task-card-value { word-break: normal; overflow-wrap: anywhere; }
}

@media (max-width: 1360px) {
  :root { --content-max: 1240px; }
  .topbar-inner { min-height: 76px; }
  .content { padding-top: 18px; }
  .routing-module-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .routing-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .unified-task-table tbody { grid-template-columns: 1fr; }
  .routing-module-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-task-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-task-detail-grid { grid-template-columns: 1fr; }
  .routing-callback-replay { grid-template-columns: 1fr; }
  .routing-callback-replay form { justify-items: start; }
  .provider-state-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-products-table { display: block; min-width: 0; }
  .routing-products-table thead { display: none; }
  .routing-products-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 11px; }
  .routing-products-table tr { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
  .routing-products-table td { display: block; width: auto; min-width: 0 !important; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
  .routing-products-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
  .routing-products-table td:nth-last-child(-n+2) { border-bottom: 0; }
  .routing-products-table tbody tr:hover td { background: transparent; }
}

@media (max-width: 820px) {
  .topbar { position: relative; }
  .topbar-inner { min-height: 72px; }
  .page-heading p { max-width: 70vw; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 103px; }
  .filter-form, .task-center-filter, .cat-filter { grid-template-columns: 1fr 1fr; }
  .filter-form .button, .task-center-filter .button, .cat-filter .button { width: 100%; }
  .routing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routing-card-pool-toolbar { align-items: stretch; flex-direction: column; }
  .routing-card-pool-bulk-workspace { align-items: stretch; flex-direction: column; }
  .routing-card-delete-bulk-form { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .routing-card-pool-controls { align-items: stretch; justify-content: space-between; }
  .routing-card-policy-bulk-form { grid-template-columns: 1fr auto; }
  .routing-card-view-toggle { justify-content: stretch; }
  .routing-card-view-toggle .button { flex: 1 1 0; }
  .routing-module-intro { padding: 17px 18px; }
  .routing-flow-grid { grid-template-columns: 1fr; }
  .routing-task-center-link { align-items: stretch; flex-direction: column; }
  .routing-task-center-link .button { width: 100%; }
  .spacex-summary { grid-template-columns: 1fr; }
  .routing-products-table tbody { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --page-gutter: 12px; --topbar-height: 68px; }
  .topbar-inner { gap: 10px; padding-inline: 12px; }
  .topbar h1 { font-size: 21px; }
  .page-heading p { max-width: 68vw; font-size: 10px; }
  .role-pill { display: none; }
  .content { gap: 12px; padding-top: 13px; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 96px; padding: 14px; }
  .stat-card strong { font-size: 24px; }
  .panel { border-radius: 15px; }
  .panel-head { padding: 15px; }
  .panel-head h2 { font-size: 17px; }
  .panel-head h3 { font-size: 16px; }
  .filter-panel { padding: 11px; }
  .filter-form, .task-center-filter, .cat-filter { grid-template-columns: 1fr; }
  .routing-card-policy-bulk-form { grid-template-columns: 1fr; }
  .routing-card-pool-controls { flex-direction: column; }
  .routing-card-pool-sort { min-width: 0; }
  .routing-card-policy-bulk-form small { grid-column: auto; }
  .task-source-summary { padding: 0 14px 14px; }
  .unified-task-table tbody { padding: 10px; }
  .unified-task-table tr { grid-template-columns: 1fr; }
  .unified-task-table td, .unified-task-table td:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .unified-task-table td:last-child { border-bottom: 0; }
  .routing-module-nav { grid-template-columns: 1fr 1fr; gap: 7px; }
  .routing-module-nav a { min-height: 58px; padding: 9px 10px; }
  .routing-module-nav span { font-size: 9px; }
  .routing-task-summary-grid { grid-template-columns: 1fr; padding: 0 14px 14px; }
  .routing-business-timeline { padding-inline: 14px; }
  .routing-business-timeline .timeline-title { align-items: flex-start; flex-direction: column; }
  .routing-card-grid { grid-template-columns: 1fr; padding: 10px; }
  .routing-products-table tbody { padding: 9px; }
  .routing-products-table tr { grid-template-columns: 1fr; }
  .routing-products-table td, .routing-products-table td:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .routing-products-table td:last-child { border-bottom: 0; }
  .observation-list { padding: 10px; }
  .details { padding: 13px; }
  .manual-grid, .provider-grid { padding: 13px; }
  .history-record > header, .history-field-grid, .history-card-pair { padding-inline: 14px; }
  .card-admin-query { grid-template-columns: 1fr; padding: 14px; }
}
.routing-card-sync-workspace {
  display: grid;
  gap: 24px;
}

.routing-card-sync-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.routing-card-sync-status strong {
  flex: 1;
  min-width: 0;
}

.routing-card-sync-status small {
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .routing-card-sync-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .routing-card-sync-status small {
    white-space: normal;
  }
}