/* ==========================================================================
   Panel Stylesheet - Kumo Complements
   Layout and component rules not covered by kumo-standalone.css.
   Built exclusively on Kumo design tokens (--color-kumo-*, --text-color-kumo-*).
   ========================================================================== */

/* ─── Base ──────────────────────────────────────────────────────────────── */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
}

/* ─── Button Emphasis Variables ─────────────────────────────────────────── */
/* Kumo sets these inline from React; defined here so CSP can forbid inline styles */

.kumo-btn-primary {
  --kumo-button-emphasis-ring: color-mix(in oklch, var(--color-kumo-brand), black 10%);
  --kumo-button-emphasis-bg: color-mix(in oklch, var(--color-kumo-brand), white 30%);
  --kumo-button-emphasis-gradient-start: color-mix(in oklch, var(--color-kumo-brand), white 15%);
  --kumo-button-emphasis-gradient-end: var(--color-kumo-brand);
}

.kumo-btn-destructive {
  --kumo-button-emphasis-ring: color-mix(in oklch, var(--color-kumo-danger), black 10%);
  --kumo-button-emphasis-bg: color-mix(in oklch, var(--color-kumo-danger), white 30%);
  --kumo-button-emphasis-gradient-start: color-mix(in oklch, var(--color-kumo-danger), white 15%);
  --kumo-button-emphasis-gradient-end: var(--color-kumo-danger);
}

/* Emphasis gradient overlay (Kumo renders it as a child span; a pseudo-element
   keeps the label as a direct text node for accessible names) */
.kumo-btn-primary,
.kumo-btn-destructive {
  isolation: isolate;
}

.kumo-btn-primary::before,
.kumo-btn-destructive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(to bottom, var(--kumo-button-emphasis-gradient-start), var(--kumo-button-emphasis-gradient-end));
  box-shadow: inset 0 1px 0 0 var(--kumo-button-emphasis-bg);
}

.kumo-btn-primary:not(:disabled):hover::before,
.kumo-btn-destructive:not(:disabled):hover::before {
  background-image: linear-gradient(to bottom, var(--kumo-button-emphasis-bg), var(--kumo-button-emphasis-gradient-end));
}

button[aria-busy="true"] {
  cursor: progress;
}

/* ─── Application Shell ─────────────────────────────────────────────────── */

.app-shell {
  --sidebar-width: 16.25rem;
  --sidebar-active-bg: var(--color-kumo-tint);
  --sidebar-bg: var(--color-kumo-base);
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: var(--sidebar-width);
  position: sticky;
  top: 0;
  height: 100vh;
}

.app-main {
  flex: 1;
  min-width: 0;
}

.app-topbar {
  display: none;
}

.app-content {
  /* Full width beside the sidebar: only an edge padding, no centered column */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 2rem 2rem 4rem;
}

@media (max-width: 860px) {
  .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  .app-sidebar[data-open="true"] {
    transform: translateX(0);
  }
  .app-topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .app-content {
    padding: 1.25rem 1rem 3rem;
  }
}

/* ─── Page Rhythm ───────────────────────────────────────────────────────── */

.stack-8 > * + * { margin-top: 2rem; }
.stack-6 > * + * { margin-top: 1.5rem; }
.stack-4 > * + * { margin-top: 1rem; }

.grid-auto {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.form-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid > .span-2 {
  grid-column: 1 / -1;
}

/* Scroll wrappers contain absolutely positioned descendants (such as
   .sr-only header labels) so they scroll and clip inside the box instead
   of widening the page on narrow screens */
.overflow-x-auto,
.overflow-auto {
  position: relative;
}

@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-title {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color-kumo-default);
  margin: 0;
}

/* Elements focused by script only (page title after in-place navigation, tabindex -1)
   are not controls: no focus ring when a key is pressed later, e.g. a screenshot shortcut */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Focus marks follow real keyboard navigation only (html[data-kbd], set by app.js): a click
   followed by a shortcut such as a screenshot key no longer outlines the clicked control.
   Text fields keep their focus style; keyboard users (Tab, arrows, Enter) still get every mark. */
html:not([data-kbd]) :focus-visible:not(input:is([type="text"], [type="email"], [type="search"], [type="password"], [type="number"], [type="tel"], [type="url"], :not([type])), textarea, select, [contenteditable="true"]) {
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* Choice cards and switches that draw the mark on a sibling or parent of the focused input */
html:not([data-kbd]) input:focus-visible + *,
html:not([data-kbd]) :has(> input:is([type="radio"], [type="checkbox"], [type="file"]):focus-visible),
html:not([data-kbd]) :has(input:is([type="radio"], [type="checkbox"]):focus-visible) {
  outline: none !important;
}

html:not([data-kbd]) .et-switch:focus-visible {
  box-shadow: none;
}

html:not([data-kbd]) .ap-model-chip:focus-visible {
  border-color: var(--color-kumo-line);
}

.stat-value {
  font-size: 1.75rem;
  line-height: 1.1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-color-kumo-default);
}

/* ─── Guest Pages ───────────────────────────────────────────────────────── */

.guest-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 1.5rem;
}

.guest-card {
  width: 100%;
  max-width: 420px;
}

.guest-card-wide {
  width: 100%;
  max-width: 640px;
}

/* ─── Form Controls ─────────────────────────────────────────────────────── */

.kumo-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23737373'%3E%3Cpath d='M181.66 170.34a8 8 0 0 1 0 11.32l-48 48a8 8 0 0 1-11.32 0l-48-48a8 8 0 0 1 11.32-11.32L128 212.69l42.34-42.35a8 8 0 0 1 11.32 0Zm-96-84.68L128 43.31l42.34 42.35a8 8 0 0 0 11.32-11.32l-48-48a8 8 0 0 0-11.32 0l-48 48a8 8 0 0 0 11.32 11.32Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
}

.kumo-checkbox {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  accent-color: var(--color-kumo-contrast);
  cursor: pointer;
}

/* ─── Dialog ────────────────────────────────────────────────────────────── */

dialog.kumo-dialog::backdrop {
  background: var(--color-kumo-recessed);
  opacity: 0.8;
}

/* ─── Test Result Indicator ─────────────────────────────────────────────── */

[data-test-result][data-state="success"] {
  background: var(--color-kumo-success-tint);
  color: var(--text-color-kumo-success);
}

[data-test-result][data-state="error"] {
  background: var(--color-kumo-danger-tint);
  color: var(--text-color-kumo-danger);
}

/* ─── QRIS Invoice ──────────────────────────────────────────────────────── */

.qris-canvas {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a0a0a;
  font-size: 0.8125rem;
  text-align: center;
}

.qris-canvas svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Usage Chart ───────────────────────────────────────────────────────── */

.usage-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 140px;
  padding-top: 0.5rem;
}

.usage-bar {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  border-radius: 2px;
  background: var(--color-kumo-recessed);
}

.usage-bar-fill {
  display: block;
  width: 100%;
  height: 0;
  border-radius: 2px;
  background: var(--color-kumo-brand);
  transition: height 200ms ease-out;
}

/* ─── Landing Page ──────────────────────────────────────────────────────── */

/* Layout */
.landing-container {
  position: relative;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.landing-narrow {
  max-width: 780px;
}

/* Dark subtrees re-resolve Kumo tokens, so colors must be set on the subtree root */
.landing-nav,
.landing-hero,
.landing-final,
.landing-footer,
.landing-calc-result {
  color: var(--text-color-kumo-default);
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklch, var(--color-kumo-canvas) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-kumo-line);
}

/* Hero: pulled up behind the translucent sticky nav so its background fills the top */
.landing-hero {
  --landing-nav-h: 49px;
  position: relative;
  overflow: hidden;
  margin-top: calc(var(--landing-nav-h) * -1);
  padding: calc(5rem + var(--landing-nav-h)) 0 4rem;
  background: var(--color-kumo-canvas);
}

.landing-glow {
  position: absolute;
  inset: -20% 10% auto;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--color-kumo-brand) 38%, transparent), transparent);
  opacity: 0.55;
  filter: blur(40px);
}

.landing-title {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.landing-title-muted {
  color: var(--text-color-kumo-subtle);
}

.landing-rotator {
  position: relative;
  display: inline-grid;
  vertical-align: bottom;
  color: color-mix(in oklch, var(--color-kumo-brand), white 25%);
}

.landing-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 400ms ease, transform 400ms ease;
  white-space: nowrap;
}

.landing-rotator > span.is-active {
  opacity: 1;
  transform: translateY(0);
}

.landing-lead {
  margin: 0;
  max-width: 40rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-color-kumo-subtle);
}

.landing-eyebrow {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-color-kumo-brand);
}

/* Hero Layers: grid, pointer spotlight, content */
.landing-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  z-index: 1;
}

.landing-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--text-color-kumo-default) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--text-color-kumo-default) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 30%, transparent 100%);
}

.landing-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 30%), color-mix(in oklch, var(--color-kumo-brand) 22%, transparent), transparent 70%);
  transition: opacity 400ms ease;
}

.landing-hero.is-spot .landing-spotlight {
  opacity: 1;
}

/* Trust row */
.landing-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--text-color-kumo-subtle);
}

.landing-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.landing-trust li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 1.15rem;
  border-radius: 50%;
  background: var(--color-kumo-line);
}

.landing-trust strong {
  color: var(--text-color-kumo-default);
  font-weight: 600;
}

/* Hero product window with tilt and glowing edge */
.landing-hero-window {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin-top: 1rem;
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 300ms ease-out;
  box-shadow: 0 30px 80px -30px color-mix(in oklch, var(--color-kumo-brand) 45%, transparent), 0 0 0 1px color-mix(in oklch, var(--color-kumo-brand) 18%, transparent);
}

.landing-wtabs {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-recessed);
}

.landing-wtabs button {
  min-height: 26px;
  padding: 0.15rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.landing-wtabs button.is-on {
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
}

/* Playground */
.landing-play {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 330px;
}

.landing-play-side {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border-right: 1px solid var(--color-kumo-line);
  background: color-mix(in oklch, var(--color-kumo-elevated) 60%, transparent);
}

.landing-play-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color-kumo-subtle);
}

.landing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.landing-chip,
.landing-prompt {
  border: 1px solid var(--color-kumo-line);
  background: transparent;
  color: var(--text-color-kumo-default);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.landing-chip {
  min-height: 28px;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
}

.landing-chip.is-on {
  border-color: var(--color-kumo-brand);
  background: color-mix(in oklch, var(--color-kumo-brand) 18%, transparent);
}

.landing-prompts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.landing-prompt {
  min-height: 40px;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  text-align: left;
}

.landing-chip:hover,
.landing-prompt:hover {
  border-color: var(--color-kumo-interact);
  background: var(--color-kumo-tint);
}

.landing-prompt.is-on {
  border-color: color-mix(in oklch, var(--color-kumo-brand) 70%, transparent);
  background: color-mix(in oklch, var(--color-kumo-brand) 12%, transparent);
}

.landing-play-main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
}

.landing-play-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.landing-play-user p {
  color: var(--text-color-kumo-subtle);
}

.landing-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 0.5rem;
  background: var(--color-kumo-fill);
  font-size: 0.6875rem;
  font-weight: 600;
}

.landing-avatar-ai {
  background: var(--color-kumo-brand);
  color: #fff;
}

.landing-play-answer {
  min-height: 5.5em;
  white-space: pre-line;
}

.landing-play.is-running .landing-play-answer::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--color-kumo-brand);
  animation: landing-caret 900ms steps(1) infinite;
}

@keyframes landing-caret {
  50% { opacity: 0; }
}

.landing-play-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-kumo-line);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.landing-play-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.landing-play-cost {
  color: var(--text-color-kumo-success);
}

.landing-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-kumo-success);
}

.landing-play.is-running .landing-live-dot {
  background: var(--color-kumo-brand);
  animation: landing-pulse 1s ease-in-out infinite;
}

@keyframes landing-pulse {
  50% { transform: scale(1.6); opacity: 0.5; }
}

.landing-play-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.3rem 0.35rem 0.3rem 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 999px;
  background: var(--color-kumo-control);
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.landing-send {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--color-kumo-brand);
  color: #fff;
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease;
}

.landing-send:hover {
  transform: scale(1.06);
}

.landing-send:disabled {
  opacity: 0.5;
  cursor: progress;
  transform: none;
}

/* Compatible tools marquee */
.landing-marquee {
  position: relative;
  z-index: 1;
  margin-top: 3.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.landing-marquee-track {
  display: flex;
  width: max-content;
  animation: landing-marquee 38s linear infinite;
}

.landing-marquee:hover .landing-marquee-track {
  animation-play-state: paused;
}

.landing-marquee-list {
  display: flex;
  gap: 2.75rem;
  margin: 0;
  padding: 0 1.375rem;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
}

.landing-marquee-list li {
  opacity: 0.7;
  transition: opacity 150ms ease, color 150ms ease;
}

.landing-marquee-list li:hover {
  opacity: 1;
  color: var(--text-color-kumo-default);
}

@keyframes landing-marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 860px) {
  .landing-play {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-play-side {
    border-right: 0;
    border-bottom: 1px solid var(--color-kumo-line);
  }
  .landing-prompts {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .landing-prompt {
    flex-shrink: 0;
  }
  .landing-trust li + li::before {
    display: none;
  }
  .landing-hero-window .landing-window-bar > .text-xs {
    display: none;
  }
  .landing-marquee {
    margin-top: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-marquee-track,
  .landing-play.is-running .landing-live-dot,
  .landing-play.is-running .landing-play-answer::after {
    animation: none;
  }
  .landing-hero-window {
    transition: none;
  }
}

/* Browser-style window */
.landing-window {
  overflow: hidden;
  border-radius: 0.875rem;
  background: var(--color-kumo-base);
  border: 1px solid var(--color-kumo-line);
  text-align: left;
}

.landing-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
}

.landing-dots {
  display: inline-flex;
  gap: 6px;
}

.landing-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-kumo-fill);
}

.landing-window-url {
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
  background: var(--color-kumo-recessed);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Console simulation */
.landing-console {
  display: flex;
  flex-direction: column;
}

.landing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-kumo-line);
}

.landing-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--color-kumo-line);
}

.landing-kpi:last-child {
  border-right: 0;
}

.landing-kpi-value {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.landing-console-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 230px;
}

.landing-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--color-kumo-line);
}

.landing-bars span {
  flex: 1;
  height: 10%;
  border-radius: 3px 3px 0 0;
  background: color-mix(in oklch, var(--color-kumo-brand) 75%, transparent);
  transition: height 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.landing-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0.75rem;
  font-size: 0.75rem;
  overflow: hidden;
}

.landing-log li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 0.75rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.375rem;
  animation: landing-row-in 450ms ease both;
}

.landing-log li:last-child {
  background: var(--color-kumo-tint);
}

.landing-log .ok {
  color: var(--text-color-kumo-success);
}

.landing-log .muted {
  color: var(--text-color-kumo-subtle);
}

.landing-log .model {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes landing-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sections */
.landing-section {
  padding: 5rem 0;
}

.landing-section-alt {
  background: var(--color-kumo-base);
  border-top: 1px solid var(--color-kumo-line);
  border-bottom: 1px solid var(--color-kumo-line);
}

.landing-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 46rem;
}

.landing-h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  font-weight: 650;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.landing-sub {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  line-height: 1.6;
}

/* Bento features */
.landing-bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
}

.landing-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.landing-tile:hover {
  transform: translateY(-2px);
}

.landing-tile-wide {
  grid-column: span 2;
}

.landing-diff {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--color-kumo-recessed);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: nowrap;
}

.landing-diff-del {
  color: var(--text-color-kumo-danger);
  text-decoration: line-through;
  opacity: 0.8;
}

.landing-diff-add {
  color: var(--text-color-kumo-success);
}

.landing-keydemo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-recessed);
  color: inherit;
  cursor: pointer;
}

.landing-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-kumo-fill);
  transition: background 200ms ease;
}

.landing-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 200ms ease;
}

.landing-keydemo[aria-pressed="true"] .landing-switch {
  background: var(--color-kumo-success);
}

.landing-keydemo[aria-pressed="true"] .landing-switch i {
  transform: translateX(16px);
}

.landing-qr {
  position: relative;
  width: 112px;
  height: 112px;
  align-self: center;
  padding: 8px;
  border-radius: 0.75rem;
  background: #fff;
  outline: 1px solid var(--color-kumo-line);
  overflow: hidden;
}

.landing-qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-qr-lg {
  width: 168px;
  height: 168px;
  padding: 10px;
}

.landing-qr-scan {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-kumo-brand);
  box-shadow: 0 0 10px 1px color-mix(in oklch, var(--color-kumo-brand) 70%, transparent);
  opacity: 0.85;
  animation: landing-scan 2.2s ease-in-out infinite alternate;
}

@keyframes landing-scan {
  from { top: 4%; }
  to { top: 94%; }
}

.landing-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
}

.landing-spark span {
  flex: 1;
  height: 20%;
  border-radius: 2px;
  background: var(--color-kumo-brand);
  opacity: 0.85;
  transition: height 500ms ease;
}

.landing-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--color-kumo-brand);
  transition: width 900ms ease, background 300ms ease;
}

/* Calculator */
.landing-calc {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
}

.landing-range {
  width: 100%;
  accent-color: var(--color-kumo-brand);
  height: 28px;
  cursor: pointer;
}

.landing-calc-result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--color-kumo-canvas);
  border: 1px solid var(--color-kumo-line);
}

.landing-calc-usd {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.landing-calc-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-kumo-line);
}

/* Interactive stepper */
.landing-stepper {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}

.landing-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.landing-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  width: 100%;
  min-height: 48px;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 200ms ease, border-color 200ms ease;
}

.landing-step:hover,
.landing-step.is-active {
  background: var(--color-kumo-base);
  border-color: var(--color-kumo-interact);
}

.landing-step-num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-kumo-fill);
}

.landing-step.is-active .landing-step-num {
  background: var(--color-kumo-brand);
  color: #fff;
}

.landing-step-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.landing-step-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-kumo-brand);
}

.landing-step.is-active.is-running .landing-step-progress i {
  animation: landing-progress var(--step-duration, 5s) linear forwards;
}

@keyframes landing-progress {
  from { width: 0; }
  to { width: 100%; }
}

.landing-step-stage {
  min-height: 320px;
}

.landing-step-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 1.5rem;
  animation: landing-row-in 350ms ease both;
}

.landing-fake-input {
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-control);
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
}

.landing-fake-button {
  padding: 0.6rem;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: 500;
  color: #fff;
  background: var(--color-kumo-brand);
}

.landing-step-content {
  max-width: 26rem;
}

/* Code sample that wraps inside narrow mock panels instead of clipping */
.code-block.landing-code-wrap {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Integrate */
.landing-split {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}

.landing-code-tab {
  min-height: 28px;
  padding: 0.15rem 0.6rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8rem;
  cursor: pointer;
}

.landing-code-tab[aria-selected="true"] {
  color: var(--text-color-kumo-default);
}

.landing-editor {
  margin: 0;
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  min-height: 290px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.7;
  white-space: pre;
}

.landing-checks li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.5;
}

.landing-checks li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.45em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--text-color-kumo-success);
  border-bottom: 2px solid var(--text-color-kumo-success);
  transform: rotate(-45deg);
}

/* FAQ */
.landing-faq summary {
  list-style: none;
}

.landing-faq summary::-webkit-details-marker {
  display: none;
}

.landing-faq[open]:not(.is-closing) .landing-faq-icon {
  transform: rotate(45deg);
}

.landing-faq-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-faq-body {
  overflow: hidden;
}

/* Final CTA and footer */
.landing-final {
  position: relative;
  overflow: hidden;
  padding: 6rem 0;
  background: var(--color-kumo-canvas);
}

.landing-footer {
  background: var(--color-kumo-canvas);
  border-top: 1px solid var(--color-kumo-line);
}

/* Scroll reveal */
/* Value-less attribute only: [data-reveal="id"] is the secret Show/Hide button */
html.js [data-reveal=""] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}

html.js [data-reveal=""].is-visible {
  opacity: 1;
  transform: none;
}

/* Mobile sticky CTA */
.landing-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

@media (max-width: 960px) {
  .landing-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-calc,
  .landing-stepper,
  .landing-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .landing-hero {
    padding: calc(3rem + var(--landing-nav-h)) 0 2.5rem;
  }
  .landing-section {
    padding: 3.25rem 0;
  }
  .landing-nav-links {
    display: none;
  }
  .landing-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-kpi:nth-child(2) {
    border-right: 0;
  }
  .landing-kpi:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-kumo-line);
  }
  .landing-console-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-bars {
    height: 110px;
    border-right: 0;
    border-bottom: 1px solid var(--color-kumo-line);
  }
  .landing-log li {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .landing-log li .time {
    display: none;
  }
  /* Taller nav bar so 40px buttons keep breathing room above and below */
  .landing-nav > .landing-container {
    height: 3.5rem;
  }
  .landing-nav a[href] {
    min-height: 40px;
  }
  .landing-nav .kumo-btn-primary {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.625rem;
  }
  .landing-hero {
    --landing-nav-h: 57px;
  }
  body:has(.landing-sticky-cta:not([hidden])) .landing-footer {
    padding-bottom: 5rem;
  }
  /* Touch targets: at least 48px tall on phones */
  .landing-hero a[href],
  .landing-final a[href],
  .landing-calc-result a[href],
  .landing-sticky-cta a[href],
  .landing-code-tab,
  .landing-copy,
  .landing-faq summary,
  .landing-footer a[href] {
    min-height: 48px;
  }
}

@media (max-width: 600px) {
  .landing-bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-tile-wide {
    grid-column: auto;
  }
  .landing-calc-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 861px) {
  .landing-sticky-cta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal=""],
  .landing-rotator > span,
  .landing-log li,
  .landing-step-panel {
    transition: none;
    animation: none;
  }
  html.js [data-reveal=""] {
    opacity: 1;
    transform: none;
  }
  .landing-qr-scan {
    animation: none;
    top: 48%;
  }
}

/* ─── Code Block ────────────────────────────────────────────────────────── */

.code-block {
  margin: 0;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.6;
  background: var(--color-kumo-recessed);
  border-radius: 0.5rem;
  white-space: pre;
}

.break-all {
  word-break: break-all;
}

/* ─── Usage Overview ────────────────────────────────────────────────────── */

/* Series & Activity Palette */
:root {
  --ov-s0: #3b82f6;
  --ov-s1: #10b981;
  --ov-s2: #8b5cf6;
  --ov-s3: #f59e0b;
  --ov-s4: #ec4899;
  --ov-s5: #94a3b8;
  --ov-l0: #f3f4f6;
  --ov-l1: #a7f3d0;
  --ov-l2: #34d399;
  --ov-l3: #10b981;
  --ov-l4: #047857;
}

[data-mode="dark"] {
  --ov-l0: #1f2937;
  --ov-l1: #064e3b;
  --ov-l2: #047857;
  --ov-l3: #10b981;
  --ov-l4: #6ee7b7;
}

/* Header & Filters */
.ov-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ov-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ov-select {
  height: 2rem;
  max-width: 220px;
  padding: 0 1.75rem 0 0.65rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.375rem;
  background: var(--color-kumo-control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
  color: var(--text-color-kumo-default);
  font-size: 0.75rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}

.ov-select:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 1px;
}

/* Cards */
.ov-card {
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  overflow: hidden;
}

.ov-pad {
  padding: 1rem;
}

.ov-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ov-card-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.ov-muted {
  color: var(--text-color-kumo-subtle);
}

.ov-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: 0.875rem;
  color: var(--text-color-kumo-subtle);
}

.ov-empty-lg {
  height: 260px;
}

/* KPI Cards */
.ov-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.ov-kpis-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* KPI cards share one height; the sparkline always sits at the bottom, so an extra line in one card keeps the row aligned */
.ov-kpis > .ov-card {
  display: flex;
  flex-direction: column;
}

.ov-kpis > .ov-card > .ov-spark-wrap {
  margin-top: auto;
}

/* Package cards: one per package the customer owns, the selected one outlined */
.ov-pkgs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

/* Card widths per row (set by the usage view so rows stay balanced) */
.ov-span-3 { grid-column: span 3; }
.ov-span-4 { grid-column: span 4; }
.ov-span-6 { grid-column: span 6; }
.ov-span-12 { grid-column: span 12; }

.ov-pkg {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.ov-pkg:hover,
.ov-pkg.is-on {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 45%, var(--color-kumo-line));
}

a.ov-pkg:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.ov-pkg-label {
  font-size: 0.875rem;
  color: var(--text-color-kumo-subtle);
}

.ov-pkg.is-on .ov-pkg-label {
  color: var(--color-kumo-brand);
  font-weight: 500;
}

.ov-pkg-value {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-color-kumo-default);
}

.ov-pkg-value small {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-color-kumo-subtle);
}

.ov-pkg-meta {
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.ov-pkg-bar {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-kumo-fill);
}

.ov-pkg-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-kumo-brand);
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ov-pkg-fill {
    transition: none;
  }
}

/* Chart tools: split by model or key, and one key */
.ov-chart-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: -0.25rem 0 1rem;
}

.ov-seg-sm .ov-seg-item {
  min-height: 1.75rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

.ov-key-filter .ov-select {
  min-width: 12rem;
}

.ov-kpi-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1rem 0.5rem;
}

.ov-kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-kpi-value {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Secondary line under a KPI value (prompt cache tokens) */
.ov-kpi-meta {
  margin-top: -0.25rem;
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-chip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.ov-tone-blue { color: #60a5fa; }
.ov-tone-green { color: #34d399; }
.ov-tone-violet { color: #a78bfa; }
.ov-tone-amber { color: #fbbf24; }

.ov-spark-wrap {
  height: 36px;
}

.ov-spark {
  display: block;
  width: 100%;
  height: 36px;
}

.ov-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.ov-spark-area {
  fill: currentColor;
  opacity: 0.12;
}

/* Segmented Toggle */
.ov-seg {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--color-kumo-line) 60%, transparent);
  border-radius: 0.625rem;
  background: var(--color-kumo-recessed);
}

.ov-seg button,
.ov-seg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.125rem;
  padding: 0.375rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.ov-seg button:hover,
.ov-seg-item:hover {
  color: var(--text-color-kumo-default);
}

.ov-seg button.is-on,
.ov-seg-item.is-on {
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-strong, var(--text-color-kumo-default));
  box-shadow: 0 0 0 1px var(--color-kumo-line), 0 1px 2px rgb(0 0 0 / 0.08);
}

.ov-seg-item:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: -2px;
}

.ov-seg-count {
  color: var(--text-color-kumo-subtle);
  font-variant-numeric: tabular-nums;
}

.ov-seg-count.is-warn {
  color: var(--text-color-kumo-warning, #b45309);
  font-weight: 600;
}

/* Dark mode: a deeper track and a clearly raised active segment */
[data-mode="dark"] .ov-seg,
[data-mode="dark"] .ml-seg {
  border-color: rgb(255 255 255 / 0.1);
  background: rgb(0 0 0 / 0.35);
}

[data-mode="dark"] .ov-seg button,
[data-mode="dark"] .ov-seg-item,
[data-mode="dark"] .ml-seg button {
  color: rgb(255 255 255 / 0.55);
}

[data-mode="dark"] .ov-seg button:hover,
[data-mode="dark"] .ov-seg-item:hover,
[data-mode="dark"] .ml-seg button:hover {
  color: rgb(255 255 255 / 0.9);
}

[data-mode="dark"] .ov-seg button.is-on,
[data-mode="dark"] .ov-seg-item.is-on,
[data-mode="dark"] .ml-seg button.is-on {
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.4);
}

[data-mode="dark"] .ov-seg-count {
  color: rgb(255 255 255 / 0.45);
}

[data-mode="dark"] .ov-seg-item.is-on .ov-seg-count {
  color: rgb(255 255 255 / 0.7);
}

[data-mode="dark"] .tab-count-alert {
  background: rgb(245 158 11 / 0.18);
  color: #fbbf24;
}

/* Long tab sets scroll sideways instead of overflowing the page */
.seg-wrap {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Many tabs: the group keeps its frame and its items scroll inside it */
.ov-seg {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  vertical-align: top;
}

.ov-seg::-webkit-scrollbar {
  display: none;
}

/* Edge buttons overlay the first and last visible tab without taking up room;
   the negative offset reaches over the group padding to the frame edge */
.ov-seg .seg-arrow {
  position: sticky;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.ov-seg .seg-arrow-prev {
  left: -0.25rem;
  margin-right: -2.25rem;
  background: linear-gradient(to right, var(--color-kumo-recessed) 55%, transparent);
  justify-content: flex-start;
  padding-left: 0.25rem;
}

.ov-seg .seg-arrow-next {
  right: -0.25rem;
  margin-left: -2.25rem;
  background: linear-gradient(to left, var(--color-kumo-recessed) 55%, transparent);
  justify-content: flex-end;
  padding-right: 0.25rem;
}

.ov-seg .seg-arrow:hover {
  color: var(--text-color-kumo-default);
}

.ov-seg .seg-arrow[hidden] {
  display: none;
}

/* Stacked Chart */
.ov-chart {
  position: relative;
  height: 260px;
}

/* Usage chart: stacked bars grow from the baseline on the first draw and on metric or scale switches */
.ov-chart-svg.is-animating .ov-bar {
  transform-box: view-box;
  animation: ov-bar-grow 0.5s cubic-bezier(0.22, 0.8, 0.24, 1) both;
}

.ov-chart-svg.is-animating .ov-axis,
.ov-chart-svg.is-animating .ov-grid {
  animation: ov-chart-fade 0.3s ease-out both;
}

@keyframes ov-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes ov-chart-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-chart-svg.is-animating .ov-bar,
  .ov-chart-svg.is-animating .ov-axis,
  .ov-chart-svg.is-animating .ov-grid {
    animation: none;
  }
}

.ov-chart-svg {
  display: block;
  max-width: 100%;
}

.ov-grid {
  stroke: var(--color-kumo-line);
  stroke-dasharray: 3 3;
}

.ov-axis {
  fill: var(--text-color-kumo-subtle);
  font-size: 11px;
}

.ov-hit {
  fill: transparent;
}

.ov-hit:hover {
  fill: color-mix(in srgb, var(--text-color-kumo-subtle) 8%, transparent);
}

rect.ov-s0, .ov-dot.ov-s0 { fill: var(--ov-s0); background: var(--ov-s0); }
rect.ov-s1, .ov-dot.ov-s1 { fill: var(--ov-s1); background: var(--ov-s1); }
rect.ov-s2, .ov-dot.ov-s2 { fill: var(--ov-s2); background: var(--ov-s2); }
rect.ov-s3, .ov-dot.ov-s3 { fill: var(--ov-s3); background: var(--ov-s3); }
rect.ov-s4, .ov-dot.ov-s4 { fill: var(--ov-s4); background: var(--ov-s4); }
rect.ov-s5, .ov-dot.ov-s5 { fill: var(--ov-s5); background: var(--ov-s5); }

.ov-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.ov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.ov-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ov-chart-tip {
  position: absolute;
  z-index: 10;
  min-width: 170px;
  padding: 0.5rem 0.6rem;
  border-radius: 0.375rem;
  background: #111827;
  color: #fff;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

.ov-chart-tip-head {
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.ov-chart-tip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1px 0;
  color: #d1d5db;
}

.ov-chart-tip-name {
  flex: 1;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Breakdown Table */
.ov-table-wrap {
  overflow-x: auto;
}

.ov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ov-table th {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--color-kumo-line);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-color-kumo-subtle);
  text-align: left;
  white-space: nowrap;
}

.ov-table th.text-right {
  text-align: right;
}

.ov-table td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--color-kumo-hairline, var(--color-kumo-line));
  white-space: nowrap;
}

.ov-table tbody tr:last-child td {
  border-bottom: 0;
}

.ov-table tbody tr:hover td {
  background: var(--color-kumo-tint);
}

.ov-col-share {
  width: 28%;
  min-width: 160px;
}

/* Phone tables: two columns per row, the rest in a detail row opened by the row toggle */
.ov-m-only,
.ov-m-table tr.ov-m-detail {
  display: none;
}

.ov-table tbody tr.ov-last td {
  border-bottom: 0;
}

.ov-m-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.ov-m-toggle svg {
  transition: transform 0.2s ease;
}

.ov-m-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .ov-m-toggle svg,
  .ov-m-detail-body {
    transition: none;
  }
}

