:root {
  color-scheme: dark;
  --bg: #060a13;
  --bg-deep: #03060d;
  --sidebar: rgba(7, 12, 23, .96);
  --surface: rgba(17, 26, 43, .72);
  --surface-strong: #111a2b;
  --surface-hover: rgba(29, 43, 67, .78);
  --border: rgba(131, 158, 196, .14);
  --border-strong: rgba(87, 224, 255, .28);
  --text: #edf6ff;
  --text-soft: #aab9cc;
  --muted: #6f829b;
  --cyan: #38e7ff;
  --cyan-soft: rgba(56, 231, 255, .12);
  --blue: #4d8dff;
  --violet: #896cff;
  --violet-soft: rgba(137, 108, 255, .14);
  --green: #42e7a2;
  --amber: #ffbf5a;
  --red: #ff6e82;
  --radius: 16px;
  --shadow: 0 18px 52px rgba(0, 0, 0, .28);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, .2);
  --focus-ring: rgba(56, 231, 255, .24);
  --ambient-primary: rgba(53, 100, 229, .17);
  --ambient-secondary: rgba(110, 59, 210, .1);
  --grid-line: rgba(54, 89, 120, .03);
  --panel-start: rgba(20, 30, 49, .78);
  --panel-end: rgba(10, 17, 30, .72);
  --panel-solid: #101928;
  --control-bg: #0a1220;
  --topbar-bg: rgba(6, 10, 19, .78);
  --auth-bg: #050914;
  --auth-panel-bg: rgba(6, 10, 19, .88);
  --overlay-bg: rgba(2, 5, 11, .78);
  --button-ink: #041016;
  --selection: rgba(56, 231, 255, .24);
}

/*
 * Theme tokens are intentionally semantic. `tech-blue` is the default and
 * remains visually compatible with installs that do not yet persist a theme.
 * The body selectors are a compatibility fallback; the application should
 * normally set data-theme on the document root before first paint.
 */
:root[data-theme="tech-blue"], body[data-theme="tech-blue"] {
  color-scheme: dark;
  --bg: #060a13;
  --bg-deep: #03060d;
  --sidebar: rgba(7, 12, 23, .96);
  --surface: rgba(17, 26, 43, .72);
  --surface-strong: #111a2b;
  --surface-hover: rgba(29, 43, 67, .78);
  --border: rgba(131, 158, 196, .14);
  --border-strong: rgba(87, 224, 255, .34);
  --text: #edf6ff;
  --text-soft: #aab9cc;
  --muted: #7589a3;
  --cyan: #38e7ff;
  --cyan-soft: rgba(56, 231, 255, .12);
  --blue: #4d8dff;
  --violet: #896cff;
  --violet-soft: rgba(137, 108, 255, .14);
  --ambient-primary: rgba(53, 100, 229, .17);
  --ambient-secondary: rgba(110, 59, 210, .1);
  --grid-line: rgba(54, 89, 120, .03);
  --panel-start: rgba(20, 30, 49, .78);
  --panel-end: rgba(10, 17, 30, .72);
  --panel-solid: #101928;
  --control-bg: #0a1220;
  --topbar-bg: rgba(6, 10, 19, .78);
  --auth-bg: #050914;
  --auth-panel-bg: rgba(6, 10, 19, .88);
  --overlay-bg: rgba(2, 5, 11, .78);
  --focus-ring: rgba(56, 231, 255, .24);
  --button-ink: #041016;
  --selection: rgba(56, 231, 255, .24);
}

:root[data-theme="obsidian"], body[data-theme="obsidian"] {
  color-scheme: dark;
  --bg: #08090b;
  --bg-deep: #030404;
  --sidebar: rgba(9, 10, 12, .97);
  --surface: rgba(23, 24, 27, .8);
  --surface-strong: #191b1f;
  --surface-hover: rgba(38, 39, 43, .86);
  --border: rgba(226, 216, 195, .13);
  --border-strong: rgba(222, 184, 108, .38);
  --text: #f4f1ea;
  --text-soft: #c4beb2;
  --muted: #918b80;
  --cyan: #ddb86d;
  --cyan-soft: rgba(221, 184, 109, .11);
  --blue: #8fa9bd;
  --violet: #b49372;
  --violet-soft: rgba(180, 147, 114, .13);
  --green: #67d7a2;
  --amber: #efba67;
  --red: #f47c87;
  --ambient-primary: rgba(199, 159, 85, .12);
  --ambient-secondary: rgba(112, 105, 94, .08);
  --grid-line: rgba(205, 190, 162, .025);
  --panel-start: rgba(27, 28, 31, .88);
  --panel-end: rgba(12, 13, 15, .84);
  --panel-solid: #17191c;
  --control-bg: #101114;
  --topbar-bg: rgba(8, 9, 11, .84);
  --auth-bg: #060708;
  --auth-panel-bg: rgba(9, 10, 12, .91);
  --overlay-bg: rgba(2, 2, 3, .82);
  --focus-ring: rgba(221, 184, 109, .25);
  --button-ink: #171105;
  --selection: rgba(221, 184, 109, .23);
  --shadow: 0 20px 60px rgba(0, 0, 0, .42);
  --shadow-soft: 0 13px 38px rgba(0, 0, 0, .3);
}

:root[data-theme="aurora"], body[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #090817;
  --bg-deep: #04030b;
  --sidebar: rgba(11, 9, 27, .96);
  --surface: rgba(27, 23, 55, .75);
  --surface-strong: #1d193b;
  --surface-hover: rgba(47, 39, 83, .8);
  --border: rgba(180, 166, 239, .16);
  --border-strong: rgba(132, 217, 255, .34);
  --text: #f5f1ff;
  --text-soft: #c5bee0;
  --muted: #8f88ad;
  --cyan: #78dfff;
  --cyan-soft: rgba(120, 223, 255, .12);
  --blue: #7795ff;
  --violet: #ad8bff;
  --violet-soft: rgba(173, 139, 255, .15);
  --green: #58e2ad;
  --amber: #ffc66b;
  --red: #ff7898;
  --ambient-primary: rgba(77, 124, 255, .17);
  --ambient-secondary: rgba(180, 84, 255, .15);
  --grid-line: rgba(151, 135, 211, .035);
  --panel-start: rgba(30, 26, 59, .82);
  --panel-end: rgba(13, 11, 31, .78);
  --panel-solid: #1a1634;
  --control-bg: #100d27;
  --topbar-bg: rgba(9, 8, 23, .8);
  --auth-bg: #070512;
  --auth-panel-bg: rgba(10, 8, 25, .89);
  --overlay-bg: rgba(4, 3, 12, .8);
  --focus-ring: rgba(120, 223, 255, .24);
  --button-ink: #06131a;
  --selection: rgba(173, 139, 255, .27);
  --shadow: 0 20px 58px rgba(2, 1, 14, .38);
  --shadow-soft: 0 13px 36px rgba(2, 1, 14, .27);
}

* { box-sizing: border-box; }

/* Delivery policy: a single high-readability light appearance. */
:root[data-theme="light"], body[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9fc;
  --bg-deep: #eef3f9;
  --sidebar: rgba(255, 255, 255, .97);
  --surface: rgba(255, 255, 255, .94);
  --surface-strong: #ffffff;
  --surface-hover: rgba(37, 99, 235, .075);
  --border: rgba(15, 23, 42, .13);
  --border-strong: rgba(37, 99, 235, .34);
  --text: #111827;
  --text-soft: #334155;
  --muted: #64748b;
  --cyan: #2563eb;
  --cyan-soft: rgba(37, 99, 235, .10);
  --blue: #2563eb;
  --violet: #7c3aed;
  --violet-soft: rgba(124, 58, 237, .10);
  --green: #15803d;
  --amber: #b45309;
  --red: #dc2626;
  --ambient-primary: rgba(37, 99, 235, .08);
  --ambient-secondary: rgba(124, 58, 237, .06);
  --grid-line: rgba(37, 99, 235, .04);
  --panel-start: rgba(255, 255, 255, .98);
  --panel-end: rgba(248, 250, 252, .96);
  --panel-solid: #ffffff;
  --control-bg: #ffffff;
  --topbar-bg: rgba(247, 249, 252, .93);
  --auth-bg: #f1f5fb;
  --auth-panel-bg: rgba(255, 255, 255, .96);
  --overlay-bg: rgba(15, 23, 42, .34);
  --button-ink: #ffffff;
  --selection: rgba(37, 99, 235, .18);
  --focus-ring: rgba(37, 99, 235, .22);
  --shadow: 0 18px 48px rgba(15, 23, 42, .11);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, .08);
}

.theme-customizer { display: none !important; }
:root[data-theme="light"] .reconciliation-filters input,
:root[data-theme="light"] .reconciliation-filters select,
:root[data-theme="light"] .reconciliation-pagination select {
  color-scheme: light;
  color: var(--text-soft);
  background: #ffffff;
}
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; background: radial-gradient(circle at 78% -10%, rgba(53, 100, 229, .17), transparent 32%), radial-gradient(circle at 28% 110%, rgba(110, 59, 210, .1), transparent 38%), linear-gradient(rgba(54, 89, 120, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(54, 89, 120, .03) 1px, transparent 1px); background-size: auto, auto, 36px 36px, 36px 36px; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-160%); z-index: 999; padding: 10px 14px; border-radius: 8px; background: var(--cyan); color: #041016; font-weight: 700; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }

