:root {
  --console-radius: 0.7rem;
  --console-radius-sm: 0.45rem;
  --console-shadow: 0 12px 30px rgb(15 23 42 / 0.07);
  --console-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-bs-theme="light"] {
  --bs-body-bg: #eef2f7;
  --bs-body-color: #172235;
  --bs-secondary-color: #62718a;
  --bs-secondary-bg: #e5ebf3;
  --bs-tertiary-bg: #f4f7fa;
  --bs-border-color: #d9e2ee;
  --bs-primary: #1769e0;
  --bs-primary-rgb: 23, 105, 224;
  --bs-link-color: #155cc1;
  --bs-link-hover-color: #0b479e;
  --console-card-bg: #f9fbfd;
  --console-code-bg: #e9eff6;
  --console-hover: #edf3fb;
}

:root[data-bs-theme="dark"] {
  --bs-body-bg: #171719;
  --bs-body-bg-rgb: 23, 23, 25;
  --bs-body-color: #dedee2;
  --bs-body-color-rgb: 222, 222, 226;
  --bs-emphasis-color: #dedee2;
  --bs-emphasis-color-rgb: 222, 222, 226;
  --bs-secondary-color: #adadb5;
  --bs-secondary-color-rgb: 173, 173, 181;
  --bs-secondary-bg: #27272b;
  --bs-secondary-bg-rgb: 39, 39, 43;
  --bs-tertiary-color: #8e8e97;
  --bs-tertiary-color-rgb: 142, 142, 151;
  --bs-tertiary-bg: #27272b;
  --bs-tertiary-bg-rgb: 39, 39, 43;
  --bs-border-color: #313137;
  --bs-border-color-translucent: rgb(222 222 226 / 0.15);
  --bs-primary: #51b8aa;
  --bs-primary-rgb: 81, 184, 170;
  --bs-primary-text-emphasis: #70cbbb;
  --bs-primary-bg-subtle: #10201d;
  --bs-primary-border-subtle: #1f3a35;
  --bs-link-color: #51b8aa;
  --bs-link-color-rgb: 81, 184, 170;
  --bs-link-hover-color: #70cbbb;
  --bs-link-hover-color-rgb: 112, 203, 187;
  --bs-focus-ring-color: rgb(81 184 170 / 0.25);
  --console-card-bg: #202023;
  --console-code-bg: #27272b;
  --console-hover: #27272b;
  --console-input-border: #45454d;
  --console-on-accent: #0b0b0d;
  --console-shadow: 0 12px 30px rgb(0 0 0 / 0.18);
}

* { box-sizing: border-box; }

body.console-shell {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 86% -18%, rgb(var(--bs-primary-rgb) / 0.12), transparent 32rem), var(--bs-body-bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

:root[data-bs-theme="dark"] body.console-shell { background: var(--bs-body-bg); }
:root[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-color) !important; }

html[data-bs-theme] { background-color: var(--bs-body-bg); }

.console-navigation {
  z-index: 1030;
  min-height: 4rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--console-card-bg);
  box-shadow: 0 1px 0 rgb(15 23 42 / 0.03);
}

.console-navigation .container-fluid { gap: 0.75rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: 0.65rem; color: inherit; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.025em; }
.brand-icon { width: 30px; height: 30px; }
.brand-icon-dark { display: none; }
:root[data-bs-theme="dark"] .brand-icon-light { display: none; }
:root[data-bs-theme="dark"] .brand-icon-dark { display: block; }
.console-navigation .navbar-toggler { border-color: var(--bs-border-color); box-shadow: none; }

.console-navigation .nav-link {
  color: var(--bs-body-color);
  border-radius: var(--console-radius-sm);
  font-size: 0.89rem;
  font-weight: 600;
  padding: 0.42rem 0.52rem;
}

.console-navigation .nav-link:hover, .console-navigation .nav-link:focus-visible { color: var(--bs-primary); background: var(--console-hover); }
.console-navigation .nav-link.active { color: #fff; background: var(--bs-primary); box-shadow: 0 5px 15px rgb(var(--bs-primary-rgb) / 0.25); }
:root[data-bs-theme="dark"] .console-navigation .nav-link.active { color: var(--console-on-accent); background: var(--bs-primary); box-shadow: 0 5px 15px rgb(0 0 0 / 0.28); }

.console-navigation .dropdown-menu {
  --bs-dropdown-bg: var(--console-card-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--console-hover);
  box-shadow: var(--console-shadow);
}

.console-navigation #theme-toggle { color: inherit; }
.console-main { max-width: 1600px; padding-top: 1.75rem; padding-bottom: 2.5rem; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--bs-body-color); font-weight: 700; letter-spacing: -0.025em; }
h1.h2 { font-size: clamp(1.55rem, 2vw, 1.9rem); }