.ov-m-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.8125rem;
}

.ov-m-dl dt {
  color: var(--text-color-kumo-subtle);
}

.ov-m-dl dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .ov-m-table {
    table-layout: fixed;
  }
  .ov-m-table .ov-m-hide {
    display: none;
  }
  .ov-m-table th.ov-m-only,
  .ov-m-table td.ov-m-only {
    display: table-cell;
    width: 2.6rem;
    padding-left: 0.25rem;
    text-align: right;
  }
  .ov-m-table tr.ov-m-detail:not([hidden]) {
    display: table-row;
  }
  .ov-m-table tr.ov-m-detail td {
    padding: 0;
    background: var(--color-kumo-tint);
    white-space: normal;
  }
  /* Detail row slides open: rows animate from 0fr to 1fr while the content fades in */
  .ov-m-detail-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
  }
  .ov-m-detail.is-open .ov-m-detail-body {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .ov-m-detail-body > div {
    min-height: 0;
    overflow: hidden;
  }
  .ov-m-detail-body .ov-m-dl {
    padding: 0.6rem 0.75rem 0.75rem;
  }
  .ov-m-table tbody tr.ov-m-detail:hover td {
    background: var(--color-kumo-tint);
  }
  .ov-table.ov-m-table td:first-child > span {
    min-width: 0;
  }
  .ov-m-share .ov-col-share {
    width: 42%;
    min-width: 0;
  }
  .ov-m-status th:nth-last-child(2) {
    width: 5.5rem;
  }
  .wl-m-table th:nth-child(2) {
    width: 42%;
  }
}

/* Wallet tables: every row is followed by its detail row, so stripe every second data row */
.wl-m-table > tbody > tr:nth-child(4n + 3),
.m-stripe > tbody > tr:nth-child(4n + 3) {
  background: var(--color-kumo-elevated);
}

/* Rows hidden by a filter take their detail row with them */
.ov-m-table tr[hidden] + tr.ov-m-detail {
  display: none !important;
}

/* Moved block content (buttons, forms, flex rows) sits at the right like the values */
.ov-m-dl dd[data-m-from] > :is(.flex, form, div) {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

.ov-m-dl dd.m-wide {
  grid-column: 1 / -1;
}

/* Tables collapsed on phones by app.js: the two visible columns wrap instead of overflowing */
@media (max-width: 640px) {
  table.m-auto-table {
    width: 100%;
    min-width: 0;
  }
  .m-auto-table :is(td, th):not(.ov-m-only) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Request log: failed badge opens the failure reason in the shared dark tooltip */
.ov-fail {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  cursor: pointer;
}

.ov-fail:hover .rounded-full,
.ov-fail[aria-expanded="true"] .rounded-full {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ov-fail:focus-visible {
  outline: 2px solid var(--color-kumo-ring, currentColor);
  outline-offset: 2px;
}

/* Doubled class: the shared .ov-act-tip rules come later in this file and must not win */
.ov-act-tip.ov-fail-tip {
  width: max-content;
  max-width: 260px;
  padding: 0.45rem 0.6rem;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  transform: none;
}

.ov-act-tip.ov-fail-tip[hidden] {
  display: none;
}

/* Request log pagination */
.ov-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ov-bar {
  width: 100%;
  max-width: 220px;
  height: 6px;
}

.ov-bar-track {
  fill: var(--color-kumo-fill);
}

/* Activity Calendar */
.ov-act-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ov-act-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-color-kumo-subtle);
}

.ov-act-cell {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.ov-act-scroll {
  overflow-x: auto;
}

.ov-act-inner {
  min-width: 640px;
}

.ov-act-months {
  display: flex;
  margin-bottom: 4px;
}

.ov-act-gutter {
  flex-shrink: 0;
  width: 2rem;
}

.ov-act-month-row {
  display: flex;
  flex: 1;
  gap: 3px;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  color: var(--text-color-kumo-subtle);
}

.ov-act-month-row span {
  flex: 1;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}

.ov-act-days {
  display: grid;
  flex-shrink: 0;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 3px;
  width: 2rem;
  padding-right: 0.375rem;
  font-size: 10px;
  color: var(--text-color-kumo-subtle);
}

.ov-act-days span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ov-act-grid {
  display: flex;
  flex: 1;
  gap: 3px;
}

.ov-act-week {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.ov-act-day {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
}

.ov-act-day[data-date]:hover {
  outline: 1px solid var(--text-color-kumo-subtle);
}

.ov-act-day.is-future {
  opacity: 0;
}

.ov-l0 { background: var(--ov-l0); }
.ov-l1 { background: var(--ov-l1); }
.ov-l2 { background: var(--ov-l2); }
.ov-l3 { background: var(--ov-l3); }
.ov-l4 { background: var(--ov-l4); }

.ov-act-tip {
  position: absolute;
  z-index: 10;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: #111827;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}

[data-mode="dark"] .ov-act-tip,
[data-mode="dark"] .ov-chart-tip {
  background: #374151;
}

.ov-act-tip-muted {
  color: #d1d5db;
}

@media (max-width: 1100px) {
  .ov-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Three KPIs stay on one row instead of leaving one card alone */
  .ov-kpis.ov-kpis-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ov-kpis.ov-kpis-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .ov-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .ov-filters {
    justify-content: flex-start;
    width: 100%;
  }
  .ov-select {
    flex: 1 1 140px;
    max-width: none;
    height: 2.5rem;
  }
  /* Period buttons share the full width */
  .ov-head > .ov-seg {
    display: flex;
    width: 100%;
  }
  .ov-head > .ov-seg .ov-seg-item {
    flex: 1 1 0;
    justify-content: center;
    padding: 0.375rem 0.25rem;
  }
  .ov-key-filter,
  .ov-key-filter .ov-select {
    width: 100%;
    min-width: 0;
  }
  /* Package cards become one row that scrolls sideways */
  .ov-pkgs {
    display: flex;
    gap: 0.75rem;
    margin-inline: -1rem;
    padding: 0.125rem 1rem 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
  }
  .ov-pkgs::-webkit-scrollbar {
    display: none;
  }
  .ov-pkg {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
}

/* Sidebar Sections & Credit */
.sidebar-heading {
  margin: 0.75rem 0 0.25rem;
  padding: 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color-kumo-subtle);
}

.sidebar-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 0.5rem 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
}

/* Icon-only Buttons */
.icon-btn {
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.icon-btn > span {
  display: inline-flex;
}

/* Theme toggle: both icons share one cell and swap with a rotate + fade */
.icon-btn {
  display: inline-grid;
  place-items: center;
}

.icon-btn > span {
  grid-area: 1 / 1;
}

.icon-btn > .icon-btn-moon,
.icon-btn > .icon-btn-sun {
  transition: opacity 300ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-btn > .icon-btn-sun,
[data-mode="dark"] .icon-btn > .icon-btn-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

[data-mode="dark"] .icon-btn > .icon-btn-sun {
  opacity: 1;
  transform: none;
}

/* Theme cross-fade */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
  animation-timing-function: ease;
}

.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease, fill 350ms ease, stroke 350ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .icon-btn > .icon-btn-moon,
  .icon-btn > .icon-btn-sun {
    transition: none;
  }
}

/* ─── Model Library ─────────────────────────────────────────────────────── */

/* Provider Hues */
.ml-hue-0 { --ml-hue: #3b82f6; }
.ml-hue-1 { --ml-hue: #10b981; }
.ml-hue-2 { --ml-hue: #f59e0b; }
.ml-hue-3 { --ml-hue: #ef4444; }
.ml-hue-4 { --ml-hue: #8b5cf6; }
.ml-hue-5 { --ml-hue: #06b6d4; }
.ml-hue-6 { --ml-hue: #ec4899; }
.ml-hue-7 { --ml-hue: #84cc16; }

/* Header & View Switch */
.ml-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ml-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-recessed);
}

.ml-seg button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 28px;
  padding: 0.2rem 0.7rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.ml-seg button.is-on {
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* Hint Banner: neutral surface so it never competes with the data below */
.ml-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.ml-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-subtle);
}

.ml-banner-cta {
  margin-left: auto;
}

/* Toolbar */
.ml-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ml-search {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-control);
  color: var(--text-color-kumo-subtle);
}

.ml-search:focus-within {
  border-color: var(--color-kumo-brand);
}

.ml-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
}

.ml-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ml-pop {
  position: relative;
}

.ml-chip-btn,
.ml-select {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.8rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-control);
  color: var(--text-color-kumo-default);
  font-size: 0.8125rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ml-chip-btn::-webkit-details-marker {
  display: none;
}

.ml-chip-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 0.15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
}

.ml-pop[open] .ml-chip-btn {
  border-color: var(--color-kumo-brand);
}

.ml-select {
  padding-right: 2rem;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-kumo-control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.65rem center;
}

.ml-badge-count {
  min-width: 18px;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-kumo-brand);
  color: #fff;
  font-size: 0.6875rem;
  line-height: 18px;
  text-align: center;
}

.ml-pop-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-height: 300px;
  padding: 0.35rem;
  overflow-y: auto;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3);
}

.ml-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  cursor: pointer;
}

.ml-check:hover {
  background: var(--color-kumo-tint);
}

.ml-check input {
  accent-color: var(--color-kumo-brand);
}

/* Shared Bits */
.ml-card {
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.ml-muted {
  color: var(--text-color-kumo-subtle);
}

.ml-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ml-hue);
}

.ml-provider {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
}

.ml-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 0.45rem;
  background: color-mix(in oklch, var(--ml-hue) 16%, transparent);
  color: var(--ml-hue);
  font-size: 0.75rem;
  font-weight: 700;
}

