/* The web app's only stylesheet, served same-origin under the page's strict CSP. The design
   tokens are custom properties: colour roles for light and dark (dark follows the system), the
   type and spacing scales, radii and the motion curve. The two typefaces, Space Grotesk for
   headings and Inter for the rest, are served from this origin; nothing loads from elsewhere. */

@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/SpaceGrotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-hero: clamp(2rem, 5vw + 1rem, 3.5rem);
  --width: 1080px;
  --width-text: 760px;
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #f0ffdf;
  --surface: #ffffff;
  --surface-2: #ffd8df;
  --text: #14161a;
  --muted: #4b5260;
  --border: #d3e6c6;
  --control-border: #6b7f62;
  --accent: #2f6b1a;
  --accent-hover: #24541a;
  --on-accent: #ffffff;
  --accent-soft: #a8df8e;
  --danger: #8a0019;
  --on-danger: #ffffff;
  --danger-soft: #ffaab8;
  --success: #116b3a;
  --on-success: #ffffff;
  --success-soft: #dff3d3;
  --warning: #8a4b00;
  --on-warning: #ffffff;
  --warning-soft: #fdf1df;
  --focus: #2f6b1a;
  --shadow: 0 1px 2px rgba(20, 22, 26, 0.06), 0 8px 24px rgba(20, 22, 26, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #0b192c;
    --surface-2: #1e3e62;
    --text: #eef0f4;
    --muted: #a7aebb;
    --border: #2b4f78;
    --control-border: #7d8fa8;
    --accent: #ff8738;
    --accent-hover: #ffa366;
    --on-accent: #000000;
    --accent-soft: #3a1d05;
    --danger: #ff8a98;
    --on-danger: #000000;
    --danger-soft: #3a1c22;
    --success: #7ad7a0;
    --on-success: #000000;
    --success-soft: #16301f;
    --warning: #f4bf6b;
    --on-warning: #000000;
    --warning-soft: #33260f;
    --focus: #ff8738;
    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--text-base)/1.6 var(--font-sans); color: var(--text); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
h1, h2 { font-family: var(--font-display); font-weight: 600; } /* Space Grotesk, variable 300–700 */
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
main:focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-4); color: var(--on-accent); }

/* The shell: header, main and footer share one width. */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); max-width: var(--width); margin: 0 auto; padding: var(--space-3) var(--space-6); }
header.site { position: sticky; top: 0; z-index: 5; container-type: inline-size; background: var(--surface); border-bottom: 1px solid var(--border); }
header.site .bar { flex-wrap: nowrap; max-width: none; min-height: 64px; padding: 0 var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.logo { width: 28px; height: 28px; flex: none; }
.logo rect { fill: var(--accent); }
.logo path { fill: none; stroke: var(--on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.logo circle { fill: var(--on-accent); }
/* The header after a shadcn header block: brand left, the nav centred in the free space, account right.
   Under 900px of header width the nav moves into a sheet (a modal dialog) behind the menu button; under
   640px the account actions do too. */
.main-nav { display: none; gap: var(--space-1); margin: 0 auto; }
.main-nav a, .nav-ghost { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.main-nav a:hover, .nav-ghost:hover { background: var(--surface-2); color: var(--text); }
.main-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px var(--accent); }
.account { display: flex; flex: none; align-items: center; gap: var(--space-3); margin-left: auto; }
.account .sep { width: 1px; height: 20px; background: var(--border); }
.account .nav-cta { min-height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.nav-cta .icon, .sheet .button .icon { width: 14px; height: 14px; stroke: currentColor; }
.menu-btn { width: 40px; height: 40px; min-height: 0; padding: 0; border: 1px solid var(--control-border); background: transparent; color: var(--text); }
.menu-btn:hover { background: var(--surface-2); color: var(--text); }
.menu-btn .icon { width: 18px; height: 18px; stroke: currentColor; }
@container (min-width: 900px) { header.site .main-nav { display: flex; } header.site .account { margin-left: 0; } .account .menu-btn { display: none; } }
@container (max-width: 639px) { .account > :not(.menu-btn) { display: none; } }
dialog.sheet { width: min(100%, 320px); max-width: none; height: 100%; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in 240ms var(--ease); }
dialog.sheet::backdrop { background: rgb(0 0 0 / 45%); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--border); }
.sheet nav { display: grid; padding: var(--space-2); }
.sheet nav a { padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.sheet nav a:hover { background: var(--surface-2); color: var(--text); }
.sheet nav a[aria-current="page"] { color: var(--text); box-shadow: inset 2px 0 var(--accent); }
.sheet-foot { display: grid; gap: var(--space-2); margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--border); }
.sheet-foot .button, .sheet-foot button { width: 100%; }
@keyframes sheet-in { from { translate: 100% 0; } }
header form, footer form { margin: 0; }
form.lang button { padding: var(--space-1) var(--space-3); border: 1px solid var(--control-border); background: transparent; color: var(--text); font-size: var(--text-sm); }
form.lang button:hover { border-color: var(--accent); background: var(--accent-soft); }

main { flex: 1; width: 100%; max-width: var(--width-text); margin: 0 auto; padding: var(--space-8) var(--space-6); }


/* Controls. */
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); }
.button:hover, button:hover { background: var(--accent-hover); color: var(--on-accent); }
.button:active, button:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; background: var(--accent); }
.button.secondary, button.secondary, button.ghost { background: transparent; color: var(--text); border-color: var(--control-border); }
.button.secondary:hover, button.secondary:hover, button.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent); }
button.danger { background: var(--danger); color: var(--on-danger); }
.button.large { min-height: 52px; padding: var(--space-3) var(--space-8); font-size: var(--text-lg); }
input:not([type="radio"]):not([type="checkbox"]), select { min-height: 40px; padding: var(--space-2) var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; }
label { font-weight: 500; }

.note { color: var(--muted); }
.error { color: var(--danger); }
.notice { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--accent-soft); }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }
caption { text-align: left; color: var(--muted); padding-bottom: var(--space-2); }
td form { margin: 0; }
td.amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
dialog.confirm-agent { max-width: 28rem; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); color: var(--text); }
/* The upscale flow: the upscale page, the history and a job's page. */
main:has(> .page-head) { max-width: var(--width); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head .lead { margin: 0; color: var(--muted); }
.balance-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.balance-card span { color: var(--muted); font-size: var(--text-sm); }
.balance-card strong { font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.flow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.flow .side h2 { font-size: var(--text-lg); }
.flow .side p:last-child { margin: 0; }
.upscale { display: grid; gap: var(--space-4); margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { margin-bottom: var(--space-2); padding: 0; font-weight: 600; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.choices legend { grid-column: 1 / -1; }
.choice { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.choice input { margin: 4px 0 0; accent-color: var(--accent); }
.choice-text { display: grid; }
.choice-name { font-size: var(--text-lg); font-weight: 700; }
.choice-detail { color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.choice .quote { grid-column: 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.choice:hover { border-color: var(--accent); }
.choice:has(input:checked) { border: 2px solid var(--accent); padding: calc(var(--space-4) - 1px); background: var(--accent-soft); }
/* A choice the worker cannot make: shown with its reason, not chosen. No opacity, so its text keeps its contrast. */
.choice.unavailable { border-style: dashed; background: transparent; cursor: not-allowed; }
.choice.unavailable:hover { border-color: var(--control-border); }
.choice-reason { font-size: var(--text-sm); font-weight: 600; }
/* Alerts: info (default), success, warning, error; outlined on surface by default, .filled for a solid ground. --tone is the variant's strong color. */
.alert { --tone: var(--accent); --on-tone: var(--on-accent); display: flex; align-items: flex-start; gap: var(--space-4); margin: 0; padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--surface)); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); animation: alert-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.alert[hidden] { display: none; }
.alert.success { --tone: var(--success); --on-tone: var(--on-success); }
.alert.warning { --tone: var(--warning); --on-tone: var(--on-warning); }
.alert.error { --tone: var(--danger); --on-tone: var(--on-danger); color: var(--text); }
.alert.filled { background: var(--tone); border-color: var(--tone); color: var(--on-tone); }
.alert-icon { flex: none; display: flex; color: var(--tone); }
.alert.filled .alert-icon { color: inherit; }
.alert-icon .icon { stroke: currentColor; }
.alert-body { flex: 1; min-width: 0; font-size: var(--text-sm); }
.alert-body p { margin: 0; }
.alert-title { font-weight: 600; }
.alert .alert-close { flex: none; min-height: 0; padding: var(--space-1); border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; opacity: 0.8; }
.alert .alert-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.alert-close .icon { width: 20px; height: 20px; stroke: currentColor; }
.alert.leaving { animation: alert-out 200ms ease-in both; }
@keyframes alert-in { from { opacity: 0; transform: translateY(50px) scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes alert-out { to { opacity: 0; transform: translateY(20px) scale(0.5); } }
.upscale button[type="submit"] { justify-self: start; }
progress { width: 100%; height: 12px; vertical-align: middle; accent-color: var(--accent); }
/* Status badges: an icon and the status word in the tone, on the tone mixed 12% into surface. */
.badge { --tone: var(--warning); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 35px; padding: 0 var(--space-4); border-radius: var(--radius); background: color-mix(in srgb, var(--tone) 12%, var(--surface)); color: var(--tone); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge .icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 32; }
.badge[data-status="DISPATCHED"], .badge[data-status="RUNNING"] { --tone: var(--accent); }
.badge[data-status="COMPLETED"], .badge[data-status="PAID"] { --tone: var(--success); }
.badge[data-status="FAILED"] { --tone: var(--danger); }
.badge[data-status="CANCELLED"], .badge[data-status="EXPIRED"], .badge[data-status="REVOKED"] { --tone: var(--muted); }
.jobs { display: grid; gap: var(--space-3); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.job-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color 160ms var(--ease); }
.job-card:hover, .job-card:focus-within { border-color: var(--accent); }
.job-card p { margin: 0; }
.job-title { font-weight: 700; font-size: var(--text-lg); }
.job-title a { color: var(--text); text-decoration: none; }
.job-title a::after { content: ""; position: absolute; inset: 0; }
.job-card .note { font-size: var(--text-sm); }
.empty { display: grid; justify-items: center; text-align: center; }
.empty .icon { width: 40px; height: 40px; margin-bottom: var(--space-3); }
.empty p:last-child { margin: 0; }
.job { display: grid; gap: var(--space-4); }
.job > * { margin: 0; }
.job h2 { font-size: var(--text-xl); }
/* The job's progress card: an accent panel in on-accent ink, tints mixed from on-accent (label 90%, sub-label 80%, track 20%). */
.progress-card { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.progress-card p { margin: 0; }
.progress-title { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; }
.progress-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-full); background: color-mix(in srgb, var(--on-accent) 20%, transparent); }
.progress-icon .icon { width: 20px; height: 20px; stroke: var(--on-accent); }
.progress-card progress { display: block; width: 100%; height: 8px; margin: 20px 0; border: 0; border-radius: var(--radius-full); overflow: hidden; -webkit-appearance: none; appearance: none; background: color-mix(in srgb, var(--on-accent) 20%, transparent); color: var(--on-accent); }
.progress-card progress::-webkit-progress-bar { background: transparent; }
.progress-card progress::-webkit-progress-value { background: var(--on-accent); border-radius: var(--radius-full); transition: width 1.2s var(--ease); }
.progress-card progress::-moz-progress-bar { background: var(--on-accent); border-radius: var(--radius-full); }
.progress-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.progress-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--on-accent) 90%, transparent); }
.progress-sub { font-size: var(--text-sm); color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.progress-count { font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.progress-count span { font-size: var(--text-lg); font-weight: 500; color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
@media (prefers-reduced-motion: reduce) { .progress-card progress::-webkit-progress-value { transition: none; } }
.job form { margin: 0; }
.links { margin-top: var(--space-6); }
.confirm-card { max-width: var(--width-text); }
.confirm-card > :last-child { margin-bottom: 0; }
.confirm { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.scroll { overflow-x: auto; }

/* The account pages: credits and top-ups, access tokens and device sign-in. */
.account-section { margin: 0 0 var(--space-8); }
.account-section > h2 { margin-bottom: var(--space-2); }
.danger-zone { border-color: var(--danger); }
.packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.pack { padding: var(--space-4); transition: border-color 160ms var(--ease); }
.pack:hover, .pack:focus-within { border-color: var(--accent); }
.pack form { display: grid; gap: var(--space-3); margin: 0; }
.pack-amount { margin: 0; font-size: var(--text-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.ledger { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.ledger-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ledger-line p { margin: 0; }
.ledger-what { font-weight: 600; }
.ledger-line .note { font-size: var(--text-sm); }
.amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount.plus { color: var(--success); }
.topup { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.topup > * { margin: 0; }
.topup-qr { width: 240px; max-width: 100%; height: auto; background: #fff; padding: var(--space-2); border-radius: var(--radius-sm); }
.topup-amount { font-size: 1.5rem; font-weight: 700; }
dialog.topup-dialog { position: fixed; inset: auto var(--space-4) var(--space-4) auto; margin: 0; max-width: 22rem; z-index: 10;
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); color: var(--text); }
dialog.topup-dialog h2 { margin-top: 0; }
dialog.confirm-agent .choices label { display: block; padding: var(--space-1) 0; }
form.create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; margin: 0 0 var(--space-8); }
form.create h2 { grid-column: 1 / -1; margin: 0; font-size: var(--text-lg); }
.field { display: grid; gap: var(--space-1); }
.connect-agent { margin-top: var(--space-8); }
.connect-agent h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-base); }
.connect-agent pre { overflow-x: auto; margin: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); user-select: all; }
.connect-agent > :last-child { margin-bottom: 0; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.card.narrow { max-width: 520px; margin: 0 auto; }
.card.narrow > :last-child { margin-bottom: 0; }
.device { display: grid; gap: var(--space-2); }
.device button { margin-top: var(--space-2); }
.code-input { font: 700 var(--text-xl)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }

/* The landing page. */
main:has(> .hero), main:has(> .hero-split) { max-width: var(--width); }
main > section, main > .hero-split { margin: 0 0 var(--space-16); }
.hero { padding: var(--space-8) 0 0; max-width: 760px; }
.hero h1 { font-size: var(--text-hero); letter-spacing: -0.02em; }
.hero .lead { font-size: var(--text-lg); color: var(--muted); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
.tagline { display: inline-block; margin-bottom: var(--space-4); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--accent-soft); color: var(--text); font-size: var(--text-sm); font-weight: 600; animation: reveal 700ms var(--ease) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--accent); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.proof li { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.proof .icon { width: 18px; height: 18px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.card { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.steps .card .icon { width: 32px; height: 32px; margin-bottom: var(--space-3); }
.steps .card h3 { margin-bottom: var(--space-2); }
.steps .card p { margin: 0; color: var(--muted); }
.sharper + .note { margin-top: var(--space-4); }
.steps .card p.stat { margin-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
table.prices { max-width: 560px; border: 1px solid var(--border); border-radius: var(--radius); }
.grant { padding: var(--space-8); border-radius: var(--radius-lg); background: var(--accent-soft); }
.grant .amount { font-size: var(--text-hero); font-weight: 800; line-height: 1; color: var(--text); }
.faq { display: grid; gap: var(--space-2); max-width: var(--width-text); }
details { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
summary { cursor: pointer; font-weight: 600; }
details p { margin: var(--space-2) 0 0; color: var(--muted); }
.cta { text-align: center; padding: var(--space-12) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }

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

@media (max-width: 560px) {
  .bar, header.site .bar { padding: var(--space-3) var(--space-4); }
  main { padding: var(--space-6) var(--space-4); }
  .upscale button[type="submit"], .confirm button, .confirm .button, .job .button.large, .hero .actions .button { width: 100%; padding: var(--space-3) var(--space-4); }
  .flow, .choices { grid-template-columns: 1fr; }
  .page-head { align-items: stretch; flex-direction: column; }
  .job-card { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
  th, td { padding: var(--space-2) var(--space-1); font-size: var(--text-sm); }
  .grant, .cta { padding: var(--space-6) var(--space-4); }
  .packs { grid-template-columns: 1fr 1fr; }
  .ledger-line { align-items: flex-start; }
  form.create { grid-template-columns: 1fr; }
  form.create button, .device button, .topup .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* The privacy and terms pages: each section a card of points. */
.legal { margin-top: var(--space-6); }
.legal h2 { margin-top: 0; }
.legal ul { margin: 0; padding-left: var(--space-6); }
.legal li + li { margin-top: var(--space-2); }


/* Landing hero with a before/after video: the .hero copy beside a .compare frame. The divider follows the pointer through a
   spring; ink over the video (rule, chips) is fixed white on black so it reads on any frame. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: center; }
.hero-split .hero { padding-top: 0; }
.compare { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* The whole frame shows, never cropped: a clip not quite 16:9 gets thin black bars. */
.compare { background: #000; }
.compare canvas, .compare video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.compare-chip { position: absolute; top: var(--space-3); z-index: 1; padding: 4px 10px; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.62); color: #fff; font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.12em; pointer-events: none; transition: opacity 300ms var(--ease); }
.compare-chip[data-side="before"] { left: var(--space-3); }
.compare-chip[data-side="after"] { right: var(--space-3); }
.compare-rule { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; will-change: left; }
.compare-handle { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; min-height: 0; padding: 0; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent), 0 2px 10px rgba(0, 0, 0, 0.3); cursor: ew-resize; pointer-events: auto; }
.compare-handle:hover { background: var(--accent-hover); color: var(--on-accent); }
.compare-handle:active { transform: translate(-50%, -50%); }
.compare-handle svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare-zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: rgba(0, 0, 0, 0.62); color: #fff; cursor: pointer; }
.compare-zoom:hover { background: rgba(0, 0, 0, 0.8); color: #fff; }
.compare-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare:fullscreen, .compare.is-full { aspect-ratio: auto; border: 0; border-radius: 0; }
.compare.is-full { position: fixed; inset: 0; z-index: 100; }
html:has(.compare.is-full) { overflow: hidden; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } }

/* Copy fields: a label, a one-line mono value and a copy button whose tooltip turns into the result for 2s. */
.copy-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; width: fit-content; max-width: 100%; margin: 0; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); list-style: none; }
.copy-field { display: flex; align-items: center; gap: 10px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.copy-field > .icon { width: 14px; height: 14px; stroke: var(--muted); stroke-width: 20; }
.copy-text { flex: 1; min-width: 0; margin: 0; }
.copy-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.copy-value { display: block; overflow: hidden; font: 12px/1.5 var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
.copy-tip { position: relative; flex: none; display: flex; }
.copy-btn { width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
.copy-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.copy-btn .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 20; }
.copy-btn .done { display: none; stroke: var(--success); }
.copy-tip[data-state="copied"] .copy-btn .idle { display: none; }
.copy-tip[data-state="copied"] .copy-btn .done { display: block; }
.copy-bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--text); color: var(--surface); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 150ms var(--ease), transform 150ms var(--ease); }
.copy-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text); }
.copy-tip:hover .copy-bubble, .copy-tip:focus-within .copy-bubble, .copy-tip[data-state] .copy-bubble { opacity: 1; transform: translate(-50%, 0); }
.copy-tip[data-dismissed] .copy-bubble { opacity: 0; }

/* The landing footer: four columns (newsletter, links, contact, social and theme) over a bar with the
   copyright and legal links. Columns follow the footer's own width: one, two, then four. */
.site-footer { position: relative; isolation: isolate; overflow: clip; container-type: inline-size; border-top: 1px solid var(--border); background: var(--surface); color: var(--text); }
.foot-inner { max-width: var(--width); margin: 0 auto; padding: var(--space-12) var(--space-4) var(--space-8); }
.foot-grid { display: grid; gap: var(--space-8); }
@container (min-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@container (min-width: 900px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-12); } }
.foot-col { position: relative; }
.foot-col h2 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); letter-spacing: -0.02em; }
.foot-col h3 { margin: 0 0 var(--space-4); font-size: var(--text-lg); }
.foot-col > p { margin: 0 0 var(--space-6); color: var(--muted); }
.foot-glow { position: absolute; top: 0; right: -16px; z-index: -1; width: 96px; height: 96px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--accent) 14%, transparent); filter: blur(32px); pointer-events: none; }
.foot-sub { position: relative; margin: 0; }
.foot-sub input { width: 100%; padding-right: 48px; }
.foot-sub button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: var(--radius-full); }
.foot-sub button:hover { transform: scale(1.05); }
.foot-sub .icon { width: 16px; height: 16px; stroke: var(--on-accent); }
.foot-links { display: grid; gap: var(--space-2); margin: 0; padding: 0; font-size: var(--text-sm); font-style: normal; list-style: none; }
.foot-links p { margin: 0; }
.foot-links a, .foot-bottom nav a { color: var(--text); text-decoration: none; transition: color 160ms var(--ease); }
.foot-links a:hover, .foot-bottom nav a:hover { color: var(--accent); text-decoration: underline; }
.foot-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border); font-size: var(--text-sm); text-align: center; }
.foot-bottom p { margin: 0; color: var(--muted); }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); }
.foot-bottom nav { align-items: center; }
.foot-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
@container (min-width: 640px) { .foot-bottom { flex-direction: row; justify-content: space-between; } }

/* The batch drop zone: a compact dashed target over the list of picked videos, each with its length,
   size, 4K price and state, and a footer with the total and the start button. */
.dz { display: grid; gap: var(--space-3); }
.dz-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dz-head h3 { margin: 0; font-size: var(--text-base); }
.dz-head .note { font-size: var(--text-sm); font-weight: 400; }
.dz-head button { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.dz-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 2px dashed var(--control-border); border-radius: var(--radius-lg); background: var(--surface-2); cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.dz-drop:hover, .dz-drop[data-dragging] { border-color: var(--accent); background: var(--accent-soft); }
.dz-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.dz-drop[data-full] { opacity: 0.6; }
.dz-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dz-badge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); }
.dz-badge .icon { width: 18px; height: 18px; }
.dz-text { display: grid; flex: 1; min-width: 12rem; font-size: var(--text-sm); }
.dz-title { font-weight: 700; }
.dz-pick { min-height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.dz-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.dz-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dz-thumb { position: relative; width: 72px; aspect-ratio: 16 / 9; flex: none; overflow: hidden; border-radius: var(--radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 45%, var(--surface-2)), var(--surface-2)); }
.dz-thumb video { width: 100%; height: 100%; object-fit: cover; }
.dz-len { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.62); color: #fff; font: 600 10px/1.5 var(--font-mono); }
.dz-len:empty { display: none; }
.dz-main { display: grid; flex: 1; min-width: 0; font-size: var(--text-sm); }
.dz-name { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dz-meta { font-size: 12px; }
.dz-state { font-size: 12px; font-weight: 600; color: var(--success); }
.dz-item[data-state="uploading"] .dz-state { color: var(--text); }
.dz-item[data-state="error"] { border-color: color-mix(in srgb, var(--danger) 45%, var(--surface)); }
.dz-item[data-state="error"] .dz-state { color: var(--danger); font-weight: 500; }
.dz-bar { display: none; height: 4px; margin-top: var(--space-1); overflow: hidden; border-radius: var(--radius-full); background: var(--surface-2); }
.dz-bar span { display: block; height: 100%; background: var(--accent); transition: width 300ms var(--ease); }
.dz-item[data-state="uploading"] .dz-bar { display: block; }
.dz-price { flex: none; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.dz-remove { width: 32px; height: 32px; min-height: 0; flex: none; padding: 0; border: 0; background: transparent; color: var(--muted); }
.dz-remove:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.dz-remove .icon { width: 16px; height: 16px; stroke: currentColor; }
.dz-empty { margin: 0; text-align: center; font-size: var(--text-sm); }
.dz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.dz-foot p { margin: 0; }
.dz-total { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .dz-thumb { width: 56px; } .dz-price { display: none; } }

/* Glow cards: a card frame whose 1px border is a radial gradient that follows the pointer (accent in the middle,
   border at the edge), and a faint accent light inside. The script sets --x, --y and [data-active]. */
.glow-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-6); }
.glow-card { --x: -999px; --y: -999px; --r: 200px; position: relative; padding: 1px; border-radius: var(--radius-lg); background: radial-gradient(var(--r) circle at var(--x) var(--y), color-mix(in srgb, var(--accent) 55%, var(--surface)), var(--accent), var(--border) 100%), var(--border); box-shadow: var(--shadow); }
.glow-card::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--radius-lg) - 1px); background: radial-gradient(var(--r) circle at var(--x) var(--y), color-mix(in srgb, var(--accent) 8%, transparent), transparent 100%); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.glow-card[data-active]::after { opacity: 1; }
.glow-inner { height: 100%; padding: var(--space-6); border-radius: calc(var(--radius-lg) - 1px); background: var(--surface); }
.glow-inner h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.glow-inner > .note { margin: 0 0 var(--space-4); }
.gc-steps { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-6); }

/* The sign-in card: a GlowCard on an accent-lit stage, tilted toward the mouse, with a light that runs
   round its border, entering with a short rise. One way in: Google. */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.signin-stage { display: grid; place-items: center; min-height: 100%; border-radius: var(--radius-lg); padding: var(--space-12) var(--space-4); background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 28%, var(--bg)), var(--bg) 70%); perspective: 1500px; }
.signin-card { --rx: 0deg; --ry: 0deg; width: min(100%, 380px); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 200ms var(--ease); animation: signin-in 600ms var(--ease) both, beam 6s linear infinite; background: conic-gradient(from var(--beam), transparent 0 82%, color-mix(in srgb, var(--accent) 70%, var(--surface)) 92%, transparent 100%) border-box, radial-gradient(var(--r) circle at var(--x) var(--y), color-mix(in srgb, var(--accent) 55%, var(--surface)), var(--accent), var(--border) 100%), var(--border); }
.signin-card .glow-inner { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; }
.signin-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); }
.signin-mark .logo { width: 28px; height: 28px; }
.signin-card h1 { margin: 0; font-size: var(--text-xl); }
.signin-card .note { margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.signin-google { width: 100%; min-height: 44px; }
.g-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: #fff; }
.g-badge svg { width: 14px; height: 14px; }
.signin-grant { margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.signin-agree { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.signin-agree a { color: var(--text); }
@keyframes signin-in { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes beam { to { --beam: 360deg; } }

/* The tokens card, after an environment-variables card: one card, a header with the count and "Tạo mã", and a
   row per token split by inset hairlines. Only the new token has a value to show or copy; the rest show
   their dates, and an active one has a ⋯ menu with revoke. Row actions show on hover and focus, always on touch. */
.tokens-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); font-size: var(--text-sm); }
.tokens-card header, .tk-row { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); }
.tokens-card header { min-height: 56px; gap: var(--space-2); }
.tokens-card header::after, .tk-row:not(:last-child)::after { content: ""; position: absolute; right: var(--space-6); bottom: 0; left: var(--space-6); border-bottom: 1px solid var(--border); }
.tokens-card header .icon { width: 16px; height: 16px; stroke: var(--muted); }
.tokens-card h3 { margin: 0; color: var(--muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; }
.tk-count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-add { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-full); background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); font-size: 12px; font-weight: 600; text-decoration: none; }
.tk-add:hover { background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); }
.tk-add .icon { width: 12px; height: 12px; stroke: currentColor; }
.tokens-card ul { margin: 0; padding: 0; list-style: none; }
.tk-row { min-height: 64px; }
.tk-main { flex: 1; min-width: 0; }
.tk-main p { margin: 0; }
.tk-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text); font-weight: 600; }
.tk-name > span:first-child { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.tk-badge { padding: 0 6px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 20px; }
.tk-badge[data-tone="accent"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); }
.tk-badge[data-tone="success"] { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.tk-value { display: block; margin-top: var(--space-1); overflow: hidden; color: var(--muted); font: 13px/1.5 var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.tk-facts { margin-top: var(--space-1) !important; color: var(--muted); font-size: 12px; }
.tk-warn { margin-top: var(--space-1) !important; color: var(--text); font-size: 12px; font-weight: 500; }
.tk-row[data-off] .tk-name > span:first-child { color: var(--muted); }
.tk-actions { display: flex; flex: none; align-items: center; gap: 2px; }
.tk-act { width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted); opacity: 0; transition: opacity 150ms var(--ease), background-color 150ms var(--ease); }
.tk-act:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.tk-row:hover .tk-act, .tk-row:focus-within .tk-act, .tk-act[aria-pressed="true"], .tk-act[data-copied], .tk-act:has(+ .tk-menu:popover-open) { opacity: 1; }
.tk-row[data-new] .tk-act { opacity: 1; } /* copying is the point of this row */
@media (pointer: coarse) { .tk-act { opacity: 1; } }
.tk-act .dots { stroke-width: 28; }
.tk-act .icon { width: 16px; height: 16px; stroke: currentColor; }
.tk-swap { display: grid; }
.tk-swap > * { grid-area: 1 / 1; transition: opacity 150ms var(--ease), scale 150ms var(--ease); }
.tk-act .eye-off, .tk-act .done, .tk-act[aria-pressed="true"] .eye, .tk-act[data-copied] .copy { opacity: 0; scale: 0.75; }
.tk-act[aria-pressed="true"] .eye-off, .tk-act[data-copied] .done { opacity: 1; scale: 1; }
.tk-act .done { stroke: var(--success); }
.tk-menu { position: fixed; inset: auto; width: 128px; margin: 0; padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.tk-menu form { margin: 0; }
.tk-menu button { width: 100%; min-height: 36px; justify-content: flex-start; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--danger); font-size: var(--text-sm); font-weight: 500; }
.tk-menu button:hover, .tk-menu button:focus-visible { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
@media (max-width: 560px) { .tokens-card header, .tk-row { padding-inline: var(--space-4); } .tokens-card header::after, .tk-row:not(:last-child)::after { inset-inline: var(--space-4); } }