/* The user and admin pages (sections 15.2 and 15.3 of docs/part1-spec.md) in the Aurora grid look: the landing
   page's polar-night ground, a static aurora glow, glass cards, pill buttons and the same three fonts. One dark theme,
   every color explicit. No inline style anywhere, so everything the pages need is here. */
:root {
  color-scheme: dark;
  --a-bg: #060A1C;
  --a-surface: #0E1538;
  --a-surface-2: #0A1030;
  --a-line: rgba(150, 175, 255, .18);
  --a-line-2: rgba(150, 175, 255, .32);
  --a-line-3: rgba(190, 205, 255, .45);
  --a-ink: #F3F6FF;
  --a-ink-2: #D3DBF7;
  --a-ink-3: #A9B6E3;
  --a-blue: #3B6BFF;
  --a-cyan: #38D9FF;
  --a-violet: #9D5CFF;
  --a-mint: #43F5B8;
  --a-coral: #FF6F61;
  --a-coral-2: #FF9A8A;
  --a-pink: #FF9ACB;
  --a-amber: #FFD166;
  --a-sky: #8FB4FF;
  --a-focus: #8FF0FF;
  --a-glass: rgba(255, 255, 255, .06);
  --a-glass-2: rgba(255, 255, 255, .11);
  --a-sunk: rgba(6, 10, 28, .6);
  --a-card: linear-gradient(180deg, rgba(26, 36, 86, .8), rgba(14, 21, 56, .8));
  --a-display: "Sora", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --a-body: "DM Sans", "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --a-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --a-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--a-bg); }
body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: transparent; /* the ground is on html, so the glow below shows through */
  color: var(--a-ink);
  font: 400 16px/1.55 var(--a-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
/* The aurora, standing still: a few soft fields of color behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 45vmax at 8% -10%, rgba(59, 107, 255, .32), rgba(59, 107, 255, 0) 70%),
    radial-gradient(50vmax 40vmax at 100% 0%, rgba(56, 217, 255, .18), rgba(56, 217, 255, 0) 70%),
    radial-gradient(55vmax 35vmax at 30% 12%, rgba(67, 245, 184, .10), rgba(67, 245, 184, 0) 70%),
    radial-gradient(50vmax 45vmax at 95% 85%, rgba(157, 92, 255, .20), rgba(157, 92, 255, 0) 70%),
    radial-gradient(40vmax 35vmax at 0% 95%, rgba(255, 111, 97, .10), rgba(255, 111, 97, 0) 70%),
    var(--a-bg);
}
h1, h2, h3 { margin: 0; font-family: var(--a-display); color: var(--a-ink); letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(26px, 4vw, 34px); font-weight: 600; line-height: 1.15; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
p { margin: 10px 0; }
a { color: var(--a-cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
code, .mono { font-family: var(--a-mono); font-size: .9em; }
code { word-break: break-all; }
b, strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--a-focus); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.muted { color: var(--a-ink-3); }
.small { font-size: 14px; line-height: 1.5; }
.error { color: var(--a-coral-2); font-weight: 600; }
.ok { color: var(--a-mint); font-weight: 600; }
.warning { color: var(--a-amber); font-weight: 600; }
.note { white-space: pre-wrap; }

/* ---------- top bar and nav ---------- */
header.top { padding: 14px clamp(12px, 3vw, 28px) 0; }
.bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  max-width: 1100px; margin: 0 auto; padding: 6px 8px 6px 14px; border-radius: 999px;
  background: rgba(6, 10, 28, .62); border: 1px solid rgba(150, 175, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; font: 500 17px/1 var(--a-display); letter-spacing: -.01em; color: var(--a-ink); text-decoration: none; }
.brand b { font-weight: 700; }
.brand-mark { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; background: conic-gradient(from 210deg, var(--a-mint), var(--a-cyan), var(--a-blue), var(--a-violet), var(--a-coral), var(--a-mint)); box-shadow: 0 0 16px rgba(56, 217, 255, .45); }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: var(--a-bg); }
.brand { margin-right: auto; }
.nav, .bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bar-end form.signout, .account form.switch { display: inline-flex; align-items: center; }
.nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 13px; border-radius: 999px; font-size: 14.5px; color: var(--a-ink-2); text-decoration: none; }
.nav a:hover { background: var(--a-glass); color: var(--a-ink); }
.nav a[aria-current="page"] { background: rgba(67, 245, 184, .14); color: var(--a-mint); box-shadow: inset 0 0 0 1px rgba(67, 245, 184, .4); }
.bar-end .who { font-size: 13.5px; color: var(--a-ink-3); padding: 0 6px; }
.admin-nav { display: flex; gap: 4px; overflow-x: auto; max-width: 1100px; margin: 10px auto 0; padding: 0 4px; }
.admin-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 13px; border-radius: 10px; font-size: 14.5px; color: var(--a-ink-2); text-decoration: none; }
.admin-nav a:hover { background: var(--a-glass); color: var(--a-ink); }
.admin-nav a[aria-current="page"] { background: rgba(67, 245, 184, .12); color: var(--a-mint); }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 209, 102, .14); border: 1px solid rgba(255, 209, 102, .42); color: var(--a-amber); font: 600 12px/1 var(--a-mono); }

/* ---------- page frame ---------- */
main { width: 100%; max-width: 900px; margin: 0 auto; padding: clamp(22px, 4vw, 40px) clamp(16px, 3vw, 28px) 32px; flex: 1 0 auto; }
body.admin main { max-width: 1100px; }
body.slim main, body[data-page="signin"] main, body[data-page="consent"] main, body[data-page="error"] main { max-width: 600px; }
.foot { max-width: 900px; width: 100%; margin: 0 auto; padding: 18px clamp(16px, 3vw, 28px) 28px; font-size: 13px; color: var(--a-ink-3);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--a-ink-2); }
.foot-links a:hover { color: var(--a-cyan); }
.foot-links a[aria-current="page"] { color: var(--a-ink); text-decoration: none; }
/* /privacy and /terms (11.7 of the part 2 spec): plain reading pages. */
.legal h2 { margin: 22px 0 8px; font-size: 18px; }
.legal ul { margin: 8px 0; padding-left: 1.2em; }
.legal li { margin: 7px 0; color: var(--a-ink-2); }
.legal li b { color: var(--a-ink); }
.legal-date { margin: 0 0 6px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 14px; }
.card.narrow { max-width: 560px; }
.center { margin-inline: auto; }
.k-label, h2.k-label { margin: 0; font: 500 11.5px/1.3 var(--a-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink-3); }

/* ---------- cards and grids ---------- */
.card { margin: 14px 0; padding: 20px; border-radius: 18px; background: var(--a-card); border: 1px solid var(--a-line); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card p { color: var(--a-ink-2); }
/* ...but a message keeps its colour inside a card (the API tokens form's refusal, "Copy it now", an error page). */
.card p.error { color: var(--a-coral-2); }
.card p.ok { color: var(--a-mint); }
.card p.warning { color: var(--a-amber); }
.card h1 { margin-bottom: 12px; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 14px 0; }
.tiles .card { margin: 0; display: grid; gap: 8px; align-content: start; }
.tiles .card p { margin: 0; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.grid-2 .card { margin: 0; }
.kpi { font: 700 32px/1.05 var(--a-display); letter-spacing: -.035em; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.kpi small { font: 600 15px/1 var(--a-display); letter-spacing: -.01em; color: var(--a-ink-2); }
.kpi.dim { color: var(--a-ink-3); }
.card .kpi { color: var(--a-ink); }

/* ---------- the signed-in person ---------- */
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 14px; font-size: 14.5px; }
.account .who { font-weight: 600; color: var(--a-ink); }
.account .email { color: var(--a-ink-3); }
.avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--a-violet), var(--a-cyan)); color: var(--a-bg); font: 700 12px/1 var(--a-display); }

