/* =============================================================================
   dePuzzled design system
   =============================================================================
   Tokens are taken verbatim from design.pen's `variables` block, so the palette
   here and the mockups cannot drift apart. Every component below composes these
   tokens rather than hard-coding a hex value.

   Type: Space Grotesk (display), Inter (body), JetBrains Mono (data).
   ========================================================================== */

:root {
  /* The open dropdown list, scrollbars, and other native chrome are painted by
     the OS, not by us. Without this they render light on a dark page — a white
     popup with black text over the dark UI. */
  color-scheme: dark;

  /* --- colour ------------------------------------------------------------ */
  --dp-bg:              #090D12;
  --dp-surface:         #10161F;
  --dp-surface-raised:  #17212D;
  --dp-border:          #253241;
  --dp-control-border:  #5A687B;
  --dp-text:            #F0F4F8;
  --dp-muted:           #A0ACBC;
  --dp-accent:          #78F0CC;
  --dp-on-accent:       #09221B;
  --dp-error:           #FF9A9A;

  /* Tinted variants, taken from the composed components in the design. */
  --dp-accent-tint:     #15342A;   /* nav active bg, success badge bg */
  --dp-accent-tint-2:   #132F2A;   /* connected-layers tile */
  --dp-accent-tint-3:   #365E52;   /* tile border */
  --dp-accent-tint-4:   #345B4E;   /* success toast border */
  --dp-error-tint:      #351F29;
  --dp-error-border:    #6F3B48;
  --dp-error-border-2:  #914655;   /* destructive button outline */
  --dp-gateway-bg:      #0D171D;
  --dp-gateway-border:  #2C454A;

  /* --- type ------------------------------------------------------------- */
  --dp-display: 'Space Grotesk', system-ui, sans-serif;
  --dp-body:    Inter, system-ui, sans-serif;
  --dp-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* --- geometry --------------------------------------------------------- */
  --dp-radius-control: 8px;
  --dp-radius-card:    10px;
  --dp-space-sm: 8px;
  --dp-space-md: 16px;
  --dp-space-lg: 24px;
  --dp-max-content: 1280px;

  /* Breakpoints, as documented in the design's responsive contract. */
  --dp-gutter: 24px;
}

@media (min-width: 768px) { :root { --dp-gutter: 32px; } }
@media (min-width: 1024px) { :root { --dp-gutter: 80px; } }

/* ------------------------------------------------------------------ reset -- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--dp-bg);
  color: var(--dp-text);
  font-family: var(--dp-body);
  font-size: 14px;
  /* `normal`, not a ratio. The design sets `/normal` on almost every text
     layer, so each one uses its own font's natural leading. A global 1.5 here
     leaked into all of them — the wordmark rendered 34.5px tall instead of the
     design's ~27px — and the whole header rhythm drifted. Elements that do want
     a ratio set it themselves. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Focus rings are kept deliberately visible: the design's accessibility note
   calls them out as a requirement, not a nicety. */
:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- primitives -- */

.dp-shell { min-height: 100vh; display: flex; flex-direction: column; }

