/* ============================================================
   auth2api admin · swiss-industrial
   Dark canvas, hairline borders, monospace data, amber accent.
   ============================================================ */

@layer reset, tokens, base, layout, components, motion;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html,
  body {
    height: 100%;
  }
  button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  ul {
    list-style: none;
  }
}

@layer tokens {
  :root {
    /* canvas */
    --bg-base: oklch(0.157 0.011 240);
    --bg-elev-1: oklch(0.195 0.013 240);
    --bg-elev-2: oklch(0.235 0.015 240);
    --bg-hover: oklch(0.215 0.014 240);

    /* hairlines */
    --line-quiet: oklch(0.30 0.012 240 / 0.45);
    --line-soft: oklch(0.35 0.014 240 / 0.7);
    --line-strong: oklch(0.50 0.014 240);

    /* fg */
    --fg: oklch(0.95 0.004 240);
    --fg-soft: oklch(0.72 0.008 240);
    --fg-mute: oklch(0.55 0.008 240);
    --fg-quiet: oklch(0.42 0.008 240);

    /* phosphor amber */
    --accent: oklch(0.82 0.16 78);
    --accent-soft: oklch(0.82 0.16 78 / 0.18);
    --accent-glow: oklch(0.82 0.16 78 / 0.35);

    /* semantic */
    --ok: oklch(0.78 0.13 158);
    --ok-soft: oklch(0.78 0.13 158 / 0.15);
    --warn: oklch(0.83 0.14 75);
    --warn-soft: oklch(0.83 0.14 75 / 0.15);
    --err: oklch(0.68 0.18 25);
    --err-soft: oklch(0.68 0.18 25 / 0.15);
    --info: oklch(0.72 0.10 220);
    --info-soft: oklch(0.72 0.10 220 / 0.15);

    /* type */
    --font-sans: "Geist", -apple-system, system-ui, sans-serif;
    --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
    --font-display: "Fraunces", "Geist", serif;

    /* spacing */
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-5: 24px;
    --gap-6: 32px;
    --gap-7: 48px;
    --gap-8: 64px;

    /* timing */
    --t-fast: 140ms;
    --t-med: 220ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@layer base {
  body {
    background: var(--bg-base);
    color: var(--fg);
    font-family: var(--font-sans);
    font-weight: 400;
    font-feature-settings: "ss01", "ss02", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    overflow-x: hidden;
  }

  /* Subtle ambient grain — adds texture without crunch. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(
      circle at 25% 0%,
      oklch(0.30 0.04 78 / 0.18) 0%,
      transparent 45%
    );
    z-index: 0;
  }

  /* Custom selection */
  ::selection {
    background: var(--accent-soft);
    color: var(--fg);
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--line-soft);
    border-radius: 6px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--line-strong);
  }
}

@layer layout {
  .boot {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-3);
    color: var(--fg-soft);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .boot__mark {
    color: var(--fg);
  }
  .boot__pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    animation: pulse 1.4s ease-in-out infinite;
  }

  .shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
  }

  .nav {
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--line-quiet);
    padding: var(--gap-7) var(--gap-5);
    display: flex;
    flex-direction: column;
    gap: var(--gap-7);
  }

  .brand {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
  }
  .brand__title {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg);
  }
  .brand__sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--fg-quiet);
    text-transform: uppercase;
  }

  .nav__group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
  }
  .nav__heading {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-quiet);
    padding: 0 var(--gap-2);
    margin-bottom: var(--gap-2);
  }
  .nav__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-3);
    padding: 10px var(--gap-2);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--fg-mute);
    border-left: 1px solid transparent;
    transition: color var(--t-fast) var(--ease),
      border-color var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease);
  }
  .nav__item:hover {
    color: var(--fg);
    background: var(--bg-elev-1);
  }
  .nav__item.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-soft);
  }
  .nav__bracket {
    color: var(--fg-quiet);
    font-weight: 500;
  }
  .nav__item.is-active .nav__bracket {
    color: var(--accent);
  }
  .nav__count {
    color: var(--fg-quiet);
    font-size: 11px;
  }
  .nav__item.is-active .nav__count {
    color: var(--accent);
  }

  .nav__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding-top: var(--gap-5);
    border-top: 1px solid var(--line-quiet);
  }
  .nav__status {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--fg-mute);
    text-transform: uppercase;
  }
  .nav__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 6px var(--ok);
  }
  .nav__status-dot.is-bad {
    background: var(--err);
    box-shadow: 0 0 6px var(--err);
  }
  .nav__logout {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-quiet);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--gap-1) 0;
    transition: color var(--t-fast) var(--ease);
  }
  .nav__logout:hover {
    color: var(--err);
  }

  .main {
    padding: var(--gap-7) var(--gap-7) var(--gap-8);
    max-width: 1100px;
    width: 100%;
  }

  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gap-5);
    padding-bottom: var(--gap-5);
    margin-bottom: var(--gap-6);
    border-bottom: 1px solid var(--line-quiet);
  }
  .section-head__left {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
  }
  .section-head__kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-quiet);
  }
  .section-head__title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg);
  }
  .section-head__sub {
    font-size: 14px;
    color: var(--fg-mute);
    max-width: 56ch;
    line-height: 1.55;
  }
}