/* ---------- chips ---------- */
span.status { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px; font: 600 12px/1.35 var(--a-mono); white-space: nowrap; }
span.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-ok { color: var(--a-mint); background: rgba(67, 245, 184, .14); border: 1px solid rgba(67, 245, 184, .42); }
.s-wait { color: var(--a-amber); background: rgba(255, 209, 102, .14); border: 1px solid rgba(255, 209, 102, .42); }
.s-fail { color: var(--a-coral-2); background: rgba(255, 111, 97, .16); border: 1px solid rgba(255, 154, 138, .45); }
.s-info { color: var(--a-cyan); background: rgba(56, 217, 255, .12); border: 1px solid rgba(56, 217, 255, .42); }
.s-off { color: var(--a-ink-3); background: rgba(150, 175, 255, .08); border: 1px solid var(--a-line-2); }
.chip-plain { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(150, 175, 255, .3); background: rgba(150, 175, 255, .08); font: 600 12.5px/1.45 var(--a-mono); color: var(--a-ink-2); white-space: nowrap; }
.status-card { display: grid; gap: 8px; justify-items: start; }
.status-card h2, .status-card p { margin: 0; }

/* ---------- buttons ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 14px;
  font: 600 15px/1.15 var(--a-display); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; text-decoration: none;
  color: var(--a-bg); background-color: var(--a-mint);
  background-image: linear-gradient(100deg, var(--a-mint) 0%, var(--a-cyan) 40%, var(--a-sky) 70%, var(--a-mint) 100%);
  background-size: 220% 100%; background-position: 0% 50%;
  box-shadow: 0 0 0 1px rgba(143, 240, 255, .35), 0 10px 30px -12px rgba(56, 217, 255, .65);
  transition: transform .3s var(--a-ease), background-position .6s var(--a-ease), background-color .2s;
}
button.ghost, .button.ghost {
  background: var(--a-glass); border-color: rgba(190, 205, 255, .38); color: var(--a-ink); box-shadow: none;
}
button.danger, .button.danger {
  background: rgba(255, 111, 97, .1); border-color: rgba(255, 154, 138, .5); color: var(--a-coral-2); box-shadow: none;
}
button.small, .button.small { min-height: 34px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; }
@media (hover: hover) {
  button:hover, .button:hover { background-position: 100% 50%; transform: translateY(-1px); }
  button.ghost:hover, .button.ghost:hover { background: var(--a-glass-2); border-color: rgba(190, 205, 255, .6); transform: none; }
  button.danger:hover, .button.danger:hover { background: rgba(255, 111, 97, .18); transform: none; }
}
button:active, .button:active { transform: translateY(1px); }
/* The Google "G": the look's own drawing, no image. */
.g { position: relative; flex: none; display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; }
.g::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(#EA4335 0deg 42deg, rgba(255, 255, 255, 0) 42deg 90deg, #4285F4 90deg 140deg, #34A853 140deg 222deg, #FBBC05 222deg 292deg, #EA4335 292deg 360deg); -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) 56%, #000 58%); mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) 56%, #000 58%); }
.g::after { content: ""; position: absolute; left: 11px; right: 4px; top: 9.6px; height: 3px; background: #4285F4; }
.google { width: 100%; min-height: 48px; }
/* Sign out and Switch look like links, not actions. */
form.signout, form.switch { display: inline; margin: 0; }
form.signout button, form.switch button { min-height: 32px; padding: 4px 12px; border-radius: 999px; font: 500 13.5px/1 var(--a-body); color: var(--a-ink-2); background: var(--a-glass); border: 1px solid var(--a-line-2); box-shadow: none; }
form.switch button { background: transparent; border-color: transparent; color: var(--a-cyan); text-decoration: underline; text-underline-offset: 3px; padding-inline: 4px; }
@media (hover: hover) {
  form.signout button:hover { background: var(--a-glass-2); color: var(--a-ink); transform: none; }
  form.switch button:hover { background: transparent; transform: none; color: var(--a-ink); }
}

/* ---------- forms ---------- */
form { margin: 12px 0; }
label { display: block; margin: 14px 0 6px; font: 500 12px/1.3 var(--a-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink-3); }
input[type=password], input[type=text], textarea {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--a-ink); background: rgba(6, 10, 28, .7); border: 1px solid var(--a-line-2);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--a-ink-3); }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--a-focus); outline-offset: 1px; border-radius: 12px; }
input[inputmode=decimal], input[inputmode=numeric] { max-width: 12rem; }
input.code { font: 600 22px/1 var(--a-mono); letter-spacing: .35em; text-align: center; max-width: 16rem; }
form button[type=submit] { margin-top: 14px; }
form.signout button[type=submit], form.switch button[type=submit] { margin-top: 0; }
form.decide { display: flex; flex-wrap: wrap; gap: 10px; }
form.decide button { flex: 1 1 140px; }
form.remove button, .remove form button { margin-top: 10px; }
fieldset { margin: 14px 0; padding: 10px 14px 14px; border: 1px solid var(--a-line); border-radius: 14px; }
legend { padding: 0 6px; font: 600 15px/1.3 var(--a-display); color: var(--a-ink); }
fieldset label { display: inline-flex; align-items: center; gap: 8px; margin: 8px 12px 0 0; font: 400 15px/1.4 var(--a-body); letter-spacing: 0; text-transform: none; color: var(--a-ink-2); }
fieldset input[type=text] { display: inline-block; width: 8rem; min-height: 38px; margin: 8px 6px 0 0; }
input[type=radio] { accent-color: var(--a-mint); width: 18px; height: 18px; margin: 0; }

/* ---------- storage meter (a <meter>: no inline width needed) ---------- */
meter { display: block; width: 100%; height: 8px; margin: 4px 0; border: 0; border-radius: 6px; background: rgba(150, 175, 255, .16); -webkit-appearance: none; appearance: none; }
meter::-webkit-meter-bar { height: 8px; border: 0; border-radius: 6px; background: rgba(150, 175, 255, .16); }
meter::-webkit-meter-optimum-value { border-radius: 6px; background: linear-gradient(90deg, var(--a-mint), var(--a-cyan), var(--a-sky)); }
meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { border-radius: 6px; background: linear-gradient(90deg, var(--a-amber), var(--a-coral-2)); }
meter::-moz-meter-bar { border-radius: 6px; background: linear-gradient(90deg, var(--a-mint), var(--a-cyan), var(--a-sky)); }
meter:-moz-meter-sub-optimum::-moz-meter-bar, meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: linear-gradient(90deg, var(--a-amber), var(--a-coral-2)); }

/* ---------- checklist, steps, copy boxes ---------- */
.checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--a-ink); }
.checklist span.check { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--a-line-3); }
.checklist .done span.check { border-color: var(--a-mint); background: var(--a-mint); }
.checklist .done span.check::after { content: ""; display: block; width: 6px; height: 10px; margin: 2px 0 0 6px; border: solid var(--a-bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps-n { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: sn; }
.steps-n li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; font-size: 15px; color: var(--a-ink-2); counter-increment: sn; }
.steps-n li::before { content: counter(sn); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--a-line-2); font: 700 12px/1 var(--a-display); color: var(--a-ink); }
.steps-n b { color: var(--a-ink); }
.copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; padding: 8px 8px 8px 14px; border-radius: 12px; background: var(--a-sunk); border: 1px solid var(--a-line-2); }
.copy code { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; color: var(--a-ink); font-size: 13.5px; }
.copy button { flex: none; }

/* ---------- consent ---------- */
.consent h1 { font-size: clamp(22px, 3.4vw, 28px); }
.grants { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.grants li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(6, 10, 28, .45); border: 1px solid var(--a-line); font-size: 14.5px; color: var(--a-ink-2); }
.grants li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--a-mint); }
.client { color: var(--a-mint); font-weight: 700; }

/* ---------- admin (15.3) ---------- */
/* Wide tables scroll inside their box; position: relative keeps their hidden labels (.sr) in it too, so the page never widens. */
.tbl-wrap { position: relative; overflow-x: auto; margin: 14px 0; border-radius: 14px; border: 1px solid var(--a-line); background: rgba(6, 10, 28, .35); }
.admin-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.admin-table th { padding: 10px 12px; text-align: left; font: 500 11px/1.3 var(--a-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink-3); border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.admin-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid rgba(150, 175, 255, .1); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .who { font-weight: 600; }
.admin-table .email, .admin-table .uid, .mark { color: var(--a-ink-3); }
.admin-table .email, .admin-table .uid { display: block; }
.admin-table .same-email { display: block; font-size: 12.5px; }
.admin-table .note { max-width: 28rem; color: var(--a-ink-2); }
.admin-table .actions { white-space: nowrap; }
.admin-table td.status { font: 600 12.5px/1.6 var(--a-mono); color: var(--a-ink-2); }
.admin-table tr[data-status="approved"] td.status { color: var(--a-mint); }
.admin-table tr[data-status="pending"] td.status { color: var(--a-amber); }
.admin-table tr[data-status="rejected"] td.status, .admin-table tr[data-status="disabled"] td.status { color: var(--a-coral-2); }
.admin-table .actions form { display: inline-block; margin: 0 4px 4px 0; }
.admin-table .actions form button, .admin-table .actions .button { min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: 9px; }
.admin-table .actions form button[type=submit] { margin-top: 0; }
.action.reject button, .action.disable button { background: rgba(255, 111, 97, .1); border-color: rgba(255, 154, 138, .5); color: var(--a-coral-2); box-shadow: none; }
.action.end-sign-ins button { background: var(--a-glass); border-color: rgba(190, 205, 255, .38); color: var(--a-ink); box-shadow: none; }
.mark { font: 500 11px/1 var(--a-mono); letter-spacing: .06em; text-transform: uppercase; }
#log .event { font-family: var(--a-mono); font-size: 13px; color: var(--a-cyan); }
.consequence { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 209, 102, .42); background: rgba(255, 209, 102, .08); color: var(--a-ink-2); }
.qr { display: grid; place-items: center; width: max-content; max-width: 100%; margin: 12px auto; padding: 10px; border-radius: 14px; background: #FFFFFF; }
.qr svg { display: block; width: 220px; height: 220px; }
#totp-key { font-size: 15px; letter-spacing: .06em; color: var(--a-ink); }
#recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 12px 0; padding: 14px 14px 14px 36px; border-radius: 12px; background: var(--a-sunk); border: 1px dashed rgba(255, 209, 102, .45); }
#recovery-codes code { font: 600 14px/1.5 var(--a-mono); color: var(--a-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { #recovery-codes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Files: the gallery ---------- */
/* The landing's bento tiles (landing.css, "BENTO") for a person's own results: glass tiles with a thin ring that lights
   up as a gradient ring, a lift, a light sweep, a slight zoom and an info drawer, on hover or keyboard focus; on touch
   screens a "…" button opens the drawer. Thumbnails are the server's small WebP copies, never the files. */
[hidden] { display: none !important; } /* buttons and links set display; hidden must still win */
body[data-page="files"] main, body[data-page="log"] main { max-width: 1100px; }
body[data-page="files"] .foot, body[data-page="log"] .foot { max-width: 1100px; }
.empty h2 { margin-bottom: 6px; }
.pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 22px 0 14px; }
#files-note { margin: 0 0 14px; }

.files-head { align-items: flex-end; gap: 16px 28px; margin-bottom: 20px; }
.files-title { flex: 1 1 340px; min-width: 0; }
.files-title h1 { font-size: clamp(30px, 4.6vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.files-sub { max-width: 60ch; margin: 10px 0 0; font-size: 15.5px; color: var(--a-ink-2); }
.files-sub b { font-weight: 600; color: var(--a-ink); }
.storage-mini {
  position: relative; overflow: hidden; flex: 0 1 340px; display: grid; gap: 6px; padding: 14px 18px 14px;
  border-radius: 18px; background: var(--a-card); border: 1px solid var(--a-line);
}
.storage-mini::after { /* a small aurora glow in the corner, like the landing's credits card */
  content: ""; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(67, 245, 184, .2), rgba(67, 245, 184, 0));
}
.storage-mini > * { position: relative; z-index: 1; margin: 0; }
.storage-line { font: 700 24px/1.1 var(--a-display); letter-spacing: -.03em; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.storage-line small { font: 600 14px/1 var(--a-display); letter-spacing: -.005em; color: var(--a-ink-2); }
.storage-mini meter { margin: 4px 0 2px; }

/* The filters: one segmented glass pill, plain links (?type=), the current one lit like the nav's. */
/* Large counts on a narrow phone wrap to a second row rather than widen the page (23 px: a pill while it is one row). */
.filters { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; margin: 0 0 4px; padding: 4px; border-radius: 23px; background: rgba(6, 10, 28, .5); border: 1px solid rgba(190, 205, 255, .26); }
.filters a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 5px 7px 5px 14px; border-radius: 999px;
  color: var(--a-ink-2); font: 500 14.5px/1 var(--a-body); text-decoration: none; white-space: nowrap;
}
.filters .n { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(150, 175, 255, .12); font: 600 11.5px/1 var(--a-mono); color: var(--a-ink-2); font-variant-numeric: tabular-nums; }
.filters a[aria-current="page"] { background: rgba(67, 245, 184, .14); color: var(--a-mint); box-shadow: inset 0 0 0 1px rgba(67, 245, 184, .42); }
.filters a[aria-current="page"] .n { background: rgba(67, 245, 184, .2); color: var(--a-mint); }
@media (hover: hover) { .filters a:not([aria-current]):hover { background: var(--a-glass-2); color: var(--a-ink); } }
@media (max-width: 520px) {
  .filters { display: flex; }
  .filters a { flex: 1 1 auto; gap: 5px; padding: 5px 5px 5px 9px; font-size: 13.5px; }
  .filters .n { min-width: 20px; padding: 0 5px; }
}

.gallery-box { container: files / inline-size; }
.day { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; font: 600 15px/1.2 var(--a-display); letter-spacing: -.01em; color: var(--a-ink); }
.day::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(150, 175, 255, .34), rgba(150, 175, 255, 0)); }
.day-n { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--a-line); font: 600 11.5px/1.2 var(--a-mono); color: var(--a-ink-3); }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@container files (min-width: 520px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container files (min-width: 760px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@container files (min-width: 1000px) { .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }

/* A tile is one grid cell with its link (the picture), the drawer and the "…" button stacked in it. The drawer is not
   positioned (and has no transform once open), so the Delete confirm inside it covers the whole tile. */
.tile {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1 / 1; border-radius: 18px; background: #0E1538; box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .9);
  transform: translate3d(0, 0, 0);
  /* the lift eases; the glow shadow switches in one step, and the gradient ring fades in with opacity */
  transition: transform .5s var(--a-ease);
}
.tile > * { grid-area: 1 / 1; min-width: 0; }
.tile::before, .tile::after { /* a thin ring, then a glowing gradient ring */
  content: ""; position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.tile::before { background: rgba(170, 190, 255, .24); }
.tile::after { padding: 1.5px; opacity: 0; transition: opacity .4s var(--a-ease); background: linear-gradient(135deg, var(--a-mint), var(--a-cyan) 35%, var(--a-violet) 70%, var(--a-coral)); }
.tile-open { position: relative; display: block; overflow: hidden; border-radius: inherit; color: var(--a-ink); text-decoration: none; }
.tile-open:focus-visible { outline: none; } /* the tile shows it (below) */
.tile-img { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.1s var(--a-ease); }
.no-thumb .tile-img { display: none; }
.sweep {
  position: absolute; top: -10%; bottom: -10%; left: -10%; right: -10%; z-index: 2; pointer-events: none; display: block;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .26) 47%, rgba(143, 240, 255, .2) 53%, rgba(255, 255, 255, 0) 64%);
  transform: translate3d(-115%, 0, 0);
}

/* What a tile shows under its thumbnail, or instead of one: a picture's or a file's icon, a video's play mark, a
   sound's waveform, each on its own aurora colors, with the format (and how long it runs) in a chip. */
.tile-art { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(243, 246, 255, .78); transition: transform 1.1s var(--a-ease); }
.k-image .tile-art { background: radial-gradient(110% 80% at 15% 0%, rgba(67, 245, 184, .3), rgba(67, 245, 184, 0) 60%), radial-gradient(100% 90% at 100% 100%, rgba(56, 217, 255, .26), rgba(56, 217, 255, 0) 60%), #0E1538; }
.k-image:not(.no-thumb) .tile-art > svg, .k-image:not(.no-thumb) .art-tag { opacity: 0; } /* a quiet glow while the thumbnail loads */
.k-video .tile-art { background: radial-gradient(120% 90% at 0% 0%, rgba(56, 217, 255, .36), rgba(56, 217, 255, 0) 58%), radial-gradient(110% 90% at 100% 100%, rgba(157, 92, 255, .42), rgba(157, 92, 255, 0) 60%), linear-gradient(160deg, #13235A, #0A1030); }
.k-audio .tile-art { color: var(--a-pink); background: radial-gradient(120% 90% at 100% 0%, rgba(255, 154, 203, .3), rgba(255, 154, 203, 0) 58%), radial-gradient(110% 90% at 0% 100%, rgba(157, 92, 255, .42), rgba(157, 92, 255, 0) 60%), linear-gradient(160deg, #221A4F, #0C0F2E); }
.k-file .tile-art { background: radial-gradient(110% 80% at 50% 0%, rgba(143, 180, 255, .22), rgba(143, 180, 255, 0) 60%), #0E1538; }
.art-play {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: rgba(6, 10, 28, .55); border: 1px solid rgba(190, 205, 255, .5); box-shadow: 0 0 34px rgba(56, 217, 255, .4);
}
.art-play::after { content: ""; position: absolute; left: 23px; top: 18px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--a-ink); }
.wave { display: block; width: 74%; height: 36%; opacity: .92; }
.art-note { position: absolute; top: 12px; left: 12px; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(6, 10, 28, .5); border: 1px solid rgba(255, 154, 203, .45); }
.art-tag {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
  padding: 3px 9px; border-radius: 999px; background: rgba(6, 10, 28, .62); border: 1px solid rgba(190, 205, 255, .3);
  font: 600 11.5px/1.35 var(--a-mono); letter-spacing: .06em; color: var(--a-ink-2); white-space: nowrap;
}
.art-len { color: var(--a-cyan); letter-spacing: 0; }
.art-len::before { content: "·"; content: "·" / ""; margin-right: 6px; color: var(--a-ink-3); }
.k-audio .art-len { color: var(--a-pink); }

/* The drawer: the model, two lines of the prompt, size and days left, and the four actions. */
.info {
  z-index: 4; align-self: end; display: flex; flex-direction: column; gap: 6px; max-height: 100%; overflow: auto;
  padding: 11px 12px 12px; background: rgba(5, 8, 22, .9); border-top: 1px solid rgba(150, 175, 255, .24);
  opacity: 0; transform: translate3d(0, 101%, 0);
  transition: transform .45s var(--a-ease), opacity .3s var(--a-ease);
}
.info p { margin: 0; }
.info-top { display: flex; align-items: center; justify-content: space-between; gap: 6px 8px; min-width: 0; }
.chip-model {
  display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid rgba(67, 245, 184, .45); background: rgba(67, 245, 184, .14);
  font: 600 12px/1.4 var(--a-mono); color: var(--a-mint);
}
.chip-model::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; vertical-align: middle; border-radius: 50%; background: var(--a-mint); box-shadow: 0 0 8px rgba(67, 245, 184, .9); }
.chip-model:empty { display: none; }
.tile-prompt { font-size: 13.5px; line-height: 1.4; color: var(--a-ink); overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tile-prompt.none, .viewer-prompt.none { color: var(--a-ink-3); }
/* Size · days left: each item's "·" sits in the space to its left, and the strip that holds the "·" of an item starting
   a line is clipped away, so a line that wraps (a narrow tile, "deleted at the next cleanup") never starts with one. */
.info .info-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 0 -14px; clip-path: inset(0 0 0 14px); font: 500 11.5px/1.4 var(--a-mono); color: var(--a-ink-2); font-variant-numeric: tabular-nums; }
.info-meta > span { position: relative; margin-left: 14px; }
.info-meta > span::before { content: "·"; content: "·" / ""; position: absolute; left: -10px; color: var(--a-ink-3); }
.info-meta .soon { color: var(--a-amber); }
.tile-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 3px; }
.icon-btn, button.icon-btn {
  display: inline-grid; place-items: center; width: 100%; min-height: 34px; padding: 0; gap: 0; border-radius: 10px; cursor: pointer;
  background: var(--a-glass); border: 1px solid rgba(190, 205, 255, .3); color: var(--a-ink); box-shadow: none; text-decoration: none; list-style: none;
}
.icon-btn.danger { background: rgba(255, 111, 97, .08); border-color: rgba(255, 154, 138, .45); color: var(--a-coral-2); }
@media (hover: hover) {
  .icon-btn:hover, button.icon-btn:hover { background: var(--a-glass-2); border-color: rgba(190, 205, 255, .6); transform: none; }
  .icon-btn.danger:hover { background: rgba(255, 111, 97, .18); border-color: rgba(255, 154, 138, .7); }
}
.info :focus-visible { outline-offset: 1px; }
.copy-btn > svg:last-of-type, .copy-btn.is-copied > svg:first-of-type { display: none; }
.copy-btn.is-copied > svg:last-of-type { display: inline; color: var(--a-mint); }

/* Delete: a <details>; open, its form covers the tile and the summary becomes "Keep". */
.confirm-delete > summary { list-style: none; }
.confirm-delete > summary::-webkit-details-marker { display: none; }
.confirm-delete .when-open, .confirm-delete[open] .when-closed { display: none; }
.confirm-delete[open] .when-open { display: inline; }
.tile .confirm-delete { display: block; min-width: 0; }
.tile .confirm-delete > summary { height: 100%; }
.confirm-panel { margin: 0; }
.tile .confirm-panel {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px 12px 12px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255, 111, 97, .22), rgba(255, 111, 97, 0) 70%), #0B0A20;
}
.confirm-icon { display: none; }
.tile .confirm-icon {
  display: grid; place-items: center; align-self: center; margin-top: auto; width: 40px; height: 40px; border-radius: 50%; color: var(--a-coral-2);
  border: 1px solid rgba(255, 154, 138, .55); background: rgba(255, 111, 97, .14); box-shadow: 0 0 26px rgba(255, 111, 97, .35);
}
.tile .confirm-panel p { font-size: 13.5px; line-height: 1.4; color: var(--a-ink); text-align: center; overflow-wrap: anywhere; }
.tile .confirm-panel button[type=submit] { align-self: flex-start; width: calc(50% - 4px); min-height: 34px; margin: 0; padding: 6px 10px; }
.tile .confirm-delete[open] > summary {
  position: absolute; z-index: 9; right: 12px; bottom: 12px; width: calc(50% - 16px); height: auto; min-height: 34px; padding: 6px 10px;
  background: var(--a-glass-2); border-color: rgba(190, 205, 255, .5); color: var(--a-ink); font: 600 13.5px/1.15 var(--a-display);
}

/* Touch screens: the "…" button opens and closes the drawer (a <details>, so it works without JavaScript). */
.more { z-index: 6; display: none; align-self: start; justify-self: end; margin: 8px; }
.more > summary {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; list-style: none; cursor: pointer;
  background: rgba(6, 10, 28, .72); border: 1px solid rgba(190, 205, 255, .45); color: var(--a-ink);
}
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { background: var(--a-ink); color: var(--a-bg); border-color: var(--a-ink); }
@media (hover: none) {
  .more { display: block; }
  .info-top { padding-right: 38px; }
}

/* The open look: lift, glow, ring, zoom, sweep, drawer. Hover (on screens that have it) and keyboard focus inside
   the tile; the "…" button and an open confirm keep the drawer open. :has() rules stand alone, so a browser without
   it still reads the others (it gets the is-open class instead). */
.tile:has(.tile-open:focus-visible) { outline: 3px solid var(--a-focus); outline-offset: 3px; }
@media (hover: hover) {
  .tile:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 26px 50px -22px rgba(56, 217, 255, .6), 0 0 44px -10px rgba(157, 92, 255, .55); }
  .tile:hover::after { opacity: 1; }
  .tile:hover .tile-img, .tile:hover .tile-art { transform: scale(1.07); }
  .tile:hover .sweep { transform: translate3d(115%, 0, 0); transition: transform 1s var(--a-ease); }
  .tile:hover .info { opacity: 1; transform: none; }
  .tile:has(:focus-visible) { transform: translate3d(0, -6px, 0); box-shadow: 0 26px 50px -22px rgba(56, 217, 255, .6), 0 0 44px -10px rgba(157, 92, 255, .55); }
  .tile:has(:focus-visible) .tile-img { transform: scale(1.07); }
}
.tile:has(:focus-visible)::after { opacity: 1; }
.tile:has(:focus-visible) .info { opacity: 1; transform: none; }
.tile.is-open::after { opacity: 1; }
.tile.is-open .info { opacity: 1; transform: none; }
.tile:has(details[open])::after { opacity: 1; }
.tile:has(details[open]) .info { opacity: 1; transform: none; }
.tile:has(.confirm-delete[open]) .more { visibility: hidden; }
/* Without :has() (Firefox before 121): the link's own ring, and the drawer while focus is anywhere in the tile. */
@supports not selector(:has(*)) {
  .tile-open:focus-visible { outline: 3px solid var(--a-focus); outline-offset: -3px; }
  .tile:focus-within::after { opacity: 1; }
  .tile:focus-within .info { opacity: 1; transform: none; }
}

@container files (max-width: 519.98px) {
  .info { padding: 9px 9px 10px; gap: 5px; }
  .chip-model { font-size: 11px; padding: 1px 7px 1px 6px; }
  .tile-prompt { font-size: 12.5px; line-height: 1.36; }
  .tile-actions { gap: 5px; }
  .icon-btn, button.icon-btn { min-height: 32px; border-radius: 9px; }
  .tile .confirm-panel { padding: 10px 9px 9px; gap: 8px; }
  .tile .confirm-icon { width: 32px; height: 32px; }
  .tile .confirm-panel p { font-size: 12.5px; }
  .tile .confirm-panel button[type=submit] { width: calc(50% - 3px); padding: 6px; font-size: 13px; }
  .tile .confirm-delete[open] > summary { right: 9px; bottom: 9px; width: calc(50% - 12px); padding: 6px; font-size: 13px; }
}

/* The empty state: three tiles waiting for pictures. */
.empty-art { display: inline-flex; gap: 10px; margin: 6px 0 16px; }
.empty-art span { width: 52px; height: 52px; border-radius: 15px; border: 1px solid rgba(190, 205, 255, .3); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); }
.empty-art span:nth-child(1) { background: linear-gradient(135deg, rgba(67, 245, 184, .55), rgba(56, 217, 255, .25)); transform: rotate(-8deg) translateY(4px); }
.empty-art span:nth-child(2) { background: linear-gradient(135deg, rgba(56, 217, 255, .55), rgba(157, 92, 255, .35)); }
.empty-art span:nth-child(3) { background: linear-gradient(135deg, rgba(157, 92, 255, .55), rgba(255, 111, 97, .35)); transform: rotate(8deg) translateY(4px); }
#files-empty { padding: 34px 22px; text-align: center; }
#files-empty p { max-width: 54ch; margin-inline: auto; }