.ml-open {
  padding: 0.05rem 0.4rem;
  border: 1px solid color-mix(in oklch, #10b981 45%, transparent);
  border-radius: 0.3rem;
  color: var(--text-color-kumo-success);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ml-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 150ms ease, background 150ms ease;
}

.ml-copy:hover,
.ml-copy:focus-visible,
.ml-row:hover .ml-copy {
  opacity: 1;
}

.ml-copy:hover {
  background: var(--color-kumo-tint);
}

.ml-copy.is-copied {
  color: var(--text-color-kumo-success);
  opacity: 1;
}

.ml-copy.is-copied::after {
  content: "Copied";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  background: #111827;
  color: #fff;
  font-size: 0.6875rem;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* Capability Badges */
.ml-caps {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.ml-caps-wrap {
  flex-wrap: wrap;
}

/* Capabilities listed in full under the model name (aligned past the avatar) */
.ml-caps-row {
  flex-wrap: wrap;
  margin: 0.35rem 0 0 calc(26px + 0.55rem);
}

.ml-cap,
.ml-pill {
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.ml-cap { background: var(--color-kumo-fill); color: var(--text-color-kumo-default); }
.ml-cap-vision { background: color-mix(in oklch, #8b5cf6 16%, transparent); color: #8b5cf6; }
.ml-cap-tools { background: color-mix(in oklch, #3b82f6 16%, transparent); color: #3b82f6; }
.ml-cap-reasoning { background: color-mix(in oklch, #f59e0b 18%, transparent); color: #d97706; }
.ml-cap-cache { background: color-mix(in oklch, #10b981 16%, transparent); color: #059669; }
.ml-cap-json { background: color-mix(in oklch, #06b6d4 16%, transparent); color: #0891b2; }
.ml-cap-web_search { background: color-mix(in oklch, #ec4899 14%, transparent); color: #db2777; }
.ml-cap-stream { background: color-mix(in oklch, #14b8a6 16%, transparent); color: #0d9488; }

.ml-pill {
  border: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-recessed);
  color: var(--text-color-kumo-default);
}

/* Table View */
.ml-table-wrap {
  overflow-x: auto;
}

.ml-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ml-table th {
  padding: 0.6rem 0.6rem;
  border-bottom: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.ml-table th.text-right {
  text-align: right;
}

.ml-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--color-kumo-hairline, var(--color-kumo-line));
  vertical-align: middle;
}

.ml-row:hover td {
  background: var(--color-kumo-tint);
}

.ml-col-x {
  width: 36px;
  padding-right: 0 !important;
}

.ml-expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.ml-expand svg {
  transition: transform 200ms ease;
}

.ml-expand[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.ml-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.ml-unit {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.ml-detail td {
  background: var(--color-kumo-elevated);
}

.ml-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.75rem 1.5rem;
  padding: 0.35rem 0 0.75rem;
}

.ml-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ml-k {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.code-block.ml-snippet {
  max-width: 100%;
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ml-detail td > * {
  max-width: 820px;
}

/* Card View */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.75rem;
}

.ml-grid[hidden],
.ml-tile[hidden] {
  display: none;
}

.ml-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  transition: border-color 150ms ease, transform 150ms ease;
}

.ml-tile:hover {
  transform: translateY(-1px);
}

.ml-tile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
}

.ml-tile-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  word-break: break-all;
}

.ml-type {
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 0.3rem;
  background: var(--color-kumo-fill);
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
}

.ml-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.ml-stats dt {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ml-stats dd {
  margin: 0.1rem 0 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.ml-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

/* Empty State */
.ml-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  text-align: center;
}

/* Type tab switch: rows and cards fade in one after another */
.ml-tab-in {
  animation: swap-in 280ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--ml-i, 0) * 22ms);
}

@media (prefers-reduced-motion: reduce) {
  .ml-tab-in {
    animation: none;
  }
}

.ml-empty[hidden] {
  display: none;
}

/* Auto view (no explicit choice): cards on phones, table on larger screens */
@media (max-width: 768px) {
  .ml-auto-view [data-ml-table] {
    display: none;
  }
}

@media (min-width: 769px) {
  .ml-auto-view [data-ml-cards] {
    display: none;
  }
}

@media (max-width: 1280px) {
  .ml-col-provider {
    display: none;
  }
}

@media (max-width: 1100px) {
  .ml-col-added {
    display: none;
  }
}

/* Phones: price and context columns move into the expanded row */
.ml-detail-grid > .ml-m-only {
  display: none;
}

@media (max-width: 640px) {
  .ml-table {
    table-layout: fixed;
  }
  /* Hidden columns keep a zero-width slot so the expanded row's colspan still lines up */
  .ml-table :is(.ml-col-num, .ml-col-provider, .ml-col-added, .ml-col-uptime) {
    display: table-cell;
    width: 0;
    padding: 0 !important;
    border: 0;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
  }
  .ml-detail .ml-snippet {
    max-width: 100%;
  }
  .ml-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ml-detail-grid > .ml-m-only {
    display: flex;
  }
}

@media (max-width: 640px) {
  .ml-banner {
    flex-wrap: wrap;
  }
  .ml-banner-cta {
    margin-left: 0;
  }
  .ml-search {
    flex-basis: 100%;
  }
}

/* ─── Flaz Reseller Admin ───────────────────────────────────────────────── */

.reseller-markups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.reseller-markup {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.reseller-held {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-kumo-line);
}

/* ─── Reseller Products (VPS, Domains, Orders) ──────────────────────────── */

/* Page Header */
.svc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

/* Rows & Lists */
.svc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.svc-row,
.svc-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  color: inherit;
  text-decoration: none;
}

.svc-row > span:nth-child(2) {
  flex: 1;
}

.svc-row:hover {
  border-color: var(--color-kumo-interact);
}

.svc-result.is-available {
  border-color: color-mix(in srgb, #10b981 45%, var(--color-kumo-line));
}

.svc-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-kumo-fill);
}

.svc-dot-busy {
  background: var(--color-kumo-brand);
  animation: svc-pulse 1.4s ease-in-out infinite;
}

@keyframes svc-pulse {
  50% { opacity: 0.35; }
}

.svc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 3rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-subtle);
  text-align: center;
}

.svc-empty h2 {
  color: var(--text-color-kumo-default);
}

/* Icon in a tinted brand circle */
.svc-empty > svg {
  box-sizing: content-box;
  padding: 0.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, var(--color-kumo-base));
  color: var(--color-kumo-brand);
}

/* Order Layout */
.svc-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
  align-items: start;
}

.svc-step {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.svc-step-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
  padding: 0;
  font-weight: 600;
}

.svc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-kumo-contrast);
  color: var(--text-color-kumo-inverse);
  font-size: 0.75rem;
}

.svc-plans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.svc-plan {
  cursor: pointer;
}

.svc-plan-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.svc-plan:hover .svc-plan-body {
  border-color: var(--color-kumo-interact);
}

.svc-plan input:checked + .svc-plan-body {
  border-color: var(--color-kumo-brand);
  box-shadow: 0 0 0 1px var(--color-kumo-brand);
}

.svc-plan input:focus-visible + .svc-plan-body {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.svc-plan-check {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-kumo-line);
  border-radius: 50%;
}

.svc-plan input:checked + .svc-plan-body .svc-plan-check {
  border: 5px solid var(--color-kumo-brand);
}

.svc-plan-price {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.svc-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-kumo-line);
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.svc-specs strong {
  color: var(--text-color-kumo-default);
  font-weight: 600;
}

/* Pills (locations, images, periods) */
.svc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc-pill span,
.svc-pill-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 999px;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.svc-pill span:hover,
.svc-pill-link:hover {
  border-color: var(--color-kumo-interact);
}

.svc-pill input:checked + span,
.svc-pill-link.is-on {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, var(--color-kumo-base));
  font-weight: 500;
}

.svc-pill input:focus-visible + span {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Summary */
.svc-summary {
  position: sticky;
  /* Clears the sticky 58px top bar */
  top: calc(58px + 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.svc-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.svc-summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.svc-summary-list dt {
  color: var(--text-color-kumo-subtle);
}

.svc-summary-list dd {
  margin: 0;
  text-align: right;
}

.svc-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-kumo-line);
}

.svc-summary-total strong {
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

/* Detail Pages */
.svc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.svc-fact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
  min-width: 0;
}

.svc-fact > span:first-child {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.svc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.svc-cred {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.svc-danger {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklch, var(--color-kumo-danger) 35%, var(--color-kumo-line));
  border-radius: 0.75rem;
}

.svc-danger-item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0;
  cursor: pointer;
  list-style: none;
}

.svc-danger-item summary::-webkit-details-marker {
  display: none;
}

.svc-danger-item + .svc-danger-item {
  border-top: 1px solid var(--color-kumo-line);
}

.svc-activity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
  color: inherit;
  text-decoration: none;
}

.svc-activity:first-child {
  border-top: 0;
}

.svc-activity:hover {
  background: var(--color-kumo-tint);
}

/* Domain Search */
.svc-search {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.85rem;
  background: var(--color-kumo-base);
}

.svc-search:focus-within {
  border-color: var(--color-kumo-brand);
}

.svc-search-input {
  flex: 1;
  min-width: 0;
  padding: 0 0.6rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-color-kumo-default);
  font-size: 1rem;
}

.svc-tlds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.svc-tld {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.svc-tld strong {
  color: var(--text-color-kumo-default);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* Order Progress */
.svc-progress {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.svc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-progress-step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.svc-progress-dot {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--color-kumo-fill);
  overflow: hidden;
}

.svc-progress-step.is-done {
  color: var(--text-color-kumo-default);
}

.svc-progress-step.is-done .svc-progress-dot {
  background: var(--color-kumo-success);
}

.svc-progress-step.is-current {
  color: var(--text-color-kumo-default);
  font-weight: 500;
}

.svc-progress-step.is-current .svc-progress-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 999px;
  background: var(--color-kumo-brand);
  animation: svc-indeterminate 1.3s ease-in-out infinite;
}

@keyframes svc-indeterminate {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

/* Step where a failed or refunded request stopped */
.svc-progress-step.is-stopped {
  color: var(--text-color-kumo-default);
  font-weight: 500;
}

.svc-progress-step.is-stopped .svc-progress-dot {
  background: var(--color-kumo-danger);
}

.svc-progress[data-state="review"] .is-current .svc-progress-dot::after {
  background: var(--color-kumo-warning);
}

@media (max-width: 900px) {
  .svc-order,
  .svc-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .svc-summary {
    position: static;
  }
}

@media (max-width: 560px) {
  .svc-activity {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .svc-activity > span:nth-child(3),
  .svc-activity > span:nth-child(4) {
    display: none;
  }
  .svc-cred {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .svc-cred > span:first-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-dot-busy,
  .svc-progress-step.is-current .svc-progress-dot::after {
    animation: none;
  }
}

.svc-mt {
  margin-top: 0.75rem;
}

.svc-cap::first-letter {
  text-transform: uppercase;
}

.svc-w-cc {
  width: 5rem;
  flex-shrink: 0;
}

/* ─── Domain Detail ─────────────────────────────────────────────────────── */

/* Card Shell */
.dom-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.85rem;
  background: var(--color-kumo-base);
  min-width: 0;
}

/* Last card of a stacked column grows so both grid columns end on the same line */
.dom-card-fill {
  flex: 1 1 auto;
}

/* Forms fill their card and keep the submit button on the card's bottom edge,
   so the buttons of side-by-side cards line up */
.dom-form {
  flex: 1 1 auto;
}

.dom-form-actions {
  margin-top: auto;
}

/* Renewal summary: current and new expiry and the wallet balance */
.dom-renew-sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-recessed);
}

.dom-renew-sum > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.dom-renew-sum dt {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.dom-renew-sum dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dom-renew-short {
  color: var(--text-color-kumo-warning);
}

.dom-renew-topup {
  font-size: 0.75rem;
  font-weight: 500;
}

.dom-renew-ok {
  color: var(--text-color-kumo-success);
}

.dom-renew-short[hidden],
.dom-renew-ok[hidden] {
  display: none;
}

@media (max-width: 420px) {
  .dom-renew-sum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Promo label matches the other form labels inside domain cards */
.dom-card .promo-label {
  font-size: inherit;
  line-height: inherit;
  color: var(--text-color-kumo-default);
}

/* Label to input spacing matches the nameserver fields so rows line up */
.dom-card .promo-box {
  gap: 0.5rem;
}

.dom-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.dom-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, var(--color-kumo-base));
  color: var(--color-kumo-brand);
}

.dom-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.dom-card-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.dom-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-color-kumo-subtle);
}

/* Information Grid: dates on the first row, prices on the second (name and status sit in the page header) */
.dom-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
}

@media (max-width: 640px) {
  .dom-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dom-info > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.dom-info dt {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.dom-info dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.dom-ns-active {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.dom-ns-chip {
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  background: var(--color-kumo-recessed);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
}

/* Auto Renew Switch */
.dom-switch {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: var(--color-kumo-fill);
  cursor: pointer;
  transition: background 200ms ease;
}

.dom-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 200ms ease;
}

.dom-switch[aria-checked="true"] {
  background: #10b981;
}

.dom-switch[aria-checked="true"] span {
  transform: translateX(20px);
}

.dom-switch:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Support-handled Features */
/* Five support cards; every row is filled: 1, then 2 + 2 + 1 wide, 3 + 2, then 5 across */
.dom-features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .dom-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dom-features > :last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .dom-features {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .dom-features > * {
    grid-column: span 2;
  }

  .dom-features > :nth-child(n + 4),
  .dom-features > :last-child {
    grid-column: span 3;
  }
}

@media (min-width: 1800px) {
  .dom-features {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dom-features > *,
  .dom-features > :nth-child(n + 4),
  .dom-features > :last-child {
    grid-column: auto;
  }
}

/* Feature cards: subtitles reserve two lines and the note fills the card,
   so notes start and buttons end on the same line across a row */
.dom-features .dom-card-sub {
  min-height: calc(2 * 1lh);
}

.dom-features .dom-note {
  flex: 1 1 auto;
}

.dom-features .dom-card > a {
  align-self: flex-start;
}

.dom-note {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px dashed var(--color-kumo-line);
  border-radius: 0.55rem;
  background: var(--color-kumo-recessed);
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

/* Activity History */
.dom-activity {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dom-activity;
}

.dom-activity li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 0.75rem 2rem;
  border-top: 1px solid var(--color-kumo-line);
  position: relative;
  counter-increment: dom-activity;
}

.dom-activity li:first-child {
  border-top: 0;
}

/* Long details such as comma-joined nameservers wrap inside the row */
.dom-activity li > div {
  overflow-wrap: anywhere;
}

.dom-activity li::before {
  content: counter(dom-activity) ".";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Per-nameserver inputs */
.ns-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

/* One per row inside the narrow domain card so long hostnames stay readable */
.dom-card .ns-fields {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 560px) {
  .ns-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Admin Console ─────────────────────────────────────────────────────── */

/* Needs Attention */
.adm-attention {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-att {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.65rem;
  background: var(--color-kumo-base);
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease, background 150ms ease;
}

.adm-att:hover {
  border-color: var(--color-kumo-interact);
  background: var(--color-kumo-tint);
}

.adm-att > span:nth-child(2) {
  flex: 1;
  gap: 0.1rem;
}

/* Severity lives in the icon chip only */
.adm-att-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.adm-att-danger .adm-att-icon { background: #fef2f2; color: #dc2626; }
.adm-att-warning .adm-att-icon { background: #fffbeb; color: #d97706; }
.adm-att-info .adm-att-icon { background: #eff6ff; color: #2563eb; }

[data-mode="dark"] .adm-att-danger .adm-att-icon { background: rgb(239 68 68 / 0.14); color: #f87171; }
[data-mode="dark"] .adm-att-warning .adm-att-icon { background: rgb(245 158 11 / 0.14); color: #fbbf24; }
[data-mode="dark"] .adm-att-info .adm-att-icon { background: rgb(59 130 246 / 0.14); color: #60a5fa; }

.adm-att-cta {
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.adm-att:hover .adm-att-cta {
  border-color: var(--color-kumo-interact);
  background: var(--color-kumo-base);
}

@media (max-width: 480px) {
  .adm-att-cta {
    display: none;
  }
}

/* KPI change chip */
.adm-delta {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--color-kumo-fill);
  color: var(--text-color-kumo-subtle);
}

.adm-delta-up { background: color-mix(in srgb, #10b981 15%, transparent); color: #059669; }
.adm-delta-down { background: color-mix(in srgb, #ef4444 12%, transparent); color: #dc2626; }

/* Revenue chart */
.adm-chart {
  display: block;
  width: 100%;
  height: 180px;
}

.adm-chart-hit {
  fill: transparent;
}

.adm-chart g:hover .adm-chart-hit {
  fill: color-mix(in srgb, var(--text-color-kumo-subtle) 10%, transparent);
}

.adm-c-topup { fill: #3b82f6; background: #3b82f6; }
.adm-c-sales { fill: #10b981; background: #10b981; }

.adm-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: var(--text-color-kumo-subtle);
}

/* Compact lists and stat grids */
.adm-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adm-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--color-kumo-line);
  color: inherit;
  text-decoration: none;
}

.adm-list > li:first-child .adm-list-row,
.adm-list > li.adm-list-row:first-child {
  border-top: 0;
}

a.adm-list-row:hover {
  background: var(--color-kumo-tint);
}

.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.9rem 1.25rem;
  margin: 0;
}

.adm-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.adm-stats dt {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.adm-stats dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Filters */
.tab-count-alert {
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
}

.adm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ─── Admin Badge ───────────────────────────────────────────────────────── */

/* Amber badge next to the logo marks an administrator session */
:root {
  --nav-admin-accent: #d97706;
  --nav-admin-line: #fde68a;
}

[data-mode="dark"] {
  --nav-admin-accent: #fbbf24;
  --nav-admin-line: rgb(251 191 36 / 0.28);
}

.nav-admin-badge {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--nav-admin-line);
  border-radius: 999px;
  color: var(--nav-admin-accent);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ─── Support Tickets ───────────────────────────────────────────────────── */

/* Category icon chip (list rows and conversation header) */
.tk-cat {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.6rem;
  background: var(--color-kumo-recessed);
  color: var(--text-color-kumo-subtle);
}

.tk-cat-billing { background: #ecfdf5; color: #059669; }
.tk-cat-ai { background: #f5f3ff; color: #7c3aed; }
.tk-cat-vps { background: #eff6ff; color: #2563eb; }
.tk-cat-domain { background: #ecfeff; color: #0891b2; }
.tk-cat-account { background: #fff7ed; color: #ea580c; }

[data-mode="dark"] .tk-cat-billing { background: rgb(16 185 129 / 0.14); color: #34d399; }
[data-mode="dark"] .tk-cat-ai { background: rgb(139 92 246 / 0.16); color: #a78bfa; }
[data-mode="dark"] .tk-cat-vps { background: rgb(59 130 246 / 0.16); color: #60a5fa; }
[data-mode="dark"] .tk-cat-domain { background: rgb(6 182 212 / 0.14); color: #22d3ee; }
[data-mode="dark"] .tk-cat-account { background: rgb(249 115 22 / 0.14); color: #fb923c; }

.tk-prio {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

[data-mode="dark"] .tk-prio {
  background: rgb(239 68 68 / 0.16);
  color: #f87171;
}

/* Ticket list */
.tk-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.85rem;
  background: var(--color-kumo-base);
}

.tk-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--color-kumo-line);
  color: inherit;
  text-decoration: none;
  transition: background 150ms ease;
}

.tk-row:first-child {
  border-top: 0;
}

.tk-row:hover {
  background: var(--color-kumo-tint);
}

.tk-row .tk-cat {
  width: 34px;
  height: 34px;
  border-radius: 0.55rem;
}

/* Text hierarchy: subject, then preview, then meta */
.tk-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.tk-row-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.tk-row-subject {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-row.is-unread .tk-row-subject {
  font-weight: 700;
}

.tk-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-kumo-brand);
}

.tk-row-preview {
  overflow: hidden;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-row-by {
  margin-right: 0.35rem;
  color: var(--text-color-kumo-default);
  font-weight: 500;
}

.tk-row-by::after {
  content: ":";
}

.tk-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  line-height: 1.4;
  opacity: 0.85;
}

.tk-row-meta > span + span::before {
  content: "\00B7";
  margin-right: 0.45rem;
}

.tk-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  white-space: nowrap;
}

/* Conversation layout */
.tk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem;
  align-items: start;
}

.tk-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.85rem;
  background: var(--color-kumo-base);
}

.tk-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.tk-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.tk-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

/* Message timeline */
.tk-feed {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-item {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--color-kumo-line);
  scroll-margin-top: 4rem;
}

.tk-item:first-child {
  border-top: 0;
}

.tk-item.is-staff {
  background: color-mix(in srgb, var(--color-kumo-brand) 4%, var(--color-kumo-base));
}

[data-mode="dark"] .tk-item.is-staff {
  background: rgb(59 130 246 / 0.06);
}

.tk-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-kumo-fill);
  color: var(--text-color-kumo-default);
  font-size: 0.75rem;
  font-weight: 600;
}

.tk-avatar.is-staff {
  background: var(--color-kumo-brand);
  color: #fff;
}

.tk-item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.tk-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.tk-role {
  padding: 0 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 12%, transparent);
  color: var(--color-kumo-brand);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
}

.tk-text {
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Composer docked under the conversation */
.tk-composer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.25rem 1.1rem;
  border-top: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
}

.tk-input {
  width: 100%;
  min-height: 110px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.65rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  resize: vertical;
}

.tk-input:focus {
  border-color: var(--color-kumo-brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-kumo-brand) 18%, transparent);
}

.tk-composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.tk-closed-note {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--color-kumo-recessed);
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

/* Details column */
.tk-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.85rem;
  background: var(--color-kumo-base);
}

.tk-side-title {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tk-dl {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}

.tk-dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.tk-dl dt {
  color: var(--text-color-kumo-subtle);
}

.tk-dl dd {
  margin: 0;
  min-width: 0;
  text-align: right;
}

.tk-status-form {
  display: flex;
  gap: 0.5rem;
}

.tk-mini {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-mini a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--color-kumo-line);
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
}

.tk-mini li:first-child a {
  border-top: 0;
}

.tk-mini a:hover {
  color: var(--color-kumo-brand);
}

@media (max-width: 960px) {
  .tk-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .tk-cat {
    display: none;
  }
  .tk-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .tk-item {
    padding: 0.9rem 1rem;
  }
}

/* Count badge on a sidebar item */
.nav-count {
  min-width: 18px;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--color-kumo-brand);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ─── Ticket Attachments & Image Viewer ─────────────────────────────────── */

/* Picker */
.tk-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.tk-attach-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tk-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2rem;
  padding: 0 0.8rem;
  border: 1px dashed var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.tk-attach-btn:hover {
  border-color: var(--color-kumo-brand);
  background: var(--color-kumo-tint);
}

.tk-attach-input:focus-visible + .tk-attach-btn {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.tk-attach.is-full .tk-attach-btn {
  opacity: 0.5;
  pointer-events: none;
}

.tk-attach-hint {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.tk-attach-error {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-danger);
}

/* Selected image chips */
.tk-previews {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-preview {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 15rem;
  padding: 0.35rem 2rem 0.35rem 0.35rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
}

.tk-preview img {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  object-fit: cover;
  background: var(--color-kumo-recessed);
}

.tk-preview-meta {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.3;
}

.tk-preview-name {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-color-kumo-default);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-preview-size {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.tk-preview-remove {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.tk-preview-remove:hover {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-default);
}

/* Drop target highlight */
form.is-dropping {
  outline: 2px dashed var(--color-kumo-brand);
  outline-offset: -6px;
}

/* Images inside a message */
.tk-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}

.tk-gallery.is-single {
  grid-template-columns: minmax(0, 20rem);
}

.tk-shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-recessed);
  cursor: zoom-in;
}

.tk-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.tk-gallery.is-single .tk-shot img {
  aspect-ratio: auto;
  max-height: 16rem;
}

.tk-shot:hover img {
  transform: scale(1.02);
}

.tk-shot:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Viewer dialog */
.tk-viewer {
  width: min(96vw, 1100px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #0d0e11;
  color: #fff;
  overflow: hidden;
}

.tk-viewer::backdrop {
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(4px);
}

.tk-viewer[open] {
  display: flex;
  flex-direction: column;
  animation: tk-viewer-in 0.18s ease-out;
}

@keyframes tk-viewer-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

.tk-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-viewer-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.tk-viewer-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.tk-viewer-btn {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
}

.tk-viewer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tk-viewer-img {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: calc(94vh - 3.25rem);
  margin: auto;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .tk-viewer[open] { animation: none; }
  .tk-shot img { transition: none; }
}

/* ─── VPS Order Steps ───────────────────────────────────────────────────── */

/* Step card */
.vo-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.vo-title {
  display: flex;
  float: left;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  color: var(--text-color-kumo-default);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.vo-title svg {
  flex: none;
  color: var(--text-color-kumo-strong);
}

.vo-title + * {
  clear: both;
}

.vo-sub {
  margin: -0.25rem 0 0.25rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
}

.vo-help {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.vo-help:empty {
  display: none;
}

.vo-help.is-error {
  color: var(--text-color-kumo-danger);
}

/* Text input */
.vo-input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vo-input::placeholder {
  color: var(--text-color-kumo-subtle);
}

.vo-input:focus {
  border-color: var(--color-kumo-brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-kumo-brand) 18%, transparent);
}

.vo-input.is-invalid {
  border-color: var(--text-color-kumo-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-color-kumo-danger) 14%, transparent);
}

/* Option cards (provider, region) */
.vo-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.vo-option {
  position: relative;
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.vo-option[hidden] {
  display: none;
}

.vo-option:hover {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 45%, var(--color-kumo-line));
}

.vo-option:has(input:checked) {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 7%, var(--color-kumo-base));
}

.vo-option:has(input:focus-visible) {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.vo-option-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
}

.vo-option-name {
  overflow: hidden;
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-option-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

/* Checkmark on the selected card */
.vo-check {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  opacity: 0;
  background: var(--color-kumo-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}

.vo-option:has(input:checked) .vo-check {
  opacity: 1;
  transform: none;
}

/* Provider monogram */
.vo-logo {
  display: grid;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 0.55rem;
  background: #475569;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.vo-logo-sm {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  font-size: 0.7rem;
}

.vo-logo-t1 { background: #0ea5e9; }
.vo-logo-t2 { background: #ff6105; }
.vo-logo-t3 { background: #14b8a6; }
.vo-logo-t4 { background: #1d4ed8; }
.vo-logo-t5 { background: #dc2626; }
.vo-logo-t6 { background: #2563eb; }

/* Country code chip in place of a flag */
.vo-flag {
  display: grid;
  flex: none;
  min-width: 2.1rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.3rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-strong);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Searchable OS combobox */
.vo-combo {
  position: relative;
  display: flex;
  height: 2.75rem;
  align-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vo-combo:focus-within {
  border-color: var(--color-kumo-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-kumo-brand) 18%, transparent);
}

.vo-combo-icon {
  display: grid;
  padding: 0 0.25rem 0 0.85rem;
  color: var(--text-color-kumo-subtle);
}

.vo-combo-input {
  min-width: 0;
  height: 100%;
  flex: 1;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
}

.vo-combo-input:focus {
  outline: 0;
}

.vo-combo-input:disabled {
  cursor: progress;
}

.vo-combo-btn {
  display: grid;
  width: 2rem;
  height: 2rem;
  margin-right: 0.25rem;
  place-items: center;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.vo-combo-btn[hidden] {
  display: none;
}

.vo-combo-btn:hover {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-default);
}

.vo-combo-btn[data-os-toggle] svg {
  transition: transform 0.15s;
}

.vo-combo.is-open .vo-combo-btn[data-os-toggle] svg {
  transform: rotate(180deg);
}

.vo-combo-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  left: 0;
  z-index: 20;
  max-height: 16rem;
  margin: 0;
  padding: 0.3rem;
  overflow-y: auto;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
  list-style: none;
}

.vo-combo-option,
.vo-combo-none {
  padding: 0.55rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.875rem;
}

.vo-combo-option {
  color: var(--text-color-kumo-default);
  cursor: pointer;
}

.vo-combo-option:hover,
.vo-combo-option.is-active {
  background: var(--color-kumo-tint);
}

.vo-combo-option[aria-selected="true"] {
  color: var(--color-kumo-brand);
  font-weight: 600;
}

.vo-combo-none {
  color: var(--text-color-kumo-subtle);
}

/* Plan table */
.vo-table {
  display: flex;
  flex-direction: column;
  min-width: 0;
  container: vo-table / inline-size;
}

.vo-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) 0.8fr 0.7fr 0.8fr 1.1fr minmax(110px, 0.9fr);
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.vo-head {
  padding-top: 0.4rem;
  padding-bottom: 0.6rem;
  color: var(--text-color-kumo-strong);
  font-size: 0.8125rem;
  font-weight: 600;
}

.vo-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.vo-head svg {
  color: var(--text-color-kumo-subtle);
}

.vo-plan {
  position: relative;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.12s;
}

.vo-plan[hidden] {
  display: none;
}

.vo-plan:hover {
  background: var(--color-kumo-elevated);
}

.vo-plan:has(input:checked) {
  background: color-mix(in srgb, var(--color-kumo-brand) 7%, var(--color-kumo-base));
  box-shadow: inset 3px 0 0 var(--color-kumo-brand);
}

.vo-plan:has(input:focus-visible) {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: -2px;
}

.vo-plan.is-off {
  color: var(--text-color-kumo-subtle);
  cursor: not-allowed;
}

.vo-plan.is-off:hover {
  background: transparent;
}

.vo-plan.is-off .vo-logo {
  opacity: 0.45;
}

.vo-cell-provider {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.6rem;
}

.vo-plan-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-cell-price {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.vo-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vo-plan.is-off .vo-price {
  font-weight: 600;
}

.vo-per {
  margin-left: 0.15rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 400;
}

.vo-stock {
  color: #ea580c;
  font-size: 0.75rem;
  font-weight: 500;
}

.vo-empty {
  margin: 0;
  padding: 1.25rem 0.75rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
  text-align: center;
}

/* Narrow plan column: rows become compact cards (sized by the table, not the screen) */
@container vo-table (max-width: 620px) {
  .vo-head {
    display: none;
  }
  .vo-row.vo-plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
    margin-bottom: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--color-kumo-line);
    border-radius: 0.6rem;
  }
  .vo-plan:has(input:checked) {
    border-color: var(--color-kumo-brand);
    box-shadow: none;
  }
  .vo-cell-provider {
    grid-column: 1;
  }
  .vo-cell-price {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
    text-align: right;
  }
  .vo-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--text-color-kumo-subtle);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
}

@media (max-width: 760px) {
  .vo-card {
    padding: 1.1rem 1rem 1.25rem;
  }
}

@media (max-width: 560px) {
  .vo-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* VPS order: summary moves under the steps until the plan table has room */
@media (max-width: 1279px) {
  .vo-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .vo-layout .svc-summary {
    position: static;
  }
}

/* ─── Ticket Staff Actions & Modals ─────────────────────────────────────── */

/* Header actions */
.tk-head-actions {
  display: flex;
  flex: none;
  gap: 0.4rem;
}

/* Modal shell */
.tk-modal {
  width: min(92vw, 520px);
  max-width: none;
  padding: 0;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.85rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
}

.tk-modal::backdrop {
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(3px);
}

.tk-modal[open] {
  animation: tk-viewer-in 0.16s ease-out;
}

.tk-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.tk-modal-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.tk-modal-title {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.tk-modal-x {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.tk-modal-x:hover {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-default);
}

.tk-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.tk-modal-text {
  margin: 0;
  color: var(--text-color-kumo-strong);
  font-size: 0.875rem;
  line-height: 1.6;
}

.tk-modal-danger {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border-radius: 9999px;
  background: var(--color-kumo-danger-tint);
  color: var(--text-color-kumo-danger);
}

.tk-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

@media (max-width: 560px) {
  .tk-head {
    flex-wrap: wrap;
  }
  .tk-head-actions {
    width: 100%;
    padding-left: calc(34px + 0.9rem);
  }
  .tk-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-modal[open] { animation: none; }
}

/* ─── Breadcrumb ────────────────────────────────────────────────────────── */

.crumbs {
  min-width: 0;
  margin-bottom: -0.5rem;
}

.crumbs-list {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.crumbs-root,
.crumbs-item {
  display: inline-flex;
  min-width: 0;
  flex: none;
  align-items: center;
  gap: 0.4rem;
}

/* Only the last step may shrink, so long names truncate instead of wrapping */
.crumbs-item:last-child {
  flex: 0 1 auto;
}

.crumbs-home {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0.35rem;
  color: var(--text-color-kumo-subtle);
  transition: background-color 0.15s, color 0.15s;
}

.crumbs-home:hover {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-default);
}

.crumbs-section {
  color: var(--text-color-kumo-subtle);
  white-space: nowrap;
}

.crumbs-sep {
  display: inline-grid;
  margin: 0 0.3rem;
  place-items: center;
  color: var(--text-color-kumo-subtle);
  opacity: 0.7;
}

.crumbs-link {
  color: var(--text-color-kumo-subtle);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.crumbs-link:hover {
  color: var(--text-color-kumo-default);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumbs-current {
  overflow: hidden;
  color: var(--text-color-kumo-default);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs-home:focus-visible,
.crumbs-link:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Phones: drop the section name to keep the trail on one line */
@media (max-width: 560px) {
  .crumbs-section {
    display: none;
  }
  .crumbs-list {
    font-size: 0.875rem;
  }
}

/* Trail above the page title: only on phones, where the top bar is too narrow */
.crumbs.crumbs-page {
  display: none;
}

@media (max-width: 860px) {
  .app-topbar .crumbs {
    visibility: hidden;
  }
  .crumbs.crumbs-page {
    display: block;
    margin: 0;
    padding: 1rem 1rem 0;
  }
  .crumbs-page + .app-content {
    padding-top: 0.75rem;
  }
  .crumbs-page .crumbs-section {
    display: inline;
  }
}

/* ─── Segmented Tab Sliding Indicator ───────────────────────────────────── */

.ov-seg.has-indicator,
.ml-seg.has-indicator {
  position: relative;
  isolation: isolate;
}

.seg-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 0.25rem;
  background: var(--color-kumo-base);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), width 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 150ms ease;
  will-change: transform, width;
}

.ov-seg .seg-indicator {
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px var(--color-kumo-line), 0 1px 2px rgb(0 0 0 / 0.08);
}

.ov-seg.has-indicator .is-on {
  color: var(--text-color-kumo-strong, var(--text-color-kumo-default));
}

.ml-seg .seg-indicator {
  border-radius: 0.375rem;
}

.seg-indicator.no-anim {
  transition: none;
}

/* The indicator paints the active surface; items sit above it */
.has-indicator > button,
.has-indicator > a,
.has-indicator > label {
  position: relative;
  z-index: 1;
}

.ov-seg.has-indicator button.is-on,
.ov-seg.has-indicator .ov-seg-item.is-on,
.ml-seg.has-indicator button.is-on {
  background: transparent;
  box-shadow: none;
}

[data-mode="dark"] .seg-indicator {
  background: rgb(255 255 255 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.4);
}

[data-mode="dark"] .ov-seg.has-indicator button.is-on,
[data-mode="dark"] .ov-seg.has-indicator .ov-seg-item.is-on,
[data-mode="dark"] .ml-seg.has-indicator button.is-on {
  background: transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .seg-indicator {
    transition: none;
  }
}

/* ─── Skeleton Loading ──────────────────────────────────────────────────── */

/* Kumo skeleton line: block-level, full width until app.js sets a random width */
.skeleton-line {
  display: block;
  width: var(--skeleton-width, 100%);
  max-width: 100%;
}

.skeleton-block {
  display: flex;
  align-items: center;
  height: 1rem;
}

.skeleton-block > .skeleton-line {
  flex: none;
}

/* Page content is swapped for the skeleton while the next page loads */
.app-content.is-navigating > :not(.page-skeleton) {
  display: none;
}

.page-skeleton {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: page-skeleton-in 0.2s ease-out;
}

@keyframes page-skeleton-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-skeleton-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 36rem;
}

.page-skeleton-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.page-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.page-skeleton-list {
  gap: 0;
  padding-bottom: 0.25rem;
}

.page-skeleton-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-kumo-line);
}

.page-skeleton-list > .skeleton-block {
  margin-bottom: 0.6rem;
}

.page-skeleton-dot {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #f3f4f6;
}

[data-mode="dark"] .page-skeleton-dot {
  background: rgb(255 255 255 / 0.06);
}

.page-skeleton-end {
  flex: none;
  width: 5rem;
}

@media (max-width: 760px) {
  .page-skeleton-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-skeleton-stats > :nth-child(n + 2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-skeleton {
    animation: none;
  }
  .skeleton-line::after {
    animation: none;
  }
}

/* OS combobox loading state */
.vo-combo-skel {
  position: absolute;
  top: 50%;
  right: 4.5rem;
  left: 2.6rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.vo-combo-skel[hidden] {
  display: none;
}

.vo-combo.is-loading {
  background: var(--color-kumo-elevated);
}

/* ─── Top Bar & Collapsible Sidebar ─────────────────────────────────────── */

/* Top bar: breadcrumb on the left, account on the right, on every screen size */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 58px;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-base);
}

.app-topbar .crumbs {
  min-width: 0;
  flex: 1;
  margin: 0;
}

.topbar-menu {
  display: none;
  width: 2rem;
  height: 2rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.45rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  cursor: pointer;
}

.topbar-menu:hover {
  background: var(--color-kumo-tint);
}

.topbar-user {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-kumo-line);
}

.topbar-avatar {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  place-items: center;
  border-radius: 9999px;
  background: var(--color-kumo-contrast);
  color: var(--text-color-kumo-inverse);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.topbar-who {
  display: flex;
  min-width: 0;
  max-width: 14rem;
  flex-direction: column;
  line-height: 1.25;
}

.topbar-name {
  overflow: hidden;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-email {
  overflow: hidden;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-logout {
  display: flex;
  margin: 0;
}

/* Sidebar footer */
.sb-collapse {
  display: inline-flex;
  min-width: 0;
  height: 2rem;
  flex: 1;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.sb-collapse:hover {
  background: var(--sidebar-active-bg);
  color: var(--text-color-kumo-default);
}

.sb-collapse:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.sb-collapse-icon {
  display: inline-grid;
  place-items: center;
}

@media (min-width: 861px) {
  .sb-animating .app-sidebar {
    transition: width 240ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Collapsed: an icon-only rail */
  .sb-collapsed .app-shell {
    --sidebar-width: 3.75rem;
  }

  .sb-collapsed .sb-credit,
  .sb-collapsed .sb-brand .sb-text,
  .sb-collapsed .sidebar-heading .sb-text,
  .sb-collapsed .sb-collapse .sb-text {
    display: none;
  }

  /* Link names stay available to screen readers */
  .sb-collapsed .sb-link .sb-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sb-collapsed .sb-brand {
    justify-content: center;
    padding: 0;
  }

  .sb-collapsed .sb-nav {
    padding-right: 0.55rem;
    padding-left: 0.55rem;
  }

  .sb-collapsed .sidebar-heading {
    height: 1px;
    margin: 0.6rem 0.35rem;
    padding: 0;
    background: var(--color-kumo-line);
  }

  .sb-collapsed .sb-link {
    justify-content: center;
    padding: 0;
  }

  .sb-collapsed .sb-link > span {
    flex: none;
    justify-content: center;
  }

  .sb-collapsed .sb-link .nav-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    font-size: 0.5625rem;
    line-height: 1rem;
  }

  .sb-collapsed .sb-foot {
    flex-direction: column;
    padding: 0.6rem 0.5rem;
  }

  .sb-collapsed .sb-collapse {
    width: 2rem;
    flex: none;
    justify-content: center;
    padding: 0;
  }

  .sb-collapsed .sb-collapse-icon {
    transform: scaleX(-1);
  }
}

/* Tablet and phone: drawer sidebar, menu button in the top bar */
@media (max-width: 860px) {
  .app-topbar {
    padding: 0 1rem;
  }
  .topbar-menu {
    display: grid;
  }
  .sb-collapse {
    display: none;
  }
}

@media (max-width: 1023px) {
  .topbar-email {
    display: none;
  }
}

@media (max-width: 560px) {
  .topbar-who {
    display: none;
  }
  .topbar-user {
    gap: 0.35rem;
    padding-left: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-animating .app-sidebar {
    transition: none;
  }
}

/* ==========================================================================
   Page Entrance Motion
   Pure CSS, plays once when a page opens. Each section type has its own
   entrance; sections stagger top to bottom and nested items stagger inside
   their section through the inherited --d (section) and --j (item) delays.
   Fill mode is "backwards" so no transform lingers after the animation.
   ========================================================================== */

/* ─── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes m-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes m-drop {
  from { opacity: 0; transform: translateY(-8px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes m-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.965); }
  to { opacity: 1; transform: none; }
}

@keyframes m-slide-l {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes m-slide-r {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes m-wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes m-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Section Order ─────────────────────────────────────────────────────── */

.app-content > :nth-child(1) { --d: 0ms; }
.app-content > :nth-child(2) { --d: 70ms; }
.app-content > :nth-child(3) { --d: 140ms; }
.app-content > :nth-child(4) { --d: 210ms; }
.app-content > :nth-child(5) { --d: 270ms; }
.app-content > :nth-child(6) { --d: 330ms; }
.app-content > :nth-child(7) { --d: 380ms; }
.app-content > :nth-child(n + 8) { --d: 430ms; }

/* Item order inside a section */
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(1),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(1) { --j: 0ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(2),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(2) { --j: 50ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(3),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(3) { --j: 100ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(4),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(4) { --j: 150ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(5),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(5) { --j: 195ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(6),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(6) { --j: 240ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(7),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(7) { --j: 280ms; }
:is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > :nth-child(n + 8),
:is(tbody, .tk-list, .tk-feed, .adm-list, .svc-list, .tk-mini, [data-plan-list]) > :nth-child(n + 8) { --j: 320ms; }

/* ─── Section Entrances ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

/* 1. Default section: rise */
:root:not(.motion-done) .app-content > :not(dialog, script, template, .page-skeleton, .crumbs) {
  animation: m-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) backwards;
}

/* 2. Page header: drop in with a soft focus pull */
:root:not(.motion-done) .app-content > :is(:first-child, .svc-head, .ov-head):not(dialog, script, template, .page-skeleton, [role="alert"]) {
  animation: m-drop 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) backwards;
}

/* 3. Flash banners: quick fade so feedback is readable at once */
:root:not(.motion-done) .app-content > [role="alert"],
:root:not(.motion-done) .app-content > [data-dismissible] {
  animation: m-fade 300ms ease var(--d, 0ms) backwards;
}

/* 4. Card grids and option cards: pop in one by one */
:root:not(.motion-done) .app-content :is(.grid-auto, .us-stats, .adm-stats, .ov-kpis, .ml-stats, .svc-grid-2, .vo-options, .svc-facts, .ml-grid) > * {
  animation: m-pop 560ms cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--d, 0ms) + 90ms + var(--j, 0ms)) backwards;
}

/* 5. Table rows and conversation lists: slide in from the left */
:root:not(.motion-done) .app-content :is(tbody, [data-plan-list]) > *,
:root:not(.motion-done) .app-content :is(.tk-list, .adm-list, .svc-list, .tk-mini) > * {
  animation: m-slide-l 480ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + 140ms + var(--j, 0ms)) backwards;
}

/* 6. Ticket messages: rise one after another, like a conversation */
:root:not(.motion-done) .app-content .tk-feed > * {
  animation: m-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + 120ms + var(--j, 0ms)) backwards;
}

/* 7. Side columns and summaries: slide in from the right */
:root:not(.motion-done) .app-content :is(.tk-layout, .svc-order) > aside,
:root:not(.motion-done) .app-content .adm-attention {
  animation: m-slide-r 640ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + 160ms) backwards;
}

/* 8. Charts and sparklines: draw from left to right */
:root:not(.motion-done) .app-content :is(.ov-chart-svg, .adm-chart, .ov-spark, .ov-bar-fill) {
  animation: m-wipe 950ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d, 0ms) + 260ms) backwards;
}

/* 9. Activity heatmap: gentle fade after its card arrives */
:root:not(.motion-done) .app-content .ov-act-grid {
  animation: m-fade 800ms ease calc(var(--d, 0ms) + 220ms) backwards;
}

/* 10. Stepped order forms: each step card rises in sequence */
:root:not(.motion-done) .app-content .svc-order > div > :nth-child(1) { --j: 0ms; }
:root:not(.motion-done) .app-content .svc-order > div > :nth-child(2) { --j: 70ms; }
:root:not(.motion-done) .app-content .svc-order > div > :nth-child(3) { --j: 140ms; }
:root:not(.motion-done) .app-content .svc-order > div > :nth-child(4) { --j: 210ms; }
:root:not(.motion-done) .app-content .svc-order > div > :nth-child(5) { --j: 270ms; }
:root:not(.motion-done) .app-content .svc-order > div > :nth-child(n + 6) { --j: 320ms; }
:root:not(.motion-done) .app-content .svc-order > div > * {
  animation: m-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0ms) + 60ms + var(--j, 0ms)) backwards;
}

/* 11. Sign-in and registration cards */
:root:not(.motion-done) .guest-wrap > * {
  animation: m-pop 620ms cubic-bezier(0.34, 1.3, 0.64, 1) 40ms backwards;
}
}

/* Content added or revealed after the page settles (filters, view switches,
   dialogs) appears instantly: app.js sets .motion-done once the entrance ends,
   which switches the entrance rules above off without touching other animations */

/* ─── VPS Provider Logos ────────────────────────────────────────────────── */

/* Uploaded logo inside the provider mark */
.vo-logo.vo-logo-img {
  overflow: hidden;
  padding: 0.2rem;
  border: 1px solid var(--color-kumo-line);
  background: #fff;
}

.vo-logo-sm.vo-logo-img {
  padding: 0.1rem;
}

.vo-logo-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Admin logo manager */
.pl-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pl-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-kumo-line);
}

.pl-row:first-child {
  border-top: 0;
}

.pl-preview {
  display: grid;
  flex: none;
  place-items: center;
}

.pl-preview .vo-logo {
  width: 2.5rem;
  height: 2.5rem;
}

.pl-info {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.1rem;
}

.pl-name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.pl-meta {
  overflow: hidden;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.4rem;
}

.pl-upload {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.pl-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pl-pick {
  cursor: pointer;
}

.pl-file:focus-visible + .pl-pick {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .pl-row {
    flex-wrap: wrap;
  }
  .pl-actions {
    width: 100%;
    padding-left: 3.35rem;
  }
}

/* ─── Usage Toolbar & Summary ───────────────────────────────────────────── */

/* One aligned row: period on the left, filters on the right, all 36px tall */
.us-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.us-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Label sits inside the control, so every field has the same height */
.us-filter {
  position: relative;
  display: inline-flex;
  height: 36px;
  align-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.us-filter:hover {
  border-color: color-mix(in srgb, var(--text-color-kumo-subtle) 45%, var(--color-kumo-line));
}

.us-filter:focus-within {
  border-color: var(--color-kumo-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-kumo-brand) 18%, transparent);
}

.us-filter-label {
  padding: 0 0.6rem 0 0.75rem;
  border-right: 1px solid var(--color-kumo-line);
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

.us-select {
  width: 13rem;
  height: 100%;
  padding: 0 2rem 0 0.65rem;
  border: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 14px;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  cursor: pointer;
}

.us-select:focus {
  outline: 0;
}

.us-reset {
  padding: 0 0.25rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.us-reset:hover {
  color: var(--text-color-kumo-default);
}

/* Three equal summary cards with the same value style */
.us-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.us-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.us-stat-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
}

.us-stat-value {
  overflow: hidden;
  color: var(--text-color-kumo-default);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.us-stat-sub {
  overflow: hidden;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-mode="dark"] .us-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23aaa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}

[data-mode="dark"] .us-select option {
  background: #16171b;
}

@media (max-width: 760px) {
  .us-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .us-filters,
  .us-filter {
    width: 100%;
  }
  .us-select {
    width: auto;
    flex: 1;
  }
}

/* ─── In-page Section Loads ─────────────────────────────────────────────── */

/* While the next state loads, sections that may change fade back; the page
   header and the section holding the tabs stay fully visible */
.app-content > * {
  transition: opacity 180ms ease;
}

.app-content.is-swapping > :not(:first-child):not(:has(.has-indicator)):not(.has-indicator) {
  opacity: 0.45;
  pointer-events: none;
}

/* Pages with a marked results region dim only that region */
[data-swap-part] {
  transition: opacity 180ms ease;
}

[data-swap-part].is-swapping {
  opacity: 0.45;
  pointer-events: none;
}

/* Sections swapped in arrive with a short fade */
@keyframes swap-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.swap-in {
  animation: swap-in 260ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .swap-in {
    animation: none;
  }
  .app-content > * {
    transition: none;
  }
}

/* ─── Plan Rows: card style (overrides the flat table rows above) ───────── */

[data-plan-list],
.flex-plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vo-head {
  padding-right: 1rem;
  padding-left: 1rem;
  border-bottom: 0;
}

/* Header offset matches the radio column of the rows */
.vo-head > :first-child {
  padding-left: 1.7rem;
}

.vo-head-price {
  justify-content: flex-end;
  text-align: right;
}

.vo-row.vo-plan {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.65rem;
  background: var(--color-kumo-base);
  box-shadow: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.vo-row.vo-plan:hover {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 40%, var(--color-kumo-line));
  background: var(--color-kumo-base);
}

.vo-row.vo-plan:has(input:checked) {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 5%, var(--color-kumo-base));
  box-shadow: 0 0 0 1px var(--color-kumo-brand);
}

.vo-row.vo-plan:has(input:focus-visible) {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Radio dot */
.vo-radio {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  transition: border-color 0.15s;
}

.vo-radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9999px;
  background: var(--color-kumo-brand);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.vo-plan:hover .vo-radio {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 55%, var(--color-kumo-line));
}

.vo-plan:has(input:checked) .vo-radio {
  border-color: var(--color-kumo-brand);
}

.vo-plan:has(input:checked) .vo-radio::after {
  transform: scale(1);
}

/* Specs read as values, the plan name and price carry the weight */
.vo-plan .vo-cell[data-label] {
  color: var(--text-color-kumo-strong);
  font-variant-numeric: tabular-nums;
}

.vo-cell-price {
  align-items: flex-end;
  text-align: right;
}

.vo-price {
  font-size: 0.9375rem;
}

/* Out of stock: muted and dashed, never selectable */
.vo-row.vo-plan.is-off {
  border-style: dashed;
  background: var(--color-kumo-elevated);
}

.vo-row.vo-plan.is-off:hover {
  border-color: var(--color-kumo-line);
}

.vo-plan.is-off .vo-radio {
  opacity: 0.4;
}

.vo-stock {
  display: inline-flex;
  padding: 0.05rem 0.45rem;
  border-radius: 9999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 0.6875rem;
  font-weight: 600;
}

[data-mode="dark"] .vo-stock {
  background: rgb(234 88 12 / 0.15);
  color: #fdba74;
}

@media (prefers-reduced-motion: reduce) {
  .vo-radio::after {
    transition: none;
  }
}

@container vo-table (max-width: 620px) {
  .vo-row.vo-plan {
    margin-bottom: 0;
  }
  .vo-row.vo-plan:has(input:checked) {
    box-shadow: 0 0 0 1px var(--color-kumo-brand);
  }
}

/* Column widths: price never wraps, the plan name gets the spare room */
.vo-row {
  grid-template-columns: minmax(170px, 1.8fr) 0.7fr 0.6fr 0.7fr 0.9fr minmax(118px, auto);
}

.vo-price,
.vo-cell[data-label] {
  white-space: nowrap;
}

.vo-plan-name {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Plan name with the stock badge beside it */
.vo-plan-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
}

.vo-plan-title .vo-stock {
  flex: none;
  line-height: 1.45;
}

/* Out-of-stock specs follow the muted row instead of the strong spec color */
.vo-plan.is-off .vo-cell[data-label] {
  color: var(--text-color-kumo-subtle);
}

/* Room for the plan name plus the stock badge on one line */
.vo-row {
  grid-template-columns: minmax(230px, 2.3fr) 0.75fr 0.6fr 0.75fr 0.85fr minmax(112px, auto);
  column-gap: 0.6rem;
}

/* ─── Password Strength Meter ───────────────────────────────────────────── */

.pw-meter {
  --pw-color: var(--color-kumo-line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.15rem;
}

.pw-meter[data-level="1"] { --pw-color: #ef4444; }
.pw-meter[data-level="2"] { --pw-color: #f59e0b; }
.pw-meter[data-level="3"] { --pw-color: #22c55e; }
.pw-meter[data-level="4"] { --pw-color: #16a34a; }

.pw-bar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pw-bar {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.pw-bar span {
  height: 5px;
  border-radius: 9999px;
  background: var(--color-kumo-recessed);
  transition: background-color 0.25s ease;
}

.pw-meter[data-level="1"] .pw-bar span:nth-child(-n + 1),
.pw-meter[data-level="2"] .pw-bar span:nth-child(-n + 2),
.pw-meter[data-level="3"] .pw-bar span:nth-child(-n + 3),
.pw-meter[data-level="4"] .pw-bar span:nth-child(-n + 4) {
  background: var(--pw-color);
}

/* "Too weak" still shows one red segment once typing starts */
.pw-meter[data-level="0"]:not(.is-empty) .pw-bar span:first-child {
  background: #ef4444;
}

.pw-label {
  min-width: 7.5rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.pw-meter[data-level="1"] .pw-label,
.pw-meter[data-level="0"]:not(.is-empty) .pw-label { color: #dc2626; }
.pw-meter[data-level="2"] .pw-label { color: #b45309; }
.pw-meter[data-level="3"] .pw-label,
.pw-meter[data-level="4"] .pw-label { color: #15803d; }

/* Requirement checklist */
.pw-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pw-rules li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  transition: color 0.2s ease;
}

.pw-tick {
  position: relative;
  display: grid;
  width: 1rem;
  height: 1rem;
  flex: none;
  place-items: center;
  border: 1.5px solid var(--color-kumo-line);
  border-radius: 9999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.pw-tick::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.2s ease;
}

.pw-rules li.is-met {
  color: var(--text-color-kumo-default);
}

.pw-rules li.is-met .pw-tick {
  border-color: #16a34a;
  background: #16a34a;
  transform: scale(1.06);
}

.pw-rules li.is-met .pw-tick::after {
  opacity: 1;
  transform: none;
}

/* Rejected submit: unmet rules flash once */
.pw-meter.is-alert li:not(.is-met) {
  color: #dc2626;
}

.pw-meter.is-alert li:not(.is-met) .pw-tick {
  border-color: #dc2626;
  animation: pw-shake 0.4s ease;
}

@keyframes pw-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Green check inside the field once every rule is met */
.pw-ok {
  display: grid;
  flex: none;
  place-items: center;
  padding: 0 0.35rem;
  color: #16a34a;
  animation: pw-ok-in 0.28s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.pw-ok[hidden] {
  display: none;
}

@keyframes pw-ok-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

.pw-valid:is(div, label) {
  --tw-ring-color: #16a34a;
}

.pw-input {
  position: relative;
  display: flex;
  align-items: center;
}

.pw-input .pw-ok {
  position: absolute;
  right: 0.4rem;
  pointer-events: none;
}

.pw-input input.pw-valid {
  padding-right: 2.2rem;
  --tw-ring-color: #16a34a;
}

[data-mode="dark"] .pw-rules li.is-met .pw-tick {
  border-color: #22c55e;
  background: #22c55e;
}

[data-mode="dark"] .pw-ok,
[data-mode="dark"] .pw-meter[data-level="3"] .pw-label,
[data-mode="dark"] .pw-meter[data-level="4"] .pw-label {
  color: #4ade80;
}

@media (prefers-reduced-motion: reduce) {
  .pw-ok,
  .pw-meter.is-alert li:not(.is-met) .pw-tick {
    animation: none;
  }
}

/* ─── Domain Registration Form ──────────────────────────────────────────── */

/* Period cards: links that reload the exact price for the chosen period */
.dr-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.dr-period {
  min-height: 4rem;
  color: inherit;
  text-decoration: none;
}

.vo-option.is-on {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 7%, var(--color-kumo-base));
}

.vo-option.is-on .vo-check {
  opacity: 1;
  transform: none;
}

.dr-period:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.dr-period.is-on .vo-option-meta {
  color: var(--text-color-kumo-default);
  font-weight: 600;
}

/* Contact groups */
.dr-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.vo-sub + .dr-group {
  padding-top: 0.25rem;
  border-top: 0;
}

.dr-group-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Phone: one field with the calling code and the number */
.dr-phone {
  display: flex;
  height: 2.25rem;
  align-items: center;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--color-kumo-control);
  box-shadow: 0 0 0 1px var(--color-kumo-line);
  transition: box-shadow 0.15s;
}

.dr-phone:focus-within {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-kumo-brand) 60%, transparent);
}

.dr-phone-plus {
  padding-left: 0.75rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.9375rem;
}

.dr-phone input {
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.dr-phone input:focus {
  outline: 0;
}

.dr-phone-cc {
  width: 3.25rem;
  padding: 0 0.4rem 0 0.15rem;
}

.dr-phone-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--color-kumo-line);
}

.dr-phone-num {
  flex: 1;
  padding: 0 0.75rem;
}


@media (max-width: 760px) {
  .dr-periods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Period card price: amount on one line, a short note under it */
.dr-period-price {
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dr-period-note {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
}

.dr-period.is-on .dr-period-note {
  color: var(--color-kumo-brand);
  font-weight: 600;
}

.dr-period .vo-option-text {
  gap: 0.15rem;
}

/* ─── Daily Pass ────────────────────────────────────────────────────────── */

/* Page-level cards keep the page rhythm (.vo-card resets its own margin) */
.stack-6 > .vo-card:not(:first-child) {
  margin-top: 1.5rem;
}

/* Perks list */
.ap-perks {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
}

.ap-perks li {
  position: relative;
  padding-left: 1.35rem;
}

.ap-perks li::before {
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--color-kumo-brand);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Pass card */
.ap-pass-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ap-pass-title {
  margin: 0;
  color: var(--text-color-kumo-default);
  font-size: 1rem;
  font-weight: 600;
}

.ap-pass-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.ap-pass-facts dt {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.ap-pass-facts dd {
  margin: 0.15rem 0 0;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
}

.ap-pass-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--color-kumo-line);
}

.ap-pass-actions:empty {
  display: none;
}

.ap-renew {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

/* Visible caption for the renewal period select */
.ap-renew-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  line-height: 2rem;
  white-space: nowrap;
}

/* One control height across the action row */
.ap-pass-actions button {
  height: 2rem;
}

/* Inline promo field inside the renewal row */
.ap-renew .promo-box.is-compact {
  flex-basis: auto;
  margin-top: 0;
  gap: 0.25rem;
}

.ap-renew .promo-input {
  width: 9.5rem;
  height: 2rem;
  font-size: 0.875rem;
}

.ap-renew .promo-msg {
  max-width: 16rem;
  font-size: 0.75rem;
}

.ap-renew-select {
  width: auto;
  height: 2rem;
  font-size: 0.875rem;
}

/* Model chips */
.ap-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-models li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-elevated);
  font-size: 0.8125rem;
}

/* Admin queue: key field with its action */
.ap-activate {
  display: flex;
  min-width: 15rem;
  align-items: center;
  gap: 0.5rem;
}

.ap-activate input {
  min-width: 0;
  flex: 1;
  height: 2rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
}

.ap-error {
  max-width: 24rem;
  margin: 0.25rem 0 0;
  white-space: normal;
  color: var(--text-color-kumo-danger);
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  .ap-pass-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap-pass-actions,
  .ap-renew {
    width: 100%;
  }

  .ap-renew-label {
    flex: 1 1 100%;
    line-height: 1.25rem;
  }

  .ap-renew .promo-box.is-compact {
    flex: 1 1 100%;
  }

  .ap-renew .promo-input {
    width: auto;
  }

  .ap-renew > button[type="submit"] {
    flex: 1 1 100%;
  }

  .ap-renew-select {
    flex: 1;
  }

  .ap-activate {
    min-width: 0;
    flex-wrap: wrap;
  }
}

/* Admin model list: multi-line field on the single-line input style */
.ap-model-input {
  height: auto;
  min-height: 11rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.55;
  resize: vertical;
}

/* ─── Language Toggle ───────────────────────────────────────────────────── */
.lang-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
}

.lang-toggle-opt {
  display: inline-grid;
  min-width: 2rem;
  height: 1.6rem;
  padding: 0 0.45rem;
  place-items: center;
  border-radius: 9999px;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-toggle-opt:hover {
  color: var(--text-color-kumo-default);
}

/* Sliding indicator behind the active option */
.lang-toggle {
  position: relative;
  isolation: isolate;
}

.lang-toggle::before {
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 2rem;
  border-radius: 9999px;
  background: var(--color-kumo-contrast);
  content: "";
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.lang-toggle[data-on="en"]::before {
  transform: translateX(calc(2rem + 2px));
}

.lang-toggle-opt {
  width: 2rem;
  padding: 0;
  transition: color 0.25s ease;
}

.lang-toggle-opt[aria-current="true"] {
  color: var(--text-color-kumo-inverse);
}

.lang-toggle-opt:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 1px;
}

/* Guest pages: toggle pinned to the top right */
.lang-toggle-guest {
  position: fixed;
  top: 1rem;
  right: 1rem;
}

/* Panel topbar: toggle sits before the signed-in user */
.lang-toggle-topbar {
  margin-left: auto;
  margin-right: 0.75rem;
}

/* Page fade between languages (set by app.js and theme.js) */
html.lang-leaving body {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

html.lang-entering body {
  animation: lang-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lang-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.lang-leaving body,
  html.lang-entering body {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }

  .lang-toggle::before {
    transition: none;
  }
}

/* ─── E-mail Templates ──────────────────────────────────────────────────── */

/* List: fixed columns keep every group aligned */
.et-table {
  min-width: 680px;
  table-layout: fixed;
}

.et-table .et-col-status {
  width: 4.5rem;
}

.et-table .et-col-key {
  width: 15rem;
}

.et-table .et-col-recipient {
  width: 8rem;
}

.et-table .et-col-action {
  width: 5rem;
}

.et-table code {
  word-break: break-all;
}

.et-name {
  color: var(--text-color-kumo-default);
  font-weight: 600;
  text-decoration: none;
}

.et-name:hover {
  color: var(--color-kumo-brand);
}

/* On/off switch (submit button of a one-field form) */
.et-switch {
  position: relative;
  display: inline-block;
  width: 2.25rem;
  height: 1.25rem;
  padding: 0;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-recessed);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
  vertical-align: middle;
}

.et-switch::after {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  box-shadow: 0 0 0 1px var(--color-kumo-line);
  content: "";
  transition: transform 0.18s ease;
}

.et-switch.is-on {
  border-color: var(--color-kumo-brand);
  background: var(--color-kumo-brand);
}

.et-switch.is-on::after {
  box-shadow: none;
  transform: translateX(1rem);
}

.et-switch.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
}

.et-switch:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Editor */
.et-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.et-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.et-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.et-form,
.et-side {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.et-side {
  position: sticky;
  top: 1rem;
}

.et-form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.et-changed {
  margin-left: 0.4rem;
  color: var(--color-kumo-brand);
  font-size: 0.75rem;
  font-weight: 500;
}

/* Placeholder reference */
.et-vars {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.et-var {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.et-var dd {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.et-var-code {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 5px;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-default);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  cursor: copy;
}

.et-var-code:hover {
  border-color: var(--color-kumo-brand);
}

/* Rendered e-mail */
.et-preview {
  display: block;
  width: 100%;
  height: 720px;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: #f4f4f5;
}

@media (max-width: 1100px) {
  .et-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .et-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .et-preview {
    height: 560px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .et-switch,
  .et-switch::after {
    transition: none;
  }
}

/* ─── QRIS Invoice Page ─────────────────────────────────────────────────── */

/* Centered column for the payment card and steps */
.invoice-wrap {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.invoice-body {
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.invoice-qr {
  padding: 0.75rem;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--color-kumo-line);
}

.invoice-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.invoice-waiting {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

/* Confirmation area below a hairline divider */
.invoice-foot {
  width: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-kumo-line);
}

.invoice-foot:empty {
  display: none;
}

.invoice-foot-plain {
  padding-top: 0;
  border-top: 0;
}

.invoice-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.invoice-confirm button {
  width: 100%;
  max-width: 320px;
  justify-content: center;
  border-radius: 9999px;
}

.invoice-confirm-hint {
  max-width: 360px;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.invoice-foot [role] {
  text-align: left;
}

/* Numbered steps */
.invoice-steps {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: invoice-step;
}

.invoice-steps li {
  position: relative;
  min-height: 1.5rem;
  padding-left: 2.25rem;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  line-height: 1.5rem;
  counter-increment: invoice-step;
}

.invoice-steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-default);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  content: counter(invoice-step);
}

.invoice-cancel {
  display: flex;
  justify-content: center;
}

/* ─── Admin Transactions ────────────────────────────────────────────────── */

/* Overview */
.tx-overview {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tx-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
}

.tx-stat-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.tx-stat-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Filters */
.tx-filters {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr) auto;
  align-items: end;
}

.tx-filter-actions {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 900px) {
  .tx-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tx-filter-search,
  .tx-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .tx-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* History */
.tx-table {
  min-width: 720px;
}

.tx-customer {
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.tx-customer:hover {
  color: var(--color-kumo-brand);
}

.tx-credit {
  color: var(--color-kumo-success);
}

.tx-debit {
  color: var(--text-color-kumo-default);
}

.tx-row-failed .tx-credit,
.tx-row-failed .tx-debit {
  color: var(--text-color-kumo-subtle);
  text-decoration: line-through;
  font-weight: 500;
}

.tx-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Service charge breakdown */
.tx-breakdown {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.tx-cat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-base);
}

.tx-cat-amount {
  color: var(--text-color-kumo-default);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tx-alltime {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-kumo-line);
}

/* ─── Daily Pass Model Picker ───────────────────────────────────────────── */

.ap-pick {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ap-pick-head {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0;
}

.ap-pick-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ap-pick-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.ap-pick-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
  height: 100%;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-base);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ap-pick-row:hover {
  border-color: var(--color-kumo-brand);
}

.ap-pick-row.is-on {
  border-color: var(--color-kumo-brand);
  background: var(--color-kumo-tint);
}

.ap-pick-row .kumo-checkbox {
  margin-top: 0.15rem;
}

.ap-pick-name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ap-pick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  grid-column: 2;
}

.ap-pick-tags:empty {
  display: none;
}

@media (max-width: 520px) {
  .ap-pick-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-pick-row {
    transition: none;
  }
}

/* Safe mode switch and hidden unsafe models */
.ap-safe {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-elevated);
  cursor: pointer;
}

.ap-safe .kumo-checkbox {
  margin-top: 0.15rem;
}

/* Special pass request purpose text */
.ap-purpose {
  max-width: 28rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Special-only models on the special tab */
.ap-model-chip.is-special {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 40%, var(--color-kumo-line));
  background: color-mix(in srgb, var(--color-kumo-brand) 5%, var(--color-kumo-base));
}

/* Model name keeps the space; the special tag sits at the end of the chip */
.ap-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-chip-tag {
  flex: none;
  margin-left: auto;
  padding: 0.05rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--color-kumo-brand) 35%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, transparent);
  color: var(--color-kumo-brand);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Safe mode state line */
.ap-safe-status {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color-kumo-success);
}

.ap-safe-status.is-pending {
  color: var(--text-color-kumo-warning);
}

.ap-pick.is-safe .ap-pick-unsafe {
  display: none;
}

/* ─── Customer Dashboard ────────────────────────────────────────────────── */

.db-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.db-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Metrics Row */
.db-kpis {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

/* Four summary cards: two by two on mid widths, one row once there is room for all four */
@media (min-width: 560px) {
  .db-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .db-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.db-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1.1rem 1rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

a.db-kpi:hover {
  box-shadow: 0 0 0 1px var(--color-kumo-brand);
}

.db-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.db-kpi-value {
  color: var(--text-color-kumo-default);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.db-kpi-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-default);
}

.db-kpi-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.db-kpi-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Attention List */
.db-attention {
  display: grid;
  margin: 0;
  padding: 0 1rem 0.5rem;
  list-style: none;
}

.db-attention-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.db-attention-item + .db-attention-item {
  border-top: 1px solid var(--color-kumo-line);
}

.db-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-kumo-brand);
}

.db-dot-warning {
  background: var(--color-kumo-warning);
}

/* Services and side column */
.db-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* Both cards share the row height; bodies fill the remaining space */
/* Card header actions: a small button keeps the header as tall as a text-only header,
   and a ghost button's label lines up with the right edge like a plain count */
.lc-head > .h-6\.5,
.lc-head > form .h-6\.5 {
  margin-block: -0.25rem;
}

.lc-head > .h-6\.5.bg-inherit:last-child {
  margin-inline-end: -0.5rem;
}

.db-grid > section {
  height: 100%;
}

.db-body {
  flex: 1;
  gap: 0.75rem;
}

.db-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.db-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0;
}

.db-row + .db-row {
  border-top: 1px solid var(--color-kumo-line);
}

.db-row-compact {
  grid-template-columns: minmax(0, 1fr) auto;
}

.db-row-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-subtle);
}

.db-row-name {
  overflow: hidden;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.db-row-name:hover {
  color: var(--color-kumo-brand);
}

/* Services list: application logos and type icons share one size */
.db-row-icon.sv-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-kumo-line);
}

.sv-addr {
  max-width: 18rem;
  overflow: hidden;
  white-space: nowrap;
}

.db-empty {
  display: grid;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: 0.25rem;
  min-height: 7rem;
  padding: 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-tint);
  text-align: center;
}

/* Product Shortcuts */
.db-products {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

/* Two per row on mid widths; on wide screens the server picks a column count that keeps rows even */
@media (min-width: 640px) {
  .db-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-products-cols-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1180px) {
  .db-products-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-products-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.db-product {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.db-product:hover {
  box-shadow: 0 0 0 1px var(--color-kumo-brand);
}

.db-product-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--color-kumo-brand);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .db-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .db-actions > * {
    flex: 1 1 auto;
  }

  .db-attention-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .db-attention-item > :last-child {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .db-kpi,
  .db-product {
    transition: none;
  }
}

/* ─── Daily Pass Purchase (customer) ────────────────────────────────────── */

/* Model list */
.ap-models-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ap-base {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-elevated);
}

.ap-base #ap-base-url {
  flex: 1;
  min-width: 0;
}

.ap-model-grid {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Never wider than the container, e.g. inside the uncensored box on a phone */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* Admin sidebar: provider names under a menu label, blurred until the pointer rests on one */
.sb-text-hosts {
  padding-block: 0.3rem;
}

.sb-hosts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color-kumo-subtle);
}

.sb-host {
  filter: blur(3px);
  user-select: none;
  transition: filter 0.15s ease;
}

.sb-host:hover {
  filter: none;
  user-select: text;
}

@media (prefers-reduced-motion: reduce) {
  .sb-host {
    transition: none;
  }
}

/* Every model of a token pack key, one chip per line */
.tp-model-chips {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ap-model-chip {
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: copy;
  transition: border-color 0.15s ease;
}

.ap-model-chip:hover,
.ap-model-chip:focus-visible {
  border-color: var(--color-kumo-brand);
}

@media (prefers-reduced-motion: reduce) {
  .ap-model-chip {
    transition: none;
  }
}

.ap-models-head > .vo-title {
  flex: 0 1 auto;
  width: auto;
  margin: 0;
}

/* Flaz webhook block on the reseller page */
.reseller-webhook {
  display: grid;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-elevated);
}

/* ─── Admin Product Catalog ─────────────────────────────────────────────── */

.cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.cat-table {
  min-width: 640px;
}

.cat-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}

.cat-row-off td {
  color: var(--text-color-kumo-subtle);
}

.cat-row-off .cat-price .font-semibold {
  color: var(--text-color-kumo-subtle);
}

.cat-empty {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-tint);
  text-align: center;
}

/* Display-name editing */
.cat-form {
  display: grid;
  gap: 1.5rem;
}

.cat-names {
  display: grid;
  gap: 0.5rem;
}

.cat-name-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cat-name-field {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

.cat-name-input {
  min-width: 12rem;
  height: 2rem;
  font-size: 0.875rem;
}

.cat-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* VPS order: all providers on one row, wrapping only on narrow screens */
.vo-options.vo-options-row {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* ─── Free AI Quota Card ────────────────────────────────────────────────── */

.free-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.free-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
}

.free-stats dt {
  font-size: 0.75rem;
  color: var(--color-kumo-subtle, #7a7b7b);
}

.free-stats dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.free-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
}

/* ─── Customer Transactions ─────────────────────────────────────────────── */

.tx-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tx-search input {
  flex: 1 1 16rem;
  min-width: 0;
}

/* Clear-search slot keeps the form shape stable for in-place loads; empty when there is no search */
.tx-clear:empty {
  display: none;
}

/* ─── Customer Tickets ──────────────────────────────────────────────────── */

.tk-stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.tk-stat {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.tk-stat:hover {
  border-color: var(--color-kumo-brand);
}

/* Replies waiting for the customer */
.tk-stat-alert {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 40%, var(--color-kumo-line));
  background: color-mix(in srgb, var(--color-kumo-brand) 6%, var(--color-kumo-base));
}

/* ─── Customer Account ──────────────────────────────────────────────────── */

.acc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 960px) {
  .acc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Identity row */
.acc-identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.acc-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 12%, var(--color-kumo-base));
  color: var(--color-kumo-brand);
  font-size: 1.1rem;
  font-weight: 700;
}

/* Details list */
.acc-dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.acc-dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-kumo-line);
  font-size: 0.875rem;
}

.acc-dl > div:last-child {
  border-bottom: 0;
}

.acc-dl dt {
  color: var(--text-color-kumo-subtle);
}

.acc-dl dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

/* Signed-in devices */
.acc-devices {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acc-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
}

.acc-device.is-current {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 35%, var(--color-kumo-line));
  background: color-mix(in srgb, var(--color-kumo-brand) 5%, var(--color-kumo-base));
}

.acc-device-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-subtle);
}

/* Activity timeline */
.acc-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.acc-event {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 0.6rem 0;
}

.acc-event + .acc-event::before {
  position: absolute;
  top: -0.6rem;
  left: 0.3rem;
  width: 1px;
  height: 1.2rem;
  background: var(--color-kumo-line);
  content: "";
}

.acc-event-dot {
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.3rem;
  border-radius: 9999px;
  background: var(--color-kumo-line);
}

.acc-event-dot.is-auth {
  background: var(--color-kumo-brand);
}

/* ─── Customer AI Services Hub ──────────────────────────────────────────── */

.ai-nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Credit strip */
.ai-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
  background: var(--color-kumo-base);
}

.ai-credit-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.ai-credit-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ai-credit-value small {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 600;
}

.ai-credit-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.ai-credit-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.ai-credit-meta {
  padding-left: 1rem;
  border-left: 1px solid var(--color-kumo-line);
}

@media (max-width: 640px) {
  .ai-credit-meta {
    padding-left: 0;
    border-left: 0;
  }
  .ai-credit-actions {
    width: 100%;
    margin-left: 0;
  }
}

/* Usage figures */
.ai-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.ai-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.25rem 1rem;
  border-left: 1px solid var(--color-kumo-line);
}

.ai-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.ai-stats span {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.ai-stats b {
  font-size: 1.25rem;
  font-weight: 700;
}

.ai-stats small {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

@media (max-width: 760px) {
  .ai-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0;
  }
  .ai-stats > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* Example model picker: no brand-colored focus ring, the neutral border stays */
.ai-model-select:focus,
.ai-model-select:focus-visible {
  --tw-ring-color: var(--color-kumo-line);
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 1px var(--tw-ring-color);
  outline: none;
}

/* AI transaction rows: kind icon, title with details, amount and status on the right */
.tx-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tx-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--color-kumo-line);
}
.tx-row:first-child {
  border-top: 0;
  padding-top: 0.25rem;
}
.tx-row:last-child {
  padding-bottom: 0.25rem;
}
.tx-icon {
  display: grid;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 9999px;
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-subtle);
}
.tx-icon-credit {
  background: var(--color-kumo-success-tint);
  color: var(--text-color-kumo-success);
}
.tx-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 0.125rem;
}
.tx-title {
  font-size: 0.9375rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-meta {
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}
.tx-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}
.tx-amount {
  font-size: 0.9375rem;
  font-weight: 600;
}
.tx-amount.is-credit {
  color: var(--text-color-kumo-success);
}
.tx-amount.is-refunded {
  color: var(--text-color-kumo-subtle);
  text-decoration: line-through;
}

/* Uncensored terms modal: centered even inside a stacked content column (stack-* spacing) */
dialog.terms-modal {
  margin: auto;
}

/* Uncensored terms modal: the terms scroll inside a bordered box */
.terms-scroll {
  max-height: min(16rem, 45vh);
  overflow-y: auto;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-elevated, var(--color-kumo-base));
}
.terms-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  font-size: 0.875rem;
  line-height: 1.6;
}
.terms-hint {
  margin: -0.5rem 0 0;
}
.terms-hint[hidden] {
  display: none;
}

/* Key card revealed in place: the slot opens and the card fades in (animated in app.js) */
.tp-reveal-slot:empty {
  display: none;
}

/* Code sample with a copy button in its top-right corner */
.code-copy-wrap {
  position: relative;
}
.code-copy-wrap .code-block {
  padding-right: 5.5rem;
}
.code-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* Censored key: eye shows the full key, crossed eye hides it again */
.secret-toggle .icon-btn-eye-slash,
.secret-toggle[aria-pressed="true"] .icon-btn-eye {
  display: none;
}
.secret-toggle[aria-pressed="true"] .icon-btn-eye-slash {
  display: inline-flex;
}

/* Shortcuts under the header of an AI package page */
.ai-pkg-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.ai-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .ai-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Code samples */
.ai-code {
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
}

.ai-code-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border-bottom: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-tint);
}

.ai-code-bar [data-code-tab] {
  padding: 0.3rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: none;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.ai-code-bar [data-code-tab][aria-selected="true"] {
  border-color: var(--color-kumo-line);
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-strong);
}

.ai-code-copy {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.8125rem;
  cursor: pointer;
}

.ai-code .code-block {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.ai-code [data-code-panel][hidden] {
  display: none;
}

.ai-code-hint {
  margin: 0;
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--color-kumo-line);
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

/* Compact lists (keys, calls, months) */
.ai-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-kumo-line);
}

.ai-list li:last-child {
  border-bottom: 0;
}

/* ─── Dashboard Services Table ──────────────────────────────────────────── */

.db-svc-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.db-svc-tools .seg-wrap {
  min-width: 0;
}

.db-svc-search {
  flex: 0 1 14rem;
  min-width: 0;
}

.db-svc-table tr[hidden] {
  display: none;
}

.db-svc-none {
  padding: 1rem 0;
  text-align: center;
}

.db-svc-none[hidden] {
  display: none;
}

/* Paid invoice summary */
.invoice-paid {
  max-width: 560px;
}

/* Copy button next to a model id */
.mono-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.mono-copy .ml-copy {
  flex: none;
}

/* Free tier: label and model chips on one aligned row that wraps on phones */
.free-models {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.free-models-label {
  color: var(--text-color-kumo-subtle);
}

.free-model {
  max-width: 100%;
  padding: 0.2rem 0.25rem 0.2rem 0.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
}

.free-model code {
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8125rem;
  line-height: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-color-kumo-default);
}

.free-model .ml-copy {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
}

.dr-period-price[hidden] {
  display: none;
}

/* ─── Panel Navigation Progress ─────────────────────────────────────────── */

html.nav-loading::before {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-kumo-brand);
  content: "";
  transform-origin: left;
  animation: nav-progress 1.2s ease-out forwards;
}

@keyframes nav-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  html.nav-loading::before {
    animation: none;
    transform: scaleX(0.6);
  }
}

/* ─── Dedicated AI Access (admin) ───────────────────────────────────────── */

.ded-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.ded-admin-stats > div {
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
}

.ded-admin-stats dt {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.ded-admin-stats dd {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ded-models {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.ded-models legend {
  margin-bottom: 0.5rem;
}

.ded-model {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  margin: 0 !important;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  cursor: pointer;
}

.ded-model:has(input:checked) {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 6%, var(--color-kumo-base));
}

.ded-model.is-off {
  cursor: not-allowed;
  opacity: 0.6;
}

.ded-models[hidden] {
  display: none;
}

/* Mortera model list */
.ded-models-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ded-models-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.5rem;
}

/* ─── Dedicated AI Access (customer) ────────────────────────────────────── */

.ded-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.ded-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
}

.ded-stat-wide {
  grid-column: span 1;
}

.ded-stat-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.ded-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ded-stat-value small {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8rem;
  font-weight: 500;
}

.ded-stat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  line-height: 1.45;
}

.ded-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-kumo-brand);
  font: inherit;
  cursor: pointer;
}

.ded-link:hover {
  text-decoration: underline;
}

/* E-mail verification card */
.ve-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}

.ve-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--color-kumo-brand) 22%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, transparent);
  color: var(--color-kumo-brand);
}

.ve-icon.is-success {
  border-color: color-mix(in srgb, var(--text-color-kumo-success) 25%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-success) 10%, transparent);
  color: var(--text-color-kumo-success);
}

.ve-icon.is-warning {
  border-color: color-mix(in srgb, var(--text-color-kumo-warning) 30%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-warning) 10%, transparent);
  color: var(--text-color-kumo-warning);
}

/* Progress steps: done, current, next */
.ve-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
}

.ve-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

/* Connector line to the previous step */
.ve-step + .ve-step::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: calc(50% + 1rem);
  left: calc(-50% + 1rem);
  height: 1px;
  background: var(--color-kumo-line);
}

.ve-step.is-done + .ve-step::before {
  background: var(--text-color-kumo-success);
}

.ve-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ve-step.is-done {
  color: var(--text-color-kumo-success);
}

.ve-step.is-done .ve-step-dot {
  border-color: transparent;
  background: color-mix(in srgb, var(--text-color-kumo-success) 12%, transparent);
}

.ve-step.is-current {
  color: var(--text-color-kumo-default);
  font-weight: 600;
}

.ve-step.is-current .ve-step-dot {
  border-color: var(--color-kumo-brand);
  background: var(--color-kumo-brand);
  color: #fff;
}

.ve-step-label {
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
}

/* Actions and tips */
.ve-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ve-email {
  font-weight: 600;
  color: var(--text-color-kumo-default);
  overflow-wrap: anywhere;
}

/* Banner close button: keeps the text row as tall as one line, so the icon and text stay level */
.banner-close {
  margin-block: -0.25rem;
  margin-inline-end: -0.5rem;
}

/* Balance refresh: icon button that spins while the page reloads */
.ded-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.375rem 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: none;
  color: var(--color-kumo-brand);
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ded-refresh:hover {
  background: var(--color-kumo-tint);
}

.ded-refresh:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 1px;
}

.ded-refresh[aria-busy="true"] {
  cursor: progress;
}

.ded-refresh[aria-busy="true"] svg {
  animation: ded-spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .ded-refresh[aria-busy="true"] svg {
    animation-duration: 2.4s;
  }
}

/* Quota and share meters */
.ded-meter {
  display: block;
  overflow: hidden;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-kumo-recessed, var(--color-kumo-tint));
}

.ded-meter-sm {
  flex: 1;
  height: 5px;
}

.ded-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 9999px;
  background: var(--color-kumo-brand);
  transition: width 300ms ease-out;
}

.ded-meter-fill.is-high {
  background: var(--color-kumo-danger, #dc2626);
}

.ded-share-cell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 160px;
}

.ded-key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.55rem 0.55rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
}

/* 30-day chart */
.ded-chart {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 4px;
  height: 140px;
}

.ded-day {
  display: flex;
  height: 100%;
}

.ded-chart .usage-bar-fill.is-today {
  background: color-mix(in srgb, var(--color-kumo-brand) 70%, #000);
}

.ded-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.ded-logs {
  min-width: 720px;
}

@media (max-width: 1100px) {
  .ded-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ded-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .ded-chart {
    gap: 2px;
  }
}

/* ─── Panel Brand Lockup ────────────────────────────────────────────────── */

.pb-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--text-color-kumo-strong);
  text-decoration: none;
}

.pb-brand-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-base);
}

.pb-mark {
  display: block;
  overflow: visible;
  width: 1.15rem;
  height: auto;
}

.pb-brand-name {
  overflow: hidden;
  font-size: 0.975rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-brand-dot {
  color: #056dff;
}

.pb-brand-lg .pb-brand-tile {
  width: 2.4rem;
  height: 2.4rem;
}

.pb-brand-lg .pb-mark {
  width: 1.4rem;
}

.pb-brand-lg .pb-brand-name {
  font-size: 1.15rem;
}

/* Dark mode: the brand tile stays white, so the mark keeps its light-mode colours (same as the landing navbar) */
[data-mode="dark"] .pb-brand-tile {
  border-color: rgb(255 255 255 / 0.35);
  background: #fff;
}

[data-mode="dark"] .pb-mark .sh-s-deck-lo { fill: #1f2226; }
[data-mode="dark"] .pb-mark .sh-s-deck-hi { fill: #0f1012; }
[data-mode="dark"] .pb-mark .sh-s-bevel { fill: #3a3e45; }
[data-mode="dark"] .pb-mark .sh-s-wall { fill: #0a0a0a; }
[data-mode="dark"] .pb-mark .sh-s-side { fill: #2b2e33; }

/* ─── Admin Upstream Keys ───────────────────────────────────────────────── */

.uk-summary {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.uk-alert {
  border-color: color-mix(in srgb, var(--color-kumo-warning, #f59e0b) 45%, var(--color-kumo-line));
  background: color-mix(in srgb, var(--color-kumo-warning, #f59e0b) 6%, var(--color-kumo-base));
}

.uk-table {
  min-width: 1040px;
}

.uk-shared {
  display: block;
  max-width: 14rem;
  margin-top: 0.3rem;
  color: var(--color-kumo-danger, #dc2626);
  font-size: 0.75rem;
  line-height: 1.4;
}

.uk-note {
  display: flex;
  gap: 0.35rem;
  min-width: 14rem;
}

.uk-note input {
  height: 2rem;
  font-size: 0.8125rem;
}

/* ─── Paid Invoice Receipt ──────────────────────────────────────────────── */

.inv-paid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  max-width: 1040px;
}

@media (max-width: 900px) {
  .inv-paid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.inv-receipt-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.75rem 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-kumo-line);
  text-align: center;
}

.inv-receipt-check {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.4rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-success, #16a34a) 12%, var(--color-kumo-base));
  color: var(--color-kumo-success, #16a34a);
}

.inv-receipt-title {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
  font-weight: 600;
}

.inv-receipt-amount {
  margin: 0;
  color: var(--text-color-kumo-strong);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.inv-receipt-sub {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.inv-receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.inv-next-balance {
  margin: 0;
  color: var(--text-color-kumo-strong);
  font-size: 1.6rem;
  font-weight: 700;
}

.inv-next-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-next-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.inv-next-list a:hover {
  border-color: var(--color-kumo-brand);
}

.inv-next-icon {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-subtle);
}

.inv-next-arrow {
  color: var(--text-color-kumo-subtle);
}

/* ─── Model Brand Logos ─────────────────────────────────────────────────── */

.mlogo {
  display: inline-block;
  flex: none;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Sizes */
.mlogo-sm { width: 1rem; height: 1rem; }
.mlogo-md { width: 1.25rem; height: 1.25rem; }
.mlogo-lg { width: 1.75rem; height: 1.75rem; }

/* Full-color marks */
.mlogo-claude { background-image: url("model-logos/claude.svg"); }
.mlogo-gemini { background-image: url("model-logos/gemini.svg"); }
.mlogo-deepseek { background-image: url("model-logos/deepseek.svg"); }
.mlogo-qwen { background-image: url("model-logos/qwen.svg"); }
.mlogo-minimax { background-image: url("model-logos/minimax.svg"); }
.mlogo-seed { background-image: url("model-logos/seed.svg"); }
.mlogo-hunyuan { background-image: url("model-logos/hunyuan.svg"); }
.mlogo-meta { background-image: url("model-logos/meta.svg"); }
.mlogo-nvidia { background-image: url("model-logos/nvidia.svg"); }
.mlogo-poolside { background-image: url("model-logos/poolside.svg"); }
.mlogo-longcat { background-image: url("model-logos/longcat.svg"); }
.mlogo-stepfun { background-image: url("model-logos/stepfun.svg"); }

/* Single-color marks follow the text color, so they stay visible in dark mode */
.mlogo-openai,
.mlogo-grok,
.mlogo-mimo,
.mlogo-zai {
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.mlogo-openai { -webkit-mask-image: url("model-logos/openai.svg"); mask-image: url("model-logos/openai.svg"); }
.mlogo-grok { -webkit-mask-image: url("model-logos/grok.svg"); mask-image: url("model-logos/grok.svg"); }
.mlogo-mimo { -webkit-mask-image: url("model-logos/mimo.svg"); mask-image: url("model-logos/mimo.svg"); }
.mlogo-zai { -webkit-mask-image: url("model-logos/zai.svg"); mask-image: url("model-logos/zai.svg"); }

/* Kimi: the letter follows the text color (a fixed white letter vanished on light
   surfaces) and the blue dot keeps its brand color; each sits in its own layer
   so the letter mask does not clip the dot */
.mlogo-kimi {
  position: relative;
}
.mlogo-kimi::before,
.mlogo-kimi::after {
  content: "";
  position: absolute;
  inset: 0;
}
.mlogo-kimi::before {
  background-color: currentColor;
  -webkit-mask: url("model-logos/kimi-mark.svg") center / contain no-repeat;
  mask: url("model-logos/kimi-mark.svg") center / contain no-repeat;
}
.mlogo-kimi::after {
  background: url("model-logos/kimi-dot.svg") center / contain no-repeat;
}

/* Letter mark for unknown brands */
.mlogo-letter {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 5px;
  color: var(--text-color-kumo-subtle);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}
.mlogo-lg.mlogo-letter { font-size: 0.8125rem; }

/* Name with logo */
.mlogo-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Logo inside the catalog avatar box */
.ml-avatar-logo {
  background: var(--color-kumo-base);
  border: 1px solid var(--color-kumo-line);
}

/* Several models in one cell */
.mlogo-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

/* ─── Admin User Directory ──────────────────────────────────────────────── */

.cu-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

.cu-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  color: inherit;
  text-decoration: none;
}

a.cu-stat:hover,
.cu-stat.is-on {
  border-color: var(--color-kumo-brand);
}

.cu-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-color-kumo-subtle);
}

.cu-stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cu-stat-value {
  font-size: clamp(1.05rem, 1.5vw, 1.375rem);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cu-stat-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

/* List card */
.cu-list {
  padding: 0;
  overflow: hidden;
}

.cu-tools {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.cu-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cu-search input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
}

.cu-search select {
  flex: 0 1 200px;
}

.cu-empty {
  margin: 1rem;
}

.cu-table td {
  vertical-align: middle;
}

/* User cell */
.cu-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  max-width: 22rem;
}

/* Customer name opens the detail page, like the Detail button */
.cu-name {
  color: var(--text-color-kumo-default);
  text-decoration: none;
}

.cu-name:hover {
  font-weight: 700;
}

.cu-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, var(--color-kumo-base));
  color: var(--color-kumo-brand);
  font-size: 0.75rem;
  font-weight: 700;
}

.cu-avatar.is-admin {
  background: var(--color-kumo-contrast);
  color: var(--color-kumo-base);
}

/* E-mail confirmation dot */
.cu-verify {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-color-kumo-warning);
  font-weight: 500;
}

.cu-verify::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: currentColor;
}

.cu-verify.is-ok {
  color: var(--text-color-kumo-success);
}

/* Active services count */
.cu-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.cu-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

/* ─── Admin Customer Profile ────────────────────────────────────────────── */

.cp-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
}

.cp-id {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.cp-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 12px;
  background: var(--color-kumo-brand);
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
}

.cp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.cp-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.cp-copy {
  display: inline-grid;
  place-items: center;
  padding: 0.15rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.cp-copy:hover {
  color: var(--text-color-kumo-default);
  background: var(--color-kumo-tint);
}

/* Copied state: same size, green check */
.cp-copy.is-copied,
.ml-copy.is-copied {
  color: var(--text-color-kumo-success);
}

.cp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

/* Account action row: one size and shape for buttons and the status badge */
.cp-act-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Status chip, not clickable; matches the Kumo button height */
.cp-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  background: var(--color-kumo-success-tint, color-mix(in srgb, var(--text-color-kumo-success) 8%, var(--color-kumo-base)));
  color: var(--text-color-kumo-success);
  font-weight: 500;
  white-space: nowrap;
}

.cu-stat.is-negative .cu-stat-value {
  color: var(--text-color-kumo-danger);
}

/* Tabs card */
.cp-tabs-card {
  padding: 0;
  overflow: hidden;
}

.cp-tabs {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.cp-panel[hidden] {
  display: none;
}

.cp-panel-pad {
  padding: 1rem;
}

.cp-panel-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.cp-empty {
  margin: 0;
  padding: 1.5rem 1rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
}

.cp-link {
  color: var(--color-kumo-brand);
  font-weight: 500;
  text-decoration: none;
}

.cp-link:hover {
  text-decoration: underline;
}

.cp-warn {
  color: var(--text-color-kumo-warning);
}

.cp-plus {
  color: var(--text-color-kumo-success);
}

/* Admin tools under the profile */
.cp-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
  scroll-margin-top: 5rem;
}

.cp-tool-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.cp-phone {
  display: flex;
  gap: 0.5rem;
}

.cp-phone-cc {
  display: inline-grid;
  flex: none;
  place-items: center;
  padding: 0 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-tint);
  font-size: 0.875rem;
  font-weight: 600;
}

.cp-phone input {
  flex: 1;
  min-width: 0;
}

/* Add / Deduct switch */
.cp-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.cp-seg-opt {
  margin: 0 !important;
  cursor: pointer;
}

.cp-seg-opt span {
  display: grid;
  place-items: center;
  height: 2.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
  font-weight: 600;
}

.cp-seg-opt input:checked + span {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 8%, var(--color-kumo-base));
  color: var(--color-kumo-brand);
}

.cp-seg-opt.is-deduct input:checked + span {
  border-color: var(--text-color-kumo-danger);
  background: color-mix(in srgb, var(--text-color-kumo-danger) 7%, var(--color-kumo-base));
  color: var(--text-color-kumo-danger);
}

.cp-seg-opt input:focus-visible + span {
  outline: 2px solid color-mix(in srgb, var(--color-kumo-brand) 45%, transparent);
  outline-offset: 2px;
}

.cp-role-warn {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--text-color-kumo-warning) 35%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-color-kumo-warning) 7%, var(--color-kumo-base));
  font-size: 0.8125rem;
  line-height: 1.55;
}

/* Language switch in place: content dims briefly while the other language loads */
html.lang-swapping body > [data-sv] {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

/* ─── Admin Services Directory ──────────────────────────────────────────── */

/* Card label colors follow the status they count */
.sv-stat-all .cu-stat-head { color: var(--color-kumo-brand); }
.sv-stat-running .cu-stat-head { color: var(--text-color-kumo-success); }
.sv-stat-stopped .cu-stat-head { color: var(--text-color-kumo-danger); }
.sv-stat-suspended .cu-stat-head,
.sv-stat-overdue .cu-stat-head { color: var(--text-color-kumo-warning); }

/* Per-type directories (applications, hosting, e-mail, SSL, VPN) */
.sv-stat-active .cu-stat-head { color: var(--text-color-kumo-success); }
.sv-stat-provisioning .cu-stat-head,
.sv-stat-pending .cu-stat-head { color: var(--color-kumo-brand); }
.sv-stat-errors .cu-stat-head,
.sv-stat-terminated .cu-stat-head { color: var(--text-color-kumo-danger); }

.sv-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 6%, var(--color-kumo-base));
}

.sv-icon.is-domain {
  color: var(--text-color-kumo-success);
  background: color-mix(in srgb, var(--text-color-kumo-success) 6%, var(--color-kumo-base));
}

.sv-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.sv-act {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.sv-act:hover {
  border-color: var(--color-kumo-line);
  background: var(--color-kumo-tint);
  color: var(--color-kumo-brand);
}

/* Admin domain directory card label colors */
.dm-stat-active .cu-stat-head { color: var(--text-color-kumo-success); }
.dm-stat-pending .cu-stat-head,
.dm-stat-expiring .cu-stat-head { color: var(--text-color-kumo-warning); }
.dm-stat-expired .cu-stat-head { color: var(--text-color-kumo-danger); }

/* ─── Admin Service Detail ──────────────────────────────────────────────── */

.sv-icon-lg {
  width: 4rem;
  height: 4rem;
  border-radius: 12px;
}

/* Small switch inside the auto-renew action */
.sv-switch {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--color-kumo-line);
}

.sv-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--color-kumo-base);
  transition: transform 0.15s ease;
}

.sv-switch.is-on {
  background: var(--text-color-kumo-success);
}

.sv-switch.is-on::after {
  transform: translateX(0.75rem);
}

/* Label and value pairs in two columns */
.svc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
}

.svc-facts dt {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.svc-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Nameserver rows */
.svc-ns {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
}

.svc-ns li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
}

.svc-ns li + li {
  border-top: 1px solid var(--color-kumo-line);
}

.svc-ns li .cp-copy {
  margin-left: auto;
}

.svc-ns-n {
  flex: none;
  min-width: 2.25rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Raw snapshot disclosure */
.svc-raw {
  padding: 0;
  overflow: hidden;
}

.svc-raw summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.svc-raw summary::-webkit-details-marker {
  display: none;
}

.svc-raw summary .text-xs {
  margin-left: auto;
}

.svc-raw[open] summary {
  border-bottom: 1px solid var(--color-kumo-line);
}

.svc-raw-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 1rem;
  margin: 0;
  padding: 1rem;
}

.svc-raw-list dt {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.svc-raw-list dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* Side-by-side cards share a row height; the white body fills it so no grey band shows below */
.svc-card {
  display: flex;
  flex-direction: column;
}

.svc-card > :last-child {
  flex: 1 1 auto;
}

/* Directory toolbar: search field with icon, compact selects, labelled filter chips */
.cu-search {
  align-items: center;
}

.cu-search input[type="search"] {
  padding-left: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7b7b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-position: 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px;
}

.cu-search select {
  flex: 0 0 auto;
  width: auto;
  min-width: 10rem;
  max-width: 14rem;
}

.cu-search button[type="submit"] {
  flex: 0 0 auto;
  padding-inline: 1.25rem;
}

@media (max-width: 640px) {
  .cu-search select {
    flex: 1 1 45%;
    max-width: none;
  }

  .cu-search button[type="submit"] {
    flex: 1 1 100%;
  }
}

/* ─── Admin Expenses ────────────────────────────────────────────────────── */

/* Category palette */
.ex-c-blue { --ex-c: #2563eb; }
.ex-c-green { --ex-c: #16a34a; }
.ex-c-purple { --ex-c: #7c3aed; }
.ex-c-orange { --ex-c: #ea580c; }
.ex-c-teal { --ex-c: #0d9488; }
.ex-c-rose { --ex-c: #e11d48; }
.ex-c-amber { --ex-c: #d97706; }
.ex-c-slate { --ex-c: #64748b; }

/* Header */
.ex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.ex-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ex-btn-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background: var(--color-kumo-fill);
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Overview cards */
.ex-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ex-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
}

.ex-card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ex-empty-note {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
}

/* Total & trend */
.ex-total {
  gap: 0.35rem;
}

.ex-total-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ex-total-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-default);
}

.ex-month-nav {
  display: flex;
  gap: 0.35rem;
}

.ex-nav-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
  color: var(--color-kumo-brand);
  text-decoration: none;
}

.ex-nav-btn:hover {
  background: var(--color-kumo-tint);
}

.ex-nav-btn.is-disabled {
  color: var(--text-color-kumo-subtle);
  opacity: 0.45;
}

.ex-total-value {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ex-total-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.ex-trend {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.ex-trend-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--text-color-kumo-subtle);
  text-decoration: none;
}

.ex-trend-track {
  display: flex;
  align-items: flex-end;
  height: 3.25rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.ex-bar {
  width: 100%;
  height: 0;
  border-radius: 0.3rem 0.3rem 0 0;
  background: color-mix(in srgb, var(--color-kumo-brand) 35%, var(--color-kumo-base));
  transition: height 280ms cubic-bezier(0.22, 1, 0.36, 1), background 150ms ease;
}

.ex-trend-col:hover .ex-bar {
  background: color-mix(in srgb, var(--color-kumo-brand) 55%, var(--color-kumo-base));
}

.ex-trend-col.is-on .ex-bar {
  background: var(--color-kumo-brand);
}

.ex-trend-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.ex-trend-col.is-on .ex-trend-label {
  color: var(--text-color-kumo-default);
}

/* By category */
.ex-cats {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ex-cats li {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ex-cat-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.ex-cat-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ex-meter {
  display: block;
  height: 0.4rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--color-kumo-recessed);
}

.ex-meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ex-c, var(--color-kumo-brand));
  transition: width 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Top entries */
.ex-top {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.ex-top li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ex-top-rank {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.35rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
}

.ex-top-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Filters */
.ex-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.ex-search {
  position: relative;
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  min-width: 0;
}

.ex-search > svg {
  position: absolute;
  left: 0.75rem;
  z-index: 1;
  color: var(--text-color-kumo-subtle);
  pointer-events: none;
}

.ex-search input {
  padding-left: 2.25rem;
}

.ex-month-input {
  flex: 0 1 11rem;
  width: auto;
}

.ex-category-select {
  flex: 0 1 13rem;
  width: auto;
}

/* Table */
.ex-table td {
  vertical-align: middle;
}

.ex-table tfoot td {
  border-top: 1px solid var(--color-kumo-line);
}

.ex-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.3rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 500;
  vertical-align: middle;
}

.ex-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ex-c) 28%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--ex-c) 9%, var(--color-kumo-base));
  color: var(--ex-c);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.ex-tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
}

.sv-act.is-danger {
  color: var(--text-color-kumo-danger);
}

.sv-act.is-danger:hover {
  border-color: color-mix(in srgb, var(--text-color-kumo-danger) 30%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-danger) 8%, var(--color-kumo-base));
  color: var(--text-color-kumo-danger);
}

/* Dialogs: centered in the viewport (the reset clears the native auto margin) */
.ex-modal {
  margin: auto;
}

.ex-modal-wide {
  width: min(94vw, 680px);
}

.ex-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: min(86vh, 760px);
  padding: 1.25rem;
  overflow-y: auto;
}

.ex-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ex-modal-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.ex-modal-sub {
  margin: 0.2rem 0 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.ex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.ex-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.ex-span {
  grid-column: 1 / -1;
}

.ex-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ex-subform {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.ex-subform-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Recurring rules */
.ex-rules {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  list-style: none;
}

.ex-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
}

.ex-rule + .ex-rule {
  border-top: 1px solid var(--color-kumo-line);
}

.ex-rule.is-paused {
  background: var(--color-kumo-elevated);
}

.ex-rule.is-paused .ex-rule-main {
  opacity: 0.6;
}

.ex-rule-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

/* Categories */
.ex-catlist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ex-catlist li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ex-catform {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.ex-catform input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.ex-color-select {
  flex: 0 0 7.5rem;
  width: 7.5rem;
}

.ex-swatch {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: var(--ex-c);
}

.ex-cat-use {
  min-width: 1.5rem;
  text-align: center;
}

.ex-subform.ex-catform {
  flex-direction: row;
}

@media (max-width: 1024px) {
  .ex-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ex-total {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .ex-overview,
  .ex-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ex-head-actions,
  .ex-head-actions > button {
    width: 100%;
  }

  .ex-head-actions > button {
    justify-content: center;
  }

  .ex-month-input,
  .ex-category-select {
    flex: 1 1 45%;
  }

  .ex-filters button[type="submit"] {
    flex: 1 1 100%;
  }

  .ex-color-select {
    flex-basis: 6rem;
    width: 6rem;
  }
}

/* ─── Admin Payments (Top-up List) ──────────────────────────────────────── */

/* Revenue cards */
.pay-revenue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.pay-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}

.pay-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.pay-card-label {
  font-size: 0.875rem;
  font-weight: 500;
}

.pay-card-value {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pay-card-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.pay-card-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-elevated);
}

/* Status totals */
.pay-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.pay-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  color: var(--text-color-kumo-default);
  text-decoration: none;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.pay-stat:hover {
  background: var(--color-kumo-tint);
}

.pay-stat.is-on {
  box-shadow: inset 0 0 0 1.5px var(--color-kumo-brand);
}

.pay-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-elevated);
}

.pay-stat-paid .pay-stat-icon { color: var(--text-color-kumo-success); }
.pay-stat-pending .pay-stat-icon { color: var(--text-color-kumo-warning); }
.pay-stat-expired .pay-stat-icon { color: var(--text-color-kumo-subtle); }
.pay-stat-failed .pay-stat-icon { color: var(--text-color-kumo-danger); }

.pay-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.pay-stat-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Filters */
.pay-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.pay-field {
  display: flex;
  flex: 0 1 10rem;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.pay-field-grow {
  flex: 1 1 16rem;
}

.pay-field-label {
  font-size: 0.8125rem;
  font-weight: 500;
}

.pay-table td {
  vertical-align: middle;
}

@media (max-width: 1024px) {
  .pay-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pay-revenue {
    grid-template-columns: minmax(0, 1fr);
  }

  .pay-field {
    flex: 1 1 45%;
  }

  .pay-filters button[type="submit"] {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Payment notification review queue */
.pq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pq-item {
  display: flex;
  flex-direction: column;
}

.pq-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.pq-source {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.pq-package {
  overflow: hidden;
  color: var(--text-color-kumo-subtle);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pq-time {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.pq-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
}

.pq-title {
  font-weight: 600;
}

.pq-text {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.pq-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.pq-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
}

.pq-settle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.pq-invoice {
  width: 14rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
}

.pq-invoice::placeholder {
  text-transform: none;
}

.pq-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.875rem;
  cursor: pointer;
}

.pq-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .pq-invoice,
  .pq-settle,
  .pq-side {
    width: 100%;
  }

  .pq-settle button,
  .pq-side form,
  .pq-side button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ─── Admin Promo Codes ─────────────────────────────────────────────────── */

/* Totals */
.pr-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.pr-stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.15rem;
}

.pr-stat-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pr-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.pr-stat-given .pr-stat-value {
  font-size: 1.125rem;
}

.pr-stat-active { background: color-mix(in srgb, var(--text-color-kumo-success) 6%, var(--color-kumo-base)); }
.pr-stat-active .pr-stat-label,
.pr-stat-active .pr-stat-value { color: var(--text-color-kumo-success); }
.pr-stat-scheduled { background: color-mix(in srgb, var(--text-color-kumo-warning) 7%, var(--color-kumo-base)); }
.pr-stat-scheduled .pr-stat-label,
.pr-stat-scheduled .pr-stat-value { color: var(--text-color-kumo-warning); }
.pr-stat-expired { background: color-mix(in srgb, var(--text-color-kumo-danger) 6%, var(--color-kumo-base)); }
.pr-stat-expired .pr-stat-label,
.pr-stat-expired .pr-stat-value { color: var(--text-color-kumo-danger); }

/* Table */
.pr-table td {
  vertical-align: middle;
}

.pr-code-row {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pr-code {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.35rem;
  background: var(--color-kumo-base);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pr-recurring {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-kumo-brand);
  font-size: 0.75rem;
}

.pr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.pr-tag {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.35rem;
  background: var(--color-kumo-base);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pr-tag.is-all {
  border-color: color-mix(in srgb, var(--text-color-kumo-success) 30%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-success) 8%, var(--color-kumo-base));
  color: var(--text-color-kumo-success);
}

.pr-tag.is-bonus {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 30%, transparent);
  background: color-mix(in srgb, var(--color-kumo-brand) 7%, var(--color-kumo-base));
  color: var(--color-kumo-brand);
}

.pr-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pr-status::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
}

.pr-status.is-success { background: color-mix(in srgb, var(--text-color-kumo-success) 10%, var(--color-kumo-base)); color: var(--text-color-kumo-success); }
.pr-status.is-warning { background: color-mix(in srgb, var(--text-color-kumo-warning) 12%, var(--color-kumo-base)); color: var(--text-color-kumo-warning); }
.pr-status.is-error { background: color-mix(in srgb, var(--text-color-kumo-danger) 9%, var(--color-kumo-base)); color: var(--text-color-kumo-danger); }
.pr-status.is-secondary { background: var(--color-kumo-fill); color: var(--text-color-kumo-subtle); }

.pr-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.pr-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-kumo-brand);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.pr-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pr-link.is-muted {
  color: var(--text-color-kumo-subtle);
}

.pr-link.is-danger {
  color: var(--text-color-kumo-danger);
}

/* Dialog */
.pr-modal {
  width: min(94vw, 720px);
}

.pr-form {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 860px);
}

.pr-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
}

.pr-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

.pr-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pr-legend {
  margin-bottom: 0.1rem;
  padding: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
}

.pr-grid {
  display: grid;
  gap: 0.85rem 1rem;
}

.pr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pr-req {
  color: var(--text-color-kumo-danger);
}

.pr-hint {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.pr-code-input {
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
}

.pr-code-input::placeholder {
  text-transform: none;
}

.pr-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-left: 1.6rem;
}

.pr-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9375rem;
  cursor: pointer;
}

.pr-modal-foot {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-kumo-line);
}

.pr-modal-foot > button[type="submit"] {
  flex: 1;
  height: 2.5rem;
}

/* Checkout promo code box */
.promo-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.promo-box.is-compact {
  flex-basis: 100%;
  margin-top: 0.25rem;
}

.promo-label {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
}

.promo-row {
  display: flex;
  gap: 0.5rem;
}

.promo-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
}

.promo-input::placeholder {
  font-family: inherit;
  text-transform: none;
}

.promo-msg {
  margin: 0;
  font-size: 0.8125rem;
}

.promo-msg.is-ok { color: var(--text-color-kumo-success); }
.promo-msg.is-error { color: var(--text-color-kumo-danger); }

.is-discounted {
  color: var(--text-color-kumo-success);
}

@media (max-width: 1100px) {
  .pr-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pr-stats,
  .pr-grid-2,
  .pr-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pr-grid-2,
  .pr-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Admin Income Report ───────────────────────────────────────────────── */

.rp-year {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.rp-year select {
  width: 7rem;
}

/* Headline cards */
.rp-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.rp-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rp-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem 1.25rem;
}

.rp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.rp-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.65rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.55rem;
  background: var(--color-kumo-elevated);
}

.rp-card.is-positive .rp-icon {
  border-color: transparent;
  background: var(--text-color-kumo-success);
  color: #fff;
}

.rp-card.is-negative .rp-icon {
  border-color: transparent;
  background: var(--text-color-kumo-danger);
  color: #fff;
}

.rp-value {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.rp-card.is-negative .rp-value {
  color: var(--text-color-kumo-danger);
}

.rp-label {
  font-size: 0.875rem;
  font-weight: 600;
}

.rp-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.rp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-kumo-brand);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.rp-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Chart panels */
.rp-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.rp-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.rp-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.rp-panel-sub {
  margin: 0.2rem 0 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.rp-legend {
  display: flex;
  gap: 1rem;
}

.rp-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.rp-key::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.2rem;
  background: var(--color-kumo-brand);
}

.rp-key.is-prev::before {
  background: color-mix(in srgb, var(--color-kumo-brand) 30%, var(--color-kumo-base));
}

.rp-key.is-revenue::before {
  background: #0d9488;
}

.rp-chart {
  display: block;
  width: 100%;
  height: auto;
}

.rp-grid {
  stroke: var(--color-kumo-line);
  stroke-width: 1;
}

.rp-axis {
  fill: var(--text-color-kumo-subtle);
  font-size: 12px;
}

.rp-bar {
  fill: var(--color-kumo-brand);
}

.rp-bar.is-prev {
  fill: color-mix(in srgb, var(--color-kumo-brand) 30%, var(--color-kumo-base));
}

.rp-bar.is-revenue {
  fill: #0d9488;
}

.rp-bar:hover {
  opacity: 0.8;
}

/* Revenue per product */
.rp-products {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-kumo-line);
  list-style: none;
}

.rp-products li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.rp-product-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rp-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--ex-c);
}

.rp-product-value {
  font-size: 1rem;
  font-weight: 700;
}

.rp-product-share {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

/* Monthly table */
.rp-table-panel {
  padding: 0;
  gap: 0;
}

.rp-table-title {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.rp-table tr.is-empty td {
  color: var(--text-color-kumo-subtle);
}

.rp-table tr:not(.is-empty) .rp-in,
.rp-table tfoot .rp-in,
.rp-pos { color: var(--text-color-kumo-success); }
.rp-table tr:not(.is-empty) .rp-rev,
.rp-table tfoot .rp-rev { color: var(--color-kumo-brand); }
.rp-table tr:not(.is-empty) .rp-refund,
.rp-table tfoot .rp-refund { color: var(--text-color-kumo-warning); }
.rp-table tr:not(.is-empty) .rp-opex,
.rp-table tfoot .rp-opex,
.rp-neg { color: var(--text-color-kumo-danger); }

.rp-table tr.is-empty .rp-pos {
  color: var(--text-color-kumo-subtle);
}

.rp-table tfoot td {
  border-top: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
}

@media (max-width: 1100px) {
  .rp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rp-products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .rp-cards,
  .rp-cards-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .rp-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rp-panel {
    padding: 1rem;
  }
}

/* ─── Announcements ─────────────────────────────────────────────────────── */

/* Severity palette */
.is-info { --ann-c: #2563eb; }
.is-success { --ann-c: #16a34a; }
.is-warning { --ann-c: #d97706; }
.is-critical { --ann-c: #dc2626; }

/* Admin list */
.an-table td {
  vertical-align: middle;
}

.an-table tr.is-muted td > * {
  opacity: 0.6;
}

.an-table tr.is-muted td:last-child > * {
  opacity: 1;
}

.an-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.an-status.is-live {
  border-color: color-mix(in srgb, var(--text-color-kumo-success) 30%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-success) 9%, var(--color-kumo-base));
  color: var(--text-color-kumo-success);
}

.an-status.is-live::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: currentColor;
}

.an-status.is-scheduled {
  color: var(--text-color-kumo-warning);
}

.an-status.is-ended,
.an-status.is-paused {
  color: var(--text-color-kumo-subtle);
}

.an-sev {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ann-c) 30%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--ann-c) 9%, var(--color-kumo-base));
  color: var(--ann-c);
  font-size: 0.75rem;
  font-weight: 600;
}

.an-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* Admin form */
.an-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: start;
  gap: 1.25rem;
}

.an-main,
.an-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.an-content {
  display: flex;
  flex-direction: column;
}

.an-langs {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.an-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.an-panel[hidden] {
  display: none;
}

.an-submit {
  display: flex;
  gap: 0.5rem;
}

.an-settings,
.an-tips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
}

.an-side-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.an-popup-opt {
  display: flex;
  gap: 0.6rem;
  margin: 0;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, #7c3aed 25%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in srgb, #7c3aed 5%, var(--color-kumo-base));
  color: #6d28d9;
  font-size: 0.8125rem;
  cursor: pointer;
}

.an-popup-opt[hidden] {
  display: none;
}

.an-popup-opt input {
  margin-top: 0.15rem;
}

.an-tips ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Rich text editor */
.rte {
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
}

.rte-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-elevated);
}

.rte-block {
  height: 2rem;
  margin-right: 0.35rem;
  padding: 0 0.5rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.4rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.8125rem;
}

.rte-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text-color-kumo-default);
  cursor: pointer;
}

.rte-btn:hover,
.rte-btn.is-on {
  border-color: var(--color-kumo-line);
  background: var(--color-kumo-base);
  color: var(--color-kumo-brand);
}

.rte-sep {
  width: 1px;
  height: 1.25rem;
  margin: 0 0.3rem;
  background: var(--color-kumo-line);
}

.rte-area,
.rte-source {
  display: block;
  width: 100%;
  min-height: 16rem;
  max-height: 32rem;
  padding: 0.9rem 1rem;
  overflow-y: auto;
  border: 0;
  outline: none;
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Blog editor: taller writing area */
.bl-area {
  min-height: 28rem;
  max-height: 70vh;
}

.rte-area[hidden],
.rte-source[hidden] {
  display: none;
}

.rte-source {
  resize: vertical;
  background: var(--color-kumo-elevated);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
}

.rte-area.is-invalid {
  box-shadow: inset 0 0 0 1.5px var(--text-color-kumo-danger);
}

.rte-status {
  margin: 0;
  padding: 0.4rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
  font-size: 0.8125rem;
}

.rte-status.is-error {
  color: var(--text-color-kumo-danger);
}

/* Shared rich text body (editor, dashboard, public page) */
.rte-area > :first-child,
.ann-body > :first-child { margin-top: 0; }
.rte-area > :last-child,
.ann-body > :last-child { margin-bottom: 0; }
.rte-area p, .ann-body p { margin: 0 0 0.75rem; }
.rte-area h2, .ann-body h2 { margin: 1rem 0 0.5rem; font-size: 1.25rem; font-weight: 700; }
.rte-area h3, .ann-body h3 { margin: 1rem 0 0.5rem; font-size: 1.1rem; font-weight: 600; }
.rte-area h4, .ann-body h4 { margin: 0.75rem 0 0.4rem; font-size: 1rem; font-weight: 600; }
.rte-area ul, .ann-body ul { margin: 0 0 0.75rem; padding-left: 1.3rem; list-style: disc; }
.rte-area ol, .ann-body ol { margin: 0 0 0.75rem; padding-left: 1.3rem; list-style: decimal; }
.rte-area blockquote, .ann-body blockquote { margin: 0 0 0.75rem; padding-left: 0.9rem; border-left: 3px solid var(--color-kumo-line); color: var(--text-color-kumo-subtle); }
.rte-area a, .ann-body a { color: var(--color-kumo-brand); text-decoration: underline; text-underline-offset: 0.15em; }
.rte-area img, .ann-body img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.rte-area pre, .ann-body pre { margin: 0 0 0.75rem; padding: 0.75rem; overflow-x: auto; border-radius: 0.5rem; background: var(--color-kumo-elevated); font-size: 0.8125rem; }
.rte-area table, .ann-body table { width: 100%; margin: 0 0 0.75rem; border-collapse: collapse; font-size: 0.875rem; }
.rte-area th, .rte-area td, .ann-body th, .ann-body td { padding: 0.4rem 0.6rem; border: 1px solid var(--color-kumo-line); text-align: left; }

/* Dashboard banner and info bar */
.ann-bar {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--ann-c) 30%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--ann-c) 7%, var(--color-kumo-base));
}

.ann-bar.is-infobar {
  border-left-width: 3px;
}

.ann-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--ann-c) 14%, var(--color-kumo-base));
  color: var(--ann-c);
}

.ann-bar-text {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
}

.ann-bar-title {
  display: block;
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.ann-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  align-self: center;
  color: var(--ann-c);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ann-more:hover {
  text-decoration: underline;
}

/* Dashboard popup */
.ann-modal {
  width: min(94vw, 560px);
  border-top: 4px solid var(--ann-c);
}

.ann-modal-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem 0.5rem;
}

.ann-modal-title {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.ann-modal-body {
  max-height: 60vh;
  padding: 0.5rem 1.25rem 1rem;
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.ann-modal-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-kumo-line);
}

@media (max-width: 960px) {
  .an-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ann-bar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* Text fills the row beside the icon, so the link drops below it */
  .ann-bar-text {
    flex: 1 1 calc(100% - 2.85rem);
  }

  .ann-more {
    margin-left: 2.85rem;
  }
}

/* ─── Email Broadcasts ──────────────────────────────────────────────────── */

.bc-template {
  border: 1px solid color-mix(in srgb, var(--color-kumo-brand) 22%, var(--color-kumo-line));
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-kumo-brand) 4%, var(--color-kumo-base));
}

.bc-template summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.bc-template summary::-webkit-details-marker {
  display: none;
}

.bc-template summary > span {
  flex: 1;
}

.bc-template[open] summary > svg:last-child {
  transform: rotate(180deg);
}

.bc-template-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0 1rem 1rem;
}

.bc-template-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.bc-body-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.bc-preview {
  display: block;
  width: 100%;
  height: 34rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: #f6f6f7;
}

.bc-preview[hidden],
[data-bc-editor][hidden] {
  display: none;
}

.bc-schedule input {
  max-width: 16rem;
}

.bc-send-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.bc-send-actions > button {
  justify-content: center;
  height: 2.75rem;
}

.bc-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.bc-hosts {
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--color-kumo-brand) 25%, var(--color-kumo-line));
}

.bc-hosts[hidden] {
  display: none;
}

/* Custom address list */
.bc-emails {
  height: auto;
  min-height: 9rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
  resize: vertical;
}

.bc-form .bc-invalid {
  color: var(--text-color-kumo-danger);
}

/* Customer picker */
.bc-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
}

.bc-pick-row {
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
}

.bc-pick-row:hover {
  background: var(--color-kumo-tint);
}

.bc-pick-row[hidden],
[data-bc-selected][hidden],
[data-bc-custom][hidden],
[data-bc-user-filters][hidden],
[data-bc-invalid][hidden] {
  display: none;
}

.bc-estimate {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.bc-estimate-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bc-progress {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--color-kumo-recessed);
}

.bc-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--text-color-kumo-success);
  transition: width 280ms ease;
}

.bc-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
  gap: 1.25rem;
}

.bc-audience {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
}

@media (max-width: 1100px) {
  .bc-detail {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .bc-send-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Dedicated Access: Upstream Providers ──────────────────────────────── */
.ded-sources {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ded-source {
  min-width: 0;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.75rem;
  background: var(--color-kumo-base);
}

.ded-source.is-on {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 35%, var(--color-kumo-line));
  background: color-mix(in srgb, var(--color-kumo-brand) 3%, var(--color-kumo-base));
}

.ded-source-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ded-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.ded-primary:has(input:disabled) {
  opacity: 0.45;
  cursor: default;
}

.ded-source-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-kumo-line);
}

.ded-source-body[hidden] {
  display: none;
}

.ded-src-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ded-src-role {
  padding: 0 0.4rem;
  border-radius: 9999px;
  background: var(--color-kumo-fill);
  color: var(--text-color-kumo-subtle);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
}

/* ─── Admin AI Wallets ──────────────────────────────────────────────────── */

/* Totals */
.aw-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.aw-stat-topup .pr-stat-value { color: var(--text-color-kumo-success); }
.aw-stat-spent .pr-stat-value { color: var(--text-color-kumo-danger); }

/* Table */
.aw-table td {
  vertical-align: middle;
}

@media (max-width: 860px) {
  .aw-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Admin API Keys ────────────────────────────────────────────────────── */

/* Tabs & Search Row */
.ak-tools {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.ak-search {
  display: flex;
  flex: 0 1 320px;
  min-width: 0;
}

/* Table */
.ak-table td {
  vertical-align: middle;
}

/* Key kind tag under the label */
.ak-kind {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.3rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
}

.ak-kind.is-dedicated { color: #7c3aed; border-color: color-mix(in oklch, #8b5cf6 35%, transparent); }

/* Model restriction pill */
.ak-models {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  background: color-mix(in oklch, #8b5cf6 14%, transparent);
  color: #7c3aed;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ak-search {
    flex-basis: 100%;
  }
}

/* ─── Daily Combo Chart (inline SVG) ────────────────────────────────────── */

.cc-chart {
  display: block;
  width: 100%;
  height: auto;
}

.cc-grid { stroke: var(--color-kumo-line); stroke-width: 1; }
.cc-axis { fill: var(--text-color-kumo-subtle); font-size: 11px; }

/* Series */
.cc-bar { fill: color-mix(in oklch, #8b5cf6 55%, transparent); }
.cc-line, .cc-line-2 { fill: none; stroke-width: 2; stroke-linejoin: round; }
.cc-line { stroke: #2563eb; }
.cc-line-2 { stroke: #059669; stroke-dasharray: 5 4; }
.cc-line-dot { fill: #2563eb; }
.cc-line-2-dot { fill: #059669; }
.cc-hit { fill: transparent; cursor: crosshair; }
.cc-hit:hover { fill: color-mix(in oklch, var(--text-color-kumo-subtle) 9%, transparent); }

/* Hovered day */
.cc-bar.is-hot { fill: color-mix(in oklch, #8b5cf6 80%, transparent); }
.cc-line-dot.is-hot,
.cc-line-2-dot.is-hot {
  r: 5;
  stroke: var(--color-kumo-base);
  stroke-width: 2;
}

/* Tooltip */
.cc-wrap {
  position: relative;
}

.cc-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  min-width: 11rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(13, 14, 17, 0.94);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: transform 70ms linear;
  will-change: transform;
}

.cc-tip[hidden] {
  display: none;
}

.cc-tip-title {
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.cc-tip-rows {
  display: grid;
  gap: 0.25rem;
}

.cc-tip-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
}

.cc-tip-row .cc-key {
  margin-left: 0;
}

.cc-tip-name {
  color: rgba(255, 255, 255, 0.72);
}

.cc-tip-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .cc-tip {
    transition: none;
  }
}

/* Legend */
.cc-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
}

.cc-key {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.5rem;
  border-radius: 0.2rem;
}

.cc-key-bar { background: color-mix(in oklch, #8b5cf6 55%, transparent); }
.cc-key-line { height: 0.2rem; background: #2563eb; }
.cc-key-line-2 { height: 0.2rem; background: #059669; }

/* ─── Admin AI Top-ups & Call Logs ──────────────────────────────────────── */

.at-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.cl-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 1100px) {
  .cl-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .at-stats,
  .cl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cl-stat-charge .pr-stat-value { color: #7c3aed; }
.cl-stat-profit .pr-stat-value { color: var(--text-color-kumo-success); }
.cl-stat-profit.is-negative .pr-stat-value { color: var(--text-color-kumo-danger); }

/* ─── Admin Activity Logs ───────────────────────────────────────────────── */

.al-action {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.3rem;
  background: var(--color-kumo-recessed);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}

.al-desc {
  max-width: 34rem;
}

/* ─── Sidebar Collapsible Groups (admin) ────────────────────────────────── */

.sb-group {
  margin-top: 0.25rem;
}

.sb-group-head {
  list-style: none;
  user-select: none;
}

.sb-group-head::-webkit-details-marker {
  display: none;
}

.sb-group-caret {
  display: inline-flex;
  color: var(--text-color-kumo-subtle);
  transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sb-group-caret {
    transition: none;
  }
}

.sb-group[open]:not(.is-closing) > .sb-group-head .sb-group-caret {
  transform: rotate(180deg);
}

/* Group nested inside a section (customer AI services): no extra gap above */
.sb-group-nested {
  margin-top: 0;
}

/* Children: indented under a 1px guide line */
.sb-sub {
  margin: 0.15rem 0 0.35rem 1.2rem;
  padding-left: 0.55rem;
  border-left: 1px solid var(--color-kumo-line);
}

@media (min-width: 861px) {
  .sb-collapsed .sb-group-caret {
    display: none;
  }

  .sb-collapsed .sb-sub {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  /* Collapsed rail: a subheading becomes a thin divider */
  .sb-collapsed .sb-subhead {
    height: 1px;
    margin: 0.4rem 0.35rem;
    padding: 0;
    background: var(--color-kumo-line);
  }

  .sb-collapsed .sb-subhead .sb-text {
    display: none;
  }
}

/* Subheading between items of one sidebar group */
.sb-subhead {
  margin: 0.55rem 0 0.1rem;
  padding: 0 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color-kumo-subtle);
  list-style: none;
}

/* ─── Admin Cron & Email Logs ───────────────────────────────────────────── */

/* Task name pill */
.cl-task {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.3rem;
  background: color-mix(in oklch, #8b5cf6 14%, transparent);
  color: #7c3aed;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Truncated message and error cells */
.cl-message,
.el-error {
  max-width: 28rem;
  word-break: break-word;
}

.el-error {
  max-width: 18rem;
}

/* ─── Free AI Page ──────────────────────────────────────────────────────── */

.free-rules {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  list-style: disc;
}

.free-rules li::marker {
  color: var(--text-color-kumo-success);
}

/* Locked state: one panel with the reason and the top-up action */
.free-locked {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-recessed);
}

.free-locked-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--color-kumo-brand) 22%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, transparent);
  color: var(--color-kumo-brand);
}

.free-locked-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.free-locked-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-color-kumo-default);
}

.free-locked-desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-color-kumo-subtle);
}

.free-locked-btn {
  flex: none;
}

@media (max-width: 640px) {
  .free-locked {
    flex-wrap: wrap;
  }

  .free-locked-text {
    flex-basis: calc(100% - 3.375rem);
  }

  .free-locked-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── Daily Pass Shop: plans and order summary ──────────────────────────── */

.ap-shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 1rem;
}

.stack-6 > .ap-shop:not(:first-child) {
  margin-top: 1.5rem;
}

/* Plan cards */
.ap-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ap-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
  background: var(--color-kumo-base);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ap-plan:hover {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 45%, var(--color-kumo-line));
}

.ap-plan:has(input:checked) {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 6%, var(--color-kumo-base));
}

.ap-plan:has(input:focus-visible) {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.ap-plan-days {
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Left: radio, duration, price, per day */
.ap-plan-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ap-plan-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ap-plan-radio {
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Price and per-day line start where the duration text starts (radio 1rem + gap 0.5rem) */
.ap-plan-main > .ap-plan-price,
.ap-plan-main > .ap-plan-note {
  padding-left: 1.5rem;
}

.ap-plan:has(input:checked) .ap-plan-radio {
  border-color: var(--color-kumo-brand);
  box-shadow: inset 0 0 0 3px var(--color-kumo-base), inset 0 0 0 8px var(--color-kumo-brand);
}

/* Right: tag on top, amount saved at the bottom */
.ap-plan-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: right;
}

.ap-plan-saved {
  color: var(--text-color-kumo-success);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ap-plan-base {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  white-space: nowrap;
}

.ap-plan-tag {
  padding: 0.05rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--text-color-kumo-success) 30%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--text-color-kumo-success) 10%, transparent);
  color: var(--text-color-kumo-success);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.ap-plan-tag.is-best {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 35%, transparent);
  background: color-mix(in srgb, var(--color-kumo-brand) 10%, transparent);
  color: var(--color-kumo-brand);
}

/* Plan out of stock: listed but not selectable */
.ap-plan.is-soldout {
  cursor: not-allowed;
  background: var(--color-kumo-tint);
}

.ap-plan.is-soldout:hover {
  border-color: var(--color-kumo-line);
}

.ap-plan.is-soldout .ap-plan-main {
  opacity: 0.55;
}

.ap-plan-tag.is-soldout {
  border-color: color-mix(in srgb, var(--text-color-kumo-danger) 30%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-danger) 10%, transparent);
  color: var(--text-color-kumo-danger);
}

/* Admin sales menu: out of stock toggle */
.ap-soldout {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.ap-menu .ap-soldout input {
  width: auto;
  min-width: 0;
  accent-color: var(--color-kumo-brand);
}

.ap-plan-price {
  margin-top: 0.35rem;
  color: var(--text-color-kumo-default);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ap-plan-note {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Included in every pass */
.ap-includes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
  background: var(--color-kumo-recessed);
}

.ap-includes-title {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ap-includes .ap-perks {
  gap: 0.5rem;
}

/* Order summary */
.ap-summary {
  position: sticky;
  top: 1rem;
  gap: 0.9rem;
}

.ap-sum-rows {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.ap-sum-rows > div,
.ap-sum-total,
.ap-sum-wallet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ap-sum-rows dt,
.ap-sum-wallet {
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
}

.ap-sum-rows dd {
  margin: 0;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 500;
}

.ap-summary .promo-box {
  margin: 0;
}

.ap-sum-total {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-kumo-line);
  color: var(--text-color-kumo-default);
  font-weight: 600;
}

.ap-sum-total strong {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.ap-sum-wallet .tabular-nums {
  color: var(--text-color-kumo-default);
  font-weight: 500;
}

.ap-sum-short {
  margin: -0.35rem 0 0;
  color: var(--text-color-kumo-warning);
  font-size: 0.8125rem;
  text-align: right;
}

.ap-sum-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.ap-sum-actions > span {
  display: block;
}

.ap-sum-actions > [hidden],
.ap-sum-short[hidden] {
  display: none;
}

.ap-sum-link {
  align-self: center;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  text-decoration: none;
}

.ap-sum-link:hover {
  color: var(--color-kumo-brand);
  text-decoration: none;
}

@media (max-width: 960px) {
  .ap-shop {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-summary {
    position: static;
  }
}

/* Narrow screens: one plan per row keeps the two-sided card readable */
@media (max-width: 640px) {
  .ap-plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .ap-plan-price {
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-plan,
  .ap-plan-radio {
    transition: none;
  }
}

/* ─── Sidebar Balance Privacy ───────────────────────────────────────────── */

.sb-bal-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.sb-bal-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  cursor: pointer;
}

.sb-bal-eye:hover {
  color: var(--text-color-kumo-default);
}

.sb-bal-eye:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 1px;
}

/* Shown: eye icon; hidden: crossed eye */
.sb-bal-icon-off,
.bal-hidden .sb-bal-icon-on {
  display: none;
}

.sb-bal-icon-on,
.bal-hidden .sb-bal-icon-off {
  display: inline-flex;
}

/* Amount and ****** share one cell after a fixed "Rp", and cross-fade */
.sb-bal-swap {
  display: inline-grid;
  vertical-align: bottom;
}

.sb-bal-num,
.sb-bal-mask {
  grid-area: 1 / 1;
  transition: opacity 0.22s ease, transform 0.22s ease, filter 0.22s ease;
}

.sb-bal-mask {
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(0.3em);
  filter: blur(2px);
}

.bal-hidden .sb-bal-num {
  opacity: 0;
  transform: translateY(-0.3em);
  filter: blur(2px);
}

.bal-hidden .sb-bal-mask {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .sb-bal-num,
  .sb-bal-mask {
    transition: none;
  }
}


/* ─── Cloudflare Turnstile ──────────────────────────────────────────────── */

/* Widget sits above the submit button; reserve its height so the form does not jump when it loads */
.ts-widget {
  min-height: 65px;
}

/* ─── Applications ──────────────────────────────────────────────────────── */

/* Summary counts */
.app-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.app-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
}

.app-stat span {
  font-size: 0.8rem;
  color: var(--text-color-kumo-subtle);
}

/* Template monogram */
.app-mono {
  display: grid;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-strong);
  font-weight: 600;
}

.app-mono-lg {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.15rem;
}

/* Template logo replaces the initial: no plate, wide logos keep their shape */
.app-mono.app-logo {
  overflow: hidden;
  width: auto;
  min-width: 2.25rem;
  max-width: 3.5rem;
  border: 0;
  background: none;
}

.app-mono-lg.app-logo {
  height: 3rem;
  max-width: 5rem;
}

.app-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 2.25rem;
  object-fit: contain;
}

.app-mono-lg.app-logo img {
  height: 3rem;
}

/* Template tiles */
.app-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.vo-option.app-tile {
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: 7.5rem;
  text-align: center;
}

@media (max-width: 640px) {
  .app-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .vo-option.app-tile {
    min-height: 6.25rem;
    padding: 0.7rem 0.5rem;
  }
}

/* Step number */
.app-step {
  display: inline-grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.35rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.app-price {
  flex: none;
  font-weight: 600;
  color: var(--text-color-kumo-link);
  white-space: nowrap;
}

/* Log output */
.app-log {
  max-height: 70vh;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-elevated);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

.app-danger {
  border-color: color-mix(in srgb, var(--color-kumo-danger) 35%, var(--color-kumo-line));
}

/* ─── Daily Pass Catalog: regular and uncensored parts ─────────────────────── */

/* Models of the chosen package: panels share one cell, so switching sellers crossfades and the height eases */
.ap-plan-models {
  display: grid;
  margin-top: 1rem;
}
.ap-model-panel {
  display: grid;
  grid-area: 1 / 1;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  transition: grid-template-rows 0.34s ease, opacity 0.24s ease, transform 0.34s ease;
}
.ap-model-panel.is-on {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}
.ap-model-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .ap-model-panel { transition: none; }
}

/* Models row inside the plan grid: spans every column under the selected plan's row */
.ap-plan-grid > .ap-plan-models {
  position: relative;
  grid-column: 1 / -1;
  margin-top: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--color-kumo-brand);
  border-radius: 10px;
  background: var(--color-kumo-base);
}

/* Pointer toward the selected plan; app.js sets --ap-caret-x to the card's center */
.ap-plan-grid > .ap-plan-models::before {
  position: absolute;
  top: -7px;
  left: var(--ap-caret-x, 25%);
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--color-kumo-brand);
  border-left: 1px solid var(--color-kumo-brand);
  background: var(--color-kumo-base);
  content: "";
  transform: translateX(-50%) rotate(45deg);
  transition: left 0.24s ease;
}

/* Replayed when the row moves to another plan row */
.ap-plan-models.is-moved {
  animation: ap-models-in 0.28s ease;
}

@keyframes ap-models-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-plan-grid > .ap-plan-models::before { transition: none; }
  .ap-plan-models.is-moved { animation: none; }
}

/* Uncensored models: soft red surface, theme-aware */
.ap-uncensored {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklch, var(--color-kumo-danger) 35%, var(--color-kumo-line));
  border-radius: 0.75rem;
  background: var(--color-kumo-danger-tint);
}
.ap-unc-title {
  margin: 0;
  color: var(--text-color-kumo-danger);
  font-size: 0.9375rem;
  font-weight: 600;
}
.ap-unc-none {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}
.ap-unc-chip {
  border-color: color-mix(in oklch, var(--color-kumo-danger) 30%, var(--color-kumo-line));
  cursor: default;
}
.ap-unc-note {
  margin: 0;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
}
.ap-unc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
@media (max-width: 640px) {
  .ap-uncensored { padding: 0.875rem; }
  .ap-unc-cta > a { width: 100%; justify-content: center; }
}

/* ─── Daily Pass Admin: pass rows ───────────────────────────────────────── */

/* Customer and seller key lines */
.ap-key-row {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.ap-key-row > :first-child {
  min-width: 4.5rem;
}

/* Warning when one seller key serves several passes */
.ap-shared {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--color-kumo-warning) 40%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--color-kumo-warning) 10%, transparent);
  color: var(--text-color-kumo-warning, #b45309);
  font-size: 0.75rem;
  white-space: normal;
}

/* Replace seller key: the form opens under its button */
.ap-replace {
  display: inline-block;
  text-align: left;
}

.ap-replace > summary {
  list-style: none;
  cursor: pointer;
}

.ap-replace > summary::-webkit-details-marker {
  display: none;
}

.ap-replace[open] > summary {
  margin-bottom: 0.5rem;
}

.ap-replace .ap-activate {
  min-width: 18rem;
}

/* Pass actions: buttons side by side, each opening a dialog */
.ap-row-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.5rem;
  white-space: nowrap;
}
.ap-dialog {
  text-align: left;
  margin: auto;
}
.ap-dialog-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  font-size: 0.8125rem;
}
.ap-dialog-facts dt {
  color: var(--text-color-kumo-subtle);
}
.ap-dialog-facts dd {
  margin: 0.125rem 0 0;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .ap-dialog-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Order history under each pass */
.ov-table .ap-history-row > td {
  padding-top: 0;
  border-top: 0;
}

.ap-history > summary {
  width: max-content;
  cursor: pointer;
  color: var(--text-color-kumo-link);
  font-size: 0.8rem;
}

.ap-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}

.ap-history-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}


/* Sales menu editor: one row per package */
.ap-menu select,
.ap-menu input {
  min-width: 8rem;
}

/* ─── Browser Autofill ───────────────────────────────────────────────────── */

/* Autofilled fields keep the theme colors instead of the browser's blue tint, so grouped fields
   (such as the calling code next to a phone number) never show two backgrounds */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-color-kumo-default);
  caret-color: var(--text-color-kumo-default);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* ─── Domain DNS Records ─────────────────────────────────────────────────── */
.dns-form {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(8rem, 1fr) minmax(12rem, 2fr) minmax(6rem, 8rem) auto;
  gap: 0.75rem;
  align-items: end;
}
.dns-form [data-dns-priority][hidden] { display: none; }
.dns-table td { vertical-align: middle; }
@media (max-width: 767px) {
  .dns-form { grid-template-columns: 1fr 1fr; }
  .dns-form .dns-value, .dns-form .dns-submit { grid-column: 1 / -1; }
}


/* ─── Switches: Kumo switch (track 36 x 18, squircle corners, blue when on) ─ */

:root {
  --sw-off-bg: oklch(0.922 0 0);
  --sw-off-ring: oklch(0.87 0 0);
  --sw-on-bg: oklch(0.623 0.214 259.815);
  --sw-on-ring: oklch(0.546 0.245 262.881);
  --sw-thumb: #fff;
  --sw-thumb-on: #fff;
}

[data-mode="dark"] {
  --sw-off-bg: oklch(0.371 0 0);
  --sw-off-ring: oklch(0.439 0 0);
  --sw-on-bg: oklch(0.546 0.245 262.881);
  --sw-on-ring: oklch(0.623 0.214 259.815);
  --sw-thumb: oklch(0.24 0 0);
  --sw-thumb-on: oklch(0.809 0.105 251.813);
}

/* Track */
.dom-switch,
.et-switch,
.sv-switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 36px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--sw-off-bg);
  box-shadow: 0 0 0 1px var(--sw-off-ring);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out;
}

@supports (corner-shape: squircle) {
  .dom-switch,
  .et-switch,
  .sv-switch,
  .dom-switch span,
  .et-switch::after,
  .sv-switch::after {
    border-radius: 10px;
    corner-shape: squircle;
  }
}

/* Thumb: full track height, slides from left to right */
.dom-switch span,
.et-switch::after,
.sv-switch::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  height: auto;
  border-radius: 5px;
  background: var(--sw-thumb);
  box-shadow: 0 0 1px 0.5px oklch(0 0 0 / 0.12), 0 1px 2px oklch(0 0 0 / 0.08);
  transform: none;
  transition: left 150ms ease-out, background-color 150ms ease-out;
}

/* On */
.dom-switch[aria-checked="true"],
.et-switch.is-on,
.sv-switch.is-on {
  border-color: transparent;
  background: var(--sw-on-bg);
  box-shadow: 0 0 0 1px var(--sw-on-ring);
}

.dom-switch[aria-checked="true"] span,
.et-switch.is-on::after,
.sv-switch.is-on::after {
  left: 18px;
  background: var(--sw-thumb-on);
  box-shadow: 0 0 1px 0.5px oklch(0 0 0 / 0.12), 0 1px 2px oklch(0 0 0 / 0.08);
  transform: none;
}

.dom-switch:focus-visible,
.et-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-kumo-brand);
}

.et-switch.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .dom-switch,
  .et-switch,
  .sv-switch,
  .dom-switch span,
  .et-switch::after,
  .sv-switch::after {
    transition: none;
  }
}

/* ─── Application Console: header, tabs, monitor, logs, domains, configuration, upgrade ─── */

/* Header */
.ac-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ac-head-id {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.ac-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.ac-sub {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

/* Tabs: one scrolling row on narrow screens */
.ac-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-kumo-line);
  scrollbar-width: none;
}

.ac-tabs::-webkit-scrollbar {
  display: none;
}

.ac-tab {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: -1px;
  padding: 0.6rem 0.85rem;
  border-bottom: 2px solid transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.ac-tab:hover {
  color: var(--text-color-kumo-default);
}

.ac-tab.is-on {
  border-bottom-color: var(--color-kumo-brand);
  color: var(--text-color-kumo-default);
}

.ac-tab:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: -2px;
  border-radius: 0.4rem;
}

/* Overview grid */
.ac-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.ac-span-2 {
  grid-column: 1 / -1;
}

.ac-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.ac-rows > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-kumo-line);
  font-size: 0.875rem;
}

.ac-rows > div:last-child {
  border-bottom: 0;
}

.ac-rows dt {
  color: var(--text-color-kumo-subtle);
}

.ac-rows dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Resource tiles */
.ac-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.ac-tiles-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ac-tile {
  --ac-c: var(--color-kumo-brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.9rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--ac-c) 22%, var(--color-kumo-line));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--ac-c) 7%, var(--color-kumo-base));
  text-align: center;
}

.ac-tile-left {
  align-items: flex-start;
  text-align: left;
}

.ac-tile.is-blue {
  --ac-c: #2563eb;
}

.ac-tile.is-green {
  --ac-c: #16a34a;
}

.ac-tile.is-violet {
  --ac-c: #7c3aed;
}

.ac-tile > span {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.ac-tile > strong {
  color: var(--ac-c);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ac-tile > small {
  font-size: 0.7rem;
  color: var(--text-color-kumo-subtle);
}

[data-mode="dark"] .ac-tile.is-blue {
  --ac-c: #60a5fa;
}

[data-mode="dark"] .ac-tile.is-green {
  --ac-c: #4ade80;
}

[data-mode="dark"] .ac-tile.is-violet {
  --ac-c: #a78bfa;
}

/* Monitor meters */
.ac-meter {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ac-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.ac-meter-head strong {
  font-variant-numeric: tabular-nums;
}

.ac-bar {
  height: 0.6rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--color-kumo-recessed);
}

.ac-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s ease;
}

.ac-bar > span.is-blue {
  background: #2563eb;
}

.ac-bar > span.is-green {
  background: #16a34a;
}

.ac-bar.is-high > span {
  background: #dc2626;
}

[data-mode="dark"] .ac-bar > span.is-blue {
  background: #60a5fa;
}

[data-mode="dark"] .ac-bar > span.is-green {
  background: #4ade80;
}

[data-mode="dark"] .ac-bar.is-high > span {
  background: #f87171;
}

[data-mon-error][hidden] {
  display: none;
}

/* Log terminal: dark in both themes */
.ac-log {
  max-height: 32rem;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid #1f2937;
  border-radius: 0.65rem;
  background: #0b0f14;
  color: #d1d5db;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Deployment and activity lists */
.ac-deploys {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-deploys > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-kumo-line);
}

.ac-deploys > li:last-child {
  border-bottom: 0;
}

/* Configuration */
.ac-confirm {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.ac-confirm input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.ac-env {
  width: 100%;
  min-height: 16rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-default);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  resize: vertical;
}

.ac-env:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 1px;
}

/* Upgrade */
.ac-plan-now {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-elevated);
}

.ac-upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.ac-upgrade fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

[data-up-short][hidden] {
  display: none;
}

@media (max-width: 1023px) {
  .ac-grid,
  .ac-upgrade {
    grid-template-columns: minmax(0, 1fr);
  }
  .ac-upgrade .svc-summary {
    position: static;
  }
}

@media (max-width: 560px) {
  .ac-tiles-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-bar > span,
  .ac-tab {
    transition: none;
  }
}

/* Tab panel: swapped in place, fades while the next tab loads */
.ac-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  transition: opacity 0.15s ease;
}

.ac-panel.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

/* Entrance of the sections of a newly shown tab, one after another */
.ac-panel.is-entering > * {
  animation: ac-enter 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ac-panel.is-entering > :nth-child(2) {
  animation-delay: 0.05s;
}

.ac-panel.is-entering > :nth-child(3) {
  animation-delay: 0.1s;
}

.ac-panel.is-entering > :nth-child(n + 4) {
  animation-delay: 0.15s;
}

@keyframes ac-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-panel {
    transition: none;
  }
  .ac-panel.is-entering > * {
    animation: none;
  }
}

/* ─── Token Packs: customer quota card and admin package table ──────────── */

/* Quota meter */
.tp-quota {
  display: grid;
  gap: 0.5rem;
}

.tp-quota-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.tp-quota-left {
  color: var(--text-color-kumo-default);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tp-quota-bar {
  height: 8px;
}

/* Intended-use form */
.tp-purpose {
  margin-top: 0.5rem;
}

.tp-agree {
  align-items: flex-start;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  line-height: 1.45;
}

.tp-agree .kumo-checkbox {
  flex: none;
  margin-top: 0.15rem;
}

/* Admin: stated use, upstream keys, package table */
.tp-purpose-cell {
  min-width: 14rem;
  max-width: 26rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tp-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

/* Positioned so the hidden sr-only labels in its cells stay inside the scrolling wrapper instead of widening the page */
.tp-packages {
  position: relative;
}

.tp-packages input {
  min-width: 6rem;
  height: 2rem;
}

.tp-packages input[name$="[name]"] {
  min-width: 10rem;
}

.tp-packages input.tp-sort {
  min-width: 4rem;
  width: 4.5rem;
}

.tp-packages input[type="checkbox"] {
  min-width: 0;
  height: auto;
}

.tp-markup-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.tp-markup-all input {
  width: 5.5rem;
  height: 2rem;
}

/* ─── Dahono Token Packs ─────────────────────────────────────────────────── */

/* Booster stock: bought, sold, left to sell */
.dt-stock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.dt-stock-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
}

.dt-stock-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.dt-stock-value {
  color: var(--text-color-kumo-default);
  font-size: 1.25rem;
  font-weight: 600;
}

.dt-stock-value.is-low {
  color: var(--text-color-kumo-danger, #dc2626);
}

#dt-stock .tp-markup-all {
  justify-content: flex-start;
}

#dt-stock .tp-markup-all input {
  width: 10rem;
}

/* Section title with an action on the right */
.dt-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dt-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Model picker in the product settings */
.dt-models {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.dt-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.4rem;
}

.dt-model {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  cursor: pointer;
}

.dt-model.is-off {
  opacity: 0.5;
  cursor: not-allowed;
}

.dt-model-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dt-model-tag {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Customer page: model names to copy */
.dt-model-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Package larger than the stock left */
.ap-plan.is-out {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .dt-stock {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Daily Pass: start time and countdown ──────────────────────────────── */

/* Admin activation row: optional start time beside the key */
.ap-activate {
  flex-wrap: wrap;
}

.ap-activate:has(.ap-start) {
  min-width: 26rem;
}

.ap-activate input[name="upstream_key"] {
  min-width: 9rem;
}

.ap-activate input.ap-start {
  flex: 0 0 11.5rem;
  font-family: inherit;
}

/* Customer pass card: time left, ticking every second */
.ap-countdown {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-color-kumo-success);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ap-countdown.is-low {
  color: var(--text-color-kumo-warning);
}

.ap-countdown.is-over {
  color: var(--text-color-kumo-subtle);
}

/* Customer pass card: daily token quota of a capped seller */
.ap-quota {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ap-quota-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.ap-quota-row span:last-child {
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 600;
}

.ap-quota-bar {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: 0;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--color-kumo-line);
  color: var(--text-color-kumo-success);
}

.ap-quota-bar::-webkit-progress-bar {
  background: var(--color-kumo-line);
}

.ap-quota-bar::-webkit-progress-value {
  background: var(--text-color-kumo-success);
}

.ap-quota-bar::-moz-progress-bar {
  background: var(--text-color-kumo-success);
}

.ap-quota-bar.is-over::-webkit-progress-value {
  background: var(--text-color-kumo-warning);
}

.ap-quota-bar.is-over::-moz-progress-bar {
  background: var(--text-color-kumo-warning);
}

.ap-quota-note {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

/* ─── Top Bar Notifications ─────────────────────────────────────────────── */

.nt {
  position: relative;
  flex: none;
}

.nt-btn {
  position: relative;
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  cursor: pointer;
}

.nt-btn:hover,
.nt-btn[aria-expanded="true"] {
  background: var(--color-kumo-tint);
}

.nt-btn:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Unread badge on the bell */
.nt-count {
  position: absolute;
  top: -0.3rem;
  right: -0.35rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border: 2px solid var(--color-kumo-base);
  border-radius: 9999px;
  background: var(--color-kumo-danger);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 0.75rem;
  text-align: center;
}

.nt-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  width: min(22rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 12px;
  background: var(--color-kumo-base);
  box-shadow: 0 12px 32px rgb(17 17 26 / 0.12);
}

.nt-panel[hidden] {
  display: none;
}

.nt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.nt-title {
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 600;
}

.nt-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  text-align: center;
}

.nt-list {
  max-height: 22rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
}

.nt-item {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: var(--text-color-kumo-default);
  text-decoration: none;
}

.nt-item:hover,
.nt-item:focus-visible {
  background: var(--color-kumo-tint);
}

/* Unread: blue dot, read: no dot */
.nt-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  margin-top: 0.4rem;
  border-radius: 9999px;
  background: transparent;
}

.nt-item.is-unread .nt-dot {
  background: var(--color-kumo-brand);
}

.nt-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.nt-item-title {
  font-size: 0.8125rem;
  font-weight: 600;
}

.nt-item:not(.is-unread) .nt-item-title {
  font-weight: 500;
}

.nt-item-body {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  line-height: 1.45;
}

.nt-time {
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

/* Staff items: dot colour follows the severity */
.nt-item.nt-lv-danger .nt-dot {
  background: var(--color-kumo-danger);
}

.nt-item.nt-lv-warning .nt-dot {
  background: var(--color-kumo-warning);
}

.nt-item.nt-lv-info .nt-dot {
  background: var(--color-kumo-info);
}

.nt-item[class*="nt-lv-"] .nt-item-title {
  font-weight: 600;
}

/* Sidebar badges are always rendered so app.js can update them */
.nav-count[hidden] {
  display: none;
}

/* New item: the bell rings once */
.nt-btn.is-ringing svg {
  transform-origin: 50% 10%;
  animation: nt-ring 0.9s ease-in-out;
}

.nt-btn.is-ringing .nt-count {
  animation: nt-pop 0.45s ease-out;
}

@keyframes nt-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(9deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}

@keyframes nt-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* New item toast, top right below the bell (the chat bubble owns the bottom corner) */
.nt-toast {
  position: fixed;
  top: 4.25rem;
  right: 1rem;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  width: min(20rem, calc(100vw - 2rem));
  padding: 0.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 12px;
  background: var(--color-kumo-base);
  box-shadow: 0 12px 32px rgb(17 17 26 / 0.12);
  animation: nt-toast-in 0.25s ease-out;
}

.nt-toast[hidden] {
  display: none;
}

.nt-toast-link {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  color: var(--text-color-kumo-default);
  text-decoration: none;
}

.nt-toast-link:hover,
.nt-toast-link:focus-visible {
  background: var(--color-kumo-tint);
}

.nt-toast-kicker {
  color: var(--color-kumo-brand);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nt-toast-title {
  overflow: hidden;
  font-size: 0.8125rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nt-toast-close {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-color-kumo-subtle);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.nt-toast-close:hover,
.nt-toast-close:focus-visible {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-default);
}

@keyframes nt-toast-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nt-btn.is-ringing svg,
  .nt-btn.is-ringing .nt-count,
  .nt-toast {
    animation: none;
  }
}

/* Phones: the panel spans the top bar instead of hanging off the bell */
@media (max-width: 640px) {
  .nt {
    position: static;
  }

  .nt-panel {
    top: calc(100% + 0.35rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

/* Admin notification logs: text column wraps */
.nl-text {
  min-width: 16rem;
  max-width: 30rem;
  white-space: normal;
}

.nt-count[hidden] {
  display: none;
}

/* Live label beside the notification count */
.nl-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-color-kumo-success);
}

.nl-live::before {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: currentColor;
  content: "";
}

/* Bell panel footer link to the notifications page */
.nt-foot {
  display: block;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
  color: var(--text-color-kumo-link);
  font-size: 0.8125rem;
  text-align: center;
  text-decoration: none;
}

.nt-foot:hover {
  background: var(--color-kumo-tint);
}

/* Customer notifications page: full-width rows under the tabs */
.np-list {
  margin: 0;
  padding: 0.35rem;
  list-style: none;
}

.np-list > li + li {
  border-top: 1px solid var(--color-kumo-fill);
}

.np-item {
  padding: 0.85rem 1rem;
}

.np-item .nt-item-title {
  font-size: 0.875rem;
}

.np-item .nt-item-body {
  font-size: 0.8125rem;
}

.np-item .nt-time {
  font-size: 0.75rem;
}

/* ─── Premium Apps: product variants, orders, access data, admin queue ──── */

/* Product group inside the shop */
.pm-product {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pm-product + .pm-product {
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-fill);
}

.pm-product-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pm-product-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.pm-product-name {
  margin: 0;
  color: var(--text-color-kumo-default);
  font-size: 1rem;
  font-weight: 600;
}

/* Variant card: tags sit in a row under the price so long labels never cover the name */
.pm-product .ap-plan {
  grid-template-columns: minmax(0, 1fr);
}

.pm-product .ap-plan-side {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.5rem;
  text-align: left;
}

/* Sold-out variant: visible but not selectable */
.ap-plan.is-out {
  cursor: not-allowed;
  opacity: 0.55;
}

.ap-plan.is-out:hover {
  border-color: var(--color-kumo-line);
}

.ap-plan-tag.is-plain {
  border-color: var(--color-kumo-line);
  background: transparent;
  color: var(--text-color-kumo-subtle);
}

.pm-out {
  color: var(--text-color-kumo-danger, var(--text-color-kumo-subtle));
  font-weight: 600;
}

.pm-email[hidden] {
  display: none;
}

/* Order history */
/* Panel request form for an app that is not in the catalog */
.pmr-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  max-width: 40rem;
}

.pmr-actions {
  display: flex;
  justify-content: flex-start;
}

.pm-orders {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Order card: summary on top, facts strip, then optional access data and links */
.pm-order {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
  background: var(--color-kumo-base);
  overflow: hidden;
  scroll-margin-top: 5rem;
}

.pm-order-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.9rem 1rem;
}

.pm-order-main {
  display: flex;
  flex: 1 1 14rem;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.pm-order-name {
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pm-order-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pm-order-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.6rem 1rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
  background: var(--color-kumo-tint);
  font-size: 0.8125rem;
}

.pm-order-facts > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.pm-order-facts dt {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.pm-order-facts dd {
  margin: 0;
  color: var(--text-color-kumo-default);
  font-weight: 500;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .pm-order-facts > .pm-fact-wide {
    grid-column: 1 / -1;
  }
}

/* Refund reason, access data, and warranty link sit inside the card padding */
.pm-order > p,
.pm-order > .pm-access,
.pm-order > .pm-claim {
  margin: 0.75rem 1rem 0;
}

.pm-order > :last-child:not(.pm-order-row):not(.pm-order-facts) {
  margin-bottom: 0.9rem;
}

/* Access data shown once */
.pm-access {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-kumo-brand) 35%, var(--color-kumo-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-kumo-brand) 5%, var(--color-kumo-base));
}

/* In-place reveal: the block fades and slides in under the order facts */
.pm-access {
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pm-access.is-entering {
  opacity: 0;
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  .pm-access {
    transition: none;
  }
}

.pm-access-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.pm-access-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.pm-access-value {
  overflow-wrap: anywhere;
}

.pm-access-note {
  grid-column: 2 / -1;
  margin: 0;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.pm-claim {
  align-self: flex-start;
  color: var(--color-kumo-brand);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 640px) {
  .pm-access-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pm-access-label {
    grid-column: 1 / -1;
  }

  .pm-access-note {
    grid-column: 1 / -1;
  }
}

/* Admin: order rows with a full-width delivery or replacement panel below each */
.pm-admin-order > td {
  border-bottom: 0;
}

/* Order row and its form panel keep one surface color; the table hover tint is off */
.ov-table tbody tr.pm-admin-order:hover td,
.ov-table tbody tr.pm-panel-row:hover td {
  background: var(--color-kumo-base);
}

.ov-table td.pm-status-cell {
  white-space: normal;
}

.pm-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pm-status-line + span {
  display: block;
  margin-top: 0.25rem;
}

/* Supplier order button next to the status badge */
.pm-supplier {
  gap: 0.375rem;
}

/* Staff note under the supplier link */
.pm-supplier-note {
  border: 1px solid var(--color-kumo-line);
  border-radius: 5px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.pm-supplier-note-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

.pm-supplier-note p {
  margin: 0.125rem 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pm-supplier-note-input {
  min-height: 4.5rem;
  padding-block: 0.5rem;
  resize: vertical;
}

.pm-panel-row > td {
  padding-top: 0;
  white-space: normal;
}

.pm-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-base);
}

.pm-deliver {
  margin: 0;
}

/* Delivery mode of the product above the access fields */
.pm-mode-hint {
  margin: 0 0 0.5rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pm-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}

.pm-access-wide {
  grid-column: 1 / -1;
}

.pm-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Primary action stays on the right, also when it wraps under the refund row */
.pm-panel-actions > :last-child {
  margin-left: auto;
}

.pm-refund {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: 0.5rem;
  max-width: 32rem;
  margin: 0;
}

.pm-refund input {
  min-width: 0;
}

.pm-replace > summary {
  color: var(--color-kumo-brand);
  font-size: 0.8125rem;
  cursor: pointer;
}

.pm-replace[open] > summary {
  margin-bottom: 0.5rem;
}

.pm-variants input:not([type="checkbox"]) {
  min-width: 6rem;
}

.pm-variants .pm-num {
  min-width: 4.5rem;
  max-width: 6rem;
}

/* Variant period: kind select with the days input beside it */
.pm-period {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.pm-variants td:first-child input {
  min-width: 9rem;
}

.pm-variants .pm-period-kind {
  min-width: 9.5rem;
}

.pm-variants .pm-period-days[hidden] {
  display: none;
}

/* Product card header: name and badges, then the order buttons */
.pm-product-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.pm-move {
  display: inline-flex;
  flex-shrink: 0;
  gap: 0.25rem;
}

.pm-move [data-move]:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Products heading with the add-product button; the create form stays hidden until opened */
.pm-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pm-products-head [data-show-form] {
  gap: 0.375rem;
}

.pm-products-head [data-show-form][hidden],
#pm-new[hidden] {
  display: none;
}

/* Add variant button under the variant table */
.pm-variant-add {
  display: flex;
  justify-content: flex-start;
}

/* Variant specification checklist on the plan card */
.ap-plan-grid:has(.pm-features) {
  grid-template-columns: minmax(0, 1fr);
}

.ap-plan-grid:has(.pm-features) .ap-plan {
  align-content: start;
}

.pm-features {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0.6rem 0 0;
  border-top: 1px solid var(--color-kumo-line);
  list-style: none;
}

.pm-features li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.pm-features li::before {
  position: absolute;
  top: 0.18rem;
  left: 0;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--color-kumo-success);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pm-about {
  padding-top: 0;
  border-top: 0;
}

.pm-description-input {
  height: auto;
  min-height: 3.75rem;
  padding-block: 0.5rem;
  line-height: 1.45;
  resize: vertical;
}

.pm-variants .pm-variant-features {
  min-width: 18rem;
}

/* Variant supplier note, rightmost column */
.pm-variants .pm-variant-note {
  min-width: 14rem;
  height: auto;
  min-height: 2.25rem;
  padding-block: 0.4375rem;
  line-height: 1.4;
  resize: vertical;
}

@media (max-width: 640px) {
  .pm-access-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Gravatar Over Initials ─────────────────────────────────────────────── */
/* The photo covers the initials; a transparent Gravatar fallback lets them show through */
.topbar-avatar,
.acc-avatar,
.cu-avatar,
.cp-avatar,
.tk-avatar {
  position: relative;
  overflow: hidden;
}

.avatar-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* A loaded photo sits on white (transparent pictures stay clean in both themes); initials are hidden */
.has-photo {
  background: #fff !important;
  color: transparent !important;
}

/* ─── Premium App Product Photos ─────────────────────────────────────────── */
/* Purchase page: photo beside the product name. Own modifier name: the avatar
   rule .has-photo makes text transparent and the background white */
.pm-product-head.pm-with-photo {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.875rem;
}

.pm-product-photo {
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
  background: var(--color-kumo-base);
  object-fit: cover;
}

.pm-product-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.15rem;
}

/* Admin product card: preview and upload controls */
.pm-photo-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.pm-photo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--color-kumo-line);
  border-radius: 10px;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-subtle);
}

.pm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-photo-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.pm-photo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

/* ─── Premium App Requests (admin) ──────────────────────────────────────── */
.pm-request-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.pm-request-select {
  width: auto;
  min-width: 8rem;
}


/* ─── Free AI Offer & Unlock Celebration ────────────────────────────────── */
/* Wallet offer card (shown until the first qualifying top-up) */
.fai-offer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-kumo-brand) 28%, var(--color-kumo-line));
  border-radius: 10px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--color-kumo-brand) 14%, transparent), transparent 60%),
    var(--color-kumo-base);
}

.fai-offer-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-kumo-brand) 12%, transparent);
  color: var(--color-kumo-brand);
  animation: fai-bob 2.6s ease-in-out infinite;
}

.fai-offer-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.fai-offer-kicker {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-kumo-brand);
}

.fai-offer-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-color-kumo-default);
}

.fai-offer-desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-color-kumo-subtle);
}

.fai-offer-btn {
  flex: none;
}

@media (max-width: 640px) {
  .fai-offer {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .fai-offer-text {
    flex-basis: calc(100% - 4rem);
  }

  .fai-offer-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Model chips */
.fai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.fai-chips.is-center {
  justify-content: center;
}

.fai-chip {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-recessed);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  color: var(--text-color-kumo-default);
}

.fai-chip.is-more {
  font-family: inherit;
  color: var(--text-color-kumo-subtle);
}

/* Top-up form hint */
.fai-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-kumo-brand);
}

/* Unlock dialog (rendered inside the page stack, so the stack spacing is reset) */
.fai-unlock {
  width: min(92vw, 440px);
  overflow: hidden;
}

.app-content > .fai-unlock {
  margin: auto;
}

.fai-unlock-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1.5rem 1.35rem;
  text-align: center;
}

.fai-unlock-x {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.fai-unlock-kicker {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-kumo-success);
}

.fai-unlock-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-color-kumo-default);
}

.fai-unlock-desc {
  margin: 0;
  max-width: 34ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-color-kumo-subtle);
}

.fai-unlock-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* Lock stage */
.fai-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
}

.fai-glow,
.fai-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
}

.fai-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-kumo-success) 26%, transparent) 0%, transparent 68%);
  opacity: 0;
}

.fai-ring {
  border: 2px solid var(--color-kumo-success);
  opacity: 0;
  transform: scale(0.45);
}

.fai-lock {
  position: relative;
  color: var(--color-kumo-brand);
  transform: scale(0.6);
  opacity: 0;
}

.fai-shackle {
  transform-box: view-box;
  transform-origin: 43px 29px;
}

.fai-keyhole {
  fill: var(--color-kumo-base);
}

/* Spark burst: each spark flies to its own point */
.fai-sparks {
  position: absolute;
  inset: 0;
}

.fai-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 2px;
  background: var(--color-kumo-brand);
  opacity: 0;
}

.fai-spark:nth-child(3n) { background: var(--color-kumo-success); }
.fai-spark:nth-child(4n) { border-radius: 9999px; background: #f5b301; }
.fai-spark:nth-child(1) { --fx: 0px; --fy: -66px; }
.fai-spark:nth-child(2) { --fx: 34px; --fy: -58px; }
.fai-spark:nth-child(3) { --fx: 58px; --fy: -32px; }
.fai-spark:nth-child(4) { --fx: 66px; --fy: 2px; }
.fai-spark:nth-child(5) { --fx: 56px; --fy: 36px; }
.fai-spark:nth-child(6) { --fx: 30px; --fy: 60px; }
.fai-spark:nth-child(7) { --fx: -4px; --fy: 66px; }
.fai-spark:nth-child(8) { --fx: -36px; --fy: 56px; }
.fai-spark:nth-child(9) { --fx: -60px; --fy: 30px; }
.fai-spark:nth-child(10) { --fx: -66px; --fy: -4px; }
.fai-spark:nth-child(11) { --fx: -54px; --fy: -38px; }
.fai-spark:nth-child(12) { --fx: -28px; --fy: -62px; }

.fai-rise {
  opacity: 0;
  transform: translateY(8px);
}

/* Sequence: lock pops in, shakes, opens, then the burst and the text */
.fai-unlock.is-playing .fai-lock {
  animation:
    fai-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    fai-shake 0.45s ease-in-out 0.45s,
    fai-turn-green 0.3s ease-out 1s forwards;
}

.fai-unlock.is-playing .fai-shackle {
  animation: fai-open 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s forwards;
}

.fai-unlock.is-playing .fai-ring {
  animation: fai-ring 0.75s ease-out 1.05s forwards;
}

.fai-unlock.is-playing .fai-glow {
  animation: fai-glow 2.4s ease-in-out 1.05s infinite;
}

.fai-unlock.is-playing .fai-spark {
  animation: fai-burst 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 1.05s forwards;
}

.fai-unlock.is-playing .fai-spark:nth-child(even) {
  animation-delay: 1.12s;
}

.fai-unlock.is-playing .fai-rise {
  animation: fai-rise 0.45s ease-out forwards;
}

.fai-unlock.is-playing .fai-unlock-kicker { animation-delay: 1.15s; }
.fai-unlock.is-playing .fai-unlock-title { animation-delay: 1.25s; }
.fai-unlock.is-playing .fai-unlock-desc { animation-delay: 1.35s; }
.fai-unlock.is-playing .fai-chips { animation-delay: 1.45s; }
.fai-unlock.is-playing .fai-unlock-actions { animation-delay: 1.55s; }

@keyframes fai-pop {
  to { opacity: 1; transform: scale(1); }
}

@keyframes fai-shake {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -9deg; }
  40% { rotate: 8deg; }
  60% { rotate: -6deg; }
  80% { rotate: 4deg; }
}

@keyframes fai-open {
  to { transform: translateY(-6px) rotate(28deg); }
}

@keyframes fai-turn-green {
  to { color: var(--color-kumo-success); }
}

@keyframes fai-ring {
  0% { opacity: 0.9; transform: scale(0.45); }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes fai-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes fai-burst {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1) rotate(160deg); }
}

@keyframes fai-rise {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fai-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-6deg); }
}

/* Reduced motion: show the opened lock without movement */
@media (prefers-reduced-motion: reduce) {
  .fai-offer-icon,
  .fai-unlock.is-playing .fai-lock,
  .fai-unlock.is-playing .fai-shackle,
  .fai-unlock.is-playing .fai-ring,
  .fai-unlock.is-playing .fai-glow,
  .fai-unlock.is-playing .fai-spark,
  .fai-unlock.is-playing .fai-rise {
    animation: none;
  }

  .fai-lock {
    opacity: 1;
    transform: none;
    color: var(--color-kumo-success);
  }

  .fai-shackle {
    transform: translateY(-6px) rotate(28deg);
  }

  .fai-glow {
    opacity: 0.7;
  }

  .fai-rise {
    opacity: 1;
    transform: none;
  }
}

/* ─── Login as Owner Banner ──────────────────────────────────────────────── */

.imp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--text-color-kumo-warning) 40%, var(--color-kumo-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-color-kumo-warning) 8%, var(--color-kumo-base));
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
}

.imp-bar-text {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.imp-bar-text svg {
  flex: none;
  margin-top: 0.15rem;
  color: var(--text-color-kumo-warning);
}


/* ─── Admin AI Gateway: Overview, Customer AI & Dedicated List ──────────── */

/* Page header with the quick customer search */
.aig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}

.aig-quick {
  display: flex;
  gap: 0.5rem;
  width: min(100%, 26rem);
}

/* Two cards side by side, one column on phones */
.aig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0.75rem;
  align-items: start;
}

/* Link and figure lists inside cards */
.aig-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aig-list > li + li {
  border-top: 1px solid var(--color-kumo-line);
}

.aig-list-link,
.aig-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  color: var(--text-color-kumo-default);
  text-decoration: none;
}

.aig-list-link:hover,
.aig-list-link:focus-visible {
  background: var(--color-kumo-tint);
}

.aig-sub {
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--color-kumo-line);
}

.aig-sub-title {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-color-kumo-subtle);
}

.aig-chips,
.aig-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Section shortcuts on the Customer AI screen */
.aig-jump {
  position: sticky;
  top: 0.5rem;
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding: 0.35rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.6rem;
  background: var(--color-kumo-base);
  scrollbar-width: none;
}

.aig-jump-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-color-kumo-subtle);
  text-decoration: none;
}

.aig-jump-link:hover,
.aig-jump-link:focus-visible {
  background: var(--color-kumo-tint);
  color: var(--text-color-kumo-default);
}

.aig-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-kumo-warning);
  color: var(--text-color-kumo-inverse);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* Sections jump below the sticky shortcuts */
#ai-credit,
#ai-keys,
#ai-pass,
#ai-tokens,
#ai-dedicated,
#ai-free,
#ai-usage {
  scroll-margin-top: 4rem;
}

.aig-h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color-kumo-default);
}

/* Waiting order with its activation form */
.aig-order {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
}

.aig-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* Inline disclosure (replace a seller key) */
.aig-inline > summary {
  list-style: none;
}

.aig-inline > summary::-webkit-details-marker {
  display: none;
}

.aig-inline[open] > form {
  margin-top: 0.5rem;
}

/* Folded form (give a pass) */
.aig-fold {
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
}

.aig-fold-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.aig-fold-head::-webkit-details-marker {
  display: none;
}

.aig-fold-body {
  padding: 0 0.9rem 0.9rem;
}

.aig-access {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Token pack summary per seller */
.aig-pack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
}

.aig-pack > div:first-child {
  width: 100%;
}

.aig-meter {
  display: block;
  width: 100%;
  min-width: 6rem;
  height: 0.4rem;
  margin-top: 0.3rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-kumo-recessed);
  accent-color: var(--color-kumo-brand);
  appearance: none;
}

.aig-meter::-webkit-progress-bar {
  background: var(--color-kumo-recessed);
}

.aig-meter::-webkit-progress-value {
  background: var(--color-kumo-brand);
}

.aig-meter::-moz-progress-bar {
  background: var(--color-kumo-brand);
}

.aig-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem 1rem;
  width: 100%;
  margin: 0;
}

.aig-dl dt {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.aig-dl dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.aig-model {
  max-width: 16rem;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .aig-quick {
    width: 100%;
  }

  .aig-row-actions {
    justify-content: flex-start;
  }
}

/* Card body whose list or table runs edge to edge */
.aig-flush.aig-flush {
  gap: 0;
  padding: 0;
}

/* Stated use of a token pack order, under its package */
.aig-purpose {
  display: block;
  max-width: 28rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ─── Admin Email Preview ───────────────────────────────────────────────── */

/* Rendered message beside its details, stacked on narrow screens */
.el-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1rem;
  align-items: start;
}

.el-title {
  overflow-wrap: anywhere;
}

.el-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.el-meta dt {
  font-size: 0.75rem;
  color: var(--text-color-kumo-subtle);
}

.el-meta dd {
  margin: 0;
  font-size: 0.875rem;
}

.el-error-full {
  color: var(--text-color-kumo-danger);
  overflow-wrap: anywhere;
}

/* Plain text version, folded by default */
.el-text-head {
  cursor: pointer;
  list-style: none;
}

.el-text-head::-webkit-details-marker {
  display: none;
}

.el-text-body {
  max-height: 28rem;
  margin: 0;
  overflow: auto;
  font: 0.75rem/1.6 var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .el-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Daily Pass Card: Active Models ───────────────────────────────────── */

/* Collapsible list of the model names a pass key accepts */
.ap-pass-models {
  margin-top: 0.875rem;
}

.ap-pass-models summary {
  margin-bottom: 0.5rem;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

/* ─── Daily Pass Admin: Maintenance Switch ─────────────────────────────── */

.ap-maint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  background: var(--color-kumo-base);
}

/* Warning tint while customers see the maintenance notice */
.ap-maint.is-on {
  border-color: color-mix(in srgb, var(--text-color-kumo-warning) 35%, transparent);
  background: color-mix(in srgb, var(--text-color-kumo-warning) 8%, transparent);
}

.ap-maint-text {
  flex: 1 1 18rem;
  min-width: 0;
}

.ap-maint-title {
  margin: 0;
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 600;
}

.ap-maint-desc {
  margin: 0.25rem 0 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

/* ─── Model Library: Three-Hour Status Bars ─────────────────────────────── */

/* Six half-hour bars from recorded traffic; a half hour without requests is operational */
.ml-col-uptime {
  width: 7.5rem;
  white-space: nowrap;
}

.ml-up {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}

.ml-up-bar {
  display: block;
  width: 6px;
  height: 18px;
  border-radius: 2px;
  background: var(--color-kumo-success);
}

.ml-up-bar.is-degraded {
  background: var(--color-kumo-warning);
}

.ml-up-bar.is-down {
  background: var(--color-kumo-danger);
}

/* Card view: status row above the model ID */
.ml-tile-uptime {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

/* ─── Admin Traffic Analytics ───────────────────────────────────────────── */

/* Range and filter bar */
.ta-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.ta-range-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

/* Range tabs scroll sideways on narrow screens instead of overflowing */
.ta-range-row .ov-seg {
  max-width: 100%;
  overflow-x: auto;
}

.ta-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  align-items: end;
  gap: 0.75rem;
}

.ta-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
}

.ta-field > span {
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-weight: 600;
}

.ta-filter-actions {
  display: flex;
  gap: 0.5rem;
}

/* Results region */
.ta-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ta-meta {
  margin: 0;
}

/* KPI cards with the change against the previous period */
.ta-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}

.ta-stats-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ta-delta {
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ta-delta.is-up {
  border-color: color-mix(in srgb, var(--text-color-kumo-success) 35%, transparent);
  color: var(--text-color-kumo-success);
}

.ta-delta.is-down {
  border-color: color-mix(in srgb, var(--text-color-kumo-danger) 35%, transparent);
  color: var(--text-color-kumo-danger);
}

.ta-delta.is-flat {
  color: var(--text-color-kumo-subtle);
}

/* Two tables side by side */
.ta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ta-table-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ta-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-kumo-line);
}

.ta-h2 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ta-export {
  margin-left: 0.5rem;
  color: var(--text-color-kumo-link);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.ta-export:hover {
  text-decoration: underline;
}

.ta-link {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.ta-link:hover {
  color: var(--text-color-kumo-link);
  text-decoration: underline;
}

.ta-sub {
  display: block;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
}

.ta-note {
  margin: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-kumo-line);
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Share bars (SVG, no inline style) */
.ta-share {
  display: block;
  width: 100%;
  height: 6px;
}

.ta-share-cell .ta-share {
  width: 4rem;
  margin: 0 0 0.2rem auto;
}

.ta-share-bg {
  fill: var(--color-kumo-line);
}

.ta-share-fill {
  fill: #FF6105;
}

/* Devices */
.ta-devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.ta-device {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 8px;
  color: inherit;
  font-size: 0.8125rem;
  text-decoration: none;
}

.ta-device:hover {
  border-color: #FF6105;
}

.ta-device-name {
  font-weight: 600;
}

/* AI traffic heading */
.ta-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.ta-h1 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

/* Definitions */
.ta-defs {
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
}

.ta-defs summary {
  cursor: pointer;
  font-weight: 600;
}

.ta-defs ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--text-color-kumo-subtle);
  line-height: 1.6;
}

@media (max-width: 1100px) {
  .ta-stats,
  .ta-stats-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ta-stats,
  .ta-stats-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ta-devices {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Flexible Cloud Order Form ─────────────────────────────────────────── */

/* Plan rows: plan, CPU, RAM, storage, price (narrow tables keep the stacked card layout) */
@container vo-table (min-width: 621px) {
  .vo-row.flex-row {
    grid-template-columns: minmax(250px, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(112px, 1.1fr);
    column-gap: 1rem;
  }
}

/* Wide tables: room for the mark, the plan name, and its vCPU tag on one line */
@container vo-table (min-width: 760px) {
  .vo-row.flex-row {
    grid-template-columns: minmax(330px, 2.2fr) repeat(3, minmax(0, 1fr)) minmax(112px, 1.1fr);
  }
}

/* Same title height with or without the vCPU tag, so every plan row is equally tall */
.flex-row .vo-plan-title {
  min-height: 1.25rem;
}

/* vCPU tag beside the plan name (only plans that share a name carry one); wraps below on narrow rows */
.flex-plan-tag {
  display: inline-flex;
  align-items: center;
  height: 1.25rem;
  padding: 0 0.45rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  color: var(--text-color-kumo-subtle);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Billing cycle segmented control built from radio labels */
.flex-cycle {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.flex-cycle .ov-seg-item {
  cursor: pointer;
}

.flex-cycle .ov-seg-item:has(input:focus-visible) {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

/* Line and list swap on the VPS order form */
@keyframes vo-swap-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.vo-swap {
  animation: vo-swap-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .vo-swap {
    animation: none;
  }
}

/* Flexible Cloud custom build */
.flex-mode {
  margin-bottom: 1rem;
}

.flex-mode[hidden],
.flex-custom[hidden],
[data-flex-packages][hidden] {
  display: none;
}

.flex-custom {
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
}

.flex-custom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.flex-custom-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.5rem;
}

.flex-custom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.flex-custom-label {
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-weight: 600;
}

.flex-custom-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.flex-custom-num {
  width: 5rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.375rem;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Spin buttons hidden so the value is centered (the slider and arrow keys still adjust it) */
.flex-custom-num::-webkit-inner-spin-button,
.flex-custom-num::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.flex-custom-num:focus-visible,
.flex-custom-range:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.flex-custom-unit {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.flex-custom-range {
  width: 100%;
  min-height: 1.75rem;
  accent-color: var(--color-kumo-brand);
  cursor: pointer;
}

.flex-custom-limits {
  display: flex;
  justify-content: space-between;
  color: var(--text-color-kumo-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.flex-custom-total {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-kumo-line);
}

.flex-custom-total > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.flex-custom-total-label {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.flex-custom-total-price {
  color: var(--text-color-kumo-default);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.flex-custom-total .vo-help {
  margin: 0;
}

@media (max-width: 767px) {
  .flex-custom {
    padding: 1rem;
  }

  .flex-custom-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
}

/* Options hidden by the form script */
[data-flex-plan][hidden],
[data-flex-image][hidden],
[data-flex-ssh][hidden],
[data-cycle-price][hidden] {
  display: none;
}

/* Flexible Cloud link card on the VPS order form */
.vo-option-link {
  color: inherit;
  text-decoration: none;
}

.vo-logo .fc-mark {
  display: block;
  width: 100%;
  height: 100%;
}

[data-mode="dark"] .vo-logo .fc-mark .fc-cloud { fill: #FFFFFF; }
[data-mode="dark"] .vo-logo .fc-mark .fc-track { stroke: #0A0A0A; stroke-opacity: 0.22; }
[data-mode="dark"] .vo-logo .fc-mark .fc-knob { fill: #0A0A0A; }

/* Line fieldsets on the VPS order form: no frame of their own, cards keep their spacing */
.vo-line {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.vo-line[hidden] {
  display: none;
}

[data-line-summary] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-line-summary][hidden] {
  display: none;
}

/* ─── Flexible Cloud Optional Application ───────────────────────────────── */

.vo-card[data-flex-apps][hidden] {
  display: none;
}

/* Application icon tile */
.flex-app-icon {
  display: grid;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border: 1px solid var(--color-kumo-line);
  border-radius: 0.5rem;
  background: var(--color-kumo-elevated);
  color: var(--text-color-kumo-default);
}

.flex-app-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.vo-option.flex-app:has(input:checked) .flex-app-icon {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 40%, var(--color-kumo-line));
  color: var(--color-kumo-brand);
}

/* Application that does not fit the chosen size */
.vo-option.flex-app.is-off {
  cursor: not-allowed;
  opacity: 0.55;
}

.vo-option.flex-app.is-off:hover {
  border-color: var(--color-kumo-line);
}

.flex-app-off {
  color: var(--text-color-kumo-danger, #B42318);
  font-size: 0.75rem;
  font-weight: 600;
}

.flex-app-off[hidden] {
  display: none;
}

/* ─── Hosted Checkout Top-up ────────────────────────────────────────────── */

/* Payment method choice on the top-up form */
.topup-methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Continue-to-payment button on a hosted checkout invoice */
.invoice-checkout {
  display: flex;
  justify-content: center;
}

.invoice-checkout > a {
  min-width: 14rem;
  justify-content: center;
}

/* Hosted checkout quick switch on Admin > Payments */
.pay-checkout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.9rem 1.1rem;
}

.pay-checkout-text {
  display: flex;
  min-width: 0;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.15rem;
}

.pay-checkout-title {
  color: var(--text-color-kumo-default);
  font-size: 0.9375rem;
  font-weight: 600;
}

.pay-checkout-meta {
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
}

.pay-checkout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ─── Admin Settings Navigation ─────────────────────────────────────────── */

.st-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Group menu: chips that scroll sideways on narrow screens */
.st-nav {
  min-width: 0;
}

.st-nav-list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.25rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.st-nav-list::-webkit-scrollbar {
  display: none;
}

.st-nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--color-kumo-line);
  border-radius: 9999px;
  background: var(--color-kumo-base);
  color: var(--text-color-kumo-default);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.st-nav-link:hover {
  border-color: color-mix(in srgb, var(--color-kumo-brand) 45%, var(--color-kumo-line));
}

.st-nav-link:focus-visible,
.st-nav-sublink:focus-visible {
  outline: 2px solid var(--color-kumo-brand);
  outline-offset: 2px;
}

.st-nav-icon {
  display: inline-flex;
  color: var(--text-color-kumo-subtle);
}

.st-nav-item.is-active .st-nav-link {
  border-color: var(--color-kumo-brand);
  background: color-mix(in srgb, var(--color-kumo-brand) 8%, var(--color-kumo-base));
  color: var(--text-color-kumo-strong);
  font-weight: 600;
}

.st-nav-item.is-active .st-nav-icon {
  color: var(--color-kumo-brand);
}

/* Section links under the active group (wide screens only) */
.st-nav-sub {
  display: none;
}

.st-nav-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.375rem;
  color: var(--text-color-kumo-subtle);
  font-size: 0.8125rem;
  text-decoration: none;
}

.st-nav-sublink:hover {
  background: color-mix(in srgb, var(--color-kumo-brand) 6%, transparent);
  color: var(--text-color-kumo-default);
}

/* Section on/off marker */
.st-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-kumo-line);
}

.st-dot.is-on {
  background: var(--text-color-kumo-success);
}

/* Panels: one group at a time, its sections stacked */
.st-panels {
  min-width: 0;
}

.st-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.st-panel[hidden] {
  display: none;
}

.st-panel-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0 0.15rem;
}

.st-panel-title {
  margin: 0;
  color: var(--text-color-kumo-strong);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.st-panel-desc {
  margin: 0;
  color: var(--text-color-kumo-subtle);
  font-size: 0.875rem;
}

/* Sections land below the sticky app header when opened from the menu */
.st-panel > section {
  scroll-margin-top: 5rem;
}

@media (min-width: 1024px) {
  .st-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.75rem;
  }

  .st-nav {
    position: sticky;
    top: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--color-kumo-line);
    border-radius: 0.75rem;
    background: var(--color-kumo-base);
  }

  .st-nav-list {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0;
    overflow: visible;
  }

  .st-nav-link {
    padding: 0.55rem 0.7rem;
    border-color: transparent;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.9375rem;
  }

  .st-nav-link:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--color-kumo-brand) 5%, transparent);
  }

  .st-nav-item.is-active .st-nav-link {
    border-color: transparent;
  }

  .st-nav-item.is-active .st-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin: 0.2rem 0 0.4rem;
    padding: 0 0 0 1.85rem;
    list-style: none;
  }
}

/* Section just saved: a short brand ring that fades */
.st-panel > section {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.6s ease;
}

.st-panel > section.st-saved {
  outline-color: color-mix(in srgb, var(--color-kumo-brand) 55%, transparent);
}

.st-panel > [role="alert"],
.st-panel > [role="status"] {
  scroll-margin-top: 5rem;
}