.dp-container {
  width: 100%;
  max-width: calc(var(--dp-max-content) + var(--dp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
}

.dp-content {
  padding-block: 24px 32px; gap: 24px;
  display: flex; flex-direction: column;
}
@media (min-width: 768px) { .dp-content { padding-block: 36px 48px; gap: 28px; } }

/* --- type scale ---------------------------------------------------------- */

.dp-display-60 { font-family: var(--dp-display); font-size: 60px; font-weight: 500; letter-spacing: -2.5px; line-height: 1.08; }
.dp-display-36 { font-family: var(--dp-display); font-size: 36px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.2; }
.dp-display-32 { font-family: var(--dp-display); font-size: 28px; font-weight: 500; letter-spacing: -1px; }
@media (min-width: 768px) { .dp-display-32 { font-size: 32px; } }
.dp-display-24 { font-family: var(--dp-display); font-size: 24px; font-weight: 500; letter-spacing: -0.5px; line-height: 1.2; }
.dp-display-22 { font-family: var(--dp-display); font-size: 22px; font-weight: 500; }
.dp-display-20 { font-family: var(--dp-display); font-size: 20px; font-weight: 500; }
.dp-display-18 { font-family: var(--dp-display); font-size: 18px; font-weight: 500; }
.dp-display-17 { font-family: var(--dp-display); font-size: 17px; font-weight: 500; }
.dp-display-23 { font-family: var(--dp-display); font-size: 23px; font-weight: 600; letter-spacing: -0.6px; }

.dp-eyebrow {
  font-family: var(--dp-mono); font-size: 11px; letter-spacing: 1.2px;
  color: var(--dp-accent); text-transform: uppercase;
}
.dp-label  { font-size: 13px; font-weight: 500; color: var(--dp-text); }
.dp-text   { font-size: 14px; color: var(--dp-text); }
.dp-muted  { color: var(--dp-muted); }
.dp-small  { font-size: 12px; color: var(--dp-muted); }
.dp-mono   { font-family: var(--dp-mono); }
.dp-mono-sm{ font-family: var(--dp-mono); font-size: 12px; color: var(--dp-muted); }

/* ---------------------------------------------------------------- buttons -- */

.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; padding-inline: 16px;
  border-radius: var(--dp-radius-control);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
  transition: opacity .12s ease, background-color .12s ease;
}
.dp-btn--primary { background: var(--dp-accent); color: var(--dp-on-accent); }
.dp-btn--primary:hover { opacity: .9; }
.dp-btn--secondary {
  background: var(--dp-surface); color: var(--dp-text);
  outline: 1px solid var(--dp-control-border); outline-offset: -1px;
}
.dp-btn--secondary:hover { background: var(--dp-surface-raised); }
.dp-btn--danger {
  background: var(--dp-surface); color: var(--dp-error);
  outline: 1px solid var(--dp-error-border-2); outline-offset: -1px;
}
.dp-btn--danger:hover { background: var(--dp-error-tint); }
.dp-btn--sm { height: 36px; font-size: 12px; padding-inline: 16px; }
.dp-btn--block { width: 100%; }
.dp-btn[disabled], .dp-btn--loading { opacity: .55; pointer-events: none; }

/* Loading state prevents duplicate submissions, per the design's spec. */
.dp-btn--loading::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: dp-spin .7s linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }

.dp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 7px;
  color: var(--dp-text); flex: none;
}
.dp-icon-btn:hover { background: var(--dp-surface-raised); }
.dp-icon-btn--bordered {
  background: var(--dp-surface);
  outline: 1px solid var(--dp-control-border); outline-offset: -1px;
}
.dp-icon-btn--sm { width: 36px; height: 36px; }

.dp-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--dp-muted);
}
.dp-link:hover { color: var(--dp-text); }
.dp-link--accent { color: var(--dp-accent); }

/* ----------------------------------------------------------------- inputs -- */

.dp-field { display: flex; flex-direction: column; gap: 8px; }
.dp-field__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.dp-input {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding-inline: 14px;
  background: var(--dp-surface);
  border-radius: var(--dp-radius-control);
  outline: 1px solid var(--dp-control-border); outline-offset: -1px;
}
.dp-input:focus-within { outline-color: var(--dp-accent); }
.dp-input--invalid { outline-color: var(--dp-error); }
.dp-input--invalid:focus-within { outline-color: var(--dp-error); }
.dp-input input, .dp-input select {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  font-size: 14px; color: var(--dp-text);
}
.dp-input input::placeholder { color: var(--dp-muted); }
.dp-input__icon { flex: none; color: var(--dp-muted); display: flex; }
.dp-input__affordance {
  flex: none; width: 44px; height: 44px; margin-right: -12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--dp-muted); border-radius: 6px;
}
.dp-input__affordance:hover { color: var(--dp-text); }
.dp-input select { appearance: none; cursor: pointer; }
.dp-input select option { background: var(--dp-surface); color: var(--dp-text); }

.dp-hint { font-size: 12px; line-height: 1.5; color: var(--dp-muted); }
.dp-hint--error { color: var(--dp-error); }

.dp-select {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding-inline: 12px;
  background: var(--dp-surface);
  border-radius: var(--dp-radius-control);
  outline: 1px solid var(--dp-control-border); outline-offset: -1px;
}
.dp-select select {
  flex: 1; min-width: 0; height: 100%; appearance: none; cursor: pointer;
  background: none; border: none; outline: none;
  font-size: 13px; color: var(--dp-text);
}
.dp-select select option { background: var(--dp-surface); color: var(--dp-text); }