.card {
  border: 1px solid var(--bs-border-color);
  background: var(--console-card-bg);
  box-shadow: var(--console-shadow);
}
.card-header, .card-footer { border-color: var(--bs-border-color); background: color-mix(in srgb, var(--console-card-bg) 88%, var(--bs-tertiary-bg)); }
.card-header { padding: 0.85rem 1rem; }
.card-body { padding: 1rem; }

/* Surface degraded system status without relying on a neutral badge alone. */
.status-panel-warning {
  border-color: #d98c17;
  background: #fff7e6;
}
.status-panel-warning .card-header {
  border-color: #d98c17;
  background: #ffedc2;
}
.status-panel-warning-value { color: #9a5b00; font-weight: 800; }
:root[data-bs-theme="dark"] .status-panel-warning {
  border-color: #e5a33a;
  background: #3e3119;
}
:root[data-bs-theme="dark"] .status-panel-warning .card-header {
  border-color: #e5a33a;
  background: #4b391b;
}
:root[data-bs-theme="dark"] .status-panel-warning-value { color: #ffd27c; }

.btn { --bs-btn-border-radius: 0.45rem; --bs-btn-font-weight: 650; --bs-btn-padding-y: 0.43rem; box-shadow: none; }
.btn-primary { box-shadow: 0 5px 14px rgb(var(--bs-primary-rgb) / 0.23); }
.btn-secondary { --bs-btn-bg: #52637d; --bs-btn-border-color: #52637d; --bs-btn-hover-bg: #40516b; --bs-btn-hover-border-color: #40516b; }
:root[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--console-on-accent);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--console-on-accent);
  --bs-btn-hover-bg: #70cbbb;
  --bs-btn-hover-border-color: #70cbbb;
  --bs-btn-active-color: var(--console-on-accent);
  --bs-btn-active-bg: #42a697;
  --bs-btn-active-border-color: #42a697;
  --bs-btn-disabled-color: var(--console-on-accent);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
:root[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--console-on-accent);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--console-on-accent);
  --bs-btn-active-bg: #42a697;
  --bs-btn-active-border-color: #42a697;
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
:root[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: #45454d;
  --bs-btn-border-color: #45454d;
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: #52525b;
  --bs-btn-hover-border-color: #52525b;
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: #52525b;
  --bs-btn-active-border-color: #52525b;
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-bg: #45454d;
  --bs-btn-disabled-border-color: #45454d;
  --bs-btn-focus-shadow-rgb: 173, 173, 181;
}
:root[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--console-input-border);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: #45454d;
  --bs-btn-hover-border-color: #52525b;
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: #52525b;
  --bs-btn-active-border-color: #52525b;
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-border-color: var(--console-input-border);
  --bs-btn-focus-shadow-rgb: 173, 173, 181;
}
/* Bootstrap fixes this utility's foreground to white independently of the palette. */
:root[data-bs-theme="dark"] .text-bg-primary { color: var(--console-on-accent) !important; }
:root[data-bs-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--console-card-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--console-hover);
  --bs-dropdown-link-active-color: var(--console-on-accent);
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
:root[data-bs-theme="dark"] .pagination {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-bg: var(--console-card-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--console-hover);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--console-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  --bs-pagination-active-color: var(--console-on-accent);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
}
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select,
:root[data-bs-theme="dark"] .form-check-input { border-color: var(--console-input-border); }
:root[data-bs-theme="dark"] .form-control:focus,
:root[data-bs-theme="dark"] .form-select:focus,
:root[data-bs-theme="dark"] .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgb(81 184 170 / 0.25); }
:root[data-bs-theme="dark"] .form-check-input:checked,
:root[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate { border-color: var(--bs-primary); background-color: var(--bs-primary); }
/* Bootstrap's white check/radio icons lack contrast on a bright teal fill. */
:root[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0b0d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
:root[data-bs-theme="dark"] .form-check-input:checked[type="radio"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230b0b0d'/%3e%3c/svg%3e"); }
:root[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0b0d' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"); }
:root[data-bs-theme="dark"] .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230b0b0d'/%3e%3c/svg%3e"); }

/* Keep row actions compact; the base .btn rule otherwise overrides Bootstrap's .btn-sm padding. */
.table .btn-sm {
  --bs-btn-padding-x: 0.48rem;
  --bs-btn-padding-y: 0.30rem;
  --bs-btn-font-size: 0.82rem;
}

/* Some list actions submit through an inline form inside a Bootstrap button group. */
.btn-group > form { display: inline-flex; }
.btn-group > :not(:first-child) > .btn,
.btn-group > :not(:first-child).btn {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > :not(:last-child) > .btn,
.btn-group > :not(:last-child).btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > form > .btn:hover,
.btn-group > form > .btn:focus { position: relative; z-index: 1; }

.form-control, .form-select { border-color: var(--bs-border-color); border-radius: var(--console-radius-sm); background-color: var(--console-card-bg); box-shadow: none; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgb(var(--bs-primary-rgb) / 0.8); box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 0.18); }
.form-label { font-size: 0.84rem; font-weight: 700; }
.form-text, .helptext { font-size: 0.79rem; }

.table { --bs-table-bg: transparent; --bs-table-striped-bg: color-mix(in srgb, var(--console-card-bg) 93%, var(--bs-tertiary-bg)); --bs-table-hover-bg: var(--console-hover); --bs-table-border-color: var(--bs-border-color); margin-bottom: 0; font-size: 0.84rem; vertical-align: middle; }
.table > :not(caption) > * > * { padding: 0.7rem 0.8rem; }
/* Tighten data-list rows without changing the size or hit area of row actions. */
.table > tbody > tr > * { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.table thead th { color: var(--bs-secondary-color); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.065em; text-transform: uppercase; white-space: nowrap; }

code, code.json, .secret { font-family: var(--console-code-font); font-size: 0.9em; }
code:not(.json) { padding: 0.14rem 0.32rem; border-radius: 0.3rem; color: var(--bs-link-color); background: var(--console-code-bg); }
code.json { display: block; max-width: 420px; overflow-x: auto; white-space: pre-wrap; }
.secret { display: block; overflow-x: auto; padding: 0.75rem; white-space: pre-wrap; border-radius: var(--console-radius-sm); background: var(--console-code-bg); }
.table-responsive { width: 100%; border-radius: inherit; }

.badge { padding: 0.38em 0.6em; border-radius: 999px; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.025em; }
.status-code-badge { border-radius: 0.3rem; font-family: var(--console-code-font); font-size: 0.78rem; letter-spacing: 0; }
.source-key-badge { margin-left: 0.35rem; border: 1px solid var(--bs-border-color); border-radius: 0.3rem; color: var(--bs-secondary-color); background: var(--console-code-bg); font-size: 0.68rem; letter-spacing: 0.03em; vertical-align: middle; }
.alert { border: 0; border-left: 3px solid currentColor; border-radius: var(--console-radius-sm); box-shadow: var(--console-shadow); }
.alert-success { --bs-alert-color: #075b32; --bs-alert-bg: #d7f8e6; --bs-alert-border-color: #91e0b2; }
:root[data-bs-theme="dark"] .alert-success { --bs-alert-color: #d8ffe7; --bs-alert-bg: #286747; --bs-alert-border-color: #63d895; }
.pagination { --bs-pagination-border-radius: 0.4rem; }
.form-grid.columns { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.policy-form-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-grid div { display: grid; gap: 5px; }
.reports-chart-container { height: 280px; }
.usage-excess-lane-icon { display: inline-block; margin-left: 0.25rem; font-size: 0.85em; line-height: 1; vertical-align: middle; }
.usage-identity-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.usage-identity-toggle:hover { color: var(--bs-link-color); }
.usage-identity-toggle:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 4px; border-radius: 2px; }
.usage-token-input { color: #176b61; }
.usage-token-cached { color: #6d3bab; }
.usage-token-output { color: #1d59a5; }
:root[data-bs-theme="dark"] .usage-token-input { color: #70cbbb; }
:root[data-bs-theme="dark"] .usage-token-cached { color: #c3a0e8; }
:root[data-bs-theme="dark"] .usage-token-output { color: #87b9f1; }
.usage-summary-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; }

@media (max-width: 1399.98px) {
  .console-navigation .navbar-collapse { padding: 0.75rem 0 0.25rem; }
  .console-navigation .navbar-nav.ms-auto { flex-direction: row; align-items: center; }
  .console-navigation .navbar-nav.ms-auto .nav-link { padding-left: 0.65rem; padding-right: 0.65rem; }
}

@media (max-width: 760px) {
  .console-main { padding-top: 1.25rem; }
  .card-body { padding: 0.85rem; }
  .usage-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }