:root {
  --ink: #edf2f0;
  --muted: #8d9ca4;
  --line: rgba(176, 201, 211, 0.14);
  --line-strong: rgba(176, 201, 211, 0.27);
  --panel: rgba(11, 27, 37, 0.82);
  --panel-solid: #0b1b25;
  --panel-blue: #102732;
  --navy: #07151e;
  --blue: #48b5e5;
  --aqua: #65d6c2;
  --copper: #d9986d;
  --danger: #ff8b93;
  --radius-xl: 24px;
  --radius-lg: 17px;
  --radius-md: 12px;
  --shadow: 0 22px 52px rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { min-width: 320px; background: var(--navy); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 0%, rgba(45, 121, 148, 0.17), transparent 30rem),
    radial-gradient(circle at 86% 12%, rgba(157, 96, 59, 0.11), transparent 26rem),
    linear-gradient(132deg, #071822 0%, #07141c 52%, #0a1a21 100%);
  font-family: "Space Grotesk", "Aptos", "Segoe UI Variable Text", sans-serif;
}

/* The source markup is localized by the module. Do not show an intermediate
   fallback font or untranslated copy during a hard refresh. */
body.stats-booting .app-shell {
  visibility: hidden;
}

button, input { font: inherit; }
button { cursor: pointer; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, .metric-card > strong, .insight-stat strong { font-family: "Unbounded", "Aptos Display", "Segoe UI Variable Display", sans-serif; }

.ambient { position: fixed; z-index: -2; width: 34rem; height: 34rem; filter: blur(18px); border-radius: 50%; pointer-events: none; }
.ambient-left { top: -16rem; left: -16rem; background: radial-gradient(circle, rgba(34, 157, 202, 0.12), transparent 68%); }
.ambient-right { right: -16rem; bottom: -16rem; background: radial-gradient(circle, rgba(212, 135, 87, 0.09), transparent 68%); }
.grid-overlay { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.14; background-image: linear-gradient(rgba(134, 183, 209, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(134, 183, 209, 0.04) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(105deg, transparent, #000 20%, #000 76%, transparent); }

.app-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 52px; }
.access-screen { display: grid; min-height: calc(100vh - 98px); place-items: center; }

.access-card, .dashboard-header, .chart-card, .details-card, .insight-card, .metric-card, .active-key-card {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(15, 34, 45, 0.89), rgba(8, 22, 31, 0.9));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.access-card { position: relative; isolation: isolate; width: min(660px, 100%); overflow: hidden; padding: 31px; border-radius: var(--radius-xl); }
.access-card::before { position: absolute; z-index: -1; top: -178px; right: -158px; width: 360px; height: 360px; border: 1px solid rgba(78, 181, 236, 0.11); border-radius: 50%; box-shadow: inset 0 0 60px rgba(66, 166, 214, 0.06); content: ""; }
.access-card::after { position: absolute; z-index: -1; right: -80px; bottom: -140px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(236, 148, 95, 0.08), transparent 70%); content: ""; }

.brand-line, .dashboard-header, .header-actions, .page-heading, .chart-topline, .section-card-heading, .usage-progress > div:first-child, .insight-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-symbol { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(95, 207, 243, 0.3); border-radius: 12px; color: #c3effe; background: linear-gradient(135deg, rgba(68, 186, 240, 0.2), rgba(21, 76, 105, 0.18)); box-shadow: none; font-size: 0.9rem; font-weight: 800; letter-spacing: -0.08em; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 0.9rem; letter-spacing: 0.04em; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 0.57rem; letter-spacing: 0.1em; }

.secure-pill, .status-pill, .model-count { display: inline-flex; align-items: center; gap: 7px; color: #aabcc5; font-size: 0.73rem; }
.secure-pill { padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; background: rgba(1, 10, 16, 0.3); }
.secure-pill i, .status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }

.access-copy { max-width: 440px; margin: 60px 0 34px; }
.eyebrow { margin: 0 0 8px; color: #87b3c5; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.access-copy h1, .page-heading h1 { margin-bottom: 16px; font-size: clamp(2.3rem, 6vw, 4.25rem); line-height: 0.98; letter-spacing: -0.05em; }
.access-copy > p:last-child { max-width: 40ch; margin-bottom: 0; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }

.key-form { width: min(495px, 100%); }
.key-form label { display: block; margin-bottom: 9px; color: #bacbd4; font-size: 0.79rem; font-weight: 700; }
.key-input-wrap { display: flex; align-items: center; min-height: 58px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(0, 9, 15, 0.42); transition: border-color 180ms ease, box-shadow 180ms ease; }
.key-input-wrap:focus-within { border-color: rgba(70, 187, 240, 0.75); box-shadow: 0 0 0 4px rgba(67, 180, 230, 0.1); }
.key-input-wrap > svg { width: 20px; color: #668999; }
.key-input-wrap input { width: 100%; min-width: 0; padding: 14px 12px; border: 0; outline: 0; color: #ecf7fa; background: transparent; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.9rem; }
.key-input-wrap input::placeholder { color: #648190; }
.peek-button, .active-key-card button { display: grid; width: 35px; height: 35px; padding: 0; place-items: center; border: 0; border-radius: 9px; color: #8eabb7; background: transparent; }
.peek-button:hover, .active-key-card button:hover { color: var(--blue); background: rgba(68, 182, 240, 0.1); }
.peek-button svg, .active-key-card button svg { width: 19px; }
.input-hint, .input-error { min-height: 17px; margin: 9px 1px 14px; font-size: 0.71rem; line-height: 1.4; }
.input-hint { color: #75939f; }
.input-error { display: none; color: var(--danger); }
.input-error.is-visible { display: block; }

.primary-button, .outline-button, .exit-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; border-radius: 10px; font-weight: 700; transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.primary-button { padding: 0 18px; border: 1px solid rgba(119, 215, 255, 0.35); color: #07151e; background: #66c9ee; box-shadow: 0 10px 20px rgba(53, 176, 232, 0.16); }
.primary-button svg { width: 18px; }
.primary-button:hover { background: #8ad9f6; transform: translateY(-1px); }
.primary-button:active, .outline-button:active { transform: translateY(0); }
.submit-key { width: 100%; min-height: 54px; }
.access-footer { display: flex; gap: 7px; margin-top: 29px; color: var(--muted); font-size: 0.76rem; }
.access-footer a { color: #8edafd; font-weight: 700; text-decoration: none; }
.access-footer a:hover { text-decoration: underline; }

.dashboard { animation: dashboard-enter 380ms cubic-bezier(.22,.61,.36,1) both; }
.dashboard-header { padding: 15px 17px; border-radius: 15px; }
.updated-at { color: #7995a2; font-size: 0.72rem; }
.outline-button { padding: 0 13px; border: 1px solid var(--line-strong); color: #d8e6eb; background: rgba(4, 15, 23, 0.46); font-size: 0.77rem; }
.outline-button svg { width: 16px; }
.outline-button:hover { border-color: rgba(79, 190, 240, 0.55); transform: translateY(-1px); }
.exit-button { min-height: 40px; padding: 0 4px; border: 0; color: #93b3c0; background: transparent; font-size: 0.75rem; }
.exit-button:hover { color: #d6ebf4; }
.page-heading { margin: 44px 0 23px; align-items: flex-end; }
.page-heading h1 { margin: 0; font-size: clamp(2.15rem, 4vw, 3.45rem); }
.active-key-card { min-width: 235px; padding: 11px 12px 11px 15px; border-radius: 15px; box-shadow: none; }
.active-key-card span, .active-key-card strong { display: block; }
.active-key-card span { color: #a6c5d0; font-size: 0.64rem; }
.active-key-card strong { margin-top: 4px; color: #f0fbff; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.74rem; text-shadow: 0 0 12px rgba(191, 234, 249, 0.12); }
.active-key-card button { float: right; margin-top: -31px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.metric-card { position: relative; overflow: hidden; min-height: 151px; padding: 19px; border-radius: 15px; box-shadow: none; animation: dashboard-enter 440ms cubic-bezier(.22,.61,.36,1) both; }
.metric-card:nth-child(2) { animation-delay: 45ms; }.metric-card:nth-child(3) { animation-delay: 90ms; }.metric-card:nth-child(4) { animation-delay: 135ms; }
.metric-card::before { position: absolute; top: 0; left: 19px; width: 38px; height: 2px; border-radius: 0 0 2px 2px; background: currentColor; content: ""; opacity: 0.72; }
.metric-card::after { position: absolute; right: -22px; bottom: -44px; width: 112px; height: 112px; border-radius: 50%; background: radial-gradient(circle, currentColor 0 1px, transparent 1px 100%); background-size: 12px 12px; opacity: 0.08; content: ""; }
.metric-card.requests { color: var(--blue); }.metric-card.tokens { color: #94d4ff; }.metric-card.cache { color: var(--aqua); }.metric-card.balance { color: #ffc18e; }
.metric-label { display: block; color: #9bb2bc; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.metric-card > strong { display: block; margin: 17px 0 7px; color: #f2f6f7; font-size: clamp(1.55rem, 3vw, 2.1rem); letter-spacing: -0.055em; }
.metric-card p { margin: 0; color: #829ba6; font-size: 0.72rem; }.metric-card p span { color: #bad1d9; }
.metric-card .up { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.metric-icon { position: absolute; top: 17px; right: 18px; color: currentColor; font-size: 1.25rem; opacity: 0.75; }

.chart-card { margin-top: 14px; padding: 24px 24px 18px; border-radius: 17px; }
.chart-topline { align-items: flex-start; }.chart-topline h2, .section-card-heading h2, .insight-card h2 { margin: 0; font-size: 1.1rem; letter-spacing: -0.03em; }
.chart-controls, .series-switch, .toggle-control, .chart-legend { display: flex; align-items: center; gap: 11px; }
.series-switch { padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(1, 12, 18, 0.29); }
.series-switch button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 0; border-radius: 7px; color: #79939e; background: transparent; font-size: 0.69rem; }.series-switch button.is-active { color: #e5f5f8; background: rgba(55, 163, 207, 0.16); }.series-switch i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }.series-switch button[data-chart-mode="cost"] i { background: var(--copper); }
.toggle-control { color: #91a9b2; font-size: 0.69rem; cursor: pointer; }.toggle-control input { position: absolute; opacity: 0; }.toggle-control > span { position: relative; width: 30px; height: 17px; border-radius: 99px; background: #263e4b; transition: background 160ms ease; }.toggle-control > span::after { position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #8ca4ae; content: ""; transition: transform 160ms ease, background 160ms ease; }.toggle-control input:checked + span { background: #277ca2; }.toggle-control input:checked + span::after { background: #e5f9ff; transform: translateX(13px); }
.chart-legend { justify-content: flex-end; margin: 25px 4px -4px; color: #79939e; font-size: 0.66rem; }.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }.chart-legend i { width: 7px; height: 7px; border-radius: 50%; }.legend-blue { background: var(--blue); }.legend-aqua { background: var(--aqua); }.legend-copper { background: var(--copper); }
.canvas-wrap { height: 310px; margin-top: 8px; }.canvas-wrap canvas { display: block; width: 100%; height: 100%; }

.details-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.9fr); gap: 14px; margin-top: 14px; }.details-card { padding: 23px; border-radius: 17px; box-shadow: none; }.status-pill { padding: 7px 9px; border: 1px solid rgba(77, 216, 192, 0.25); border-radius: 99px; color: #a4ddd3; background: rgba(39, 169, 149, 0.08); transition: color 180ms ease, border-color 180ms ease, background 180ms ease; }.status-pill.is-expiring { border-color: rgba(255, 193, 142, 0.48); color: #ffdbb8; background: rgba(217, 152, 109, 0.12); }.status-pill.is-expiring i { background: var(--copper); box-shadow: 0 0 10px var(--copper); }.status-pill.is-expired { border-color: rgba(244, 125, 125, 0.46); color: #ffc5c5; background: rgba(170, 54, 54, 0.12); }.status-pill.is-expired i { background: #f27d7d; box-shadow: 0 0 10px #f27d7d; }.model-count { color: #83a9ba; }
.key-info-list { margin: 24px 0 0; }.key-info-list div { display: grid; grid-template-columns: 145px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(160, 196, 211, 0.09); }.key-info-list div:last-child { border-bottom: 0; }.key-info-list dt { color: #7f9aa5; font-size: 0.73rem; }.key-info-list dd { margin: 0; color: #d9e7ea; font-size: 0.75rem; font-weight: 700; text-align: right; }.key-info-list dd > span { display: block; }.key-info-list div:first-child dd { font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.68rem; }.key-expiry-note { display: block; margin-top: 4px; color: #ffc18e; font-size: 0.66rem; font-weight: 700; }
.usage-progress { margin-top: 18px; }.usage-progress span, .usage-progress strong { color: #98b2bc; font-size: 0.7rem; }.usage-progress strong { color: #d4e8ed; }.progress-rail { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: rgba(3, 13, 19, 0.65); }.progress-rail i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--aqua)); box-shadow: 0 0 15px rgba(62, 206, 228, 0.55); transition: width 650ms cubic-bezier(.2,.8,.2,1); }
.models-list { display: grid; gap: 7px; margin: 21px 0 0; padding: 0; list-style: none; }.models-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 1px solid rgba(151, 192, 207, 0.1); border-radius: 10px; background: rgba(2, 13, 20, 0.25); color: #d1e1e6; font-size: 0.76rem; }.models-list li div { display: inline-flex; align-items: center; gap: 8px; }.models-list li i { width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 7px rgba(92, 226, 207, 0.8); }.models-list li span { color: #84a0aa; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.68rem; }

.insight-card { margin-top: 14px; padding: 21px 24px; border-radius: 17px; background: linear-gradient(105deg, rgba(20, 57, 69, 0.85), rgba(11, 31, 39, 0.82)); box-shadow: none; }.insight-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #88e8d7; background: rgba(72, 205, 180, 0.12); font-size: 1.1rem; }.insight-card > div:nth-child(2) { margin-right: auto; }.insight-card .eyebrow { margin-bottom: 5px; }.insight-card p:not(.eyebrow) { max-width: 550px; margin: 8px 0 0; color: #92aeb8; font-size: 0.77rem; line-height: 1.5; }.insight-stat { min-width: 135px; text-align: right; }.insight-stat strong, .insight-stat span { display: block; }.insight-stat strong { color: #b9eee5; font-size: 1.3rem; letter-spacing: -0.04em; }.insight-stat span { margin-top: 4px; color: #84a4ae; font-size: 0.65rem; }

.toast { position: fixed; z-index: 5; bottom: 22px; left: 50%; max-width: calc(100% - 32px); padding: 12px 16px; border: 1px solid rgba(111, 211, 249, 0.29); border-radius: 10px; color: #e3f5f8; background: rgba(8, 25, 36, 0.93); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.32); font-size: 0.76rem; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity 170ms ease, transform 170ms ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@keyframes dashboard-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 860px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); }.details-grid { grid-template-columns: 1fr; }.chart-topline { align-items: flex-start; flex-direction: column; }.chart-controls { width: 100%; justify-content: space-between; }.insight-card { align-items: flex-start; flex-wrap: wrap; }.insight-stat { margin-left: 62px; text-align: left; } }
@media (max-width: 620px) { .app-shell { width: min(100% - 24px, 100%); padding: 12px 0 32px; }.access-screen { min-height: calc(100vh - 44px); }.access-card { padding: 22px 18px; border-radius: 22px; }.secure-pill { display: none; }.access-copy { margin: 48px 0 29px; }.access-copy h1 { font-size: clamp(2.45rem, 12vw, 3.5rem); }.dashboard-header { align-items: flex-start; flex-wrap: wrap; }.header-actions { width: 100%; justify-content: flex-end; gap: 8px; }.updated-at { margin-right: auto; }.page-heading { align-items: flex-start; flex-direction: column; margin: 36px 0 21px; }.active-key-card { width: 100%; }.metrics-grid { grid-template-columns: 1fr; gap: 10px; }.metric-card { min-height: 130px; }.metric-card > strong { margin: 14px 0 6px; }.chart-card, .details-card { padding: 18px; }.chart-controls { align-items: flex-start; flex-direction: column; }.canvas-wrap { height: 255px; }.chart-legend { justify-content: flex-start; margin-top: 18px; }.key-info-list div { grid-template-columns: 1fr; gap: 4px; }.key-info-list dd { text-align: left; }.insight-card { gap: 13px; }.insight-card > div:nth-child(2) { flex-basis: calc(100% - 57px); }.insight-stat { width: 100%; margin-left: 57px; }.access-footer { margin-top: 23px; } }

/* KeyVault main-page composition */
body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 8% 3%, rgba(39, 121, 151, 0.2), transparent 28rem),
    radial-gradient(circle at 91% 92%, rgba(105, 59, 42, 0.14), transparent 32rem),
    linear-gradient(180deg, #071721 0%, #06121a 66%, #07131b 100%);
  content: "";
}

.app-shell {
  width: min(1120px, calc(100% - 40px));
  padding-top: 46px;
}

.access-card {
  min-height: 620px;
  padding: 38px 48px 42px;
  border: 1px solid rgba(179, 214, 225, 0.22);
  border-radius: 36px;
  background:
    linear-gradient(112deg, rgba(76, 48, 38, 0.38), transparent 36%),
    linear-gradient(180deg, rgba(13, 34, 47, 0.92), rgba(9, 27, 38, 0.96));
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.3);
}

.access-card::before {
  top: auto;
  right: -78px;
  bottom: 42px;
  width: 236px;
  height: 236px;
  border: 1px solid rgba(90, 199, 233, 0.15);
  border-radius: 28px;
  background: rgba(54, 134, 162, 0.15);
  box-shadow: -20px -24px 0 rgba(34, 72, 92, 0.12);
  transform: rotate(7deg);
}

.access-card::after {
  top: 114px;
  right: 72px;
  bottom: auto;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(223, 156, 108, 0.12);
  border-radius: 30px;
  background: rgba(159, 90, 57, 0.13);
  transform: rotate(-8deg);
}

.access-card .brand-line { justify-content: center; }
.access-card .brand { position: relative; z-index: 1; }
.access-card .brand-symbol {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  color: #f3f6f5;
  background: linear-gradient(145deg, #20242a, #10161b);
  box-shadow: 0 0 0 10px rgba(227, 165, 113, 0.09), 0 18px 34px rgba(0, 0, 0, 0.24);
  font-size: 1.08rem;
}
.access-card .brand strong { color: #b9eaf4; letter-spacing: 0.1em; }
.access-card .brand small { font-size: 0.55rem; }
.access-card .secure-pill { position: absolute; top: 39px; right: 42px; }

.access-card .access-copy {
  max-width: 570px;
  margin: 39px auto 29px;
  text-align: center;
}

.access-card .eyebrow { color: #95cfdd; }
.access-card h1 {
  color: #f5efe7;
  font-size: clamp(2.75rem, 6.2vw, 5.05rem);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.access-card .access-copy > p:last-child {
  max-width: 48ch;
  margin: 0 auto;
  color: #b2c0c4;
}

.access-card .key-form { position: relative; z-index: 1; margin: 0 auto; }
.access-card .key-form label { color: #d1d9d7; }
.access-card .key-input-wrap { border-radius: 13px; background: rgba(1, 13, 20, 0.58); }
.access-card .submit-key { border-radius: 13px; background: #6ec7e8; }
.access-card .access-footer { justify-content: center; }

.dashboard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(179, 214, 225, 0.22);
  border-radius: 36px;
  background:
    linear-gradient(112deg, rgba(77, 48, 38, 0.27), transparent 32%),
    linear-gradient(180deg, rgba(13, 34, 47, 0.92), rgba(9, 27, 38, 0.97));
  box-shadow: 0 38px 90px rgba(0, 0, 0, 0.3);
}

.dashboard::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.48;
  background-image: linear-gradient(rgba(137, 192, 211, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(137, 192, 211, 0.06) 1px, transparent 1px);
  background-position: center;
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, #000, transparent 92%);
  content: "";
}

.dashboard::after {
  position: absolute;
  z-index: -1;
  right: -92px;
  top: 118px;
  width: 242px;
  height: 242px;
  border: 1px solid rgba(86, 198, 231, 0.13);
  border-radius: 32px;
  background: rgba(47, 129, 157, 0.1);
  box-shadow: -24px 28px 0 rgba(147, 84, 52, 0.08);
  transform: rotate(8deg);
  content: "";
}

.dashboard > * { position: relative; z-index: 1; }

.dashboard-header {
  min-height: 62px;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-header .brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.dashboard-header .brand-symbol {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: #f3f6f5;
  background: linear-gradient(145deg, #20242a, #10161b);
  box-shadow: 0 0 0 8px rgba(227, 165, 113, 0.07);
}

.header-actions { margin-left: auto; }

.page-heading {
  align-items: center;
  flex-direction: column;
  margin: 28px 0 30px;
  text-align: center;
}

.page-heading h1 {
  color: #f5efe7;
  font-size: clamp(2.35rem, 4.7vw, 4rem);
  letter-spacing: -0.055em;
}

.active-key-card {
  min-width: 285px;
  border-radius: 13px;
  background: rgba(4, 18, 25, 0.55);
}

.metrics-grid { gap: 16px; }

.metric-card {
  min-height: 167px;
  padding: 22px;
  border-color: rgba(228, 240, 237, 0.15);
  border-radius: 24px;
  background: rgba(8, 23, 32, 0.68);
}

.metric-card::before {
  inset: 16px;
  width: auto;
  height: auto;
  border: 1px solid rgba(232, 244, 240, 0.08);
  border-radius: 18px;
  background: none;
  opacity: 1;
}

.metric-card::after {
  right: -32px;
  bottom: -32px;
  width: 154px;
  height: 154px;
  border-radius: 36px;
  background: currentColor;
  filter: blur(38px);
  opacity: 0.1;
  transform: rotate(18deg);
}

.metric-card.requests, .metric-card.balance {
  background: linear-gradient(145deg, rgba(82, 50, 38, 0.78), rgba(32, 29, 31, 0.84));
}

.metric-card.tokens, .metric-card.cache {
  background: linear-gradient(145deg, rgba(24, 67, 83, 0.78), rgba(20, 39, 48, 0.84));
}

.metric-card > strong { position: relative; z-index: 1; color: #f6efe7; }
.metric-card p, .metric-label, .metric-icon { position: relative; z-index: 1; }

.chart-card, .details-card, .insight-card {
  border-color: rgba(228, 240, 237, 0.15);
  border-radius: 24px;
  background: rgba(7, 23, 32, 0.68);
}

.models-list li { background: rgba(1, 14, 20, 0.36); }

@media (max-width: 760px) {
  .app-shell { width: min(100% - 24px, 100%); padding-top: 12px; }
  .access-card { min-height: auto; padding: 30px 19px 28px; border-radius: 25px; }
  .access-card .brand-line { justify-content: flex-start; }
  .access-card .brand { transform: scale(0.88); transform-origin: left center; }
  .access-card .secure-pill { display: none; }
  .access-card .access-copy { margin: 44px auto 30px; text-align: left; }
  .access-card h1 { font-size: clamp(2.6rem, 13vw, 3.75rem); }
  .access-card .access-copy > p:last-child { margin-left: 0; }
  .access-card .access-footer { justify-content: flex-start; }
  .dashboard { padding: 18px 12px 14px; border-radius: 25px; }
  .dashboard-header { min-height: 100px; padding: 0 6px; align-items: flex-end; }
  .dashboard-header .brand { top: 1px; left: 6px; transform: none; }
  .dashboard-header .brand-symbol { width: 43px; height: 43px; border-radius: 13px; }
  .dashboard-header .brand small { display: none; }
  .page-heading { align-items: flex-start; margin: 18px 6px 24px; text-align: left; }
  .active-key-card { width: 100%; }
  .metric-card { min-height: 142px; border-radius: 18px; }
  .chart-card, .details-card, .insight-card { border-radius: 18px; }
}

/* Apps section skin */
body {
  background: #080d14;
  font-family: "Space Grotesk", "Aptos", sans-serif;
}

body::before {
  background:
    radial-gradient(circle at 12% 2%, rgba(31, 103, 135, 0.23), transparent 28rem),
    radial-gradient(circle at 87% 84%, rgba(89, 62, 48, 0.11), transparent 30rem),
    #080d14;
}

h1, h2, .metric-card > strong, .insight-stat strong {
  font-family: "Unbounded", "Aptos Display", sans-serif;
}

.ambient, .grid-overlay { display: none; }

.app-shell {
  width: min(1180px, calc(100% - 40px));
  padding: 0 0 56px;
}

.site-navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  min-height: 66px;
  gap: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 13, 20, 0.76);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff4eb;
  text-decoration: none;
}

.nav-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #11171c;
  background: #ffaf70;
  font-family: "Unbounded", sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: -0.08em;
}

.nav-brand strong { font-size: 0.88rem; letter-spacing: 0.04em; }
.nav-links { display: flex; align-items: stretch; gap: 4px; align-self: stretch; }
.nav-links a, .nav-meta a, .nav-language {
  display: inline-flex;
  align-items: center;
  color: #9ba8b0;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a { position: relative; padding: 0 13px; }
.nav-links a:hover, .nav-links a.is-current { color: #fff4eb; }
.nav-links a.is-current::after { position: absolute; right: 13px; bottom: 0; left: 13px; height: 2px; border-radius: 2px 2px 0 0; background: #ffae70; content: ""; }
.nav-meta { display: flex; align-items: center; gap: 13px; margin-left: auto; }
.nav-language { min-width: 28px; justify-content: center; color: #fff4eb; font-size: 0.7rem; font-weight: 700; }
.nav-meta a { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #dfe6e7; }
.nav-meta a:hover { border-color: rgba(255, 175, 112, 0.42); color: #fff4eb; }

.access-screen {
  display: block;
  min-height: calc(100vh - 66px);
  padding: clamp(74px, 11vw, 132px) 0 80px;
}

.access-card {
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.access-card::before, .access-card::after, .access-card .brand-line { display: none; }
.access-card .access-copy { max-width: 920px; margin: 0 auto; text-align: center; }
.access-card .eyebrow { color: #ffb377; font-size: 0.75rem; letter-spacing: 0.08em; }
.access-card h1 {
  max-width: 900px;
  margin: 0 auto 22px;
  color: #fff4eb;
  font-size: clamp(2rem, 4.8vw, 3.84rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.06em;
}

.access-card h1::first-line { color: #fff4eb; }
.access-card .access-copy > p:last-child { max-width: 560px; color: #abb6bb; font-size: 1rem; line-height: 1.65; }

.access-highlights {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 29px 0 34px;
  padding: 0;
  color: #b9c5ca;
  list-style: none;
}

.access-highlights li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.83rem; }
.access-highlights span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #ffb377; background: rgba(255, 174, 112, 0.12); font-size: 0.83rem; }

.access-card .key-form { width: min(748px, 100%); max-width: none; }
.access-card .key-form label { display: none; }
.key-entry-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.access-card .key-input-wrap {
  min-height: 58px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.access-card .key-input-wrap:focus-within { border-color: rgba(255, 174, 112, 0.64); box-shadow: 0 0 0 4px rgba(255, 174, 112, 0.09); }
.access-card .key-input-wrap > svg { color: #ffb377; }
.access-card .key-input-wrap input { font-family: "Space Grotesk", sans-serif; font-size: 0.92rem; }
.access-card .key-input-wrap input::placeholder { color: #7d8b94; }
.paste-key {
  min-width: 103px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  color: #dfe5e6;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 160ms ease, background 160ms ease;
}

.paste-key:hover { border-color: rgba(255, 174, 112, 0.45); background: rgba(255, 174, 112, 0.12); }
.access-card .input-hint { margin-top: 10px; color: #72818b; }
.access-card .submit-key { width: 100%; min-height: 56px; margin-top: 4px; border: 1px solid rgba(255, 183, 122, 0.52); border-radius: 12px; color: #1d1410; background: linear-gradient(135deg, #ffb277, #ff934d); box-shadow: 0 16px 34px rgba(255, 122, 26, 0.16); }
.access-card .submit-key:hover { background: linear-gradient(135deg, #ffc296, #ffa566); }

.access-support {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  width: min(332px, 100%);
  min-height: 68px;
  margin: 43px auto 0;
  padding: 0 16px;
  border: 1px solid rgba(255, 188, 127, 0.2);
  border-radius: 999px;
  color: #f4e4d9;
  background: linear-gradient(rgba(255, 170, 103, 0.16), rgba(255, 170, 103, 0.06)), rgba(255, 255, 255, 0.03);
  box-shadow: 0 16px 34px rgba(255, 122, 26, 0.16);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.access-support::before { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: #ffb377; background: rgba(255, 180, 119, 0.12); content: "?"; font-family: "Unbounded", sans-serif; font-size: 0.74rem; }
.access-support span { color: #ffbd84; font-size: 1.2rem; }

.dashboard {
  padding: clamp(64px, 9vw, 110px) 0 54px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.dashboard::before, .dashboard::after { display: none; }
.dashboard-header { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.dashboard-header .brand { display: none; }
.header-actions { margin-left: auto; }
.outline-button { min-height: 39px; border-radius: 9px; font-family: "Space Grotesk", sans-serif; }

.page-heading { align-items: center; flex-direction: column; margin: 0 0 34px; text-align: center; }
.page-heading .eyebrow { color: #ffb377; }
.page-heading h1 { max-width: 900px; color: #fff4eb; font-size: clamp(2rem, 4.4vw, 3.48rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.06em; }
.active-key-card { min-width: 280px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; background: rgba(255, 255, 255, 0.045); }

.metrics-grid { gap: 13px; }
.metric-card {
  min-height: 165px;
  padding: 21px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.metric-card::before { top: 0; right: auto; bottom: auto; left: 21px; width: 32px; height: 2px; border: 0; border-radius: 0 0 2px 2px; background: currentColor; }
.metric-card::after { display: none; }
.metric-card.requests, .metric-card.tokens, .metric-card.cache, .metric-card.balance { background: rgba(255, 255, 255, 0.035); }
.metric-card.requests { color: #ffad71; }.metric-card.tokens { color: #7bbbe0; }.metric-card.cache { color: #78d6c4; }.metric-card.balance { color: #ffbe85; }
.metric-card > strong { color: #fff4eb; font-family: "Unbounded", sans-serif; font-size: 1.65rem; font-weight: 600; letter-spacing: -0.06em; }

.chart-card, .details-card, .insight-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.chart-topline h2, .section-card-heading h2, .insight-card h2 { font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.chart-topline .eyebrow, .section-card-heading .eyebrow, .insight-card .eyebrow { color: #ffb377; }
.series-switch button.is-active { color: #fff4eb; background: rgba(255, 174, 112, 0.14); }
.series-switch i { background: #7bbbe0; }.series-switch button[data-chart-mode="cost"] i { background: #ffad71; }
.series-switch button[data-chart-mode="combined"] i { background: linear-gradient(90deg, #7bbbe0 0 50%, #ffad71 50%); }
.models-list li { border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.insight-card { background: linear-gradient(135deg, rgba(255, 151, 81, 0.11), rgba(255, 255, 255, 0.035)); }
.insight-icon { color: #ffbd84; background: rgba(255, 174, 112, 0.12); }

/* Interactive usage controls and budget warning */
.chart-scope { margin: 7px 0 0; color: #8398a1; font-size: 0.68rem; }
.chart-controls { flex-wrap: wrap; justify-content: flex-end; }
.model-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px 0 11px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; color: #81949c; background: rgba(1, 12, 18, 0.34); font-family: "Space Grotesk", sans-serif; font-size: 0.67rem; cursor: pointer; }
.model-filter > span { color: #8ba0a9; }
.model-filter select { min-width: 123px; border: 0; outline: 0; color: #f1e6dc; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.model-filter option { color: #f5eee7; background: #111920; }

.spend-alert { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto 24px; align-items: center; gap: 17px; margin: 14px 0; padding: 17px 18px; overflow: hidden; border: 1px solid rgba(255, 174, 112, 0.3); border-radius: 18px; color: #f8eee7; background: linear-gradient(105deg, rgba(136, 69, 31, 0.33), rgba(38, 30, 29, 0.7) 48%, rgba(13, 27, 34, 0.62)); box-shadow: 0 15px 34px rgba(0, 0, 0, 0.16); }
.spend-alert::before { position: absolute; top: -45px; right: 18%; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 163, 92, 0.11); filter: blur(20px); content: ""; pointer-events: none; }
.spend-alert[data-level="attention"] { border-color: rgba(122, 187, 224, 0.28); background: linear-gradient(105deg, rgba(29, 81, 108, 0.36), rgba(20, 39, 48, 0.72) 52%, rgba(13, 27, 34, 0.62)); }
.spend-alert[data-level="attention"]::before { background: rgba(93, 183, 229, 0.1); }
.spend-alert-signal { position: relative; z-index: 1; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 197, 147, 0.42); border-radius: 13px; color: #ffcc9f; background: rgba(255, 154, 79, 0.12); box-shadow: inset 0 1px rgba(255, 239, 221, 0.08), 0 0 23px rgba(255, 151, 80, 0.14); font-family: "Unbounded", sans-serif; font-size: 1.02rem; font-weight: 700; }
.spend-alert[data-level="attention"] .spend-alert-signal { border-color: rgba(142, 205, 235, 0.36); color: #b9e3f5; background: rgba(83, 171, 218, 0.11); box-shadow: inset 0 1px rgba(231, 250, 255, 0.08), 0 0 23px rgba(83, 171, 218, 0.13); }
.spend-alert-copy, .spend-alert-stat, .spend-alert-action, .spend-alert-close { position: relative; z-index: 1; }
.spend-alert-copy .eyebrow { margin: 0 0 5px; color: #ffb77d; font-size: 0.62rem; }
.spend-alert[data-level="attention"] .spend-alert-copy .eyebrow { color: #91c9e4; }
.spend-alert-copy h2 { margin: 0; color: #fff4eb; font-family: "Space Grotesk", sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; }
.spend-alert-copy p:not(.eyebrow) { max-width: 510px; margin: 5px 0 0; color: #a6b4b5; font-size: 0.71rem; line-height: 1.5; }
.spend-alert-stat { min-width: 76px; padding-right: 2px; text-align: right; }
.spend-alert-stat strong, .spend-alert-stat span { display: block; }
.spend-alert-stat strong { color: #ffd1a9; font-family: "Unbounded", sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: -0.05em; }
.spend-alert-stat span { margin-top: 4px; color: #8e9da1; font-size: 0.59rem; white-space: nowrap; }
.spend-alert[data-level="attention"] .spend-alert-stat strong { color: #b9e3f5; }
.spend-alert-action { min-height: 34px; padding: 0 11px; border: 1px solid rgba(255, 192, 139, 0.27); border-radius: 8px; color: #fff2e7; background: rgba(255, 170, 104, 0.1); font-family: "Space Grotesk", sans-serif; font-size: 0.68rem; font-weight: 700; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.spend-alert-action span { margin-left: 5px; color: #ffbd84; font-size: 1rem; line-height: 0; }
.spend-alert-action:hover { border-color: rgba(255, 205, 164, 0.52); background: rgba(255, 170, 104, 0.18); transform: translateY(-1px); }
.spend-alert-close { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; color: #8f9fa3; background: transparent; font-size: 1.15rem; line-height: 1; transition: color 160ms ease, background 160ms ease; }
.spend-alert-close:hover { color: #f6eee7; background: rgba(255, 255, 255, 0.08); }
.dashboard:not([hidden]) .spend-alert:not([hidden]) { animation: spendAlertIn 0.55s cubic-bezier(0.2, 0.85, 0.25, 1) 130ms both; }

.models-list li { display: block; padding: 0; overflow: hidden; }
.models-list li > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 11px; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; transition: background 160ms ease, color 160ms ease; }
.models-list li > button:hover { background: rgba(255, 255, 255, 0.045); }
.models-list li.is-selected { border-color: rgba(255, 176, 113, 0.34); background: rgba(255, 166, 94, 0.09); box-shadow: inset 3px 0 #ffad71; }
.models-list li.is-selected > button { color: #fff4eb; }
.models-list li.is-selected i { background: #ffad71; box-shadow: 0 0 9px rgba(255, 173, 113, 0.74); }

@keyframes spendAlertIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .app-shell { width: min(100% - 24px, 100%); }
  .site-navbar { gap: 12px; min-height: 60px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0 7px; font-size: 0.74rem; }
  .nav-links a.is-current::after { right: 7px; left: 7px; }
  .nav-meta a { display: none; }
  .nav-brand strong { font-size: 0.74rem; }
  .access-screen { padding: 72px 0 60px; }
  .access-card .access-copy { text-align: left; }
  .access-card h1 { margin-left: 0; font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.34; }
  .access-card .access-copy > p:last-child { margin-left: 0; }
  .access-highlights { align-items: flex-start; flex-direction: column; gap: 12px; margin: 26px 0 29px; }
  .key-entry-row { grid-template-columns: 1fr; gap: 8px; }
  .paste-key { min-height: 48px; }
  .access-support { margin-left: 0; }
  .dashboard { padding: 56px 0 32px; }
  .header-actions { width: 100%; }
  .updated-at { margin-right: auto; }
  .page-heading { align-items: flex-start; margin-bottom: 26px; text-align: left; }
  .page-heading h1 { font-size: clamp(1.75rem, 7vw, 2.35rem); line-height: 1.36; }
  .active-key-card { width: 100%; }
  .chart-controls { width: 100%; justify-content: flex-start; }
  .model-filter { flex: 0 0 auto; width: 100%; min-height: 42px; justify-content: space-between; }
  .spend-alert { grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 12px; }
  .spend-alert-stat { grid-column: 2; padding: 0; text-align: left; }
  .spend-alert-action { grid-column: 2; justify-self: start; }
}

@media (max-width: 480px) {
  .series-switch { width: 100%; }
  .series-switch button { flex: 1; justify-content: center; }
  .model-filter { width: 100%; }
  .spend-alert { padding: 15px; }
  .spend-alert-copy p:not(.eyebrow) { font-size: 0.68rem; }
}

@keyframes showcaseContentIntro {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes showcaseDetailRise {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes buyLinkRise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The dashboard is embedded into the main KeyVault page after a key check.
   Keep the secure stats document isolated while removing every nested-page cue. */
html.is-embedded,
body.is-embedded {
  min-height: 0;
  background: transparent;
}

body.is-embedded {
  overflow: hidden;
}

body.is-embedded::before {
  display: none;
}

body.is-embedded .ambient,
body.is-embedded .grid-overlay,
body.is-embedded .site-navbar,
body.is-embedded .access-screen {
  display: none !important;
}

body.is-embedded .app-shell {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0 56px;
}

body.is-embedded .dashboard {
  padding: 0 0 42px;
}

body.is-embedded .dashboard-header {
  padding-top: 0;
}

/* The statistics document lives inside the KeyVault page.  Keep this inner
   surface dark even when the browser or a cached stylesheet prefers light UI. */
html.is-embedded {
  color-scheme: dark;
  background: transparent !important;
}

body.is-embedded {
  min-height: 0;
  color: #edf7f4;
  background: transparent !important;
}

body.is-embedded .app-shell {
  width: min(1180px, calc(100% - 36px));
  padding: 26px 0 54px;
}

body.is-embedded .dashboard {
  min-height: 0;
  padding: 42px 0 54px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.is-embedded .dashboard.is-exiting {
  pointer-events: none;
  animation: statsDashboardExit 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* The parent owns the screen-to-screen motion.  Keeping the iframe still
   avoids a second staggered animation and prevents text rasterisation jumps. */
body.is-embedded .dashboard,
body.is-embedded .dashboard:not([hidden]) .dashboard-header,
body.is-embedded .dashboard:not([hidden]) .page-heading,
body.is-embedded .dashboard:not([hidden]) .metric-card,
body.is-embedded .dashboard:not([hidden]) .chart-card,
body.is-embedded .dashboard:not([hidden]) .details-grid {
  animation: none;
}

@keyframes statsDashboardExit {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(-14px) scale(0.987); filter: blur(2px); }
}

body.is-embedded .dashboard-header {
  min-height: 44px;
  padding-bottom: 14px;
  border-bottom: 0;
}

body.is-embedded .page-heading h1,
body.is-embedded .metric-card > strong,
body.is-embedded .chart-topline h2,
body.is-embedded .section-card-heading h2,
body.is-embedded .insight-card h2 {
  color: #f1fbf6;
}

body.is-embedded .metric-card,
body.is-embedded .chart-card,
body.is-embedded .details-card,
body.is-embedded .insight-card {
  border-color: rgba(143, 218, 196, 0.14);
  background: linear-gradient(145deg, rgba(19, 47, 56, 0.9), rgba(8, 23, 32, 0.9));
}

body.is-embedded .metric-card.requests { color: #7be3bf; }
body.is-embedded .metric-card.tokens { color: #77c9ed; }
body.is-embedded .metric-card.cache { color: #9ee7c7; }
body.is-embedded .metric-card.balance { color: #ffc28a; }

@media (max-width: 620px) {
  body.is-embedded .app-shell {
    width: min(100% - 24px, 100%);
    padding: 14px 0 34px;
  }

  body.is-embedded .dashboard { padding: 30px 0 36px; }
}

.access-card .access-copy .eyebrow {
  animation: showcaseDetailRise 0.52s cubic-bezier(0.16, 0.9, 0.18, 1) both;
}

.access-card .access-copy h1 {
  animation: showcaseContentIntro 0.86s cubic-bezier(0.16, 0.9, 0.18, 1) 70ms both;
}

.access-card .access-copy > p:last-child {
  animation: showcaseDetailRise 0.62s cubic-bezier(0.2, 0.85, 0.25, 1) 170ms both;
}

.access-highlights {
  animation: showcaseDetailRise 0.62s cubic-bezier(0.2, 0.85, 0.25, 1) 250ms both;
}

.access-card .key-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 209px;
  width: min(980px, 100%);
  column-gap: 12px;
  animation: showcaseDetailRise 0.64s cubic-bezier(0.2, 0.85, 0.25, 1) 330ms both;
}

.key-entry-row { grid-column: 1; grid-row: 1; display: block; }
.access-card .key-input-wrap { position: relative; min-height: 57px; padding-right: 142px; border-radius: 18px; }
.access-card .peek-button { display: none; }
.access-card .paste-key {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 122px;
  min-height: 43px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 154, 77, 0.2), rgba(122, 227, 255, 0.09)), rgba(17, 26, 39, 0.94);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
  font-weight: 800;
}

.access-card .input-hint,
.access-card .input-error { grid-column: 1 / -1; grid-row: 2; }
.access-card .input-error { grid-row: 3; }
.access-card .submit-key {
  grid-column: 2;
  grid-row: 1;
  min-height: 57px;
  margin: 0;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #238cff, #52c7ff, #ffbf83);
  box-shadow: 0 18px 36px rgba(255, 122, 26, 0.22);
  font-size: 1rem;
}

.access-card .submit-key:hover {
  background: linear-gradient(135deg, #49a1ff, #6ed0ff, #ffd0a3);
  transform: translateY(-1px);
}

.access-support {
  animation: buyLinkRise 0.62s cubic-bezier(0.2, 0.85, 0.25, 1) 440ms both;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease, filter 0.22s ease;
}

.access-support:hover {
  border-color: rgba(255, 188, 127, 0.4);
  box-shadow: 0 20px 38px rgba(255, 122, 26, 0.22);
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.dashboard:not([hidden]) .dashboard-header { animation: showcaseDetailRise 0.5s cubic-bezier(0.2, 0.85, 0.25, 1) both; }
.dashboard:not([hidden]) .page-heading { animation: showcaseContentIntro 0.72s cubic-bezier(0.16, 0.9, 0.18, 1) 60ms both; }
.dashboard:not([hidden]) .chart-card { animation: showcaseDetailRise 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 200ms both; }
.dashboard:not([hidden]) .details-grid { animation: showcaseDetailRise 0.6s cubic-bezier(0.2, 0.85, 0.25, 1) 270ms both; }

@media (max-width: 760px) {
  .access-card .key-form { display: block; width: 100%; animation-delay: 280ms; }
  .access-card .key-input-wrap { padding-right: 142px; }
  .access-card .input-hint, .access-card .input-error { display: block; }
  .access-card .submit-key { width: 100%; min-height: 55px; margin-top: 10px; }
}

.canvas-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.canvas-wrap canvas {
  cursor: crosshair;
  touch-action: pan-y;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  top: 26px;
  min-width: 138px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  color: #f6f7fb;
  background: rgba(13, 21, 30, 0.95);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  line-height: 1.55;
  pointer-events: none;
  transform: translateX(-50%);
}

.chart-tooltip strong, .chart-tooltip span { display: block; }
.chart-tooltip strong { margin-bottom: 4px; color: #fff4eb; font-size: 0.73rem; }
.chart-tooltip span { color: #abb7bc; white-space: nowrap; }
.chart-tooltip i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }

/* Periods use one compact control so switching the chart never shifts the layout. */
.period-switch {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 3px;
  gap: 3px;
  border: 1px solid rgba(141, 216, 192, 0.16);
  border-radius: 11px;
  background: rgba(7, 18, 26, 0.52);
}

.period-switch button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: #8ea5ae;
  background: transparent;
  font: 700 0.68rem/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.period-switch button:hover { color: #d8f6eb; background: rgba(124, 225, 185, 0.09); }
.period-switch button:focus-visible { outline: 2px solid #8fdbc4; outline-offset: 2px; }
.period-switch button.is-active,
.period-switch button[aria-pressed="true"] {
  color: #e4fff5;
  background: linear-gradient(135deg, rgba(72, 202, 155, 0.30), rgba(67, 161, 202, 0.20));
  box-shadow: inset 0 0 0 1px rgba(133, 237, 197, 0.18), 0 4px 12px rgba(10, 73, 61, 0.18);
}

.chart-card[data-stats-state="loading"] .canvas-wrap,
.chart-card[data-stats-state="refreshing"] .canvas-wrap {
  opacity: 0.72;
  transition: opacity 150ms ease;
}

.chart-refresh-state {
  position: absolute;
  top: 14px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(134, 230, 196, 0.2);
  border-radius: 9px;
  color: #c8f5e3;
  background: rgba(8, 29, 33, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font: 700 0.66rem/1 "Space Grotesk", sans-serif;
  pointer-events: none;
}

.chart-refresh-state i {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(154, 244, 205, 0.3);
  border-top-color: #a3f4d0;
  border-radius: 50%;
  animation: codex-refresh-spin .72s linear infinite;
}

/* Each metric uses a real inline SVG anchored to the same top-right baseline. */
.metric-icon {
  position: absolute;
  top: 17px;
  right: 18px;
  bottom: auto;
  left: auto;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  border-radius: 11px;
  color: currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  opacity: 0.95;
}

.metric-icon::after { display: none; }

.metric-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.9;
}

.outline-button#refresh-button svg { transform-origin: center; transition: transform 180ms ease; }
.outline-button#refresh-button.is-refreshing svg { animation: codex-refresh-spin .78s linear infinite; }
.outline-button#refresh-button.is-complete { border-color: rgba(113, 229, 180, 0.5); color: #b9f4d5; background: rgba(78, 209, 151, 0.12); }

@keyframes codex-refresh-spin { to { transform: rotate(360deg); } }

.active-key-card button {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #a7c6cf;
  background: transparent;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.active-key-card button:hover { color: #e8faf3; background: rgba(143, 218, 196, 0.12); }
.active-key-card button:focus-visible { outline: 2px solid #8fdbc4; outline-offset: 2px; }
.active-key-card button svg { position: absolute; width: 17px; height: 17px; transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.9,.2,1); }
.active-key-card button .copy-key-check { color: #8fdbc4; opacity: 0; transform: scale(.55); }
.active-key-card button.is-copied { color: #8fdbc4; background: rgba(72, 206, 153, 0.13); transform: scale(.94); }
.active-key-card button.is-copied .copy-key-icon { opacity: 0; transform: scale(.55) rotate(-12deg); }
.active-key-card button.is-copied .copy-key-check { opacity: 1; transform: scale(1); }

.active-key-card {
  position: relative;
  padding-right: 92px;
}

.active-key-card__actions {
  position: absolute;
  right: 8px;
  bottom: 7px;
  display: flex;
  gap: 2px;
}

.active-key-card__actions button {
  float: none;
  margin-top: 0;
}

.key-visibility-on { opacity: 0; transform: scale(.55) rotate(-12deg); }
.key-visibility-button.is-revealed .key-visibility-off { opacity: 0; transform: scale(.55) rotate(12deg); }
.key-visibility-button.is-revealed .key-visibility-on { opacity: 1; transform: scale(1); }
.active-key-card strong {
  position: relative;
  display: block;
  min-height: 1.35em;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.active-key-value__current,
.active-key-value__next {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.active-key-value__sizer {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 1.35em;
  visibility: hidden;
  pointer-events: none;
  overflow-wrap: anywhere;
}

.active-key-value__next {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.active-key-value__current.is-key-text-leaving {
  animation: active-key-text-leave 120ms ease-out both;
}

.active-key-value__next.is-key-text-typing {
  animation: active-key-text-type 240ms steps(var(--key-type-steps, 20), end) both;
}

.active-key-value__next.is-key-text-untyping {
  animation: active-key-text-untype 240ms steps(var(--key-type-steps, 20), end) both;
}

@keyframes active-key-text-leave {
  to {
    opacity: 0;
    filter: blur(0.8px);
    transform: translateY(-1px);
  }
}

/* One model picker replaces the browser select and the old duplicate chip row.
   It keeps the control compact while exposing the real model names and usage. */
.model-filter {
  position: relative;
  isolation: isolate;
  display: inline-flex !important;
  align-items: center;
  min-height: 36px;
  gap: 7px;
  padding: 4px 6px 4px 11px;
  border: 1px solid rgba(146, 208, 214, .18);
  border-radius: 11px;
  background: rgba(5, 18, 26, .56);
}

.model-filter__label {
  flex: 0 0 auto;
  color: #8eaab4;
  font-size: .76rem;
  font-weight: 700;
}

.model-filter__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 132px;
  min-height: 34px;
  padding: 0 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f0fff8;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.model-filter__trigger:hover,
.model-filter.is-open .model-filter__trigger {
  color: #baffdf;
  background: rgba(102, 230, 184, .08);
}

.model-filter__trigger:focus-visible,
.model-filter__option:focus-visible {
  outline: 2px solid #73e6bc;
  outline-offset: 2px;
}

.model-filter__chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

.model-filter.is-open .model-filter__chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.model-filter__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.model-filter__menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  width: min(308px, calc(100vw - 34px));
  max-height: 272px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid rgba(118, 223, 185, .3);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(18, 43, 48, .98), rgba(7, 20, 28, .99));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(209, 255, 236, .06);
  opacity: 0;
  transform: translate3d(0, -5px, 0);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.model-filter__menu.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* The picker belongs to its trigger, not to the chart. Keeping its own
   positioned region prevents graph labels from leaking through or receiving
   accidental wheel input while the model list is open. */
.model-filter__region {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  right: 0;
  width: min(308px, calc(100vw - 34px));
  pointer-events: none;
}

.model-filter__region.is-open {
  pointer-events: auto;
}

.model-filter__region .model-filter__menu {
  position: static !important;
  top: auto;
  right: auto;
  width: 100%;
  max-height: min(272px, calc(100dvh - 180px));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  isolation: isolate;
  background: #071920;
}

.model-filter__region.is-open .model-filter__menu {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.model-filter__option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #d9ece6;
  font: inherit;
  font-size: .79rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.model-filter__option small {
  align-self: center;
  color: #829ba6;
  font-size: .7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.model-filter__option:hover {
  border-color: rgba(118, 232, 190, .18);
  background: rgba(118, 232, 190, .09);
  color: #f3fffa;
}

.model-filter__option:active { transform: translateY(1px); }

.model-filter__option.is-selected {
  background: linear-gradient(90deg, rgba(69, 192, 143, .24), rgba(80, 211, 225, .1));
  color: #caffdf;
}

.model-filter__option.is-selected::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-right: 10px;
  border-radius: 50%;
  background: #7af0bf;
  box-shadow: 0 0 0 4px rgba(122, 240, 191, .12);
  content: "";
}

/* The help dialog should never resize the page or animate a scaled backdrop.
   Only its own surface fades and moves a few pixels in the fixed viewport. */
.stats-instruction-backdrop {
  backdrop-filter: none !important;
  transition: opacity 160ms ease !important;
}

.stats-instruction-panel {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  right: auto !important;
  width: min(1160px, calc(100vw - 28px)) !important;
  height: min(920px, calc(100dvh - 28px)) !important;
  max-height: calc(100dvh - 28px) !important;
  transform: translate3d(-50%, calc(-50% + 8px), 0) !important;
  transition: opacity 160ms ease, transform 160ms ease !important;
  will-change: opacity, transform;
  contain: layout paint style;
}

.stats-instruction-panel.is-open {
  transform: translate3d(-50%, -50%, 0) !important;
}

.stats-instruction-panel__body {
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
}

.stats-instruction-panel.is-open.is-entering [data-guide-step].animate__animated {
  animation: none !important;
}

@media (max-width: 620px) {
  .model-filter {
    width: 100%;
    justify-content: space-between;
  }

  .model-filter__trigger { flex: 1 1 auto; }
  .model-filter__menu { left: 0; right: auto; width: 100%; }
  .model-filter__region { left: 0; right: auto; width: 100%; }
  .stats-instruction-panel {
    width: calc(100vw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .model-filter__trigger,
  .model-filter__chevron,
  .model-filter__menu,
  .model-filter__option,
  .stats-instruction-backdrop,
  .stats-instruction-panel { transition: none !important; }
}

/* Final motion pass: keep the guide anchored to the viewport and animate only
   its surface. Animating every step forced unnecessary painting while scrolling. */
.stats-instruction-backdrop {
  opacity: 0;
  background: rgba(2, 10, 16, .66);
  backdrop-filter: none;
  transition: opacity 180ms ease;
  will-change: opacity;
}

.stats-instruction-backdrop.is-open {
  opacity: 1;
}

.stats-instruction-panel {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 8px), 0);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    visibility 0s linear 180ms;
  will-change: opacity, transform;
  contain: layout paint style;
}

.stats-instruction-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(.2, .8, .2, 1),
    visibility 0s;
}

.stats-instruction-panel__body {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.stats-instruction-panel.is-open.is-entering [data-guide-step].animate__animated {
  animation: none !important;
}

.stats-guide-copy {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.stats-guide-copy::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 22%, rgba(222, 255, 239, .38) 50%, transparent 78%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-120%);
}

.stats-guide-copy.is-copied {
  animation: stats-guide-copy-confirm 520ms cubic-bezier(.2, .8, .2, 1);
}

.stats-guide-copy.is-copied::after {
  opacity: 1;
  animation: stats-guide-copy-sheen 520ms ease-out both;
}

@keyframes stats-guide-copy-confirm {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-2px) scale(1.025); }
}

@keyframes stats-guide-copy-sheen {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

.model-price-guide__list li {
  transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 170ms ease;
}

@media (hover: hover) {
  .model-price-guide__list li:hover {
    border-color: rgba(127, 242, 195, .42);
    background: rgba(41, 122, 98, .16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14);
    transform: translateY(-2px);
  }

  .chart-controls button:hover,
  .model-filter:hover,
  .toggle-control:hover {
    border-color: rgba(113, 229, 193, .5);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .14);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-instruction-backdrop,
  .stats-instruction-panel,
  .stats-guide-copy,
  .model-price-guide__list li,
  .chart-controls button,
  .model-filter,
  .toggle-control {
    transition: none !important;
  }

  .stats-guide-copy.is-copied,
  .stats-guide-copy.is-copied::after {
    animation: none !important;
  }
}

@keyframes active-key-text-type {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes active-key-text-untype {
  0% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    transform: translateX(-2px);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

.active-key-card.is-key-size-animating {
  will-change: width, height;
}

.active-key-card.is-key-size-fallback {
  transition: width .6s cubic-bezier(.65, 0, .35, 1), height .6s cubic-bezier(.65, 0, .35, 1);
}

@media (prefers-reduced-motion: reduce) {
  .active-key-card, .active-key-card button, .active-key-card button svg { transition: none; }
}

/* A filter changes several related values at once.  Briefly soften the old
   state first, then settle the updated cards so the change remains readable. */
.metrics-grid,
.chart-card,
.details-grid,
.spend-alert {
  transition: opacity 140ms ease-out, transform 140ms ease-out, filter 140ms ease-out;
}

.metrics-grid.is-data-changing,
.chart-card.is-data-changing,
.details-grid.is-data-changing,
.spend-alert.is-data-changing {
  filter: saturate(0.78) blur(0.25px);
  opacity: 0.42;
  transform: translateY(4px);
}

.metrics-grid.is-data-settling,
.chart-card.is-data-settling,
.details-grid.is-data-settling,
.spend-alert.is-data-settling {
  animation: codex-data-settle 300ms cubic-bezier(0.16, 0.9, 0.18, 1) both;
}

@keyframes codex-data-settle {
  0% { filter: saturate(0.78) blur(0.25px); opacity: 0.42; transform: translateY(4px); }
  72% { filter: saturate(1.03); opacity: 1; transform: translateY(-1px); }
  100% { filter: saturate(1); opacity: 1; transform: translateY(0); }
}

/* The model select previously inherited a vertical flex-basis on phones,
   leaving an empty panel before the chart. */
@media (max-width: 620px) {
  body.is-embedded .dashboard { padding-top: 22px; }

  body.is-embedded .dashboard-header {
    min-height: 0;
    padding-bottom: 8px;
  }

  body.is-embedded .metrics-grid { gap: 10px; }

  body.is-embedded .metric-card {
    min-height: 126px;
    padding: 16px;
  }

  body.is-embedded .chart-card {
    margin-top: 10px;
    padding: 16px;
  }

  body.is-embedded .chart-controls {
    gap: 10px;
  }

  body.is-embedded .period-switch {
    width: 100%;
    justify-content: stretch;
  }

  body.is-embedded .period-switch button { flex: 1 1 0; }

  body.is-embedded .model-filter {
    flex: 0 0 auto;
    min-height: 46px;
  }

  body.is-embedded .model-filter select {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }

  body.is-embedded .toggle-control {
    min-height: 40px;
  }

  body.is-embedded .chart-legend {
    margin: 14px 0 1px;
  }

  body.is-embedded .canvas-wrap { height: 230px; }
  body.is-embedded .details-grid { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .metrics-grid,
  .chart-card,
  .details-grid,
  .spend-alert { transition: none; }

  .metrics-grid.is-data-settling,
  .chart-card.is-data-settling,
  .details-grid.is-data-settling,
  .spend-alert.is-data-settling { animation: none; }

  .chart-refresh-state i { animation: none; }
}

/* The embedded dashboard must inherit the public page background instead of
   painting a second rectangular surface around the statistics. */
html.is-embedded,
body.is-embedded,
body.is-embedded .app-shell,
body.is-embedded .dashboard {
  background: transparent !important;
}

/* Stable chart geometry: hourly/daily labels may change, but the controls
   and plot must occupy the same boxes so the dashboard does not jump. */
.chart-topline {
  min-height: 76px;
  align-items: flex-start;
}

.chart-topline > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.chart-controls {
  flex: 0 0 auto;
  min-width: 0;
  align-items: center;
}

.period-switch {
  flex: 0 0 auto;
}

.period-switch button[data-stats-mode] {
  min-width: 74px;
}

.chart-scope {
  min-height: 1.45em;
}

.chart-legend {
  min-height: 18px;
}

.canvas-wrap,
.chart-card[data-chart-mode="combined"] .canvas-wrap,
[data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
  height: 340px;
  min-height: 340px;
  contain: layout paint;
}

body.is-embedded .canvas-wrap,
body.is-embedded .chart-card[data-chart-mode="combined"] .canvas-wrap,
body.is-embedded [data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
  height: 300px;
  min-height: 300px;
}

@media (max-width: 860px) {
  .chart-topline {
    min-height: 0;
  }

  .chart-controls {
    min-height: 132px;
  }
}

@media (max-width: 620px) {
  .chart-controls {
    min-height: 0;
  }

  .canvas-wrap,
  .chart-card[data-chart-mode="combined"] .canvas-wrap,
  [data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
    height: 255px;
    min-height: 255px;
  }

  body.is-embedded .canvas-wrap,
  body.is-embedded .chart-card[data-chart-mode="combined"] .canvas-wrap,
  body.is-embedded [data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
    height: 255px;
    min-height: 255px;
  }
}

.metric-card > strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  transform-origin: left center;
}

.metric-card > strong.is-value-updating {
  animation: balance-value-update 420ms cubic-bezier(.18,.86,.24,1);
}

@keyframes balance-value-update {
  0% { opacity: .56; transform: translateY(3px) scale(.985); }
  70% { opacity: 1; transform: translateY(-1px) scale(1.012); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

[data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
  min-height: 280px;
}

@media (max-width: 620px) {
  [data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
    min-height: 248px;
  }
}

/* Walkthrough polish: screenshots are the proof of every step, not tiny
   decoration beside a large empty card. Keep the dialog fixed to the viewport
   and let every image use the entire readable column. */
.stats-instruction-panel {
  width: min(1500px, calc(100vw - 24px));
  height: min(1000px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}

.stats-instruction-panel__body {
  scroll-behavior: smooth;
}

.stats-instruction-step__content {
  display: block;
}

.stats-instruction-step__copy {
  max-width: 920px;
  margin-bottom: 18px;
}

.stats-guide-code-row,
.stats-guide-code-stack,
.stats-guide-note {
  max-width: 1120px;
  margin: 0 0 14px;
}

.stats-guide-media,
.stats-guide-media-pair {
  width: 100%;
  margin-top: 24px;
}

.stats-guide-media-pair {
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.stats-guide-media-pair figure {
  width: 100%;
}

.stats-guide-media img,
.stats-guide-media-pair img {
  width: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 14px;
  border-color: rgba(164, 230, 215, .28);
  background: #06131a;
  box-shadow: 0 20px 46px rgba(0, 0, 0, .26);
}

@media (max-width: 900px) {
  .stats-instruction-panel {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
    max-height: calc(100dvh - 14px);
  }

  .stats-instruction-step__copy,
  .stats-guide-code-row,
  .stats-guide-code-stack,
  .stats-guide-note {
    max-width: none;
  }
}

/* Final guide pass: screenshots are the primary content, not thumbnails in cards. */
html.is-embedded,
body.is-embedded {
  background: transparent !important;
}

.metric-topup-action {
  position: absolute;
  right: 18px;
  bottom: 16px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 193, 142, .34);
  border-radius: 9px;
  color: #ffe0c5;
  background: rgba(217, 152, 109, .1);
  font-size: .68rem;
  font-weight: 700;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.metric-topup-action:hover {
  border-color: rgba(255, 209, 169, .72);
  background: rgba(217, 152, 109, .2);
  transform: translateY(-1px);
}

.stats-instruction-panel {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 80;
  width: min(1500px, calc(100vw - 28px));
  height: min(960px, calc(100dvh - 28px));
  transform: translate(-50%, -50%);
}

.stats-instruction-step__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.stats-instruction-step__copy {
  max-width: 76ch;
}

.stats-guide-media,
.stats-guide-media-pair {
  width: min(100%, 1250px);
  margin-inline: auto;
}

.stats-guide-media-pair {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.stats-guide-media img,
.stats-guide-media-pair img {
  width: 100%;
  max-height: min(780px, calc(100dvh - 190px));
  border-color: rgba(151, 226, 202, .28);
  border-radius: 14px;
  background: rgba(3, 12, 17, .32);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .24);
}

@media (max-width: 760px) {
  .metric-topup-action { right: 13px; bottom: 12px; }
  .stats-instruction-panel { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
  .stats-guide-media img,
  .stats-guide-media-pair img { max-height: min(620px, calc(100dvh - 230px)); }
}

@media (prefers-reduced-motion: reduce) {
  .metric-card > strong.is-value-updating { animation: none; }
}

/* Final embedded composition: the public page owns the background and the
   dashboard itself stays a single clean surface without nested frames. */
body.is-embedded .app-shell {
  width: min(1180px, calc(100% - 32px));
  padding: 28px 0 46px;
}

body.is-embedded .dashboard {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

body.is-embedded .dashboard-header {
  padding: 0 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.is-embedded .brand { display: none; }
body.is-embedded .header-actions { margin-left: auto; }

.dashboard.is-entering { animation: stats-dashboard-enter 420ms cubic-bezier(.18,.88,.24,1) both; }
.access-screen.is-leaving { animation: stats-access-leave 180ms ease both; }
.access-screen.is-returning { animation: stats-access-return 260ms cubic-bezier(.18,.88,.24,1) both; }

@keyframes stats-dashboard-enter {
  from { opacity: 0; transform: translateY(12px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stats-access-leave {
  to { opacity: 0; transform: translateY(-8px) scale(.994); }
}
@keyframes stats-access-return {
  from { opacity: 0; transform: translateY(10px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dashboard .page-heading {
  align-items: center;
  margin: 22px 0 26px;
}

.dashboard .page-heading h1 {
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  line-height: 1.04;
}

.dashboard .eyebrow,
.metric-label,
.key-info-list dt,
.model-filter > span {
  font-size: .78rem;
  letter-spacing: .075em;
}

.dashboard .updated-at,
.dashboard .outline-button,
.dashboard .exit-button,
.dashboard .chart-scope,
.dashboard .metric-card p,
.dashboard .key-info-list dd,
.dashboard .models-list,
.dashboard .usage-progress {
  font-size: .9rem;
}

.metrics-grid { gap: 14px; }
.metric-card {
  min-height: 164px;
  padding: 22px;
  border-color: rgba(105, 214, 187, .2);
  background: linear-gradient(145deg, rgba(10, 36, 41, .96), rgba(7, 22, 32, .96));
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.metric-card:hover {
  border-color: rgba(128, 238, 201, .48);
  background: linear-gradient(145deg, rgba(16, 51, 55, .98), rgba(8, 28, 39, .98));
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22), 0 0 0 1px rgba(100, 229, 185, .06);
  transform: translateY(-3px);
}

.metric-card > strong {
  margin: 18px 0 8px;
  font-size: clamp(1.75rem, 3vw, 2.3rem);
}

.metric-card p { color: #a7bdc4; line-height: 1.45; }
.metric-icon { top: auto; right: 20px; bottom: 19px; }

.chart-card,
.details-card {
  border-color: rgba(105, 214, 187, .2);
  background: linear-gradient(145deg, rgba(9, 35, 40, .96), rgba(6, 20, 30, .97));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.chart-card { padding: 26px; }
.chart-topline h2,
.section-card-heading h2 { font-size: clamp(1.15rem, 2vw, 1.42rem); }
.chart-scope { margin: .45rem 0 0; color: #9db4bc; line-height: 1.45; }
.canvas-wrap { height: 340px; margin-top: 12px; }
.usage-chart { width: 100%; height: 100%; }
.chart-tooltip { display: none !important; }

/* Both series share one plot. The script reserves an upper visual band for
   cost, so the summary stays compact without curves lying on top of each other. */
.chart-card[data-chart-mode="combined"] .canvas-wrap { height: 340px; }

.model-filter { transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.model-filter.is-changing { border-color: rgba(111, 230, 193, .62); box-shadow: 0 0 0 4px rgba(81, 220, 180, .08); animation: modelFilterPulse 260ms cubic-bezier(.2,.8,.2,1); }
.models-list li.is-coming-soon { border-color: rgba(155, 170, 177, .2); background: repeating-linear-gradient(-45deg, rgba(130, 146, 152, .055) 0 8px, rgba(8, 20, 25, .16) 8px 16px); opacity: .72; }
.models-list li.is-coming-soon > button { cursor: not-allowed; }
.models-list li.is-coming-soon em { margin-left: 8px; padding: 3px 7px; border: 1px solid rgba(183, 196, 199, .3); border-radius: 99px; color: #c6d1d3; font-style: normal; font-size: .67rem; font-weight: 700; white-space: nowrap; }
@keyframes modelFilterPulse { 50% { transform: translateY(-1px); } }

@media (max-width: 620px) {
  .chart-card[data-chart-mode="combined"] .canvas-wrap { height: 310px; }
}

.outline-button,
.exit-button {
  min-height: 42px;
  font-size: .9rem;
  font-weight: 700;
}

.stats-beta-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 14px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 184, 105, .28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(83, 55, 27, .42), rgba(13, 31, 36, .86));
}

.stats-beta-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 204, 129, .28);
  border-radius: 13px;
  color: #ffe2b3;
  background: rgba(255, 181, 99, .12);
  font-family: "Unbounded", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.stats-beta-card h2 { margin: 0; color: #fff1db; font-size: 1.08rem; }
.stats-beta-card p:last-child { max-width: 68ch; margin: .42rem 0 0; color: #d8c8b3; font-size: .92rem; line-height: 1.55; }
.stats-beta-card .eyebrow { margin-bottom: .35rem; color: #ffc47d; }

.stats-instruction-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(2, 10, 16, .62);
  opacity: 0;
  transition: opacity 200ms ease;
}

.stats-instruction-backdrop.is-open { opacity: 1; }

.stats-instruction-panel {
  position: fixed;
  z-index: 31;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(480px, 100vw);
  height: 100dvh;
  overflow: hidden;
  border-left: 1px solid rgba(130, 230, 192, .26);
  color: #edf9f2;
  background: linear-gradient(160deg, #102b31, #07161f 62%);
  box-shadow: -30px 0 72px rgba(0, 0, 0, .32);
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 230ms ease, transform 260ms cubic-bezier(.18,.88,.22,1);
}

.stats-instruction-panel.is-open { opacity: 1; transform: translateX(0); }
.stats-instruction-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 20px;
  border-bottom: 1px solid rgba(167, 224, 211, .12);
}
.stats-instruction-panel__header h2 { margin: 0; font-size: 1.35rem; }
.stats-instruction-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(238, 251, 246, .13);
  border-radius: 12px;
  color: #e6f4ef;
  background: rgba(255,255,255,.04);
  font-size: 1.45rem;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease;
}
.stats-instruction-close:hover { background: rgba(120, 230, 185, .12); transform: rotate(90deg); }
.stats-instruction-panel__body { overflow: auto; padding: 24px 26px 32px; }
.stats-instruction-panel__lead { margin: 0; color: #b8cbc4; font-size: .98rem; line-height: 1.6; }
.stats-instruction-steps { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.stats-instruction-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; padding: 15px; border: 1px solid rgba(149, 225, 195, .14); border-radius: 15px; background: rgba(5, 18, 25, .45); }
.stats-instruction-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: #0b2a25; background: linear-gradient(135deg, #91e9be, #8be2dc); font-weight: 800; }
.stats-instruction-steps strong { font-size: .98rem; }
.stats-instruction-steps p { margin: .35rem 0 0; color: #aac1b9; font-size: .9rem; line-height: 1.5; }

@media (max-width: 620px) {
  body.is-embedded .app-shell { width: min(100% - 24px, 100%); padding: 18px 0 32px; }
  .dashboard .header-actions { width: 100%; justify-content: flex-end; }
  .dashboard .updated-at { display: none; }
  .dashboard .page-heading { margin: 12px 0 20px; }
  .dashboard .page-heading h1 { font-size: clamp(1.85rem, 10vw, 2.45rem); }
  .metric-card { min-height: 138px; padding: 18px; }
  .metric-card > strong { font-size: 2rem; }
  .chart-card { padding: 18px; }
  .canvas-wrap { height: 260px; }
  .stats-beta-card { padding: 17px; }
  .stats-instruction-panel__header, .stats-instruction-panel__body { padding-left: 18px; padding-right: 18px; }
}

/* Final consistency pass: compact information is still readable at the
   size of a customer-facing dashboard, including on dense laptop screens. */
body.is-embedded .app-shell,
body.is-embedded .dashboard {
  background: transparent !important;
}

body.is-embedded .metric-label,
body.is-embedded .dashboard .eyebrow,
body.is-embedded .key-info-list dt,
body.is-embedded .model-filter > span {
  font-size: .82rem;
  letter-spacing: .07em;
}

body.is-embedded .metric-card p,
body.is-embedded .dashboard .chart-scope,
body.is-embedded .dashboard .updated-at,
body.is-embedded .key-info-list dd,
body.is-embedded .models-list,
body.is-embedded .usage-progress,
body.is-embedded .outline-button,
body.is-embedded .exit-button {
  font-size: .94rem;
}

body.is-embedded .chart-legend,
body.is-embedded .period-switch button,
body.is-embedded .series-switch button,
body.is-embedded .model-filter,
body.is-embedded .toggle-control {
  font-size: .88rem;
}

/* The instruction opens as the same focused dialog pattern used by account
   details: a centered, layered card instead of a second independent page. */
.stats-instruction-panel {
  top: 50%;
  right: 50%;
  width: min(720px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 36px));
  border: 1px solid rgba(155, 231, 204, .24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 8%, rgba(102, 228, 181, .13), transparent 29%),
    linear-gradient(150deg, rgba(20, 46, 52, .98), rgba(7, 18, 28, .99));
  box-shadow: 0 32px 96px rgba(0, 0, 0, .54), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translate(50%, calc(-50% + 22px)) scale(.985);
}

.stats-instruction-panel.is-open {
  transform: translate(50%, -50%) scale(1);
}

.stats-instruction-panel__header {
  padding: 26px 30px 21px;
  background: linear-gradient(90deg, rgba(113, 224, 184, .07), transparent 62%);
}

.stats-instruction-panel__header h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
.stats-instruction-panel__body { padding: 24px 30px 30px; }
.stats-instruction-panel__lead { font-size: 1rem; }
.stats-instruction-steps li { padding: 17px; border-radius: 17px; }
.stats-instruction-steps strong { font-size: 1rem; }
.stats-instruction-steps p { font-size: .94rem; }

@media (max-width: 620px) {
  .stats-instruction-panel {
    width: min(100vw - 20px, 720px);
    height: min(100dvh - 20px, 760px);
    border-radius: 22px;
  }
  .stats-instruction-panel__header,
  .stats-instruction-panel__body { padding-left: 20px; padding-right: 20px; }
  .stats-instruction-panel__lead { font-size: .96rem; }
  .stats-instruction-steps p { font-size: .9rem; }
}

/* One customer-facing type scale keeps dense statistics readable without
   switching between tiny helper copy and oversized controls. */
body.is-embedded .dashboard-header .updated-at,
body.is-embedded .dashboard-header .exit-button,
body.is-embedded .dashboard-header .outline-button,
body.is-embedded .chart-scope,
body.is-embedded .chart-legend,
body.is-embedded .period-switch button,
body.is-embedded .series-switch button,
body.is-embedded .model-filter,
body.is-embedded .toggle-control {
  font-size: .92rem;
}

body.is-embedded .metric-label,
body.is-embedded .dashboard .eyebrow,
body.is-embedded .key-info-list dt,
body.is-embedded .model-filter > span {
  font-size: .84rem;
}

body.is-embedded .metric-card p,
body.is-embedded .key-info-list dd,
body.is-embedded .models-list,
body.is-embedded .usage-progress {
  font-size: .95rem;
}

/* In the iframe the parent page owns the backdrop.  The dashboard must not
   paint a second rectangular page behind its cards. */
html.is-embedded,
body.is-embedded,
body.is-embedded .app-shell,
body.is-embedded .dashboard {
  background-color: transparent !important;
  background-image: none !important;
}

body.is-embedded .app-shell {
  width: min(1180px, calc(100% - 48px));
}

body.is-embedded .dashboard {
  padding-bottom: 48px;
}

/* The parent page prepares the iframe before it becomes visible.  Keeping the
   child in the same motion sequence removes the abrupt second page entrance. */
body.is-embedded .dashboard {
  transition: opacity 420ms cubic-bezier(.16,.86,.2,1), transform 420ms cubic-bezier(.16,.86,.2,1);
}
body.is-embedded .dashboard.is-awaiting-parent {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
body.is-embedded .dashboard.is-entering {
  animation: stats-dashboard-enter 460ms cubic-bezier(.16,.86,.2,1) both;
  will-change: opacity, transform;
}

.metric-card {
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.metric-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 232, 201, .3);
  background: linear-gradient(145deg, rgba(24, 58, 65, .95), rgba(8, 25, 33, .96));
  box-shadow: 0 18px 34px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(224, 255, 246, .08);
}

.metric-card:hover .metric-icon { transform: translateY(-2px) scale(1.06); }
.metric-icon { transition: transform 220ms ease; }

/* Keep customer-facing figures strong without making the dashboard feel
   oversized next to the main KeyVault games and services screens. */
body.is-embedded .metric-card > strong { font-size: clamp(1.45rem, 2.7vw, 1.9rem); }

/* A real help dialog: generous media, four scan-friendly steps and a calm
   reading width instead of the former compact text-only list. */
.stats-instruction-panel { width: min(980px, calc(100vw - 36px)); height: min(900px, calc(100dvh - 34px)); }
.stats-instruction-panel__body { padding: 26px 30px 34px; }
.stats-instruction-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stats-instruction-steps li { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px; }
.stats-instruction-steps li > span { width: 38px; height: 38px; border-radius: 12px; }
.stats-instruction-steps strong { display: block; font-size: 1.02rem; line-height: 1.3; }
.stats-instruction-steps p { margin-top: .45rem; font-size: .95rem; }
.stats-instruction-steps img {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  min-height: 142px;
  max-height: 246px;
  margin-top: 4px;
  border: 1px solid rgba(147, 228, 200, .18);
  border-radius: 13px;
  object-fit: cover;
  object-position: center top;
  background: #07151e;
}

@media (max-width: 620px) {
  body.is-embedded .app-shell { width: min(100% - 24px, 100%); }
  body.is-embedded .dashboard-header .outline-button,
  body.is-embedded .dashboard-header .exit-button,
  body.is-embedded .chart-scope,
  body.is-embedded .chart-legend,
  body.is-embedded .period-switch button,
  body.is-embedded .series-switch button,
  body.is-embedded .model-filter,
  body.is-embedded .toggle-control { font-size: .88rem; }
  body.is-embedded .metric-card p,
  body.is-embedded .key-info-list dd,
  body.is-embedded .models-list,
  body.is-embedded .usage-progress { font-size: .91rem; }
  .stats-instruction-panel { width: min(100vw - 18px, 980px); height: min(100dvh - 18px, 900px); }
  .stats-instruction-panel__body { padding: 20px 18px 26px; }
  .stats-instruction-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .stats-instruction-steps li { padding: 15px; }
  .stats-instruction-steps img { min-height: 126px; max-height: 212px; }
}

/* The public page provides the backdrop for the embedded statistics. Remove
   inherited decorative layers so the iframe cannot form a tinted rectangle. */
body.is-embedded::before,
body.is-embedded::after,
body.is-embedded .ambient,
body.is-embedded .grid-overlay {
  display: none !important;
}

/* Keep the figures strong, but one step below the previous oversized scale. */
body.is-embedded .metric-card > strong {
  font-size: clamp(1.38rem, 2.35vw, 1.78rem);
}

/* The guide is an actual visual walkthrough rather than a compact note. */
.stats-instruction-panel {
  width: min(1060px, calc(100vw - 30px));
  height: min(940px, calc(100dvh - 28px));
}

.stats-instruction-steps {
  gap: 18px;
}

.stats-instruction-steps li {
  padding: 20px;
}

.stats-instruction-steps img {
  min-height: 188px;
  max-height: 318px;
  object-fit: contain;
  object-position: center;
  background: #06141d;
}

@media (max-width: 620px) {
  .stats-instruction-panel { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .stats-instruction-steps img { min-height: 154px; max-height: 240px; }
}

/* Final public dashboard pass: the cumulative label is not a second switch,
   and the guide is a centred, scrollable walkthrough rather than a drawer. */
.toggle-control > span:first-of-type {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 30px;
  border-radius: 99px;
  background: #263e4b;
}
.toggle-control > span:first-of-type::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #8ca4ae;
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}
.toggle-control input:checked + span:first-of-type { background: #277ca2; }
.toggle-control input:checked + span:first-of-type::after { background: #e5f9ff; transform: translateX(13px); }
.toggle-control > span:last-child {
  position: static;
  width: auto;
  height: auto;
  color: #b9cbd1;
  background: transparent;
  line-height: 1;
}
.toggle-control > span:last-child::after { content: none; }

.dashboard-header { display: none; }
.dashboard .page-heading {
  display: block;
  margin: 42px 0 30px;
  text-align: center;
}
.dashboard .page-heading > div:first-child { display: grid; justify-items: center; }
.key-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.key-actions-row .header-actions {
  width: auto;
  margin: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.key-actions-row .updated-at { margin: 0; white-space: nowrap; }

.stats-instruction-panel {
  position: fixed;
  top: 50%;
  right: auto;
  left: 50%;
  z-index: 31;
  width: min(940px, calc(100vw - 32px));
  height: min(880px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  border: 1px solid rgba(130, 230, 192, .26);
  border-radius: 22px;
  box-shadow: 0 28px 86px rgba(0, 0, 0, .52);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -47%) scale(.985);
  transition: opacity 190ms ease, transform 240ms cubic-bezier(.18,.88,.22,1);
}
.stats-instruction-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.stats-instruction-panel__header { padding: 24px 28px 18px; }
.stats-instruction-panel__body { overflow: auto; padding: 22px 28px 30px; overscroll-behavior: contain; }
.stats-instruction-steps { display: grid; grid-template-columns: 1fr; gap: 13px; margin-top: 20px; }
.stats-instruction-steps li {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 17px;
}
.stats-instruction-steps li > span { width: 40px; height: 40px; }
.stats-instruction-steps img {
  grid-column: 2;
  width: min(100%, 720px);
  min-height: 0;
  max-height: 290px;
  margin: 3px 0 0;
  border-radius: 13px;
  object-fit: contain;
  object-position: center;
  background: #07151e;
}

/* Parent and iframe animate only once each: a fade for the shell and a calm
   inner rise. Two simultaneous transforms were causing the visible jerk. */
body.is-embedded .dashboard.is-awaiting-parent {
  opacity: 0;
  transform: none;
}
body.is-embedded .dashboard.is-entering {
  animation: stats-dashboard-fade-in 360ms ease-out both;
  will-change: opacity;
}

@keyframes stats-dashboard-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 820px) {
  .key-actions-row { flex-wrap: wrap; }
  .key-actions-row .header-actions { justify-content: center; }
  .stats-instruction-panel { width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); }
  .stats-instruction-panel__header, .stats-instruction-panel__body { padding-inline: 20px; }
  .stats-instruction-steps img { grid-column: 1 / -1; width: 100%; max-height: 240px; }
}

@media (max-width: 560px) {
  .dashboard .page-heading { margin-top: 24px; }
  .key-actions-row .active-key-card { width: min(100%, 300px); }
  .key-actions-row .header-actions { width: 100%; gap: 8px; }
  .key-actions-row .updated-at { width: 100%; text-align: center; }
  .stats-instruction-panel__header { padding: 18px 18px 14px; }
  .stats-instruction-panel__body { padding: 16px 18px 22px; }
  .stats-instruction-steps li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .stats-instruction-steps li > span { width: 36px; height: 36px; }
}

/* The chart line owns the data motion. This softens control changes without
   flashing or shifting the whole dashboard card. */
.chart-card.is-chart-transitioning .canvas-wrap {
  animation: stats-chart-control-swap 300ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes stats-chart-control-swap {
  from { opacity: .7; }
  to { opacity: 1; }
}

/* Keep compact controls legible without making the statistics visually heavy. */
body.is-embedded .chart-card .chart-scope,
body.is-embedded .chart-card .chart-legend,
body.is-embedded .chart-card .period-switch button,
body.is-embedded .chart-card .series-switch button,
body.is-embedded .chart-card .model-filter,
body.is-embedded .chart-card .toggle-control {
  font-size: .84rem;
}

body.is-embedded .metric-label { font-size: .74rem; }
body.is-embedded .metric-card > strong { font-size: clamp(1.28rem, 2vw, 1.6rem); }
body.is-embedded .metric-card p { font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .chart-card.is-chart-transitioning .canvas-wrap { animation: none; }
}

/* The embedded dashboard uses the same dark surface as its parent from the
   first frame. This prevents a white flash while the iframe initializes. */
html.is-embedded,
body.is-embedded {
  background: #06131a !important;
}

body.is-embedded::before,
body.is-embedded::after {
  display: none !important;
}

body.is-embedded .app-shell,
body.is-embedded .dashboard {
  background: transparent !important;
}

.model-price-guide,
.topup-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid rgba(124, 229, 188, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(20, 69, 66, .36), rgba(8, 22, 32, .42));
}

.model-price-guide__heading,
.topup-form__heading {
  display: grid;
  gap: 4px;
}

.model-price-guide__heading strong,
.topup-form__heading strong {
  color: #ecfff5;
  font-size: .94rem;
}

.model-price-guide__heading span,
.topup-form__heading span,
.topup-form__feedback {
  color: #9db7bc;
  font-size: .82rem;
  line-height: 1.45;
}

.model-price-guide__provider {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid rgba(100, 204, 255, .34);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(18, 76, 94, .62), rgba(20, 105, 78, .36));
  box-shadow: inset 0 1px 0 rgba(222, 255, 244, .08);
  color: #b5f4dd;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.2;
}

.model-price-guide__provider-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(119, 228, 192, .24));
}

.model-price-guide__provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.model-price-guide__switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: auto;
}

.model-price-guide__switcher button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(124, 229, 188, .2);
  border-radius: 999px;
  background: rgba(4, 17, 27, .4);
  color: #a9c5c5;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
}

.model-price-guide__switcher button.is-selected {
  border-color: rgba(124, 229, 188, .5);
  background: rgba(43, 137, 104, .3);
  color: #d8ffeb;
}

.model-price-guide__switcher button:disabled {
  cursor: not-allowed;
}

.model-price-guide__switcher button.is-coming-soon:disabled {
  border-color: rgba(123, 151, 163, .28);
  background: repeating-linear-gradient(-45deg, rgba(83, 109, 121, .22) 0 6px, rgba(17, 34, 45, .55) 6px 12px);
  color: #b2c0c8;
  opacity: .84;
}

.model-price-guide__provider-mark {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 5px;
  object-fit: contain;
}

.model-price-guide__provider-mark--openai {
  background: rgba(112, 238, 194, .2);
  color: #baffdf;
}

.model-price-guide__provider-mark--claude {
  background: rgba(143, 160, 171, .18);
  color: #cad6db;
}

.model-price-guide__switcher em {
  margin-left: 4px;
  color: #f0be86;
  font-size: .68rem;
  font-style: normal;
}

.model-price-guide__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-price-guide__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(159, 218, 207, .13);
  border-radius: 11px;
  background: rgba(4, 17, 27, .34);
  color: #c9e2df;
  font-size: .78rem;
}

.model-price-guide__list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-price-guide__list strong {
  flex: 0 0 auto;
  color: #8cecc5;
  font-family: "Space Grotesk", sans-serif;
  font-size: .82rem;
}

.topup-form {
  border-color: rgba(102, 197, 255, .25);
  background: linear-gradient(145deg, rgba(12, 49, 66, .46), rgba(7, 22, 34, .5));
}

.topup-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.topup-form input {
  min-width: 0;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(155, 210, 225, .22);
  border-radius: 12px;
  outline: none;
  color: #ebfff8;
  background: rgba(4, 16, 27, .6);
  font: 600 .88rem/1.2 "Space Grotesk", sans-serif;
}

.topup-form input:focus {
  border-color: rgba(108, 225, 187, .72);
  box-shadow: 0 0 0 3px rgba(91, 214, 178, .12);
}

.topup-form button {
  min-height: 44px;
  width: 220px;
  min-width: 220px;
  padding: 0 16px;
  border: 1px solid rgba(123, 236, 196, .48);
  border-radius: 12px;
  color: #052017;
  background: linear-gradient(135deg, #71e9bd, #bcebc1);
  font: 700 .84rem/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), filter .28s ease;
}

.topup-submit__label {
  display: inline-block;
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1), filter .28s ease;
}

.topup-submit__label.is-changing {
  opacity: 0;
  filter: blur(2px);
  transform: translateY(4px);
}

.topup-form button.is-label-changing {
  filter: brightness(.98);
}

@media (prefers-reduced-motion: reduce) {
  .topup-submit__label,
  .topup-form button { transition: none; }
}

.topup-form button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.topup-form button:disabled { cursor: wait; opacity: .62; }
.topup-form__feedback { min-height: 1.2em; margin: 0; }
.topup-form__feedback[data-level="success"] { color: #8cecc5; }
.topup-form__feedback[data-level="error"] { color: #ffb0a6; }

@media (max-width: 620px) {
  .model-price-guide__provider-row { align-items: flex-start; flex-direction: column; }
  .model-price-guide__switcher { margin-left: 0; }
  .model-price-guide__list { grid-template-columns: 1fr; }
  .topup-form__row { grid-template-columns: 1fr; }
  .topup-form button { width: 100%; }
}

/* Codex connection guide: local Animate.css is used for a short, staggered reveal. */
.stats-instruction-panel {
  top: 50%;
  right: auto;
  left: 50%;
  width: min(1040px, calc(100vw - 32px));
  height: min(860px, calc(100dvh - 32px));
  border: 1px solid rgba(130, 230, 192, .28);
  border-radius: 26px;
  background:
    radial-gradient(circle at 84% 8%, rgba(92, 225, 186, .13), transparent 26%),
    linear-gradient(155deg, #102b31, #07161f 58%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(232, 255, 247, .08);
  transform: translate(104%, -50%);
}

.stats-instruction-panel.is-open { transform: translate(-50%, -50%); }
.stats-instruction-panel__header { padding: 22px 24px 18px; }
.stats-instruction-panel__header h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.stats-instruction-panel__body { padding: 20px 24px 26px; scrollbar-gutter: stable; }

.stats-guide-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(146, 232, 201, .15);
  border-radius: 16px;
  background: rgba(4, 20, 27, .42);
}

.stats-instruction-panel__lead {
  max-width: 66ch;
  color: #c6d9d2;
  font-size: .96rem;
  line-height: 1.56;
}

.stats-guide-intro__badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(125, 235, 189, .27);
  border-radius: 999px;
  color: #b9f6d5;
  background: rgba(55, 188, 136, .1);
  font-size: .76rem;
  font-weight: 800;
}

.stats-instruction-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin-top: 16px;
}

.stats-instruction-steps .stats-instruction-step {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-color: rgba(149, 225, 195, .16);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(10, 31, 38, .72), rgba(5, 18, 25, .48));
  box-shadow: inset 0 1px 0 rgba(235, 255, 248, .035);
}

.stats-instruction-step__number {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #0b2a25;
  background: linear-gradient(135deg, #91e9be, #8be2dc);
  font-size: .92rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.stats-instruction-step__content { display: grid; min-width: 0; gap: 11px; }
.stats-instruction-step__copy { display: grid; gap: 4px; }
.stats-instruction-step__copy strong { color: #f3fff9; font-size: .98rem; line-height: 1.28; }
.stats-instruction-step__copy p { margin: 0; color: #b3c9c1; font-size: .88rem; line-height: 1.52; }

.stats-guide-code {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  overflow-wrap: anywhere;
  border: 1px solid rgba(139, 234, 199, .16);
  border-radius: 11px;
  color: #c7f9df;
  background: rgba(2, 14, 20, .64);
  font: 600 .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.stats-guide-note {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 177, 103, .75);
  color: #d7c4b2;
  font-size: .8rem;
  line-height: 1.45;
}

.stats-guide-media,
.stats-guide-media-pair,
.stats-guide-media-pair figure {
  min-width: 0;
  margin: 0;
}

.stats-guide-media,
.stats-guide-media-pair figure {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(151, 216, 204, .17);
  border-radius: 12px;
  background: #06131a;
}

.stats-guide-media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stats-guide-media img,
.stats-guide-media-pair img {
  display: block;
  width: 100%;
  max-height: 228px;
  object-fit: contain;
  object-position: top center;
  background: #06131a;
}

.stats-guide-restore {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 184, 110, .24);
  border-radius: 16px;
  background: linear-gradient(115deg, rgba(113, 69, 30, .18), rgba(12, 28, 31, .35));
}

.stats-guide-restore strong { color: #ffe0bb; font-size: .93rem; }
.stats-guide-restore p { margin: 0; color: #cfc4b7; font-size: .86rem; line-height: 1.5; }

.stats-instruction-panel.is-open.is-entering [data-guide-step].animate__animated {
  --animate-duration: .32s;
  animation-delay: calc(var(--guide-step-index) * 42ms);
}

@media (max-width: 780px) {
  .stats-instruction-panel {
    width: min(680px, calc(100vw - 20px));
    height: min(900px, calc(100dvh - 20px));
    border-radius: 21px;
  }
  .stats-instruction-steps { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stats-instruction-panel { width: 100vw; height: 100dvh; border-right: 0; border-left: 0; border-radius: 0; }
  .stats-instruction-panel__header { padding: 18px 16px 15px; }
  .stats-instruction-panel__body { padding: 15px 16px 24px; }
  .stats-guide-intro { display: grid; gap: 10px; }
  .stats-guide-intro__badge { width: fit-content; }
  .stats-guide-media-pair { grid-template-columns: 1fr; }
  .stats-guide-media img, .stats-guide-media-pair img { max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-instruction-panel,
  .stats-instruction-panel.is-open.is-entering [data-guide-step].animate__animated { transition: none; animation: none; }
}

/* Connection guide: one centred walkthrough with room for each screenshot. */
.stats-instruction-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1160px, calc(100vw - 40px));
  height: min(920px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 4%, rgba(110, 237, 191, .12), transparent 26%),
    linear-gradient(150deg, #102d32 0%, #081820 58%, #061119 100%);
}

.stats-instruction-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 34px 20px;
  border-bottom: 1px solid rgba(159, 232, 205, .14);
}

.stats-instruction-panel__header h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  letter-spacing: -.035em;
}

.stats-instruction-panel__body {
  min-height: 0;
  padding: 26px 34px 34px;
  scroll-snap-type: y proximity;
}

.stats-guide-intro {
  align-items: center;
  padding: 16px 18px;
  border-color: rgba(153, 233, 204, .12);
  border-radius: 18px;
  background: rgba(4, 19, 26, .32);
}

.stats-instruction-panel__lead {
  max-width: 78ch;
  font-size: 1.02rem;
  line-height: 1.62;
}

.stats-guide-intro__badge {
  min-height: 36px;
  padding-inline: 14px;
  font-size: .84rem;
}

.stats-instruction-steps {
  display: block;
  margin: 24px 0 0;
}

.stats-instruction-steps .stats-instruction-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  padding: 28px 2px;
  scroll-snap-align: start;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(159, 232, 205, .13);
  background: none;
  box-shadow: none;
}

.stats-instruction-steps .stats-instruction-step:last-child { border-bottom: 0; }

.stats-instruction-step__number {
  position: sticky;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  font-size: 1rem;
  box-shadow: 0 10px 24px rgba(44, 186, 137, .15);
}

.stats-instruction-step__content {
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr);
  grid-template-areas:
    "copy media"
    "code media"
    "note media";
  align-items: start;
  column-gap: 26px;
  row-gap: 14px;
}

.stats-instruction-step__copy { grid-area: copy; gap: 7px; padding-top: 4px; }
.stats-instruction-step__copy strong { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.22; }
.stats-instruction-step__copy p { font-size: 1rem; line-height: 1.62; }
.stats-instruction-step__content > .stats-guide-code { grid-area: code; align-self: start; }
.stats-instruction-step__content > .stats-guide-note { grid-area: note; }
.stats-instruction-step__content > .stats-guide-media,
.stats-instruction-step__content > .stats-guide-media-pair { grid-area: media; }

.stats-guide-code {
  padding: 12px 14px;
  border-radius: 13px;
  font-size: .88rem;
  line-height: 1.65;
}

.stats-guide-note {
  padding: 10px 0 10px 13px;
  font-size: .92rem;
  line-height: 1.55;
}

.stats-guide-media,
.stats-guide-media-pair figure {
  border-color: rgba(151, 226, 202, .2);
  border-radius: 16px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .2);
}

.stats-guide-media img,
.stats-guide-media-pair img {
  max-height: 390px;
  min-height: 180px;
  object-fit: contain;
  object-position: center;
}

.stats-guide-media-pair { gap: 12px; }

.stats-guide-restore {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 18px;
}

.stats-guide-restore strong { font-size: 1rem; }
.stats-guide-restore p { font-size: .95rem; line-height: 1.58; }

@media (max-width: 840px) {
  .stats-instruction-panel {
    width: min(760px, calc(100vw - 22px));
    height: min(940px, calc(100dvh - 22px));
    max-height: calc(100dvh - 22px);
  }
  .stats-instruction-panel__header { padding: 21px 22px 18px; }
  .stats-instruction-panel__body { padding: 20px 22px 28px; }
  .stats-instruction-step__content {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "code" "note" "media";
    gap: 13px;
  }
  .stats-guide-media img,
  .stats-guide-media-pair img { max-height: 360px; }
}

@media (max-width: 560px) {
  .stats-instruction-panel {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 22px;
  }
  .stats-instruction-panel__header { padding: 18px 18px 15px; }
  .stats-instruction-panel__header h2 { font-size: 1.35rem; }
  .stats-instruction-panel__body { padding: 17px 18px 24px; }
  .stats-guide-intro { display: grid; gap: 11px; padding: 14px; }
  .stats-instruction-panel__lead { font-size: .96rem; }
  .stats-instruction-steps .stats-instruction-step {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    padding-block: 22px;
  }
  .stats-instruction-step__number { width: 40px; height: 40px; border-radius: 13px; }
  .stats-instruction-step__copy strong { font-size: 1.05rem; }
  .stats-instruction-step__copy p { font-size: .95rem; }
  .stats-guide-media-pair { grid-template-columns: 1fr; }
  .stats-guide-media img,
  .stats-guide-media-pair img { max-height: 290px; min-height: 130px; }
}

/* Final walkthrough pass: the dialog is anchored to the viewport, while the
   screenshots carry the visual weight instead of decorative picture frames. */
html.is-embedded,
body.is-embedded {
  background: transparent !important;
}

.stats-instruction-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.stats-instruction-panel {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  width: min(1420px, calc(100vw - 32px));
  height: min(960px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  transform: translate(-50%, calc(-50% + 18px)) scale(.985);
  background:
    radial-gradient(circle at 90% 5%, rgba(109, 235, 190, .13), transparent 29%),
    linear-gradient(150deg, #102d32 0%, #081820 58%, #061119 100%);
}

.stats-instruction-panel.is-open {
  transform: translate(-50%, -50%) scale(1);
}

.stats-instruction-step__content {
  grid-template-columns: minmax(230px, .52fr) minmax(0, 1.48fr);
  column-gap: 30px;
}

.stats-guide-code-stack {
  grid-area: code;
  display: grid;
  gap: 10px;
}

.stats-guide-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
}

.stats-guide-code-row .stats-guide-code {
  margin: 0;
  min-width: 0;
}

.stats-guide-copy {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(132, 239, 197, .27);
  border-radius: 13px;
  background: rgba(50, 151, 116, .12);
  color: #d5fff0;
  font: inherit;
  font-size: .88rem;
  font-weight: 760;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.stats-guide-copy:hover,
.stats-guide-copy:focus-visible {
  border-color: rgba(150, 255, 213, .58);
  background: rgba(64, 185, 140, .22);
  transform: translateY(-1px);
  outline: none;
}

.stats-guide-copy.is-copied {
  border-color: rgba(103, 224, 165, .85);
  background: rgba(50, 185, 125, .35);
}

.stats-guide-copy svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.stats-guide-media,
.stats-guide-media-pair figure {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 18px;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

.stats-guide-media img,
.stats-guide-media-pair img {
  display: block;
  width: 100%;
  min-height: 0;
  max-height: min(680px, calc(100dvh - 260px));
  border: 1px solid rgba(151, 226, 202, .22);
  border-radius: 16px;
  background: #06131a;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
  object-fit: contain;
}

.stats-guide-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 840px) {
  .stats-instruction-panel {
    width: min(980px, calc(100vw - 20px));
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .stats-instruction-step__content {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "code" "note" "media";
  }

  .stats-guide-media img,
  .stats-guide-media-pair img { max-height: min(580px, calc(100dvh - 230px)); }
}

@media (max-width: 560px) {
  .stats-instruction-panel {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 20px;
  }

  .stats-guide-code-row { grid-template-columns: 1fr; }
  .stats-guide-copy { width: 100%; }
  .stats-guide-media-pair { grid-template-columns: 1fr; }
  .stats-guide-media img,
  .stats-guide-media-pair img { max-height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-guide-copy { transition: none; }
}

/* The instruction is a walkthrough, not a thumbnail gallery. Keep the copy
   compact and let screenshots use the majority of the viewport. */
.stats-instruction-panel {
  width: min(1460px, calc(100vw - 28px));
  height: min(980px, calc(100dvh - 28px));
  max-width: none;
  max-height: none;
}

.stats-instruction-panel__body {
  padding: 28px clamp(20px, 3vw, 44px) 42px;
}

.stats-instruction-step__content {
  grid-template-columns: minmax(210px, 0.36fr) minmax(0, 1.64fr);
  column-gap: clamp(24px, 3vw, 46px);
}

.stats-instruction-step__copy {
  align-self: start;
}

.stats-guide-media,
.stats-guide-media-pair {
  margin: 0;
}

.stats-guide-media,
.stats-guide-media-pair figure {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.stats-guide-media img,
.stats-guide-media-pair img {
  display: block;
  width: 100%;
  max-height: min(720px, calc(100dvh - 190px));
  object-fit: contain;
  object-position: center;
  border: 1px solid rgba(142, 207, 193, 0.22);
  border-radius: 13px;
  background: transparent;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.stats-guide-media-pair {
  /* Setup screenshots are full-size steps, not gallery thumbnails. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 34px);
}

/* Walkthrough screenshots are individual full-size steps, not gallery tiles. */
.stats-instruction-step__content > .stats-guide-media,
.stats-instruction-step__content > .stats-guide-media-pair {
  width: min(100%, 1260px);
  margin-inline: auto;
}

.stats-instruction-step__content > .stats-guide-media-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 38px);
}

.stats-instruction-step__content .stats-guide-media,
.stats-instruction-step__content .stats-guide-media-pair figure {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.stats-instruction-step__content .stats-guide-media img,
.stats-instruction-step__content .stats-guide-media-pair img {
  display: block;
  width: 100%;
  max-height: min(820px, calc(100dvh - 150px));
  min-height: 0;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

.stats-guide-code-row {
  min-height: 48px;
}

.stats-guide-code {
  font-size: clamp(0.78rem, 1vw, 0.98rem);
}

@media (max-width: 900px) {
  .stats-instruction-panel {
    width: min(100vw - 20px, 860px);
    height: min(940px, calc(100dvh - 20px));
  }

  .stats-instruction-step__content {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .stats-guide-media img,
  .stats-guide-media-pair img {
    max-height: min(630px, calc(100dvh - 250px));
  }
}

@media (max-width: 620px) {
  .stats-instruction-panel {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px);
  }

  .stats-instruction-panel__body {
    padding: 18px 14px 30px;
  }

  .stats-guide-media-pair {
    grid-template-columns: 1fr;
  }

  .stats-guide-media img,
  .stats-guide-media-pair img {
    max-height: min(500px, calc(100dvh - 270px));
  }
}

/* Keep every walkthrough step in one readable column. Earlier rules made the
   explanatory copy, long URLs and screenshots compete for the same grid. */
.stats-instruction-step__content {
  display: block !important;
  min-width: 0;
}

.stats-instruction-step__copy {
  max-width: 880px;
  margin: 0 0 18px;
}

.stats-guide-code-stack,
.stats-instruction-step__content > .stats-guide-code-row,
.stats-instruction-step__content > .stats-guide-note,
.stats-instruction-step__content > .stats-guide-media,
.stats-instruction-step__content > .stats-guide-media-pair {
  width: min(100%, 1180px);
  margin: 0 auto 20px;
}

.stats-guide-code-stack {
  display: grid;
  gap: 12px;
}

.stats-guide-code-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  min-height: 54px;
}

.stats-guide-code,
.stats-guide-code pre,
.stats-guide-code code {
  min-width: 0;
  flex: 1 1 auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stats-guide-copy {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 148px;
}

.stats-instruction-step__content .stats-guide-media,
.stats-instruction-step__content .stats-guide-media-pair {
  display: block;
  max-width: 1180px;
}

.stats-instruction-step__content .stats-guide-media-pair figure {
  width: 100%;
  margin: 0 0 24px;
}

.stats-instruction-step__content .stats-guide-media-pair figure:last-child {
  margin-bottom: 0;
}

.stats-instruction-step__content .stats-guide-media img,
.stats-instruction-step__content .stats-guide-media-pair img {
  width: 100%;
  max-width: 1180px;
  max-height: none;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

@media (max-width: 700px) {
  .stats-guide-code-row {
    flex-direction: column;
  }

  .stats-guide-copy {
    min-height: 46px;
    align-self: auto;
  }

  .stats-instruction-step__content > .stats-guide-media,
  .stats-instruction-step__content > .stats-guide-media-pair,
  .stats-guide-code-stack,
  .stats-instruction-step__content > .stats-guide-code-row,
  .stats-instruction-step__content > .stats-guide-note {
    width: 100%;
  }
}

/* Final guide layout: one calm reading column, media reserved for the task it
   explains, and paired screenshots kept comparable instead of oversized. */
.stats-instruction-panel {
  width: min(1080px, calc(100vw - 28px));
  height: min(900px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  display: flex;
  flex-direction: column;
}

.stats-instruction-panel__header { flex: 0 0 auto; }

.stats-instruction-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px clamp(20px, 3vw, 36px) 36px;
}

.stats-instruction-step__content > .stats-guide-media,
.stats-instruction-step__content > .stats-guide-media-pair,
.stats-instruction-step__content > .stats-guide-code-row,
.stats-instruction-step__content > .stats-guide-code-stack,
.stats-instruction-step__content > .stats-guide-note {
  width: min(100%, 760px);
  margin-inline: auto;
}

.stats-guide-media,
.stats-guide-media-pair,
.stats-guide-media-pair figure {
  overflow: hidden !important;
  border: 1px solid rgba(121, 236, 201, .18) !important;
  border-radius: 14px !important;
  background: rgba(3, 18, 25, .72) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .2) !important;
}

.stats-guide-media { margin-block: 18px; }
.stats-guide-media--open-config { max-width: 660px; }
.stats-guide-media--config-path { max-width: 560px; }
.stats-guide-media--login { max-width: 460px; }

.stats-guide-media img,
.stats-guide-media-pair img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px !important;
  object-fit: contain;
  object-position: center;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.stats-guide-media-pair {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.stats-guide-media-pair figure {
  display: grid;
  place-items: center;
  width: auto !important;
  aspect-ratio: 16 / 10;
  margin: 0 !important;
}

.stats-guide-media-pair img {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: contain;
}

.stats-guide-media-pair--compact { max-width: 640px; }
.stats-guide-media-pair--compact figure { aspect-ratio: 4 / 3; }
.stats-guide-media-pair--login { max-width: 760px; }
.stats-guide-media-pair--login figure { aspect-ratio: 4 / 5; }
.stats-guide-media-pair--login img { object-fit: contain; }

.stats-guide-note--fallback {
  padding: 13px 16px;
  border-left: 3px solid #66c1ff;
  border-radius: 10px;
  background: rgba(40, 117, 162, .13);
}

.stats-guide-code-stack--fallback {
  padding: 12px;
  border: 1px solid rgba(102, 193, 255, .28);
  border-radius: 14px;
  background: rgba(15, 71, 103, .16);
}

@media (max-width: 700px) {
  .stats-instruction-panel {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
    max-height: calc(100dvh - 14px);
  }

  .stats-instruction-panel__body { padding: 18px 15px 28px; }
  .stats-guide-media-pair { grid-template-columns: 1fr !important; }
  .stats-guide-media-pair figure { aspect-ratio: 16 / 10; }
  .stats-guide-media-pair--login figure { aspect-ratio: 4 / 5; }
  .stats-guide-media img { max-height: 280px !important; }
}

/* Keep balance actions away from the metric icon and the usage sentence. */
.metric-card.balance { padding-bottom: 54px; }
.metric-card-actions {
  position: absolute;
  bottom: 21px;
  right: auto;
  left: 19px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.metric-card.balance .metric-topup-action {
  position: static;
}
.metric-buy-action {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid rgba(92, 226, 207, .38);
  border-radius: 9px;
  color: #baf7e8;
  background: rgba(72, 205, 180, .1);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.metric-buy-action:hover {
  border-color: rgba(143, 246, 220, .72);
  background: rgba(72, 205, 180, .2);
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .metric-card-actions { right: auto; bottom: 21px; left: 16px; }
}

/* Final chart layout lock. Earlier responsive rules intentionally keep the
   chart flexible, but they also let the two period labels reflow differently.
   Keep the controls and plot boxes stable while only the chart data changes. */
.chart-topline {
  min-height: 82px !important;
  flex-wrap: nowrap !important;
}

.chart-topline > div:first-child {
  min-height: 58px !important;
}

.chart-topline #chart-title {
  min-height: 1.35em;
}

.chart-topline #chart-scope {
  min-height: 1.45em;
}

.chart-controls {
  min-height: 36px !important;
  flex-wrap: nowrap !important;
  align-content: center;
}

.period-switch,
.series-switch,
.model-filter,
.toggle-control {
  flex: 0 0 auto;
}

.period-switch button[data-stats-mode] {
  min-width: 74px;
}

.chart-legend {
  min-height: 18px;
}

.canvas-wrap,
.chart-card[data-chart-mode="combined"] .canvas-wrap,
[data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
  height: 340px !important;
  min-height: 340px !important;
}

@media (max-width: 860px) {
  .chart-topline {
    min-height: 142px !important;
    flex-wrap: wrap !important;
  }

  .chart-topline > div:first-child {
    min-height: 58px !important;
    flex-basis: 100%;
  }

  .chart-controls {
    min-height: 74px !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
  }
}

@media (max-width: 620px) {
  .chart-topline {
    min-height: 214px !important;
  }

  .chart-controls {
    min-height: 136px !important;
    flex-direction: column;
    align-items: stretch;
  }

  .period-switch,
  .series-switch,
  .model-filter,
  .toggle-control {
    width: 100%;
  }

  .period-switch button,
  .series-switch button {
    flex: 1 1 0;
  }

  .canvas-wrap,
  .chart-card[data-chart-mode="combined"] .canvas-wrap,
  [data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap,
  body.is-embedded .canvas-wrap,
  body.is-embedded .chart-card[data-chart-mode="combined"] .canvas-wrap,
  body.is-embedded [data-stats-panel][data-chart-granularity="hourly"] .canvas-wrap {
    height: 255px !important;
    min-height: 255px !important;
  }
}

/* Guide overlay ownership: the parent temporarily gives the iframe the whole
   browser viewport. The guide itself is the single centered surface, so it
   never inherits a second clipped frame or scales the background on open. */
.stats-instruction-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  /* Keep the real statistics page visible behind the guide. No backdrop blur
     is used so the text behind it retains its normal rendering. */
  background: linear-gradient(145deg, rgba(2, 10, 16, .72) 0%, rgba(4, 19, 27, .76) 100%) !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
  transition: opacity 320ms cubic-bezier(.16, .82, .22, 1) !important;
  will-change: opacity;
}

.stats-instruction-backdrop.is-open { opacity: 1 !important; }

.stats-instruction-panel {
  position: fixed !important;
  z-index: 101 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(1080px, calc(100vw - 28px)) !important;
  height: min(900px, calc(100dvh - 28px)) !important;
  max-width: none !important;
  max-height: calc(100dvh - 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 18px), 0) !important;
  transition: transform 320ms cubic-bezier(.16, .82, .22, 1) !important;
  will-change: opacity, transform;
  contain: paint !important;
}

.stats-instruction-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) !important;
}

.stats-instruction-panel.is-opening.animate__animated {
  --animate-duration: 320ms;
}

/* Animate.css fades the surface itself while this transition keeps its
   centred geometry stable and lets it settle down gently on close. */
.stats-instruction-panel.is-closing {
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + 18px), 0) !important;
  transition: transform 320ms cubic-bezier(.16, .82, .22, 1) !important;
}

.stats-instruction-panel.is-closing.animate__animated {
  --animate-duration: 320ms;
}

.stats-instruction-panel__header { flex: 0 0 auto !important; }

.stats-instruction-panel__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  .stats-instruction-panel {
    width: calc(100vw - 14px) !important;
    height: calc(100dvh - 14px) !important;
    max-height: calc(100dvh - 14px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-instruction-backdrop,
  .stats-instruction-panel,
  .stats-instruction-panel.is-closing,
  .model-filter__trigger,
  .model-filter__menu,
  .model-filter__option { transition: none !important; }
}

/* The picker remains an overlay above the chart. Only its stacking level is
   raised while open, so clicks select a model instead of reaching the canvas. */
.model-filter.is-open {
  z-index: 6;
}

.model-filter__region.is-open,
.model-filter__option {
  touch-action: manipulation;
}