@layer components {
  /* ---- Buttons ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2);
    padding: 9px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg);
    border: 1px solid var(--line-strong);
    background: transparent;
    transition: background var(--t-fast) var(--ease),
      border-color var(--t-fast) var(--ease),
      color var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
  }
  .btn:hover {
    background: var(--bg-elev-1);
    border-color: var(--fg-mute);
  }
  .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent-glow);
  }
  .btn--primary {
    color: var(--bg-base);
    background: var(--accent);
    border-color: var(--accent);
  }
  .btn--primary:hover {
    background: oklch(0.86 0.16 78);
    border-color: oklch(0.86 0.16 78);
  }
  .btn--danger {
    color: var(--err);
    border-color: var(--err-soft);
  }
  .btn--danger:hover {
    color: var(--bg-base);
    background: var(--err);
    border-color: var(--err);
  }
  .btn--ghost {
    border-color: transparent;
    color: var(--fg-soft);
  }
  .btn--ghost:hover {
    color: var(--fg);
    background: var(--bg-elev-1);
  }
  .btn--sm {
    padding: 6px 12px;
    font-size: 10px;
  }
  .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .btn:disabled:hover {
    background: transparent;
    border-color: var(--line-strong);
  }
  .btn--primary:disabled:hover {
    background: var(--accent);
    border-color: var(--accent);
  }

  /* ---- Inputs ---- */
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
  }
  .field__label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }
  .input {
    width: 100%;
    padding: 13px 14px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg);
    background: var(--bg-elev-1);
    border: 1px solid var(--line-soft);
    transition: border-color var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease),
      box-shadow var(--t-fast) var(--ease);
  }
  .input::placeholder {
    color: var(--fg-quiet);
  }
  .input:hover {
    border-color: var(--line-strong);
  }
  .input:focus {
    border-color: var(--accent);
    background: var(--bg-elev-2);
    box-shadow: inset 0 0 0 1px var(--accent-soft);
  }
  textarea.input {
    resize: vertical;
    min-height: 88px;
    line-height: 1.5;
  }

  /* ---- Pills ---- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid currentColor;
  }
  .pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }
  .pill--ok {
    color: var(--ok);
    background: var(--ok-soft);
  }
  .pill--warn {
    color: var(--warn);
    background: var(--warn-soft);
  }
  .pill--err {
    color: var(--err);
    background: var(--err-soft);
  }
  .pill--info {
    color: var(--info);
    background: var(--info-soft);
  }
  .pill--mute {
    color: var(--fg-mute);
    border-color: var(--line-soft);
  }

  /* ---- Tables / dense rows ---- */
  .data {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-quiet);
  }
  .data__row {
    display: grid;
    align-items: center;
    padding: var(--gap-4) var(--gap-2);
    border-bottom: 1px solid var(--line-quiet);
    transition: background var(--t-fast) var(--ease);
  }
  .data__row:hover {
    background: var(--bg-elev-1);
  }
  .data__row--head {
    padding: var(--gap-3) var(--gap-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-quiet);
  }
  .data__row--head:hover {
    background: transparent;
  }
  .data__row--accounts {
    grid-template-columns: 48px minmax(160px, 1fr) 130px minmax(170px, 1.1fr) 130px 130px;
    gap: var(--gap-3);
  }
  .data__row--clickable {
    cursor: pointer;
  }
  .data__row--clickable.is-open {
    background: var(--bg-elev-1);
    border-bottom-color: transparent;
  }
  .data__caret {
    display: inline-block;
    margin-left: 8px;
    color: var(--fg-quiet);
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    font-size: 14px;
  }
  .data__caret.is-open {
    transform: rotate(90deg);
    color: var(--accent);
  }
  .data__expand {
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--line-quiet);
    border-left: 2px solid var(--accent);
    padding: var(--gap-5) var(--gap-5) var(--gap-5) calc(var(--gap-5) - 2px);
    animation: fadeUp 220ms var(--ease) both;
  }
  .expand__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-6);
  }
  .expand__col--wide {
    grid-column: 1 / -1;
  }
  .expand__metric {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-quiet);
    font-family: var(--font-mono);
    font-size: 12px;
    gap: var(--gap-3);
  }
  .expand__metric:last-child {
    border-bottom: none;
  }
  .expand__metric-key {
    color: var(--fg-mute);
    text-transform: lowercase;
    letter-spacing: 0.06em;
  }
  .expand__metric-val {
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .expand__error {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--err);
    background: var(--err-soft);
    padding: var(--gap-3) var(--gap-4);
    border-left: 2px solid var(--err);
    line-height: 1.4;
    word-break: break-word;
  }
  .expand__headers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
  }
  .expand__header {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: var(--gap-3);
    padding: 4px 0;
    border-bottom: 1px solid var(--line-quiet);
  }
  .expand__header:last-child {
    border-bottom: none;
  }
  .expand__header-key {
    color: var(--fg-quiet);
  }
  .expand__header-val {
    color: var(--fg-soft);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
  }
  .data__row--keys {
    grid-template-columns: 1fr 200px 170px 170px 110px;
    gap: var(--gap-4);
  }
  .data__cell-mono {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg);
  }
  .data__cell-soft {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-mute);
  }
  .data__cell-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-soft);
    font-size: 12px;
  }

  .pglyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 22px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 500;
    color: var(--fg);
    border: 1px solid var(--line-soft);
  }
  .pglyph--anthropic {
    color: var(--accent);
    border-color: var(--accent-soft);
  }
  .pglyph--codex {
    color: var(--info);
    border-color: oklch(0.72 0.10 220 / 0.35);
  }
  .pglyph--cursor {
    color: var(--fg-soft);
  }

  /* ---- Stats tiles ---- */
  .tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line-quiet);
    border: 1px solid var(--line-quiet);
    margin-bottom: var(--gap-7);
  }
  .tile {
    background: var(--bg-base);
    padding: var(--gap-5);
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
  }
  .tile__label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-quiet);
  }
  .tile__value {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 40px;
    line-height: 1;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }
  .tile__delta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-mute);
  }

  /* ---- Empty state ---- */
  .empty {
    padding: var(--gap-7) var(--gap-5);
    border: 1px dashed var(--line-soft);
    text-align: center;
    color: var(--fg-mute);
  }
  .empty__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--fg-soft);
    margin-bottom: var(--gap-2);
  }
  .empty__sub {
    font-size: 13px;
  }

  /* ---- Modal ---- */
  .modal-veil {
    position: fixed;
    inset: 0;
    background: oklch(0.08 0.012 240 / 0.7);
    backdrop-filter: blur(6px);
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: veilIn var(--t-med) var(--ease);
  }
  .modal {
    width: min(720px, 100%);
    background: var(--bg-base);
    border: 1px solid var(--line-strong);
    border-bottom: none;
    margin-bottom: 0;
    animation: modalIn 320ms var(--ease);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
  }
  .modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gap-5) var(--gap-6);
    border-bottom: 1px solid var(--line-quiet);
  }
  .modal__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    color: var(--fg);
  }
  .modal__close {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-quiet);
    padding: var(--gap-2) var(--gap-3);
    border: 1px solid var(--line-quiet);
    transition: color var(--t-fast) var(--ease),
      border-color var(--t-fast) var(--ease);
  }
  .modal__close:hover {
    color: var(--fg);
    border-color: var(--line-strong);
  }
  .modal__body {
    padding: var(--gap-6);
    display: flex;
    flex-direction: column;
    gap: var(--gap-6);
    overflow-y: auto;
  }
  .modal__foot {
    padding: var(--gap-4) var(--gap-6);
    border-top: 1px solid var(--line-quiet);
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-3);
  }

  /* ---- Stepper ---- */
  .step {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding-left: var(--gap-5);
    border-left: 2px solid var(--line-soft);
  }
  .step.is-done {
    border-left-color: var(--ok);
  }
  .step.is-active {
    border-left-color: var(--accent);
  }
  .step__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-quiet);
  }
  .step.is-active .step__num {
    color: var(--accent);
  }
  .step.is-done .step__num {
    color: var(--ok);
  }
  .step__title {
    font-size: 15px;
    color: var(--fg);
    line-height: 1.5;
  }
  .step__hint {
    font-size: 13px;
    color: var(--fg-mute);
    line-height: 1.55;
  }
  .step__row {
    display: flex;
    gap: var(--gap-3);
    align-items: center;
  }
  .step__url {
    flex: 1;
    padding: var(--gap-3) var(--gap-4);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-soft);
    background: var(--bg-elev-1);
    border: 1px solid var(--line-quiet);
    word-break: break-all;
    line-height: 1.4;
  }

  /* ---- Provider tabs ---- */
  .tabs {
    display: flex;
    gap: 0;
    border: 1px solid var(--line-strong);
    width: fit-content;
  }
  .tab {
    padding: 9px 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-mute);
    border-right: 1px solid var(--line-strong);
    transition: color var(--t-fast) var(--ease),
      background var(--t-fast) var(--ease);
  }
  .tab:last-child {
    border-right: none;
  }
  .tab.is-active {
    color: var(--bg-base);
    background: var(--accent);
  }
  .tab:not(.is-active):not(:disabled):hover {
    color: var(--fg);
    background: var(--bg-elev-1);
  }
  .tab:disabled {
    color: var(--fg-quiet);
    cursor: not-allowed;
  }

  /* ---- Reveal-once key block ---- */
  .reveal {
    padding: var(--gap-5);
    border: 1px solid var(--warn);
    background: var(--warn-soft);
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
  }
  .reveal__head {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--warn);
  }
  .reveal__key {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--fg);
    word-break: break-all;
    user-select: all;
    background: var(--bg-base);
    padding: var(--gap-3) var(--gap-4);
    border: 1px solid var(--line-strong);
  }
  .reveal__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-3);
  }
  .reveal__note {
    font-size: 12px;
    color: var(--fg-soft);
    line-height: 1.5;
  }

  /* ---- Toast ---- */
  .toast-stack {
    position: fixed;
    bottom: var(--gap-5);
    right: var(--gap-5);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    z-index: 100;
  }
  .toast {
    padding: var(--gap-3) var(--gap-4);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg);
    background: var(--bg-elev-2);
    border: 1px solid var(--line-strong);
    border-left-width: 3px;
    animation: toastIn 200ms var(--ease);
    min-width: 260px;
  }
  .toast--ok {
    border-left-color: var(--ok);
  }
  .toast--err {
    border-left-color: var(--err);
  }
  .toast--info {
    border-left-color: var(--info);
  }

  /* ---- Login gate ---- */
  .gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--gap-5);
  }
  .gate__card {
    width: min(420px, 100%);
    padding: var(--gap-7);
    border: 1px solid var(--line-strong);
    background: var(--bg-elev-1);
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
  }
  .gate__brand {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-quiet);
  }
  .gate__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 30px;
    line-height: 1.1;
    color: var(--fg);
  }
  .gate__hint {
    font-size: 13px;
    color: var(--fg-mute);
    line-height: 1.55;
  }
  .gate__remember {
    display: flex;
    align-items: center;
    gap: var(--gap-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-mute);
    cursor: pointer;
    user-select: none;
  }
  .gate__checkbox {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
    position: relative;
  }
  .gate__checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  .gate__checkbox:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid var(--bg-base);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  .gate__err {
    color: var(--err);
    font-family: var(--font-mono);
    font-size: 12px;
  }

  /* ---- Misc ---- */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-3);
    align-items: center;
  }
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
  }
  .stack--lg {
    gap: var(--gap-5);
  }
  .row-cells {
    display: contents;
  }
  .actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-2);
  }
  .kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-quiet);
  }
  .meta-line {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-quiet);
  }
  .meta-line__sep {
    color: var(--fg-quiet);
  }
}

@layer motion {
  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.5);
      opacity: 0.6;
    }
  }
  @keyframes veilIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes modalIn {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes toastIn {
    from {
      transform: translateX(20px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .stagger > * {
    animation: fadeUp 380ms var(--ease) both;
  }
  .stagger > *:nth-child(1) {
    animation-delay: 40ms;
  }
  .stagger > *:nth-child(2) {
    animation-delay: 100ms;
  }
  .stagger > *:nth-child(3) {
    animation-delay: 160ms;
  }
  .stagger > *:nth-child(4) {
    animation-delay: 220ms;
  }
  .stagger > *:nth-child(5) {
    animation-delay: 280ms;
  }
}

@media (max-width: 880px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .nav {
    position: relative;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line-quiet);
    padding: var(--gap-5);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-4);
  }
  .nav__foot {
    border-top: none;
    padding-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-5);
  }
  .main {
    padding: var(--gap-5);
  }
  .section-head__title {
    font-size: 32px;
  }
  .data__row--accounts,
  .data__row--keys {
    grid-template-columns: 1fr;
    gap: var(--gap-2);
  }
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}