.auth-pending .app-shell { visibility: hidden; }
.auth-ready .auth-gate { display: none; }
.auth-gate { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(380px, .9fr); overflow: hidden; background: #050914; }
.auth-visual { position: relative; min-height: 100%; overflow: hidden; border-right: 1px solid var(--border); background: radial-gradient(circle at 50% 48%, rgba(56,231,255,.12), transparent 18%), radial-gradient(circle at 50% 48%, rgba(137,108,255,.11), transparent 38%), linear-gradient(140deg,#060b16,#090f1e); }
.auth-grid { position: absolute; inset: 0; opacity: .5; background: linear-gradient(rgba(66,111,148,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(66,111,148,.07) 1px,transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center,#000,transparent 70%); transform: perspective(650px) rotateX(58deg) scale(1.5) translateY(24%); }
.auth-core { position: absolute; left: 50%; top: 48%; z-index: 2; width: 96px; height: 96px; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid rgba(56,231,255,.45); border-radius: 24px; background: linear-gradient(145deg,rgba(56,231,255,.21),rgba(137,108,255,.13)); box-shadow: 0 0 40px rgba(56,231,255,.2),inset 0 0 25px rgba(56,231,255,.08); }
.auth-core::before,.auth-core::after { content:""; position:absolute; inset:15px; border:1px solid rgba(56,231,255,.35); border-radius:15px; }.auth-core::after { inset:31px; background:var(--cyan); box-shadow:0 0 24px var(--cyan); }
.auth-core i { position:absolute; inset:-34px; border:1px solid rgba(137,108,255,.17); border-radius:36px; }.auth-core span { position:absolute; inset:-72px; border:1px dashed rgba(56,231,255,.12); border-radius:50%; animation:spin 28s linear infinite; }
.auth-orbit { position:absolute; left:50%; top:48%; border:1px solid rgba(98,143,190,.12); border-radius:50%; transform:translate(-50%,-50%); }.auth-orbit i { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }.orbit-one { width:330px; height:330px; animation:spin 18s linear infinite; }.orbit-one i { left:45px; top:43px; }.orbit-two { width:500px; height:500px; animation:spinReverse 29s linear infinite; }.orbit-two i { right:70px; bottom:65px; background:var(--violet); box-shadow:0 0 10px var(--violet); }
.auth-panel { position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,7vw,96px); background:rgba(6,10,19,.88); backdrop-filter:blur(24px); }
.auth-brand { position:absolute; top:38px; left:clamp(38px,7vw,96px); padding:0; }.auth-copy { margin-bottom:30px; }.auth-copy .eyebrow { margin:0 0 8px; color:var(--cyan); font-size:9px; font-weight:700; letter-spacing:.2em; }.auth-copy h1 { margin:0 0 11px; font-size:clamp(27px,3vw,39px); letter-spacing:-.04em; }.auth-copy > p:last-child { margin:0; color:var(--muted); font-size:12px; }
.auth-checking { min-height:122px; display:flex; align-items:center; gap:12px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text-soft); font-size:11px; }
.auth-checking[hidden] { display:none; }
.auth-checking p { margin:0; }.auth-spinner { display:inline-block; width:16px; height:16px; flex:0 0 auto; border:2px solid rgba(56,231,255,.16); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
.auth-form { display:grid; gap:11px; }.auth-form[hidden] { display:none; }.auth-form > label { color:var(--text-soft); font-size:10px; }.auth-form > input,.password-field input { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--border); border-radius:11px; outline:0; color:var(--text); background:#0a1220; }.password-field { position:relative; }.password-field input { padding-right:48px; }.auth-form > input:focus,.password-field input:focus { border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(56,231,255,.06); }.password-field button { position:absolute; right:7px; top:7px; width:34px; height:34px; border:0; border-radius:8px; color:var(--muted); background:transparent; }.password-field button:hover { color:var(--cyan); background:var(--cyan-soft); }.auth-submit { width:100%; min-height:47px; margin-top:4px; display:flex; align-items:center; justify-content:space-between; }.auth-error { margin:0; padding:10px 12px; border:1px solid rgba(255,110,130,.18); border-radius:8px; color:#ff9aaa; background:rgba(255,110,130,.07); font-size:10px; }.auth-foot { position:absolute; left:clamp(38px,7vw,96px); right:clamp(38px,7vw,96px); bottom:31px; display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:8px; }.auth-foot span:first-child { display:flex; align-items:center; gap:6px; }.auth-foot i { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 30; display: flex; flex-direction: column; padding: 28px 18px 18px; border-right: 1px solid var(--border); background: var(--sidebar); backdrop-filter: blur(24px); }
.brand { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 10px; }
.brand-mark { position: relative; width: 34px; height: 34px; transform: rotate(45deg); border: 1px solid rgba(56, 231, 255, .38); border-radius: 8px; background: linear-gradient(135deg, rgba(56, 231, 255, .25), rgba(137, 108, 255, .2)); box-shadow: 0 0 24px rgba(56, 231, 255, .18); }
.brand-mark span:first-child { position: absolute; inset: 8px; border: 2px solid var(--cyan); border-radius: 3px; }
.brand-mark span:last-child { position: absolute; width: 4px; height: 4px; left: 15px; top: 15px; border-radius: 50%; background: var(--text); box-shadow: 0 0 8px var(--cyan); }
.brand strong { display: block; font-size: 16px; letter-spacing: .22em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .24em; }
.nav-list { flex: 1; margin-top: 35px; }
.nav-label { margin: 24px 12px 10px; color: #53657d; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.nav-item { position: relative; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 13px; margin: 4px 0; padding: 0 14px; border: 0; border-radius: 10px; color: var(--text-soft); background: transparent; text-align: left; transition: color .2s ease, background .2s ease, transform .2s ease; }
.nav-item:hover { color: var(--text); background: rgba(105, 137, 180, .08); transform: translateX(2px); }
.nav-item.active { color: var(--cyan); background: linear-gradient(90deg, rgba(56, 231, 255, .14), rgba(56, 231, 255, .02)); }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 4px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav-item svg { width: 19px; height: 19px; flex: 0 0 auto; fill: currentColor; opacity: .92; }
.nav-item .status-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px rgba(66, 231, 162, .7); }
.nav-orbit { margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 15px; }
.system-mini { display: flex; align-items: center; gap: 10px; padding: 10px 11px 14px; }
.system-mini strong, .profile-button strong { display: block; font-size: 12px; font-weight: 600; }
.system-mini small, .profile-button small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.pulse-ring { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; border: 1px solid rgba(66, 231, 162, .28); border-radius: 50%; }
.pulse-ring::after { content: ""; position: absolute; inset: -1px; border: 1px solid rgba(66, 231, 162, .35); border-radius: 50%; animation: pulse 2.2s ease-out infinite; }
.pulse-ring i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.profile-button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; }
.profile-button:hover { border-color: var(--border); background: var(--surface); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(137, 108, 255, .3); border-radius: 9px; color: #c8bdff; background: var(--violet-soft); font-size: 11px; font-weight: 700; }
.chevron { color: var(--muted); }
.logout-button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid var(--border); border-radius:8px; color:var(--muted); background:rgba(17,26,43,.58); }.logout-button:hover { color:var(--cyan); border-color:var(--border-strong); }

.main-content { margin-left: 260px; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid var(--border); background: rgba(6, 10, 19, .78); backdrop-filter: blur(22px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 14px; }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb b { margin: 0 9px; color: #36475c; }
.breadcrumb strong { color: var(--text-soft); font-weight: 500; }
.global-health { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(66, 231, 162, .15); border-radius: 999px; color: #94f3ca; background: rgba(66, 231, 162, .07); font-size: 11px; }
.global-health span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.global-health b { font-weight:500; }.global-health.is-loading { color:var(--text-soft); border-color:var(--border); background:var(--surface); }.global-health.is-loading span { background:var(--muted); box-shadow:none; animation:softBlink 1.2s ease-in-out infinite; }.global-health.is-degraded { color:#ffd18a; border-color:rgba(255,191,90,.2); background:rgba(255,191,90,.07); }.global-health.is-degraded span { background:var(--amber); box-shadow:0 0 8px var(--amber); }.global-health.is-demo { color:#c5baff; border-color:rgba(137,108,255,.2); background:var(--violet-soft); }.global-health.is-demo span { background:var(--violet); box-shadow:0 0 8px var(--violet); }
.icon-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(17, 26, 43, .58); }
.icon-button:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.icon-button svg { width: 17px; height: 17px; fill: currentColor; }
.notification-dot { position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border: 1px solid var(--bg); border-radius: 50%; background: var(--red); }
.menu-button { display: none; }

.page-container { width: min(1580px, 100%); margin: 0 auto; padding: 34px 38px 54px; }
.page { display: none; animation: pageIn .38s ease both; }
.page.active { display: block; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 27px; }
.page-heading h1 { margin: 3px 0 7px; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.2; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.page-heading .eyebrow { color: var(--cyan); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.heading-actions { display: flex; align-items: center; gap: 12px; }
.live-label { display: inline-flex; align-items: center; gap: 7px; color: #9cb0c8; font-size: 10px; letter-spacing: .08em; }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: softBlink 2s ease-in-out infinite; }
.live-label b { font-weight:500; }.live-label.is-loading i { background:var(--muted); box-shadow:none; }.live-label.is-degraded { color:var(--amber); }.live-label.is-degraded i { background:var(--amber); box-shadow:0 0 8px var(--amber); }.live-label.is-demo { color:#ac9eff; }.live-label.is-demo i { background:var(--violet); box-shadow:0 0 8px var(--violet); }
.runtime-banner { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:13px; min-height:66px; margin:-9px 0 15px; padding:13px 16px; border:1px solid rgba(66,231,162,.14); border-radius:13px; background:linear-gradient(100deg,rgba(66,231,162,.07),rgba(13,22,37,.72)); }.runtime-banner-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--green); background:rgba(66,231,162,.09); }.runtime-banner strong { display:block; font-size:10px; }.runtime-banner p { margin:4px 0 0; color:var(--muted); font-size:9px; }.runtime-banner time { color:var(--muted); font-size:8px; }.runtime-banner.is-loading { border-color:var(--border); background:var(--surface); }.runtime-banner.is-loading .runtime-banner-icon { color:var(--muted); background:rgba(111,130,155,.08); animation:softBlink 1.2s ease-in-out infinite; }.runtime-banner.is-degraded { border-color:rgba(255,191,90,.16); background:linear-gradient(100deg,rgba(255,191,90,.07),rgba(13,22,37,.72)); }.runtime-banner.is-degraded .runtime-banner-icon { color:var(--amber); background:rgba(255,191,90,.09); }.runtime-banner.is-demo { border-color:rgba(137,108,255,.18); background:linear-gradient(100deg,rgba(137,108,255,.08),rgba(13,22,37,.72)); }.runtime-banner.is-demo .runtime-banner-icon { color:#ad9eff; background:var(--violet-soft); }
.title-with-badge { display:flex; align-items:center; gap:8px; }.title-with-badge.large { flex-wrap:wrap; }.title-with-badge.large h1 { margin-right:5px; }.demo-badge,.readonly-badge { display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border:1px solid rgba(137,108,255,.18); border-radius:6px; color:#b8adff; background:rgba(137,108,255,.09); font-size:8px; font-weight:600; }.demo-badge.critical { color:#ffcf87; border-color:rgba(255,191,90,.25); background:rgba(255,191,90,.1); }.readonly-badge { color:var(--text-soft); border-color:var(--border); background:var(--surface); }
.primary-button, .secondary-button { min-height: 38px; padding: 0 15px; border-radius: 9px; font-size: 12px; font-weight: 600; }
.primary-button { border: 1px solid rgba(56, 231, 255, .38); color: #05131a; background: linear-gradient(135deg, #7af1ff, var(--cyan)); box-shadow: 0 0 22px rgba(56, 231, 255, .14); }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.secondary-button { border: 1px solid var(--border); background: rgba(17, 26, 43, .72); color: var(--text-soft); }
.secondary-button:hover { border-color: var(--border-strong); color: var(--text); }
.text-button { padding: 0; border: 0; color: var(--cyan); background: none; font-size: 11px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card, .panel, .model-card, .route-card, .route-overview, .security-banner { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgba(20, 30, 49, .78), rgba(10, 17, 30, .72)); box-shadow: inset 0 1px rgba(255, 255, 255, .02), var(--shadow); backdrop-filter: blur(12px); }
.metric-card { position: relative; min-height: 174px; overflow: hidden; padding: 20px 21px; }
.metric-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 5% 0%, var(--glow), transparent 42%); }
.accent-cyan { --accent: var(--cyan); --glow: rgba(56, 231, 255, .12); }
.accent-violet { --accent: var(--violet); --glow: rgba(137, 108, 255, .13); }
.accent-blue { --accent: var(--blue); --glow: rgba(77, 141, 255, .12); }
.accent-green { --accent: var(--green); --glow: rgba(66, 231, 162, .10); }
.metric-top { display: flex; justify-content: space-between; align-items: center; }
.metric-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 15px; }
.delta { padding: 4px 7px; border-radius: 6px; font-size: 9px; font-weight: 600; }
.delta.positive { color: var(--green); background: rgba(66, 231, 162, .08); }
.delta.neutral { color: var(--muted); background: rgba(145, 164, 190, .08); }
.metric-card p { margin: 16px 0 6px; color: var(--text-soft); font-size: 11px; }
.metric-card strong { position: relative; display: block; font-size: clamp(22px, 2vw, 29px); letter-spacing: -.035em; }
.metric-card strong em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 500; }
.metric-card small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.positive-text { color: var(--green) !important; }
.sparkline { position: absolute; right: 16px; bottom: 19px; width: 90px; height: 40px; display: flex; align-items: end; gap: 4px; opacity: .48; mask-image: linear-gradient(90deg, transparent, #000 18%); }
.sparkline i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--accent), transparent); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); gap: 15px; margin-bottom: 15px; }
.bottom-grid { grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr); }
.panel { min-width: 0; padding: 21px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-head h2 { margin: 0 0 5px; font-size: 14px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 10px; }
.compact-select { min-height: 31px; padding: 0 27px 0 10px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft); background: #0c1422; font-size: 10px; }
.chart-legend { display: flex; gap: 20px; margin: 18px 0 0 48px; color: var(--muted); font-size: 9px; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend i, .provider-legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend-cyan, .p1 { background: var(--cyan); box-shadow: 0 0 7px rgba(56, 231, 255, .55); }
.legend-violet, .p2 { background: var(--violet); }
.p3 { background: var(--blue); }.p4 { background: #31455d; }
.line-chart { position: relative; height: 257px; margin-top: 8px; padding-left: 45px; }
.line-chart svg { position: absolute; inset: 0 0 25px 45px; width: calc(100% - 45px); height: calc(100% - 25px); overflow: visible; }
.line-chart .line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.line-one { stroke: var(--cyan); filter: drop-shadow(0 0 4px rgba(56, 231, 255, .38)); }.line-two { stroke: var(--violet); opacity: .82; }
.area-one { fill: url(#areaCyan); }.area-two { fill: url(#areaViolet); }
.chart-lines { position: absolute; inset: 0 0 25px 45px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), rgba(135, 159, 190, .08) 25%); }
.y-label { position: absolute; left: 0; color: #53657b; font-size: 8px; transform: translateY(-50%); }.y1{top:0}.y2{top:25%}.y3{top:50%}.y4{top:calc(100% - 25px)}
.x-axis { position: absolute; left: 45px; right: 0; bottom: 0; display: flex; justify-content: space-between; color: #53657b; font-size: 8px; }
.donut-wrap { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 20px; margin: 28px 0 22px; }
.donut, .budget-ring { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--cyan) 0 42%, var(--violet) 42% 70%, var(--blue) 70% 88%, #31455d 88% 100%); box-shadow: 0 0 32px rgba(56, 231, 255, .08); }
.donut::after, .budget-ring::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: #0d1625; box-shadow: inset 0 0 18px rgba(0, 0, 0, .38); }
.donut > div, .budget-ring > div { position: relative; z-index: 1; text-align: center; }
.donut strong, .budget-ring strong { display: block; font-size: 23px; }.donut span, .budget-ring span { color: var(--muted); font-size: 9px; }
.provider-legend { display: grid; gap: 14px; }
.provider-legend div { display: flex; justify-content: space-between; gap: 20px; color: var(--text-soft); font-size: 10px; }
.provider-legend span { display: flex; align-items: center; gap: 8px; }.provider-legend b { color: var(--text); }
.route-note { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid rgba(66, 231, 162, .1); border-radius: 10px; background: rgba(66, 231, 162, .045); }
.route-note strong { display: block; color: #bdf8dd; font-size: 10px; }.route-note small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.model-list.compact { margin-top: 16px; }
.model-row { display: grid; grid-template-columns: 35px minmax(145px, 1fr) minmax(70px, .65fr) 46px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(131, 158, 196, .08); }
.model-row:first-child { border-top: 0; }
.model-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.model-avatar.openai { color: #7ff2db; background: rgba(47, 215, 181, .11); border: 1px solid rgba(47, 215, 181, .16); }.model-avatar.claude { color: #f5ad7d; background: rgba(232, 132, 77, .1); border: 1px solid rgba(232, 132, 77, .16); }.model-avatar.gemini { color: #9bbfff; background: rgba(77, 141, 255, .12); border: 1px solid rgba(77, 141, 255, .18); }.model-avatar.deepseek { color: #aab8ff; background: rgba(107, 119, 255, .11); border: 1px solid rgba(107, 119, 255, .16); }
.model-row strong { display: block; font-size: 10px; }.model-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }.model-row > b { font-size: 10px; text-align: right; }
.usage-bar { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(126, 150, 181, .12); }.usage-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.event-list { margin: 14px 0 0; padding: 0; list-style: none; }
.event-list li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(131, 158, 196, .08); }
.event-list li:first-child { border-top: 0; }
.event-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-size: 11px; }.event-icon.success { color: var(--green); background: rgba(66, 231, 162, .08); }.event-icon.info { color: var(--cyan); background: var(--cyan-soft); }.event-icon.warning { color: var(--amber); background: rgba(255, 191, 90, .08); }
.event-list strong { display: block; font-size: 10px; }.event-list small, .event-list time { color: var(--muted); font-size: 8px; }.event-list small { display: block; margin-top: 3px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.search-box { min-width: min(360px, 100%); display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(15, 24, 40, .72); color: var(--muted); }
.search-box:focus-within { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(56, 231, 255, .05); }.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }.search-box input::placeholder { color: #51647d; }.search-box.small { min-width: 200px; min-height: 34px; }
.filter-tabs { display: flex; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: rgba(9, 15, 26, .7); }.filter-tabs button { min-height: 31px; padding: 0 13px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; }.filter-tabs button.active { color: var(--text); background: var(--surface-hover); box-shadow: 0 3px 9px rgba(0,0,0,.16); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.model-card { min-width: 0; padding: 21px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }.model-card:hover { transform: translateY(-3px); border-color: rgba(56, 231, 255, .22); box-shadow: 0 20px 58px rgba(0, 0, 0, .34), 0 0 25px rgba(56, 231, 255, .04); }.model-card-top { display: flex; justify-content: space-between; align-items: center; }.model-avatar.large { width: 42px; height: 42px; font-size: 11px; }.model-card h2 { margin: 18px 0 7px; font-size: 15px; }.model-card > p { min-height: 38px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.8; }.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }.tag-row span, .scope-badge { padding: 4px 7px; border: 1px solid rgba(131, 158, 196, .1); border-radius: 6px; color: var(--text-soft); background: rgba(105, 130, 168, .06); font-size: 8px; }.model-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }.model-card dl div { padding: 10px; border-radius: 9px; background: rgba(6, 11, 20, .38); }.model-card dt { color: var(--muted); font-size: 8px; }.model-card dd { margin: 5px 0 0; font-size: 10px; font-weight: 600; }.model-card footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(131, 158, 196, .08); color: var(--muted); font-size: 8px; }.model-card footer button { border: 0; color: var(--cyan); background: transparent; font-size: 9px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 600; }.status-badge.online { color: var(--green); background: rgba(66, 231, 162, .08); }.status-badge.online::before { content:""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }.status-badge.beta { color: #ac9eff; background: rgba(137, 108, 255, .1); }.status-badge.offline { color: var(--muted); background: rgba(111, 130, 155, .1); }.status-badge.warn { color: var(--amber); background: rgba(255,191,90,.08); }.empty-state { padding: 60px; color: var(--muted); text-align: center; }
.status-badge.loading { color:var(--muted); background:rgba(111,130,155,.08); }.status-badge.degraded { color:var(--amber); background:rgba(255,191,90,.08); }.status-badge.demo { color:#ac9eff; background:rgba(137,108,255,.1); }.health-value { font-size:clamp(18px,1.8vw,24px) !important; }.runtime-mode-chip { letter-spacing:.08em; }.runtime-empty { min-height:90px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--muted); font-size:10px; }.runtime-empty.wide { grid-column:1/-1; min-height:180px; border:1px dashed var(--border); border-radius:var(--radius); background:rgba(10,17,30,.35); }.runtime-empty.is-error { color:var(--amber); }.model-runtime-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:17px 0; }.model-runtime-meta div { padding:10px; border-radius:9px; background:rgba(6,11,20,.38); }.model-runtime-meta span { display:block; color:var(--muted); font-size:8px; }.model-runtime-meta strong { display:block; margin-top:5px; font-size:10px; }.model-card footer span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }

.security-banner { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; margin-bottom: 15px; padding: 16px 18px; border-color: rgba(56, 231, 255, .14); background: linear-gradient(110deg, rgba(56, 231, 255, .08), rgba(137, 108, 255, .05)); }.security-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; color: var(--cyan); background: var(--cyan-soft); }.security-banner strong { font-size: 11px; }.security-banner p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.security-banner button { border: 0; color: var(--cyan); background: transparent; font-size: 9px; }.table-panel { padding-bottom: 9px; }.table-wrap { overflow-x: auto; margin: 17px -5px 0; }table { width: 100%; min-width: 900px; border-collapse: collapse; }th { padding: 11px 10px; color: #647790; font-size: 8px; font-weight: 600; text-align: left; letter-spacing: .08em; }td { padding: 14px 10px; border-top: 1px solid rgba(131, 158, 196, .08); color: var(--text-soft); font-size: 9px; }td strong { display: block; color: var(--text); font-size: 10px; }td small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }td code { color: #aab9cc; font-size: 9px; }.key-action, .row-menu { padding: 4px; border: 0; color: var(--muted); background: transparent; }.key-action:hover, .row-menu:hover { color: var(--cyan); }.disabled-row { opacity: .58; }
.portal-link-group { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.customer-capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:15px; }
.customer-capability { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; min-height:154px; overflow:hidden; }
.customer-capability::after { content:""; position:absolute; right:-34px; bottom:-46px; width:120px; height:120px; border:1px solid rgba(56,231,255,.07); border-radius:50%; box-shadow:0 0 36px rgba(56,231,255,.035); }
.customer-capability > span { display:grid; place-items:center; width:30px; height:30px; border:1px solid rgba(56,231,255,.16); border-radius:9px; color:var(--cyan); background:var(--cyan-soft); font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.customer-capability h2 { margin:2px 0 7px; font-size:12px; }.customer-capability p { margin:0; color:var(--muted); font-size:9px; line-height:1.7; }
.customer-capability > a { position:relative; z-index:1; grid-column:2; align-self:end; justify-self:start; color:var(--cyan); font-size:8px; font-weight:600; text-decoration:none; }.customer-capability > a[aria-disabled="true"] { color:var(--muted); pointer-events:none; }
.handoff-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:15px; }.handoff-card { display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start; }.step-number { color:var(--cyan); font-size:19px; font-weight:600; letter-spacing:-.05em; opacity:.8; }.handoff-card h2 { margin:1px 0 7px; font-size:12px; }.handoff-card p { margin:0; color:var(--muted); font-size:9px; line-height:1.7; }.management-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; }.management-panel .eyebrow { margin:0 0 6px; color:var(--cyan); font-size:8px; letter-spacing:.15em; }.management-panel h2 { margin:0 0 6px; font-size:14px; }.management-panel p { margin:0; color:var(--muted); font-size:9px; word-break:break-all; }
.portal-access-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }.portal-access-grid .management-panel { min-width:0; }.portal-access-grid .management-panel > div { min-width:0; }.portal-access-grid .management-panel p { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cost-bars { display: grid; gap: 21px; margin-top: 30px; }.cost-bars > div { display: grid; grid-template-columns: 90px 1fr 88px; align-items: center; gap: 12px; font-size: 10px; }.cost-bars > div > div { height: 7px; overflow: hidden; border-radius: 7px; background: rgba(131, 158, 196, .1); }.cost-bars i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); }.cost-bars b { text-align: right; }.budget-ring { width: 160px; margin: 28px auto 23px; background: conic-gradient(var(--cyan) 0 79%, rgba(131, 158, 196, .1) 79%); }.budget-details { display: flex; justify-content: center; gap: 27px; color: var(--muted); font-size: 9px; }.budget-details b { display: block; margin-top: 4px; color: var(--text); font-size: 11px; }

.route-overview { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px; margin-bottom: 15px; background: linear-gradient(100deg, rgba(66,231,162,.07), rgba(13,22,37,.78) 45%); }.route-overview > div:first-child { display: flex; align-items: center; gap: 15px; }.pulse-ring.large { width: 38px; height: 38px; }.pulse-ring.large i { width: 11px; height: 11px; }.route-overview p { margin: 0 0 4px; color: var(--muted); font-size: 9px; }.route-overview strong { font-size: 13px; }.route-overview small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }.route-overview dl { display: flex; margin: 0; }.route-overview dl div { min-width: 120px; padding: 0 20px; border-left: 1px solid var(--border); }.route-overview dt { color: var(--muted); font-size: 8px; }.route-overview dd { margin: 6px 0 0; font-size: 14px; font-weight: 600; }.route-measurement-note { display:grid; grid-template-columns:32px 1fr; align-items:center; gap:12px; margin:-2px 0 15px; padding:13px 16px; border:1px solid rgba(56,231,255,.13); border-radius:11px; background:linear-gradient(105deg,rgba(56,231,255,.055),rgba(137,108,255,.035)); }.route-measurement-note > span { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:var(--cyan); background:var(--cyan-soft); }.route-measurement-note p { margin:0; }.route-measurement-note strong { display:block; font-size:9px; }.route-measurement-note small { display:block; margin-top:4px; color:var(--muted); font-size:8px; line-height:1.55; }.route-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }.route-card { padding: 20px; }.route-card header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; }.route-card header strong { display: block; font-size: 11px; }.route-card header small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }.route-path { margin:23px 0 20px; padding:14px 12px; border-radius:10px; background:rgba(5,10,18,.45); }.route-latency-path { display:grid; grid-template-columns:minmax(68px,.7fr) minmax(60px,1fr) minmax(68px,.7fr) minmax(60px,1fr) minmax(68px,.7fr) minmax(60px,1fr) minmax(68px,.85fr); align-items:center; gap:4px; }.route-path .route-node { min-width:0; padding:7px 6px; border:1px solid rgba(131,158,196,.12); border-radius:8px; color:var(--text-soft); background:rgba(9,18,31,.7); text-align:center; }.route-node b,.route-node small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.route-node b { font-size:8px; }.route-node small { margin-top:3px; color:var(--muted); font-size:6px; }.route-path .route-segment { position:relative; display:grid; place-items:center; min-width:0; padding:0; border:0; background:transparent; }.route-segment i { position:relative; display:block; width:100%; height:1px; margin-top:7px; background:linear-gradient(90deg,rgba(56,231,255,.12),rgba(56,231,255,.85),rgba(56,231,255,.12)); }.route-segment i::after { content:""; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 7px var(--cyan); animation:packet 2.5s linear infinite; }.route-segment .route-latency { max-width:100%; overflow:hidden; color:var(--green); font:700 7px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }.route-segment.unmeasured .route-latency { color:#72859e; }.route-segment.stale .route-latency { color:var(--amber); }.route-segment.unmeasured i { background:repeating-linear-gradient(90deg,rgba(114,133,158,.36) 0 5px,transparent 5px 9px); }.route-segment.unmeasured i::after { display:none; }.route-card dl { display: grid; grid-template-columns: repeat(4, 1fr); gap:7px; margin: 0 0 14px; }.route-card dt { color: var(--muted); font-size: 8px; }.route-card dd { margin: 6px 0 0; font-size: 10px; font-weight: 600; }.health-line { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(131,158,196,.1); }.health-line i { display:block; height:100%; background:var(--green); box-shadow:0 0 8px rgba(66,231,162,.5); }.health-line.warning i { background: var(--amber); }.health-line.unknown i { background:var(--muted); box-shadow:none; }
.route-probe-monitor { display:grid; grid-template-columns:minmax(235px,.8fr) minmax(440px,1.4fr); align-items:center; gap:20px; margin-bottom:15px; padding:17px 20px; border:1px solid rgba(56,231,255,.14); border-radius:var(--radius); background:linear-gradient(112deg,rgba(56,231,255,.075),rgba(11,20,34,.76) 42%,rgba(137,108,255,.045)); box-shadow:inset 0 1px rgba(255,255,255,.02),var(--shadow); }.route-probe-heading { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:11px; }.route-probe-heading p { margin:0 0 4px; color:var(--cyan); font-size:7px; letter-spacing:.14em; }.route-probe-heading strong { display:block; font-size:11px; }.route-probe-heading small { display:block; margin-top:4px; color:var(--muted); font-size:7px; line-height:1.45; }.route-probe-pulse { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(66,231,162,.65); }.route-probe-monitor.is-probing .route-probe-pulse { background:var(--cyan); box-shadow:0 0 12px rgba(56,231,255,.8); animation:softBlink 1s ease-in-out infinite; }.route-probe-monitor dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; }.route-probe-monitor dl div { min-width:0; padding:0 14px; border-left:1px solid var(--border); }.route-probe-monitor dt { color:var(--muted); font-size:7px; }.route-probe-monitor dd { margin:6px 0 0; overflow:hidden; font-size:9px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.route-probe-monitor .probe-cycle { color:var(--text-soft); font:600 8px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }.route-read-state { grid-column:1/-1; margin:0; padding-top:10px; border-top:1px solid rgba(131,158,196,.08); color:var(--muted); font-size:7px; text-align:right; }.route-read-state.is-error { color:var(--amber); }.route-probe-path { display:grid; gap:8px; padding:10px; }.route-probe-lane { display:grid; grid-template-columns:minmax(62px,.7fr) minmax(62px,1fr) minmax(92px,.9fr); align-items:center; gap:7px; min-width:0; padding:9px 10px; border:1px solid rgba(131,158,196,.08); border-radius:9px; background:rgba(9,18,31,.58); }.probe-endpoint { min-width:0; }.probe-endpoint b,.probe-endpoint small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.probe-endpoint b { font-size:8px; }.probe-endpoint small { margin-top:3px; color:var(--muted); font-size:6px; }.probe-endpoint.target { position:relative; padding-right:51px; }.probe-lane-state { position:absolute; top:0; right:0; padding:3px 5px; font-size:6px; }.probe-connector { position:relative; display:grid; place-items:center; min-width:0; }.probe-connector i { display:block; width:100%; height:1px; margin-top:6px; background:linear-gradient(90deg,rgba(66,231,162,.12),rgba(66,231,162,.8),rgba(66,231,162,.12)); }.probe-connector .route-latency { max-width:100%; overflow:hidden; color:var(--green); font:700 7px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }.route-probe-lane.probing .probe-connector i { position:relative; background:linear-gradient(90deg,rgba(56,231,255,.12),rgba(56,231,255,.85),rgba(56,231,255,.12)); }.route-probe-lane.probing .probe-connector i::after { content:""; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 7px var(--cyan); animation:packet 1.8s linear infinite; }.route-probe-lane.probing .route-latency { color:var(--cyan); }.route-probe-lane.stale .probe-connector i { background:repeating-linear-gradient(90deg,rgba(255,191,90,.5) 0 5px,transparent 5px 9px); }.route-probe-lane.stale .route-latency { color:var(--amber); }.route-probe-lane.unavailable .probe-connector i { background:repeating-linear-gradient(90deg,rgba(255,111,134,.46) 0 5px,transparent 5px 9px); }.route-probe-lane.unavailable .route-latency { color:#ff879a; }.route-probe-lane.unknown .probe-connector i { background:repeating-linear-gradient(90deg,rgba(114,133,158,.36) 0 5px,transparent 5px 9px); }.route-probe-lane.unknown .route-latency { color:#72859e; }.probe-sample { grid-column:1/-1; overflow:hidden; padding-top:7px; border-top:1px solid rgba(131,158,196,.06); color:var(--muted); font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
.route-probe-notice { margin:0 0 14px; padding:9px 11px; border:1px solid rgba(131,158,196,.09); border-radius:8px; color:var(--muted); background:rgba(9,18,31,.46); font-size:7px; line-height:1.55; }.route-probe-notice.is-warning { border-color:rgba(255,191,90,.16); color:#d9b975; background:rgba(255,191,90,.045); }.route-probe-notice.is-ok { border-color:rgba(66,231,162,.12); color:#9fd9bf; background:rgba(66,231,162,.035); }.route-probe-notice.is-protected { border-color:rgba(137,108,255,.14); color:#b7ace5; background:rgba(137,108,255,.04); }

.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: 20px; align-items: start; }.settings-nav { display: grid; gap: 4px; }.settings-nav button { min-height: 40px; padding: 0 13px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; text-align: left; font-size: 10px; }.settings-nav button.active { color: var(--cyan); background: var(--cyan-soft); }.settings-form { padding: 0; overflow: hidden; }.form-section { padding: 23px; border-top: 1px solid var(--border); }.form-section:first-child { border-top: 0; }.form-section h2 { margin: 0; font-size: 14px; }.form-section > p { margin: 5px 0 21px; color: var(--muted); font-size: 9px; }.form-section > label:not(.switch-row) { display: grid; grid-template-columns: 1fr 150px; align-items: center; min-height: 65px; border-top: 1px solid rgba(131,158,196,.08); color: var(--text-soft); font-size: 10px; }.form-section > label > small { grid-column: 1; margin-top: -14px; color: var(--muted); font-size: 8px; }.form-section input[type="number"], .modal input, .modal select { width: 100%; min-height: 37px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px; outline: 0; color: var(--text); background: #0a1220; font-size: 10px; }.input-unit { position: relative; }.input-unit input { padding-right: 34px !important; }.input-unit span { position:absolute; right:11px; top:11px; color:var(--muted); font-size:9px; }.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 64px; border-top: 1px solid rgba(131,158,196,.08); }.switch-row b { display:block; font-size:10px; }.switch-row small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }.switch-row input { position:absolute; opacity:0; }.switch-row i { position:relative; width:37px; height:20px; flex:0 0 auto; border-radius:20px; background:#26364a; transition:.2s; }.switch-row i::after { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; border-radius:50%; background:#8294a9; transition:.2s; }.switch-row input:checked + i { background:rgba(56,231,255,.25); box-shadow:inset 0 0 0 1px rgba(56,231,255,.4); }.switch-row input:checked + i::after { transform:translateX(17px); background:var(--cyan); box-shadow:0 0 9px rgba(56,231,255,.5); }.switch-row input:focus-visible + i { outline:2px solid var(--cyan); outline-offset:3px; }
.settings-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.system-owner { display:grid; grid-template-columns:46px 1fr; align-items:start; gap:15px; }.system-owner > a,.system-owner > .status-badge { grid-column:2; justify-self:start; }.system-owner h2 { margin:3px 0 7px; font-size:14px; }.system-owner p { margin:0; color:var(--muted); font-size:9px; line-height:1.7; }.system-owner ul { margin:16px 0; padding:0; list-style:none; }.system-owner li { position:relative; margin:8px 0; padding-left:14px; color:var(--text-soft); font-size:9px; }.system-owner li::before { content:""; position:absolute; left:0; top:5px; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px rgba(56,231,255,.5); }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(2, 5, 11, .78); backdrop-filter: blur(10px); }.modal-backdrop[hidden] { display: none; }.modal { position: relative; width: min(440px, 100%); padding: 30px; border: 1px solid rgba(56,231,255,.2); border-radius: 18px; background: #101928; box-shadow: 0 35px 100px rgba(0,0,0,.55), 0 0 45px rgba(56,231,255,.06); animation: modalIn .25s ease; }.modal-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:20px; }.modal-close:hover { color:var(--text); background:var(--surface-hover); }.modal-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; color:var(--cyan); background:var(--cyan-soft); font-size:19px; }.modal h2 { margin:18px 0 7px; font-size:18px; }.modal > p { margin:0 0 20px; color:var(--muted); font-size:10px; }.modal form { display:grid; gap:15px; }.modal label { display:grid; gap:7px; color:var(--text-soft); font-size:10px; }.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:7px; }.toast { position:fixed; z-index:200; right:24px; bottom:24px; transform:translateY(30px); padding:11px 15px; border:1px solid rgba(66,231,162,.22); border-radius:10px; color:#c5f9e2; background:#10251f; box-shadow:var(--shadow); font-size:10px; opacity:0; pointer-events:none; transition:.25s; }.toast.show { transform:translateY(0); opacity:1; }
.mobile-overlay { display:none; }

@keyframes pageIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes modalIn { from { opacity:0; transform:scale(.97) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes pulse { 0%{transform:scale(.7);opacity:.7}70%,100%{transform:scale(1.5);opacity:0} }
@keyframes softBlink { 50% { opacity:.38; } }
@keyframes packet { from{left:0}to{left:calc(100% - 5px)} }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }

@media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-grid,.bottom-grid { grid-template-columns: 1fr; }.provider-panel { display:grid; grid-template-columns:1fr 1fr; column-gap:25px; }.provider-panel .panel-head,.provider-panel .route-note { grid-column:1/-1; }.donut-wrap { margin-bottom:10px; }.route-grid { grid-template-columns:1fr; }.settings-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .auth-gate { grid-template-columns:1fr; }.auth-visual { position:absolute; inset:0; opacity:.48; border:0; }.auth-panel { width:min(480px,calc(100% - 36px)); min-height:520px; margin:auto; padding:54px 40px; border:1px solid var(--border); border-radius:20px; background:rgba(7,12,23,.9); box-shadow:var(--shadow); }.auth-brand { top:28px; left:40px; }.auth-foot { left:40px; right:40px; bottom:24px; }.sidebar { transform:translateX(-102%); transition:transform .25s ease; box-shadow:20px 0 60px rgba(0,0,0,.4); }.sidebar.open { transform:translateX(0); }.mobile-overlay.open { display:block; position:fixed; inset:0; z-index:25; background:rgba(2,5,11,.55); backdrop-filter:blur(3px); }.main-content { margin-left:0; }.menu-button { display:grid; }.page-container { padding:27px 24px 45px; }.topbar { padding:0 24px; }.settings-layout { grid-template-columns:1fr; }.settings-nav { display:flex; overflow-x:auto; padding-bottom:4px; }.settings-nav button { white-space:nowrap; }.route-overview { align-items:flex-start; flex-direction:column; }.route-overview dl { width:100%; }.route-overview dl div { flex:1; min-width:0; }.route-probe-monitor { grid-template-columns:1fr; }.route-probe-monitor dl { grid-column:1; }.catalog-grid { grid-template-columns:1fr; }.customer-capability-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.handoff-grid,.settings-cards { grid-template-columns:1fr; }.portal-access-grid { grid-template-columns:1fr; } }
@media (max-width: 640px) { .auth-panel { width:calc(100% - 24px); min-height:500px; padding:52px 24px; }.auth-brand { left:24px; }.auth-foot { left:24px; right:24px; flex-direction:column; gap:5px; }.page-container { padding:23px 15px 38px; }.topbar { height:61px; padding:0 15px; }.global-health,.breadcrumb span,.breadcrumb b { display:none; }.page-heading { align-items:flex-start; flex-direction:column; gap:17px; }.page-heading .heading-actions,.page-heading > button,.page-heading > a,.page-heading > .portal-link-group { align-self:stretch; justify-content:space-between; }.page-heading > button,.page-heading > a { width:100%; }.portal-link-group { display:grid; grid-template-columns:1fr; }.portal-link-group > a { width:100%; }.runtime-banner { grid-template-columns:35px 1fr; }.runtime-banner time { grid-column:2; }.metric-grid,.metric-grid.three { grid-template-columns:1fr; }.metric-card { min-height:160px; }.provider-panel { display:block; }.donut-wrap { grid-template-columns:130px 1fr; gap:13px; }.line-chart { height:220px; }.x-axis span:nth-child(even) { display:none; }.toolbar { align-items:stretch; flex-direction:column; }.search-box { min-width:0; }.filter-tabs { align-self:flex-start; }.security-banner { grid-template-columns:37px 1fr; }.security-banner > :last-child { grid-column:2; justify-self:start; padding:0; }.customer-capability-grid { grid-template-columns:1fr; }.customer-capability { min-height:142px; }.management-panel { align-items:flex-start; flex-direction:column; }.management-panel a { width:100%; }.route-overview dl { display:grid; grid-template-columns:repeat(3,1fr); }.route-overview dl div { min-width:0; padding:0 9px; }.route-overview dl div:first-child { border-left:0; padding-left:0; }.route-overview dd { font-size:11px; }.route-probe-monitor { padding:15px; }.route-probe-heading { grid-template-columns:10px minmax(0,1fr); }.route-probe-heading > .status-badge { grid-column:2; justify-self:start; margin-top:3px; }.route-probe-monitor dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 0; }.route-probe-monitor dl div:nth-child(odd) { border-left:0; padding-left:0; }.route-read-state { text-align:left; line-height:1.55; }.route-card { padding:16px; }.route-latency-path { grid-template-columns:minmax(0,1fr); gap:0; padding:11px 12px; }.route-path .route-node { width:100%; padding:9px 10px; text-align:left; }.route-node b { font-size:9px; }.route-node small { font-size:7px; }.route-path .route-segment { grid-template-columns:22px minmax(0,1fr); justify-items:start; min-height:45px; padding-left:12px; }.route-segment i { grid-column:1; grid-row:1; width:1px; height:35px; margin:0; background:linear-gradient(180deg,rgba(56,231,255,.12),rgba(56,231,255,.85),rgba(56,231,255,.12)); }.route-segment i::after { top:0; left:-2px; animation:packetVertical 2.5s linear infinite; }.route-segment .route-latency { grid-column:2; grid-row:1; align-self:center; font-size:8px; }.route-segment.unmeasured i { background:repeating-linear-gradient(180deg,rgba(114,133,158,.36) 0 5px,transparent 5px 9px); }.route-probe-lane { grid-template-columns:minmax(54px,.72fr) minmax(54px,.9fr) minmax(88px,1fr); gap:5px; padding:9px 8px; }.probe-endpoint.target { padding-right:0; }.probe-lane-state { position:static; margin-top:5px; }.probe-sample { white-space:normal; line-height:1.5; }.route-card dl { grid-template-columns:repeat(2,1fr); }.form-section { padding:18px; }.form-section > label:not(.switch-row) { grid-template-columns:1fr; gap:7px; padding:12px 0; }.form-section > label > small { grid-column:1; margin:0; }.cost-bars > div { grid-template-columns:70px 1fr 76px; }.model-row { grid-template-columns:35px 1fr auto; }.model-row .usage-bar { display:none; }.toast { right:15px; bottom:15px; left:15px; text-align:center; } }
@media (max-width: 410px) { .donut-wrap { grid-template-columns:1fr; }.donut { width:130px; margin:auto; }.chart-legend { margin-left:35px; }.line-chart { padding-left:35px; }.line-chart svg,.chart-lines { left:35px; width:calc(100% - 35px); }.x-axis { left:35px; }.route-card dl { gap:6px; }.route-card dd { font-size:9px; }.budget-details { gap:16px; } }
@keyframes packetVertical { from{top:0}to{top:calc(100% - 5px)} }

/* LiteLLM protected administration */
.admin-lock { margin-left:auto; color:var(--cyan); font-size:6px; filter:drop-shadow(0 0 6px var(--cyan)); }
.admin-security code { color:var(--cyan); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.capability-notice { display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:center; margin:-4px 0 15px; padding:13px 16px; border:1px solid rgba(255,191,90,.18); border-radius:11px; background:linear-gradient(100deg,rgba(255,191,90,.07),rgba(255,91,116,.025)); }.capability-notice[hidden] { display:none; }.capability-notice > span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--amber); background:rgba(255,191,90,.08); font-weight:700; }.capability-notice strong { display:block; font-size:10px; }.capability-notice p { margin:4px 0 0; color:var(--muted); font-size:8px; line-height:1.6; }
.offline-notice { border-color:rgba(255,91,116,.2); background:rgba(255,91,116,.055); }.offline-notice > span { color:#ff879a; background:rgba(255,91,116,.1); }
.admin-ops-context { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:15px 0 9px; overflow:hidden; border:1px solid var(--border); border-radius:11px; background:rgba(5,10,18,.5); }.admin-ops-context > div { min-width:0; padding:11px 14px; border-left:1px solid var(--border); }.admin-ops-context > div:first-child { border-left:0; }.admin-ops-context span { display:block; color:var(--muted); font-size:7px; letter-spacing:.08em; }.admin-ops-context strong { display:block; margin-top:5px; overflow:hidden; color:var(--text-soft); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.admin-ops-context strong.danger-access { color:#ff879a; }
.capability-matrix { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:15px; }.capability-chip { display:inline-flex; align-items:center; gap:5px; min-height:25px; padding:0 9px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:rgba(131,158,196,.04); font-size:8px; }.capability-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }.capability-chip.write { color:var(--green); border-color:rgba(66,231,162,.14); background:rgba(66,231,162,.05); }.capability-chip.readonly { color:var(--amber); border-color:rgba(255,191,90,.14); background:rgba(255,191,90,.05); }.capability-chip.unavailable { color:#798ba3; }.capability-chip.partial { color:#b9aaff; border-color:rgba(137,108,255,.18); background:rgba(137,108,255,.06); }
.admin-metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:15px 0; }
.admin-metric { position:relative; min-width:0; padding:18px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(145deg,rgba(18,31,50,.84),rgba(8,14,25,.8)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.admin-metric::after { content:""; position:absolute; right:-22px; bottom:-32px; width:80px; height:80px; border-radius:50%; background:rgba(56,231,255,.07); filter:blur(14px); }
.admin-metric > span { display:block; color:#6f849e; font-size:8px; font-weight:600; letter-spacing:.13em; }
.admin-metric strong { display:block; margin:10px 0 5px; font-size:23px; line-height:1; }
.admin-metric small { display:block; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.admin-tabs { display:flex; gap:4px; margin:20px 0 12px; padding:4px; overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:rgba(5,10,19,.66); scrollbar-width:thin; }
.admin-tabs button { position:relative; min-height:38px; padding:0 16px; flex:1 0 auto; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:9px; white-space:nowrap; }
.admin-tabs button:hover { color:var(--text-soft); background:rgba(131,158,196,.05); }
.admin-tabs button.active { color:var(--cyan); background:linear-gradient(100deg,rgba(56,231,255,.1),rgba(137,108,255,.07)); box-shadow:inset 0 0 0 1px rgba(56,231,255,.1); }
.admin-tabs button.active::after { content:""; position:absolute; right:16px; bottom:4px; left:16px; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 8px var(--cyan); }
.primary-button:disabled,.secondary-button:disabled,.inline-action:disabled,.table-actions button:disabled { cursor:not-allowed; opacity:.42; filter:saturate(.35); box-shadow:none; }
.admin-tab-panel { animation:pageIn .24s ease; }
.admin-panel { padding:20px; }
.admin-panel > .panel-head { margin-bottom:0; }
.model-boundary-note { display:grid; grid-template-columns:30px 1fr; gap:11px; align-items:center; margin-top:15px; padding:11px 13px; border:1px solid rgba(137,108,255,.14); border-radius:9px; background:linear-gradient(100deg,rgba(137,108,255,.07),rgba(56,231,255,.025)); }.model-boundary-note > span { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#b7aaff; background:rgba(137,108,255,.1); font-weight:700; }.model-boundary-note p { margin:0; color:var(--muted); font-size:8px; line-height:1.6; }.model-boundary-note strong { display:block; margin-bottom:2px; color:var(--text-soft); font-size:9px; }
.admin-table-wrap { margin-top:16px; overflow-x:auto; border:1px solid rgba(131,158,196,.08); border-radius:11px; }
.admin-table { min-width:800px; }
.admin-table th { padding:11px 13px; background:rgba(5,10,18,.45); }
.admin-table td { padding:13px; vertical-align:middle; }
.admin-table td:first-child strong { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-loading { padding:30px; color:var(--muted); text-align:center; }
.table-actions { display:flex; align-items:center; gap:4px; }
.table-actions button,.inline-action { min-height:28px; padding:0 8px; border:1px solid rgba(131,158,196,.1); border-radius:7px; color:var(--text-soft); background:rgba(131,158,196,.04); font-size:8px; }
.table-actions button:hover,.inline-action:hover { color:var(--cyan); border-color:rgba(56,231,255,.24); }
.table-actions button.danger:hover,.inline-action.danger:hover { color:#ff7c91; border-color:rgba(255,91,116,.25); }
.provider-admin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.provider-admin-card { position:relative; padding:17px; border:1px solid rgba(131,158,196,.1); border-radius:12px; background:linear-gradient(145deg,rgba(15,26,43,.68),rgba(7,13,23,.5)); }
.provider-admin-card header { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; }
.provider-admin-card .provider-logo { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:var(--cyan); background:var(--cyan-soft); font-weight:700; }
.provider-admin-card h3 { margin:0; font-size:11px; }.provider-admin-card header p { margin:4px 0 0; color:var(--muted); font-size:8px; }
.provider-admin-card dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:15px 0; }.provider-admin-card dl div { min-width:0; padding:9px; border-radius:8px; background:rgba(5,10,18,.44); }.provider-admin-card dt { color:var(--muted); font-size:7px; }.provider-admin-card dd { margin:5px 0 0; overflow:hidden; color:var(--text-soft); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.provider-admin-card footer { display:flex; justify-content:flex-end; gap:5px; padding-top:12px; border-top:1px solid rgba(131,158,196,.08); }
.custom-upstream-guide { display:grid; grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr) 38px minmax(0,1fr); align-items:center; gap:8px; margin:16px 0 4px; padding:13px; border:1px solid rgba(56,231,255,.1); border-radius:11px; background:linear-gradient(110deg,rgba(56,231,255,.045),rgba(137,108,255,.035)); }
.custom-upstream-guide > div { display:grid; grid-template-columns:28px 1fr; align-items:center; gap:9px; min-width:0; }
.custom-upstream-guide > div > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(56,231,255,.16); border-radius:8px; color:var(--cyan); background:rgba(56,231,255,.07); font-size:8px; font-weight:700; }
.custom-upstream-guide p { margin:0; color:var(--muted); font-size:7px; line-height:1.5; }.custom-upstream-guide strong { display:block; color:var(--text-soft); font-size:9px; }
.custom-upstream-guide > i { height:1px; background:linear-gradient(90deg,transparent,rgba(56,231,255,.48),transparent); }
.connection-method-note { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:11px; margin-top:12px; padding:11px 13px; border:1px solid rgba(56,231,255,.11); border-radius:9px; background:linear-gradient(100deg,rgba(56,231,255,.055),rgba(137,108,255,.025)); }
.connection-method-note > span { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--cyan); background:rgba(56,231,255,.08); box-shadow:0 0 18px rgba(56,231,255,.07); font-size:15px; }
.connection-method-note p { min-width:0; margin:0; color:var(--muted); font-size:8px; line-height:1.65; }.connection-method-note strong { display:block; margin-bottom:2px; color:var(--text-soft); font-size:9px; }
.connection-insight { --connection-tone:var(--cyan); position:relative; margin-top:15px; padding:17px; overflow:hidden; border:1px solid rgba(56,231,255,.15); border-radius:13px; background:radial-gradient(circle at 90% 0,rgba(56,231,255,.08),transparent 32%),linear-gradient(145deg,rgba(11,24,39,.96),rgba(6,13,24,.94)); box-shadow:inset 0 1px rgba(255,255,255,.025),0 18px 45px rgba(1,6,15,.16); }
.connection-insight[hidden] { display:none; }.connection-insight[data-state="valid"] { --connection-tone:var(--green); border-color:rgba(66,231,162,.2); }.connection-insight[data-state="degraded"] { --connection-tone:var(--amber); border-color:rgba(255,191,90,.22); }.connection-insight[data-state="invalid"] { --connection-tone:#ff6f86; border-color:rgba(255,91,116,.23); }.connection-insight[data-state="empty"] { --connection-tone:#8496ad; border-color:rgba(131,158,196,.15); }
.connection-insight::after { content:""; position:absolute; z-index:0; top:0; right:0; width:36%; height:1px; background:linear-gradient(90deg,transparent,var(--connection-tone)); box-shadow:0 0 12px var(--connection-tone); opacity:.55; }.connection-insight > * { position:relative; z-index:1; }
.connection-insight-head { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; }.connection-insight-head .connection-signal { display:grid; place-items:center; width:38px; height:38px; border:1px solid color-mix(in srgb,var(--connection-tone) 28%,transparent); border-radius:11px; color:var(--connection-tone); background:color-mix(in srgb,var(--connection-tone) 10%,transparent); box-shadow:0 0 23px color-mix(in srgb,var(--connection-tone) 12%,transparent); font-weight:700; }.connection-insight[data-state="loading"] .connection-signal { animation:spin .8s linear infinite; }
.connection-insight-head .eyebrow { margin:0 0 4px; color:var(--connection-tone); font-size:7px; }.connection-insight-head h3 { margin:0; font-size:12px; }.connection-insight-head p:not(.eyebrow) { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.55; }
.connection-state-badge { min-height:26px; padding:0 9px; display:inline-flex; align-items:center; border:1px solid color-mix(in srgb,var(--connection-tone) 24%,transparent); border-radius:999px; color:var(--connection-tone); background:color-mix(in srgb,var(--connection-tone) 7%,transparent); font-size:8px; font-weight:600; white-space:nowrap; }
.connection-scan { height:66px; margin-top:14px; overflow:hidden; border:1px solid rgba(56,231,255,.07); border-radius:9px; background:repeating-linear-gradient(90deg,transparent 0,transparent 23px,rgba(56,231,255,.03) 24px),repeating-linear-gradient(0deg,transparent 0,transparent 15px,rgba(56,231,255,.03) 16px); }.connection-scan::after { content:""; display:block; width:34%; height:100%; background:linear-gradient(90deg,transparent,rgba(56,231,255,.16),transparent); animation:connectionScan 1.25s ease-in-out infinite; }
@keyframes connectionScan { from { transform:translateX(-110%); } to { transform:translateX(310%); } }
.connection-overview { display:grid; grid-template-columns:146px minmax(0,1fr); gap:14px; margin-top:16px; }.connection-availability { --availability:0%; display:grid; place-items:center; min-height:142px; padding:12px; border:1px solid rgba(131,158,196,.09); border-radius:11px; background:rgba(4,10,18,.42); }.connection-availability-ring { display:grid; place-items:center; align-content:center; width:104px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at center,#0a1523 0 59%,transparent 60%),conic-gradient(var(--connection-tone) var(--availability),rgba(131,158,196,.12) 0); box-shadow:0 0 25px color-mix(in srgb,var(--connection-tone) 9%,transparent); }.connection-availability-ring strong { font-size:20px; }.connection-availability-ring span { margin-top:4px; color:var(--muted); font-size:7px; }
.connection-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.connection-metric { min-width:0; padding:13px; border:1px solid rgba(131,158,196,.07); border-radius:9px; background:rgba(4,10,18,.38); }.connection-metric span { display:block; color:var(--muted); font-size:7px; }.connection-metric strong { display:block; margin-top:7px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.connection-metric.accent strong { color:var(--cyan); }.connection-metric.success strong { color:var(--green); }.connection-metric.warning strong { color:var(--amber); }.connection-metric.danger strong { color:#ff879a; }
.connection-model-results { margin-top:14px; overflow:hidden; border:1px solid rgba(131,158,196,.08); border-radius:10px; }.connection-results-head { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; background:rgba(4,9,17,.48); }.connection-results-head strong { font-size:8px; }.connection-results-head span { color:var(--muted); font-size:7px; }
.connection-model-result { display:grid; grid-template-columns:7px minmax(150px,1.2fr) minmax(95px,.65fr) minmax(110px,.72fr) minmax(80px,.5fr); align-items:center; gap:11px; min-width:0; padding:11px 12px; border-top:1px solid rgba(131,158,196,.07); }.connection-model-dot { width:6px; height:6px; border-radius:50%; background:#ff6f86; box-shadow:0 0 8px rgba(255,91,116,.5); }.connection-model-result.available .connection-model-dot { background:var(--green); box-shadow:0 0 8px rgba(66,231,162,.5); }.connection-model-result.degraded .connection-model-dot { background:var(--amber); box-shadow:0 0 8px rgba(255,191,90,.5); }
.connection-model-identity,.connection-model-attempts,.connection-model-latency,.connection-model-status { min-width:0; }.connection-model-identity strong,.connection-model-attempts strong,.connection-model-latency strong { display:block; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.connection-model-identity small,.connection-model-attempts span,.connection-model-latency span,.connection-model-latency small,.connection-model-status small { display:block; margin-top:3px; overflow:hidden; color:var(--muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }.connection-model-status { justify-self:end; text-align:right; }.connection-model-status .status-badge { padding:0 8px; }
.connection-model-status .status-badge.probe-failed { color:#ff879a; background:rgba(255,91,116,.09); }
.connection-result-foot { display:flex; justify-content:space-between; gap:12px; margin-top:10px; color:var(--muted); font-size:7px; line-height:1.5; }
.virtual-key-boundary { position:relative; display:grid; grid-template-columns:38px 1fr; align-items:center; gap:13px; margin-top:15px; padding:15px 16px; overflow:hidden; border:1px solid rgba(137,108,255,.18); border-radius:11px; background:linear-gradient(105deg,rgba(137,108,255,.085),rgba(56,231,255,.035)); }
.virtual-key-boundary::after { content:""; position:absolute; right:-20px; width:100px; height:100px; border-radius:50%; background:rgba(56,231,255,.06); filter:blur(22px); }
.virtual-key-boundary > span { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(137,108,255,.22); border-radius:11px; color:#c6bbff; background:rgba(137,108,255,.11); box-shadow:0 0 20px rgba(137,108,255,.08); font-weight:700; }
.virtual-key-boundary strong { display:block; font-size:10px; }.virtual-key-boundary p { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.6; }
.virtual-key-table { min-width:1080px; }.model-chip-list { display:flex; flex-wrap:wrap; gap:4px; max-width:235px; }.model-chip-list span { display:inline-block; max-width:140px; padding:4px 6px; overflow:hidden; border:1px solid rgba(56,231,255,.1); border-radius:999px; color:#9cdfe8; background:rgba(56,231,255,.045); font:7px/1 ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }.model-chip-list small { align-self:center; margin:0; }.key-table-actions { min-width:168px; flex-wrap:wrap; }
.admin-two-column { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:15px; align-items:start; }
.router-config-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:20px; }
.router-config-form label,.admin-modal-fields label { display:grid; gap:7px; color:var(--text-soft); font-size:9px; }
.router-config-form input,.router-config-form select,.router-config-form textarea,.admin-modal-fields input,.admin-modal-fields select,.admin-modal-fields textarea { width:100%; min-height:38px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; outline:0; color:var(--text); background:#0a1220; font:10px/1.5 inherit; }
.router-config-form textarea,.admin-modal-fields textarea { resize:vertical; }
.router-config-form input:focus,.router-config-form select:focus,.router-config-form textarea:focus,.admin-modal-fields input:focus,.admin-modal-fields select:focus,.admin-modal-fields textarea:focus { border-color:rgba(56,231,255,.42); box-shadow:0 0 0 3px rgba(56,231,255,.05); }
.router-config-form .wide { grid-column:1/-1; }.form-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:5px; }
.validation-panel { padding:22px; background:linear-gradient(145deg,rgba(56,231,255,.05),rgba(137,108,255,.04)); }.validation-panel h2 { margin:7px 0; font-size:14px; }.validation-panel > p:not(.eyebrow) { color:var(--muted); font-size:9px; line-height:1.7; }
.validation-result { display:grid; grid-template-columns:30px 1fr; gap:10px; margin-top:18px; padding:14px; border:1px solid var(--border); border-radius:10px; background:rgba(4,9,17,.45); }.validation-result > span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--muted); background:rgba(131,158,196,.06); }.validation-result strong { font-size:10px; }.validation-result p { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.55; }.validation-result[data-state="valid"] { border-color:rgba(66,231,162,.2); }.validation-result[data-state="valid"] > span { color:var(--green); background:rgba(66,231,162,.08); }.validation-result[data-state="invalid"] { border-color:rgba(255,91,116,.2); }.validation-result[data-state="invalid"] > span { color:#ff7c91; background:rgba(255,91,116,.08); }
.version-timeline { display:grid; gap:0; margin-top:16px; }.version-item { position:relative; display:grid; grid-template-columns:32px 1fr auto; gap:12px; align-items:start; padding:14px 0; border-top:1px solid rgba(131,158,196,.08); }.version-item:first-child { border-top:0; }.version-marker { position:relative; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(56,231,255,.2); border-radius:50%; color:var(--cyan); background:rgba(56,231,255,.06); font-size:8px; }.version-item h3 { margin:1px 0 5px; font-size:10px; }.version-item p { margin:0; color:var(--muted); font-size:8px; line-height:1.6; }.version-item time { display:block; margin-top:5px; color:#647790; font-size:7px; }.version-current { color:var(--green); }
.cost-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }.cost-summary div { padding:12px; border-radius:9px; background:rgba(5,10,18,.42); }.cost-summary span { display:block; color:var(--muted); font-size:7px; }.cost-summary strong { display:block; margin-top:7px; font-size:12px; }.cost-provider-list { display:grid; gap:8px; margin-top:12px; }.cost-provider-row { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:10px; font-size:8px; }.cost-provider-row i { height:4px; border-radius:4px; background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.error-log-list { display:grid; gap:8px; margin-top:16px; max-height:440px; overflow:auto; }.error-log { padding:12px; border:1px solid rgba(255,191,90,.1); border-radius:9px; background:rgba(255,191,90,.025); }.error-log header { display:flex; justify-content:space-between; gap:10px; }.error-log strong { color:#ffc96f; font-size:9px; }.error-log time { color:var(--muted); font-size:7px; }.error-log p { margin:7px 0 0; color:var(--text-soft); font:8px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; word-break:break-word; }.error-log small { display:block; margin-top:7px; color:var(--muted); font-size:7px; }
.reconciliation-hero { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:14px; padding:23px 24px; overflow:hidden; border:1px solid rgba(56,231,255,.14); border-radius:14px; background:radial-gradient(circle at 88% -20%,rgba(56,231,255,.16),transparent 35%),radial-gradient(circle at 55% 130%,rgba(137,108,255,.12),transparent 38%),linear-gradient(135deg,rgba(14,28,47,.96),rgba(6,13,23,.94)); box-shadow:inset 0 1px rgba(255,255,255,.025),0 20px 55px rgba(0,0,0,.2); }
.reconciliation-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image:linear-gradient(rgba(56,231,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(56,231,255,.18) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,transparent,black 58%,black); }
.reconciliation-hero > * { position:relative; z-index:1; }.reconciliation-hero-copy { max-width:720px; }.reconciliation-hero .eyebrow { margin:0 0 7px; color:var(--cyan); font-size:8px; font-weight:700; letter-spacing:.2em; }.reconciliation-hero h2 { margin:0 0 8px; font-size:19px; letter-spacing:-.025em; }.reconciliation-hero-copy > p:last-child { margin:0; color:var(--muted); font-size:9px; line-height:1.7; }.reconciliation-sync { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.reconciliation-boundary { display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:12px; margin-bottom:14px; padding:13px 16px; border:1px solid rgba(137,108,255,.15); border-radius:11px; background:linear-gradient(100deg,rgba(137,108,255,.075),rgba(56,231,255,.025)); }.reconciliation-boundary > span { display:grid; place-items:center; width:33px; height:33px; border-radius:9px; color:#b7aaff; background:rgba(137,108,255,.1); font-size:15px; }.reconciliation-boundary strong { display:block; color:var(--text-soft); font-size:10px; }.reconciliation-boundary p { margin:4px 0 0; color:var(--muted); font-size:8px; line-height:1.6; }.reconciliation-quality,.stability-window { min-width:145px; padding-left:16px; border-left:1px solid rgba(131,158,196,.1); }.reconciliation-quality small,.stability-window small { display:block; color:var(--muted); font-size:7px; letter-spacing:.08em; }.reconciliation-quality b,.stability-window b { display:block; margin-top:5px; color:var(--cyan); font-size:9px; }.reconciliation-quality b.degraded { color:var(--amber); }.reconciliation-quality b.unavailable { color:#ff8295; }.reconciliation-quality b.pending { color:var(--muted); }
.reconciliation-filters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) auto; align-items:end; gap:10px; margin-bottom:14px; padding:15px; }.reconciliation-filters label { display:grid; gap:6px; min-width:0; color:var(--muted); font-size:8px; }.reconciliation-filters input,.reconciliation-filters select,.reconciliation-pagination select { min-width:0; min-height:36px; padding:0 10px; border:1px solid var(--border); border-radius:8px; outline:0; color:var(--text-soft); background:#091321; font-size:9px; color-scheme:dark; }.reconciliation-filters input:focus,.reconciliation-filters select:focus,.reconciliation-pagination select:focus { border-color:rgba(56,231,255,.4); box-shadow:0 0 0 3px rgba(56,231,255,.05); }.reconciliation-filter-actions { display:flex; gap:7px; }.reconciliation-filter-actions button { min-width:66px; white-space:nowrap; }
.reconciliation-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px; }.reconciliation-metric { --reconciliation-accent:var(--cyan); position:relative; min-width:0; min-height:122px; padding:16px; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:linear-gradient(145deg,rgba(18,31,50,.88),rgba(7,13,23,.86)); box-shadow:inset 0 1px rgba(255,255,255,.02); }.reconciliation-metric::before { content:""; position:absolute; top:0; right:14px; left:14px; height:1px; background:linear-gradient(90deg,transparent,var(--reconciliation-accent),transparent); box-shadow:0 0 11px var(--reconciliation-accent); opacity:.5; }.reconciliation-metric::after { content:""; position:absolute; right:-35px; bottom:-45px; width:100px; height:100px; border-radius:50%; background:var(--reconciliation-accent); filter:blur(38px); opacity:.08; }.reconciliation-metric.cost { --reconciliation-accent:#a58dff; }.reconciliation-metric.profit { --reconciliation-accent:var(--green); }.reconciliation-metric.match { --reconciliation-accent:#56a8ff; }.reconciliation-metric.tokens { --reconciliation-accent:#f4c66c; }.reconciliation-metric.anomaly { --reconciliation-accent:#ff7189; }.reconciliation-metric span { position:relative; z-index:1; display:block; overflow:hidden; color:#7388a1; font-size:7px; font-weight:700; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; }.reconciliation-metric strong { position:relative; z-index:1; display:block; margin:18px 0 7px; overflow:hidden; color:var(--text); font-size:18px; line-height:1; text-overflow:ellipsis; white-space:nowrap; }.reconciliation-metric small { position:relative; z-index:1; display:block; overflow:hidden; color:var(--muted); font-size:7px; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.reconciliation-records-panel { padding:20px; }.reconciliation-records-head { align-items:center; }.reconciliation-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.reconciliation-legend span,.reconciliation-status { display:inline-flex; align-items:center; gap:5px; min-height:22px; padding:0 8px; border-radius:999px; font-size:7px; font-weight:600; }.reconciliation-legend span::before,.reconciliation-status::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }.reconciliation-legend .matched,.reconciliation-status.matched { color:var(--green); background:rgba(66,231,162,.08); }.reconciliation-legend .mismatch,.reconciliation-status.mismatch { color:var(--amber); background:rgba(255,191,90,.08); }.reconciliation-legend .pending,.reconciliation-status.pending { color:#9bb0c9; background:rgba(131,158,196,.08); }.reconciliation-legend .missing,.reconciliation-status.missing { color:#ff8295; background:rgba(255,91,116,.09); }.reconciliation-status.duplicate { color:#c1b5ff; background:rgba(137,108,255,.1); }.reconciliation-table { min-width:1060px; }.reconciliation-table td { min-width:130px; }.reconciliation-table td:nth-child(2) { max-width:210px; }.reconciliation-table td small { overflow:hidden; max-width:230px; text-overflow:ellipsis; white-space:nowrap; }.reconciliation-table .mono-reference { overflow:hidden; max-width:200px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }.reconciliation-row { position:relative; }.reconciliation-row::after { content:""; position:absolute; top:10px; bottom:10px; left:0; width:2px; border-radius:3px; background:transparent; }.reconciliation-row.status-mismatch::after { background:var(--amber); box-shadow:0 0 8px rgba(255,191,90,.4); }.reconciliation-row.status-missing::after { background:#ff7189; box-shadow:0 0 8px rgba(255,91,116,.35); }.reconciliation-row.status-duplicate::after { background:#9f8aff; }.reconciliation-row.status-pending { opacity:.78; }.difference-value { color:var(--amber) !important; }.negative-value { color:#ff8295 !important; }.reconciliation-empty-cell { padding:0 !important; }.reconciliation-pagination { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:14px; color:var(--muted); font-size:8px; }.reconciliation-pagination label { display:flex; align-items:center; gap:7px; }.reconciliation-pagination select { min-height:32px; }.reconciliation-pagination > div { display:flex; gap:7px; }.reconciliation-pagination button { min-height:32px; }
.admin-modal { width:min(620px,100%); max-height:calc(100vh - 32px); overflow:auto; }.admin-modal-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.admin-modal-fields .wide,.admin-modal-fields .secret-note { grid-column:1/-1; }.secret-note { margin:0; padding:10px; border:1px solid rgba(56,231,255,.1); border-radius:8px; color:var(--muted); background:rgba(56,231,255,.035); font-size:8px; line-height:1.6; }.form-error { margin:0; color:#ff879a; font-size:9px; }.destructive-confirm { color:#ffc4cd; border-color:rgba(255,91,116,.25); background:#31151b; }
.field-option { display:flex !important; align-items:center; gap:6px !important; color:var(--muted) !important; font-size:8px !important; }.field-option input { width:14px; min-height:14px; margin:0; accent-color:var(--cyan); }
.provider-test-zone { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; min-width:0; padding:13px; border:1px solid rgba(56,231,255,.12); border-radius:10px; background:rgba(56,231,255,.025); }.provider-model-picker { min-width:0; }.provider-model-picker > label { display:grid; gap:7px; min-width:0; }.provider-model-picker select { min-width:0; text-overflow:ellipsis; }.provider-model-picker > small { display:block; margin-top:6px; color:var(--muted); font-size:7px; line-height:1.5; }.provider-test-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; min-width:0; }.provider-test-actions button { min-width:98px; }.provider-test-result { grid-column:1/-1; display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:9px; min-width:0; min-height:48px; padding:9px 10px; border:1px solid var(--border); border-radius:8px; background:rgba(4,9,17,.4); }.provider-test-result > span { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; color:var(--muted); background:rgba(131,158,196,.06); }.provider-test-result p { min-width:0; margin:0; }.provider-test-result strong { display:block; color:var(--text-soft); font-size:9px; }.provider-test-result small { display:block; margin-top:3px; overflow-wrap:anywhere; color:var(--muted); font-size:7px; line-height:1.5; }.provider-test-result[data-state="loading"] > span { color:var(--cyan); animation:spin .8s linear infinite; }.provider-test-result[data-state="valid"] { border-color:rgba(66,231,162,.2); background:rgba(66,231,162,.035); }.provider-test-result[data-state="valid"] > span { color:var(--green); background:rgba(66,231,162,.08); }.provider-test-result[data-state="empty"] { border-color:rgba(255,191,90,.16); background:rgba(255,191,90,.025); }.provider-test-result[data-state="empty"] > span { color:var(--amber); background:rgba(255,191,90,.07); }.provider-test-result[data-state="invalid"] { border-color:rgba(255,91,116,.2); background:rgba(255,91,116,.025); }.provider-test-result[data-state="invalid"] > span { color:#ff879a; background:rgba(255,91,116,.08); }
.key-secret-modal { width:min(660px,100%); padding:34px; overflow:hidden; border-color:rgba(137,108,255,.3); background:radial-gradient(circle at 100% 0,rgba(137,108,255,.13),transparent 40%),linear-gradient(145deg,#101a2b,#0b1321); }.key-secret-modal::after { content:""; position:absolute; z-index:-1; right:-65px; bottom:-70px; width:190px; height:190px; border:1px solid rgba(56,231,255,.08); border-radius:50%; box-shadow:0 0 50px rgba(56,231,255,.05),inset 0 0 40px rgba(137,108,255,.04); }.key-secret-modal .key-secret-icon { float:left; margin-right:13px; color:#c7bcff; background:rgba(137,108,255,.12); }.key-secret-modal > .eyebrow { margin:2px 0 2px; padding-top:3px; color:#9d8dff; }.key-secret-modal h2 { margin:0 0 24px; padding-top:3px; }.key-secret-modal > #key-secret-description { clear:both; margin-bottom:18px; line-height:1.65; }.secret-display-label { margin-bottom:7px; }.secret-display { display:grid; grid-template-columns:1fr auto; gap:8px; }.secret-display input { min-width:0; height:43px; padding:0 12px; border:1px solid rgba(56,231,255,.2); border-radius:9px; color:#bdf7ff; background:#07111d; font:10px/1 ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow:inset 0 0 22px rgba(56,231,255,.025); }.secret-display.secret-unavailable { display:none; }.one-time-warning { display:grid; grid-template-columns:31px 1fr; align-items:center; gap:10px; margin-top:14px; padding:12px; border:1px solid rgba(255,191,90,.17); border-radius:9px; background:rgba(255,191,90,.045); }.one-time-warning > span { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; color:var(--amber); background:rgba(255,191,90,.09); font-weight:700; }.one-time-warning p { margin:0; color:var(--muted); font-size:8px; line-height:1.55; }.one-time-warning strong { display:block; color:#ffd28c; font-size:9px; }.key-secret-modal .modal-actions { margin-top:18px; }

@media (max-width:1180px) { .admin-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.provider-admin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-two-column { grid-template-columns:1fr; }.connection-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:1280px) { .reconciliation-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }.reconciliation-filter-actions { grid-column:1/-1; justify-content:flex-end; }.reconciliation-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .admin-metric-grid,.provider-admin-grid { grid-template-columns:1fr; }.admin-tabs { margin-right:-15px; border-right:0; border-radius:12px 0 0 12px; }.admin-tabs button { flex:0 0 auto; }.router-config-form,.admin-modal-fields { grid-template-columns:1fr; }.router-config-form .wide,.admin-modal-fields .wide,.admin-modal-fields .secret-note { grid-column:1; }.admin-panel { padding:16px; }.cost-summary { grid-template-columns:1fr; }.observability-grid { grid-template-columns:1fr; }.version-item { grid-template-columns:29px 1fr; }.version-item > button { grid-column:2; justify-self:start; }.admin-modal { padding:22px 18px; } }
@media (max-width:900px) { .custom-upstream-guide { grid-template-columns:1fr; }.custom-upstream-guide > i { width:1px; height:14px; margin-left:14px; background:linear-gradient(transparent,rgba(56,231,255,.48),transparent); } }
@media (max-width:700px) { .provider-test-zone { grid-template-columns:minmax(0,1fr); }.provider-model-picker,.provider-test-actions,.provider-test-result { grid-column:1; }.provider-test-actions { display:grid; grid-template-columns:minmax(0,1fr); }.provider-test-actions button { width:100%; min-width:0; }.key-secret-modal { padding:27px 20px; }.secret-display { grid-template-columns:1fr; }.secret-display button { width:100%; }.key-secret-modal .modal-actions button { width:100%; }.virtual-key-boundary { grid-template-columns:31px 1fr; padding:13px; }.virtual-key-boundary > span { width:31px; height:31px; } }
@media (max-width:700px) { .admin-ops-context { grid-template-columns:repeat(2,minmax(0,1fr)); }.admin-ops-context > div:nth-child(3) { border-left:0; border-top:1px solid var(--border); }.admin-ops-context > div:nth-child(4) { border-top:1px solid var(--border); } }
@media (max-width:700px) { .connection-insight { padding:14px; }.connection-insight-head { grid-template-columns:34px minmax(0,1fr); }.connection-insight-head .connection-signal { width:34px; height:34px; }.connection-state-badge { grid-column:2; justify-self:start; }.connection-overview { grid-template-columns:1fr; }.connection-availability { min-height:126px; }.connection-availability-ring { width:96px; }.connection-model-results { overflow-x:auto; }.connection-model-result { min-width:630px; }.connection-result-foot { flex-direction:column; gap:4px; } }
@media (max-width:700px) { .reconciliation-hero { align-items:stretch; flex-direction:column; padding:19px; }.reconciliation-sync { justify-content:space-between; }.reconciliation-boundary { grid-template-columns:33px minmax(0,1fr); }.reconciliation-quality,.stability-window { grid-column:2; min-width:0; padding:9px 0 0; border-top:1px solid rgba(131,158,196,.1); border-left:0; }.reconciliation-filters { grid-template-columns:1fr; padding:14px; }.reconciliation-filter-actions { grid-column:1; display:grid; grid-template-columns:1fr 1fr; }.reconciliation-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.reconciliation-records-panel { padding:16px; }.reconciliation-records-head { align-items:flex-start; flex-direction:column; }.reconciliation-legend { justify-content:flex-start; }.reconciliation-table-wrap { overflow:visible; border:0; }.reconciliation-table,.reconciliation-table tbody,.reconciliation-table tr,.reconciliation-table td { display:block; width:100%; min-width:0; }.reconciliation-table thead { display:none; }.reconciliation-table tbody { display:grid; gap:10px; }.reconciliation-table tr { padding:6px 13px; border:1px solid rgba(131,158,196,.1); border-radius:11px; background:linear-gradient(145deg,rgba(13,23,38,.75),rgba(7,13,23,.66)); }.reconciliation-table tr:has(.reconciliation-empty-cell) { padding:0; }.reconciliation-table td { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:center; gap:8px; max-width:none !important; padding:10px 0; border-top:1px solid rgba(131,158,196,.07); }.reconciliation-table td:first-child { border-top:0; }.reconciliation-table td::before { content:attr(data-label); color:#647790; font-size:7px; font-weight:600; letter-spacing:.07em; }.reconciliation-table td > strong,.reconciliation-table td > span,.reconciliation-table td > small { grid-column:2; max-width:none !important; }.reconciliation-table td > small { margin-top:-5px; }.reconciliation-empty-cell { display:block !important; }.reconciliation-empty-cell::before { display:none; }.reconciliation-pagination { align-items:stretch; flex-direction:column; }.reconciliation-pagination > div { display:grid; grid-template-columns:1fr 1fr; }.reconciliation-pagination button { width:100%; } }
@media (max-width:420px) { .connection-metrics { grid-template-columns:1fr; }.connection-method-note { grid-template-columns:26px minmax(0,1fr); padding:10px; }.connection-method-note > span { width:26px; height:26px; } }
@media (max-width:420px) { .reconciliation-metrics { grid-template-columns:1fr; }.reconciliation-metric { min-height:108px; }.reconciliation-sync { align-items:stretch; flex-direction:column; }.reconciliation-sync button { width:100%; }.reconciliation-table td { grid-template-columns:82px minmax(0,1fr); } }
.route-probe-lane.protected .probe-connector i { background:repeating-linear-gradient(90deg,rgba(137,108,255,.48) 0 5px,transparent 5px 9px); }
.route-probe-lane.protected .route-latency { color:#b8a6ff; }

/* Customizable appearance ------------------------------------------------- */
::selection { color:var(--text); background:var(--selection); }
html { background:var(--bg-deep); }
body { transition:color .18s ease,background-color .18s ease; }
body::before {
  background:
    radial-gradient(circle at 78% -10%,var(--ambient-primary),transparent 32%),
    radial-gradient(circle at 28% 110%,var(--ambient-secondary),transparent 38%),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:auto,auto,36px 36px,36px 36px;
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
  box-shadow:0 0 0 5px var(--focus-ring);
}
.skip-link { color:var(--button-ink); }
.auth-gate { background:var(--auth-bg); }
.auth-visual {
  background:
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--cyan) 13%,transparent),transparent 18%),
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 38%),
    linear-gradient(140deg,var(--bg-deep),var(--surface-strong));
}
.auth-panel { background:var(--auth-panel-bg); }
.auth-form > input,.password-field input { background:var(--control-bg); }
.sidebar { background:var(--sidebar); }
.topbar { background:var(--topbar-bg); }
.nav-label { color:var(--muted); }
.nav-item:hover { background:color-mix(in srgb,var(--text-soft) 8%,transparent); }
.nav-item.active { background:linear-gradient(90deg,var(--cyan-soft),color-mix(in srgb,var(--cyan) 2%,transparent)); }
.brand-mark {
  border-color:color-mix(in srgb,var(--cyan) 38%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 25%,transparent),color-mix(in srgb,var(--violet) 20%,transparent));
  box-shadow:0 0 24px color-mix(in srgb,var(--cyan) 18%,transparent);
}
.avatar { border-color:color-mix(in srgb,var(--violet) 30%,transparent); color:color-mix(in srgb,var(--violet) 48%,var(--text)); }
.logout-button,.icon-button { background:color-mix(in srgb,var(--surface-strong) 58%,transparent); }
.metric-card,.panel,.model-card,.route-card,.route-overview,.security-banner {
  background:linear-gradient(145deg,var(--panel-start),var(--panel-end));
}
.primary-button {
  border-color:color-mix(in srgb,var(--cyan) 40%,transparent);
  color:var(--button-ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 72%,white),var(--cyan));
  box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 14%,transparent);
}
.secondary-button { background:color-mix(in srgb,var(--surface-strong) 72%,transparent); }
.compact-select,
.form-section input[type="number"],
.modal input,.modal select,
.router-config-form input,.router-config-form select,.router-config-form textarea,
.admin-modal-fields input,.admin-modal-fields select,.admin-modal-fields textarea,
.reconciliation-filters input,.reconciliation-filters select,.reconciliation-pagination select {
  color:var(--text);
  background:var(--control-bg);
}
.route-path,.route-probe-lane,.route-probe-notice,.admin-ops-context,.cost-summary div,.validation-result,.provider-test-result {
  background:color-mix(in srgb,var(--bg-deep) 52%,transparent);
}
.route-path .route-node { background:color-mix(in srgb,var(--surface-strong) 70%,transparent); }
.route-probe-monitor {
  background:linear-gradient(112deg,color-mix(in srgb,var(--cyan) 7.5%,transparent),color-mix(in srgb,var(--panel-end) 92%,transparent) 42%,color-mix(in srgb,var(--violet) 4.5%,transparent));
}
.reconciliation-hero {
  background:
    radial-gradient(circle at 88% -20%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 35%),
    radial-gradient(circle at 55% 130%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 38%),
    linear-gradient(135deg,var(--panel-start),var(--panel-end));
}
.reconciliation-metric,.admin-metric { background:linear-gradient(145deg,var(--panel-start),var(--panel-end)); }
.modal-backdrop { background:var(--overlay-bg); }
.modal { border-color:color-mix(in srgb,var(--cyan) 22%,transparent); background:var(--panel-solid); box-shadow:0 35px 100px rgba(0,0,0,.55),0 0 45px color-mix(in srgb,var(--cyan) 7%,transparent); }
.toast { box-shadow:var(--shadow-soft); }

/* Theme picker: supports button/radio implementations without coupling CSS
   to the persistence mechanism. */
.theme-customizer,.appearance-panel { grid-column:1/-1; padding:22px; overflow:hidden; }
.theme-customizer > .panel-head,.appearance-panel > .panel-head { align-items:center; margin-bottom:18px; }
.theme-customizer > .panel-head .eyebrow,.appearance-panel > .panel-head .eyebrow { margin:0 0 6px; color:var(--cyan); font-size:8px; font-weight:700; letter-spacing:.16em; }
.theme-customizer > .panel-head h2,.appearance-panel > .panel-head h2 { margin:0 0 6px; }
.theme-customizer > .panel-head p:last-child,.appearance-panel > .panel-head p:last-child { max-width:680px; line-height:1.65; }
.theme-customizer-head,.appearance-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.theme-customizer-head h2,.appearance-panel-head h2 { margin:0 0 6px; font-size:14px; }
.theme-customizer-head p,.appearance-panel-head p { max-width:680px; margin:0; color:var(--muted); font-size:9px; line-height:1.65; }
.theme-current { display:inline-flex; align-items:center; gap:7px; min-height:26px; padding:0 10px; flex:0 0 auto; border:1px solid var(--border); border-radius:999px; color:var(--text-soft); background:var(--surface); font-size:8px; }
.theme-current::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px color-mix(in srgb,var(--cyan) 70%,transparent); }
.theme-picker,.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.theme-option,.theme-card,.theme-choice {
  position:relative;
  min-width:0;
  min-height:145px;
  display:grid;
  grid-template-rows:72px auto;
  gap:13px;
  padding:12px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  color:var(--text);
  background:linear-gradient(145deg,var(--panel-start),var(--panel-end));
  box-shadow:inset 0 1px rgba(255,255,255,.025);
  text-align:left;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background-color .18s ease;
}
.theme-option::after,.theme-card::after,.theme-choice::after {
  content:"";
  position:absolute;
  top:15px;
  right:15px;
  width:14px;
  height:14px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(3,6,13,.56);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.theme-option:hover,.theme-card:hover,.theme-choice:hover { border-color:var(--border-strong); transform:translateY(-2px); box-shadow:inset 0 1px rgba(255,255,255,.035),var(--shadow-soft); }
.theme-option.active,.theme-option[aria-checked="true"],.theme-option[aria-pressed="true"],.theme-option[data-selected="true"],
.theme-card.active,.theme-card[aria-checked="true"],.theme-card[aria-pressed="true"],.theme-card[data-selected="true"],
.theme-choice.active,.theme-choice[aria-checked="true"],.theme-choice[aria-pressed="true"],.theme-choice[data-selected="true"] {
  border-color:color-mix(in srgb,var(--cyan) 56%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--cyan) 7%,var(--panel-start)),var(--panel-end));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cyan) 12%,transparent),0 10px 34px color-mix(in srgb,var(--cyan) 8%,transparent);
}
.theme-option.active::after,.theme-option[aria-checked="true"]::after,.theme-option[aria-pressed="true"]::after,.theme-option[data-selected="true"]::after,
.theme-card.active::after,.theme-card[aria-checked="true"]::after,.theme-card[aria-pressed="true"]::after,.theme-card[data-selected="true"]::after,
.theme-choice.active::after,.theme-choice[aria-checked="true"]::after,.theme-choice[aria-pressed="true"]::after,.theme-choice[data-selected="true"]::after {
  border:4px solid var(--cyan);
  background:var(--button-ink);
  box-shadow:0 0 0 3px var(--focus-ring),0 0 12px color-mix(in srgb,var(--cyan) 45%,transparent);
}
.theme-swatch,.theme-preview {
  position:relative;
  width:100%;
  height:72px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:9px;
  background:#08101d;
  box-shadow:inset 0 0 28px rgba(0,0,0,.2);
}
.theme-swatch::before,.theme-preview::before { content:""; position:absolute; inset:8px 9px 9px; border:1px solid rgba(255,255,255,.12); border-radius:6px; background:linear-gradient(90deg,rgba(255,255,255,.055) 27%,transparent 27%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px); background-size:auto,100% 13px; }
.theme-swatch::after,.theme-preview::after { content:""; position:absolute; right:-12px; bottom:-21px; width:80px; height:80px; border-radius:50%; filter:blur(16px); opacity:.62; }
.theme-swatch i,.theme-preview i { position:absolute; z-index:1; display:block; border-radius:3px; }
.theme-swatch i:nth-child(1),.theme-preview i:nth-child(1) { left:16px; top:18px; width:15px; height:36px; background:rgba(255,255,255,.07); }
.theme-swatch i:nth-child(2),.theme-preview i:nth-child(2) { top:18px; right:16px; left:38px; height:7px; background:rgba(255,255,255,.09); }
.theme-swatch i:nth-child(3),.theme-preview i:nth-child(3) { top:31px; right:16px; bottom:17px; left:38px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(135deg,color-mix(in srgb,var(--preview-accent,var(--cyan)) 30%,transparent),rgba(255,255,255,.035)); box-shadow:0 0 13px color-mix(in srgb,var(--preview-accent,var(--cyan)) 18%,transparent); }
.theme-option[data-theme-value="tech-blue"],.theme-card[data-theme-value="tech-blue"],.theme-card[data-theme-option="tech-blue"],.theme-choice[data-theme="tech-blue"] { --preview-accent:#38e7ff; }
.theme-option[data-theme-value="obsidian"],.theme-card[data-theme-value="obsidian"],.theme-card[data-theme-option="obsidian"],.theme-choice[data-theme="obsidian"] { --preview-accent:#ddb86d; }
.theme-option[data-theme-value="aurora"],.theme-card[data-theme-value="aurora"],.theme-card[data-theme-option="aurora"],.theme-choice[data-theme="aurora"] { --preview-accent:#ad8bff; }
.theme-option[data-theme-value="tech-blue"] .theme-swatch,.theme-card[data-theme-value="tech-blue"] .theme-swatch,.theme-card[data-theme-option="tech-blue"] .theme-preview,.theme-choice[data-theme="tech-blue"] .theme-preview { background:radial-gradient(circle at 22% 0,rgba(56,231,255,.24),transparent 42%),linear-gradient(145deg,#0e1d32,#060b14); }
.theme-option[data-theme-value="tech-blue"] .theme-swatch::after,.theme-card[data-theme-value="tech-blue"] .theme-swatch::after,.theme-card[data-theme-option="tech-blue"] .theme-preview::after,.theme-choice[data-theme="tech-blue"] .theme-preview::after { background:#238cff; }
.theme-option[data-theme-value="obsidian"] .theme-swatch,.theme-card[data-theme-value="obsidian"] .theme-swatch,.theme-card[data-theme-option="obsidian"] .theme-preview,.theme-choice[data-theme="obsidian"] .theme-preview { background:radial-gradient(circle at 22% 0,rgba(221,184,109,.18),transparent 43%),linear-gradient(145deg,#1a1b1e,#08090a); }
.theme-option[data-theme-value="obsidian"] .theme-swatch::after,.theme-card[data-theme-value="obsidian"] .theme-swatch::after,.theme-card[data-theme-option="obsidian"] .theme-preview::after,.theme-choice[data-theme="obsidian"] .theme-preview::after { background:#c59b51; }
.theme-option[data-theme-value="aurora"] .theme-swatch,.theme-card[data-theme-value="aurora"] .theme-swatch,.theme-card[data-theme-option="aurora"] .theme-preview,.theme-choice[data-theme="aurora"] .theme-preview { background:radial-gradient(circle at 18% 0,rgba(120,223,255,.22),transparent 42%),linear-gradient(145deg,#211b45,#090718); }
.theme-option[data-theme-value="aurora"] .theme-swatch::after,.theme-card[data-theme-value="aurora"] .theme-swatch::after,.theme-card[data-theme-option="aurora"] .theme-preview::after,.theme-choice[data-theme="aurora"] .theme-preview::after { background:#a15cff; }
.theme-option-copy,.theme-card-copy,.theme-choice-copy { min-width:0; padding:0 2px 1px; }
.theme-option-copy strong,.theme-card-copy strong,.theme-choice-copy strong,.theme-option > strong,.theme-card > strong,.theme-choice > strong { display:block; overflow:hidden; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.theme-option-copy small,.theme-card-copy small,.theme-choice-copy small,.theme-option > small,.theme-card > small,.theme-choice > small { display:block; margin-top:5px; overflow:hidden; color:var(--muted); font-size:8px; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:900px) {
  .theme-picker,.theme-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .theme-customizer,.appearance-panel { padding:17px; }
  .theme-customizer > .panel-head,.appearance-panel > .panel-head { align-items:flex-start; flex-direction:column; }
  .theme-customizer-head,.appearance-panel-head { align-items:flex-start; flex-direction:column; }
  .theme-picker,.theme-options { grid-template-columns:1fr; }
  .theme-option,.theme-card,.theme-choice { min-height:126px; grid-template-columns:112px minmax(0,1fr); grid-template-rows:auto; align-items:center; }
  .theme-swatch,.theme-preview { height:68px; }
}
@media (max-width:390px) {
  .theme-option,.theme-card,.theme-choice { grid-template-columns:92px minmax(0,1fr); padding:10px; }
}
@media (prefers-reduced-motion:reduce) {
  body,.theme-option,.theme-card,.theme-choice,.theme-option::after,.theme-card::after,.theme-choice::after { transition:none !important; }
  .theme-option:hover,.theme-card:hover,.theme-choice:hover { transform:none; }
}
@media (prefers-contrast:more) {
  :root,:root[data-theme],body[data-theme] { --border:color-mix(in srgb,var(--text-soft) 38%,transparent); --border-strong:color-mix(in srgb,var(--cyan) 72%,transparent); --muted:color-mix(in srgb,var(--text) 70%,var(--bg)); }
  .metric-card,.panel,.model-card,.route-card,.route-overview,.security-banner,.theme-option,.theme-card,.theme-choice { box-shadow:none; }
  .theme-option.active,.theme-option[aria-checked="true"],.theme-option[aria-pressed="true"],.theme-option[data-selected="true"],.theme-card.active,.theme-card[aria-checked="true"],.theme-card[aria-pressed="true"],.theme-card[data-selected="true"],.theme-choice.active,.theme-choice[aria-checked="true"],.theme-choice[aria-pressed="true"],.theme-choice[data-selected="true"] { outline:2px solid var(--cyan); outline-offset:2px; }
}
@media (forced-colors:active) {
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid Highlight; box-shadow:none; }
  .theme-option,.theme-card,.theme-choice { border:1px solid CanvasText; background:Canvas; color:CanvasText; forced-color-adjust:auto; }
  .theme-option.active,.theme-option[aria-checked="true"],.theme-option[aria-pressed="true"],.theme-option[data-selected="true"],.theme-card.active,.theme-card[aria-checked="true"],.theme-card[aria-pressed="true"],.theme-card[data-selected="true"],.theme-choice.active,.theme-choice[aria-checked="true"],.theme-choice[aria-pressed="true"],.theme-choice[data-selected="true"] { outline:3px solid Highlight; outline-offset:2px; }
}

/* FINAL_LIGHT_SURFACE_CONTRACT
 * Keep this block last. The console predates semantic tokens in a few
 * components, so these selectors neutralize every user-visible legacy dark
 * surface after all desktop and responsive rules have been evaluated. */
html[data-theme="light"] body {
  color: #111827;
  background: #f7f9fc;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(circle at 78% -10%, rgba(37, 99, 235, .08), transparent 32%),
    radial-gradient(circle at 28% 110%, rgba(124, 58, 237, .055), transparent 38%),
    linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);
  background-size: auto, auto, 36px 36px, 36px 36px;
}
html[data-theme="light"] .auth-gate { background: #f1f5fb; }
html[data-theme="light"] .auth-visual {
  background:
    radial-gradient(circle at 50% 48%, rgba(37, 99, 235, .12), transparent 20%),
    radial-gradient(circle at 50% 48%, rgba(124, 58, 237, .09), transparent 40%),
    linear-gradient(140deg, #f8fbff, #eaf1fb);
}
html[data-theme="light"] .auth-panel { background: rgba(255, 255, 255, .96); }
html[data-theme="light"] .auth-form > input,
html[data-theme="light"] .password-field input,
html[data-theme="light"] .form-grid input,
html[data-theme="light"] .form-grid select,
html[data-theme="light"] .form-grid textarea,
html[data-theme="light"] .compact-select,
html[data-theme="light"] .reconciliation-filters input,
html[data-theme="light"] .reconciliation-filters select,
html[data-theme="light"] .reconciliation-pagination select,
html[data-theme="light"] .provider-model-picker select {
  color: #1f2937;
  background: #ffffff;
  color-scheme: light;
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .96); }
html[data-theme="light"] .logout-button,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .filter-tabs,
html[data-theme="light"] .search-box { background: #ffffff; }
html[data-theme="light"] .primary-button {
  color: #ffffff;
  border-color: #2563eb;
  background: linear-gradient(135deg, #4f7ff0, #2563eb);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .18);
}
html[data-theme="light"] .metric-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .model-card,
html[data-theme="light"] .route-card,
html[data-theme="light"] .route-overview,
html[data-theme="light"] .security-banner,
html[data-theme="light"] .reconciliation-metric,
html[data-theme="light"] .admin-metric {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow: inset 0 1px #ffffff, 0 10px 30px rgba(15, 23, 42, .08);
}
html[data-theme="light"] .runtime-banner,
html[data-theme="light"] .runtime-banner.is-degraded,
html[data-theme="light"] .runtime-banner.is-demo,
html[data-theme="light"] .reconciliation-hero,
html[data-theme="light"] .reconciliation-table tr,
html[data-theme="light"] .runtime-empty.wide,
html[data-theme="light"] .model-card dl div,
html[data-theme="light"] .model-runtime-meta div,
html[data-theme="light"] .cost-summary div,
html[data-theme="light"] .provider-test-result {
  background: linear-gradient(135deg, #ffffff, #f5f8fc);
}
html[data-theme="light"] .runtime-banner.is-degraded { background: linear-gradient(100deg, rgba(180, 83, 9, .08), #ffffff); }
html[data-theme="light"] .runtime-banner.is-demo { background: linear-gradient(100deg, rgba(124, 58, 237, .07), #ffffff); }
html[data-theme="light"] .donut::after,
html[data-theme="light"] .budget-ring::after { background: #ffffff; box-shadow: inset 0 0 12px rgba(15, 23, 42, .08); }
html[data-theme="light"] .global-health { color: #166534; }
html[data-theme="light"] .global-health.is-degraded { color: #92400e; }
html[data-theme="light"] .global-health.is-demo,
html[data-theme="light"] .demo-badge,
html[data-theme="light"] .status-badge.beta,
html[data-theme="light"] .status-badge.demo { color: #6d28d9; }
html[data-theme="light"] .route-note strong,
html[data-theme="light"] .model-avatar.openai { color: #047857; }
html[data-theme="light"] .model-avatar.claude { color: #c2410c; }
html[data-theme="light"] .model-avatar.gemini { color: #1d4ed8; }
html[data-theme="light"] .model-avatar.deepseek { color: #4338ca; }
html[data-theme="light"] .avatar { color: #6d28d9; }
html[data-theme="light"] .breadcrumb b,
html[data-theme="light"] .nav-label,
html[data-theme="light"] .y-label,
html[data-theme="light"] .x-axis,
html[data-theme="light"] th { color: #64748b; }
html[data-theme="light"] td code { color: #334155; }
html[data-theme="light"] .modal,
html[data-theme="light"] .key-secret-modal {
  color: #111827;
  background: radial-gradient(circle at 100% 0, rgba(124, 58, 237, .06), transparent 40%), #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
}
html[data-theme="light"] .secret-display input {
  color: #1e3a8a;
  background: #eff6ff;
}
html[data-theme="light"] .destructive-confirm {
  color: #991b1b;
  background: #fef2f2;
}
html[data-theme="light"] .modal-backdrop { background: rgba(15, 23, 42, .32); }
html[data-theme="light"] .theme-customizer,
html[data-theme="light"] .appearance-panel,
html[data-theme="light"] [data-theme-value] { display: none !important; }

@media (max-width: 640px) {
  html[data-theme="light"] .auth-panel,
  html[data-theme="light"] .sidebar,
  html[data-theme="light"] .topbar { background: #ffffff; }
  html[data-theme="light"] .page-container { background: #f7f9fc; }
  html[data-theme="light"] .metric-card,
  html[data-theme="light"] .panel,
  html[data-theme="light"] .model-card,
  html[data-theme="light"] .route-card,
  html[data-theme="light"] .reconciliation-table tr { background: #ffffff; }
}