.dp-search {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding-inline: 12px;
  background: var(--dp-surface);
  border-radius: var(--dp-radius-control);
  outline: 1px solid var(--dp-control-border); outline-offset: -1px;
}
.dp-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 13px; }
.dp-search input::placeholder { color: var(--dp-muted); }

/* --- checkbox / toggle --------------------------------------------------- */

.dp-check { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; }
.dp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-check__box {
  flex: none; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dp-surface); border-radius: 4px;
  outline: 1px solid var(--dp-control-border); outline-offset: -1px;
  color: transparent;
}
.dp-check input:checked + .dp-check__box { background: var(--dp-accent); outline-color: var(--dp-accent); color: var(--dp-on-accent); }
.dp-check input:focus-visible + .dp-check__box { outline: 2px solid var(--dp-accent); outline-offset: 2px; }
.dp-check__label { font-size: 13px; color: var(--dp-muted); }

.dp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.dp-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; flex: none; }
.dp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-toggle__track {
  width: 36px; height: 20px; border-radius: 12px; padding: 3px;
  background: var(--dp-surface-raised);
  display: flex; align-items: center;
  transition: background-color .15s ease;
}
.dp-toggle__thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dp-muted);
  transition: transform .15s ease, background-color .15s ease;
}
.dp-toggle input:checked + .dp-toggle__track { background: var(--dp-accent); }
.dp-toggle input:checked + .dp-toggle__track .dp-toggle__thumb {
  transform: translateX(16px); background: var(--dp-on-accent);
}
.dp-toggle input:focus-visible + .dp-toggle__track { outline: 2px solid var(--dp-accent); outline-offset: 2px; }

/* ----------------------------------------------------------------- badges -- */

.dp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding-inline: 8px; border-radius: 5px;
  font-size: 11px; font-weight: 500; white-space: nowrap;
}
.dp-badge__dot { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.dp-badge--ok      { background: var(--dp-accent-tint); color: var(--dp-accent); }
.dp-badge--ok      .dp-badge__dot { background: var(--dp-accent); }
.dp-badge--neutral { background: var(--dp-surface-raised); color: var(--dp-muted); }
.dp-badge--neutral .dp-badge__dot { background: var(--dp-muted); }
.dp-badge--error   { background: var(--dp-error-tint); color: var(--dp-error); }
.dp-badge--error   .dp-badge__dot { background: var(--dp-error); }
.dp-badge--warn    { background: var(--dp-surface-raised); color: var(--dp-error); }
.dp-badge--warn    .dp-badge__dot { background: var(--dp-error); }

/* ------------------------------------------------------------------ cards -- */

.dp-card {
  background: var(--dp-surface);
  border-radius: var(--dp-radius-card);
  outline: 1px solid var(--dp-border); outline-offset: -1px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 768px) { .dp-card { padding: 24px; } }
.dp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dp-card--flush { padding: 0; gap: 0; overflow: hidden; }

.dp-columns { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) {
  .dp-columns { flex-direction: row; align-items: flex-start; }
  .dp-columns > * { flex: 1 1 0; min-width: 0; }
}
/* A fixed-width secondary column, as the overview's "Usage by API" panel is. */
.dp-col-aside { width: 100%; }
@media (min-width: 1024px) {
  .dp-col-aside { flex: 0 0 320px; max-width: 320px; }
}

/* Hairline rule the design places under the metric row and above page
   sections. */
.dp-rule { border: 0; border-top: 1px solid var(--dp-border); margin: 0; }

.dp-grid-2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .dp-grid-2 { grid-template-columns: 1fr 1fr; } }

/* ----------------------------------------------------------------- tables -- */

.dp-table-wrap {
  background: var(--dp-surface);
  border-radius: var(--dp-radius-card);
  outline: 1px solid var(--dp-border); outline-offset: -1px;
  overflow: hidden;
}
.dp-table { width: 100%; border-collapse: collapse; }
.dp-table thead th {
  height: 44px; padding-inline: 24px; text-align: left;
  background: var(--dp-surface-raised);
  font-size: 11px; font-weight: 400; color: var(--dp-muted);
  white-space: nowrap;
}
.dp-table tbody td {
  height: 64px; padding: 12px 24px;
  border-top: 1px solid var(--dp-border);
  font-size: 13px; vertical-align: middle;
}
.dp-table tbody tr:hover { background: var(--dp-surface-raised); }
.dp-table__stack { display: flex; flex-direction: column; gap: 6px; }
.dp-table__name { font-size: 14px; font-weight: 500; }
.dp-table__sub  { font-size: 11px; color: var(--dp-muted); }
.dp-table__num  { font-family: var(--dp-mono); font-size: 12px; color: var(--dp-muted); }
.dp-table__right { text-align: right; }

/* Tables become cards below 768px — the design specifies entity cards rather
   than horizontal scrolling. */
.dp-table-mobile { display: none; }
@media (max-width: 767px) {
  .dp-table-wrap--responsive .dp-table { display: none; }
  .dp-table-wrap--responsive .dp-table-mobile { display: flex; flex-direction: column; }
}
.dp-table-mobile { gap: 0; }
.dp-mobile-row {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--dp-border);
}
.dp-mobile-row:first-child { border-top: none; }
.dp-mobile-row__top, .dp-mobile-row__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

/* --------------------------------------------------------------- metrics -- */

.dp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 32px; }
@media (min-width: 1024px) { .dp-metrics { grid-template-columns: repeat(4, 1fr); } }
.dp-metric { display: flex; flex-direction: column; gap: 12px; padding-block: 16px; }
.dp-metric__label { font-size: 12px; color: var(--dp-muted); }
.dp-metric__value { font-family: var(--dp-display); font-size: 32px; font-weight: 500; letter-spacing: -1px; }

.dp-progress { display: flex; flex-direction: column; gap: 12px; }
.dp-progress__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.dp-progress__pct { font-family: var(--dp-mono); font-size: 12px; color: var(--dp-muted); }
.dp-progress__track { height: 4px; border-radius: 2px; background: var(--dp-surface-raised); overflow: hidden; }
.dp-progress__bar { height: 100%; border-radius: 2px; background: var(--dp-accent); }

.dp-stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 8px;
}
.dp-stat-row__label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dp-stat-row__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dp-stat-row__value { font-family: var(--dp-mono); font-size: 16px; }

/* ---------------------------------------------------------------- alerts -- */

.dp-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: var(--dp-radius-control);
  font-size: 12px; line-height: 1.5;
}
.dp-alert--error { background: var(--dp-error-tint); outline: 1px solid var(--dp-error-border); outline-offset: -1px; color: var(--dp-error); }
.dp-alert--ok    { background: var(--dp-accent-tint); outline: 1px solid var(--dp-accent-tint-4); outline-offset: -1px; color: var(--dp-accent); }
.dp-alert svg { flex: none; margin-top: 1px; }

.dp-toast {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding-inline: 16px; border-radius: var(--dp-radius-control);
  background: var(--dp-accent-tint); outline: 1px solid var(--dp-accent-tint-4); outline-offset: -1px;
  color: var(--dp-accent); font-size: 13px;
}

.dp-divider { display: flex; align-items: center; gap: 12px; }
.dp-divider__line { flex: 1; height: 1px; background: var(--dp-border); }
.dp-divider__text { font-size: 11px; color: var(--dp-muted); }

.dp-health { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dp-muted); }
.dp-health__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dp-accent); flex: none; }
.dp-health__dot--down { background: var(--dp-error); }

/* ---------------------------------------------------------------- header -- */

