:root {
  --bg: #10121b;
  --surface: #171a26;
  --surface2: #1d2030;
  --line: #2c3042;
  --ink: #f6f3fb;
  --muted: #aaa8bb;
  --sub: #85839a;
  --pink: #e467af;
  --violet: #9480ed;
  --blue: #5687f7;
  --green: #65c99d;
  --amber: #e2ad68;
  --red: #e77b8c;
}

/* Compact, snapshot-based Requests and Audit reports */
.report-scope {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface2);
  font-size: 12px;
}
.report-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 10px;
}
.report-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface2);
}
.report-card .eyebrow { display: block; margin-bottom: 5px; }
.report-card strong { font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
.report-note { margin: 5px 0 14px; color: var(--muted); font-size: 12px; }
.report-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.report-chart, .report-reasons, .report-recent {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.report-chart h3, .report-reasons h3, .report-recent h3 { margin: 0 0 11px; font-size: 13px; }
.report-bar-row { display: grid; grid-template-columns: minmax(80px, 34%) minmax(24px, 1fr) 32px; align-items: center; gap: 9px; min-height: 24px; }
.report-bar-label { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.report-bar-count { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.report-bar-track { height: 7px; overflow: hidden; border-radius: 5px; background: #2b2d3d; }
.report-bar-fill { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.report-reasons { margin: 12px 0; }
.report-reasons > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.report-reasons > div span { overflow-wrap: anywhere; color: var(--muted); }
.report-recent { margin: 12px 0; }
.report-recent-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.report-recent-row strong { font-size: 12px; }
.report-recent-row > span { text-align: right; font-size: 11px; }
.active-filter-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; }
.active-filter-summary p { margin: 0; font-size: 12px; }
#request-details, #audit-details { margin-top: 12px; border-top: 1px solid var(--line); }
#request-details > summary, #audit-details > summary { padding: 14px 2px; color: var(--ink); font-weight: 700; cursor: pointer; }
#request-details > summary:focus-visible, #audit-details > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.report-detail-tools { padding: 4px 0 12px; }
.report-detail-tools > p { margin: 8px 0 0; font-size: 11px; }
.report-filters { align-items: end; }
.report-filters label, .audit-search-row label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.audit-category-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.audit-category-bar p { margin: 0; }
.audit-category-bar label { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.audit-search-row { margin: 3px 0 12px; }
.audit-item .audit-event { min-width: 0; overflow-wrap: anywhere; }
.audit-item .audit-event code { display: block; margin-top: 3px; color: var(--sub); font-size: 10px; }

@media (max-width: 760px) {
  .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-chart-grid { grid-template-columns: 1fr; }
  .audit-category-bar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .report-card { padding: 10px; }
  .report-card strong { font-size: 18px; }
  .active-filter-summary, .report-recent-row { align-items: flex-start; flex-direction: column; }
  .audit-category-bar label { justify-content: space-between; width: 100%; }
  .report-filters { display: grid; grid-template-columns: 1fr; }
}


.report-cards-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.audit-category-bar select { min-height: 44px; min-width: 190px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; color: var(--ink); background: var(--surface2); font: inherit; }
@media (max-width: 760px) { .report-cards-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .audit-category-bar select { min-width: 0; width: auto; flex: 1; } }


/* Keep report-specific responsive overrides after the main layout rules. */
@media (max-width: 760px) {
  .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-chart-grid { grid-template-columns: 1fr; }
  .audit-category-bar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .report-card { padding: 10px; }
  .report-card strong { font-size: 18px; }
  .active-filter-summary, .report-recent-row { align-items: flex-start; flex-direction: column; }
  .audit-category-bar label { justify-content: space-between; width: 100%; }
  .report-filters { display: grid; grid-template-columns: 1fr; }
}
* {
  box-sizing: border-box;
}
[hidden] { display: none !important; }
html,
body {
  margin: 0;
  min-width: 0;
  background:
    radial-gradient(900px 420px at 75% -10%, #29234455, transparent 70%),
    var(--bg);
  color: var(--ink);
  font:
    14px Manrope,
    system-ui,
    sans-serif;
}
button,
input,
textarea {
  font: inherit;
}
button {
  border: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
code,
.eyebrow,
.mode-badge,
.table-wrap th {
  font-family: "DM Mono", monospace;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.16em;
  font-weight: 800;
}
.brand code {
  color: var(--muted);
  font: 500 12px "DM Mono";
  letter-spacing: 0;
}
.brand-mark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.brand-mark i {
  display: block;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--pink), var(--violet));
}
.brand-mark i:nth-child(1) {
  height: 10px;
}
.brand-mark i:nth-child(2) {
  height: 16px;
}
.brand-mark i:nth-child(3) {
  height: 22px;
}
.topbar {
  height: 76px;
  padding: 0 max(24px, calc((100vw - 1440px) / 2 + 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #11131dcc;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 12px;
}
.mode-badge {
  padding: 5px 8px;
  border: 1px solid #70436a;
  border-radius: 4px;
  letter-spacing: 0.1em;
  color: #efb1d4;
  background: #2c1d32;
}
.mode-badge.live {
  color: #9de0bc;
  border-color: #326a58;
  background: #1a302c;
}
.scope-label {
  color: var(--sub);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #302946;
  color: #dac9ff;
  font-size: 11px;
  font-weight: 800;
}
.outline-button,
.primary-button {
  border-radius: 5px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 12px;
}
.outline-button {
  border: 1px solid var(--line);
  color: var(--muted);
}
.outline-button:hover {
  border-color: var(--violet);
  color: var(--ink);
}
.primary-button {
  background: #a92f72;
  color: white;
  box-shadow: none;
}
.outline-button,
.primary-button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.primary-button:hover:not(:disabled) {
  background: #c53a84;
}
.outline-button:focus-visible,
.primary-button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}
.primary-button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.wide {
  width: 100%;
  margin-top: 18px;
}
.nav-list {
  height: 53px;
  padding: 0 max(24px, calc((100vw - 1440px) / 2 + 32px));
  display: flex;
  align-items: stretch;
  gap: 25px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  padding: 0 1px;
  flex: 0 0 auto;
}
.nav-item:focus-visible { outline:2px solid var(--violet); outline-offset:-3px; border-radius:4px; }
.nav-item:hover,
.nav-item.active {
  color: var(--ink);
}
.nav-item.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink), var(--violet));
}
.nav-count {
  font: 11px "DM Mono";
  background: #2c233e;
  color: #d7bcf1;
  border-radius: 9px;
  padding: 2px 6px;
}
.main {
  max-width: 1440px;
  margin: auto;
}
.page-view {
  display: none;
  padding: 32px 32px 64px;
}
.page-view.active-view {
  display: block;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}
.page-heading.compact {
  margin-bottom: 30px;
}
.page-heading h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.05;
}
.heading-copy {
  color: var(--muted);
  margin: 10px 0 0;
}
.eyebrow {
  margin: 0 0 10px;
  color: #8b89a1;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.page-actions {
  align-items: center;
  justify-content: flex-end;
}
.panel,
.stat-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #191c29, #151823);
  box-shadow: 0 18px 50px #08091033;
}
.panel {
  padding: 22px;
}
.stack-form { display:grid; gap:10px; }
.stack-form label, .form-grid label, .review-form label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.stack-form input, .stack-form textarea, .review-form input { width:100%; border:1px solid var(--line); border-radius:5px; padding:10px; color:var(--ink); background:var(--surface2); }
.stack-form textarea { min-height:78px; resize:vertical; }
.stack-form fieldset { margin:4px 0; border:1px solid var(--line); border-radius:5px; padding:10px; }
.stack-form legend { padding:0 5px; color:var(--muted); font-size:11px; }
.check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px; }
.check-grid label { display:flex; align-items:center; gap:7px; font-weight:500; }
.check-grid input { width:auto; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.secret-banner { margin:-10px 0 22px; padding:14px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid #326a58; border-radius:7px; background:#182c28; color:#c9f3dd; min-width:0; }
.secret-banner code { padding:7px 9px; border-radius:4px; background:#0d1b19; word-break:break-all; }
.access-record { border-top:1px solid var(--line); padding:16px 0; }
.access-record:first-child { border-top:0; padding-top:0; }
.record-head, .record-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; min-width:0; }
.record-actions { justify-content:flex-start; margin-top:10px; }
.review-form { display:grid; grid-template-columns:repeat(2,minmax(100px,1fr)); gap:14px; margin-top:18px; }
.review-form button { align-self:end; }
.admin-only { margin-top:16px; }
.access-subnav { display:flex; gap:8px; border-bottom:1px solid var(--line); margin:-5px 0 22px; position:sticky; top:0; z-index:3; background:var(--surface); padding:8px 0; }
.access-tab { border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); min-height:44px; padding:8px 14px; cursor:pointer; font:inherit; }
.access-tab[aria-current="page"] { color:var(--ink); border-color:var(--pink); font-weight:700; }
.access-tab:focus-visible, .access-toolbar button:focus-visible, .access-filters :focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
.access-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; margin-bottom:18px; }
.access-queue-heading { margin:18px 0 12px; }
.requester-cell { display:grid; gap:3px; min-width:130px; }
.access-toolbar h2 { margin:0 0 4px; }
.access-toolbar p { margin:0; }
#access-workspace > h2, #access-workspace > h3 { margin:12px 0; }
#access-workspace > p { max-width:800px; }
.access-form { max-width:760px; }
.access-form label, .review-form label, .access-filters label { display:grid; gap:7px; color:var(--muted); font-weight:600; }
.access-form input, .access-form textarea, .review-form input, .access-filters input, .access-filters select, #access-workspace > input[type="search"] { width:100%; min-height:44px; border:1px solid var(--line); border-radius:7px; padding:10px 12px; color:var(--ink); background:var(--surface2); font:inherit; }
.access-form textarea { min-height:92px; }
.access-form fieldset, .review-form fieldset { border:1px solid var(--line); border-radius:8px; padding:14px; margin:4px 0; }
.access-form legend, .review-form legend { padding:0 6px; color:var(--muted); }
.access-form .check-grid label, .review-form .check-grid label { display:flex; align-items:center; min-height:40px; }
.access-form .check-grid input, .review-form .check-grid input { width:auto; min-height:auto; }
.access-filters { display:grid; grid-template-columns:minmax(240px,2fr) repeat(3,minmax(130px,1fr)); gap:12px; align-items:end; margin:18px 0; }
.access-filters input, .access-filters select { min-width:0; }
.access-table { min-width:0; }
.access-table-wrap { margin:12px 0; }
.access-table th { white-space:nowrap; }
.access-table td { vertical-align:middle; }
.access-table td .primary-button, .access-table td .outline-button, .pagination button, #access-workspace .primary-button, #access-workspace .outline-button { min-height:44px; }
.truncate-cell { display:block; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pagination { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:16px 0 28px; }
.pagination span { margin-right:auto; }
.access-review-form { max-width:780px; }
.access-review-form fieldset { grid-column:1/-1; min-width:0; }
.access-review-form > .form-error { grid-column:1/-1; }
.access-review-form button { min-width:140px; }
.access-rule-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:20px; border:1px solid var(--line); border-radius:8px; }
.access-rule-copy { flex:1 1 280px; }
.access-rule-copy label { color:var(--ink); font-size:15px; font-weight:600; cursor:pointer; }
.access-rule-copy p { margin:8px 0 0; }
.access-rule-row .switch-cell { flex:0 0 auto; margin:0; }
.access-rule-row .switch-cell input { flex:0 0 42px; margin:0; border:0; }
.access-rule-row .switch-cell input:disabled { opacity:.5; cursor:wait; }
@media (max-width: 760px) {
  .review-form, .form-grid { grid-template-columns:1fr; }
  .access-filters { grid-template-columns:1fr 1fr; }
  .access-filters > input { grid-column:1/-1; }
  .secret-banner { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .access-subnav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); position:static; }
  .access-tab { text-align:center; border:1px solid var(--line); border-radius:8px; }
  .access-tab[aria-current="page"] { border-color:var(--pink); }
  .access-toolbar { align-items:flex-start; }
  .access-table-wrap { overflow:visible; }
  .access-table, .access-table tbody, .access-table tr, .access-table td { display:block; width:100%; }
  .access-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .access-table tr { border:1px solid var(--line); border-radius:8px; margin:12px 0; padding:6px 12px; }
  .access-table td { display:grid; grid-template-columns:minmax(105px,35%) minmax(0,1fr); gap:10px; border:0; padding:8px 0; overflow-wrap:anywhere; }
  .access-table td::before { content:attr(data-label); color:var(--sub); font-size:11px; font-weight:700; }
  .access-table td .truncate-cell { max-width:none; white-space:normal; }
  .access-table td button { justify-self:start; }
  .access-filters { grid-template-columns:1fr; }
  .access-filters > input { grid-column:auto; }
  .pagination { flex-wrap:wrap; }
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat-card {
  padding: 20px;
}
.stat-label {
  color: var(--muted);
  display: block;
}
.stat-value,
.budget-value {
  display: block;
  margin-top: 15px;
  font-size: 29px;
  letter-spacing: -0.04em;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.overview-grid h2 {
  margin: 5px 0 8px;
  font-size: 20px;
}
.muted {
  color: var(--muted);
  line-height: 1.6;
}
.full-panel {
  min-height: 240px;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.request-filter-label, .audit-toolbar label, .budget-usage-toolbar label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:700; }
.request-filter-label select, .audit-toolbar select, .audit-toolbar input, .budget-usage-toolbar input, .budget-usage-toolbar select { min-height:42px; min-width:150px; border:1px solid var(--line); border-radius:6px; padding:8px 10px; background:var(--surface2); color:var(--ink); font:inherit; }
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 12px;
  color: var(--sub);
  width: min(480px, 100%);
}
.search-field input {
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: 11px 0;
  width: 100%;
  outline: 0;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
}
.table-wrap th {
  text-align: left;
  color: var(--sub);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.table-wrap td {
  padding: 14px 12px;
  border-bottom: 1px solid #292d3d;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}
.table-wrap td code,
.model-id {
  color: #d3c8ff;
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (min-width: 561px) {
  .requests-table td:nth-child(1),
.requests-table td:nth-child(6),
  .requests-table td:nth-child(7),
  .requests-table td:nth-child(8) {
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .requests-table td:nth-child(2),
  .requests-table td:nth-child(3),
  .requests-table td:nth-child(5) {
    max-width: 190px;
  }
  .requests-table td:nth-child(6) { min-width: 90px; }
  .requests-table td:nth-child(7) { min-width: 82px; }
  .requests-table td:nth-child(8) { min-width: 82px; }
}
.results-meta {
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
}
.section-heading {
  margin: 24px 0 12px;
  font-size: 17px;
}
.identity-cell { display:grid; gap:3px; min-width:0; max-width:100%; }
.identity-cell strong { color:var(--ink); font-weight:700; overflow-wrap:anywhere; }
.identity-secondary, .audit-secondary { color:var(--sub); font-size:11px; overflow-wrap:anywhere; }
.budget-usage-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:14px; justify-content:space-between; margin:14px 0; }
.budget-usage-toolbar > div:first-child { margin-right:auto; }
.budget-usage-toolbar .section-heading { margin:0; }
.budget-usage-toolbar p { margin:4px 0 0; }
.personal-limit-note { margin:0 0 18px; padding:10px 12px; border-left:2px solid var(--violet); color:var(--muted); background:var(--surface2); }
.audit-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:14px; margin-bottom:10px; }
.audit-toolbar > p { flex:1 1 100%; margin:0; }
.audit-toolbar label:last-child { flex:1 1 220px; }
.audit-toolbar label:last-child input { width:100%; }
.audit-event { display:grid; gap:3px; min-width:0; }
.audit-event strong { color:var(--ink); overflow-wrap:anywhere; }
.audit-event code { color:var(--sub); font-size:11px; overflow-wrap:anywhere; }
.model-facts {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1.3fr);
  gap: 9px 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.model-facts dt {
  color: var(--sub);
  font-size: 12px;
}
.model-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.policy-value {
  display: block;
  margin: 12px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.approval-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.status-pill,
.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.status-pill {
  background: #292c39;
  color: var(--muted);
}
.status-pill.completed,
.status-pill.success,
.status-pill.approved {
  background: #19382f;
  color: #8edcb7;
}
.status-pill.blocked,
.status-pill.rejected {
  background: #3b242e;
  color: #f09ba7;
}
.status-pill.fallback {
  background: #3d3321;
  color: #f0c47d;
}
.model-grid,
.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.model-card h2,
.policy-card h2 {
  margin: 14px 0 8px;
  font-size: 18px;
}
.model-card p {
  margin-bottom: 0;
}
.model-id {
  font-size: 13px;
}
.tag {
  margin-top: 5px;
  background: #252b44;
  color: #aebfff;
}
.green-tag {
  background: #19382f;
  color: #8edcb7;
}
.gray-tag {
  background: #292c39;
  color: var(--muted);
}
.budget-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.budget-value {
  font-size: 27px;
}
.policy-grid {
  grid-template-columns: repeat(2, 1fr);
}
.audit-item {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #292d3d;
  color: var(--muted);
}
.audit-item > * { min-width: 0; }
.audit-item .tag, .audit-item .pill { justify-self: start; max-width: 100%; white-space: normal; text-align:left; overflow-wrap: anywhere; }
.audit-meta { overflow-wrap: anywhere; }
.audit-item time {
  font-size: 12px;
  color: var(--sub);
}
.audit-change { grid-column: 1 / -1; overflow-wrap: anywhere; }
.vscode-steps { max-width:850px; padding-left:24px; color:var(--muted); line-height:1.65; }
.vscode-steps li { padding:3px 0; }
.vscode-key-picker { display:grid; gap:7px; max-width:460px; margin:12px 0; color:var(--muted); font-weight:600; }
.vscode-key-picker select { min-height:44px; border:1px solid var(--line); border-radius:7px; padding:10px 12px; color:var(--ink); background:var(--surface2); font:inherit; }
.vscode-config { max-width:100%; overflow:auto; padding:16px; border:1px solid var(--line); border-radius:8px; background:var(--surface2); color:var(--ink); }
.vscode-config code { white-space:pre; }
.settings-panel { padding: 24px; margin-bottom: 20px; }
.settings-panel .panel-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px; }
.settings-panel .panel-heading h2 { margin:0; }
.settings-panel .panel-heading p { margin:6px 0 0; }
.settings-panel button { min-height:44px; }
.settings-panel .primary-button { background:#a92f72; color:#fff; box-shadow:none; }
.settings-panel .primary-button:hover:not(:disabled) { background:#c53a84; }
.settings-panel .panel-heading > .settings-actions > button { align-self:end; }
.settings-subnav { display:flex; gap:8px; overflow-x:auto; padding:10px; margin:0 0 20px; position:sticky; top:0; z-index:5; border:1px solid var(--line); border-radius:8px; background:#171a26f2; }
.settings-subnav button { flex:0 0 auto; border-radius:5px; padding:10px 14px; color:var(--muted); font-weight:700; }
.settings-subnav button[aria-current="page"] { color:var(--ink); background:#2c233e; box-shadow:inset 0 -2px var(--violet); }
.settings-section[hidden], [hidden] { display:none !important; }
.provider-table { width:100%; overflow-x:auto; }
.settings-table { width:100%; border-collapse:collapse; text-align:left; }
.settings-table th { padding:14px 12px; color:var(--sub); font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line); }
.settings-table td { padding:16px 12px; border-bottom:1px solid #292d3d; vertical-align:middle; overflow-wrap:anywhere; }
.table-primary { display:grid; gap:4px; min-width:130px; }
.table-primary strong { font-size:14px; }
.table-primary span { color:var(--muted); font-size:12px; }
.status-good { color:#9de0bc; }
.status-warn { color:#f1c67e; }
.inline-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.inline-actions button, .text-button { min-width:64px; min-height:44px; }
.switch-cell { display:flex !important; align-items:center; gap:10px !important; min-height:44px; cursor:pointer; color:var(--ink) !important; font-size:13px !important; font-weight:600 !important; }
.switch-cell input[type="checkbox"] { appearance:none; width:42px !important; min-width:42px; height:26px; border-radius:20px; padding:3px !important; background:#555b69; cursor:pointer; transition:background .16s ease; }
.switch-cell input[type="checkbox"]::before { content:""; display:block; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .16s ease; }
.switch-cell input[type="checkbox"]:checked { background:#238765; }
.switch-cell input[type="checkbox"]:checked::before { transform:translateX(16px); }
.switch-cell input[type="checkbox"]:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.switch-state { min-width:88px; }
.model-fields { border:1px solid var(--line); border-radius:8px; padding:16px; margin:4px 0; }
.model-fields legend { padding:0 8px; color:var(--muted); font-weight:700; }
.danger-zone { border-top:1px solid var(--line); margin-top:20px; padding-top:16px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.danger-zone .danger-button { width:auto; background:transparent; border:1px solid #a94e5d; color:#f19aa7; }
.danger-zone .danger-button:hover:not(:disabled) { background:#3a2028; }
.reset-app-warning { padding:16px 18px; border:1px solid #8f4652; border-radius:8px; background:#291b25; color:var(--muted); line-height:1.55; }
.reset-app-warning p { margin:0 0 12px; }
.reset-app-warning p:last-child { margin-bottom:0; }
.reset-app-warning strong { color:#f2a6af; }
.reset-app-controls { margin-top:22px; }
.reset-app-count-details { border:1px solid var(--line); border-radius:7px; padding:0 14px; }
.reset-app-count-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:#c8b9ff; font-weight:700; }
.reset-app-count-details .table-wrap { max-height:340px; overflow:auto; }
.reset-app-counts .table-wrap table { min-width:0; }
.reset-app-counts .table-wrap td:last-child { width:140px; font-variant-numeric:tabular-nums; }
.text-button { width:max-content; color:#c8b9ff; text-decoration:underline; text-underline-offset:3px; }
.alias-help { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.alias-help p { margin:0; padding:12px; border:1px solid var(--line); border-radius:6px; color:var(--muted); }
.alias-help code { display:block; color:var(--ink); margin-bottom:5px; }
.settings-savebar { position:fixed; z-index:20; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:14px max(24px, calc((100vw - 1440px) / 2 + 32px)); border-top:1px solid var(--line); background:#11131df5; box-shadow:0 -10px 35px #08091066; }
.settings-savebar > span:first-child { margin-right:auto; color:var(--amber); font-weight:700; }
.settings-savebar .form-error { margin:0; }
.settings-savebar button { min-height:44px; }
.provider-assignment { display:grid; gap:12px; padding:24px 0; border-top:1px solid var(--line); }
.provider-assignment h3, .provider-assignment > p { margin:0; }
.mapping-selects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:980px; }
.provider-assignment select { max-width:640px; }
.mapping-field { display:grid; gap:6px; max-width:640px; color:var(--muted); font-size:12px; font-weight:700; }
.provider-assignment details { display:grid; gap:12px; }
.provider-assignment summary, details summary { color:#c8b9ff; cursor:pointer; }
.settings-panel button:disabled { cursor:not-allowed; opacity:.55; }
.settings-draft-status { margin:0; min-height:20px; color:var(--amber); font-size:13px; font-weight:700; }
.settings-page-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.settings-page-heading > button { min-height:44px; flex:0 0 auto; }
.settings-change-actions { align-items:center; justify-content:flex-end; border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
.settings-change-actions .settings-draft-status { margin-right:auto; }
.settings-change-actions button { min-height:44px; }
.settings-savebar { max-width:1440px; margin:auto; }
#provider-assignments .provider-checkbox { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
#provider-assignments .provider-checkbox .switch-state { margin-left:auto; }
.provider-assignment .fallback-rule-row { margin:4px 0 0; padding:14px 16px; }
.fallback-rule-label { color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; }
.fallback-rule-row .access-rule-copy p { margin-top:5px; }
@media (max-width: 640px) {
  .settings-page-heading { align-items:stretch; flex-direction:column; }
  .settings-page-heading > button { align-self:flex-start; }
  .settings-table { min-width:0; }
  .table-primary { min-width:0; }
  .switch-cell { flex-wrap:wrap; }
  .mapping-selects { grid-template-columns:1fr; }
  .settings-subnav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .settings-subnav button { text-align:center; min-height:44px; }
  .settings-panel .panel-heading { align-items:stretch; flex-direction:column; gap:12px; }
  .settings-panel .panel-heading > .settings-actions { display:grid; grid-template-columns:1fr 1fr; align-items:end; }
  .settings-panel .panel-heading > .settings-actions > button { align-self:end; }
  .settings-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .settings-table, .settings-table tbody, .settings-table tr, .settings-table td { display:block; width:100%; }
  .settings-table tr { padding:10px 0; border-bottom:1px solid var(--line); }
  .settings-table td { display:grid; grid-template-columns:minmax(88px, .7fr) minmax(0, 1.4fr); gap:10px; padding:8px 4px; border:0; }
  .settings-table td::before { content:attr(data-label); color:var(--sub); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .settings-savebar { flex-wrap:wrap; padding:12px 16px; }
  .settings-savebar > span:first-child { width:100%; }
}
.route-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; }
.route-price-grid label { display: grid; gap: 8px; }
.route-price-grid input { max-width: none !important; }
.settings-panel #route-primary { max-width: 980px; }
@media (max-width: 640px) { .route-price-grid { grid-template-columns: 1fr; } }
.settings-panel select,
.settings-panel input { width: 100%; max-width: 480px; padding: 12px; color: var(--ink); background: var(--surface); border: 1px solid #393e51; border-radius: 8px; font: inherit; }
.settings-panel input:disabled { opacity: .55; }
.provider-checkbox { display: flex; align-items: center; gap: 12px; }
#provider-assignments .provider-checkbox input { width:42px !important; min-width:42px; }
.settings-panel .provider-assignment { padding:24px 0; border-top:1px solid var(--line); gap:12px; }
.settings-panel .provider-assignment h3, .settings-panel .provider-assignment > p { margin:0; }
.provider-assignment .provider-checkbox { margin-top: 12px; }
.mode-badge.unconfigured { color: #ffd59a; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.danger-button { border-radius: 5px; padding: 10px 14px; font-weight: 700; font-size: 12px; background: #8a3547; color: #fff; }
.danger-button:hover:not(:disabled) { background: #a83e55; }
.danger-button:disabled { opacity: .55; cursor: not-allowed; }
#settings-more { margin-top: 16px; }
.loading-state,
.empty-state {
  color: var(--muted);
  padding: 24px 0;
}
.error-banner {
  margin: 20px max(24px, calc((100vw - 1440px) / 2 + 32px)) 0;
  padding: 12px 14px;
  border: 1px solid #713b49;
  border-radius: 5px;
  color: #f2a3af;
  background: #321f2a;
}
.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(420px, 100%);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 24px 70px #07080d88;
}
.login-card h1 {
  margin: 8px 0;
  font-size: 30px;
}
.login-card .brand {
  margin-bottom: 52px;
}
.login-card label,
.modal label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-top: 20px;
}
.login-card input,
.modal input,
.modal textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #10121b;
  color: var(--ink);
}
.login-card input::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: #6f6d80;
}
.login-hint {
  font: 12px "DM Mono";
  color: var(--amber);
  margin: 11px 0 0;
}
.form-error {
  color: #f09ba7;
  font-size: 12px;
  margin: 11px 0 0;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #070810cc;
  z-index: 4;
}
.modal-backdrop[hidden],
.toast[hidden],
#app[hidden],
#login-screen[hidden] {
  display: none;
}
.modal {
  position: relative;
  width: min(470px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 20px 80px #0009;
}
.modal h2 {
  margin: 0 0 8px;
  font-size: 24px;
}
.modal textarea {
  min-height: 100px;
  resize: vertical;
}
.modal-close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 25px;
  color: var(--sub);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  padding: 13px 17px;
  border: 1px solid #3c4160;
  border-radius: 6px;
  background: #202438;
  color: var(--ink);
  box-shadow: 0 12px 35px #0008;
  z-index: 5;
}
@media (max-width: 850px) {
  .topbar {
    height: auto;
    min-height: 76px;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px;
  }
  .top-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .scope-label {
    display: none;
  }
  .page-view {
    padding: 25px 20px 48px;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .heading-actions {
    width: 100%;
  }
  .heading-actions button {
    flex: 1;
  }
  .stat-grid,
  .overview-grid,
  .budget-summary,
  .model-grid,
  .policy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .brand b,
  .brand > span:not(.brand-mark) {
    display: none;
  }
  .nav-list {
    padding: 0 20px;
    gap: 18px;
  }
  .page-heading h1 {
    font-size: 30px;
  }
  .stat-grid,
  .overview-grid,
  .budget-summary,
  .model-grid,
  .policy-grid {
    grid-template-columns: 1fr;
  }
  .audit-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .audit-item time {
    order: 3;
  }
  .top-actions .outline-button {
    padding: 8px;
  }
  .user-button span:nth-child(2) {
    display: none;
  }
  .page-actions {
    justify-content: flex-start;
  }
  .page-actions button {
    flex: 1 1 auto;
  }
  .model-facts {
    grid-template-columns: minmax(105px, 0.75fr) minmax(0, 1.25fr);
    gap: 8px 12px;
  }
  .table-wrap:not(.access-table-wrap) {
    overflow: visible;
  }
  .table-wrap:not(.access-table-wrap) table,
  .table-wrap:not(.access-table-wrap) tbody,
  .table-wrap:not(.access-table-wrap) tr,
  .table-wrap:not(.access-table-wrap) td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .table-wrap:not(.access-table-wrap) table {
    min-width: 0;
  }
  .table-wrap:not(.access-table-wrap) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .table-wrap:not(.access-table-wrap) tr {
    margin: 12px 0;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .table-wrap:not(.access-table-wrap) td {
    display: grid;
    grid-template-columns: minmax(105px, 35%) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table-wrap:not(.access-table-wrap) td::before {
    content: attr(data-label);
    color: var(--sub);
    font-size: 11px;
    font-weight: 700;
  }
}

.report-cards-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.audit-category-bar select { min-height: 44px; min-width: 190px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 12px; color: var(--ink); background: var(--surface2); font: inherit; }
@media (max-width: 760px) { .report-cards-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .audit-category-bar select { min-width: 0; width: auto; flex: 1; } }

@media (max-width: 760px) {
  .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-chart-grid { grid-template-columns: 1fr; }
  .audit-category-bar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .report-card { padding: 10px; }
  .report-card strong { font-size: 18px; }
  .active-filter-summary, .report-recent-row { align-items: flex-start; flex-direction: column; }
  .audit-category-bar label { justify-content: space-between; width: 100%; }
  .report-filters { display: grid; grid-template-columns: 1fr; }
}

/* Conversation IDs and grouping controls in request details */
.report-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(140px, 1fr)); }
.report-filters input[type="search"], .report-filters select { min-height: 44px; min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; color: var(--ink); background: var(--surface2); font: inherit; }
.report-filters input[type="search"] { appearance: none; }
.request-group-toggle { max-width: 420px; }
.conversation-id-cell { display: grid; gap: 3px; min-width: 150px; max-width: 250px; white-space: normal; }
.conversation-label { color: var(--sub); font-size: 10px; }
.conversation-id, .conversation-group-id { color: var(--muted); font-size: 10px; user-select: text; overflow-wrap: anywhere; white-space: normal; }
.conversation-missing { color: var(--sub); font-size: 11px; white-space: normal; }
.conversation-group { margin: 12px 0 18px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface2); }
.conversation-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 10px; }
.conversation-group-label { font-size: 13px; }
.conversation-group-count { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 500; }
.conversation-group .table-wrap { max-width: 100%; }
@media (max-width: 900px) { .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .report-filters { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .conversation-group { padding: 8px; } }