@volter/editor-core 0.5.57

package/src/components/product-shell.css

@@ -0,0 +1,1829 @@
+/* ------------------------------------------------------------------------- *
+ * Product shell — the shared visual language for every NON-editor surface:
+ * the startup splash, the project screen (home / new-project / error), and
+ * the account document. The editor's dense chrome scale (11px base) is right
+ * for panels but not for product pages; this file layers a roomier product
+ * rhythm on top of the SAME runtime theme variables, so custom themes and
+ * the high-contrast theme keep working everywhere.
+ *
+ * Every rule here is confined to these surfaces one of two ways: generic
+ * class names (`.vgai-chip`, `.vgai-meter`, …) are anchored under a scope
+ * class (`.vgai-shell` / `.vgai-splash` / `.vgai-account`), and everything
+ * else uses class names in the reserved `.vgai-shell-*` / `.vgai-splash-*` /
+ * `.vgai-account-*` namespace, which only product-surface markup may use.
+ * Either way, no rule can leak into editor panels or game worlds.
+ * ------------------------------------------------------------------------- */
+
+.vgai-shell,
+.vgai-splash,
+.vgai-account {
+  /* Product-scale tokens (derived from, not replacing, the theme tokens). */
+  --vgai-shell-radius: 12px;
+  --vgai-shell-radius-sm: 8px;
+  --vgai-shell-font-xs: 11px;
+  --vgai-shell-font-sm: 12px;
+  --vgai-shell-font-base: 13px;
+  --vgai-shell-font-md: 14px;
+  --vgai-shell-font-lg: 16px;
+  --vgai-shell-font-xl: 20px;
+  /* §1-R cinematic hero title: 36px/650, tight tracking. */
+  --vgai-shell-font-display: 36px;
+  --vgai-shell-line: 1.55;
+  --vgai-shell-card-highlight: inset 0 1px 0 rgb(255 255 255 / 5%);
+  --vgai-shell-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Page scaffold                                                              */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  color: var(--vgai-content-primary);
+  /* §1-R cinematic canvas: near-black, DERIVED from the theme shell tone so
+   * custom themes keep steering the hue while the product surface stays in
+   * the moody #0b0d10 band (Epic launcher canvas, darker than pass 2). */
+  background: color-mix(in srgb, var(--vgai-surface-shell) 42%, black);
+  font-size: var(--vgai-shell-font-base);
+  line-height: var(--vgai-shell-line);
+  pointer-events: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Cinematic backdrop (§1-R): accent-tinted radial KEY LIGHT top-center over
+ * the content area, a faint cool counter-bloom, and an edge VIGNETTE — the
+ * canvas reads as a lit stage, not a flat grey page. */
+.vgai-shell::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(
+      1150px 640px at 50% -16%,
+      color-mix(in srgb, var(--vgai-accent) 22%, transparent),
+      transparent 62%
+    ),
+    radial-gradient(720px 420px at 50% -4%, rgb(255 255 255 / 5%), transparent 58%),
+    radial-gradient(
+      900px 560px at -12% 112%,
+      color-mix(in srgb, var(--vgai-accent) 5%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(135% 105% at 50% 40%, transparent 50%, rgb(0 0 0 / 50%) 100%);
+  pointer-events: none;
+}
+
+/* Faint dot grid, fading below the key light. */
+.vgai-shell::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: radial-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px);
+  background-size: 26px 26px;
+  mask-image: linear-gradient(180deg, rgb(0 0 0 / 65%), transparent 52%);
+  pointer-events: none;
+}
+
+.vgai-shell-container {
+  position: relative;
+  z-index: var(--vgai-z-base);
+  width: 100%;
+  /* Content column per spec: ~1040–1120px, centered (border-box, so the
+   * 40px side padding leaves a 1040px content column). */
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 40px 96px;
+  box-sizing: border-box;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Header                                                                     */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vgai-space-8);
+  min-height: 72px;
+  margin-bottom: 40px;
+}
+
+.vgai-shell .vgai-btn.vgai-shell-brand {
+  display: inline-flex;
+  height: auto;
+  align-items: center;
+  gap: var(--vgai-space-5);
+  padding: var(--vgai-space-2) var(--vgai-space-3);
+  margin-left: -6px;
+}
+
+.vgai-shell-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+}
+
+.vgai-shell-wordmark {
+  color: var(--vgai-content-primary);
+  font-size: 15px;
+  font-weight: var(--vgai-font-weight-bold);
+  letter-spacing: 0.22em;
+}
+
+.vgai-shell-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-4);
+}
+
+/* Account pill in the header. */
+.vgai-shell .vgai-btn.vgai-shell-account-pill {
+  height: 32px;
+  padding: 0 14px;
+  border-radius: var(--vgai-radius-full);
+  font-size: var(--vgai-shell-font-sm);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Hero                                                                       */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell-hero {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--vgai-space-10);
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+}
+
+/* §1-R: large cinematic title over the key light — 36px/650, tight tracking,
+ * with a whisper of top light caught in the glyphs. */
+.vgai-shell-hero-heading {
+  margin: 0;
+  font-size: var(--vgai-shell-font-display);
+  font-weight: 650;
+  letter-spacing: -0.03em;
+  line-height: var(--vgai-leading-snug);
+  color: #fff;
+  text-shadow: 0 2px 24px color-mix(in srgb, var(--vgai-accent) 24%, transparent);
+}
+
+.vgai-shell-hero-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-5);
+}
+
+/* Version / metadata chip (used on both the project shell and the account
+ * document, so it is anchored under both scopes). */
+.vgai-shell .vgai-chip,
+.vgai-account .vgai-chip {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: var(--vgai-space-3);
+  height: 22px;
+  padding: 0 var(--vgai-space-5);
+  color: var(--vgai-content-muted);
+  background: var(--vgai-surface-inset);
+  border: 1px solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-radius-full);
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-shell-font-xs);
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+/* Technical/monospace labels (version strings, kbd hints, file badges) are
+ * TAGS — small rounded rectangles — never pills. Monospace text inside a
+ * full capsule reads as a database-cylinder icon; Vercel/GitHub render
+ * technical tags as small rounded rects. */
+.vgai-shell .vgai-chip[data-variant="tag"],
+.vgai-account .vgai-chip[data-variant="tag"] {
+  padding: 0 7px;
+  border-radius: var(--vgai-radius-sm);
+}
+
+.vgai-shell .vgai-chip[data-tone="accent"],
+.vgai-account .vgai-chip[data-tone="accent"] {
+  color: var(--vgai-accent);
+  background: var(--vgai-accent-muted);
+  border-color: transparent;
+}
+
+.vgai-shell .vgai-chip[data-tone="success"],
+.vgai-account .vgai-chip[data-tone="success"] {
+  color: var(--vgai-success);
+  background: var(--vgai-success-muted);
+  border-color: transparent;
+}
+
+.vgai-shell .vgai-chip[data-tone="warn"],
+.vgai-account .vgai-chip[data-tone="warn"] {
+  color: var(--vgai-warn);
+  background: var(--vgai-warn-muted);
+  border-color: transparent;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Hero-scale buttons (className extensions of the canonical .vgai-btn)      */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell .vgai-btn.vgai-shell-cta {
+  height: 32px;
+  padding: 0 14px;
+  border-radius: var(--vgai-shell-radius-sm);
+  font-size: var(--vgai-shell-font-base);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+/* Primary actions carry the cinematic hero-CTA material at every size —
+ * saturated accent, specular top light, real DARK elevation shadow (never a
+ * color glow: spec §"Shared language" rule 2 still bans the dated blue button
+ * bloom). Same recipe as the account primaries, so Create Project / Retry /
+ * Reopen read as one confident button system across the shell. */
+.vgai-shell .vgai-btn[data-variant="primary"],
+.vgai-account .vgai-btn[data-variant="primary"] {
+  color: #fff;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 52%),
+    color-mix(in srgb, var(--vgai-accent) 76%, #1d4ed8);
+  border: 1px solid color-mix(in srgb, var(--vgai-accent) 74%, white 8%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 22%),
+    0 1px 2px rgb(0 0 0 / 40%),
+    0 6px 16px rgb(0 0 0 / 32%);
+}
+
+.vgai-shell .vgai-btn[data-variant="primary"]:hover:not(:disabled),
+.vgai-account .vgai-btn[data-variant="primary"]:hover:not(:disabled) {
+  filter: brightness(1.09);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 32%),
+    0 2px 4px rgb(0 0 0 / 42%),
+    0 8px 22px rgb(0 0 0 / 42%);
+}
+
+/* §1-R hero CTA scale: ONE saturated primary with a specular top light + a
+ * real elevation shadow (dark, not a color glow), beside a ghost "Open". */
+.vgai-shell .vgai-btn.vgai-shell-cta-hero {
+  height: 38px;
+  padding: 0 18px;
+  gap: var(--vgai-space-4);
+  border-radius: 9px;
+  font-size: var(--vgai-font-lg);
+}
+
+.vgai-shell .vgai-btn.vgai-shell-cta-hero[data-variant="primary"] {
+  color: #fff;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 52%),
+    color-mix(in srgb, var(--vgai-accent) 76%, #1d4ed8);
+  border: 1px solid color-mix(in srgb, var(--vgai-accent) 74%, white 8%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 22%),
+    0 1px 2px rgb(0 0 0 / 45%),
+    0 8px 20px rgb(0 0 0 / 40%);
+}
+
+.vgai-shell .vgai-btn.vgai-shell-cta-hero[data-variant="primary"]:hover:not(:disabled) {
+  filter: brightness(1.09);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 32%),
+    0 2px 4px rgb(0 0 0 / 45%),
+    0 12px 28px rgb(0 0 0 / 50%);
+}
+
+/* Product-scale focus ring: 2px accent, offset 2 (spec §"Shared language"
+ * rule 6) — the editor chrome's 1px ring is too faint at page scale. */
+.vgai-shell .vgai-btn:focus-visible,
+.vgai-shell .vgai-input:focus-visible,
+.vgai-shell .vgai-select:focus-visible,
+.vgai-account .vgai-btn:focus-visible,
+.vgai-account .vgai-input:focus-visible,
+.vgai-account .vgai-select:focus-visible {
+  outline: var(--vgai-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Quiet ghost CTA needs a legible resting state at product scale. */
+.vgai-shell .vgai-btn.vgai-shell-cta[data-variant="ghost"] {
+  color: var(--vgai-content-muted);
+}
+
+.vgai-shell .vgai-btn.vgai-shell-cta[data-variant="ghost"]:hover:not(:disabled) {
+  color: var(--vgai-content-primary);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Cards + sections                                                           */
+/* ------------------------------------------------------------------------- */
+
+/* Elevated panel on the lit canvas — the hub/account material: a step
+ * lighter than the near-black stage, a soft top light caught along the upper
+ * edge, and a REAL elevation shadow (same recipe as .vgai-account-card, so
+ * the wizard and the sign-in card read as one panel system). */
+.vgai-shell-card {
+  position: relative;
+  padding: 28px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%) 44%),
+    color-mix(in srgb, white 3%, var(--vgai-surface-panel));
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: var(--vgai-shell-radius);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 8%),
+    0 1px 2px rgb(0 0 0 / 45%),
+    0 20px 48px rgb(0 0 0 / 46%);
+  box-sizing: border-box;
+}
+
+.vgai-shell-section {
+  margin-bottom: 36px;
+}
+
+.vgai-shell-section-label {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-4);
+  margin-bottom: 14px;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.vgai-shell-section-label::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, var(--vgai-boundary-default), transparent);
+}
+
+/* Circle at one digit, pill past it: fixed height, min-width equal to the
+ * height, and border-box sizing so the horizontal padding only widens the
+ * badge once the content outgrows the 18px circle. */
+.vgai-shell-count {
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  color: var(--vgai-content-muted);
+  background: var(--vgai-surface-raised);
+  border-radius: var(--vgai-radius-full);
+  font-size: var(--vgai-font-sm);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0;
+  box-sizing: border-box;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Empty state                                                                */
+/* ------------------------------------------------------------------------- */
+
+/* §1-R: NO boxed panel — the key-lit canvas itself is the empty state. A
+ * key-lit angular mark floats over the stage, one line, two CTAs. */
+.vgai-shell-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--vgai-space-4);
+  padding: 72px 32px 64px;
+  text-align: center;
+}
+
+/* The mark sits IN the key light: local accent bloom + a soft ground shadow
+ * below it so it reads as an object on the stage, not a pasted icon. */
+.vgai-shell-empty-mark {
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+}
+
+.vgai-shell-empty-mark::before {
+  content: "";
+  position: absolute;
+  inset: -46px;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--vgai-accent) 22%, transparent),
+    transparent 74%
+  );
+  border-radius: var(--vgai-radius-full);
+  pointer-events: none;
+}
+
+.vgai-shell-empty-mark::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  width: 96px;
+  height: 18px;
+  background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent 75%);
+  border-radius: var(--vgai-radius-full);
+  pointer-events: none;
+}
+
+.vgai-shell-empty-title {
+  margin: 14px 0 0;
+  color: var(--vgai-content-primary);
+  font-size: 22px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.vgai-shell-empty-actions {
+  display: flex;
+  gap: var(--vgai-space-5);
+  margin-top: 18px;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Page footer — the version corner tag (§1-R)                                */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 72px;
+}
+
+.vgai-shell-footer .vgai-chip {
+  height: 20px;
+  padding: 0 7px;
+  color: color-mix(in srgb, var(--vgai-content-dim) 72%, transparent);
+  background: rgb(255 255 255 / 3%);
+  border-color: rgb(255 255 255 / 7%);
+  font-size: var(--vgai-font-sm);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Notices (info strip, e.g. browser/OPFS storage note)                       */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell-notice {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-6);
+  padding: var(--vgai-space-6) var(--vgai-space-8);
+  margin-bottom: var(--vgai-space-12);
+  color: var(--vgai-content-muted);
+  background: var(--vgai-accent-muted);
+  border: 1px solid color-mix(in srgb, var(--vgai-accent) 18%, transparent);
+  border-radius: var(--vgai-shell-radius-sm);
+  font-size: var(--vgai-shell-font-sm);
+}
+
+.vgai-shell-notice-icon {
+  color: var(--vgai-accent);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Error card (startup failures and inline action errors)                     */
+/* ------------------------------------------------------------------------- */
+
+/* The alert sits ON the lit stage as an elevated panel — same material as
+ * .vgai-shell-card but with the top light tinted toward the danger hue, so
+ * failure still reads cinematic, not bureaucratic. */
+.vgai-shell .vgai-error-card {
+  display: flex;
+  gap: var(--vgai-space-8);
+  align-items: flex-start;
+  padding: 22px 24px;
+  margin-bottom: 28px;
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--vgai-danger) 7%, rgb(255 255 255 / 3%)),
+      rgb(255 255 255 / 0%) 46%
+    ),
+    color-mix(in srgb, white 3%, var(--vgai-surface-panel));
+  border: 1px solid color-mix(in srgb, var(--vgai-danger) 28%, rgb(255 255 255 / 8%));
+  border-radius: var(--vgai-shell-radius);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--vgai-danger) 20%, rgb(255 255 255 / 8%)),
+    0 1px 2px rgb(0 0 0 / 45%),
+    0 20px 48px rgb(0 0 0 / 46%);
+}
+
+/* Startup failure page: the canvas key light itself shifts to a red-tinted
+ * key (the page is "lit for the scene"), vignette intact. Attribute-scoped so
+ * only the dedicated error surface re-lights — inline action errors on the
+ * hub keep the accent key light behind the grid. */
+/* Startup failure is a composed hero moment, not a full-bleed banner: the
+ * alert holds a centered ~880px column under the red key light. Inline action
+ * errors (hub view) keep the content column's full width above the grid. */
+.vgai-shell[data-testid="project-detection-error"] .vgai-error-card {
+  max-width: 880px;
+  margin-inline: auto;
+}
+
+/* The startup-failure page has no hub to navigate back to yet, so its brand is
+ * a static mark rather than the header BUTTON the hub renders — it still needs
+ * the brand row's layout. */
+.vgai-shell .vgai-shell-brand-static {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vgai-space-5);
+}
+
+/* Everything on the failure page belongs to the SAME centered column the alert
+ * holds — the served-project note and the way out, not just the card. */
+.vgai-shell[data-testid="project-detection-error"] .vgai-shell-notice,
+.vgai-shell[data-testid="project-detection-error"] .vgai-startup-error-actions {
+  max-width: 880px;
+  margin-inline: auto;
+}
+
+.vgai-shell[data-testid="project-detection-error"]::before {
+  background:
+    radial-gradient(
+      1150px 640px at 50% -16%,
+      color-mix(in srgb, var(--vgai-danger) 15%, transparent),
+      transparent 62%
+    ),
+    radial-gradient(720px 420px at 50% -4%, rgb(255 255 255 / 4%), transparent 58%),
+    radial-gradient(
+      900px 560px at -12% 112%,
+      color-mix(in srgb, var(--vgai-danger) 4%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(135% 105% at 50% 40%, transparent 50%, rgb(0 0 0 / 52%) 100%);
+}
+
+/* Warning glyph in a red-tinted ROUNDED-SQUARE tile (GitHub/Vercel alert
+ * anatomy) — a circle here reads as a status dot, not a container. */
+.vgai-shell .vgai-error-card-icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 34px;
+  height: 34px;
+  margin-top: var(--vgai-space-1);
+  color: var(--vgai-danger);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 55%), var(--vgai-danger-muted);
+  border: 1px solid color-mix(in srgb, var(--vgai-danger) 34%, transparent);
+  border-radius: var(--vgai-shell-radius-sm);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--vgai-danger) 22%, transparent);
+  font-size: var(--vgai-shell-font-base);
+  box-sizing: border-box;
+}
+
+.vgai-shell .vgai-error-card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.vgai-shell .vgai-error-card-title {
+  margin: 0 0 var(--vgai-space-2);
+  color: var(--vgai-content-primary);
+  font-size: 15px;
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: -0.01em;
+  line-height: var(--vgai-leading-normal);
+}
+
+.vgai-shell .vgai-error-card-guidance {
+  margin: 0 0 var(--vgai-space-4);
+  color: var(--vgai-content-muted);
+  font-size: var(--vgai-shell-font-base);
+}
+
+/* Monospace detail on a darker inset, scrollable past ~9 lines so a long
+ * stack trace can never push the actions off-screen. */
+.vgai-shell .vgai-error-card-message {
+  max-height: 176px;
+  padding: var(--vgai-space-5) var(--vgai-space-6);
+  overflow: auto;
+  color: var(--vgai-danger);
+  background: color-mix(in srgb, black 30%, var(--vgai-surface-inset));
+  border: 1px solid var(--vgai-boundary-default);
+  border-radius: var(--vgai-shell-radius-sm);
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-shell-font-sm);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.vgai-shell .vgai-error-card-recovery-label {
+  margin: 14px 0 6px;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.vgai-shell .vgai-error-card-command {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-4);
+  padding: 8px 8px 8px 14px;
+  background: var(--vgai-surface-inset);
+  border: 1px solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-shell-radius-sm);
+}
+
+.vgai-shell .vgai-error-card-command > code {
+  flex: 1;
+  color: var(--vgai-content-primary);
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-shell-font-sm);
+  overflow-wrap: anywhere;
+}
+
+.vgai-shell .vgai-error-card-actions {
+  display: flex;
+  gap: var(--vgai-space-5);
+  margin-top: 14px;
+}
+
+/* ------------------------------------------------------------------------- */
+/* Startup splash                                                             */
+/* ------------------------------------------------------------------------- */
+
+/* Boot is a cinematic moment matching the hub empty state: the same
+ * near-black key-lit canvas, the angular mark blooming IN the key light over a
+ * ground shadow, a tracked wordmark, one glowing accent progress line, ONE
+ * status line. */
+.vgai-splash {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: color-mix(in srgb, var(--vgai-surface-shell) 42%, black);
+  color: var(--vgai-content-primary);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+/* Key light centered ON the mark (not top-of-page: the splash's subject sits
+ * mid-frame), soft white core, edge vignette. */
+.vgai-splash::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(
+      1000px 640px at 50% 34%,
+      color-mix(in srgb, var(--vgai-accent) 18%, transparent),
+      transparent 62%
+    ),
+    radial-gradient(520px 340px at 50% 40%, rgb(255 255 255 / 5%), transparent 60%),
+    radial-gradient(135% 105% at 50% 45%, transparent 48%, rgb(0 0 0 / 55%) 100%);
+  pointer-events: none;
+}
+
+/* Faint dot grid fading out under the key light — same fabric as the hub. */
+.vgai-splash::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px);
+  background-size: 26px 26px;
+  mask-image: radial-gradient(640px 420px at 50% 40%, rgb(0 0 0 / 80%), transparent 78%);
+  pointer-events: none;
+}
+
+.vgai-splash-stack {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--vgai-space-8);
+  min-width: 260px;
+  animation: vgai-shell-rise 600ms var(--vgai-shell-var(--vgai-ease-standard)) both;
+}
+
+.vgai-splash-logo {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 72px;
+  height: 72px;
+  margin-bottom: var(--vgai-space-3);
+}
+
+/* Accent bloom around the mark + soft ground shadow beneath it — the same
+ * object-on-a-stage treatment as the hub empty state's mark. */
+.vgai-splash-logo::before {
+  content: "";
+  position: absolute;
+  inset: -42px;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--vgai-accent) 24%, transparent),
+    transparent 74%
+  );
+  border-radius: var(--vgai-radius-full);
+}
+
+.vgai-splash-logo::after {
+  content: "";
+  position: absolute;
+  bottom: -12px;
+  width: 84px;
+  height: 16px;
+  background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent 75%);
+  border-radius: var(--vgai-radius-full);
+}
+
+/* Tracked wordmark — catches a whisper of the key light, like the hub title. */
+.vgai-splash-title {
+  color: rgb(255 255 255 / 88%);
+  font-size: var(--vgai-font-xl);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0.3em;
+  text-indent: 0.3em; /* recenters tracked uppercase (trailing tracking) */
+  text-transform: uppercase;
+  text-shadow: 0 1px 18px color-mix(in srgb, var(--vgai-accent) 30%, transparent);
+}
+
+/* Thin accent sweep with a subtle ambient glow — progress is STATE, the one
+ * place the accent may bloom (same doctrine as the account meter). The glow
+ * lives on the track (the sweep is clipped by overflow, so a shadow on the
+ * bar itself would be cropped to the 2px line). */
+.vgai-splash-progress {
+  position: relative;
+  width: 232px;
+  height: 3px;
+  margin-top: var(--vgai-space-3);
+  overflow: hidden;
+  background: color-mix(in srgb, var(--vgai-accent) 14%, rgb(255 255 255 / 5%));
+  border-radius: var(--vgai-radius-full);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--vgai-accent) 38%, transparent);
+}
+
+.vgai-splash-progress::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 52%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--vgai-accent) 80%, white),
+    transparent
+  );
+  border-radius: inherit;
+  animation: vgai-splash-sweep 1.4s ease-in-out infinite;
+}
+
+.vgai-splash-status {
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+  letter-spacing: 0.01em;
+}
+
+/* The patient-wait explanation under the status line: quieter than the status
+   itself, and narrow enough to read as a sentence rather than a banner. */
+.vgai-splash-note {
+  max-width: 42ch;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs, var(--vgai-shell-font-sm));
+  line-height: var(--vgai-leading-relaxed);
+  text-align: center;
+  opacity: 0.8;
+}
+
+@keyframes vgai-splash-sweep {
+  from {
+    transform: translateX(-110%);
+  }
+
+  to {
+    transform: translateX(360%);
+  }
+}
+
+/* ------------------------------------------------------------------------- */
+/* Entrance motion                                                            */
+/* ------------------------------------------------------------------------- */
+
+.vgai-shell-rise {
+  animation: vgai-shell-rise 480ms var(--vgai-shell-var(--vgai-ease-standard)) both;
+}
+
+.vgai-shell-rise[data-rise="2"] {
+  animation-delay: 60ms;
+}
+
+.vgai-shell-rise[data-rise="3"] {
+  animation-delay: 120ms;
+}
+
+.vgai-shell-rise[data-rise="4"] {
+  animation-delay: 180ms;
+}
+
+@keyframes vgai-shell-rise {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ------------------------------------------------------------------------- */
+/* Account page                                                                */
+/* ------------------------------------------------------------------------- */
+
+.vgai-account {
+  font-size: var(--vgai-shell-font-base);
+  line-height: var(--vgai-shell-line);
+}
+
+/* When the account document is hosted inside the editor workspace it needs
+ * its own scroll + centering AND its own cinematic canvas — the same key-lit
+ * near-black stage the shell paints (key light, counter-bloom, vignette),
+ * carried in the background stack because a dock panel cannot host the
+ * shell's fixed-position pseudo layers. Inside the product shell the shell
+ * provides all of it, so the nested rule strips this back off. */
+.vgai-account {
+  height: 100%;
+  padding: 32px 40px 64px;
+  overflow: auto;
+  box-sizing: border-box;
+  color: var(--vgai-content-primary);
+  background:
+    radial-gradient(
+      1000px 560px at 50% -10%,
+      color-mix(in srgb, var(--vgai-accent) 20%, transparent),
+      transparent 62%
+    ),
+    radial-gradient(640px 380px at 50% -2%, rgb(255 255 255 / 5%), transparent 58%),
+    radial-gradient(135% 105% at 50% 40%, transparent 50%, rgb(0 0 0 / 45%) 100%),
+    color-mix(in srgb, var(--vgai-surface-shell) 42%, black);
+}
+
+.vgai-shell .vgai-account {
+  height: auto;
+  padding: 0;
+  overflow: visible;
+  background: none;
+}
+
+/* U6.5 F13 — Regular backing for the WORKSPACE-hosted account document.
+ * Under islands+floating the center document renders over the live scene
+ * with transparent interiors, so the sign-in page's text sat directly on
+ * the game (audit shot 16: white-on-white sign-in). A text-heavy CONTENT
+ * surface gets the Regular-material floor (owner adjudication: keep the
+ * frost, floor the interiors — same family as .vgai-menu / the F3 tray
+ * popout): the self-sufficient regular bg + strong frost, statically
+ * paired with the `-on-bright` ink ramp (mirrors normal inks for
+ * non-adaptive themes). Scoped to the dock-document host, so the
+ * product-shell-hosted account page (opaque shell behind) and bars themes
+ * paint byte-identically. */
+[data-vgai-chrome="islands"] .vgai-dock-document-content .vgai-account {
+  --vgai-content-primary: var(--vgai-content-primary-on-bright);
+  --vgai-content-muted: var(--vgai-content-muted-on-bright);
+  --vgai-content-dim: var(--vgai-content-dim-on-bright);
+  --vgai-content-text-shadow: var(--vgai-content-text-shadow-on-bright);
+  --vgai-content-frost-bg: var(--vgai-content-frost-bg-on-bright);
+  --vgai-text-1: var(--vgai-content-primary);
+  --vgai-text-2: var(--vgai-content-muted);
+  --vgai-text-3: var(--vgai-content-dim);
+  text-shadow: var(--vgai-content-text-shadow, none);
+  background: var(--vgai-glass-regular-bg, var(--vgai-surface-panel));
+  backdrop-filter: var(--vgai-glass-regular-backdrop-filter, none);
+  -webkit-backdrop-filter: var(--vgai-glass-regular-backdrop-filter, none);
+}
+
+/* The centered workspace-task host already owns the one Regular material.
+ * Do not stack a second opaque/frosted account surface inside it. */
+[data-vgai-chrome="islands"]
+  .vgai-workspace-task-overlay
+  .vgai-dock-document-content
+  .vgai-account {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+/* Interior cards/wells re-tint from currentColor so they read as quiet
+ * sections on the Regular surface on either ink side (tooltip kbd idiom —
+ * their authored fills assumed the dark panel family). */
+[data-vgai-chrome="islands"] .vgai-dock-document-content .vgai-account .vgai-account-card {
+  background: color-mix(in srgb, currentColor 5%, transparent);
+  border-color: color-mix(in srgb, currentColor 18%, transparent);
+  box-shadow: none;
+}
+
+/* Signed-in settings column. Linear-style: one narrow left-anchored stack —
+ * the account view inherits the shell's 1120px column, so the constraint
+ * lives HERE, inside the account's own markup. */
+.vgai-account-stack {
+  max-width: 720px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-10);
+}
+
+/* Identity header (§3-R): a player-profile hero ON the lit canvas — no boxed
+ * card. 56px specular avatar catching the key light, email at display weight,
+ * plan pill beside it, mode as a micro-label. Sign out stays a quiet button on
+ * the right — session exit is an identity concern, not a billing action. */
+.vgai-account-identity {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-8);
+  padding: var(--vgai-space-3) var(--vgai-space-1) var(--vgai-space-5);
+  margin-bottom: var(--vgai-space-3);
+}
+
+.vgai-account-avatar {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 56px;
+  height: 56px;
+  color: var(--vgai-content-on-accent);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 24%), transparent 55%),
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--vgai-accent) 88%, white),
+      color-mix(in srgb, var(--vgai-accent) 68%, black)
+    );
+  border-radius: var(--vgai-radius-full);
+  font-size: 22px;
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 30%),
+    0 0 0 1px rgb(255 255 255 / 10%),
+    0 6px 18px rgb(0 0 0 / 45%),
+    0 0 32px color-mix(in srgb, var(--vgai-accent) 26%, transparent);
+}
+
+.vgai-account-identity-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.vgai-account-identity-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-2) var(--vgai-space-5);
+}
+
+.vgai-account-identity-email {
+  margin: 0;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: var(--vgai-leading-snug);
+  overflow-wrap: anywhere;
+  text-shadow: 0 2px 18px color-mix(in srgb, var(--vgai-accent) 22%, transparent);
+}
+
+.vgai-account-plan-chips {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-4);
+}
+
+.vgai-account-identity-note {
+  margin: 3px 0 0;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.vgai-account .vgai-btn.vgai-account-signout {
+  flex: none;
+  color: var(--vgai-content-muted);
+}
+
+.vgai-account .vgai-btn.vgai-account-signout:hover:not(:disabled) {
+  color: var(--vgai-content-primary);
+}
+
+/* Shell chips are monospace because they carry machine values (versions,
+ * ports). Account chips carry prose ("Free plan", "0 reserved") and read as
+ * unpolished in mono — override inside the account surface only. */
+.vgai-account .vgai-chip {
+  height: 24px;
+  padding: 0 var(--vgai-space-5);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: 0;
+}
+
+/* Sign-in composition (§4-R): a cinematic moment. The key-lit angular mark
+ * floats on the CANVAS above a centered 400px card (hub empty-state anatomy);
+ * value bullets stay demoted below, provider panel subordinate at full stack
+ * width. */
+.vgai-account-signin-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--vgai-space-10);
+  max-width: 720px;
+  margin: 0 auto;
+  padding-top: var(--vgai-space-8);
+}
+
+.vgai-account-signin-stack > .vgai-provider-connections {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.vgai-account-signin-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--vgai-space-2);
+  padding-top: var(--vgai-space-10);
+  text-align: center;
+}
+
+/* The mark sits IN the key light — local accent bloom behind it and a soft
+ * ground shadow beneath, so it reads as an object on the stage. */
+.vgai-account-signin-mark {
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: var(--vgai-space-8);
+}
+
+.vgai-account-signin-mark::before {
+  content: "";
+  position: absolute;
+  inset: -54px;
+  background: radial-gradient(
+    closest-side,
+    color-mix(in srgb, var(--vgai-accent) 28%, transparent),
+    transparent 76%
+  );
+  border-radius: var(--vgai-radius-full);
+  pointer-events: none;
+}
+
+.vgai-account-signin-mark::after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  width: 84px;
+  height: 16px;
+  background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent 75%);
+  border-radius: var(--vgai-radius-full);
+  pointer-events: none;
+}
+
+.vgai-account-signin-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-8);
+  width: min(400px, 100%);
+  padding: 28px;
+  box-sizing: border-box;
+}
+
+.vgai-account-signin-title {
+  margin: var(--vgai-space-5) 0 0;
+  color: #fff;
+  font-size: var(--vgai-font-heading);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: var(--vgai-leading-snug);
+  text-shadow: 0 2px 24px color-mix(in srgb, var(--vgai-accent) 24%, transparent);
+}
+
+/* Account primaries carry the hub hero-CTA material — saturated accent with a
+ * specular top light and a modest elevation shadow (compact primaries like
+ * "Upgrade to Creator" share it at their own size). */
+.vgai-account .vgai-btn[data-variant="primary"] {
+  color: #fff;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 0%) 52%),
+    color-mix(in srgb, var(--vgai-accent) 76%, #1d4ed8);
+  border: 1px solid color-mix(in srgb, var(--vgai-accent) 74%, white 8%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 22%),
+    0 1px 2px rgb(0 0 0 / 40%),
+    0 6px 16px rgb(0 0 0 / 32%);
+}
+
+.vgai-account .vgai-btn[data-variant="primary"]:hover:not(:disabled) {
+  filter: brightness(1.09);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 32%),
+    0 2px 4px rgb(0 0 0 / 42%),
+    0 8px 22px rgb(0 0 0 / 42%);
+}
+
+/* Sign-in primary at hero-CTA scale. */
+.vgai-account-signin-card .vgai-btn[data-variant="primary"] {
+  width: 100%;
+  height: 38px;
+  border-radius: 9px;
+  font-size: var(--vgai-shell-font-base);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+/* Value bullets: outside the card, muted 13px with check glyphs. */
+.vgai-account-signin-points {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-4);
+  width: min(400px, 100%);
+  margin: 0;
+  padding: 0 var(--vgai-space-2);
+  list-style: none;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-base);
+  box-sizing: border-box;
+}
+
+.vgai-account-signin-points li {
+  display: flex;
+  align-items: baseline;
+  gap: var(--vgai-space-5);
+}
+
+.vgai-account-signin-points li::before {
+  content: "✓";
+  flex: none;
+  color: var(--vgai-success);
+  font-size: var(--vgai-shell-font-sm);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+/* Field composition shared across account forms. */
+.vgai-account .vgai-field {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.vgai-account .vgai-field-label {
+  color: var(--vgai-content-muted);
+  font-size: var(--vgai-shell-font-sm);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+.vgai-account .vgai-input,
+.vgai-account .vgai-select {
+  height: 34px;
+  padding: 0 var(--vgai-space-6);
+  border-radius: var(--vgai-shell-radius-sm);
+  font-size: var(--vgai-shell-font-base);
+}
+
+.vgai-account .vgai-select {
+  padding-right: 30px;
+}
+
+.vgai-account-help {
+  margin: 0;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+  line-height: var(--vgai-leading-relaxed);
+}
+
+/* Info strip: quiet blue tint + icon (mirrors .vgai-shell-notice anatomy so
+ * the mock/authorization notes read as information, not as warnings). */
+/* Info strip demoted to a CAPTION (§4-R terse chrome): icon + one dim line,
+ * no banner box — a boxed notice was the card's first read, ahead of the
+ * form it annotates. */
+.vgai-account-infostrip {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--vgai-space-4);
+  padding: 0 var(--vgai-space-1);
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs);
+  line-height: var(--vgai-leading-relaxed);
+  text-align: left;
+}
+
+.vgai-account-infostrip-icon {
+  flex: none;
+  margin-top: var(--vgai-space-1);
+  color: color-mix(in srgb, var(--vgai-accent) 70%, var(--vgai-content-dim));
+}
+
+/* Section cards — the hub's material: a step lighter than the near-black
+ * canvas, a soft top light caught along the upper edge, and a REAL elevation
+ * shadow so panels sit ON the lit stage instead of floating as flat grey
+ * rectangles with hairlines. */
+.vgai-account-card {
+  padding: var(--vgai-space-12);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 0%) 44%),
+    color-mix(in srgb, white 3%, var(--vgai-surface-panel));
+  border: 1px solid rgb(255 255 255 / 9%);
+  border-radius: var(--vgai-shell-radius);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 8%),
+    0 1px 2px rgb(0 0 0 / 45%),
+    0 20px 48px rgb(0 0 0 / 46%);
+  box-sizing: border-box;
+}
+
+.vgai-account-card-title {
+  margin: 0 0 var(--vgai-space-2);
+  color: var(--vgai-content-primary);
+  font-size: var(--vgai-shell-font-md);
+  font-weight: var(--vgai-font-weight-semibold);
+  letter-spacing: -0.005em;
+}
+
+.vgai-account-card-sub {
+  margin: 0 0 var(--vgai-space-8);
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+  max-width: 560px;
+}
+
+/* Card header row: title left, the context's one primary action right. The
+ * plan upgrade lives HERE (GitHub billing pattern) because the number that
+ * motivates it is directly underneath — a bottom action row divorces the
+ * action from its evidence. */
+.vgai-account-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vgai-space-6);
+}
+
+.vgai-account-card-head .vgai-account-card-title {
+  margin: 0;
+}
+
+/* Credits figure: large-but-not-jumbo (24/600) per spec §3 — a balance is
+ * glanceable state, not a marketing headline. */
+.vgai-account-credit-figure {
+  display: flex;
+  align-items: baseline;
+  gap: var(--vgai-space-4);
+  margin: var(--vgai-space-5) 0 var(--vgai-space-6);
+}
+
+.vgai-account-credit-number {
+  color: #fff;
+  font-size: 28px;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: var(--vgai-leading-tight);
+  font-variant-numeric: tabular-nums;
+}
+
+.vgai-account-credit-unit {
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+}
+
+/* Pill meter on a recessed track. Two segments: used = lit accent with a
+ * soft glow (the one place the accent may bloom — it is state, not a
+ * button), reserved = translucent accent right after it; the legend dots
+ * below map 1:1 onto the segments. Over-quota flips fill AND glow to the
+ * danger hue. */
+.vgai-account .vgai-meter {
+  position: relative;
+  height: 8px;
+  margin: var(--vgai-space-1) 0 var(--vgai-space-5);
+  overflow: hidden;
+  background: rgb(0 0 0 / 38%);
+  border-radius: var(--vgai-radius-full);
+  box-shadow:
+    inset 0 1px 2px rgb(0 0 0 / 50%),
+    inset 0 0 0 1px rgb(255 255 255 / 5%);
+  box-sizing: border-box;
+}
+
+.vgai-account .vgai-meter-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--vgai-accent) 78%, white),
+    var(--vgai-accent)
+  );
+  border-radius: inherit;
+  box-shadow: 0 0 12px color-mix(in srgb, var(--vgai-accent) 55%, transparent);
+  transition: width var(--vgai-duration-slow) var(--vgai-shell-var(--vgai-ease-standard));
+}
+
+.vgai-account .vgai-meter-fill[data-part="reserved"] {
+  background: color-mix(in srgb, var(--vgai-accent) 38%, transparent);
+  box-shadow: none;
+}
+
+.vgai-account .vgai-meter[data-state="over"] .vgai-meter-fill {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--vgai-danger) 80%, white),
+    var(--vgai-danger)
+  );
+  box-shadow: 0 0 12px color-mix(in srgb, var(--vgai-danger) 55%, transparent);
+}
+
+.vgai-account-cycle-line {
+  margin: 0 0 var(--vgai-space-6);
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Danger, not warn: the meter's over-quota fill is already the danger hue, so
+ * the "over allowance" callout speaks in the same family — one alarm, one hue. */
+.vgai-account-cycle-over {
+  color: var(--vgai-danger);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+/* 12px dot legend (replaces the former three pill chips — deferred from U0:
+ * three counters in capsules read as three unrelated tags, not one budget). */
+.vgai-account-legend {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-3) var(--vgai-space-8);
+}
+
+.vgai-account-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--vgai-content-muted);
+  font-size: var(--vgai-shell-font-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.vgai-account-legend-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--vgai-radius-full);
+  box-sizing: border-box;
+}
+
+.vgai-account-legend-item[data-part="used"] .vgai-account-legend-dot {
+  background: var(--vgai-accent);
+}
+
+/* Over-quota: the "used" dot maps 1:1 onto the meter's fill, and that fill has
+ * flipped to danger — the dot follows so the legend never shows accent under a
+ * red bar. 35%/85% states keep the accent dot. */
+.vgai-account-legend[data-state="over"] .vgai-account-legend-item[data-part="used"]
+  .vgai-account-legend-dot {
+  background: var(--vgai-danger);
+}
+
+.vgai-account-legend-item[data-part="reserved"] .vgai-account-legend-dot {
+  background: color-mix(in srgb, var(--vgai-accent) 38%, transparent);
+}
+
+/* Purchased is a supply figure, not a meter segment — outlined, not filled. */
+.vgai-account-legend-item[data-part="purchased"] .vgai-account-legend-dot {
+  background: transparent;
+  border: 1px solid var(--vgai-boundary-strong);
+}
+
+.vgai-account-expiry {
+  margin-top: var(--vgai-space-5);
+}
+
+/* Billing actions: quiet row inside the Usage card, separated by a hairline —
+ * they act on the balance shown above, so they stay in its card. */
+.vgai-account-card-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--vgai-space-4);
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px solid rgb(255 255 255 / 7%);
+}
+
+/* Destructive plan action: quiet until hover/confirm (spec shared rule 2). */
+.vgai-account .vgai-btn.vgai-account-quiet-danger {
+  color: var(--vgai-content-dim);
+}
+
+.vgai-account .vgai-btn.vgai-account-quiet-danger:hover:not(:disabled) {
+  color: var(--vgai-danger);
+  background: var(--vgai-danger-muted);
+}
+
+/* Provider connections. */
+.vgai-account-providers-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--vgai-space-8);
+}
+
+/* The connected-count is a status pill, not prose: it must never wrap. Below
+ * the 860px collapse the header squeezed it onto two lines, orphaning
+ * "connected" under a dot aligned to "0". */
+.vgai-account-providers-header .vgai-status-dot {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.vgai-account-provider-list {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--vgai-space-2);
+  border-top: 1px solid rgb(255 255 255 / 7%);
+}
+
+.vgai-account-provider {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-8);
+  padding: 14px 2px;
+  border-top: 1px solid rgb(255 255 255 / 7%);
+}
+
+.vgai-account-provider:first-child {
+  border-top: 0;
+}
+
+.vgai-account-provider-monogram {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 38px;
+  height: 38px;
+  color: var(--vgai-content-primary);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 60%), var(--vgai-surface-raised);
+  border: 1px solid var(--vgai-boundary-default);
+  border-radius: 10px;
+  font-size: var(--vgai-shell-font-md);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+.vgai-account-provider[data-configured="true"] .vgai-account-provider-monogram {
+  color: var(--vgai-accent);
+  border-color: rgb(87 158 255 / 35%);
+  background:
+    linear-gradient(180deg, rgb(87 158 255 / 12%), transparent 70%), var(--vgai-surface-raised);
+}
+
+.vgai-account-provider-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-1);
+}
+
+.vgai-account-provider-name {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-4);
+  color: var(--vgai-content-primary);
+  font-size: var(--vgai-shell-font-base);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+/* Connected state: green dot before the masked key (spec §3). */
+.vgai-account-provider-dot {
+  flex: none;
+  width: 6px;
+  height: 6px;
+  background: var(--vgai-success);
+  border-radius: var(--vgai-radius-full);
+}
+
+.vgai-account-provider-key {
+  color: var(--vgai-content-dim);
+  font-family: var(--vgai-font-mono);
+  font-size: var(--vgai-shell-font-xs);
+}
+
+.vgai-account-provider-source {
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs);
+}
+
+.vgai-account-provider-warning {
+  color: var(--vgai-warn);
+  font-size: var(--vgai-shell-font-xs);
+}
+
+.vgai-account-provider-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-4);
+}
+
+.vgai-account-provider-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-6);
+  width: min(360px, 48%);
+}
+
+.vgai-account-provider-form .vgai-tool-actions,
+.vgai-account-provider-form-actions {
+  display: flex;
+  gap: var(--vgai-space-4);
+}
+
+/* Status dot chip. */
+.vgai-account .vgai-status-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--vgai-space-3);
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-xs);
+  font-weight: var(--vgai-font-weight-regular);
+}
+
+.vgai-account .vgai-status-dot::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  background: var(--vgai-content-dim);
+  border-radius: var(--vgai-radius-full);
+}
+
+.vgai-account .vgai-status-dot[data-state="on"] {
+  color: var(--vgai-success);
+}
+
+.vgai-account .vgai-status-dot[data-state="on"]::before {
+  background: var(--vgai-success);
+  box-shadow: 0 0 6px var(--vgai-success);
+}
+
+/* Spend controls — switch rows. */
+.vgai-account-switch-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 14px 0;
+  border-top: 1px solid rgb(255 255 255 / 7%);
+  cursor: pointer;
+}
+
+.vgai-account-switch-row:first-of-type {
+  border-top: 0;
+}
+
+.vgai-account-switch-copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-1);
+}
+
+.vgai-account-switch-copy > strong {
+  color: var(--vgai-content-primary);
+  font-size: var(--vgai-shell-font-base);
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+.vgai-account-switch-copy > small {
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+}
+
+/* Checkbox → switch, scoped to account switch rows only. Off-state track is
+ * recessed into the panel; the checked capsule carries the accent with a
+ * specular top light, matching the primary-button material. */
+.vgai-account-switch-row .vgai-checkbox {
+  appearance: none;
+  flex: none;
+  width: 34px;
+  height: 20px;
+  margin: 1px 0 0;
+  background: rgb(0 0 0 / 30%);
+  border: 1px solid rgb(255 255 255 / 14%);
+  border-radius: var(--vgai-radius-full);
+  cursor: pointer;
+  position: relative;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 35%);
+  transition:
+    background 160ms var(--vgai-ease-standard),
+    border-color 160ms var(--vgai-ease-standard);
+}
+
+.vgai-account-switch-row .vgai-checkbox::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: var(--vgai-content-muted);
+  border-radius: var(--vgai-radius-full);
+  transition:
+    transform 160ms var(--vgai-shell-var(--vgai-ease-standard)),
+    background 160ms var(--vgai-ease-standard);
+}
+
+.vgai-account-switch-row .vgai-checkbox:checked {
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 0%) 55%), var(--vgai-accent);
+  border-color: color-mix(in srgb, var(--vgai-accent) 80%, white 10%);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--vgai-accent) 35%, transparent);
+}
+
+.vgai-account-switch-row .vgai-checkbox:checked::after {
+  transform: translateX(14px);
+  background: var(--vgai-content-on-accent);
+}
+
+/* Spec rule 6: interactive account controls share the buttons' 2px accent
+ * ring — the global 1px --vgai-focus-ring is too quiet on a 32px capsule.
+ * Scoped to the account switch only; editor checkboxes keep the global ring. */
+.vgai-account-switch-row .vgai-checkbox:focus-visible {
+  outline: var(--vgai-focus-ring);
+  outline-offset: 2px;
+}
+
+.vgai-account-policy-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  margin-left: 48px;
+  padding: var(--vgai-space-2) 0 var(--vgai-space-6);
+}
+
+/* Both nested field groups belong to the switch directly above them, so they
+ * align to the switch's COPY column rather than the row's left edge. */
+.vgai-account-limit-field {
+  max-width: 320px;
+  margin-left: 48px;
+  padding: 4px 0 14px;
+}
+
+/* Usage list. */
+.vgai-account-usage {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--vgai-space-2);
+}
+
+.vgai-account-usage-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vgai-space-8);
+  padding: 11px 2px;
+  border-top: 1px solid rgb(255 255 255 / 7%);
+  font-size: var(--vgai-shell-font-base);
+}
+
+.vgai-account-usage-row:first-child {
+  border-top: 0;
+}
+
+.vgai-account-usage-row > span {
+  color: var(--vgai-content-muted);
+}
+
+.vgai-account-usage-row > strong {
+  color: var(--vgai-content-primary);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--vgai-font-weight-semibold);
+}
+
+/* Numeric field + unit suffix (spend controls). */
+.vgai-account-input-suffix {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-4);
+}
+
+.vgai-account-input-suffix .vgai-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.vgai-account-suffix {
+  flex: none;
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+}
+
+/* Status toast strip. P6-U6 (inventory row d-3): in-card zone FROSTS — the
+ * translucent chrome fill gains the theme's content-frost blur ('none' for
+ * every non-frost theme, byte-identical paint). */
+.vgai-account-status {
+  display: flex;
+  align-items: center;
+  gap: var(--vgai-space-5);
+  padding: var(--vgai-space-6) var(--vgai-space-8);
+  color: var(--vgai-content-primary);
+  background: var(--vgai-surface-chrome);
+  backdrop-filter: var(--vgai-content-frost-filter, none);
+  -webkit-backdrop-filter: var(--vgai-content-frost-filter, none);
+  border: 1px solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-shell-radius-sm);
+  font-size: var(--vgai-shell-font-sm);
+  animation: vgai-shell-rise var(--vgai-duration-slow) var(--vgai-shell-var(--vgai-ease-standard))
+    both;
+}
+
+.vgai-account-status::before {
+  content: "";
+  flex: none;
+  width: 6px;
+  height: 6px;
+  background: var(--vgai-accent);
+  border-radius: var(--vgai-radius-full);
+}
+
+/* Device-code panel. Solid hairline inset — dashed borders are reserved for
+ * genuine drop targets (spec shared rule 1). P6-U6 (inventory row d-3):
+ * frosts in-card like the toast strip above. */
+.vgai-account-device-code {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vgai-space-3);
+  padding: 14px 16px;
+  background: var(--vgai-surface-inset);
+  backdrop-filter: var(--vgai-content-frost-filter, none);
+  -webkit-backdrop-filter: var(--vgai-content-frost-filter, none);
+  border: 1px solid var(--vgai-boundary-strong);
+  border-radius: var(--vgai-shell-radius-sm);
+  text-align: center;
+}
+
+.vgai-account-device-code > strong {
+  color: var(--vgai-content-primary);
+  font-family: var(--vgai-font-mono);
+  font-size: 22px;
+  letter-spacing: 0.28em;
+}
+
+.vgai-account-device-code > span {
+  color: var(--vgai-content-dim);
+  font-size: var(--vgai-shell-font-sm);
+}
+
+/* ------------------------------------------------------------------------- */
+/* Responsive + reduced motion                                                */
+/* ------------------------------------------------------------------------- */
+
+@media (max-width: 860px) {
+  .vgai-shell-container {
+    padding: 0 20px 64px;
+  }
+
+  .vgai-account-identity {
+    flex-wrap: wrap;
+  }
+
+  .vgai-account-policy-fields {
+    grid-template-columns: minmax(0, 1fr);
+    margin-left: 0;
+  }
+
+  .vgai-account-limit-field {
+    margin-left: 0;
+  }
+
+  .vgai-shell-hero {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vgai-shell-rise,
+  .vgai-splash-stack,
+  .vgai-account-status {
+    animation: none;
+  }
+
+  .vgai-splash-progress::after {
+    animation: none;
+    width: 100%;
+    background: var(--vgai-accent-muted);
+  }
+
+  .vgai-account .vgai-meter-fill,
+  .vgai-account-switch-row .vgai-checkbox,
+  .vgai-account-switch-row .vgai-checkbox::after {
+    transition: none;
+  }
+}