.dp-header {
  border-bottom: 1px solid var(--dp-border);
  background: var(--dp-bg);
  position: sticky; top: 0; z-index: 40;
}
.dp-header__inner {
  height: 81px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dp-brand { display: flex; align-items: center; gap: 10px; }
.dp-brand__tile {
  width: 32px; height: 32px; border-radius: 8px; background: var(--dp-accent);
  display: flex; align-items: center; justify-content: center; gap: 0;
  color: var(--dp-on-accent); flex: none;
}
.dp-brand__name { font-family: var(--dp-display); font-size: 23px; font-weight: 600; letter-spacing: -0.6px; white-space: nowrap; }

.dp-nav { display: none; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .dp-nav { display: flex; } }
.dp-nav__item {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 12px; border-radius: 6px;
  color: var(--dp-muted); font-size: 13px; font-weight: 500;
}
.dp-nav__item:hover { background: var(--dp-surface); color: var(--dp-text); }
.dp-nav__item--active { background: var(--dp-accent-tint); color: var(--dp-accent); }
.dp-nav__item--active:hover { background: var(--dp-accent-tint); color: var(--dp-accent); }

.dp-account { display: none; align-items: center; gap: 8px; }
@media (min-width: 1024px) { .dp-account { display: flex; } }
.dp-account__avatar {
  width: 28px; height: 28px; border-radius: 7px; background: var(--dp-surface-raised);
  display: flex; align-items: center; justify-content: center; gap: 0;
  color: var(--dp-text); flex: none;
}
.dp-account__name { font-size: 12px; color: var(--dp-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dp-menu-btn { display: inline-flex; }
@media (min-width: 1024px) { .dp-menu-btn { display: none; } }

/* Mobile navigation drawer. */
.dp-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(9, 13, 18, .72);
  display: none;
}
.dp-drawer[data-open="true"] { display: block; }
.dp-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--dp-bg); border-left: 1px solid var(--dp-border);
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.dp-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dp-drawer .dp-nav__item { width: 100%; height: 44px; }
.dp-drawer__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--dp-border); display: flex; flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- footer -- */

.dp-footer { border-top: 1px solid var(--dp-border); margin-top: auto; }
.dp-footer__inner {
  min-height: 72px; padding-block: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 768px) {
  .dp-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.dp-footer__group { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.dp-footer__sep { width: 1px; height: 16px; background: var(--dp-border); }
.dp-footer__links { display: flex; gap: 20px; }

/* ------------------------------------------------------------ auth pages -- */

/* Auth shell, measured from the design frames:
     desktop  1440 wide, 80px gutters, header 95.5px, form 400px
     tablet    768 wide, 32px gutters
     mobile   375 wide, 24px gutters, header 79.5px, form fluid
   There is no brand panel. The form is centred on the canvas. */
.dp-auth { min-height: 100vh; display: flex; flex-direction: column; }
.dp-auth__inner {
  width: 100%;
  max-width: calc(var(--dp-max-content) + var(--dp-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--dp-gutter);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dp-auth__header {
  min-height: 79.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--dp-border);
}
.dp-auth__main {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding-block: 16px;
}
/* Three nested containers, mirroring the design's own nesting:
     form        28px between the heading and the controls
     controls    20px between the credentials block and the submit button
     credentials 20px between fields
   Flattening them put 20px between the title and the first field instead of
   28px, which shifted everything below by 8px.

   `.dp-auth__form` is the width constraint the layout provides; the inner
   `<form>` carries the spacing. */
.dp-auth__form { display: block; width: 100%; max-width: 400px; }
.dp-auth__form > form {
  display: flex; flex-direction: column; gap: 24px; width: 100%;
}
.dp-auth__heading { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) {
  .dp-auth__header { min-height: 95.5px; }
  .dp-auth__main { padding-block: 32px; }
  .dp-auth__form > form { gap: 28px; }
}

.dp-auth__title {
  margin: 0;
  font-family: var(--dp-display);
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1.2;
  text-align: center;
  font-size: 32px;          /* mobile */
}
@media (min-width: 768px) {
  .dp-auth__title { font-size: 36px; }   /* desktop and tablet */
}
.dp-auth__title--setup {
  font-size: 32px;
  letter-spacing: -1px;
}

/* Field group spacing differs between the credentials block and the submit
   button, so the two gaps are separate rather than one uniform stack. */
.dp-auth__credentials { display: flex; flex-direction: column; gap: 18px; }
.dp-auth__controls { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) {
  .dp-auth__credentials { gap: 20px; }
  .dp-auth__controls { gap: 20px; }
}

.dp-auth__footer {
  min-height: 71.5px;
  padding-block: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-top: 1px solid var(--dp-border);
  font-size: 12px;
}
@media (min-width: 768px) {
  .dp-auth__footer {
    flex-direction: row; justify-content: space-between;
    padding-block: 0; gap: 24px;
  }
}
.dp-auth__footer-links { display: flex; gap: 20px; }

/* The header brand shrinks slightly on mobile, matching the design. */
@media (max-width: 767px) {
  .dp-auth .dp-brand__name { font-size: 21px; }
  .dp-auth .dp-link { font-size: 12px; }
}

/* Auth form controls are taller than the app's default: 48px in both the
   login and setup frames, where the app's buttons are 40px. */
.dp-auth .dp-btn { height: 48px; }
.dp-auth .dp-btn span { font-size: 14px; }
.dp-auth__form--setup .dp-btn span { font-size: 13px; }

/* -------------------------------------------------------------- code block */

.dp-code { border-radius: var(--dp-radius-card); outline: 1px solid var(--dp-border); outline-offset: -1px; overflow: hidden; background: var(--dp-surface); }
.dp-code__bar {
  height: 40px; padding-inline: 16px; background: var(--dp-surface-raised);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--dp-mono); font-size: 11px; color: var(--dp-muted);
}
.dp-code__body { padding: 20px; overflow-x: auto; }
.dp-code__body pre {
  margin: 0; font-family: var(--dp-mono); font-size: 12px; line-height: 1.8;
  color: var(--dp-accent); white-space: pre;
}

/* ------------------------------------------------------------------ misc -- */

.dp-stack   { display: flex; flex-direction: column; gap: 20px; }
.dp-stack-8 { display: flex; flex-direction: column; gap: 8px; }
.dp-stack-12{ display: flex; flex-direction: column; gap: 12px; }
.dp-row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dp-row--between { justify-content: space-between; }
.dp-spacer  { flex: 1; }

/* --------------------------------------------------------------- pager -- */
/*
  Shared pagination for every table. The design's own frame is a count on the
  left and two chevrons on the right; numbered pages and a page-size selector
  are an addition, so they reuse the design's control tokens rather than
  introducing a second visual language.
*/
.dp-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dp-pager__info { font-size: 12px; color: var(--dp-muted); font-variant-numeric: tabular-nums; }
.dp-pager__side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dp-pager__size { display: flex; align-items: center; gap: 8px; }
.dp-pager__size label { font-size: 12px; color: var(--dp-muted); white-space: nowrap; }
/* The select inside is `.dp-select` — the shared component — so the only thing
   to adjust here is its height, to sit level with the page buttons. */
.dp-pager__size .dp-select { height: 36px; padding-inline: 10px; }
.dp-pager__pages { display: flex; align-items: center; gap: 4px; }
.dp-pager__page {
  min-width: 36px; height: 36px; padding-inline: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; color: var(--dp-muted);
  background: none; border: 1px solid transparent;
  border-radius: var(--dp-radius-control); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
a.dp-pager__page:hover { background: var(--dp-surface-raised); color: var(--dp-text); }
.dp-pager__page--current {
  color: var(--dp-accent); background: var(--dp-accent-tint);
  border-color: var(--dp-accent-tint-3);
}
.dp-pager__gap {
  min-width: 24px; height: 36px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--dp-muted); font-size: 12px;
}
.dp-pager__page--disabled { opacity: .4; pointer-events: none; }

.dp-skeleton { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--dp-surface); border-radius: var(--dp-radius-card); }
.dp-skeleton__row { height: 20px; border-radius: 4px; background: var(--dp-surface-raised); }

.dp-empty { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--dp-surface); border-radius: var(--dp-radius-card); outline: 1px solid var(--dp-border); outline-offset: -1px; }