/* ---------- Log ---------- */
.log-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.log-table th { padding: 10px 12px; text-align: left; font: 500 11px/1.3 var(--a-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink-3); border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.log-table td { padding: 12px; vertical-align: top; border-bottom: 1px solid rgba(150, 175, 255, .1); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.log-table tr:last-child td { border-bottom: 0; }
.log-table .model { display: block; font: 600 13px/1.4 var(--a-mono); color: var(--a-cyan); overflow-wrap: anywhere; }
.log-table .via { display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-ink-3); }
.log-table td.input { min-width: 12rem; max-width: 24rem; }
.prompt-link { color: var(--a-ink-2); text-decoration-color: rgba(56, 217, 255, .55); overflow-wrap: anywhere; }
.prompt-link:hover, .prompt-link[aria-expanded="true"] { color: var(--a-ink); text-decoration-color: var(--a-cyan); }
.fail-msg { margin: 6px 0 0; color: var(--a-coral-2); font-size: 13px; overflow-wrap: anywhere; }
.log-table td.credits { white-space: nowrap; }
/* The prompt popup: placed by log.js next to its link, over the page. */
.prompt-pop { position: absolute; z-index: 30; top: 0; left: 0; width: min(30rem, calc(100vw - 24px)); border: 1px solid var(--a-line-2); border-radius: 14px; background: var(--a-surface); color: var(--a-ink); box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(6, 10, 28, .6); }
.prompt-pop:focus { outline: none; }
.prompt-pop:focus-visible { outline: 3px solid var(--a-focus); outline-offset: 2px; border-radius: 14px; }
.prompt-pop-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--a-line); }
.prompt-pop-head h2 { flex: 1 1 auto; margin: 0; font: 500 11.5px/1.3 var(--a-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink-3); }
.prompt-pop-text { margin: 0; padding: 12px 14px 14px; max-height: min(50vh, 20rem); overflow: auto; color: var(--a-ink-2); font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The input's other fields (the popup and the input's page): "key: value", the server's additions marked. */
.input-fields { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--a-ink-2); }
.input-fields li { overflow-wrap: anywhere; }
.input-fields .k { font: 600 12.5px/1.5 var(--a-mono); color: var(--a-sky); }
.input-fields .added { font: 500 11.5px/1.5 var(--a-mono); color: var(--a-amber); }
.prompt-pop-input { padding: 10px 14px 12px; border-top: 1px solid var(--a-line); }
.prompt-pop-input .input-fields { max-height: min(30vh, 12rem); overflow: auto; }
.prompt-pop-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.prompt-page .input-fields { margin: 6px 0 12px; }
.prompt-page h2.k-label { margin-top: 16px; }
/* Check, on a running task's row. */
form.check { display: inline-flex; margin: 0 0 0 8px; vertical-align: middle; }
form.check button[type=submit] { margin-top: 0; }
#log-note { margin: 0 0 12px; }
.prompt-page .prompt-model { font: 600 13px/1.4 var(--a-mono); color: var(--a-cyan); overflow-wrap: anywhere; }
.prompt-page .prompt-full { white-space: pre-wrap; overflow-wrap: anywhere; }
button.mini { min-height: 28px; padding: 3px 10px; border-radius: 8px; font-size: 12.5px; }
.result-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.result-open .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(67, 245, 184, .16); color: var(--a-mint); font: 600 11.5px/1 var(--a-mono); }
.result-more { display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; border-radius: 10px; border: 1px solid var(--a-line-2); font: 600 13px/1 var(--a-mono); text-decoration: none; }
.js-viewer .result-more { display: none; }
.result-open { gap: 8px; }
.result-thumb { flex: none; width: 26px; height: 26px; margin: -3px 0 -3px -5px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 1px rgba(190, 205, 255, .35); }

