@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-regular.ttf') format('truetype');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-medium.ttf') format('truetype');
}
@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-semibold.ttf') format('truetype');
}

:root {
  color-scheme: light;
  --brand-blue: #0849a5;
  --brand-sky: #4196d0;
  --brand-mint: #55c5ae;
  --brand-navy: #102747;
  --brand-soft-blue: #eaf2fc;
  --brand-soft-mint: #e5f7f2;
  --brand-gradient: linear-gradient(110deg, #0849a5, #4196d0 55%, #55c5ae);
  --bg: #f5f8ff;
  --ink: var(--brand-navy);
  --muted: #566d89;
  --line: #dce6f2;
  --green: var(--brand-mint);
  --dark: var(--brand-navy);
  --accent: var(--brand-blue);
  --surface: #fff;
  --surface-soft: var(--brand-soft-blue);
  --shadow-sm: 0 3px 10px #10274706;
  --shadow-card: 0 8px 28px -12px #10274720;
  --shadow-raised: 0 14px 36px -12px #10274730;
}

html, body { background: var(--bg); }
body { color: var(--ink); font-family: Poppins, Arial, sans-serif; }
::selection { background: #cce7f5; color: var(--brand-navy); }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { outline-color: var(--brand-blue); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 4px; }
h1, h2, h3, .topbar .page-title, .sectionheading h2,
.request-type-summary .request-kind-heading h2, .modalhead h2,
.projectcard h3, .project-api-project h3, .project-api-card b,
.api-spend-project-title h3 { color: var(--brand-navy); font-weight: 600; }
.yaxis, .xaxis, .request-table td::before { font-family: Poppins, Arial, sans-serif; }

/* Hide the rules included at the edges of the PDF image. */
.circles-logo { display: block; object-fit: contain; flex-shrink: 0; clip-path: inset(2% 0); }
.brand-wordmark { color: var(--brand-navy); font-size: 25px; font-weight: 600; letter-spacing: -.8px; line-height: 1.2; }
.brand-wordmark small { display: block; margin-top: 5px; font-size: 8px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); }
.shell .sidebar { background: #fff; border-color: var(--line); box-shadow: 4px 0 24px #10274703; }
.sidebar .brand { gap: 10px; }
.sidebar .brandmark.circles-brandmark { width: 44px; height: 48px; flex: 0 0 44px; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.sidebar .circles-logo { width: 44px; height: 44px; }
.sidebar nav button { color: var(--muted); font-weight: 500; border-radius: 24px; }
.sidebar nav button:hover { color: var(--brand-blue); background: #f5f8ff; border-color: var(--line); }
.sidebar nav button.active { color: var(--brand-blue); background: var(--brand-soft-blue); border-color: #ccdef3; box-shadow: none; }
.sidebar .navcount { color: var(--brand-blue); background: #dce9f9; border-color: #ccdef3; }
.sidebar .avatar, .topright .avatar { color: var(--brand-blue); background: var(--brand-soft-blue); border-color: var(--line); box-shadow: none; }
.sidebar .profile { border-color: var(--line); }
.sidebar .profile b { color: var(--brand-navy); }
.sidebar .profile small { color: var(--muted); }
.sidebar-toggle, .sidebar-mobile-close, .sidebar-pin { color: var(--brand-blue); }
.sidebar-pin:hover, .sidebar-pin[aria-pressed='true'] { background: var(--brand-soft-blue); color: var(--brand-blue); border-color: #ccdef3; }
.topbar { background: #ffffffed; border-color: var(--line); box-shadow: none; }
.circles-footer-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); }
.circles-footer-brand .circles-logo { width: 24px; height: 24px; }

.button { border-radius: 24px; background: #fff; color: var(--brand-blue); border-color: var(--line); font-weight: 500; box-shadow: var(--shadow-sm); }
.button:hover { background: var(--brand-soft-blue); color: var(--brand-blue); border-color: #b9d0ed; box-shadow: var(--shadow-sm); }
.button.primary, .button.primary:hover { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); box-shadow: 0 5px 14px #0849a51c; }
.button.primary:hover { background: #073d8a; }
.button.quiet { color: var(--muted); background: transparent; box-shadow: none; }
.button.quiet:hover, .iconbutton:hover { color: var(--brand-blue); background: var(--brand-soft-blue); border-color: transparent; }
.textbutton, .textbutton:hover, .project-edit-row .textbutton,
.api-spend-action .textbutton, .api-spend-action .textbutton:hover,
.api-cost-link, .api-cost-link:hover, .api-cost-link svg,
.project-api-title>.textbutton, .project-api-projectfoot>span:last-child,
.cost-shortcut .cost-card-link { color: var(--brand-blue); }
.selectbox, .search, .analytics-api-filter select, .project-status-control select { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.selectbox:focus-within, .search:focus-within,
.modal input:focus, .modal select:focus, .modal textarea:focus,
.request-filters input:focus, .request-filters select:focus,
.page-jump-field input:focus { border-color: var(--brand-sky); box-shadow: 0 0 0 3px #4196d020; }
.request-type-summary .request-kind-filter button { border-radius: 24px; border-color: var(--line); color: var(--muted); background: #fff; font-weight: 500; }
.request-type-summary .request-kind-filter button:hover,
.request-type-summary .request-kind-filter button.selected { color: var(--brand-blue); background: var(--brand-soft-blue); border-color: #bdd3ef; box-shadow: none; }
.request-type-summary .selected .request-kind-count { background: #d7e7f9; color: var(--brand-blue); }

.metrics .metric, .metrics .metric.featured,
.metrics .metric:nth-child(n), .request-type-summary .request-kind-metrics .metric:nth-child(n),
.panel, .projectcard, .project-api-project, .project-api-card, .modal, .budgetcard {
  background: #fff; border-color: var(--line); box-shadow: var(--shadow-card);
}
.metrics .metric.featured, .request-type-summary .request-kind-metrics .metric.featured { background: linear-gradient(135deg, var(--brand-soft-blue), #fff); }
.metrics .metric:nth-child(4), .request-type-summary .request-kind-metrics .metric:nth-child(4) { background: linear-gradient(135deg, var(--brand-soft-mint), #fff); }
.metrics .metric strong, .metrics .metric:nth-child(n) strong,
.request-type-summary .request-kind-metrics .metric:nth-child(n) strong,
.projectnumbers strong, .budgetcard>strong { color: var(--brand-navy); font-weight: 600; }
.metrics .metric.featured.cost-shortcut strong { color: var(--brand-blue); }
.metrics .metric>div, .metrics .metric small, .cost-shortcut .metric-label { color: var(--muted); }
.metrics .metric:nth-child(n)>div>svg, .metrics .metric-label>svg,
.request-type-summary .request-kind-metrics .metric:nth-child(n)>div>svg {
  background: var(--brand-soft-blue); color: var(--brand-blue); box-shadow: 0 0 0 7px var(--brand-soft-blue);
}
.metrics .metric:nth-child(4)>div>svg { background: var(--brand-soft-mint); color: #247b69; box-shadow: 0 0 0 7px var(--brand-soft-mint); }
.panel>.sectionheading, .api-spending>.sectionheading { background: #fff; border-color: var(--line); }
.projectcard:hover, .project-api-project:hover, .project-api-card:hover, .metric.featured.cost-shortcut:hover { border-color: #bdd3ef; box-shadow: var(--shadow-raised); }
.projecticon, .project-api-icon, .serviceinitial, .step>span { background: var(--brand-soft-blue); color: var(--brand-blue); border-color: #d4e3f5; box-shadow: none; }
.projecticon.color1, .projecticon.color2 { background: var(--brand-soft-mint); color: #247b69; border-color: #caece3; box-shadow: none; }
.sectionheading h2>span { background: var(--brand-soft-blue); color: var(--brand-blue); border-color: var(--line); }
.healthpanel { background: #fff; }
.healthnumber { color: var(--brand-navy); }
.healthtrack>div { background: var(--brand-mint); }
.budgettrack { background: var(--brand-soft-blue); }
.budgettrack>div, .budget-progress-row .budgettrack>div { background: var(--brand-gradient); }
.trendplot svg>g:nth-of-type(1)>path[stroke] { stroke: var(--brand-blue); }
.trendplot svg>g:nth-of-type(2)>path[stroke] { stroke: var(--brand-sky); }
.trendplot svg>g:nth-of-type(3)>path[stroke] { stroke: var(--brand-mint); }
.trendplot svg>g:nth-of-type(1)>circle { fill: var(--brand-blue); }
.trendplot svg>g:nth-of-type(2)>circle { fill: var(--brand-sky); }
.trendplot svg>g:nth-of-type(3)>circle { fill: var(--brand-mint); }
.charttooltip { color: var(--brand-navy); border-color: var(--line); }
.api-spend-table th, th { background: var(--bg); color: var(--muted); }
tbody tr:hover, .api-spend-summary:not(.selected-api):hover { background: var(--bg); }
.api-spend-table .api-spend-summary.selected-api { background: var(--brand-soft-blue); box-shadow: inset 3px 0 0 var(--brand-blue); }
.api-spend-recent, .api-spending-focus, .visitcost, .workspaceNotice, .conversation-bubble.user { background: var(--brand-soft-blue); border-color: var(--line); color: var(--brand-navy); }
.workspaceNotice b, .workspaceNotice button, .api-spending-focus strong { color: var(--brand-blue); }
.conversation-role, .visitcost strong, .codehead, pre { color: var(--brand-navy); }
.codehead, pre, .memorypanel pre, .memory-technical pre { background: var(--bg); border-color: var(--line); color: var(--brand-navy); }
.pagination button:hover:not(:disabled) { background: var(--brand-soft-blue); color: var(--brand-blue); border-color: #bdd3ef; }
.modal input, .modal select, .modal textarea { color: var(--brand-navy); border-color: var(--line); }
.toast { color: var(--brand-navy); border-color: var(--line); }
.empty>svg, .integrationnotes svg { color: var(--brand-sky); }

/* A quiet border keeps the brand gradient reserved for key accents. */
:is(.metric,.panel,.projectcard,.project-api-project,.project-api-card,.conversation-bubble,.request-summary,.memory-chat,.answer-meal,.api-spend-recent,.api-spend-summary)::after { display: none; }

@media (max-width: 760px) {
  .api-spend-table .api-spend-summary>td:first-child { background: var(--bg); border-color: var(--line); }
}
/* Keep the project, date, and API controls on one shared baseline. */
.analytics-controls { align-items: center; justify-content: flex-start; gap: 10px; }
.analytics-controls > .toolbar, .analytics-controls > .toolbar > .filters { display: contents; }
.analytics-controls > .toolbar > .row { order: 2; }
.analytics-controls > .toolbar > .row:empty { display: none; }
.analytics-controls .selectbox { --filter-width: 190px; }
.analytics-controls .selectbox:has(select[aria-label="Date range"]) { --filter-width: 155px; }
.analytics-controls .analytics-scope-toolbar { --filter-width: 270px; }
.analytics-controls .selectbox,
.analytics-controls .analytics-scope-toolbar { flex: 0 0 var(--filter-width); width: var(--filter-width); max-width: 100%; margin: 0; }
.analytics-controls .selectbox,
.analytics-controls .analytics-api-filter { box-sizing: border-box; height: 40px; min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); gap: 8px; }
.analytics-controls .selectbox select,
.analytics-controls .analytics-api-filter select { flex: 1; min-width: 0; width: 0; max-width: none; height: 20px; min-height: 20px; padding: 0 3px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: 12px; line-height: 20px; }
.analytics-controls .analytics-api-filter > span { font-size: 12px; line-height: 20px; }
@media (max-width: 760px) {
  .analytics-controls .selectbox,
  .analytics-controls .analytics-scope-toolbar { flex: 1 1 220px; width: 100%; }
}
.content .pageheading.actions-only { gap: 10px; flex-wrap: wrap; align-items: center; }