/* Playful light design: a floating rail, a hero card, and bento tiles.
   Theme tokens below change the whole atmosphere; the semantic status palette
   (teal/green/amber/orange/red/gray and the quota ramp) is shared by every
   theme so health keeps one meaning wherever the operator looks. */
:root {
  --ink: #2b2340;
  --muted: #776f86;
  --muted-strong: #4f4763;
  --line: #eadfd8;
  --line-soft: #f1e8e2;
  --line-strong: #d9c8bd;
  --canvas: #fff6ee;
  --canvas-soft: #ffece0;
  --surface: #ffffff;
  --surface-soft: rgba(255, 255, 255, .86);
  --surface-raised: #fff9f4;
  --surface-hover: #fff1e8;
  --accent: #ff7a59;
  --accent-strong: #e85d3c;
  --accent-hot: #6c5ce7;
  --accent-bg: rgba(255, 122, 89, .14);
  --pop-1: #ff7a59;
  --pop-2: #ffb347;
  --pop-3: #6c5ce7;
  --pop-4: #12a594;
  --teal: #0f8f7e;
  --teal-bg: rgba(15, 143, 126, .12);
  --violet: #6c5ce7;
  --violet-bg: rgba(108, 92, 231, .12);
  --green: #3f8f2f;
  --green-bg: rgba(63, 143, 47, .12);
  --amber: #a96e00;
  --amber-bg: rgba(242, 193, 78, .24);
  --red: #c83252;
  --red-bg: rgba(200, 50, 82, .12);
  --orange: #c85e2d;
  --orange-bg: rgba(232, 111, 60, .15);
  --gray: #6e6a78;
  --gray-bg: rgba(110, 106, 120, .12);
  --shadow: 0 16px 40px rgba(108, 70, 60, .12);
  --sticker: 0 5px 0 rgba(43, 35, 64, .06), 0 18px 36px rgba(108, 70, 60, .1);
  --body-background: radial-gradient(circle at 6% 4%, rgba(255, 122, 89, .26), transparent 30%), radial-gradient(circle at 96% 10%, rgba(108, 92, 231, .2), transparent 30%), radial-gradient(circle at 80% 92%, rgba(255, 179, 71, .26), transparent 34%), radial-gradient(circle at 14% 86%, rgba(18, 165, 148, .16), transparent 30%), linear-gradient(160deg, #fff8f1 0%, #fff1e6 55%, #f7ecff 100%);
  --blob-a: rgba(255, 122, 89, .32);
  --blob-b: rgba(108, 92, 231, .24);
  --rail-bg: linear-gradient(180deg, #2b2340 0%, #3d2f5c 100%);
  --rail-ink: #fff8f1;
  --rail-muted: #d8cfe8;
  --rail-link-hover: rgba(255, 255, 255, .1);
  --rail-border: rgba(255, 179, 71, .45);
  --focus-ring: rgba(108, 92, 231, .22);
  --input-bg: #ffffff;
  --primary-start: #ff7a59;
  --primary-middle: #ff9a4d;
  --primary-end: #6c5ce7;
  --primary-hover-start: #ff8a6b;
  --primary-hover-middle: #ffab5e;
  --primary-hover-end: #7d6ef0;
  --secondary-bg: #ffffff;
  --secondary-hover-bg: #fff1e8;
  --secondary-border: #ead7cb;
  --secondary-hover-border: #ff9a7f;
  --hero-bg: linear-gradient(120deg, #ff7a59 0%, #ff9a4d 38%, #ffb347 62%, #a48cf5 100%);
  --hero-ink: #ffffff;
  --summary-bg: #ffffff;
  --summary-featured-bg: linear-gradient(140deg, #6c5ce7 0%, #8f7cf7 55%, #ff7a59 140%);
  --throughput-bg: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 244, 236, .92) 50%, rgba(246, 240, 255, .92));
  --throughput-glow: rgba(255, 122, 89, .28);
  --stat-bg: #ffffff;
  --chart-card-bg: #ffffff;
  --chart-plot-bg: linear-gradient(180deg, #fffaf6, #f8f2ff);
  --table-head-bg: #fff3ea;
  --row-hover-bg: #fff6f0;
  --row-divider: #f3e7df;
  --panel-soft-bg: rgba(255, 255, 255, .8);
  --dialog-row-bg: #fff6f0;
  --copy-button-bg: #fff1e8;
  --copy-button-hover-bg: #ffe2d6;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  color-scheme: light;
}

:root[data-theme="lagoon"] {
  --ink: #12364a;
  --muted: #5f7c8b;
  --muted-strong: #3a5a6b;
  --line: #d3e8ef;
  --line-soft: #e2f1f5;
  --line-strong: #b7d6e1;
  --canvas: #eefaff;
  --canvas-soft: #def4fb;
  --surface-raised: #f5fcff;
  --surface-hover: #e6f6fb;
  --accent: #0aa2d4;
  --accent-strong: #0786b0;
  --accent-hot: #10b39b;
  --accent-bg: rgba(10, 162, 212, .13);
  --pop-1: #0aa2d4;
  --pop-2: #33d1c4;
  --pop-3: #4f7cff;
  --pop-4: #ffb347;
  --shadow: 0 16px 40px rgba(18, 70, 90, .12);
  --sticker: 0 5px 0 rgba(18, 54, 74, .06), 0 18px 36px rgba(18, 70, 90, .1);
  --body-background: radial-gradient(circle at 6% 4%, rgba(10, 162, 212, .26), transparent 30%), radial-gradient(circle at 96% 10%, rgba(51, 209, 196, .24), transparent 30%), radial-gradient(circle at 80% 92%, rgba(79, 124, 255, .18), transparent 34%), linear-gradient(160deg, #f4fcff 0%, #e6f7fc 55%, #eef1ff 100%);
  --blob-a: rgba(10, 162, 212, .3);
  --blob-b: rgba(51, 209, 196, .26);
  --rail-bg: linear-gradient(180deg, #0f3448 0%, #12506a 100%);
  --rail-border: rgba(51, 209, 196, .5);
  --focus-ring: rgba(10, 162, 212, .22);
  --primary-start: #0aa2d4;
  --primary-middle: #22bfd0;
  --primary-end: #4f7cff;
  --primary-hover-start: #20b2e0;
  --primary-hover-middle: #3bcbd9;
  --primary-hover-end: #6a91ff;
  --secondary-hover-bg: #e6f6fb;
  --secondary-border: #c4e0ea;
  --secondary-hover-border: #5ec3df;
  --hero-bg: linear-gradient(120deg, #0aa2d4 0%, #22bfd0 45%, #33d1c4 65%, #6f8dff 100%);
  --summary-featured-bg: linear-gradient(140deg, #0f6f99 0%, #0aa2d4 55%, #33d1c4 140%);
  --throughput-bg: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(234, 248, 252, .92) 50%, rgba(238, 242, 255, .92));
  --throughput-glow: rgba(10, 162, 212, .26);
  --chart-plot-bg: linear-gradient(180deg, #f7fdff, #eef4ff);
  --table-head-bg: #e8f7fb;
  --row-hover-bg: #f1fafd;
  --row-divider: #e0eff4;
  --dialog-row-bg: #f1fafd;
  --copy-button-bg: #e6f6fb;
  --copy-button-hover-bg: #d4eef7;
}

:root[data-theme="meadow"] {
  --ink: #233a22;
  --muted: #6b7d63;
  --muted-strong: #455c3f;
  --line: #dce9d2;
  --line-soft: #e8f2e0;
  --line-strong: #c3d8b5;
  --canvas: #f3fbea;
  --canvas-soft: #e6f5d8;
  --surface-raised: #f8fdf2;
  --surface-hover: #eef8e4;
  --accent: #4caf50;
  --accent-strong: #388e3c;
  --accent-hot: #f08c00;
  --accent-bg: rgba(76, 175, 80, .14);
  --pop-1: #4caf50;
  --pop-2: #a6d64a;
  --pop-3: #f08c00;
  --pop-4: #1fa38f;
  --shadow: 0 16px 40px rgba(50, 80, 40, .12);
  --sticker: 0 5px 0 rgba(35, 58, 34, .06), 0 18px 36px rgba(50, 80, 40, .1);
  --body-background: radial-gradient(circle at 6% 4%, rgba(76, 175, 80, .26), transparent 30%), radial-gradient(circle at 96% 10%, rgba(240, 140, 0, .18), transparent 30%), radial-gradient(circle at 80% 92%, rgba(166, 214, 74, .26), transparent 34%), linear-gradient(160deg, #f8fdf1 0%, #eef8e2 55%, #fdf7e6 100%);
  --blob-a: rgba(76, 175, 80, .28);
  --blob-b: rgba(240, 140, 0, .2);
  --rail-bg: linear-gradient(180deg, #23421f 0%, #2f5a2a 100%);
  --rail-border: rgba(166, 214, 74, .5);
  --focus-ring: rgba(76, 175, 80, .22);
  --primary-start: #4caf50;
  --primary-middle: #8bc34a;
  --primary-end: #f08c00;
  --primary-hover-start: #5cbf60;
  --primary-hover-middle: #9bd25a;
  --primary-hover-end: #ff9d1a;
  --secondary-hover-bg: #eef8e4;
  --secondary-border: #cfe2c0;
  --secondary-hover-border: #8bc34a;
  --hero-bg: linear-gradient(120deg, #4caf50 0%, #8bc34a 45%, #c6dc4a 65%, #f5a623 100%);
  --summary-featured-bg: linear-gradient(140deg, #2e7d32 0%, #4caf50 55%, #f08c00 140%);
  --throughput-bg: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(240, 249, 230, .92) 50%, rgba(255, 248, 230, .92));
  --throughput-glow: rgba(76, 175, 80, .26);
  --chart-plot-bg: linear-gradient(180deg, #fbfef7, #f6fae9);
  --table-head-bg: #eef7e5;
  --row-hover-bg: #f5fbef;
  --row-divider: #e6f0dd;
  --dialog-row-bg: #f5fbef;
  --copy-button-bg: #eef7e5;
  --copy-button-hover-bg: #def0cf;
}

:root[data-theme="orchid"] {
  --ink: #3a2147;
  --muted: #80698d;
  --muted-strong: #5c4269;
  --line: #ecdcf2;
  --line-soft: #f4e9f8;
  --line-strong: #dcc4e6;
  --canvas: #fbf2ff;
  --canvas-soft: #f4e2fb;
  --surface-raised: #fdf8ff;
  --surface-hover: #f8ecfd;
  --accent: #b44fe0;
  --accent-strong: #9333c4;
  --accent-hot: #e8558f;
  --accent-bg: rgba(180, 79, 224, .13);
  --pop-1: #b44fe0;
  --pop-2: #e8558f;
  --pop-3: #6c5ce7;
  --pop-4: #f5a623;
  --shadow: 0 16px 40px rgba(80, 40, 100, .13);
  --sticker: 0 5px 0 rgba(58, 33, 71, .06), 0 18px 36px rgba(80, 40, 100, .1);
  --body-background: radial-gradient(circle at 6% 4%, rgba(180, 79, 224, .26), transparent 30%), radial-gradient(circle at 96% 10%, rgba(232, 85, 143, .22), transparent 30%), radial-gradient(circle at 80% 92%, rgba(108, 92, 231, .2), transparent 34%), linear-gradient(160deg, #fdf6ff 0%, #f7e9fd 55%, #fff0f6 100%);
  --blob-a: rgba(180, 79, 224, .28);
  --blob-b: rgba(232, 85, 143, .24);
  --rail-bg: linear-gradient(180deg, #3a2147 0%, #55306a 100%);
  --rail-border: rgba(232, 85, 143, .5);
  --focus-ring: rgba(180, 79, 224, .22);
  --primary-start: #b44fe0;
  --primary-middle: #d054b6;
  --primary-end: #e8558f;
  --primary-hover-start: #c263ea;
  --primary-hover-middle: #db68c3;
  --primary-hover-end: #f06a9d;
  --secondary-hover-bg: #f8ecfd;
  --secondary-border: #e2cdeb;
  --secondary-hover-border: #c98be4;
  --hero-bg: linear-gradient(120deg, #9b4fe0 0%, #b44fe0 35%, #d054b6 62%, #e8558f 100%);
  --summary-featured-bg: linear-gradient(140deg, #6c3aa8 0%, #b44fe0 55%, #e8558f 140%);
  --throughput-bg: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(250, 238, 253, .92) 50%, rgba(255, 240, 246, .92));
  --throughput-glow: rgba(232, 85, 143, .26);
  --chart-plot-bg: linear-gradient(180deg, #fefaff, #fbf0f7);
  --table-head-bg: #f7ecfc;
  --row-hover-bg: #fbf4fe;
  --row-divider: #f1e4f6;
  --dialog-row-bg: #fbf4fe;
  --copy-button-bg: #f7ecfc;
  --copy-button-hover-bg: #efdaf8;
}

:root[data-theme="citrus"] {
  --ink: #3d3115;
  --muted: #84765a;
  --muted-strong: #5e5031;
  --line: #f0e3bf;
  --line-soft: #f6eed3;
  --line-strong: #e3cf95;
  --canvas: #fffbe8;
  --canvas-soft: #fff3c4;
  --surface-raised: #fffdf3;
  --surface-hover: #fff6d6;
  --accent: #f59f00;
  --accent-strong: #d48700;
  --accent-hot: #ef4f6a;
  --accent-bg: rgba(245, 159, 0, .15);
  --pop-1: #f59f00;
  --pop-2: #ffd43b;
  --pop-3: #ef4f6a;
  --pop-4: #40c057;
  --shadow: 0 16px 40px rgba(110, 85, 20, .13);
  --sticker: 0 5px 0 rgba(61, 49, 21, .06), 0 18px 36px rgba(110, 85, 20, .1);
  --body-background: radial-gradient(circle at 6% 4%, rgba(245, 159, 0, .26), transparent 30%), radial-gradient(circle at 96% 10%, rgba(239, 79, 106, .18), transparent 30%), radial-gradient(circle at 80% 92%, rgba(255, 212, 59, .3), transparent 34%), linear-gradient(160deg, #fffdf0 0%, #fff6d4 55%, #fff0e8 100%);
  --blob-a: rgba(255, 212, 59, .36);
  --blob-b: rgba(239, 79, 106, .2);
  --rail-bg: linear-gradient(180deg, #3d3115 0%, #5a4718 100%);
  --rail-border: rgba(255, 212, 59, .55);
  --focus-ring: rgba(245, 159, 0, .24);
  --primary-start: #f59f00;
  --primary-middle: #fcc419;
  --primary-end: #ef4f6a;
  --primary-hover-start: #ffae1a;
  --primary-hover-middle: #ffd23d;
  --primary-hover-end: #f56a81;
  --secondary-hover-bg: #fff6d6;
  --secondary-border: #ecdba8;
  --secondary-hover-border: #f5b83d;
  --hero-bg: linear-gradient(120deg, #f59f00 0%, #fcc419 40%, #ffd43b 60%, #ff8a65 100%);
  --hero-ink: #3d3115;
  --summary-featured-bg: linear-gradient(140deg, #e8590c 0%, #f59f00 55%, #ef4f6a 140%);
  --throughput-bg: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 249, 225, .92) 50%, rgba(255, 240, 235, .92));
  --throughput-glow: rgba(245, 159, 0, .28);
  --chart-plot-bg: linear-gradient(180deg, #fffef8, #fff7e6);
  --table-head-bg: #fff6d6;
  --row-hover-bg: #fffaea;
  --row-divider: #f5ecd0;
  --dialog-row-bg: #fffaea;
  --copy-button-bg: #fff6d6;
  --copy-button-hover-bg: #ffecb0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--body-background); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: progress; opacity: .72; }
[hidden] { display: none !important; }

/* Two slow, blurred blobs give the canvas some life. They sit behind every
   surface, never under text without a card, and stop for reduced motion. */
.app-shell::before, .app-shell::after { content: ""; position: fixed; z-index: -1; width: 420px; height: 420px; border-radius: 46% 54% 58% 42%; filter: blur(46px); pointer-events: none; animation: blob-drift 22s ease-in-out infinite alternate; }
.app-shell::before { top: -120px; right: 8%; background: var(--blob-a); }
.app-shell::after { bottom: -160px; left: 18%; background: var(--blob-b); animation-duration: 28s; animation-direction: alternate-reverse; }
@keyframes blob-drift { 0% { transform: translate(0, 0) rotate(0deg) scale(1); } 50% { transform: translate(60px, 40px) rotate(40deg) scale(1.12); } 100% { transform: translate(-40px, 70px) rotate(90deg) scale(.94); } }

.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* Rail: the floating navigation card. */
.rail { position: sticky; top: 16px; z-index: 10; display: flex; flex-direction: column; gap: 18px; height: calc(100vh - 32px); margin: 16px 0 16px 16px; padding: 18px 14px; overflow-y: auto; color: var(--rail-ink); background: var(--rail-bg); border: 1px solid var(--rail-border); border-radius: 28px; box-shadow: 0 24px 50px rgba(30, 20, 50, .28); }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 12px; border-bottom: 1px dashed rgba(255, 255, 255, .18); font-size: 17px; font-weight: 820; letter-spacing: -.01em; }
.brand-mark { display: block; width: 38px; height: 38px; border-radius: 13px; box-shadow: 0 8px 20px rgba(0, 0, 0, .3), 0 0 0 2px rgba(255, 255, 255, .2); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
.rail-nav { display: grid; gap: 4px; }
.rail-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 14px; color: var(--rail-muted); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
.rail-link::before { content: "✦"; display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--pop-1), var(--pop-2)); font-size: 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .22); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.rail-link[data-icon="capacity"]::before { content: "▮"; background: linear-gradient(135deg, var(--pop-4), #7bd389); }
.rail-link[data-icon="flow"]::before { content: "≋"; background: linear-gradient(135deg, var(--pop-3), var(--pop-1)); }
.rail-link[data-icon="accounts"]::before { content: "●"; background: linear-gradient(135deg, var(--pop-2), var(--pop-3)); }
.rail-link[data-icon="routing"]::before { content: "↯"; background: linear-gradient(135deg, #ff5d8f, var(--pop-2)); }
.rail-link[data-icon="routes"]::before { content: "⇄"; background: linear-gradient(135deg, var(--pop-4), var(--pop-3)); }
.rail-link:hover { color: var(--rail-ink); background: var(--rail-link-hover); transform: translateX(3px); }
.rail-link:hover::before { transform: rotate(-12deg) scale(1.1); }
/* Section links mean nothing on the unlock screen and must not describe it. */
.app-shell:has(#login-view:not([hidden])) .rail-nav { display: none; }
.rail-foot { display: grid; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .18); }
.rail-buttons { display: flex; gap: 6px; }
.theme-picker { display: grid; gap: 6px; margin: 0; color: var(--rail-muted); font-size: 11px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.theme-picker select { min-height: 36px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 12px; color: var(--rail-ink); background: rgba(255, 255, 255, .1); color-scheme: dark; }
.theme-picker select:focus { border-color: var(--rail-border); box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.theme-picker option { color: var(--ink); background: var(--surface); }
.service-status { display: inline-flex; align-items: center; gap: 7px; color: var(--rail-muted); font-size: 12px; font-weight: 650; }
.service-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7bd389; box-shadow: 0 0 0 4px rgba(123, 211, 137, .2); animation: badge-pulse 1.8s ease-in-out infinite; }

.stage { display: flex; min-width: 0; flex-direction: column; }
main { width: 100%; max-width: 1460px; margin: 0 auto; padding: 22px 28px 36px; }
.app-footer { display: flex; justify-content: center; padding: 0 24px 22px; color: var(--muted); font-size: 11px; }
.app-footer span { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); }

/* Entrance: sections rise in one after another. */
.dashboard-view > * { animation: rise-in .55s cubic-bezier(.22, 1, .36, 1) both; }
.dashboard-view > *:nth-child(2) { animation-delay: .05s; }.dashboard-view > *:nth-child(3) { animation-delay: .1s; }.dashboard-view > *:nth-child(4) { animation-delay: .15s; }.dashboard-view > *:nth-child(5) { animation-delay: .2s; }.dashboard-view > *:nth-child(6) { animation-delay: .25s; }.dashboard-view > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

.login-view { min-height: calc(100vh - 80px); display: grid; place-items: center; }
.login-panel { position: relative; width: min(100%, 360px); padding: 30px 28px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--surface-soft); box-shadow: var(--sticker); backdrop-filter: blur(16px); animation: rise-in .6s cubic-bezier(.22, 1, .36, 1) both; }
.login-panel::before { content: ""; position: absolute; top: -60px; right: -50px; width: 160px; height: 160px; border-radius: 50%; background: var(--hero-bg); opacity: .35; filter: blur(4px); }
h1, h2, p { margin: 0; }
h1 { margin-top: 4px; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.eyebrow { color: var(--accent-hot); font-size: 11px; font-weight: 820; letter-spacing: .1em; }
.muted { margin-top: 4px; color: var(--muted); font-size: 13px; }
label { display: grid; gap: 6px; margin-top: 18px; color: var(--muted-strong); font-size: 13px; font-weight: 700; }
input, select { width: 100%; min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--input-bg); outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
input:focus, select:focus { border-color: var(--accent-hot); box-shadow: 0 0 0 4px var(--focus-ring); }
.form-error { margin-top: 14px; color: var(--red); font-size: 13px; line-height: 1.45; }

.button { min-height: 36px; padding: 8px 15px; border: 1.5px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 780; line-height: 1; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; }
.button:hover { transform: translateY(-2px) scale(1.02); }
.button:active { transform: translateY(1px) scale(.98); }
.button.primary { color: #fff; background: linear-gradient(120deg, var(--primary-start) 0%, var(--primary-middle) 55%, var(--primary-end) 120%); background-size: 160% 100%; border-color: transparent; box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-start) 32%, transparent); }
.button.primary:hover { background: linear-gradient(120deg, var(--primary-hover-start) 0%, var(--primary-hover-middle) 55%, var(--primary-hover-end) 120%); box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-start) 38%, transparent); }
.button.secondary { color: var(--ink); background: var(--secondary-bg); border-color: var(--secondary-border); }
.button.secondary:hover, .button.quiet:hover { background: var(--secondary-hover-bg); border-color: var(--secondary-hover-border); }
.button.quiet { color: var(--muted-strong); background: transparent; border-color: transparent; }
.rail .button.secondary { flex: 1; color: var(--rail-ink); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .24); }
.rail .button.secondary:hover { background: rgba(255, 255, 255, .18); border-color: var(--rail-border); }
.rail .button.quiet { color: var(--rail-muted); }
.rail .button.quiet:hover { color: var(--rail-ink); background: rgba(255, 255, 255, .1); border-color: transparent; }
.full { width: 100%; margin-top: 22px; }

/* Hero: the page heading becomes a bright banner with the operator controls. */
.page-heading, .section-heading, .dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-heading { position: relative; align-items: center; flex-wrap: wrap; margin-bottom: 20px; padding: 26px 28px; overflow: hidden; color: var(--hero-ink); background: var(--hero-bg); border-radius: 30px; box-shadow: 0 22px 46px color-mix(in srgb, var(--primary-start) 30%, transparent); }
.page-heading::before, .page-heading::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .18); pointer-events: none; }
.page-heading::before { top: -70px; right: 12%; width: 220px; height: 220px; animation: float-y 7s ease-in-out infinite; }
.page-heading::after { bottom: -90px; right: -40px; width: 200px; height: 200px; background: rgba(255, 255, 255, .12); animation: float-y 9s ease-in-out infinite reverse; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
.hero-copy { position: relative; z-index: 1; }
.page-heading .eyebrow { color: inherit; opacity: .85; }
.page-heading h1 { font-size: 34px; font-weight: 850; }
.page-actions { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.page-actions .switch-row { padding: 6px 10px 6px 14px; border-radius: 999px; color: var(--ink); background: rgba(255, 255, 255, .88); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.page-actions .button.primary { color: var(--ink); background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, .14); }
.page-actions .button.primary:hover { background: #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, .18); }
.switch-row { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--muted-strong); font-size: 13px; font-weight: 750; cursor: pointer; }
.switch-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch-ui { position: relative; width: 44px; height: 26px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--canvas-soft); transition: background .2s ease, border-color .2s ease; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.switch-row input:checked + .switch-ui { border-color: var(--accent-strong); background: linear-gradient(120deg, var(--primary-start), var(--primary-end)); }
.switch-row input:checked + .switch-ui::after { transform: translateX(18px); }
.switch-row input:focus-visible + .switch-ui { box-shadow: 0 0 0 4px var(--focus-ring); }
.switch-label { white-space: nowrap; }
.strategy-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 13px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px; color: inherit; background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(6px); }

/* Bento summary: one tile per mutually exclusive account state. */
.summary-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.summary-item { position: relative; min-height: 104px; padding: 16px 16px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--summary-bg); box-shadow: var(--sticker); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; animation: pop-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.summary-item:nth-child(2) { animation-delay: .04s; }.summary-item:nth-child(3) { animation-delay: .08s; }.summary-item:nth-child(4) { animation-delay: .12s; }.summary-item:nth-child(5) { animation-delay: .16s; }.summary-item:nth-child(6) { animation-delay: .2s; }.summary-item:nth-child(7) { animation-delay: .24s; }
@keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
.summary-item:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 7px 0 rgba(43, 35, 64, .06), 0 24px 40px rgba(108, 70, 60, .14); }
.summary-item::after { content: "●"; position: absolute; right: 12px; bottom: 4px; color: currentColor; font-size: 42px; line-height: 1; opacity: .08; pointer-events: none; }
.summary-item:first-child { color: #fff; border-color: transparent; background: var(--summary-featured-bg); }
.summary-item:first-child .eyebrow { color: rgba(255, 255, 255, .86); }
.summary-item:first-child::after { content: "✦"; opacity: .22; }
.summary-item:nth-child(2) { background: linear-gradient(160deg, #ffffff 30%, var(--teal-bg)); }.summary-item:nth-child(2) .summary-value { color: var(--teal); }.summary-item:nth-child(2)::after { content: "✓"; color: var(--teal); opacity: .16; }
.summary-value { display: block; margin-top: 10px; font-size: 34px; font-weight: 850; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.summary-item.error { border-color: rgba(200, 50, 82, .3); background: linear-gradient(160deg, #ffffff 30%, var(--red-bg)); }.summary-item.error .summary-value { color: var(--red); }.summary-item.error::after { content: "!"; color: var(--red); opacity: .14; }
.summary-item.low { border-color: rgba(169, 110, 0, .28); background: linear-gradient(160deg, #ffffff 30%, var(--amber-bg)); }.summary-item.low .summary-value { color: var(--amber); }.summary-item.low::after { content: "◔"; color: var(--amber); opacity: .18; }
.summary-item.cooldown { border-color: rgba(200, 94, 45, .3); background: linear-gradient(160deg, #ffffff 30%, var(--orange-bg)); }.summary-item.cooldown .summary-value { color: var(--orange); }.summary-item.cooldown::after { content: "❄"; color: var(--orange); opacity: .16; }
.summary-item.missing_auth { background: linear-gradient(160deg, #ffffff 30%, var(--gray-bg)); }.summary-item.missing_auth .summary-value { color: var(--gray); }.summary-item.missing_auth::after { content: "○"; color: var(--gray); opacity: .16; }

/* Capacity: chunky pill tracks with a slow shine on what is spendable. */
.pool-capacity { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pool-capacity:empty { display: none; margin: 0; }
.capacity-bar { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--sticker); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.capacity-bar:hover { transform: translateY(-3px); }
.capacity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.capacity-label { color: var(--accent-hot); font-size: 11px; font-weight: 820; letter-spacing: .1em; }
.capacity-assumed { color: var(--accent-hot); text-decoration: none; cursor: help; font-weight: 800; }
.capacity-readout { color: var(--muted-strong); font-size: 11px; font-variant-numeric: tabular-nums; }
.capacity-readout strong { color: var(--ink); font-size: 22px; font-weight: 850; }
.capacity-idle { margin-left: 8px; color: var(--muted); }
.capacity-track { position: relative; height: 16px; border: 1.5px solid #a8b9b0; border-radius: 999px; background: #e1e6dc; overflow: hidden; }
.capacity-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, #0d8f78, #82b84d); transition: width .8s cubic-bezier(.22, 1, .36, 1); }
.capacity-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
/* Hollow on purpose: this capacity exists but is not spendable until an
   operator puts the account back in the pool or clears what is blocking it. */
.capacity-fill.watch { background: linear-gradient(90deg, #d49a18, #f2c14e); }
.capacity-fill.low { background: linear-gradient(90deg, #df5c38, #f08a3e); }
.capacity-fill.critical { background: linear-gradient(90deg, #c83252, #eb5b65); }
.capacity-fill.empty { background: linear-gradient(90deg, #a82245, #df314d); }
.capacity-outside { position: absolute; top: 1px; bottom: 1px; border: 1.5px dashed #0d8f78; border-radius: 999px; background: transparent; }
.capacity-detail { color: var(--muted); font-size: 11px; }

/* Flow: a tinted card with colorful stat chips and roomy charts. */
.throughput-panel { position: relative; display: grid; gap: 14px; margin-bottom: 18px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--throughput-bg); box-shadow: var(--sticker); }
.throughput-panel::after { content: ""; position: absolute; top: -80px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--throughput-glow), transparent 68%); pointer-events: none; animation: float-y 8s ease-in-out infinite; }
.throughput-heading { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.live-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 13px; border: 1.5px solid rgba(15, 143, 126, .3); border-radius: 999px; color: var(--teal); background: #fff; font-size: 12px; font-weight: 820; white-space: nowrap; box-shadow: 0 6px 14px rgba(15, 143, 126, .12); }
.live-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px rgba(15, 143, 126, .5); animation: badge-pulse 1.4s ease-in-out infinite; }
.throughput-current-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.throughput-current-stat { display: grid; min-width: 0; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--stat-bg); font-variant-numeric: tabular-nums; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.throughput-current-stat:hover { transform: translateY(-3px); }
.throughput-current-stat span { color: var(--muted); font-size: 10px; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.throughput-current-stat strong { overflow: hidden; color: var(--ink); font-size: 22px; font-weight: 850; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.throughput-current-stat:nth-child(1) { border-top: 4px solid var(--pop-3); }.throughput-current-stat:nth-child(2) { border-top: 4px solid var(--accent); }.throughput-current-stat:nth-child(3) { border-top: 4px solid var(--green); }.throughput-current-stat:nth-child(4) { border-top: 4px solid var(--teal); }.throughput-current-stat:nth-child(5) { border-top: 4px solid var(--orange); }
.throughput-current-stat:nth-child(2) strong { color: var(--accent); }.throughput-current-stat:nth-child(3) strong { color: var(--green); }.throughput-current-stat:nth-child(4) strong { color: var(--teal); }.throughput-current-stat:nth-child(5) strong { color: var(--orange); }
.throughput-current-stat small { color: var(--muted-strong); font-size: 10px; }
.throughput-chart-grid { position: relative; z-index: 1; display: grid; gap: 12px; }
.throughput-chart-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--chart-card-bg); }
.throughput-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.throughput-chart-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }.throughput-chart-heading h3 { margin: 0; color: var(--ink); font-size: 14px; }.throughput-chart-heading p { max-width: 520px; margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.chart-range-chip { display: inline-flex; padding: 3px 8px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, var(--primary-start), var(--primary-end)); font-size: 9px; font-weight: 820; letter-spacing: .05em; text-transform: uppercase; }
.throughput-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }.chart-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.chart-legend-item i { width: 16px; height: 4px; border-radius: 999px; background: var(--series-color); }.chart-legend-item strong { color: var(--muted-strong); font-size: 11px; }
.throughput-chart-plot { width: 100%; min-height: 224px; margin-top: 10px; overflow: hidden; border-radius: 16px; background: var(--chart-plot-bg); }.throughput-chart-plot svg { display: block; width: 100%; height: 224px; overflow: visible; }
.chart-grid-line { stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }.chart-axis-label { fill: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }.chart-axis-label.left { text-anchor: end; }.chart-axis-label.right { text-anchor: start; }.chart-axis-label.time { text-anchor: middle; }
.chart-series-line { fill: none; stroke: var(--series-color); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--series-color) 35%, transparent)); }
.chart-series-point { fill: var(--series-color); stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
/* Per-series colors are set here, not via inline style, because the admin CSP
   (default-src 'self', no style-src 'unsafe-inline') strips inline style
   attributes and would leave the line/marker unstyled (black, no stroke). */
.chart-series-output { --series-color: var(--accent); }
.chart-series-prompt { --series-color: #0d8f78; }
.throughput-chart-empty { padding: 38px 16px; border: 2px dashed var(--line-strong); border-radius: 18px; color: var(--muted); text-align: center; }

/* Sections: white cards with a colorful icon bubble beside the title. */
.section-block { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface-soft); box-shadow: var(--sticker); backdrop-filter: blur(10px); }
.section-block.compact { min-width: 0; }
.section-heading { margin-bottom: 14px; align-items: center; }
.section-title { display: flex; align-items: center; gap: 10px; }
.section-title::before { content: "●"; display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--pop-2), var(--pop-3)); font-size: 15px; box-shadow: 0 6px 14px color-mix(in srgb, var(--pop-3) 30%, transparent); }
.section-title[data-icon="routing"]::before { content: "↯"; background: linear-gradient(135deg, #ff5d8f, var(--pop-2)); }
.section-title[data-icon="routes"]::before { content: "⇄"; background: linear-gradient(135deg, var(--pop-4), var(--pop-3)); }
.status-legend { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; color: var(--muted); background: var(--surface-raised); font-size: 12px; white-space: nowrap; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 7px; }
.legend-dot.error { background: var(--red); }.legend-dot.low { background: var(--amber); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 1490px; }
th, td { padding: 14px; text-align: left; border-bottom: 1px solid var(--row-divider); font-size: 13px; vertical-align: middle; }
th { color: var(--muted-strong); background: var(--table-head-bg); font-size: 11px; font-weight: 820; letter-spacing: .07em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s ease, box-shadow .15s ease; }
tbody tr:hover { background: var(--row-hover-bg); box-shadow: inset 4px 0 0 var(--accent); }

/* Component rules: account, quota, cache and routing cells keep their semantic
   palette and contracts; the containers around them are restyled below. */
.account-name { display: grid; min-width: 190px; gap: 3px; font-weight: 720; }.account-id { color: #74817c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }.account-seat { color: var(--muted-strong); font-size: 11px; font-weight: 620; }
.account-entitlement { color: var(--muted-strong); font-size: 11px; font-weight: 560; line-height: 1.45; }
.account-owner-note { width: min(220px, 100%); min-height: 28px; margin-top: 5px; padding: 5px 8px; border-color: color-mix(in srgb, var(--violet) 30%, transparent); border-radius: 6px; color: var(--muted-strong); background: var(--stat-bg); font-size: 11px; font-weight: 560; }
.account-owner-note::placeholder { color: var(--muted); }
.account-owner-note:disabled { cursor: progress; opacity: .72; }
.status-stack { display: grid; gap: 5px; }.status-reason { max-width: 205px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-flex; width: fit-content; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.badge.ready { color: var(--teal); background: var(--teal-bg); border-color: rgba(8, 121, 103, .25); }.badge.low { color: var(--amber); background: var(--amber-bg); border-color: rgba(169, 110, 0, .25); }.badge.error { color: var(--red); background: var(--red-bg); border-color: rgba(200, 50, 82, .28); }.badge.cooldown { color: var(--orange); background: var(--orange-bg); border-color: rgba(200, 94, 45, .28); }.badge.disabled, .badge.standby, .badge.duplicate, .badge.missing_auth { color: var(--gray); background: var(--gray-bg); border-color: rgba(110, 123, 119, .24); }.badge.authenticating { color: var(--accent-hot); background: rgba(23, 107, 135, .09); border-color: rgba(23, 107, 135, .27); }
.badge.active { gap: 5px; color: var(--green); background: var(--green-bg); border-color: rgba(79, 135, 53, .28); }.badge.active::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: badge-pulse 1.4s ease-in-out infinite; }
/* Outlines whatever tone the badge already carries, so a Ready account with a
   credit about to expire is still visibly Ready. Declared after the tones so it
   wins the border at equal specificity. */
.badge.expiring-reset { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
@keyframes badge-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.quota { display: grid; min-width: 118px; gap: 7px; }.quota-detailed { min-width: 184px; gap: 7px; }.quota-windows { display: grid; gap: 6px; }.quota-window { display: grid; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }.quota-window + .quota-window { padding-top: 6px; border-top: 1px solid var(--line-soft); }.quota-window-unreported { opacity: .76; }.quota-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted-strong); font-size: 11px; }.quota-line > span { min-width: 0; }.quota-line strong { flex: 0 0 auto; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Quota is an operational warning, not decoration: healthy capacity stays
   mint/lime, then moves through gold and orange into hot red near zero. */
.quota-track { --quota-start: #0d8f78; --quota-end: #82b84d; display: block; width: 100%; height: 8px; overflow: hidden; border: 1px solid #a8b9b0; border-radius: 4px; color: var(--green); background: #e1e6dc; appearance: none; -webkit-appearance: none; }
.quota-track::-webkit-progress-bar { background: #e1e6dc; }
.quota-track::-webkit-progress-value { background: linear-gradient(90deg, var(--quota-start), var(--quota-end)); }
.quota-track::-moz-progress-bar { background: linear-gradient(90deg, var(--quota-start), var(--quota-end)); }
.quota-track.watch { --quota-start: #d49a18; --quota-end: #f2c14e; color: var(--amber); }
.quota-track.low { --quota-start: #df5c38; --quota-end: #f08a3e; color: var(--orange); }
.quota-track.critical { --quota-start: #c83252; --quota-end: #eb5b65; color: var(--red); border-color: rgba(200, 50, 82, .48); }
.quota-track.empty { --quota-start: #a82245; --quota-end: #df314d; color: #df314d; border-color: rgba(200, 50, 82, .62); background: rgba(200, 50, 82, .14); }
.quota-track.empty::-webkit-progress-bar { background: rgba(200, 50, 82, .14); }
/* Pool membership is separate from quota health. Keep each bar's green/gold/
   orange/red hue, but mix it toward neutral gray so an out-of-pool value
   recedes without becoming the same pink bar at every health level. A dusty
   pink dashed frame encodes membership by both color and pattern; this keeps a
   0% out-of-pool track visibly distinct from the solid dark-red exhausted
   track used by a routable account. The explicit row marker is intentional:
   Duplicate uses a neutral standby badge but remains in the pool, so a badge
   selector would falsely imply that an operator removed it from routing. */
tr[data-pool-membership="out"] .quota-track { border-color: #c4819d; border-style: dashed; background: #eff1ee; color: color-mix(in srgb, var(--quota-start) 46%, #87938f); }
tr[data-pool-membership="out"] .quota-track::-webkit-progress-bar { background: #eff1ee; }
tr[data-pool-membership="out"] .quota-track::-webkit-progress-value { background: linear-gradient(90deg, color-mix(in srgb, var(--quota-start) 46%, #d7dcda), color-mix(in srgb, var(--quota-end) 46%, #e4e8e5)); }
tr[data-pool-membership="out"] .quota-track::-moz-progress-bar { background: linear-gradient(90deg, color-mix(in srgb, var(--quota-start) 46%, #d7dcda), color-mix(in srgb, var(--quota-end) 46%, #e4e8e5)); }
.quota-window-held .quota-track { opacity: .42; }.quota-window-exhausted, .quota-window-constraint { font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .01em; overflow-wrap: anywhere; }.quota-window-exhausted { color: var(--red); }.quota-window-constraint { color: var(--red); font-weight: 650; }
.quota-reset { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; line-height: 1.25; }.quota-reset span { font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }.quota-reset strong { color: var(--muted-strong); font-size: 10px; font-weight: 680; font-variant-numeric: tabular-nums; }.quota-detail { color: var(--muted-strong); font-size: 10px; line-height: 1.35; }.quota-details { margin-top: 1px; border-top: 1px solid var(--line-soft); }.quota-details summary, .quota-protection summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 5px 0 0; color: var(--muted); font-size: 10px; font-weight: 720; cursor: pointer; list-style: none; }.quota-details summary::-webkit-details-marker, .quota-protection summary::-webkit-details-marker { display: none; }.quota-details summary::before, .quota-protection summary::before { content: "+"; display: inline-grid; width: 14px; height: 14px; place-items: center; color: var(--accent-hot); border: 1px solid var(--line-strong); border-radius: 50%; font-size: 12px; line-height: 1; }.quota-details summary span, .quota-protection summary span { margin-right: auto; }.quota-details[open] summary::before, .quota-protection[open] summary::before { content: "−"; }.quota-facts { display: grid; gap: 5px; padding: 7px 0 0; border: 0; background: transparent; }.quota-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 10px; line-height: 1.3; }.quota-fact-label { min-width: 0; color: var(--muted); font-size: 9px; font-weight: 720; letter-spacing: .045em; text-transform: uppercase; }.quota-fact-value { min-width: 0; color: var(--muted-strong); font-size: 10px; font-weight: 720; text-align: right; overflow-wrap: anywhere; }.quota-fact-note { grid-column: 1 / -1; color: var(--muted); font-size: 9px; text-align: right; overflow-wrap: anywhere; }.reset-credit-expiry.expiring-soon { color: var(--red); font-weight: 800; }.reset-credit-action { justify-self: end; padding-top: 3px; }.reset-credit-notice { grid-column: 1 / -1; padding-top: 3px; color: var(--green); font-size: 9px; text-align: right; overflow-wrap: anywhere; }.reset-credit-notice.failed { color: var(--red); font-weight: 700; }.reset-credit-button { min-height: 24px; padding: 3px 8px; font-size: 10px; }
.quota-fact-telemetry { margin-top: 2px; padding-top: 5px; border-top: 1px solid var(--line-soft); }.quota-fact-warning .quota-fact-value { color: var(--red); }.quota-additional-group { display: grid; gap: 6px; padding-top: 7px; border-top: 1px solid var(--line-soft); }.quota-section-label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.quota-additional-limit { display: grid; gap: 4px; }.quota-additional-limit + .quota-additional-limit { padding-top: 6px; border-top: 1px solid var(--line-soft); }.quota-additional-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }.quota-additional-heading strong { min-width: 0; color: var(--ink); font-size: 10px; overflow-wrap: anywhere; }.quota-additional-status { flex: 0 0 auto; color: var(--red); font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }.quota-error { color: var(--red); font-size: 12px; }.quota-unknown { color: var(--muted); font-size: 12px; }.quota-protection { display: grid; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); color: var(--muted-strong); background: transparent; font-size: 10px; }.quota-protection-unavailable { display: flex; align-items: baseline; justify-content: space-between; }.quota-protection summary { padding-top: 0; }.quota-protection summary strong { color: var(--muted-strong); font-size: 10px; }.quota-protection-body { display: grid; gap: 6px; padding-top: 5px; }.quota-protection-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }.quota-protection-controls label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 10px; }.quota-protection-controls .button { min-height: 28px; padding: 5px 8px; font-size: 10px; }.quota-threshold-input { width: 56px; min-height: 28px; padding: 4px 5px; }
.route { color: var(--muted-strong); font-size: 12px; line-height: 1.45; }.route strong { color: var(--ink); font-weight: 700; }.activity { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cache-column { width: 224px; min-width: 216px; }.routing-count-column { width: 78px; min-width: 72px; padding-right: 9px; padding-left: 9px; text-align: center; font-variant-numeric: tabular-nums; }.throughput-column { width: 152px; min-width: 146px; }
.account-throughput { display: grid; gap: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; font-variant-numeric: tabular-nums; }.account-throughput strong { color: var(--accent-hot); font-size: 11px; }.account-throughput span:nth-child(2) strong { color: var(--accent); }.account-throughput span:nth-child(3) strong { color: var(--violet); }.throughput-empty { color: var(--muted); font-size: 10px; }
.column-heading { display: grid; gap: 4px; }.column-heading small { display: flex; justify-content: inherit; gap: 4px; }
.routing-count-column .column-heading small { justify-content: center; }
.column-origin { padding: 2px 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .05em; }.column-origin.observed { color: var(--teal); }
/* Account cache cells intentionally use one green treatment for cache-read
   tokens and ratio. Cache-write telemetry stays hidden because automatic
   caching makes upstream zeroes ambiguous rather than actionable. */
.cache-hit { display: grid; gap: 4px; min-width: 178px; font-variant-numeric: tabular-nums; }.cache-rate { color: var(--green); font-size: 12px; font-weight: 760; }.cache-empty { color: var(--muted); font-size: 11px; }
.cache-token-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px; align-items: center; color: var(--muted); font-size: 10px; line-height: 1.35; }.cache-token-label { color: var(--muted); }.cache-token-value { color: var(--green); font-weight: 690; white-space: nowrap; }.cache-ratio-cell { display: flex; min-width: 35px; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.cache-reset-btn { padding: 0 4px; color: var(--muted); background: transparent; border: 1px solid #a8b9b0; border-radius: 4px; font-size: 10px; line-height: 15px; cursor: pointer; }.cache-reset-btn:hover { color: var(--ink); border-color: var(--teal); }
.sticky-switched { color: var(--amber); font-weight: 600; }
.cache-window { display: grid; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 9%, transparent), color-mix(in srgb, var(--accent-hot) 8%, transparent) 45%, color-mix(in srgb, var(--violet) 9%, transparent) 72%, color-mix(in srgb, var(--accent) 8%, transparent) 100%); }
/* Metric provenance is encoded by label and color, never color alone. */
.cache-window-groups { display: grid; grid-template-columns: minmax(310px, 1fr) minmax(470px, 1.45fr); gap: 10px; }
.metric-source-group { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft-bg); }.metric-source-group.observed { border-color: rgba(8, 121, 103, .24); }.metric-source-group.calculated { border-color: rgba(88, 91, 184, .25); }
.metric-source-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.metric-source-chip { display: inline-flex; padding: 3px 6px; border: 1px solid currentColor; border-radius: 4px; font-size: 9px; font-weight: 820; line-height: 1; letter-spacing: .06em; }.metric-source-chip.observed { color: var(--teal); background: var(--teal-bg); }.metric-source-chip.calculated { color: var(--violet); background: var(--violet-bg); }
.cache-window-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px 18px; }.cache-window-stat { display: grid; align-content: start; gap: 3px; min-width: 0; }.cache-window-value { font-size: 18px; font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1.15; }.metric-source-group.observed .cache-window-value { color: var(--teal); }.metric-source-group.calculated .cache-window-value { color: var(--violet); }.metric-source-group .cache-window-value.alert { color: var(--red); }
.cache-window-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.routing-cache-events { margin-top: 30px; }.routing-cache-wrap { box-shadow: 0 12px 30px rgba(45, 67, 59, .11); }.routing-cache-table { min-width: 760px; }.routing-cache-table th:nth-child(1), .routing-cache-table td:nth-child(1) { width: 96px; }.routing-cache-table th:nth-child(2), .routing-cache-table td:nth-child(2) { width: 88px; }.routing-cache-table th:nth-child(5), .routing-cache-table td:nth-child(5), .routing-cache-table th:nth-child(6), .routing-cache-table td:nth-child(6) { width: 118px; text-align: right; font-variant-numeric: tabular-nums; }
.agent-kind { display: inline-flex; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted-strong); background: rgba(110, 123, 119, .08); font-size: 10px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }.agent-kind.subagent { color: var(--accent-hot); border-color: color-mix(in srgb, var(--accent-hot) 30%, transparent); background: color-mix(in srgb, var(--accent-hot) 9%, transparent); }
.routing-outcome { display: block; color: var(--ink); font-weight: 680; }.event-secondary { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }.event-cache { color: var(--muted-strong); }.event-cache.hit { color: var(--green); }.event-cache.cold { color: var(--red); }
.row-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 110px; }.row-actions .button { min-height: 28px; padding: 5px 8px; font-size: 11px; }.button.danger { color: #a82245; background: rgba(200, 50, 82, .09); border-color: rgba(200, 50, 82, .28); }.button.danger:hover { background: rgba(200, 50, 82, .16); }.button.warn { color: #a84d25; background: rgba(232, 111, 60, .1); border-color: rgba(200, 94, 45, .28); }.button.warn:hover { background: rgba(232, 111, 60, .17); }
.secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.sticky-list { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 12%, transparent); }.sticky-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--row-divider); }.sticky-item:last-child { border-bottom: 0; }.sticky-item:hover { background: var(--row-hover-bg); }.sticky-key { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.sticky-meta { color: var(--muted); font-size: 11px; }.empty-state { padding: 21px 14px; color: var(--muted); font-size: 13px; text-align: center; }
.device-dialog { padding: 0; border: 1px solid rgba(23, 107, 135, .24); border-radius: 14px; color: var(--ink); background: var(--surface); box-shadow: 0 26px 70px rgba(28, 58, 62, .28); }
.device-dialog { width: min(540px, calc(100% - 28px)); }
.device-dialog::backdrop { background: rgba(20, 55, 64, .58); }
.device-auth-panel { padding: 23px; }
.device-auth-grid { display: grid; gap: 12px; margin-top: 20px; }
.device-auth-row { display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--dialog-row-bg); }
.device-auth-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.device-auth-label { color: var(--muted); font-size: 11px; font-weight: 780; letter-spacing: .06em; text-transform: uppercase; }
.device-auth-value { min-width: 0; color: var(--accent-hot); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.device-auth-code { min-width: 0; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 780; letter-spacing: .08em; overflow-wrap: anywhere; }
.device-auth-countdown { display: inline-flex; margin-left: 8px; color: var(--accent-hot); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 19px; font-weight: 780; vertical-align: baseline; }
.device-auth-countdown.expired { color: var(--red); }
.copy-button { min-height: 26px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted-strong); background: var(--copy-button-bg); font-size: 11px; font-weight: 760; line-height: 1; white-space: nowrap; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.copy-button:hover:not(:disabled) { color: var(--ink); border-color: var(--accent); background: var(--copy-button-hover-bg); }
.copy-button:disabled { cursor: not-allowed; opacity: .58; }
.copy-button.copied { color: #fffdf7; border-color: var(--accent-hot); background: var(--accent); }

/* Restyled containers for the component rules above. */
.cache-window { margin: 0 0 18px; padding: 18px; border: 1px solid var(--line); border-radius: 26px; background: var(--throughput-bg); box-shadow: var(--sticker); }
.metric-source-group { padding: 13px 15px; border-radius: 18px; background: var(--surface); }
.metric-source-chip { border-radius: 999px; padding: 3px 8px; }
.cache-window-value { font-size: 22px; font-weight: 850; }
.badge { border-radius: 999px; padding: 3px 9px; }
.agent-kind { border-radius: 999px; }
.row-actions .button { min-height: 30px; padding: 6px 11px; }
.account-owner-note { border-radius: 10px; }
.routing-cache-events { margin-top: 18px; }.routing-cache-wrap { box-shadow: none; }
.secondary-grid { margin-top: 0; }
.sticky-list { border-radius: 20px; box-shadow: none; }.sticky-item { transition: background .15s ease; }
.device-dialog { border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 30px 80px rgba(30, 20, 50, .32); animation: pop-in .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.device-dialog::backdrop { background: rgba(43, 35, 64, .5); backdrop-filter: blur(4px); }
.device-auth-panel { padding: 26px; }
.device-auth-row { border-radius: 18px; }
.copy-button { border-radius: 999px; padding: 5px 11px; }
.copy-button.copied { border-color: transparent; background: linear-gradient(120deg, var(--primary-start), var(--primary-end)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1240px) { .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.summary-item:first-child { grid-column: span 2; }.throughput-current-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.cache-window-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: sticky; top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; height: auto; margin: 0; padding: 10px 14px; overflow: visible; border-width: 0 0 1px; border-radius: 0 0 22px 22px; }
  .brand { padding: 0; border: 0; }
  .rail-nav { display: flex; order: 3; width: 100%; gap: 6px; padding-bottom: 2px; overflow-x: auto; }
  .rail-link { flex: 0 0 auto; padding: 5px 11px 5px 5px; background: rgba(255, 255, 255, .08); font-size: 13px; }
  .rail-link::before { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; }
  .rail-link:hover { transform: none; }
  .rail-foot { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 0; border: 0; }
  .theme-picker span, .service-status { display: none; }
  .theme-picker select { min-width: 96px; }
  main { padding: 18px 16px 30px; }
}
@media (max-width: 620px) {
  .brand span { display: none; }
  .rail-buttons .button { padding: 7px 10px; }
  .page-heading { padding: 20px; border-radius: 24px; }.page-heading h1 { font-size: 26px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.summary-item:first-child { grid-column: span 2; }.summary-value { font-size: 28px; }
  .throughput-panel, .section-block, .cache-window { padding: 14px; border-radius: 22px; }
  .throughput-heading { align-items: flex-start; }.throughput-current-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .throughput-chart-heading { flex-direction: column; }.throughput-chart-legend { justify-content: flex-start; }
  .throughput-chart-plot, .throughput-chart-plot svg { height: 205px; min-height: 205px; }
  .cache-window-groups { grid-template-columns: 1fr; }.cache-window-controls { align-items: flex-start; flex-direction: column; }
  .status-legend { display: none; }.dialog-heading { align-items: center; }
}