/* ---------- the viewer (Files and Log) ---------- */
/* A modal <dialog> in the landing's dashboard frame: a thin gradient ring around a night-blue box. The picture sits on
   a dark stage with round Previous and Next buttons; on the Files page the details and actions sit beside it (below
   it on narrow screens, where the viewer fills the screen). */
dialog.viewer {
  width: min(980px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 1px;
  border: 0; border-radius: 22px; color: var(--a-ink); overflow: hidden;
  background: linear-gradient(135deg, rgba(67, 245, 184, .6), rgba(56, 217, 255, .38) 30%, rgba(157, 92, 255, .38) 70%, rgba(255, 111, 97, .55));
  box-shadow: 0 40px 90px -36px rgba(56, 217, 255, .5), 0 30px 80px -20px rgba(0, 0, 0, .8);
}
dialog.viewer::backdrop { background: rgba(3, 6, 18, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.viewer-box { display: flex; flex-direction: column; max-height: calc(100vh - 26px); max-height: calc(100dvh - 26px); border-radius: 21px; background: #0A1030; overflow: hidden; }
.viewer-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid rgba(150, 175, 255, .16); background: rgba(255, 255, 255, .02); }
.viewer-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer-count { flex: none; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--a-line); font: 600 12px/1 var(--a-mono); color: var(--a-ink-2); font-variant-numeric: tabular-nums; }
.viewer-count:empty { display: none; }
.viewer-close { flex: none; gap: 6px; padding-left: 9px; }
.viewer-main { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.viewer-view { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }
.viewer-stage {
  flex: 1 1 auto; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-width: 0; min-height: 260px; padding: 16px; overflow: auto;
  background: radial-gradient(80% 60% at 50% 0%, rgba(59, 107, 255, .16), rgba(59, 107, 255, 0) 70%), radial-gradient(60% 50% at 50% 100%, rgba(157, 92, 255, .12), rgba(157, 92, 255, 0) 70%), #050818;
}
.viewer-stage img, .viewer-stage video { display: block; max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); object-fit: contain; border-radius: 12px; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9); }
.viewer-audio { display: grid; gap: 22px; justify-items: center; width: min(100%, 560px); color: var(--a-pink); }
.viewer-audio .wave { width: 100%; height: 120px; opacity: 1; }
.viewer-audio audio { width: 100%; }
.viewer-cant { display: grid; gap: 14px; justify-items: center; max-width: 100%; text-align: center; color: var(--a-ink-2); }
.viewer-cant p { margin: 0; }
.viewer-cant img { max-height: calc(100dvh - 260px); }
.viewer-step, button.viewer-step {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; min-height: 0; margin-top: -23px; padding: 0; border-radius: 50%;
  background: rgba(6, 10, 28, .66); border: 1px solid rgba(190, 205, 255, .42); color: var(--a-ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.viewer-step.prev { left: 12px; }
.viewer-step.next { right: 12px; }
@media (hover: hover) { button.viewer-step:hover { background: rgba(6, 10, 28, .88); border-color: var(--a-cyan); color: var(--a-cyan); transform: none; } }
.viewer-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(150, 175, 255, .16); }
.viewer-foot .button, .viewer-actions .button, .viewer-actions button { gap: 7px; }

/* The Files page's version: bigger, with the details beside the picture. */
dialog.viewer-files { width: min(1240px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); height: min(880px, calc(100dvh - 32px)); }
.viewer-files .viewer-box { height: 100%; max-height: none; }
.viewer-files .viewer-main { flex-direction: row; }
.viewer-files .viewer-stage img, .viewer-files .viewer-stage video { max-height: 100%; }
.viewer-info {
  flex: 0 0 360px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 18px 20px 20px;
  border-left: 1px solid rgba(150, 175, 255, .16); background: linear-gradient(180deg, rgba(26, 36, 86, .5), rgba(14, 21, 56, .5));
}
.viewer-info > * { margin: 0; }
.viewer-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-days.soon { border-color: rgba(255, 209, 102, .42); background: rgba(255, 209, 102, .1); color: var(--a-amber); } /* 3 days or fewer, like the tile */
.viewer-when { font: 500 13px/1.4 var(--a-mono); color: var(--a-ink-3); }
.viewer-info .k-label { margin-top: 6px; }
.viewer-prompt { font-size: 16px; line-height: 1.55; color: var(--a-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding-top: 14px; border-top: 1px solid rgba(150, 175, 255, .16); }
.viewer-meta .wide { grid-column: 1 / -1; }
.viewer-meta dt { font: 500 10.5px/1.3 var(--a-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink-3); }
.viewer-meta dd { margin: 4px 0 0; font-size: 14px; color: var(--a-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.viewer-meta dd.mono { font-size: 12.5px; color: var(--a-ink-2); }
.viewer-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 14px; }
.viewer-actions .confirm-delete[open] { flex-basis: 100%; }
.viewer-actions .confirm-delete[open] > summary { background: var(--a-glass); border-color: rgba(190, 205, 255, .38); color: var(--a-ink); }
.viewer-actions .confirm-delete[open] > summary > svg { display: none; }
.viewer-actions .confirm-panel { margin: 10px 0 0; padding: 12px; border-radius: 12px; border: 1px solid rgba(255, 154, 138, .45); background: rgba(255, 111, 97, .08); }
.viewer-actions .confirm-panel p { margin: 0 0 10px; font-size: 14px; color: var(--a-ink-2); overflow-wrap: anywhere; }
.viewer-actions .confirm-panel button[type=submit] { margin-top: 0; }

@media (max-width: 860px) {
  dialog.viewer-files { width: 100vw; height: 100vh; height: 100dvh; max-height: none; padding: 0; border-radius: 0; }
  .viewer-files .viewer-box { border-radius: 0; }
  .viewer-files .viewer-main { flex-direction: column; overflow: auto; }
  .viewer-files .viewer-view { flex: none; height: min(64vh, 110vw); height: min(64dvh, 110vw); }
  .viewer-files .viewer-stage { min-height: 0; padding: 10px; }
  .viewer-info { flex: none; overflow: visible; border-left: 0; border-top: 1px solid rgba(150, 175, 255, .16); padding: 16px 16px 22px; }
  .viewer-step, button.viewer-step { width: 40px; height: 40px; margin-top: -20px; }
  .viewer-step.prev { left: 8px; }
  .viewer-step.next { right: 8px; }
}
@media (max-width: 560px) {
  .viewer-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* still its name */
  .viewer-close { padding-inline: 9px; }
}

@media (max-width: 760px) {
  .log-wrap { overflow: visible; background: transparent; border: 0; }
  .log-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .log-table, .log-table tbody, .log-table tr, .log-table td { display: block; width: 100%; }
  .log-table tr { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-line); }
  .log-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; max-width: none; min-width: 0; padding: 6px 0; border: 0; }
  .log-table td::before { content: attr(data-label); padding-top: 2px; font: 500 10.5px/1.6 var(--a-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink-3); }
  .log-table td > * { grid-column: 2; justify-self: start; max-width: 100%; }
  /* "through Veo 3.1's own API" belongs to the model above it, not to a row of its own. */
  .log-table td > .via { margin-top: -8px; }
}

/* ---------- API tokens and Connected apps ---------- */
.token-fields { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 12rem); align-items: start; }
.token-fields label { margin-top: 10px; }
select {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--a-ink); background: rgba(6, 10, 28, .7); border: 1px solid var(--a-line-2);
}
select:focus-visible { outline: 3px solid var(--a-focus); outline-offset: 1px; border-radius: 12px; }
select option { color: var(--a-ink); background: var(--a-surface); }
#token-create p { margin: 8px 0 0; }
.token-new { border-color: rgba(67, 245, 184, .45); }
.token-new h2 { color: var(--a-mint); }
#token-value { font-size: 13.5px; }
#tokens .name { font-weight: 600; overflow-wrap: anywhere; }
#tokens .last4, #tokens td.created, #tokens td.last-used, #tokens td.expires, #connections td.connected, #connections td.last-used { white-space: nowrap; }
#tokens tr.expired td.expires { color: var(--a-coral-2); font-weight: 600; }
#connections .app { font-weight: 600; overflow-wrap: anywhere; }
#connections .returns { font-family: var(--a-mono); font-size: 13px; color: var(--a-ink-2); overflow-wrap: anywhere; }
button.danger.mini { min-height: 30px; }
#tokens .actions form, #connections .actions form { margin: 0; }
#tokens-note, #connections-note { margin: 0 0 12px; }
@media (max-width: 520px) { .token-fields { grid-template-columns: minmax(0, 1fr); } }
/* Phones: each token or app becomes a card of labelled lines (as the Log's rows do), so nothing needs a sideways
   scroll and the Revoke and Disconnect buttons stay in view. */