/* --- chart ---------------------------------------------------------------- */
/* The plot area is a positioned box: the SVG fills it, and the hover cells are
   laid over the top so a pointer anywhere in a day's column shows its value. */
.dp-chart-wrap { display: flex; gap: 16px; }
.dp-chart-axis {
  position: relative; width: 28px; flex: none;
  font-family: var(--dp-mono); font-size: 10px; color: var(--dp-muted);
}
.dp-chart-axis span {
  position: absolute; right: 0; transform: translateY(-50%);
  white-space: nowrap;
}
.dp-chart-plot { position: relative; flex: 1; min-width: 0; }
.dp-chart-card { height: 320px; }
.dp-chart { width: 100%; display: block; }

.dp-chart-hit { position: absolute; inset: 0; display: flex; }
.dp-chart-hit__cell { flex: 1; position: relative; cursor: default; }

/* Crosshair: shows which day is being read, and where the value sits on the
   curve. Full height so the eye can follow it down to the axis label. */
.dp-chart-crosshair {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--dp-accent); opacity: 0;
  transform: translateX(-0.5px);
  transition: opacity .1s ease;
  pointer-events: none;
}
/* The dot sits on the curve at the day's value. `top` is a percentage of the
   plot height, not an SVG unit — see the note in `area_chart`. */