@media (max-width: 760px) {
  .cards-wrap { overflow: visible; background: transparent; border: 0; border-radius: 0; }
  .cards-table { min-width: 0; }
  .cards-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cards-table, .cards-table tbody, .cards-table tr, .cards-table td { display: block; width: 100%; }
  .cards-table tr { margin: 0 0 12px; padding: 10px 14px 12px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-line); }
  .cards-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; white-space: normal; }
  .cards-table td::before { content: attr(data-label); padding-top: 2px; font: 500 10.5px/1.6 var(--a-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--a-ink-3); }
  .cards-table td > * { grid-column: 2; justify-self: start; max-width: 100%; }
  .cards-table td.actions { display: block; padding-top: 8px; }
  .cards-table td.actions::before { content: none; }
}

/* ---------- Models (11.4) and the overview's defaults (11.5) ---------- */
body[data-page="models"] main { max-width: 1000px; }
.lead { color: var(--a-ink-2); margin: 0 0 4px; }
#catalog-checked { margin: 0 0 14px; }
.model-search { margin: 0 0 14px; }
.search-row { display: flex; gap: 8px; align-items: center; }
.search-row input { flex: 1 1 auto; min-width: 0; }
input[type=search] {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px;
  font: inherit; font-size: 15px; color: var(--a-ink); background: rgba(6, 10, 28, .7); border: 1px solid var(--a-line-2);
}
input[type=search]:focus-visible { outline: 3px solid var(--a-focus); outline-offset: 1px; border-radius: 12px; }
.type-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 8px; margin: 0 0 6px; }
.type-tabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--a-line); font-size: 14px; color: var(--a-ink-2); text-decoration: none; background: rgba(6, 10, 28, .35); }
.type-tabs a:hover { background: var(--a-glass); color: var(--a-ink); }
.type-tabs a[aria-current="page"], .type-tabs a[aria-selected="true"] { background: rgba(67, 245, 184, .14); color: var(--a-mint); border-color: rgba(67, 245, 184, .45); }
.type-tabs .count { font: 600 11.5px/1 var(--a-mono); color: var(--a-ink-3); }
.type-tabs a[aria-current="page"] .count, .type-tabs a[aria-selected="true"] .count { color: var(--a-mint); }
.blurb { color: var(--a-ink-2); margin: 8px 0 0; }
.defaults .def-head, .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 6px; }
.defaults .def-head h2, .card-head h2 { margin: 0; }
.def-form { display: grid; gap: 4px; margin: 8px 0 0; }
.def-form select.choice { max-width: 100%; }
.def-form button[type=submit] { justify-self: start; }
.pick-row { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pick label { margin-top: 6px; }
.def-price { margin: 8px 0 0; font-weight: 600; color: var(--a-ink); }
.card p.def-price { color: var(--a-ink); }
.def-extra { margin: 4px 0 0; }
.def-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.def-foot form { margin: 8px 0 0; }
.def-foot .saved { margin: 8px 0 0; }
.grp-count { margin: 18px 0 6px; }
/* minmax(0, 1fr): an open "Options and details" with a wide table must scroll inside its .tbl-wrap, not widen the
   grid (and every row of the list with it) past a phone's screen. */
ul.models { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mrow { min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-line); }
.mrow-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mname-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mname { font: 600 16px/1.3 var(--a-display); color: var(--a-ink); }
.prov { font-size: 13.5px; color: var(--a-ink-3); }
.well, .badge-new, .badge-own, .badge-off, .is-default, .is-service, .tag, .flag {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font: 600 11px/1.6 var(--a-mono); letter-spacing: .02em; white-space: nowrap;
  border: 1px solid var(--a-line-2); color: var(--a-ink-2); background: rgba(150, 175, 255, .08);
}
.well { color: var(--a-amber); border-color: rgba(255, 209, 102, .42); background: rgba(255, 209, 102, .1); }
.badge-new { color: var(--a-mint); border-color: rgba(67, 245, 184, .45); background: rgba(67, 245, 184, .12); }
/* An own-API setting that runs is violet like the row's "Own API" badge; coral only when its API is off (P10). */
.badge-own, .flag.own { color: var(--a-violet); border-color: rgba(157, 92, 255, .5); background: rgba(157, 92, 255, .12); }
.badge-off, .flag.own.off { color: var(--a-coral-2); border-color: rgba(255, 154, 138, .45); background: rgba(255, 111, 97, .1); }
.is-default { color: var(--a-bg); background: var(--a-mint); border-color: var(--a-mint); }
.is-service { color: var(--a-cyan); border-color: rgba(56, 217, 255, .42); background: rgba(56, 217, 255, .1); }
.flag.check, .flag.was { color: var(--a-amber); border-color: rgba(255, 209, 102, .42); background: rgba(255, 209, 102, .08); }
.mrow-b { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mprice { margin: 0; font-variant-numeric: tabular-nums; color: var(--a-ink-2); }
.card .mprice, .mrow p.mprice { color: var(--a-ink-2); }
.mact form { margin: 0; }
.mact form button[type=submit] { margin-top: 0; }
.price-changed { margin: 0; color: var(--a-amber); }
.mrow details { margin-top: 8px; }
.mrow summary { cursor: pointer; width: max-content; max-width: 100%; font-size: 14px; color: var(--a-cyan); }
.mdet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.mode-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; }
.mode-label { font-weight: 600; color: var(--a-ink); }
.mode-h code { font-size: 12.5px; color: var(--a-sky); }
.otbl-wrap { margin: 0; border-radius: 10px; }
.otbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.otbl th { padding: 7px 10px; text-align: left; font: 500 10.5px/1.3 var(--a-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a-ink-3); border-bottom: 1px solid var(--a-line); }
.otbl td { padding: 6px 10px; border-bottom: 1px solid rgba(150, 175, 255, .08); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.otbl tr:last-child td { border-bottom: 0; }
.otbl .n { text-align: right; white-space: nowrap; }
.otbl tr.x td { color: var(--a-ink-3); }
.mnote, .also, .mlinks { margin: 0; font-size: 13.5px; color: var(--a-ink-2); }
.also .chip-plain { margin-right: 4px; }
.mlinks { display: flex; flex-wrap: wrap; gap: 12px; }
.search-results { margin: 6px 0 14px; }
.search-note { color: var(--a-ink-2); }
ul.models .grp-h { margin: 12px 0 0; font: 500 11.5px/1.3 var(--a-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--a-ink-3); }
#chat-note { margin-top: 18px; }
.defsum { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; }
.defsum li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid rgba(150, 175, 255, .1); font-size: 14.5px; }
.defsum li:first-child { border-top: 0; }
.defsum .t { color: var(--a-ink-3); }
.defsum .m { color: var(--a-ink); font-weight: 600; overflow-wrap: anywhere; }
.defsum .p { color: var(--a-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.defsum .tag.mine { color: var(--a-mint); border-color: rgba(67, 245, 184, .45); }
@media (max-width: 640px) {
  .defsum li { grid-template-columns: minmax(0, 1fr); }
  .defsum .p { text-align: left; }
  /* phones: the ten types in one row that scrolls sideways */
  .type-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
}

/* ---------- admin Models (11.8) ---------- */
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 10px 0; font-size: 14.5px; }
.facts dt { color: var(--a-ink-3); }
.facts dd { margin: 0; color: var(--a-ink); overflow-wrap: anywhere; }
label.check-line { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 400 14.5px/1.4 var(--a-body); letter-spacing: 0; text-transform: none; color: var(--a-ink-2); }
input[type=checkbox] { accent-color: var(--a-mint); width: 18px; height: 18px; margin: 0; }
#review .detail, #changes .detail { max-width: 36rem; color: var(--a-ink-2); overflow-wrap: anywhere; }
.review-items { margin: 0; padding-left: 18px; }
#service-defaults .actions { min-width: 18rem; white-space: normal; }
#service-defaults form.service-default { display: grid; gap: 4px; margin: 0; }
#service-defaults form.service-default label { margin: 0; }
#service-defaults form.service-default button[type=submit] { margin-top: 6px; justify-self: start; min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: 9px; }
#changes .kind { white-space: nowrap; font-family: var(--a-mono); font-size: 12.5px; color: var(--a-cyan); }
#changes .when { white-space: nowrap; }
@media (max-width: 640px) { .facts { grid-template-columns: minmax(0, 1fr); } .facts dd { margin-bottom: 6px; } }
/* Phones: the three tables are cards of labelled lines (.cards-table above), so the service-default pickers stay in view. */
@media (max-width: 760px) {
  #service-defaults .actions { min-width: 0; }
  #review .detail, #changes .detail { max-width: none; }
  #review td.title { font-weight: 600; }
}

/* ---------- narrower screens: the nav (nine places with Sign out) no longer fits beside the brand, so it gets its own
   row, which scrolls sideways where even that is too narrow ---------- */
@media (max-width: 1160px) {
  body:not(.admin) .bar { border-radius: 22px; }
  .nav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; }
}
/* ---------- phones ---------- */
@media (max-width: 640px) {
  .bar { border-radius: 22px; padding: 6px 8px 8px 12px; }
  body.admin .bar-end { width: 100%; justify-content: space-between; }
}

/* ---------- motion: none when people ask for none ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  button:hover, .button:hover { transform: none; }
  /* the gallery: the ring, glow and drawer still show; nothing lifts, zooms or sweeps */
  .tile, .tile:hover, .tile-img, .tile-art, .tile:hover .tile-img, .tile:hover .tile-art { transform: none; }
  .tile:has(:focus-visible), .tile:has(:focus-visible) .tile-img { transform: none; }
  .sweep { display: none; }
}