.dp-chart-marker {
  position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--dp-accent);
  border: 2px solid var(--dp-bg);
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .1s ease;
  pointer-events: none;
}
.dp-chart-hit__cell:hover .dp-chart-crosshair,
.dp-chart-hit__cell:focus-visible .dp-chart-crosshair,
.dp-chart-hit__cell:hover .dp-chart-marker,
.dp-chart-hit__cell:focus-visible .dp-chart-marker { opacity: 1; }

.dp-chart-tip {
  position: absolute; top: -12px; left: 50%;
  transform: translate(-50%, -100%);
  display: none; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 6px;
  background: var(--dp-surface-raised);
  outline: 1px solid var(--dp-border); outline-offset: -1px;
  white-space: nowrap; pointer-events: none; z-index: 5;
}
/* Keep the first and last tooltips inside the card. */
.dp-chart-hit__cell:first-child .dp-chart-tip { transform: translate(-12px, -100%); }
.dp-chart-hit__cell:last-child .dp-chart-tip { transform: translate(calc(-100% + 12px), -100%); }

/* Points near the top of the plot show the tooltip underneath instead, so it
   does not escape the plot and collide with the card header. */
.dp-chart-tip--below { top: 14px; transform: translate(-50%, 0); }
.dp-chart-hit__cell:first-child .dp-chart-tip--below { transform: translate(-12px, 0); }
.dp-chart-hit__cell:last-child .dp-chart-tip--below { transform: translate(calc(-100% + 12px), 0); }
.dp-chart-hit__cell:hover .dp-chart-tip,
.dp-chart-hit__cell:focus-visible .dp-chart-tip { display: flex; }
.dp-chart-tip__label { font-size: 10px; color: var(--dp-muted); text-transform: uppercase; letter-spacing: .5px; }
.dp-chart-tip__value { font-family: var(--dp-mono); font-size: 13px; color: var(--dp-text); }

.dp-chart-labels { display: flex; }
.dp-chart-labels > span { flex: 1; text-align: center; }
/* The first and last labels sit under the axis gutter, so nudge them inward. */
.dp-chart-labels { padding-left: 44px; }

.dp-chart-empty {
  height: 184px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--dp-radius-control);
  background: repeating-linear-gradient(
    to bottom, transparent 0 45px, var(--dp-border) 45px 46px);
}

.dp-pool-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 16px; border-bottom: 1px solid var(--dp-border);
}
.dp-pool-row:last-of-type { border-bottom: none; }
.dp-pool-row__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dp-pool-row__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dp-pool-row__name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-pool-row__count { font-size: 11px; color: var(--dp-muted); }
.dp-pool-row__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.dp-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--dp-border); padding-bottom: 16px;
}
.dp-tab {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 12px; border-radius: 6px;
  color: var(--dp-muted); font-size: 13px; font-weight: 500;
  white-space: nowrap;
}
.dp-tab:hover { background: var(--dp-surface); color: var(--dp-text); }
.dp-tab[aria-selected="true"] { background: var(--dp-accent-tint); color: var(--dp-accent); }

/* A tab panel is a plain block; `hidden` does the switching. */
.dp-tab-panel { display: block; }
.dp-tab-panel[hidden] { display: none; }

/* The source tag beside a setting label: which layer is winning. */
.dp-source {
  font-family: var(--dp-mono); font-size: 10px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--dp-muted);
}
.dp-source[data-source="database"] { color: var(--dp-accent); }

/* A card whose children sit on one row — the API key panel. */
.dp-card--row {
  flex-direction: row; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
}

/* Docs: the sidebar tracks the viewport, the article scrolls. Without this the
   navigation scrolls away and the reader loses the section list. */
.dp-docs-aside { width: 100%; }
@media (min-width: 1024px) {
  .dp-docs-aside {
    flex: 0 0 208px; max-width: 208px;
    position: sticky; top: 96px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.dp-page-head { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) { .dp-page-head { flex-direction: row; align-items: center; justify-content: space-between; } }
.dp-page-head__title-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dp-breadcrumb { font-size: 12px; color: var(--dp-muted); }
.dp-page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.dp-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Utility: visually hidden but available to screen readers. */
.dp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}