@layer overrides {
  /* ============================================================
   Layer: polish.css (standalone error pages moved to error.css)
   ============================================================ */

  /*
 * Round 37 — contrast, legal pages, error experience, and cross-page detail polish.
 * This file is intentionally loaded last. It resolves legacy cascade conflicts
 * without replacing the locked SairikLabs visual system.
 */

  /* ---------- Reliable color hierarchy ---------- */
  :root {
    --polish-page: var(--color-page);
    --polish-surface: var(--color-surface);
    --polish-surface-muted: var(--color-surface-muted);
    --polish-text: var(--color-text);
    --polish-text-secondary: var(--color-text-secondary);
    --polish-text-muted: var(--color-text-tertiary);
    --polish-line: var(--color-border);
    --polish-line-strong: var(--color-rule-2);
    --polish-focus-shadow: 0 0 0 3px color-mix(in oklch, var(--color-focus) 22%, transparent);
  }

  html {
    background: var(--polish-page);
  }
  body {
    background: var(--polish-page);
    color: var(--polish-text);
  }
  ::selection {
    background: var(--color-accent-soft);
    color: var(--color-ink);
  }

  :where(p, li, dd, td, blockquote) {
    text-wrap: pretty;
  }
  :where(.muted, .text-muted, .subtle, .caption, .hint, .description) {
    color: var(--polish-text-muted);
  }
  :where(input, textarea, select) {
    color: var(--polish-text);
    background-color: var(--polish-surface);
  }
  :where(input, textarea)::placeholder {
    color: var(--polish-text-muted);
    opacity: 0.9;
  }
  :where(input, textarea, select):disabled {
    color: var(--polish-text-muted);
    opacity: 1;
  }
  :where(button, .button, [role="button"]):disabled,
  :where(button, .button, [role="button"])[aria-disabled="true"] {
    opacity: 0.62;
    cursor: not-allowed;
    filter: saturate(0.65);
  }

  /* Legacy selectors used opacity as the only disabled-state cue. Keep status clear without making labels disappear. */
  :where(.field, .public-form-card, .settings-card) :where(input, textarea, select):disabled {
    opacity: 1;
    color: var(--polish-text-muted);
    background: var(--color-paper-3);
    -webkit-text-fill-color: var(--polish-text-muted);
  }
  .oauth-button:disabled,
  .oauth-button.is-pending-disabled,
  .contact-form-actions .button:disabled,
  .button:is(:disabled, [aria-disabled="true"]) {
    opacity: 0.68;
  }
  .admin-user-actions label.disabled {
    opacity: 0.72;
    color: var(--polish-text-muted);
  }
  .image-tool-tabs a.not-configured,
  .ui-pagination-arrow.disabled,
  .pagination a.disabled {
    opacity: 0.72;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    box-shadow: var(--polish-focus-shadow);
  }

  /* ---------- Header, menus, and footer ---------- */
  .site-header {
    border-bottom-color: color-mix(in oklch, var(--polish-line) 82%, transparent);
    background: color-mix(in oklch, var(--color-paper-2) 91%, transparent);
  }
  .site-header.scrolled {
    border-bottom-color: var(--polish-line);
    background: color-mix(in oklch, var(--color-paper-2) 97%, transparent);
    box-shadow: 0 8px 28px color-mix(in oklch, var(--color-ink) 6%, transparent);
  }
  .desktop-nav > a,
  .nav-menu-trigger {
    color: var(--polish-text-secondary);
    font-weight: 600;
  }
  .desktop-nav > a[aria-current="page"] {
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
  }
  .desktop-nav > a[aria-current="page"]::after {
    display: none;
  }
  .nav-menu-trigger .chevron {
    opacity: 0.78;
  }
  .nav-dropdown {
    border-color: var(--polish-line-strong);
    background: var(--polish-surface);
    box-shadow: 0 24px 64px color-mix(in oklch, var(--color-ink) 14%, transparent);
  }
  .mega-menu-group h3,
  .mega-menu-title {
    color: var(--polish-text-muted);
    font-weight: 750;
    letter-spacing: 0.09em;
  }
  .mega-menu-group a {
    color: var(--polish-text);
  }
  .mega-menu-group a small,
  .mega-menu-feature-copy span,
  .mega-menu-footer span {
    color: var(--polish-text-muted);
  }
  .mega-menu-feature {
    border-color: var(--polish-line);
    background: var(--color-paper-2);
  }
  .mega-menu-feature-copy small {
    color: var(--color-accent-hover);
  }
  .mega-menu-footer {
    border-top-color: var(--polish-line);
    background: var(--color-paper-2);
  }
  .mega-menu-footer a {
    color: var(--color-accent-hover);
    font-weight: 750;
  }
  .locale-menu-panel,
  .account-menu-panel,
  .credit-quick-panel {
    border-color: var(--polish-line-strong);
    background: var(--polish-surface);
  }
  .locale-menu-panel a.active {
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
  }
  .mobile-nav {
    background: var(--polish-surface);
  }
  .mobile-main-link,
  .mobile-nav-group > summary {
    color: var(--polish-text-secondary);
  }
  .mobile-submenu a small {
    color: var(--polish-text-muted);
  }

  .site-footer {
    background: var(--color-ink);
    color: var(--color-on-dark);
  }
  .site-footer :where(p, a, small, .footer-bottom, .footer-address) {
    color: var(--color-on-dark-muted);
  }
  .site-footer a:hover,
  .site-footer button:hover {
    color: var(--color-paper);
  }
  .site-footer h4 {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .footer-brand-block > p:first-of-type {
    max-width: 34ch;
    color: var(--color-paper);
  }
  .footer-address {
    line-height: 1.75;
  }
  .footer-bottom {
    border-top-color: color-mix(in oklch, var(--color-paper) 18%, transparent);
  }
  .footer-cookie-settings {
    color: var(--color-on-dark-muted);
  }

  /* ---------- General page and card refinement ---------- */
  :where(.original-hero, .pricing-page, .public-info-page, .policies-page, .legal-page) {
    background: var(--polish-page);
  }
  .original-hero {
    border-bottom: 1px solid var(--polish-line);
    background: linear-gradient(180deg, var(--color-paper-2), var(--polish-page));
  }
  .original-hero p,
  .pricing-page-header > p:last-child,
  .public-info-hero p {
    color: var(--polish-text-muted);
  }
  .section-kicker,
  .eyebrow,
  .legal-kicker,
  .policy-card-category {
    color: var(--color-accent-hover);
  }

  :where(
    .original-feature,
    .product-list-card,
    .price-card,
    .faq-card,
    .trust-grid article,
    .public-form-card,
    .settings-card,
    .workspace-stat,
    .recent-job-card,
    .admin-panel,
    .admin-data-card,
    .payment-card
  ) {
    border-color: var(--polish-line);
    background: var(--polish-surface);
    box-shadow:
      0 1px 2px color-mix(in oklch, var(--color-ink) 4%, transparent),
      0 10px 30px color-mix(in oklch, var(--color-ink) 4%, transparent);
  }
  :where(
    .original-feature,
    .product-list-card,
    .price-card,
    .faq-card,
    .trust-grid article,
    .settings-card,
    .workspace-stat,
    .recent-job-card,
    .admin-panel,
    .admin-data-card
  ) {
    transition:
      border-color var(--dur-short) var(--ease-out),
      box-shadow var(--dur-short) var(--ease-out),
      transform var(--dur-short) var(--ease-out);
  }
  :where(
      .original-feature,
      .product-list-card,
      .price-card,
      .faq-card,
      .trust-grid article,
      .settings-card,
      .workspace-stat,
      .recent-job-card,
      .admin-panel,
      .admin-data-card
    )
    p {
    color: var(--polish-text-muted);
  }
  :where(
      .original-feature,
      .product-list-card,
      .price-card,
      .faq-card,
      .trust-grid article,
      .settings-card,
      .workspace-stat,
      .recent-job-card,
      .admin-panel,
      .admin-data-card
    )
    :where(h2, h3, h4, strong) {
    color: var(--polish-text);
  }

  .button {
    min-height: 44px;
    border-radius: var(--radius-pill);
    font-weight: 750;
    box-shadow: none;
  }
  .button.outline,
  .button.ghost {
    border-color: var(--polish-line-strong);
    background: var(--polish-surface);
    color: var(--color-accent-hover);
  }
  .button.danger.outline {
    color: var(--color-danger);
  }
  .text-link,
  .policy-inline-links a,
  .prose a {
    color: var(--color-link);
    font-weight: 650;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .notice,
  .form-validation-summary,
  .field-validation-error,
  .tool-error,
  .auth-validation,
  .workspace-content-warning {
    font-weight: 600;
  }
  .notice.success {
    color: oklch(38% 0.11 155);
  }
  .notice.error,
  .form-validation-summary,
  .field-validation-error {
    color: var(--color-danger);
  }

  /* ---------- Form clarity ---------- */
  :where(
    .field,
    .public-form-card label,
    .settings-card label,
    .admin-filter-grid > label,
    .admin-email-composer > label
  ) {
    color: var(--polish-text-secondary);
  }
  :where(
    .field > label,
    .public-form-card label > span,
    .settings-card label > span,
    .admin-filter-grid > label > span,
    .admin-email-composer > label > span
  ) {
    color: var(--polish-text-secondary);
    font-weight: 700;
  }
  :where(input, textarea, select) {
    border-color: var(--polish-line-strong);
  }
  :where(input, textarea, select):hover:not(:disabled) {
    border-color: color-mix(in oklch, var(--color-accent) 42%, var(--polish-line-strong));
  }
  :where(input, textarea, select)[aria-invalid="true"] {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
  }
  :where(.field-help, .form-help, .admin-form-help, .auth-help, .settings-card small) {
    color: var(--polish-text-muted);
  }

  /* ---------- Legal center and policy documents ---------- */
  .policies-page,
  .legal-page {
    padding: clamp(3.75rem, 7vw, 6.5rem) 0 clamp(5rem, 9vw, 8rem);
  }
  .policies-shell,
  .legal-shell {
    display: grid;
    gap: clamp(2.25rem, 5vw, 4.5rem);
  }

  .policies-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    align-items: end;
    gap: clamp(2rem, 6vw, 5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--polish-line);
  }
  .policies-hero h1 {
    max-width: 13ch;
    margin: 0.55rem 0 1rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
  }
  .policies-hero > div > p {
    max-width: 64ch;
    margin: 0;
    color: var(--polish-text-muted);
    font-size: clamp(1rem, 1.5vw, 1.16rem);
    line-height: 1.75;
  }
  .policies-contact-card {
    padding: 1.35rem;
    border: 1px solid var(--polish-line);
    border-radius: var(--radius-card);
    background: var(--polish-surface);
    box-shadow: var(--shadow-sm);
  }
  .policies-contact-card > span {
    display: block;
    color: var(--polish-text-muted);
    font-size: 0.76rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }
  .policies-contact-card > strong {
    display: block;
    margin: 0.45rem 0 0.35rem;
    overflow-wrap: anywhere;
    font-size: 1rem;
  }
  .policies-contact-card > p {
    margin: 0;
    color: var(--polish-text-muted);
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .policies-contact-card > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    color: var(--color-accent-hover);
    font-size: 0.85rem;
    font-weight: 750;
  }
  .policies-contact-card .ui-icon {
    width: 15px;
    height: 15px;
  }

  .policies-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--polish-line);
    border-radius: var(--radius-card);
    background: var(--polish-surface);
  }
  .policies-summary > div {
    display: grid;
    gap: 0.25rem;
    padding: 1.15rem 1.35rem;
    border-right: 1px solid var(--polish-line);
  }
  .policies-summary > div:last-child {
    border-right: 0;
  }
  .policies-summary strong {
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
  }
  .policies-summary span {
    color: var(--polish-text-muted);
    font-size: 0.78rem;
  }

  .policies-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .policy-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon category category" "icon title arrow" "icon copy copy" "icon link link";
    align-items: start;
    gap: 0.35rem 1rem;
    padding: 1.4rem;
    border: 1px solid var(--polish-line);
    border-radius: var(--radius-card);
    background: var(--polish-surface);
    box-shadow: var(--shadow-sm);
  }
  .policy-card-icon {
    grid-area: icon;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
  }
  .policy-card-icon .ui-icon {
    width: 20px;
    height: 20px;
  }
  .policy-card-category {
    grid-area: category;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .policy-card > strong {
    grid-area: title;
    font-size: 1.08rem;
    line-height: 1.35;
  }
  .policy-card > p {
    grid-area: copy;
    margin: 0.2rem 0 0;
    color: var(--polish-text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
  }
  .policy-card::after {
    grid-area: arrow;
    align-self: center;
    color: var(--polish-text-muted);
    content: "↗";
    font-size: 1rem;
  }
  .policy-card-link {
    grid-area: link;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    color: var(--color-accent-hover);
    font-size: 0.8rem;
    font-weight: 750;
  }
  .policy-card-link .ui-icon {
    width: 14px;
    height: 14px;
  }

  .policies-principles {
    display: grid;
    gap: 1.5rem;
    padding-top: 1rem;
  }
  .policies-principles > .legal-section-heading {
    border-top: 1px solid var(--polish-line);
    padding-top: 2.5rem;
  }
  .policies-principles > div:last-child {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .policies-principles article {
    padding: 1.25rem;
    border-left: 2px solid var(--color-accent);
    background: color-mix(in oklch, var(--color-accent-soft) 38%, transparent);
  }
  .policies-principles article strong {
    font-size: 0.95rem;
  }
  .policies-principles article p {
    margin: 0.5rem 0 0;
    color: var(--polish-text-muted);
    font-size: 0.84rem;
    line-height: 1.65;
  }

  .legal-shell {
    max-width: 90rem;
  }
  .legal-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--polish-text-muted);
    font-size: 0.78rem;
  }
  .legal-breadcrumbs a {
    color: var(--polish-text-secondary);
    font-weight: 650;
  }
  .legal-breadcrumbs a:hover {
    color: var(--color-accent-hover);
  }
  .legal-breadcrumbs .ui-icon {
    width: 13px;
    height: 13px;
    opacity: 0.72;
  }

  .legal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    align-items: end;
    gap: clamp(2rem, 6vw, 5rem);
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--polish-line);
  }
  .legal-hero-copy h1 {
    max-width: 17ch;
    margin: 0.65rem 0 1rem;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .legal-hero-copy > p {
    max-width: 62ch;
    margin: 0;
    color: var(--polish-text-muted);
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    line-height: 1.75;
  }
  .legal-kicker {
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .legal-meta {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--polish-line);
    border-radius: var(--radius-card);
    background: var(--polish-surface);
  }
  .legal-meta > div {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--polish-line);
  }
  .legal-meta > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .legal-meta dt {
    color: var(--polish-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
  }
  .legal-meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--polish-text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
    text-align: right;
  }
  .legal-meta a {
    color: var(--color-accent-hover);
  }

  .legal-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 720px);
    justify-content: center;
    align-items: start;
    gap: clamp(2rem, 6vw, 5rem);
  }
  .legal-toc {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 0.8rem;
    padding: 1rem 0;
    border-top: 1px solid var(--polish-line);
    border-bottom: 1px solid var(--polish-line);
  }
  .legal-toc > strong {
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .legal-toc nav {
    display: grid;
    gap: 0.12rem;
    max-height: calc(100svh - 170px);
    overflow: auto;
  }
  .legal-toc a {
    padding: 0.42rem 0.55rem;
    border-left: 2px solid transparent;
    color: var(--polish-text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
  }
  .legal-toc a.level-3 {
    padding-left: 1rem;
    font-size: 0.72rem;
  }
  .legal-toc a:hover {
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
  }
  .legal-document {
    min-width: 0;
  }
  .legal-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in oklch, var(--color-accent) 28%, var(--polish-line));
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-accent-soft) 42%, var(--polish-surface));
  }
  .legal-note .ui-icon {
    width: 18px;
    height: 18px;
    margin-top: 0.18rem;
    color: var(--color-accent-hover);
  }
  .legal-note p {
    margin: 0;
    color: var(--polish-text-secondary);
    font-size: 0.82rem;
    line-height: 1.65;
  }
  .legal-prose {
    max-width: none;
    color: var(--polish-text-secondary);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.84;
  }
  .legal-prose > :first-child {
    margin-top: 0;
  }
  .legal-prose h2 {
    margin: 2.6rem 0 0.8rem;
    padding-top: 0.4rem;
    color: var(--polish-text);
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  .legal-prose h3 {
    margin: 2rem 0 0.65rem;
    color: var(--polish-text);
    font-size: 1.08rem;
  }
  .legal-prose p {
    margin: 1rem 0;
  }
  .legal-prose ul,
  .legal-prose ol {
    padding-left: 1.35rem;
  }
  .legal-prose li {
    padding-left: 0.2rem;
  }
  .legal-prose strong {
    color: var(--polish-text);
    font-weight: 750;
  }
  .legal-prose blockquote {
    border-left-color: var(--color-accent);
    background: var(--color-paper-2);
    color: var(--polish-text-secondary);
  }
  .legal-prose .prose-table-wrap {
    border-color: var(--polish-line-strong);
  }
  .legal-prose th {
    background: var(--color-paper-3);
    color: var(--polish-text);
  }
  .legal-prose td {
    color: var(--polish-text-secondary);
  }
  .legal-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3.5rem;
    padding: 1.4rem;
    border: 1px solid var(--polish-line);
    border-radius: var(--radius-card);
    background: var(--color-paper-2);
  }
  .legal-help-label {
    color: var(--color-accent-hover);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .legal-help h2 {
    margin: 0.25rem 0 0;
    font-family: var(--font-body);
    font-size: 1.05rem;
  }
  .legal-help p {
    margin: 0.45rem 0 0;
    color: var(--polish-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
  }

  .legal-related {
    display: grid;
    gap: 1.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--polish-line);
  }
  .legal-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .legal-section-heading > div > span {
    color: var(--color-accent-hover);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .legal-section-heading h2 {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 500;
    line-height: 1.1;
  }
  .legal-section-heading > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-accent-hover);
    font-size: 0.8rem;
    font-weight: 750;
  }
  .legal-section-heading .ui-icon {
    width: 14px;
    height: 14px;
  }
  .legal-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .legal-related-grid > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem 0.8rem;
    padding: 1.15rem;
    border: 1px solid var(--polish-line);
    border-radius: var(--radius-sm);
    background: var(--polish-surface);
  }
  .legal-related-grid strong {
    font-size: 0.9rem;
  }
  .legal-related-grid span {
    grid-column: 1/-1;
    color: var(--polish-text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
  }
  .legal-related-grid .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--polish-text-muted);
  }

  /* ---------- Interaction polish ---------- */
  @media (hover: hover) and (pointer: fine) {
    .policy-card:hover,
    .legal-related-grid > a:hover {
      border-color: var(--polish-line-strong);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .policy-card:hover::after {
      color: var(--color-accent-hover);
    }
    .policies-contact-card > a:hover,
    .legal-section-heading > a:hover {
      color: var(--color-link-hover);
    }
    .error-button.primary:hover {
      border-color: var(--color-accent-hover);
      background: var(--color-accent-hover);
    }
    .error-button.secondary:hover {
      border-color: var(--color-accent);
      background: var(--color-accent-soft);
    }
  }

  @media (max-width: 64rem) {
    .policies-hero,
    .legal-hero {
      grid-template-columns: minmax(0, 1fr);
    }
    .policies-contact-card,
    .legal-meta {
      max-width: 48rem;
    }
    .legal-layout {
      grid-template-columns: minmax(0, 720px);
    }
    .legal-toc {
      position: static;
      display: none;
    }
    .legal-related-grid,
    .policies-principles > div:last-child {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 48rem) {
    .policies-page,
    .legal-page {
      padding: 3rem 0 4.5rem;
    }
    .policies-shell,
    .legal-shell {
      gap: 2.25rem;
    }
    .policies-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .policies-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .policies-summary > div:nth-child(2) {
      border-right: 0;
    }
    .policies-summary > div:nth-child(-n + 2) {
      border-bottom: 1px solid var(--polish-line);
    }
    .legal-section-heading {
      align-items: flex-start;
      flex-direction: column;
    }
    .legal-help {
      grid-template-columns: minmax(0, 1fr);
    }
    .legal-help .button {
      width: 100%;
    }
    .policy-card {
      padding: 1.15rem;
    }
    .error-help {
      position: static;
      justify-content: center;
      margin-top: 1rem;
    }
    .error-page-main {
      align-content: center;
      place-items: stretch;
    }
  }

  @media (max-width: 30rem) {
    .policies-summary {
      grid-template-columns: minmax(0, 1fr);
    }
    .policies-summary > div {
      border-right: 0;
      border-bottom: 1px solid var(--polish-line);
    }
    .policies-summary > div:last-child {
      border-bottom: 0;
    }
    .legal-meta > div {
      grid-template-columns: minmax(0, 1fr);
    }
    .legal-meta dd {
      text-align: left;
    }
    .error-panel {
      padding: 2rem 1.35rem;
      border-radius: var(--radius-lg);
    }
    .error-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }
    .error-button {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .policy-card,
    .legal-related-grid > a,
    .error-button,
    .dashboard-membership-action {
      transition: none;
    }
    .policy-card:hover,
    .legal-related-grid > a:hover {
      transform: none;
    }
    .dashboard-membership-action:hover,
    .dashboard-membership-action:active {
      transform: none;
    }
  }

  /* ---------- Round 38: contrast, mobile Now containment, and resilient sharing ---------- */
  .company-address-note,
  .contact-item small,
  .checkout-unavailable-note {
    color: var(--color-text-tertiary);
  }

  .article-share-sheet[hidden] {
    display: none;
  }
  .article-share-open {
    overflow: hidden;
  }
  .article-share-sheet {
    position: fixed;
    z-index: var(--z-header);
    inset: 0;
    display: grid;
    align-items: end;
    padding: 0;
    color: var(--color-text);
  }
  .article-share-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: color-mix(in srgb, var(--color-ink) 46%, transparent);
    backdrop-filter: blur(3px);
    cursor: default;
  }
  .article-share-panel {
    position: relative;
    width: 100%;
    max-height: min(84svh, 680px);
    overflow: auto;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border: 1px solid var(--color-rule);
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    background: var(--color-paper);
    box-shadow: 0 -22px 64px color-mix(in srgb, var(--color-ink) 24%, transparent);
    outline: 0;
  }
  .article-share-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0.2rem 1rem;
    border-bottom: 1px solid var(--color-rule);
  }
  .article-share-panel > header span,
  .article-share-panel > header strong {
    display: block;
  }
  .article-share-panel > header span {
    color: var(--color-text-tertiary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .article-share-panel > header strong {
    max-width: 34ch;
    margin-top: 0.25rem;
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.98rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-share-close {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--color-rule);
    border-radius: 999px;
    background: var(--color-paper);
    color: var(--color-text-secondary);
    cursor: pointer;
  }
  .article-share-close .ui-icon {
    width: 17px;
    height: 17px;
  }
  .article-share-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    padding-top: 1rem;
  }
  .article-share-option {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 70px;
    padding: 0.75rem;
    border: 1px solid var(--color-rule);
    border-radius: 14px;
    background: var(--color-paper);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .article-share-option:hover,
  .article-share-option:focus-within {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    outline: 0;
  }
  .article-share-option > span:last-child {
    min-width: 0;
  }
  .article-share-option strong,
  .article-share-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-share-option strong {
    font-size: 0.86rem;
  }
  .article-share-option small {
    margin-top: 0.16rem;
    color: var(--color-text-tertiary);
    font-size: 0.68rem;
  }
  .article-share-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--color-paper-3);
    color: var(--color-accent-hover);
    font-size: 1rem;
    font-weight: 850;
  }
  .article-share-mark .ui-icon {
    width: 17px;
    height: 17px;
  }
  .article-share-help {
    margin: 0.9rem 0.2rem 0;
    color: var(--color-text-tertiary);
    font-size: 0.7rem;
    line-height: 1.6;
  }

  @media (min-width: 48rem) {
    .article-share-sheet {
      place-items: center;
      padding: 1.5rem;
    }
    .article-share-panel {
      width: min(560px, 100%);
      border-width: 1px;
      border-radius: 20px;
      padding: 1.2rem;
      box-shadow: var(--shadow-lg);
    }
  }

  @media (max-width: 48rem) {
    .blog-index-parity {
      width: calc(100% - 24px);
      max-width: 90rem;
      min-width: 0;
      overflow-x: hidden;
      overflow-x: clip;
    }
    .blog-index-toolbar,
    .blog-search-field,
    .blog-category-mobile,
    .blog-category-native,
    .blog-category-trigger,
    .blog-category-drawer,
    .blog-category-drawer-list,
    .blog-post-grid,
    .blog-card-link,
    .blog-card-parity,
    .blog-card-parity .post-cover,
    .blog-card-parity .post-body,
    .blog-card-parity .post-author-row {
      min-width: 0;
      max-width: 100%;
    }
    .blog-post-grid {
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }
    .blog-card-link,
    .blog-card-parity {
      width: 100%;
    }
    .blog-card-parity {
      overflow: hidden;
    }
    .blog-card-parity .post-body h2,
    .blog-card-parity .post-body h3,
    .blog-card-parity .post-body > p,
    .blog-card-parity .post-author span {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .blog-card-parity .post-author-row {
      width: 100%;
    }
    .blog-card-parity time {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .article-share-options {
      grid-template-columns: 1fr;
    }
  }

  /* Public-page trust and SEO details */
  .page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 1rem;
    padding-bottom: 0.25rem;
    color: var(--text-muted, var(--color-success));
    font-size: 0.88rem;
  }
  .page-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }
  .page-breadcrumb a:hover {
    color: var(--text, var(--color-ink-2));
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .page-breadcrumb span[aria-current="page"] {
    color: var(--text, var(--color-ink-2));
    font-weight: 600;
  }

  /* Round 25: verified showcase templates, editorial transparency, reviewer hub, and pricing clarity */
  .showcase-section {
    overflow: hidden;
  }
  .showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .showcase-card {
    overflow: hidden;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1.25rem;
    background: var(--surface, var(--color-paper));
    box-shadow: 0 18px 48px rgba(31, 41, 55, 0.08);
  }
  .before-after-compare {
    position: relative;
    aspect-ratio: 8/5;
    overflow: hidden;
    background: var(--color-paper-2);
    isolation: isolate;
  }
  .before-after-compare img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .compare-after-wrap {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
    pointer-events: none;
  }
  .compare-after {
    position: absolute;
    inset: 0;
  }
  .compare-divider {
    position: absolute;
    z-index: var(--z-raised);
    top: 0;
    bottom: 0;
    left: var(--compare-position);
    width: 3px;
    transform: translateX(-50%);
    background: var(--color-paper);
    box-shadow:
      0 0 0 1px rgba(31, 41, 55, 0.22),
      0 0 18px rgba(31, 41, 55, 0.2);
    pointer-events: none;
  }
  .compare-divider::after {
    content: "↔";
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--color-paper);
    color: var(--color-ink-2);
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(31, 41, 55, 0.22);
  }
  .before-after-compare input[type="range"] {
    position: absolute;
    z-index: var(--z-raised);
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
  }
  .compare-label {
    position: absolute;
    z-index: var(--z-raised);
    top: 1rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.78);
    color: var(--color-paper);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
  }
  .compare-label.before {
    left: 1rem;
  }
  .compare-label.after {
    right: 1rem;
  }
  .showcase-copy {
    padding: 1.15rem 1.2rem 1.25rem;
  }
  .showcase-copy h3 {
    margin: 0 0 0.45rem;
  }
  .showcase-copy p {
    margin: 0;
    color: var(--text-muted, var(--color-success));
  }
  .showcase-copy small {
    display: block;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border, var(--color-paper-3));
    color: var(--text-muted);
    font-size: 0.78rem;
  }

  .article-author-card {
    color: inherit;
    text-decoration: none;
  }
  .article-author-card em {
    display: block;
    margin-top: 0.1rem;
    color: var(--accent, var(--color-feature));
    font-size: 0.76rem;
    font-style: normal;
    font-weight: 700;
  }
  .article-editorial-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.2rem 1.3rem;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 241, 234, 0.82));
  }
  .article-editorial-note p {
    margin: 0.35rem 0 0.55rem;
    color: var(--text-muted, var(--color-success));
  }

  .pricing-capacity-section {
    padding-block: 2.5rem;
  }
  .pricing-capacity-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1.1rem;
    background: var(--color-paper);
    box-shadow: 0 14px 40px rgba(31, 41, 55, 0.06);
  }
  .pricing-capacity-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }
  .pricing-capacity-table th,
  .pricing-capacity-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border, var(--color-paper-3));
    text-align: center;
    vertical-align: middle;
  }
  .pricing-capacity-table thead th {
    background: var(--color-paper);
    font-size: 0.86rem;
  }
  .pricing-capacity-table tbody th {
    text-align: left;
  }
  .pricing-capacity-table tbody tr:last-child th,
  .pricing-capacity-table tbody tr:last-child td {
    border-bottom: 0;
  }
  .pricing-capacity-table small {
    color: var(--text-muted);
    font-weight: 500;
  }
  .pricing-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .trust-detail-section {
    margin-top: 2.5rem;
    padding: 2rem;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1.35rem;
    background: var(--color-paper);
  }
  .trust-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .trust-provider-grid article {
    padding: 1.2rem;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1rem;
    background: var(--color-paper);
  }
  .trust-provider-grid h3 {
    margin-top: 0;
  }
  .trust-provider-grid p {
    margin-bottom: 0;
    color: var(--text-muted, var(--color-success));
  }
  .trust-contact-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    border-radius: 1.2rem;
    background: var(--color-ink-2);
    color: var(--color-paper);
  }
  .trust-contact-panel h2 {
    margin: 0 0 0.4rem;
    color: var(--color-paper);
  }
  .trust-contact-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
  }
  .trust-contact-panel .center-actions {
    margin: 0;
    flex: 0 0 auto;
  }
  .trust-contact-panel .button.outline {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--color-paper);
  }

  .reviewer-hub-section {
    border-block: 1px solid var(--border, var(--color-rule));
  }
  .reviewer-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
  .reviewer-link-grid a {
    display: flex;
    min-height: 118px;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.15rem;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1rem;
    background: var(--color-paper);
    color: inherit;
    text-decoration: none;
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }
  .reviewer-link-grid a:hover {
    transform: translateY(-2px);
    border-color: rgba(181, 84, 53, 0.45);
    box-shadow: 0 12px 28px rgba(31, 41, 55, 0.08);
  }
  .reviewer-link-grid span {
    color: var(--text-muted, var(--color-success));
    font-size: 0.9rem;
    line-height: 1.45;
  }

  @media (max-width: 64rem) {
    .showcase-grid,
    .trust-provider-grid {
      grid-template-columns: 1fr;
    }
    .pricing-scenario-grid {
      grid-template-columns: 1fr;
    }
    .reviewer-link-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .trust-contact-panel {
      align-items: flex-start;
      flex-direction: column;
    }
    .trust-contact-panel .center-actions {
      justify-content: flex-start;
    }
  }
  @media (max-width: 48rem) {
    .reviewer-link-grid {
      grid-template-columns: 1fr;
    }
    .showcase-copy small {
      display: none;
    }
    .compare-label {
      top: 0.65rem;
    }
    .compare-label.before {
      left: 0.65rem;
    }
    .compare-label.after {
      right: 0.65rem;
    }
    .article-editorial-note {
      grid-template-columns: 1fr;
    }
    .trust-detail-section {
      padding: 1.15rem;
    }
  }

  /* Migrated legacy base rules; retained before the final visual layer. */
  /* base.css — generated by consolidating site.css + parity.css (cascade order preserved). */

  /* Shared a11y utilities — must live in base.css because marketing/auth pages do not load app.css. */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: var(--z-skip);
    transform: translateY(-160%);
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--foreground, var(--color-ink));
    color: var(--color-paper);
    font-weight: 700;
    transition: transform 0.15s;
  }
  .skip-link:focus {
    transform: none;
  }

  /* ============================================================
   Layer: site.css
   ============================================================ */

  * {
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  img {
    max-width: 100%;
    display: block;
  }
  button,
  input,
  textarea,
  select {
    font: inherit;
  }
  .shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
  }
  .narrow {
    max-width: 64rem;
  }
  .site-header {
    height: 76px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(120, 120, 100, 0.16);
    background: rgba(247, 245, 239, 0.88);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
  }
  .nav-wrap {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 750;
    letter-spacing: -0.02em;
  }
  .brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 8px;
  }
  .brand.center {
    justify-content: center;
    font-size: 1.05rem;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: 26px;
    color: var(--color-success);
    font-size: 0.95rem;
  }
  .nav-links a,
  .lang {
    transition: 0.2s;
  }
  .nav-links a:hover,
  .lang:hover {
    color: var(--accent);
  }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }
  .nav-actions form {
    margin: 0;
  }
  .lang {
    padding: 7px 8px;
    color: var(--color-text-subtle);
    font-size: 0.9rem;
  }
  .nav-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.5rem;
  }
  .button {
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: white;
    padding: 11px 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition:
      transform 0.2s,
      box-shadow 0.2s,
      background 0.2s;
  }
  .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(49, 92, 67, 0.18);
  }
  .button.ghost {
    background: transparent;
    color: var(--accent);
    border-color: var(--color-muted);
  }
  .button.small {
    padding: 8px 15px;
    font-size: 0.88rem;
  }
  .button.large {
    padding: 14px 25px;
  }
  .button.full {
    width: 100%;
  }
  .button.danger {
    background: var(--danger);
    border-color: var(--danger);
  }
  .hero {
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    align-items: center;
    gap: 70px;
    padding-top: 65px;
    padding-bottom: 80px;
  }
  .hero.compact {
    min-height: 580px;
  }
  .hero-copy h1,
  .page-hero h1 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.045em;
    margin: 15px 0 24px;
  }
  .hero-copy h1 {
    font-size: clamp(3.4rem, 7vw, 6.7rem);
  }
  .hero.compact .hero-copy h1 {
    font-size: clamp(3rem, 5.5vw, 5.6rem);
  }
  .hero-copy p,
  .page-hero p {
    font-size: 1.17rem;
    color: var(--color-text-subtle);
    max-width: 48rem;
  }
  .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--accent);
  }
  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
  }
  .hero-visual {
    min-height: 480px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
  }
  .orb-one {
    width: 340px;
    height: 340px;
    background: var(--color-rule);
    right: 20px;
    top: 10px;
  }
  .orb-two {
    width: 260px;
    height: 260px;
    background: var(--color-rule);
    left: 20px;
    bottom: 0;
  }
  .product-window {
    position: relative;
    width: min(500px, 95%);
    border: 1px solid rgba(30, 40, 30, 0.14);
    border-radius: 24px;
    background: rgba(255, 253, 248, 0.9);
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: rotate(-2deg);
  }
  .window-top {
    height: 45px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
  }
  .window-top i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-rule);
  }
  .window-content {
    padding: 30px;
  }
  .window-content > span {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 0.12em;
  }
  .window-content h3 {
    font-family: var(--serif);
    font-size: 2rem;
    margin: 7px 0 20px;
  }
  .mock-image {
    height: 220px;
    border-radius: 17px;
    background:
      radial-gradient(circle at 42% 35%, var(--color-rule) 0 17%, transparent 18%),
      linear-gradient(135deg, var(--color-success), var(--color-ink-2));
    position: relative;
    overflow: hidden;
  }
  .mock-image:after {
    content: "";
    position: absolute;
    width: 180px;
    height: 230px;
    border-radius: 90px 90px 25px 25px;
    background: var(--color-rule);
    left: 50%;
    top: 45px;
    transform: translateX(-50%);
  }
  .mock-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }
  .mock-row b {
    height: 10px;
    border-radius: 9px;
    background: var(--color-paper-3);
    flex: 1;
  }
  .section {
    padding: 100px 0;
  }
  .section.tinted {
    background: var(--surface-2);
    border-block: 1px solid var(--line);
  }
  .section-heading {
    margin-bottom: 38px;
  }
  .section-heading.center {
    text-align: center;
  }
  .section-heading h2,
  .split h2 {
    font-family: var(--serif);
    font-size: clamp(2.3rem, 4.2vw, 4.2rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 10px 0;
  }
  .section-heading p,
  .split p {
    color: var(--color-text-subtle);
    font-size: 1.08rem;
  }
  .card-grid {
    display: grid;
    gap: 22px;
  }
  .card-grid.three {
    grid-template-columns: repeat(3, 1fr);
  }
  .feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-card.accent {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .feature-card h3 {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 500;
    margin: 20px 0 7px;
  }
  .feature-card p {
    color: var(--color-text-subtle);
    margin: 0 0 22px;
  }
  .feature-card.accent p {
    color: var(--color-paper-3);
  }
  .feature-card a {
    margin-top: auto;
    color: var(--accent);
    font-weight: 750;
  }
  .feature-card.accent a {
    color: white;
  }
  .link-card {
    transition: 0.2s;
  }
  .link-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }
  .card-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--accent-2);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-size: 1.4rem;
  }
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
  }
  .check-list {
    display: grid;
    gap: 14px;
  }
  .check-list div {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(90, 100, 90, 0.15);
    border-radius: 15px;
  }
  .newsletter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 40px;
  }
  .newsletter form {
    display: flex;
    gap: 10px;
  }
  .newsletter input {
    flex: 1;
  }
  .page-hero {
    text-align: center;
    padding-top: 115px;
    padding-bottom: 70px;
  }
  .page-hero h1 {
    font-size: clamp(3rem, 6vw, 5.8rem);
  }
  .page-hero p {
    margin-inline: auto;
  }
  .product-card {
    background: var(--accent);
    color: white;
    border-radius: 32px;
    padding: 58px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    overflow: hidden;
  }
  .product-card h2 {
    font-family: var(--serif);
    font-size: 4rem;
    font-weight: 500;
    margin: 16px 0;
  }
  .product-card p {
    color: var(--color-paper-3);
    font-size: 1.1rem;
  }
  .badge {
    display: inline-block;
    background: var(--color-paper-3);
    color: var(--color-ink-2);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0;
  }
  .tag-row span {
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.85rem;
  }
  .product-art {
    position: relative;
    min-height: 380px;
  }
  .image-tile {
    position: absolute;
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  }
  .image-tile.a {
    width: 65%;
    height: 65%;
    left: 0;
    top: 10%;
    background: linear-gradient(135deg, var(--color-muted), var(--color-rule));
  }
  .image-tile.b {
    width: 62%;
    height: 60%;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--color-muted), var(--color-paper-3));
  }
  .image-tile.c {
    width: 40%;
    height: 40%;
    right: 20%;
    top: 0;
    background: linear-gradient(135deg, var(--color-rule), var(--color-feature));
  }
  .comparison {
    height: 470px;
    border-radius: 27px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: var(--shadow);
  }
  .comparison > div {
    position: relative;
    display: grid;
    place-items: end start;
    padding: 20px;
  }
  .comparison span {
    background: rgba(20, 20, 20, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 999px;
  }
  .before {
    background: linear-gradient(145deg, var(--color-muted), var(--color-success));
    filter: saturate(0.5);
  }
  .after {
    background: linear-gradient(145deg, var(--color-rule), var(--color-success));
  }
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
  }
  .steps b {
    font-family: var(--serif);
    font-size: 3rem;
    color: var(--color-muted);
  }
  .steps h3 {
    font-family: var(--serif);
    font-size: 1.7rem;
  }
  .steps p {
    color: var(--color-text-subtle);
  }
  .billing-toggle {
    display: inline-flex;
    background: var(--surface-2);
    padding: 5px;
    border-radius: 999px;
    margin-top: 25px;
  }
  .billing-toggle button {
    border: 0;
    background: transparent;
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
  }
  .billing-toggle button.active {
    background: var(--surface);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    align-items: stretch;
  }
  .price-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 29px;
    position: relative;
  }
  .price-card.popular {
    border: 2px solid var(--accent);
    transform: translateY(-10px);
  }
  .popular-label {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 4px 13px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .price-card h3 {
    font-family: var(--serif);
    font-size: 1.7rem;
  }
  .price-card > p {
    color: var(--color-text-subtle);
    min-height: 50px;
  }
  .price {
    display: flex;
    align-items: baseline;
    margin: 25px 0 5px;
  }
  .price strong {
    font-family: var(--serif);
    font-size: 3.2rem;
    font-weight: 500;
  }
  .price span {
    color: var(--color-text-subtle);
  }
  .credit-pill {
    display: inline-block;
    background: var(--accent-2);
    color: var(--accent);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
  }
  .price-card ul {
    list-style: none;
    padding: 0;
    margin: 25px 0;
    min-height: 125px;
  }
  .price-card li {
    padding: 5px 0;
    color: var(--color-success);
  }
  .value-list {
    display: grid;
    gap: 10px;
  }
  .value-list article {
    display: flex;
    gap: 22px;
    padding: 22px;
    border-bottom: 1px solid var(--line);
  }
  .value-list b {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--color-muted);
  }
  .value-list h3 {
    margin: 0;
  }
  .value-list p {
    margin: 3px 0;
  }
  .form-section {
    padding-top: 20px;
    max-width: 64rem;
  }
  .form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 38px;
    box-shadow: 0 12px 45px rgba(45, 50, 40, 0.06);
  }
  .form-card.flat {
    box-shadow: none;
  }
  .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .field {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
  }
  .field label {
    font-weight: 700;
    font-size: 0.9rem;
  }
  .field input,
  .field textarea,
  .field select,
  input,
  textarea,
  select {
    border: 1px solid var(--color-rule);
    background: var(--color-paper);
    color: var(--text);
    border-radius: 12px;
    padding: 12px 14px;
    outline: 0;
    width: 100%;
  }
  .field input:focus,
  .field textarea:focus,
  .field select:focus,
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49, 92, 67, 0.1);
  }
  .validation {
    color: var(--danger);
    margin-bottom: 15px;
  }
  .validation ul {
    padding-left: 18px;
  }
  .form-note {
    color: var(--color-text-subtle);
    font-size: 0.9rem;
  }
  .post-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .post-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
  }
  .post-cover {
    height: 230px;
    background: linear-gradient(135deg, var(--color-success), var(--color-muted));
    display: flex;
    align-items: flex-end;
    padding: 20px;
    color: white;
  }
  .post-cover span {
    background: rgba(10, 20, 10, 0.5);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.78rem;
  }
  .post-body {
    padding: 27px;
  }
  .post-meta {
    color: var(--color-text-subtle);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .post-body h2 {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.2;
  }
  .post-body p {
    color: var(--color-text-subtle);
  }
  .post-body > a {
    color: var(--accent);
    font-weight: 700;
  }
  .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
  }
  .pagination a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
  }
  .pagination a.active {
    background: var(--accent);
    color: white;
  }
  .article {
    max-width: 64rem;
    padding-top: 100px;
    padding-bottom: 90px;
  }
  .article header {
    text-align: center;
    margin-bottom: 65px;
  }
  .article h1 {
    font-family: var(--serif);
    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.04em;
  }
  .article header p {
    font-size: 1.2rem;
    color: var(--color-text-subtle);
  }
  .prose {
    font-family: var(--serif);
    font-size: 1.13rem;
    line-height: 1.9;
  }
  .prose h2 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-top: 2.2em;
  }
  .prose h3 {
    font-size: 1.55rem;
    margin-top: 1.8em;
  }
  .prose a {
    color: var(--accent);
    text-decoration: underline;
  }
  .prose li {
    margin: 0.45em 0;
  }
  .auth-section {
    min-height: calc(100vh - 76px);
    display: grid;
    place-items: center;
    padding: 60px 20px;
  }
  .auth-card {
    width: min(470px, 100%);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 38px;
    box-shadow: var(--shadow);
  }
  .auth-heading {
    text-align: center;
    margin-bottom: 28px;
  }
  .auth-heading h1 {
    font-family: var(--serif);
    font-size: 2.4rem;
    font-weight: 500;
    margin: 25px 0 6px;
  }
  .auth-heading p,
  .auth-foot {
    color: var(--color-text-subtle);
  }
  .form-inline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.87rem;
  }
  .checkbox {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .checkbox input {
    width: auto;
  }
  .divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 25px 0;
    color: var(--color-text-subtle);
    font-size: 0.82rem;
  }
  .divider:before,
  .divider:after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1;
  }
  .oauth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .auth-foot {
    text-align: center;
    margin: 24px 0 0;
  }
  .auth-foot a,
  .form-inline a {
    color: var(--accent);
    font-weight: 700;
  }
  .app-shell,
  .settings-shell,
  .admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    padding-top: 55px;
    padding-bottom: 100px;
    min-height: 700px;
  }
  .side-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: start;
    position: sticky;
    top: 110px;
  }
  .side-nav h3 {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    margin: 22px 12px 7px;
  }
  .side-nav a {
    padding: 10px 13px;
    border-radius: 10px;
    color: var(--color-success);
  }
  .side-nav a:hover,
  .side-nav a.active {
    background: var(--surface-2);
    color: var(--accent);
    font-weight: 700;
  }
  .app-main {
    min-width: 0;
  }
  .app-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
  }
  .app-heading h1 {
    font-family: var(--serif);
    font-size: 2.9rem;
    font-weight: 500;
    margin: 0;
  }
  .app-heading p {
    color: var(--color-text-subtle);
    margin: 5px 0;
  }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-bottom: 22px;
  }
  .stat-grid article,
  .credit-balance {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
  }
  .stat-grid span,
  .credit-balance span {
    display: block;
    color: var(--color-text-subtle);
    font-size: 0.87rem;
  }
  .stat-grid strong {
    display: block;
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 500;
    margin-top: 8px;
  }
  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 20px;
  }
  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  .panel h2 {
    font-family: var(--serif);
    font-weight: 500;
    margin: 0 0 15px;
  }
  .table-wrap {
    overflow: auto;
  }
  .table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
  }
  .table-wrap th {
    text-align: left;
    color: var(--color-text-subtle);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
  }
  .table-wrap td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--color-paper-3);
    white-space: nowrap;
  }
  .status {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--color-paper-3);
    font-size: 0.75rem;
  }
  .status.succeeded,
  .status.active,
  .status.paid {
    background: var(--color-paper-3);
    color: var(--color-success);
  }
  .status.failed,
  .status.past_due {
    background: var(--color-paper-3);
    color: var(--color-danger);
  }
  .status.processing,
  .status.queued {
    background: var(--color-paper-2);
    color: var(--color-info);
  }
  .positive {
    color: var(--color-success);
    font-weight: 700;
  }
  .negative {
    color: var(--color-danger);
    font-weight: 700;
  }
  .empty-card {
    background: var(--surface);
    border: 1px dashed var(--color-rule);
    border-radius: 22px;
    padding: 60px;
    text-align: center;
  }
  .empty-card h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 2rem;
  }
  .empty-inline {
    text-align: center;
    color: var(--color-text-subtle);
    padding: 32px;
  }
  .credit-balance {
    margin-bottom: 20px;
    background: var(--accent);
    color: white;
  }
  .credit-balance span,
  .credit-balance small {
    color: var(--color-rule);
  }
  .credit-balance strong {
    font-family: var(--serif);
    font-size: 4rem;
    font-weight: 500;
    margin-right: 8px;
  }
  .danger-zone {
    border-color: var(--color-rule);
  }
  .tool-shell {
    width: min(1020px, calc(100% - 40px));
    margin: 0 auto;
    padding: 80px 0 100px;
  }
  .tool-heading {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 38px;
  }
  .tool-heading h1 {
    font-family: var(--serif);
    font-size: clamp(3rem, 5.5vw, 5rem);
    font-weight: 500;
    line-height: 1.05;
    margin: 12px 0;
  }
  .tool-heading p {
    color: var(--color-text-subtle);
    font-size: 1.08rem;
  }
  .tool-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 34px;
    box-shadow: var(--shadow);
  }
  .drop-zone {
    height: 290px;
    border: 2px dashed var(--color-rule);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    background: var(--color-paper);
    transition: 0.2s;
  }
  .drop-zone:hover,
  .drop-zone.dragging {
    border-color: var(--accent);
    background: var(--color-paper);
  }
  .drop-zone input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .drop-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-2);
    font-size: 1.8rem;
    color: var(--accent);
  }
  .drop-zone small {
    color: var(--color-text-subtle);
  }
  .preview-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 25px;
  }
  .preview-grid:not([hidden]) {
    display: grid;
  }
  .preview-grid h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }
  .preview-grid img,
  .result-placeholder {
    width: 100%;
    height: 320px;
    object-fit: contain;
    background: var(--color-paper-2);
    border-radius: 16px;
  }
  .result-placeholder {
    display: grid;
    place-items: center;
    color: var(--color-text-subtle);
    overflow: hidden;
  }
  .result-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .tool-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
  }
  .progress-wrap {
    margin-top: 22px;
    text-align: center;
  }
  .progress {
    height: 8px;
    border-radius: 999px;
    background: var(--color-rule);
    overflow: hidden;
  }
  .progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.3s;
  }
  .app-tool-nav {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 45px;
  }
  .app-tool-nav button {
    border: 1px solid var(--line);
    background: transparent;
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
  }
  .app-tool-nav button.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .site-footer {
    background: var(--color-ink-2);
    color: var(--color-paper-2);
    padding: 70px 0 25px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 45px;
  }
  .footer-grid p {
    color: var(--color-muted);
    max-width: 30rem;
  }
  .footer-grid h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
  }
  .footer-grid > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-grid a:not(.brand) {
    color: var(--color-rule);
    font-size: 0.9rem;
  }
  .footer-bottom {
    border-top: 1px solid var(--color-ink-2);
    margin-top: 50px;
    padding-top: 23px;
    color: var(--color-muted);
    font-size: 0.82rem;
  }
  @media (max-width: 64rem) {
    .nav-links {
      display: none;
      position: absolute;
      left: 20px;
      right: 20px;
      top: 70px;
      background: var(--surface);
      border: 1px solid var(--line);
      padding: 18px;
      border-radius: 16px;
      flex-direction: column;
      align-items: flex-start;
      margin: 0;
      box-shadow: var(--shadow);
    }
    .nav-links.open {
      display: flex;
    }
    .nav-toggle {
      display: block;
      margin-left: auto;
    }
    .nav-actions {
      margin-left: 0;
    }
    .nav-actions .button.ghost {
      display: none;
    }
    .hero {
      grid-template-columns: 1fr;
      gap: 20px;
      text-align: center;
    }
    .hero-copy p {
      margin-inline: auto;
    }
    .hero-actions {
      justify-content: center;
    }
    .hero-visual {
      min-height: 420px;
    }
    .pricing-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .card-grid.three {
      grid-template-columns: 1fr 1fr;
    }
    .split {
      gap: 40px;
    }
    .app-shell,
    .settings-shell,
    .admin-shell {
      grid-template-columns: 1fr;
    }
    .side-nav {
      position: static;
      flex-direction: row;
      overflow: auto;
      border-bottom: 1px solid var(--line);
      padding-bottom: 12px;
    }
    .side-nav h3 {
      display: none;
    }
    .side-nav a {
      white-space: nowrap;
    }
    .footer-grid {
      grid-template-columns: 2fr 1fr 1fr;
    }
    .footer-grid > div:last-child {
      display: none;
    }
  }
  @media (max-width: 48rem) {
    .shell {
      width: min(100% - 28px, 1180px);
    }
    .site-header {
      height: 68px;
    }
    .site-header .brand span {
      display: none;
    }
    .nav-actions .lang {
      display: none;
    }
    .hero {
      min-height: auto;
      padding-top: 70px;
    }
    .hero-copy h1 {
      font-size: 3.5rem;
    }
    .hero-visual {
      min-height: 330px;
    }
    .product-window {
      width: 100%;
    }
    .orb-one {
      width: 260px;
      height: 260px;
    }
    .section {
      padding: 70px 0;
    }
    .card-grid.three,
    .pricing-grid,
    .split,
    .steps,
    .post-grid,
    .newsletter,
    .product-card,
    .form-grid,
    .preview-grid:not([hidden]),
    .stat-grid,
    .footer-grid {
      grid-template-columns: 1fr;
    }
    .price-card.popular {
      transform: none;
    }
    .product-card {
      padding: 32px;
    }
    .product-card h2 {
      font-size: 3rem;
    }
    .product-art {
      min-height: 280px;
    }
    .comparison {
      height: 330px;
    }
    .newsletter form {
      flex-direction: column;
    }
    .page-hero {
      padding-top: 85px;
    }
    .page-hero h1 {
      font-size: 3.2rem;
    }
    .form-card,
    .auth-card,
    .tool-card {
      padding: 23px;
    }
    .app-heading {
      align-items: flex-start;
      flex-direction: column;
    }
    .empty-card {
      padding: 35px 20px;
    }
    .tool-shell {
      padding-top: 55px;
    }
    .drop-zone {
      height: 220px;
    }
    .preview-grid img,
    .result-placeholder {
      height: 250px;
    }
    .footer-grid > div:last-child {
      display: flex;
    }
    .nav-actions .button.small {
      padding: 7px 11px;
      font-size: 0.78rem;
    }
  }

  .inline-admin-form {
    margin: 0;
    display: inline-flex;
  }

  /* Commerce and review-readiness disclosures */
  .price-currency {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: middle;
    margin-right: 0.2rem;
  }
  .commerce-disclosure {
    margin-top: 2.5rem;
    padding: 2rem;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1.25rem;
    background: var(--surface, var(--color-paper));
  }
  .commerce-disclosure > div:first-child {
    max-width: 48rem;
    margin-bottom: 1.5rem;
  }
  .commerce-disclosure h2,
  .commerce-disclosure h3 {
    margin-top: 0;
  }
  .commerce-disclosure-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  .commerce-disclosure-grid article {
    padding: 1.15rem;
    border: 1px solid var(--border, var(--color-rule));
    border-radius: 1rem;
    background: var(--surface-muted, var(--color-paper));
  }
  .commerce-disclosure-grid article p {
    margin-bottom: 0.7rem;
  }
  .policy-inline-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.35rem;
    font-size: 0.94rem;
  }
  .policy-inline-links a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .footer-address a {
    display: inline-block;
    margin-top: 0.35rem;
  }
  @media (max-width: 64rem) {
    .commerce-disclosure-grid {
      grid-template-columns: 1fr;
    }
    .commerce-disclosure {
      padding: 1.25rem;
    }
  }

  /* ============================================================
   Layer: parity.css
   ============================================================ */

  /* High-fidelity MVC theme matching the original Claude skin. */

  html {
    background: var(--background);
    color: var(--foreground);
  }
  html body {
    background: var(--background);
    color: var(--color-ink-2);
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    line-height: 1.6;
  }
  html h1,
  html h2,
  html h3 {
    color: var(--foreground);
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.025em;
  }
  .shell {
    width: min(1200px, calc(100% - 32px));
    margin-inline: auto;
  }
  .narrow {
    max-width: 64rem;
  }
  .site-header {
    height: 68px;
    background: color-mix(in srgb, var(--color-paper) 88%, transparent);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(18px);
    transition:
      border-color 0.2s,
      box-shadow 0.2s,
      background 0.2s;
  }
  .site-header.scrolled {
    border-color: var(--border);
    box-shadow: 0 1px 8px color-mix(in srgb, var(--color-ink) 4%, transparent);
    background: color-mix(in srgb, var(--color-paper) 96%, transparent);
  }
  .nav-wrap {
    height: 68px;
    gap: 30px;
  }
  .brand {
    gap: 9px;
    font-weight: 650;
    color: var(--foreground);
  }
  .brand img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .brand span {
    font-family: var(--font-serif);
    font-size: 1.28rem;
    font-weight: 500;
  }
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 18px;
  }
  .desktop-nav > a,
  .nav-menu-trigger {
    border: 0;
    background: transparent;
    color: var(--color-success);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.92rem;
    cursor: pointer;
  }
  .desktop-nav > a:hover,
  .nav-menu-trigger:hover,
  .nav-menu.open > .nav-menu-trigger {
    background: var(--muted);
    color: var(--foreground);
  }
  .nav-menu {
    position: relative;
  }
  .nav-menu-trigger span {
    display: inline-block;
    margin-left: 3px;
    transition: transform 0.2s;
  }
  .nav-menu.open .nav-menu-trigger span {
    transform: rotate(180deg);
  }
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: -10px;
    width: 330px;
    padding: 8px;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: 0.16s;
    z-index: var(--z-sticky);
  }
  .nav-menu.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-dropdown.compact {
    width: 220px;
  }
  .nav-dropdown a {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
  }
  .nav-dropdown a:hover {
    background: var(--muted);
  }
  .nav-dropdown b {
    display: block;
    font-size: 0.91rem;
    font-weight: 650;
    color: var(--foreground);
  }
  .nav-dropdown small {
    display: block;
    margin-top: 3px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.35;
  }
  .nav-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-feature) 10%, transparent);
    color: var(--primary);
    flex: 0 0 auto;
  }
  .nav-actions {
    gap: 9px;
  }
  .locale-pill {
    font-size: 0.84rem;
    color: var(--muted-foreground);
    padding: 8px 9px;
    border-radius: 8px;
  }
  .locale-pill:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .inline-form {
    display: inline-flex;
    margin: 0;
  }
  .button {
    border-radius: 8px;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    font-weight: 650;
    padding: 10px 18px;
  }
  .button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-feature) 35%, transparent);
    transform: translateY(-1px);
  }
  .button.outline,
  .button.ghost {
    background: var(--background);
    color: var(--foreground);
    border-color: var(--color-rule);
    box-shadow: 0 0 0 1px var(--color-rule);
  }
  .button.outline:hover,
  .button.ghost:hover {
    background: var(--muted);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }
  .button.small {
    padding: 8px 14px;
  }
  .button.large {
    padding: 13px 24px;
  }
  .nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    padding: 9px;
    border-radius: 8px;
  }
  .nav-toggle:hover {
    background: var(--muted);
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    background: var(--foreground);
    margin: 5px 0;
    transition: 0.2s;
  }
  .mobile-nav {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--background);
  }
  .site-footer {
    background: var(--color-ink);
    color: var(--color-muted);
    padding: 0;
  }
  .footer-main {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
    padding: 64px 0;
  }
  .footer-brand {
    color: var(--color-paper);
  }
  .footer-brand-block > p {
    max-width: 30rem;
    margin: 20px 0 0;
  }
  .footer-address {
    font-size: 0.84rem;
    line-height: 1.7;
    color: var(--color-muted);
  }
  .footer-main h4,
  .footer-heading {
    color: var(--color-paper);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 4px 0 18px;
  }
  .footer-main > div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .footer-main a {
    font-size: 0.9rem;
    color: var(--color-muted);
  }
  .footer-main a:hover {
    color: var(--color-paper);
  }
  .footer-bottom {
    border-top: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
    padding: 26px 0;
    font-size: 0.86rem;
    color: var(--color-muted);
  }
  /* Original marketing composition */
  .original-hero {
    position: relative;
    border-bottom: 1px solid var(--border);
    background: radial-gradient(circle at 30% 20%, var(--color-paper), transparent 50%), var(--background);
    padding: 96px 0 116px;
    text-align: center;
    overflow: hidden;
  }
  .original-hero-inner {
    max-width: 64rem;
    margin: auto;
  }
  .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--color-feature) 22%, transparent);
    background: color-mix(in srgb, var(--color-paper) 65%, transparent);
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
  }
  .original-hero h1 {
    font-size: clamp(3.3rem, 7vw, 5.15rem);
    line-height: 1.03;
    margin: 30px auto 0;
    max-width: 64rem;
    text-wrap: balance;
  }
  .accent-rule {
    height: 1px;
    width: 96px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
  }
  .original-hero p {
    max-width: 64rem;
    margin: 24px auto 0;
    color: var(--muted-foreground);
    font-size: clamp(1.06rem, 2vw, 1.25rem);
    line-height: 1.7;
    text-wrap: balance;
  }
  .center-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
  }
  .marketing-section {
    padding: 96px 0;
  }
  .marketing-section.muted {
    border-block: 1px solid var(--border);
    background: radial-gradient(circle at 70% 80%, var(--color-paper-2), transparent 50%), var(--muted);
  }
  .section-intro {
    max-width: 48rem;
    margin: 0 auto 52px;
    text-align: center;
  }
  .section-kicker {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--primary);
  }
  .section-intro h2 {
    font-size: clamp(2.3rem, 5vw, 3.65rem);
    line-height: 1.08;
    margin: 14px 0;
  }
  .section-intro p {
    font-size: 1.08rem;
    color: var(--muted-foreground);
  }
  .original-product-card {
    max-width: 64rem;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border);
    transition: 0.25s;
  }
  .original-product-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-ink) 12%, transparent);
    transform: translateY(-1px);
  }
  .original-product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .original-product-visual {
    min-height: 340px;
    background: var(--color-ink);
    color: var(--color-paper);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }
  .original-product-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at 30% 40%,
      color-mix(in srgb, var(--color-paper) 8%, transparent),
      transparent 60%
    );
  }
  .visual-icon {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid color-mix(in srgb, var(--color-paper) 20%, transparent);
    background: color-mix(in srgb, var(--color-paper) 10%, transparent);
    border-radius: 30px;
    display: grid;
    place-items: center;
    box-shadow: 0 24px 50px color-mix(in srgb, var(--color-ink) 25%, transparent);
    font-size: 4.5rem;
  }
  .original-product-copy {
    padding: 52px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .availability {
    display: inline-flex;
    width: max-content;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-feature) 10%, transparent);
    padding: 5px 12px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .original-product-copy h3 {
    font-size: 2.25rem;
    margin: 18px 0 10px;
  }
  .original-product-copy p {
    color: var(--muted-foreground);
    line-height: 1.75;
  }
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 24px;
    color: var(--primary);
    font-weight: 650;
  }
  .text-link:hover {
    text-decoration: underline;
  }
  .feature-four {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }
  .original-feature {
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 16px;
    padding: 28px;
    transition: 0.2s;
  }
  .original-feature:hover {
    border-color: color-mix(in srgb, var(--color-feature) 28%, transparent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
  .feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--color-feature) 10%, transparent);
    color: var(--primary);
    border-radius: 12px;
    font-size: 1.2rem;
  }
  .original-feature h3 {
    font-family: var(--font-sans);
    font-weight: 650;
    font-size: 1.03rem;
    margin: 20px 0 7px;
  }
  .original-feature p {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    line-height: 1.65;
    margin: 0;
  }
  .cta-panel {
    max-width: 64rem;
    margin: auto;
    background: var(--primary);
    color: white;
    border-radius: 14px;
    padding: 76px 42px;
    text-align: center;
  }
  .cta-panel h2 {
    color: white;
    font-size: 2.65rem;
    margin: 0;
  }
  .cta-panel p {
    color: color-mix(in srgb, var(--color-paper) 78%, transparent);
    max-width: 48rem;
    margin: 16px auto 0;
  }
  .cta-panel .button {
    margin-top: 30px;
    background: var(--color-paper);
    color: var(--primary);
    border-color: var(--color-paper);
    box-shadow: 0 0 0 1px var(--color-paper);
  }
  .cta-panel .button:hover {
    background: var(--color-paper-2);
    border-color: var(--color-paper-2);
  }
  .product-list {
    max-width: 64rem;
    margin: 54px auto 0;
    display: grid;
    gap: 20px;
  }
  .product-list-card {
    display: flex;
    align-items: center;
    gap: 30px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    transition: 0.2s;
  }
  .product-list-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
  }
  .product-list-icon {
    width: 94px;
    height: 94px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--secondary);
    color: white;
    border-radius: 24px;
    font-size: 2.6rem;
  }
  .product-list-copy {
    flex: 1;
  }
  .product-list-copy h2 {
    font-size: 2rem;
    margin: 0;
  }
  .product-list-copy p {
    color: var(--muted-foreground);
    margin: 9px 0 0;
  }
  .status-badge {
    display: inline-block;
    margin-left: 10px;
    background: color-mix(in srgb, var(--color-feature) 10%, transparent);
    color: var(--primary);
    border-radius: 999px;
    padding: 5px 10px;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    max-width: 64rem;
    margin: auto;
  }
  .company-card {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--color-paper-2) 55%, transparent);
    border-radius: 24px;
    padding: 34px;
  }
  .company-card dl {
    display: grid;
    gap: 22px;
    margin: 24px 0 0;
  }
  .company-card dt {
    font-size: 0.84rem;
    color: var(--muted-foreground);
  }
  .company-card dd {
    margin: 4px 0 0;
    color: var(--foreground);
    font-weight: 600;
  }
  .values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 24px;
    max-width: 90rem;
    margin: auto;
  }
  .contact-aside {
    display: flex;
    flex-direction: column;
    background: var(--secondary);
    color: var(--secondary-foreground);
    border-radius: 24px;
    padding: 40px;
  }
  .contact-aside h2 {
    color: white;
    font-size: 2rem;
  }
  .contact-aside > p,
  .contact-item p,
  .contact-item a {
    color: color-mix(in srgb, var(--color-paper) 68%, transparent);
  }
  .contact-list {
    display: grid;
    gap: 25px;
    margin-top: 28px;
  }
  .contact-item {
    display: flex;
    gap: 14px;
  }
  .contact-item b {
    display: block;
  }
  .contact-item-email {
    display: inline-block;
    margin-top: 0.35rem;
  }
  .contact-item-icon {
    color: var(--accent);
    font-size: 1.2rem;
  }
  .contact-hours {
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--color-paper) 15%, transparent);
    padding-top: 26px;
    color: color-mix(in srgb, var(--color-paper) 68%, transparent);
    font-size: 0.9rem;
  }
  .contact-form-panel {
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 24px;
    padding: 38px;
    box-shadow: var(--shadow-sm);
  }
  /* Auth fidelity */
  .auth-page-body main {
    min-height: calc(100vh - 68px);
    background: radial-gradient(circle at 50% 20%, var(--color-paper), transparent 45%), var(--muted);
  }
  .auth-shell {
    padding: 68px 16px 88px;
    display: flex;
    justify-content: center;
  }
  .auth-card {
    width: min(450px, 100%);
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 18px;
    padding: 34px;
    box-shadow: var(--shadow-md);
  }
  .auth-card .brand {
    justify-content: center;
  }
  .auth-card h1 {
    text-align: center;
    font-size: 2.35rem;
    margin: 24px 0 4px;
  }
  .auth-card > .auth-subtitle {
    text-align: center;
    color: var(--muted-foreground);
    margin: 0 0 28px;
  }
  .social-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .social-auth form {
    margin: 0;
  }
  .social-auth button {
    width: 100%;
  }
  .auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    margin: 22px 0;
  }
  .auth-divider:before,
  .auth-divider:after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1;
  }
  .password-wrap {
    position: relative;
  }
  .password-wrap input {
    padding-right: 45px;
  }
  .password-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    padding: 7px;
  }
  .auth-bottom {
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted-foreground);
    margin: 22px 0 0;
  }
  .auth-bottom a {
    color: var(--primary);
    font-weight: 650;
  }
  /* Existing app panels re-themed */
  .form-card,
  .panel,
  .tool-card,
  .post-card,
  .feature-card,
  .price-card,
  .empty-card {
    border-color: var(--border);
    background: var(--background);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
  }
  .field input,
  .field textarea,
  .field select,
  input,
  textarea,
  select {
    border-color: var(--border);
    background: var(--background);
    border-radius: 9px;
  }
  .field input:focus,
  .field textarea:focus,
  .field select:focus,
  input:focus,
  textarea:focus,
  select:focus {
    outline: 2px solid color-mix(in srgb, var(--color-feature) 20%, transparent);
    border-color: var(--primary);
  }
  .eyebrow {
    color: var(--primary);
  }
  .status-badge,
  .badge {
    background: color-mix(in srgb, var(--color-feature) 10%, transparent);
    color: var(--primary);
  }
  .credit-balance {
    background: var(--primary);
  }
  .side-nav a.active {
    background: color-mix(in srgb, var(--color-feature) 12%, transparent);
    color: var(--primary);
  }
  .progress span {
    background: var(--primary);
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
      scroll-behavior: auto;
      transition-duration: 0.01ms;
      animation-duration: 0.01ms;
    }
    .reveal {
      opacity: 1;
      transform: none;
    }
  }
  @media (max-width: 64rem) {
    .desktop-nav {
      display: none;
    }
    .nav-toggle {
      display: block;
    }
    .desktop-auth {
      display: none;
    }
    .mobile-nav.open {
      display: block;
    }
    .mobile-nav-inner {
      padding: 14px 0 22px;
      display: grid;
      gap: 2px;
    }
    .mobile-nav a,
    .mobile-nav summary {
      display: block;
      padding: 11px 12px;
      border-radius: 8px;
      color: var(--foreground);
      cursor: pointer;
    }
    .mobile-nav a:hover,
    .mobile-nav summary:hover {
      background: var(--muted);
    }
    .mobile-nav details > a {
      padding-left: 30px;
      color: var(--muted-foreground);
    }
    .mobile-nav summary {
      list-style: none;
    }
    .mobile-nav summary::-webkit-details-marker {
      display: none;
    }
    .mobile-auth {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 12px;
    }
    .footer-main {
      grid-template-columns: 2fr repeat(2, 1fr);
    }
    .footer-main > div:nth-last-child(-n + 2) {
      display: none;
    }
    .feature-four {
      grid-template-columns: repeat(2, 1fr);
    }
    .contact-grid {
      grid-template-columns: 1fr;
    }
    .contact-hours {
      margin-top: 36px;
    }
  }
  @media (max-width: 48rem) {
    .shell {
      width: min(100% - 28px, 1200px);
    }
    .original-hero {
      padding: 74px 0 88px;
    }
    .original-hero h1 {
      font-size: 3.25rem;
    }
    .marketing-section {
      padding: 72px 0;
    }
    .original-product-grid {
      grid-template-columns: 1fr;
    }
    .original-product-visual {
      min-height: 260px;
    }
    .original-product-copy {
      padding: 32px;
    }
    .feature-four,
    .values-grid {
      grid-template-columns: 1fr;
    }
    .cta-panel {
      padding: 58px 24px;
    }
    .cta-panel h2 {
      font-size: 2.2rem;
    }
    .product-list-card {
      align-items: flex-start;
      flex-wrap: wrap;
      padding: 26px;
    }
    .product-list-card > .button {
      width: 100%;
    }
    .about-grid {
      grid-template-columns: 1fr;
      gap: 38px;
    }
    .contact-aside,
    .contact-form-panel {
      padding: 28px;
    }
    .footer-main {
      grid-template-columns: 1fr 1fr;
      padding: 50px 0;
    }
    .footer-brand-block {
      grid-column: 1/-1;
    }
    .footer-main > div:nth-last-child(-n + 2) {
      display: flex;
    }
    .social-auth {
      grid-template-columns: 1fr;
    }
    .nav-actions > .locale-pill {
      display: none;
    }
    .auth-card {
      padding: 26px;
    }
    .site-header,
    .nav-wrap {
      height: 64px;
    }
  }

  /* Workspace shell and dashboard parity */
  .workspace-page-body {
    background: var(--background);
    overflow-x: hidden;
  }
  .workspace-shell {
    min-height: 100svh;
  }
  .workspace-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-raised);
    display: flex;
    width: 256px;
    flex-direction: column;
    padding: 20px 16px;
    border-right: 1px solid var(--border);
    background: var(--background);
  }
  .workspace-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 8px 36px;
    font-family: var(--font-serif);
    font-size: 1.24rem;
    font-weight: 700;
  }
  .workspace-logo {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--primary), var(--color-feature));
    color: var(--color-paper);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--color-feature) 20%, transparent);
  }
  .workspace-nav {
    display: grid;
    gap: 4px;
  }
  .workspace-nav small {
    padding: 0 12px 8px;
    color: var(--muted-foreground);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  .workspace-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--muted-foreground);
    font-size: 0.88rem;
    font-weight: 650;
  }
  .workspace-nav a:hover,
  .workspace-nav a.active {
    background: color-mix(in srgb, var(--color-feature) 8%, transparent);
    color: var(--primary);
  }
  .workspace-nav a.active:before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 3px;
    height: 21px;
    border-radius: 0 4px 4px 0;
    background: var(--primary);
    transform: translateY(-50%);
  }
  .workspace-account {
    margin-top: auto;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
  }
  .workspace-account > a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .workspace-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--muted);
    color: var(--primary);
    font-weight: 750;
  }
  .workspace-account > a > span:last-child {
    display: grid;
    min-width: 0;
  }
  .workspace-account strong,
  .workspace-account small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-account strong {
    font-size: 0.8rem;
  }
  .workspace-account small {
    font-size: 0.68rem;
    color: var(--muted-foreground);
  }
  .workspace-account form {
    margin-top: 8px;
  }
  .workspace-account button {
    width: 100%;
    border: 0;
    border-radius: 9px;
    padding: 7px;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    cursor: pointer;
  }
  .workspace-account button:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .workspace-main {
    min-height: 100svh;
    margin-left: 256px;
    padding-bottom: 20px;
  }
  .workspace-mobile-nav {
    display: none;
  }
  .workspace-dashboard {
    max-width: 90rem;
    margin: 0 auto;
    padding: 30px 32px 54px;
  }
  .workspace-dashboard > h1 {
    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 650;
    margin: 0 0 30px;
  }
  .workspace-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 38px;
  }
  .workspace-stat {
    min-height: 213px;
    padding: 23px;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--background);
  }
  .workspace-stat.primary-tint {
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-feature) 4%, transparent),
      color-mix(in srgb, var(--color-feature) 10%, transparent)
    );
  }
  .workspace-stat-title {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    font-weight: 650;
  }
  .stat-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--muted);
    color: var(--muted-foreground);
  }
  .stat-icon.primary {
    background: color-mix(in srgb, var(--color-feature) 12%, transparent);
    color: var(--primary);
  }
  .workspace-stat > strong {
    display: block;
    margin: 19px 0 12px;
    font-family: var(--font-sans);
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 760;
    text-transform: capitalize;
  }
  .workspace-stat > a {
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
  }
  .workspace-stat > p {
    margin: 16px 0 0;
    color: var(--muted-foreground);
    font-size: 0.76rem;
    line-height: 1.65;
  }
  .quick-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 18px;
  }
  .quick-action-grid a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    font-size: 0.77rem;
    font-weight: 650;
  }
  .quick-action-grid a:first-child span {
    color: var(--primary);
  }
  .workspace-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 14px;
  }
  .workspace-section-heading:not(:first-of-type) {
    margin-top: 35px;
  }
  .workspace-section-heading h2 {
    font-family: var(--font-sans);
    font-size: 1.06rem;
    margin: 0;
  }
  .workspace-section-heading a {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 700;
  }
  .recent-job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .workspace-empty {
    padding: 23px;
    border: 1px dashed var(--border);
    border-radius: 15px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
  }
  .workspace-empty.wide {
    grid-column: 1/-1;
  }
  .recent-job-card {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: 15px;
  }
  .recent-job-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .recent-job-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    text-transform: capitalize;
  }
  .recent-job-card p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 13px 0 9px;
    color: var(--muted-foreground);
    font-size: 0.74rem;
  }
  .recent-job-card time {
    font-size: 0.66rem;
    color: var(--muted-foreground);
  }
  .workspace-table-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 15px;
  }
  .workspace-table-card table {
    margin: 0;
  }
  .workspace-table-card th,
  .workspace-table-card td {
    padding: 13px 15px;
    font-size: 0.75rem;
  }
  .workspace-table-card th {
    background: color-mix(in srgb, var(--color-paper-2) 60%, transparent);
  }
  .workspace-table-card .number {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .workspace-table-card .muted {
    color: var(--muted-foreground);
  }
  .table-empty {
    text-align: center;
    padding: 34px;
    color: var(--muted-foreground);
  }
  .workspace-view-all {
    text-align: center;
    margin-top: 13px;
  }
  .workspace-view-all a {
    font-size: 0.74rem;
    color: var(--muted-foreground);
    font-weight: 650;
  }
  .workspace-view-all a:hover {
    color: var(--primary);
  }
  @media (max-width: 64rem) {
    .workspace-sidebar {
      display: none;
    }
    .workspace-main {
      margin-left: 0;
      padding-bottom: 72px;
    }
    .workspace-mobile-nav {
      position: fixed;
      z-index: var(--z-raised);
      left: 0;
      right: 0;
      bottom: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--color-paper) 94%, transparent);
      backdrop-filter: blur(16px);
    }
    .workspace-mobile-nav[data-mobile-nav-count="4"] {
      grid-template-columns: repeat(4, 1fr);
    }
    .workspace-mobile-nav a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 5px;
      border-radius: 9px;
      color: var(--muted-foreground);
      font-size: 0.64rem;
      font-weight: 650;
    }
    .workspace-mobile-nav a:hover {
      background: var(--muted);
      color: var(--primary);
    }
  }
  @media (max-width: 64rem) {
    .workspace-stat-grid {
      grid-template-columns: 1fr;
    }
    .workspace-stat {
      min-height: auto;
    }
    .recent-job-grid {
      grid-template-columns: 1fr;
    }
    .workspace-dashboard {
      padding: 24px 18px 42px;
    }
  }
  /* Settings pages parity */
  .settings-content {
    max-width: 64rem;
  }
  .settings-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 28px;
  }
  .settings-card-grid.single {
    grid-template-columns: minmax(0, 620px);
  }
  .settings-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--background);
    box-shadow: var(--shadow-sm);
  }
  .settings-card.wide {
    grid-column: 1/-1;
  }
  .settings-card > header {
    padding: 23px 24px 0;
  }
  .settings-card > header h2 {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    margin: 0 0 6px;
  }
  .settings-card > header p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.55;
  }
  .settings-card-body {
    flex: 1;
    padding: 22px 24px;
  }
  .settings-card-body.flush {
    padding: 14px 0 0;
  }
  .settings-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    padding: 15px 24px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.72rem;
  }
  .settings-card > footer .button {
    flex: 0 0 auto;
  }
  .settings-card .field-help,
  .muted-copy {
    color: var(--muted-foreground);
    font-size: 0.73rem;
    line-height: 1.55;
  }
  .settings-card .field-help {
    margin: 8px 0 0;
  }
  .avatar-editor {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .avatar-preview {
    width: 72px;
    height: 72px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--muted);
  }
  .avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .read-only-value {
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--muted);
    color: var(--muted-foreground);
  }
  .danger-card {
    border-color: color-mix(in srgb, var(--color-danger) 34%, transparent);
  }
  .danger-card > header h2 {
    color: var(--color-danger);
  }
  .settings-page .danger-card {
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--border));
  }
  .settings-page .danger-card > header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-danger) 22%, var(--border));
    background: color-mix(in srgb, var(--color-danger) 5%, var(--background));
  }
  .settings-page .danger-card-icon {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-danger) 12%, var(--background));
    color: var(--color-danger);
  }
  .settings-page .danger-card-icon .ui-icon {
    width: 16px;
    height: 16px;
  }
  .settings-page .danger-card > header > div {
    min-width: 0;
    flex: 1;
  }
  .settings-page .danger-card > header h2 {
    margin: 0 0 4px;
  }
  .settings-page .danger-card > header p {
    margin: 0;
  }
  .settings-page .danger-card > footer {
    background: color-mix(in srgb, var(--color-danger) 4%, var(--muted));
  }
  .password-field {
    position: relative;
  }
  .password-field input {
    padding-right: 46px;
  }
  .password-field button {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 38px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    transform: translateY(-50%);
    cursor: pointer;
  }
  .settings-tabs {
    display: flex;
    gap: 4px;
    width: max-content;
    margin-bottom: 24px;
    padding: 4px;
    border-radius: 11px;
    background: var(--muted);
  }
  .settings-tabs a {
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 650;
  }
  .settings-tabs a.active {
    background: var(--background);
    color: var(--foreground);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-ink) 8%, transparent);
  }
  .large-credit-balance {
    font-family: var(--font-sans);
    font-size: 2.45rem;
    font-weight: 760;
  }
  .credit-package-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
  }
  .credit-package {
    position: relative;
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: 14px;
  }
  .credit-package.popular {
    border-color: var(--primary);
  }
  .popular-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--color-paper);
    font-size: 0.65rem;
    font-weight: 700;
    transform: translateX(-50%);
  }
  .package-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .package-top strong {
    font-size: 1.05rem;
  }
  .package-top b {
    color: var(--primary);
    font-size: 1.45rem;
  }
  .credit-package h3 {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    margin: 17px 0 5px;
  }
  .credit-package p {
    min-height: 38px;
    margin: 0 0 15px;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.5;
  }
  .credit-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 210px 90px auto;
    gap: 10px;
    margin-bottom: 16px;
  }
  .credit-filters input,
  .credit-filters select {
    border-radius: 10px;
    background: var(--background);
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 18px;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }
  .pagination a {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
  }
  .pagination a.disabled {
    pointer-events: none;
    opacity: 0.45;
  }
  .plan-heading {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .plan-heading > strong {
    font-family: var(--font-sans);
    font-size: 2rem;
  }
  .plan-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin: 20px 0 0;
  }
  .plan-details > div {
    padding: 12px;
    border-radius: 11px;
    background: var(--muted);
  }
  .plan-details dt {
    color: var(--muted-foreground);
    font-size: 0.67rem;
  }
  .plan-details dd {
    margin: 5px 0 0;
    font-size: 0.78rem;
    font-weight: 650;
  }
  .settings-empty {
    padding: 35px;
    text-align: center;
    color: var(--muted-foreground);
    font-size: 0.78rem;
  }
  @media (max-width: 48rem) {
    .settings-card-grid,
    .settings-card-grid.single {
      grid-template-columns: 1fr;
    }
    .settings-card > footer {
      align-items: flex-start;
      flex-direction: column;
    }
    .avatar-editor {
      align-items: flex-start;
      flex-direction: column;
    }
    .credit-package-grid {
      grid-template-columns: 1fr;
    }
    .credit-filters {
      grid-template-columns: 1fr;
    }
    .plan-details {
      grid-template-columns: 1fr;
    }
  }
  /* Admin parity */
  .admin-content {
    min-width: 0;
  }
  .admin-filter-bar {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-paper-2) 42%, transparent);
  }
  .admin-filter-bar label {
    display: grid;
    gap: 5px;
    min-width: 0;
    flex: 1;
  }
  .admin-filter-bar label span {
    font-size: 0.67rem;
    color: var(--muted-foreground);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .admin-filter-bar input,
  .admin-filter-bar select {
    min-height: 40px;
    border-radius: 9px;
    background: var(--background);
  }
  .admin-filter-bar .button {
    min-height: 40px;
  }
  .admin-table-panel {
    padding: 0;
    overflow: hidden;
  }
  .admin-table-panel table {
    min-width: 0;
  }
  .admin-wrap-cell {
    max-width: 30rem;
    white-space: normal;
    line-height: 1.45;
  }
  .admin-adjust-card {
    display: grid;
    grid-template-columns: 1.1fr 0.5fr 1.3fr auto;
    gap: 10px;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-feature) 4%, transparent);
  }
  .admin-adjust-card input {
    border-radius: 9px;
    background: var(--background);
  }
  .admin-adjust-card p {
    grid-column: 1/-1;
    margin: 0;
    color: var(--primary);
    font-size: 0.74rem;
  }
  @media (max-width: 48rem) {
    .admin-adjust-card {
      grid-template-columns: 1fr;
    }
    .admin-filter-bar {
      align-items: stretch;
      flex-direction: column;
    }
    .admin-filter-bar label {
      width: 100%;
    }
  }
  /* Account menus and original protected/auth layout behavior. */
  .account-popover {
    position: relative;
  }
  .account-popover > summary {
    list-style: none;
    cursor: pointer;
  }
  .account-popover > summary::-webkit-details-marker {
    display: none;
  }
  .account-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--muted);
    color: var(--foreground);
    font-size: 0.78rem;
    font-weight: 750;
  }
  .account-avatar.large {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
  }
  .account-avatar img,
  .workspace-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .header-account-popover > summary {
    padding: 1px;
    border-radius: 50%;
  }
  .header-account-popover[open] > summary,
  .header-account-popover > summary:hover {
    outline: 3px solid color-mix(in srgb, var(--color-feature) 12%, transparent);
  }
  .account-menu-panel {
    position: absolute;
    z-index: var(--z-sticky);
    right: 0;
    top: calc(100% + 10px);
    width: 310px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--background);
    box-shadow: var(--shadow-lg);
    color: var(--foreground);
  }
  .account-menu-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 3px 3px 12px;
  }
  .account-menu-user > span:last-child {
    min-width: 0;
  }
  .account-menu-user strong,
  .account-menu-user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .account-menu-user strong {
    font-size: 0.86rem;
  }
  .account-menu-user small {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 0.7rem;
  }
  .account-credit-card {
    position: relative;
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--muted), color-mix(in srgb, var(--color-feature) 8%, transparent));
  }
  .account-credit-card span {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.7rem;
  }
  .account-credit-card strong {
    display: block;
    margin-top: 5px;
    font-size: 1.45rem;
  }
  .account-credit-balance {
    display: block;
    padding-right: 88px;
    color: inherit;
    border-radius: 8px;
  }
  .account-credit-balance:hover strong {
    color: var(--primary);
  }
  .account-credit-upgrade {
    position: absolute;
    right: 13px;
    bottom: 13px;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--primary);
    color: var(--color-paper);
    font-size: 0.68rem;
    font-weight: 700;
  }
  .account-menu-links {
    display: grid;
    gap: 2px;
  }
  .account-menu-links a,
  .account-menu-logout button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted-foreground);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .account-menu-links a:hover,
  .account-menu-logout button:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .account-menu-links a > span,
  .account-menu-logout button > span {
    display: grid;
    place-items: center;
    width: 18px;
    color: var(--primary);
  }
  .account-menu-separator {
    height: 1px;
    margin: 6px 0;
    background: var(--border);
  }
  .account-menu-logout {
    margin: 7px 0 0;
    padding-top: 7px;
    border-top: 1px solid var(--border);
  }
  .workspace-account-popover > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--background);
    transition: 0.2s;
  }
  .workspace-account-popover > summary:hover {
    background: var(--muted);
  }
  .workspace-account-popover > summary > span:nth-child(2) {
    min-width: 0;
    flex: 1;
  }
  .workspace-account-popover > summary strong,
  .workspace-account-popover > summary small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-account-popover > summary strong {
    font-size: 0.75rem;
  }
  .workspace-account-popover > summary small {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 0.63rem;
  }
  .workspace-account-popover .account-menu-panel {
    right: auto;
    left: 0;
    top: auto;
    bottom: calc(100% + 10px);
    width: 320px;
  }
  .account-chevron {
    color: var(--muted-foreground);
    font-size: 0.7rem;
  }
  .guest-account-panel h3 {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    margin: 2px 0 5px;
  }
  .guest-account-panel p {
    margin: 0 0 13px;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.55;
  }
  .guest-account-panel .button {
    margin-top: 7px;
  }
  .footer-social-link {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: 16px;
    border: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
    border-radius: 50%;
    color: var(--color-muted);
  }
  .footer-social-link:hover {
    background: color-mix(in srgb, var(--color-paper) 10%, transparent);
    color: var(--color-paper);
  }
  .auth-back-link {
    position: fixed;
    z-index: var(--z-sticky);
    top: 22px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 650;
  }
  .auth-back-link:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .auth-page-body main {
    min-height: 100svh;
  }
  .auth-page-body .site-page {
    min-height: 100svh;
  }
  @media (max-width: 64rem) {
    .workspace-account-popover .account-menu-panel {
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 72px;
      top: auto;
      width: auto;
      max-height: calc(100svh - 95px);
      overflow: auto;
    }
    .header-account-popover .account-menu-panel {
      right: 0;
    }
  }
  @media (max-width: 48rem) {
    .auth-back-link span {
      display: none;
    }
    .account-menu-panel {
      position: fixed;
      left: 12px;
      right: 12px;
      top: 70px;
      width: auto;
    }
  }

  /* Auth legal consent and localized error-state parity. */
  .auth-consent {
    width: min(420px, calc(100% - 32px));
    margin: -14px auto 24px;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.55;
    text-align: center;
    text-wrap: balance;
  }
  .auth-consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .auth-consent a:hover {
    color: var(--primary);
  }
  .error-page-shell {
    display: grid;
    min-height: calc(100svh - 68px);
    place-items: center;
    padding: 56px 0;
  }
  .error-page-card {
    display: flex;
    max-width: 48rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .error-page-logo {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 12px;
  }
  .error-page-code {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .error-page-card h1 {
    margin: 0;
    font-size: clamp(2.35rem, 7vw, 4.3rem);
  }
  .error-page-card p {
    max-width: 48rem;
    margin: 18px 0 28px;
    color: var(--muted-foreground);
    font-size: 1rem;
  }
  .error-page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Blog and MDX fidelity */
  .blog-hero {
    padding-bottom: 38px;
  }
  .blog-index-section {
    padding-top: 18px;
  }
  .blog-category-nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    overflow: auto;
  }
  .blog-category-nav a {
    padding: 7px 18px;
    border-radius: 7px;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .blog-category-nav a:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .blog-category-nav a.active {
    background: var(--primary);
    color: var(--color-paper);
  }
  .blog-card-parity {
    display: flex;
    overflow: hidden;
    height: 100%;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--background);
    transition:
      border-color 0.25s,
      box-shadow 0.25s,
      transform 0.25s;
  }
  .blog-card-parity:hover {
    border-color: var(--primary);
    box-shadow: 0 14px 38px color-mix(in srgb, var(--color-feature) 15%, transparent);
    transform: translateY(-2px);
  }
  .blog-card-parity .post-cover {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--muted);
  }
  .blog-card-parity .post-cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
  .blog-card-parity:hover .post-cover > img {
    transform: scale(1.035);
  }
  .post-category-row {
    position: absolute;
    left: 9px;
    bottom: 9px;
    display: flex;
    gap: 5px;
  }
  .post-category-row b {
    padding: 4px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-ink) 58%, transparent);
    color: var(--color-paper);
    font-size: 0.65rem;
    font-weight: 650;
    backdrop-filter: blur(6px);
  }
  .blog-card-parity .post-body {
    display: flex;
    min-height: 210px;
    flex: 1;
    flex-direction: column;
    padding: 18px;
  }
  .blog-card-parity .post-body h2,
  .blog-card-parity .post-body h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.06rem;
    font-weight: 650;
    line-height: 1.45;
  }
  .blog-card-parity .post-body p {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 18px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .post-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.7rem;
  }
  .post-author {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }
  .post-author img {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 50%;
    object-fit: cover;
  }
  .post-author span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .blog-card-parity.compact .post-body {
    min-height: 195px;
  }
  .blog-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--muted-foreground);
  }
  .blog-article-parity {
    max-width: 64rem;
    padding-top: 54px;
  }
  .article-cover {
    overflow: hidden;
    aspect-ratio: 16/9;
    margin-bottom: 30px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--muted);
  }
  .article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .article-header {
    text-align: left;
  }
  .article-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }
  .article-meta-row time,
  .article-author {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .article-meta-row svg,
  .related-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .article-author img {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    object-fit: cover;
  }
  .article-header h1 {
    margin: 26px 0 14px;
    font-family: var(--font-sans);
    font-size: clamp(2.15rem, 5vw, 3.5rem);
    font-weight: 620;
    letter-spacing: -0.035em;
    line-height: 1.08;
  }
  .article-header > p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1.05rem;
  }
  .blog-article-parity .prose {
    margin-top: 42px;
  }
  .article-all-posts {
    display: flex;
    margin: 58px 0 12px;
  }
  .related-posts-section {
    padding-top: 55px;
  }
  .related-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
  }
  .related-heading h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--primary);
    letter-spacing: 0.08em;
  }
  .related-icon {
    display: grid;
    place-items: center;
    color: var(--primary);
  }
  .prose {
    font-size: 0.96rem;
    line-height: 1.82;
  }
  .prose h1,
  .prose h2,
  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    margin: 2em 0 0.7em;
    font-family: var(--font-sans);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }
  .prose h2 {
    font-size: 1.65rem;
  }
  .prose h3 {
    font-size: 1.3rem;
  }
  .prose p {
    margin: 1.15em 0;
  }
  .prose ul,
  .prose ol {
    margin: 1.1em 0;
    padding-left: 1.55em;
  }
  .prose li > ul,
  .prose li > ol {
    margin: 0.35em 0;
  }
  .prose blockquote {
    margin: 1.5em 0;
    padding: 2px 0 2px 20px;
    border-left: 3px solid var(--primary);
    color: var(--muted-foreground);
  }
  .prose blockquote p {
    margin: 0.45em 0;
  }
  .prose pre {
    overflow: auto;
    margin: 1.5em 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--color-ink);
    color: var(--color-paper);
    font-size: 0.83rem;
    line-height: 1.65;
  }
  .prose :not(pre) > code {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--muted);
    font-size: 0.85em;
  }
  .prose a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .prose img {
    margin: 1.7em auto;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .prose hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--border);
  }
  .prose-table-wrap {
    overflow-x: auto;
    margin: 1.6em 0;
    border: 1px solid var(--border);
    border-radius: 11px;
  }
  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
  }
  .prose th,
  .prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .prose th {
    background: var(--muted);
    font-weight: 700;
  }
  .prose tr:last-child td {
    border-bottom: 0;
  }
  @media (max-width: 48rem) {
    .blog-category-nav {
      justify-content: flex-start;
    }
    .article-meta-row {
      align-items: flex-start;
      flex-direction: column;
    }
    .blog-article-parity {
      padding-top: 30px;
    }
    .related-post-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Admin detail drawers/dialogs */
  .admin-detail-dialog {
    width: min(620px, calc(100% - 28px));
    max-height: min(820px, calc(100svh - 36px));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--background);
    color: var(--foreground);
    box-shadow: var(--shadow-lg);
  }
  .admin-detail-dialog::backdrop {
    background: color-mix(in srgb, var(--color-ink) 48%, transparent);
    backdrop-filter: blur(3px);
  }
  .dialog-close-row {
    position: sticky;
    z-index: var(--z-raised);
    top: 0;
    display: flex;
    justify-content: flex-end;
    height: 0;
  }
  .dialog-close-row button {
    position: relative;
    top: 12px;
    right: 12px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    color: var(--muted-foreground);
    font-size: 1.25rem;
    cursor: pointer;
  }
  .admin-detail-dialog > header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 28px 28px 18px;
    border-bottom: 1px solid var(--border);
  }
  .admin-detail-dialog > header h2 {
    margin: 3px 0 0;
    font-family: var(--font-sans);
    font-size: 1.25rem;
  }
  .admin-detail-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--muted);
    font-weight: 750;
  }
  .admin-detail-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .admin-detail-dialog dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 1px;
    background: var(--border);
  }
  .admin-detail-dialog dl > div {
    min-width: 0;
    padding: 13px 16px;
    background: var(--background);
  }
  .admin-detail-dialog dt {
    color: var(--muted-foreground);
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .admin-detail-dialog dd {
    overflow-wrap: anywhere;
    margin: 5px 0 0;
    font-size: 0.75rem;
    line-height: 1.55;
  }
  .admin-user-actions {
    padding: 20px 28px 28px;
  }
  .admin-user-actions form {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    align-items: end;
    gap: 10px;
  }
  .admin-user-actions label {
    display: grid;
    gap: 5px;
  }
  .admin-user-actions label span {
    color: var(--muted-foreground);
    font-size: 0.68rem;
    font-weight: 700;
  }
  .admin-user-actions input,
  .admin-user-actions select {
    min-height: 42px;
    border-radius: 9px;
    background: var(--background);
  }
  @media (max-width: 48rem) {
    .admin-detail-dialog dl {
      grid-template-columns: 1fr;
    }
    .admin-user-actions form {
      grid-template-columns: 1fr;
    }
  }

  /* Local Lucide-compatible SVG symbol set; no font or Node build dependency. */

  /* Navigation and server-form loading feedback */
  .navigation-progress {
    position: fixed;
    z-index: var(--z-skip);
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    opacity: 0;
    pointer-events: none;
    transition:
      width 0.25s ease,
      opacity 0.18s;
  }
  .navigation-progress.active {
    width: 72%;
    opacity: 1;
    animation: navigation-progress 1.5s ease-in-out infinite;
  }
  .button[aria-busy="true"],
  button[aria-busy="true"] {
    cursor: wait;
    opacity: 0.72;
  }
  @keyframes navigation-progress {
    0% {
      width: 8%;
    }
    50% {
      width: 58%;
    }
    100% {
      width: 88%;
    }
  }
  .admin-table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }
  .admin-column-picker {
    position: relative;
  }
  .admin-column-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--foreground);
    font-weight: 650;
    cursor: pointer;
  }
  .admin-column-picker > .admin-column-menu-panel {
    /* popover top-layer */
  }
  .admin-column-picker label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border-radius: 6px;
    color: var(--foreground);
    font-size: 0.72rem;
  }
  .admin-column-picker label:hover {
    background: var(--muted);
  }
  .admin-table-panel th > button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  .admin-table-panel th > button .sort-icon {
    width: 13px;
    height: 13px;
    opacity: 0.38;
  }
  .admin-table-panel th > button[data-sort-direction] .sort-icon {
    opacity: 1;
    color: var(--primary);
  }
  .admin-table-panel [hidden] {
    display: none;
  }
  .copy-inline {
    display: inline-grid;
    width: 27px;
    height: 27px;
    margin-left: 6px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: transparent;
    color: var(--muted-foreground);
    vertical-align: middle;
    cursor: pointer;
  }
  .copy-inline:hover,
  .copy-inline.copied {
    border-color: var(--primary);
    color: var(--primary);
  }
  .copy-inline .ui-icon {
    width: 13px;
    height: 13px;
  }
  .admin-detail-dialog dd a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);
  }
  .admin-detail-dialog dd a .ui-icon {
    width: 13px;
    height: 13px;
  }
  @media (max-width: 48rem) {
    .admin-table-tools {
      align-items: flex-start;
      flex-direction: column;
    }
    .admin-column-picker {
      width: 100%;
    }
    .admin-column-picker-trigger {
      justify-content: center;
    }
    .admin-column-picker-trigger {
      width: 100%;
    }
  }
  .password-toggle .ui-icon,
  .social-auth .ui-icon,
  .auth-bottom .ui-icon,
  .article-all-posts .ui-icon {
    width: 16px;
    height: 16px;
  }
  .auth-bottom a,
  .article-all-posts a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .history-image-placeholder .ui-icon {
    width: 24px;
    height: 24px;
  }

  /* Final icon and interaction parity pass. */
  body.dialog-open {
    overflow: hidden;
  }
  .admin-column-actions {
    display: flex;
    gap: 6px;
    padding: 3px 3px 7px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .admin-column-actions button {
    flex: 1;
    border: 0;
    border-radius: 6px;
    background: transparent;
    padding: 6px;
    color: var(--primary);
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
  }
  .admin-column-actions button:hover,
  .admin-column-actions button:focus-within {
    background: var(--muted);
  }
  .admin-table-panel th[aria-sort="ascending"],
  .admin-table-panel th[aria-sort="descending"] {
    color: var(--primary);
  }
  .admin-table-panel th > button:focus-within {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 3px;
  }
  @media (max-width: 48rem) {
    .admin-detail-dialog {
      width: 100%;
      max-width: none;
      max-height: 88svh;
      margin: auto 0 0;
      border-width: 1px 0 0;
      border-radius: 18px 18px 0 0;
      animation: adminDrawerIn 0.2s ease-out;
    }
    .admin-detail-dialog > header {
      padding: 25px 20px 16px;
    }
    .admin-user-actions {
      padding: 18px 20px 24px;
    }
    .admin-detail-dialog dl > div {
      padding-inline: 20px;
    }
    @keyframes adminDrawerIn {
      from {
        transform: translateY(24px);
        opacity: 0.65;
      }
      to {
        transform: none;
        opacity: 1;
      }
    }
  }
  body.mobile-nav-open {
    overflow: hidden;
  }
  @media (min-width: 64rem) {
    body.mobile-nav-open {
      overflow: auto;
    }
  }

  /* Round 8: ImageAI workspace and public-tool parity */
  .option-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 0.58rem;
    font-weight: 750;
    line-height: 1.4;
    vertical-align: 0.12em;
  }
  .history-login-notice {
    margin: 4px 22px 12px;
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: center;
  }
  .image-tool-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 72px;
  }
  .image-tool-points article {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--background);
    font-size: 0.8rem;
    font-weight: 650;
    text-align: center;
  }
  .image-tool-points .ui-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--primary);
  }
  .image-tool-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--muted);
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .image-tool-badge.remove_background {
    background: var(--color-paper-2);
    color: var(--color-feature);
  }
  .image-tool-badge.enhance {
    background: var(--color-paper);
    color: var(--color-muted);
  }
  .image-tool-badge.upscale {
    background: var(--color-paper);
    color: var(--color-info);
  }
  .workspace-logo .ui-icon {
    width: 20px;
    height: 20px;
    color: var(--color-paper);
  }
  .workspace-mobile-nav a.active {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
    color: var(--primary);
  }

  /* Round 8 visual-detail pass: remove fallback glyphs and keep all ImageAI tools discoverable. */
  .feature-icon .ui-icon {
    width: 22px;
    height: 22px;
  }
  .company-card > .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .contact-item-icon {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    color: var(--primary);
  }
  .contact-item-icon .ui-icon {
    width: 20px;
    height: 20px;
  }
  .contact-hours {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .contact-hours .ui-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--primary);
  }
  @media (max-width: 48rem) {
  }

  /* Round 8 exact ImageAI component parity pass. */
  @media (max-width: 90rem) {
  }
  @media (max-width: 48rem) {
  }

  /* Final ImageAI interaction parity refinements. */
  .preview-meta {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .preview-reset {
    width: 28px;
    height: 28px;
  }
  .process-button-icon.spinning {
    animation: spin 0.8s linear infinite;
  }
  .image-tool-points article {
    display: grid;
  }
  @media (max-width: 48rem) {
  }

  /* Pricing pages aligned with the original component hierarchy. */
  .pricing-page {
    padding-top: 96px;
    padding-bottom: 128px;
  }
  .pricing-page-header {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
  }
  .pricing-page-header h1 {
    margin: 14px 0 0;
    font-size: clamp(2.8rem, 6vw, 4.7rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .pricing-page-header > p:last-child {
    margin: 24px auto 0;
    color: var(--muted-foreground);
    font-size: 1.05rem;
    line-height: 1.75;
  }
  .pricing-overview-card {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    max-width: 64rem;
    margin: 64px auto 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--background);
  }
  .pricing-overview-visual {
    display: flex;
    min-height: 390px;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .pricing-overview-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-paper) 15%, transparent);
  }
  .pricing-overview-icon .ui-icon {
    width: 28px;
    height: 28px;
  }
  .pricing-overview-status {
    display: inline-flex;
    margin-top: 32px;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-paper) 15%, transparent);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pricing-overview-visual h2 {
    margin: 16px 0 0;
    color: inherit;
    font-size: 2rem;
  }
  .pricing-overview-visual p {
    margin: 12px 0 0;
    color: color-mix(in srgb, var(--color-paper) 75%, transparent);
    line-height: 1.7;
  }
  .pricing-overview-visual .button.secondary {
    width: max-content;
    border-color: var(--color-paper);
    border-radius: 999px;
    background: var(--color-paper);
    color: var(--primary);
  }
  .pricing-overview-content {
    padding: 40px;
  }
  .pricing-overview-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
  }
  .pricing-overview-heading span,
  .pricing-overview-heading p {
    color: var(--muted-foreground);
    font-size: 0.78rem;
  }
  .pricing-overview-heading strong {
    display: block;
    margin-top: 4px;
    font-size: 3rem;
    letter-spacing: -0.04em;
  }
  .pricing-plan-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }
  .pricing-plan-summary-grid article {
    padding: 20px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--muted) 50%, transparent);
    transition: 0.18s;
  }
  .pricing-plan-summary-grid article:hover {
    background: color-mix(in srgb, var(--muted) 75%, transparent);
    box-shadow: var(--shadow-sm);
  }
  .pricing-plan-summary-grid strong {
    font-size: 0.86rem;
  }
  .pricing-plan-summary-grid span,
  .plan-credit-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: var(--muted-foreground);
    font-size: 0.76rem;
  }
  .pricing-plan-summary-grid .ui-icon,
  .plan-credit-line .ui-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--primary);
  }
  .pricing-overview-note {
    margin: 28px 0 0;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.65;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .pricing-page-grid {
    max-width: 90rem;
    margin: 40px auto 0;
  }
  .pricing-credit-principles {
    max-width: 64rem;
    margin: 40px auto 0;
  }
  .price-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--border);
  }
  .price-card.popular {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    outline: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
  }
  .price-card h3 {
    margin: 0;
    font-size: 1.18rem;
  }
  .price-card .plan-description {
    min-height: 42px;
    margin: 9px 0 0;
    color: var(--muted-foreground);
    font-size: 0.76rem;
    line-height: 1.55;
  }
  .price-card .price {
    margin-top: 20px;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
  }
  .price-card .price small {
    margin-left: 2px;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
  }
  .yearly-label {
    margin: 8px 0 0;
    color: var(--muted-foreground);
    font-size: 0.74rem;
  }
  .price-card .plan-credit-line {
    margin-top: 20px;
    color: var(--foreground);
  }
  .plan-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
    padding-top: 24px;
  }
  .annual-price-box {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 5%, var(--background));
  }
  .annual-price-box .yearly-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
  }
  .annual-price-box .yearly-label strong {
    font-size: 0.8rem;
  }
  .annual-price-box .yearly-label span {
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 13%, transparent);
    color: var(--primary);
    font-size: 0.62rem;
    font-weight: 750;
  }
  .annual-price-box > small {
    display: block;
    margin-top: 5px;
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }
  .public-credit-packages {
    max-width: 90rem;
    margin: 72px auto 0;
  }
  .public-credit-packages .section-heading.compact {
    margin-bottom: 24px;
  }
  .public-credit-packages .section-kicker,
  .credit-pack-intro .section-kicker {
    margin-bottom: 6px;
  }
  .credit-pack-intro {
    margin-top: 80px;
  }
  .public-product-credit-grid {
    margin-top: 30px;
  }

  .popular-label {
    position: absolute;
    top: -13px;
    left: 24px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--color-paper);
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.04em;
  }
  @media (max-width: 90rem) {
    .pricing-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 64rem) {
    .pricing-overview-card {
      grid-template-columns: 1fr;
    }
    .pricing-overview-visual {
      min-height: 320px;
    }
  }
  @media (max-width: 48rem) {
    .pricing-page {
      padding-top: 72px;
      padding-bottom: 88px;
    }
    .pricing-overview-card {
      margin-top: 44px;
    }
    .pricing-overview-visual,
    .pricing-overview-content {
      padding: 28px;
    }
    .pricing-overview-heading {
      align-items: flex-start;
      flex-direction: column;
    }
    .pricing-plan-summary-grid,
    .pricing-grid {
      grid-template-columns: 1fr;
    }
    .price-card .plan-description {
      min-height: 0;
    }
  }

  /* Round 9 navigation parity: original transparent header and two-column menu cards. */
  .site-header {
    height: auto;
    min-height: 72px;
    padding: 16px 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    backdrop-filter: none;
  }
  .site-header.scrolled {
    border-color: var(--border);
    background: color-mix(in srgb, var(--color-paper) 82%, transparent);
    box-shadow: none;
    backdrop-filter: blur(20px);
  }
  .nav-wrap {
    height: 40px;
    gap: 16px;
    padding-inline: 0;
  }
  .brand {
    flex: 0 0 auto;
    gap: 8px;
  }
  .brand img {
    width: 28px;
    height: 28px;
  }
  .brand span {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
  }
  .desktop-nav {
    flex: 1;
    justify-content: center;
    margin-left: 0;
    gap: 0;
  }
  .desktop-nav > a,
  .nav-menu-trigger {
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .nav-menu-trigger .chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
  }
  .nav-menu.open .nav-menu-trigger .chevron {
    transform: rotate(180deg);
  }
  .nav-dropdown {
    top: calc(100% + 12px);
    left: 50%;
    width: min(544px, calc(100vw - 32px));
    padding: 0;
    overflow: hidden;
    transform: translate(-50%, -6px);
    border-color: color-mix(in srgb, var(--color-paper-3) 90%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-paper) 96%, transparent);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--color-ink) 11%, transparent);
    backdrop-filter: blur(18px);
  }
  .nav-menu.open .nav-dropdown {
    transform: translate(-50%, 0);
  }
  .nav-dropdown.resources {
    width: min(544px, calc(100vw - 32px));
  }
  .nav-dropdown-title {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-paper-3) 75%, transparent);
    color: var(--muted-foreground);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .nav-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
  }
  .nav-dropdown a {
    position: relative;
    display: flex;
    min-height: 80px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 12px;
  }
  .nav-dropdown a:hover,
  .nav-dropdown a:focus {
    border-color: var(--border);
    background: color-mix(in srgb, var(--muted) 70%, transparent);
  }
  .nav-dropdown b {
    font-size: 0.875rem;
  }
  .nav-dropdown small {
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .nav-icon {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--muted-foreground);
  }
  .nav-item-arrow {
    width: 15px;
    height: 15px;
    margin-left: auto;
    opacity: 0;
    color: var(--muted-foreground);
    transition: 0.18s;
  }
  .nav-dropdown a:hover .nav-item-arrow {
    opacity: 1;
    transform: translateX(2px);
  }
  .nav-actions {
    gap: 16px;
  }
  .locale-pill {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
  }
  .locale-pill .ui-icon {
    width: 14px;
    height: 14px;
  }
  .locale-pill:hover {
    border-color: var(--primary);
  }
  .nav-actions .button.small {
    min-height: 36px;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 0.8125rem;
  }
  @media (max-width: 64rem) {
    .site-header {
      min-height: 64px;
      padding: 12px 0;
    }
    .nav-wrap {
      height: 40px;
    }
    .mobile-nav {
      position: fixed;
      inset: 64px 0 0;
      overflow: auto;
      border-top: 1px solid var(--border);
      background: var(--background);
    }
    .mobile-nav-inner {
      min-height: calc(100svh - 64px);
      padding: 18px 0 28px;
    }
    .mobile-auth {
      order: -1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 0 0 14px;
    }
    .mobile-auth .button {
      width: 100%;
      min-height: 44px;
    }
    .mobile-nav details {
      border: 1px solid transparent;
      border-radius: 12px;
    }
    .mobile-nav details[open] {
      border-color: var(--border);
      background: color-mix(in srgb, var(--muted) 35%, transparent);
    }
    .mobile-nav details > a {
      margin: 2px 8px;
      padding-left: 14px;
    }
  }

  /* Round 9 locale menu and final navigation-detail parity. */
  .locale-menu {
    position: relative;
  }
  .locale-menu > summary {
    list-style: none;
    cursor: pointer;
  }
  .locale-menu > summary::-webkit-details-marker {
    display: none;
  }
  .locale-menu[open] .locale-pill {
    border-color: var(--primary);
    color: var(--primary);
  }
  .locale-menu-panel {
    position: absolute;
    z-index: var(--z-sticky);
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: 150px;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    box-shadow: var(--shadow-lg);
  }
  .locale-menu-panel a {
    display: grid;
    grid-template-columns: 22px 1fr 16px;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 0.8125rem;
  }
  .locale-menu-panel a:hover,
  .locale-menu-panel a.active {
    background: var(--muted);
  }
  .locale-menu-panel a .ui-icon {
    width: 14px;
    height: 14px;
    color: var(--primary);
  }
  .resource-grid a {
    min-height: 80px;
  }
  .resource-grid a > span {
    display: flex;
    align-items: center;
  }
  .workspace-mobile-nav button {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.7rem;
    cursor: pointer;
  }
  .workspace-mobile-nav button > span {
    display: grid;
    place-items: center;
  }
  .workspace-mobile-nav button .ui-icon {
    width: 20px;
    height: 20px;
  }
  @media (max-width: 64rem) {
    .locale-menu {
      display: none;
    }
  }

  /* Mobile drawer mirrors the original full-screen collapsible navigation. */
  @media (max-width: 64rem) {
    .mobile-nav-inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
    }
    .mobile-main-link,
    .mobile-nav-group > summary {
      display: flex;
      width: 100%;
      min-height: 44px;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px;
      border-radius: 6px;
      color: var(--muted-foreground);
      font-size: 1rem;
      cursor: pointer;
    }
    .mobile-main-link:hover,
    .mobile-nav-group > summary:hover {
      background: transparent;
      color: var(--foreground);
    }
    .mobile-nav-group > summary {
      list-style: none;
    }
    .mobile-nav-group > summary::-webkit-details-marker {
      display: none;
    }
    .mobile-nav-group > summary .ui-icon {
      width: 16px;
      height: 16px;
      transition: transform 0.18s;
    }
    .mobile-nav-group[open] > summary .ui-icon {
      transform: rotate(90deg);
    }
    .mobile-submenu {
      display: grid;
      gap: 8px;
      margin: 4px 0 8px;
      padding: 8px;
      border: 1px solid color-mix(in srgb, var(--color-paper-3) 70%, transparent);
      border-radius: 16px;
      background: color-mix(in srgb, var(--muted) 25%, transparent);
    }
    .mobile-submenu > a {
      display: flex;
      min-height: 72px;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 12px;
    }
    .mobile-submenu > a:hover {
      border-color: var(--border);
      background: color-mix(in srgb, var(--accent) 55%, transparent);
    }
    .mobile-submenu b {
      display: block;
      color: var(--foreground);
      font-size: 0.875rem;
    }
    .mobile-submenu small {
      display: block;
      margin-top: 4px;
      color: var(--muted-foreground);
      font-size: 0.75rem;
      line-height: 1.45;
    }
    .mobile-item-arrow {
      width: 16px;
      height: 16px;
      margin-left: auto;
      color: var(--muted-foreground);
    }
    .mobile-resource-submenu > a {
      min-height: 52px;
    }
    .mobile-locale-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding: 18px 8px 4px;
      border-top: 1px solid var(--border);
      color: var(--muted-foreground);
      font-size: 0.82rem;
    }
    .mobile-locale-row > div {
      display: flex;
      gap: 4px;
    }
    .mobile-locale-row a {
      padding: 6px 10px;
      border-radius: 7px;
    }
    .mobile-locale-row a.active {
      background: var(--muted);
      color: var(--foreground);
      font-weight: 650;
    }
  }
  .workspace-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-weight: 650;
    cursor: pointer;
  }
  .workspace-inline-action .ui-icon {
    width: 15px;
    height: 15px;
  }
  .quick-action-grid button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    text-align: left;
  }
  .quick-action-grid button:hover {
    border-color: var(--primary);
    background: var(--muted);
  }

  /* Round 9 final visual consistency and interaction polish. */
  button:disabled,
  .button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
  }
  .auth-dialog[open] {
    animation: auth-dialog-in 0.18s ease-out both;
  }
  .auth-dialog::backdrop {
    animation: auth-backdrop-in 0.18s ease-out both;
  }
  @keyframes auth-dialog-in {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes auth-backdrop-in {
    from {
      background: color-mix(in srgb, var(--color-ink) 1%, transparent);
    }
    to {
      background: color-mix(in srgb, var(--color-ink) 45%, transparent);
    }
  }
  .eyebrow,
  .feature-card > a,
  .window-content > span {
    color: var(--primary);
  }
  .feature-card.accent {
    background: var(--secondary);
    border-color: var(--secondary);
  }
  .card-icon,
  .credit-pill {
    background: color-mix(in srgb, var(--primary) 12%, var(--background));
    color: var(--primary);
  }

  /* Round 10: functional and visual parity pass. Token values now live in tokens.css. */
  body {
    min-width: 0;
  }
  .ui-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
  }
  .button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--primary);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    transition:
      background 0.2s,
      box-shadow 0.2s,
      color 0.2s,
      border-color 0.2s,
      transform 0.2s;
  }
  .button.large {
    min-height: 44px;
  }
  .button.small {
    min-height: 34px;
  }
  .button.danger {
    border-color: var(--destructive);
    background: var(--destructive);
    box-shadow: 0 0 0 1px var(--destructive);
    color: var(--color-paper);
  }
  .button.danger:hover {
    border-color: var(--color-danger);
    background: var(--color-danger);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-danger) 30%, transparent);
  }
  input,
  select,
  textarea {
    font: inherit;
    color: var(--foreground);
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 40px;
    border: 1px solid var(--input);
    border-radius: 8px;
    background: var(--background);
    padding: 8px 12px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 2%, transparent);
    transition:
      border-color 0.18s,
      box-shadow 0.18s;
  }
  textarea {
    min-height: 120px;
    resize: vertical;
  }
  input:not([type="checkbox"]):not([type="radio"]):hover,
  select:hover,
  textarea:hover {
    border-color: color-mix(in srgb, var(--color-text-subtle) 38%, var(--color-border));
  }
  input:not([type="checkbox"]):not([type="radio"]):focus,
  select:focus,
  textarea:focus {
    border-color: var(--ring);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent);
  }

  /* Legacy toast details still used alongside the shared system.css component. */
  .toast-region .toast {
    grid-template-columns: 20px 1fr 28px;
    width: 100%;
    margin: 0;
  }
  .toast-region .toast > svg {
    margin-top: 2px;
    color: var(--color-success);
  }
  .toast-region .toast.error > svg {
    color: var(--destructive);
  }
  .toast-region .toast.info > svg {
    color: var(--primary);
  }
  .toast-region .toast span {
    font-size: 0.875rem;
    line-height: 1.45;
  }
  .toast-region .toast button {
    padding: 0;
  }

  /* Navigation interaction parity. */
  .site-header {
    z-index: var(--z-sticky);
  }
  .nav-wrap {
    width: min(1200px, calc(100% - 32px));
  }
  .nav-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .nav-dropdown {
    transform-origin: top center;
  }
  .nav-menu.open .nav-dropdown {
    animation: menu-in 0.18s cubic-bezier(0.2, 0, 0, 1);
  }
  @keyframes menu-in {
    from {
      opacity: 0;
      transform: translate(-50%, -7px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
  }
  .nav-dropdown-grid.resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource-grid a:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
  .nav-actions .account-popover > summary {
    min-height: 36px;
  }
  .navigation-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-drawer);
    width: 0;
    height: 2px;
    background: var(--primary);
    opacity: 0;
    transition:
      width 0.3s,
      opacity 0.2s;
  }
  .navigation-progress.active {
    width: 72%;
    opacity: 1;
    animation: navigation-progress 1.3s ease-in-out infinite;
  }
  @keyframes navigation-progress {
    0% {
      width: 8%;
    }
    55% {
      width: 72%;
    }
    100% {
      width: 92%;
    }
  }

  /* Workspace shell mirrors the original 256px sidebar layout. */
  .workspace-page-body {
    background: var(--workspace-shell);
  }
  .workspace-layout {
    display: grid;
    min-height: 100svh;
    grid-template-columns: 256px minmax(0, 1fr);
    background: var(--workspace-shell);
  }
  .workspace-layout > .workspace-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100svh;
    min-width: 0;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--background);
    padding: 20px 16px;
    z-index: var(--z-raised);
  }
  .workspace-sidebar .brand {
    min-height: 42px;
    padding: 4px 8px;
  }
  .workspace-sidebar-nav {
    display: grid;
    gap: 6px;
    margin-top: 24px;
  }
  .workspace-sidebar-nav > a {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 550;
  }
  .workspace-sidebar-nav > a > span {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
  }
  .workspace-sidebar-nav > a .ui-icon {
    width: 17px;
    height: 17px;
  }
  .workspace-sidebar-nav > a:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .workspace-sidebar-nav > a.active {
    background: var(--accent);
    color: var(--foreground);
    font-weight: 650;
  }
  .workspace-account {
    margin-top: auto;
  }
  .workspace-account-popover {
    position: relative;
  }
  .workspace-account-popover > summary {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    list-style: none;
  }
  .workspace-account-popover > summary::-webkit-details-marker {
    display: none;
  }
  .workspace-account-popover > summary:hover,
  .workspace-account-popover[open] > summary {
    border-color: var(--border);
    background: var(--muted);
  }
  .workspace-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    font-size: 0.8rem;
    font-weight: 700;
  }
  .workspace-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .workspace-account-popover > summary strong {
    font-size: 0.82rem;
  }
  .workspace-account-popover > summary small {
    margin-top: 2px;
    color: var(--muted-foreground);
    font-size: 0.69rem;
  }
  .account-chevron {
    color: var(--muted-foreground);
  }
  .workspace-account-popover[open] .account-chevron {
    transform: rotate(180deg);
  }
  .workspace-account-popover > .account-menu-panel,
  .workspace-account-popover > .guest-account-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: var(--z-raised);
    width: 300px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--popover);
    box-shadow: var(--shadow-xl);
    animation: popover-up 0.18s ease-out;
  }
  @keyframes popover-up {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .workspace-main {
    min-width: 0;
  }
  .workspace-dashboard {
    width: min(1024px, 100%);
    margin: 0 auto;
    padding: 30px 32px 64px;
  }
  .workspace-dashboard > h1 {
    margin: 0 0 28px;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  .workspace-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 40px;
  }
  .workspace-stat {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--background);
  }
  .workspace-stat.primary-tint {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-feature) 4%, transparent),
      color-mix(in srgb, var(--color-feature) 10%, transparent)
    );
  }
  .workspace-stat-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 550;
  }
  .stat-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--muted);
  }
  .workspace-stat > strong {
    display: block;
    margin-top: 16px;
    color: var(--foreground);
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 750;
    letter-spacing: -0.045em;
    text-transform: capitalize;
  }
  .workspace-stat > p {
    margin: 13px 0 0;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    line-height: 1.55;
  }
  .workspace-stat > a,
  .workspace-inline-action {
    margin-top: 16px;
    font-size: 0.82rem;
  }
  .quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
  }
  .quick-action-grid a,
  .quick-action-grid button {
    min-height: 44px;
    border-radius: 12px;
    font-size: 0.78rem;
  }
  .workspace-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
  }
  .workspace-section-heading:not(:first-of-type) {
    margin-top: 38px;
  }
  .workspace-section-heading h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.08rem;
    font-weight: 600;
  }
  .workspace-section-heading a {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .recent-job-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--background);
  }
  .recent-job-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .recent-job-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
  }
  .recent-job-card p {
    overflow: hidden;
    margin: 14px 0 0;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recent-job-card time {
    display: block;
    margin-top: 13px;
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }
  .workspace-empty {
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--color-paper) 45%, transparent);
    color: var(--muted-foreground);
    font-size: 0.82rem;
  }
  .workspace-table-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--background);
  }
  .workspace-table-card table {
    width: 100%;
    border-collapse: collapse;
  }
  .workspace-table-card th,
  .workspace-table-card td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    text-align: left;
  }
  .workspace-table-card tr:last-child td {
    border-bottom: 0;
  }
  .workspace-table-card th {
    background: color-mix(in srgb, var(--color-paper-2) 55%, transparent);
    color: var(--muted-foreground);
    font-weight: 550;
  }
  .workspace-view-all {
    text-align: center;
    margin-top: 15px;
  }
  .workspace-view-all a {
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
  }

  /* Shared protected settings/admin page shell. */
  .settings-shell,
  .admin-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 56px;
    width: min(1120px, calc(100% - 48px));
    padding: 48px 0 80px;
  }
  .side-nav {
    position: sticky;
    top: 96px;
    align-self: start;
    display: grid;
    gap: 3px;
  }
  .side-nav h3 {
    margin: 0 0 12px;
    padding: 0 10px;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .side-nav a {
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--muted-foreground);
    font-size: 0.84rem;
    font-weight: 550;
  }
  .side-nav a:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .side-nav a.active {
    background: var(--accent);
    color: var(--foreground);
    font-weight: 650;
  }
  .app-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
  }
  .app-heading h1,
  .app-heading .app-heading-title {
    margin: 2px 0 0;
    font-family: var(--font-sans);
    font-size: 1.8rem;
    font-weight: 650;
    letter-spacing: -0.035em;
    color: var(--foreground);
  }
  .app-heading p:not(.app-heading-title) {
    margin: 7px 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  .settings-content {
    max-width: 64rem;
  }
  .settings-tabs {
    display: flex;
    gap: 22px;
    margin: -4px 0 24px;
    border-bottom: 1px solid var(--border);
  }
  .settings-tabs a {
    position: relative;
    padding: 10px 1px 12px;
    color: var(--muted-foreground);
    font-size: 0.83rem;
    font-weight: 600;
  }
  .settings-tabs a.active {
    color: var(--foreground);
  }
  .settings-tabs a.active:after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--primary);
    content: "";
  }
  .settings-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
    box-shadow: var(--shadow-xs);
  }
  .settings-card + .settings-card {
    margin-top: 20px;
  }
  .settings-card > header {
    padding: 22px 22px 0;
  }
  .settings-card > header h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 650;
  }
  .settings-card > header p {
    margin: 6px 0 0;
    color: var(--muted-foreground);
    font-size: 0.79rem;
    line-height: 1.55;
  }
  .settings-card-body {
    padding: 22px;
  }
  .settings-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--color-paper-2) 36%, transparent);
    color: var(--muted-foreground);
    font-size: 0.74rem;
  }
  .settings-card form {
    display: grid;
    gap: 17px;
  }
  .settings-card label,
  .admin-user-actions label {
    display: grid;
    gap: 7px;
  }
  .settings-card label > span,
  .admin-user-actions label > span {
    color: var(--foreground);
    font-size: 0.8rem;
    font-weight: 600;
  }
  .settings-card .form-note {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.73rem;
  }
  .settings-card.danger-zone {
    border-color: color-mix(in srgb, var(--color-danger) 24%, transparent);
  }
  .settings-card.danger-zone > footer {
    background: color-mix(in srgb, var(--color-danger) 4%, transparent);
  }
  .profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .profile-avatar-preview {
    display: grid;
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--muted);
    font-size: 1.2rem;
    font-weight: 700;
  }
  .profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .profile-avatar-copy {
    display: grid;
    gap: 8px;
  }
  .profile-avatar-copy input[type="file"] {
    max-width: 100%;
  }
  .security-password-wrap {
    position: relative;
  }
  .security-password-wrap input {
    padding-right: 42px;
  }
  .security-password-wrap button {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .billing-plan-card .settings-card-body {
    display: grid;
    gap: 22px;
  }
  .billing-plan-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
  }
  .billing-plan-heading h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: capitalize;
  }
  .billing-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .billing-meta-grid > div {
    padding: 14px;
    border-radius: 12px;
    background: var(--muted);
  }
  .billing-meta-grid span {
    display: block;
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }
  .billing-meta-grid strong {
    display: block;
    margin-top: 4px;
    font-size: 0.82rem;
  }
  .billing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Credits page matching original cards, data table and detail drawer. */
  .credits-balance-grid {
    display: grid;
    gap: 18px;
  }
  .credit-balance-card .settings-card-body {
    padding-block: 32px;
    text-align: center;
  }
  .large-credit-balance {
    color: var(--foreground);
    font-size: 3.35rem;
    font-weight: 760;
    letter-spacing: -0.055em;
    line-height: 1;
  }
  .balance-unit {
    margin-top: 8px;
    color: var(--muted-foreground);
    font-size: 0.8rem;
  }
  .credit-packages-section {
    margin-top: 38px;
  }
  .section-heading.compact {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .section-heading.compact h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 650;
  }
  .section-heading.compact p {
    margin: 5px 0 0;
    color: var(--muted-foreground);
    font-size: 0.78rem;
  }
  .credit-package-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
  .credit-package {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--background);
  }
  .credit-package.popular {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-feature) 8%, transparent);
  }
  .popular-badge {
    position: absolute;
    top: -11px;
    left: 18px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--color-paper);
    font-size: 0.62rem;
    font-weight: 700;
  }
  .package-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--color-feature) 11%, transparent);
    color: var(--primary);
  }
  .credit-package h3 {
    margin: 16px 0 0;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 650;
  }
  .credit-package > p {
    min-height: 38px;
    margin: 5px 0 0;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.5;
  }
  .package-credit-count,
  .package-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .package-credit-count {
    margin-top: 18px;
  }
  .package-credit-count strong {
    font-size: 1.7rem;
    letter-spacing: -0.04em;
  }
  .package-credit-count span,
  .package-price span {
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }
  .package-price {
    margin-top: 8px;
  }
  .package-price strong {
    font-size: 1rem;
  }
  .package-benefits {
    display: grid;
    gap: 8px;
    margin: 18px 0 20px;
    padding: 0;
    list-style: none;
  }
  .package-benefits li {
    display: flex;
    gap: 7px;
    color: var(--muted-foreground);
    font-size: 0.7rem;
  }
  .package-benefits .ui-icon {
    margin-top: 2px;
    color: var(--primary);
  }
  .credit-package > .button {
    margin-top: auto;
  }
  .data-table-shell {
    min-width: 0;
    overflow: visible;
  }
  .data-table-toolbar {
    display: flex;
    align-items: end;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    overflow: visible;
  }
  .table-search-wrap {
    position: relative;
    flex: 1 1 220px;
  }
  .table-search-wrap > .ui-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
  }
  .table-search-wrap input {
    width: 100%;
    padding-left: 36px;
  }
  .data-table-toolbar select {
    min-width: 0;
  }
  .data-table-toolbar-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
  }
  .column-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .column-menu-panel,
  .column-menu-panel[popover] {
    box-sizing: border-box;
    position: fixed;
    inset: auto;
    z-index: var(--z-header);
    display: none;
    width: var(--column-menu-width, min(320px, calc(100vw - 24px)));
    min-width: 0;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    margin: 0;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--popover, var(--background));
    color: var(--foreground);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-ink) 18%, transparent);
  }
  .column-menu-panel:popover-open,
  .column-menu-panel[data-open="true"] {
    display: grid;
    position: fixed;
    inset: auto;
    margin: 0;
    top: var(--column-menu-top, 72px);
    left: var(--column-menu-left, 12px);
    right: auto;
    bottom: auto;
    width: var(--column-menu-width, min(320px, calc(100vw - 24px)));
  }
  .column-menu-panel > header {
    display: grid;
    gap: 4px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--muted) 42%, var(--background));
    text-align: left;
  }
  .column-menu-panel > header strong {
    font-size: 0.84rem;
    line-height: 1.35;
  }
  .column-menu-panel > header small {
    color: var(--muted-foreground);
    font-size: 0.7rem;
    line-height: 1.45;
  }
  .column-menu-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }
  .column-menu-options label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: color-mix(in srgb, var(--muted) 40%, transparent);
    color: var(--foreground);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
  }
  .column-menu-options label:hover {
    border-color: var(--border);
    background: var(--muted);
  }
  .column-menu-options input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
  }
  .column-menu-options span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
    white-space: normal;
    color: var(--foreground);
  }
  .panel {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
  }
  .admin-table-panel {
    overflow: visible;
  }
  .admin-table-panel table,
  .credit-ledger-panel table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }
  .admin-table-panel th,
  .admin-table-panel td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--border);
    font-size: 0.73rem;
    line-height: 1.45;
    text-align: left;
    vertical-align: middle;
  }
  .admin-table-panel tr:last-child td {
    border-bottom: 0;
  }
  .admin-table-panel th {
    position: relative;
    background: color-mix(in srgb, var(--color-paper-2) 42%, transparent);
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
  }
  .admin-sort-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: inherit;
  }
  .admin-sort-link:hover {
    color: var(--foreground);
  }
  .admin-sort-link .sort-icon {
    width: 13px;
    height: 13px;
    opacity: 0.6;
  }
  .admin-column-label {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
  }
  .table-empty {
    padding: 40px;
    color: var(--muted-foreground);
    text-align: center;
  }
  .admin-wrap-cell {
    min-width: 0;
    max-width: 30rem;
    white-space: normal;
  }
  .credit-amount-button {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
  }
  .positive {
    color: var(--color-success);
  }
  .negative {
    color: var(--destructive);
  }
  .id-copy-badge,
  .copyable-value {
    max-width: 30rem;
    overflow: hidden;
    padding: 4px 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--muted);
    color: var(--foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .credit-type-badge,
  .status,
  .image-tool-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.65rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .status.active,
  .status.succeeded,
  .status.true {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-success);
  }
  .status.failed,
  .status.canceled,
  .status.banned,
  .status.false {
    background: color-mix(in srgb, var(--color-danger) 9%, transparent);
    color: var(--destructive);
  }
  .status.pending,
  .status.queued,
  .status.processing,
  .status.trialing,
  .status.new {
    background: color-mix(in srgb, var(--color-feature) 11%, transparent);
    color: var(--primary);
  }
  .image-tool-badge {
    background: color-mix(in srgb, var(--color-feature) 10%, transparent);
    color: var(--primary);
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
  }
  .pagination a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    font-size: 0.75rem;
  }
  .pagination a:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
  .pagination span {
    color: var(--muted-foreground);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
  }

  /* Original-style right drawers and destructive alert dialog. */
  dialog.detail-drawer,
  dialog.admin-detail-dialog,
  dialog.security-dialog {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--foreground);
  }
  dialog.detail-drawer::backdrop,
  dialog.admin-detail-dialog::backdrop,
  dialog.security-dialog::backdrop {
    background: color-mix(in srgb, var(--color-ink) 42%, transparent);
    backdrop-filter: blur(2px);
  }
  dialog.detail-drawer,
  dialog.admin-detail-dialog {
    width: min(460px, 100vw);
    max-width: none;
    height: 100svh;
    max-height: none;
    margin: 0 0 0 auto;
    animation: drawer-in 0.22s cubic-bezier(0.2, 0, 0, 1);
  }
  @keyframes drawer-in {
    from {
      transform: translateX(24px);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  .drawer-panel,
  dialog.admin-detail-dialog {
    border-left: 1px solid var(--border);
    background: var(--background);
    box-shadow: -18px 0 55px color-mix(in srgb, var(--color-ink) 14%, transparent);
  }
  .drawer-panel {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  .drawer-panel > header,
  dialog.admin-detail-dialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-bottom: 1px solid var(--border);
  }
  .drawer-panel > header h2,
  dialog.admin-detail-dialog h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 650;
  }
  .drawer-panel > header button,
  .dialog-close-row button {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .drawer-panel > header button:hover,
  .dialog-close-row button:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .drawer-content {
    overflow: auto;
    flex: 1;
    padding: 22px;
  }
  .drawer-panel > footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 22px;
    border-top: 1px solid var(--border);
  }
  .detail-list,
  dialog.admin-detail-dialog dl {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
  }
  .detail-list > div,
  dialog.admin-detail-dialog dl > div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .detail-list dt,
  dialog.admin-detail-dialog dt {
    color: var(--muted-foreground);
    font-size: 0.71rem;
  }
  .detail-list dd,
  dialog.admin-detail-dialog dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.74rem;
    text-align: right;
  }
  .detail-list .stack {
    grid-template-columns: 1fr;
  }
  .detail-list .stack dd {
    text-align: left;
  }
  .dialog-close-row {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: var(--z-raised);
    margin: 0;
  }
  .dialog-close-row button {
    background: var(--background);
  }
  dialog.admin-detail-dialog > header {
    padding-right: 66px;
    justify-content: flex-start;
  }
  .admin-detail-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    font-weight: 700;
  }
  dialog.admin-detail-dialog dl {
    overflow: auto;
    max-height: calc(100svh - 190px);
    margin: 0;
    padding: 10px 22px 22px;
  }
  .copy-inline {
    display: inline-grid;
    width: 25px;
    height: 25px;
    margin-left: 6px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .copy-inline:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .admin-user-actions {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 18px 22px;
    border-top: 1px solid var(--border);
    background: var(--background);
  }
  .admin-user-actions form {
    display: grid;
    gap: 12px;
  }
  .admin-user-actions form:has(label) {
    grid-template-columns: 1fr 120px;
  }
  .admin-user-actions form:has(label) .button {
    grid-column: 1/-1;
  }
  dialog.security-dialog {
    width: min(420px, calc(100vw - 32px));
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--background);
    box-shadow: var(--shadow-2xl);
  }
  dialog.security-dialog .security-dialog-content {
    padding: 24px;
  }
  dialog.security-dialog h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 650;
  }
  dialog.security-dialog p {
    color: var(--muted-foreground);
    font-size: 0.8rem;
    line-height: 1.55;
  }
  dialog.security-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 22px;
  }

  /* Admin toolbar parity. */
  .admin-adjust-card {
    display: grid;
    grid-template-columns: 1.2fr 0.65fr 1.5fr auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--muted);
  }
  .admin-adjust-card p {
    grid-column: 1/-1;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.72rem;
  }
  .admin-filter-bar {
    display: flex;
    align-items: end;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .admin-filter-bar label {
    display: grid;
    min-width: 0;
    gap: 5px;
  }
  .admin-filter-bar label:first-of-type {
    flex: 1 1 200px;
  }
  .admin-filter-bar label > span {
    color: var(--muted-foreground);
    font-size: 0.66rem;
    font-weight: 600;
  }
  .admin-filter-bar input,
  .admin-filter-bar select {
    width: 100%;
    min-height: 38px;
    font-size: 0.76rem;
  }
  .admin-table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 13px;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.68rem;
  }
  .admin-column-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .admin-column-picker label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 6px;
  }
  .admin-column-actions {
    display: flex;
    justify-content: space-between;
    padding: 3px 6px 7px;
    border-bottom: 1px solid var(--border);
  }
  .admin-column-actions button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 0.65rem;
    cursor: pointer;
  }

  /* Payment completion card. */
  .payment-page {
    display: grid;
    min-height: calc(100svh - 1px);
    place-items: center;
    padding: 32px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 55%, transparent), transparent 42%);
  }
  .payment-card {
    width: min(420px, 100%);
    padding: 40px 32px 28px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--background);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-ink) 8%, transparent);
    text-align: center;
  }
  .payment-card .payment-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    color: var(--primary);
  }
  .payment-card .payment-icon[hidden],
  .payment-actions[hidden],
  .payment-progress[hidden] {
    display: none;
  }
  .payment-card .payment-icon .ui-icon {
    width: 34px;
    height: 34px;
  }
  .payment-card .payment-icon-success {
    background: color-mix(in srgb, var(--color-success) 12%, var(--background));
    color: var(--color-success);
  }
  .payment-card .payment-icon-error {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--background));
    color: var(--color-danger);
  }
  .payment-card .payment-icon-warning {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--background));
    color: var(--color-warning);
  }
  .payment-card .payment-icon-processing .spinner-icon {
    animation: auth-spin 0.9s linear infinite;
  }
  .payment-card h1 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
  }
  .payment-card p {
    margin: 10px auto 0;
    max-width: 32ch;
    color: var(--muted-foreground);
    font-size: 0.88rem;
    line-height: 1.6;
  }
  .payment-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 28px;
  }
  .payment-actions .button {
    min-height: 44px;
    justify-content: center;
  }
  .payment-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 0;
  }
  .payment-progress span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 35%, var(--border));
    animation: payment-pulse 1.1s ease-in-out infinite;
  }
  .payment-progress span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .payment-progress span:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes payment-pulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scale(0.85);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }
  .payment-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 28px;
    border: 3px solid color-mix(in srgb, var(--color-feature) 18%, transparent);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: auth-spin 0.75s linear infinite;
  }

  /* Pricing cards and purchase intent parity. */
  .plan-feature-list {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }
  .plan-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--foreground);
    font-size: 0.74rem;
    line-height: 1.45;
  }
  .plan-feature-list .ui-icon {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex: 0 0 auto;
    color: var(--primary);
  }
  .price-card {
    min-height: 445px;
  }
  .price-card .plan-actions {
    padding-top: 22px;
  }
  [data-pricing-message]:empty {
    display: none;
  }
  [data-pricing-message] {
    max-width: 64rem;
    margin: -8px auto 60px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 18%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--color-danger) 5%, transparent);
    color: var(--destructive);
    font-size: 0.78rem;
  }

  /* Article/MDX parity with anchored headings and sticky TOC. */
  .article-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 210px;
    justify-content: center;
    gap: 64px;
    align-items: start;
  }
  .article-content-layout > .prose {
    min-width: 0;
  }
  .article-toc {
    position: sticky;
    top: 104px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
  }
  .article-toc > span {
    display: block;
    margin-bottom: 10px;
    color: var(--foreground);
    font-size: 0.72rem;
    font-weight: 700;
  }
  .article-toc nav {
    display: grid;
    gap: 7px;
  }
  .article-toc a {
    color: var(--muted-foreground);
    font-size: 0.7rem;
    line-height: 1.45;
  }
  .article-toc a.level-3 {
    padding-left: 12px;
  }
  .article-toc a:hover {
    color: var(--primary);
  }
  .prose :where(h2, h3, h4) {
    scroll-margin-top: 98px;
  }
  .prose .heading-anchor {
    color: inherit;
    text-decoration: none;
  }
  .prose .heading-anchor:hover:after {
    margin-left: 8px;
    color: var(--primary);
    content: "#";
  }
  .prose pre {
    position: relative;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--color-ink);
    color: var(--color-paper-2);
    padding: 18px;
  }
  .prose code {
    font-size: 0.86em;
  }
  .prose :not(pre) > code {
    padding: 2px 5px;
    border-radius: 5px;
    background: var(--muted);
    color: var(--foreground);
  }
  .prose blockquote {
    border-left-color: var(--primary);
    background: color-mix(in srgb, var(--color-feature) 6%, transparent);
    border-radius: 0 10px 10px 0;
  }
  .prose-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
  }
  .prose-table-wrap table {
    margin: 0;
  }
  .blog-category-mobile {
    display: none;
  }

  /* Auth modal uses the exact same 400px card geometry in all locales. */
  .auth-dialog {
    width: min(400px, calc(100vw - 32px));
    max-width: 30rem;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    overflow: visible;
  }
  .auth-dialog::backdrop {
    background: color-mix(in srgb, var(--color-ink) 45%, transparent);
    backdrop-filter: blur(2px);
  }
  .auth-dialog-card,
  .auth-dialog-frame {
    position: relative;
    width: 400px;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--background);
    box-shadow: 0 20px 65px color-mix(in srgb, var(--color-ink) 18%, transparent);
  }
  .auth-dialog-card .auth-dialog-panel,
  .auth-dialog-frame .auth-dialog-panel {
    width: 100%;
    padding-top: 16px;
  }
  .auth-dialog-card .auth-form,
  .auth-dialog-frame .auth-form,
  .auth-dialog-card .social-auth,
  .auth-dialog-frame .social-auth,
  .auth-dialog-card .auth-divider,
  .auth-dialog-frame .auth-divider,
  .auth-dialog-card .oauth-unavailable-note,
  .auth-dialog-frame .oauth-unavailable-note {
    margin-inline: 16px;
  }
  .auth-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: var(--z-raised);
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .auth-dialog-close:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .auth-dialog-consent {
    width: 400px;
    max-width: 100%;
    margin: 13px auto 0;
    color: color-mix(in srgb, var(--color-paper) 88%, transparent);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 30%, transparent);
  }
  .auth-dialog-consent a {
    color: var(--color-paper);
  }
  .auth-dialog-panel[hidden] {
    display: none;
  }
  .auth-card-footer button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    cursor: pointer;
  }
  .auth-card-footer button:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ImageAI workbench, tabs, history sheet and responsive states. */

  @media (max-width: 90rem) {
  }
  @media (max-width: 64rem) {
    .article-content-layout {
      grid-template-columns: minmax(0, 720px);
    }
    .article-toc {
      display: none;
    }
    .settings-shell,
    .admin-shell {
      grid-template-columns: 1fr;
      gap: 22px;
      width: min(800px, calc(100% - 32px));
      padding-top: 28px;
    }
    .side-nav {
      position: static;
      display: flex;
      overflow: auto;
      gap: 5px;
      padding-bottom: 3px;
    }
    .side-nav a {
      min-width: max-content;
    }
    .settings-content {
      max-width: none;
    }
    .admin-adjust-card {
      grid-template-columns: 1fr 1fr;
    }
    .admin-adjust-card input:nth-of-type(3) {
      grid-column: 1/-1;
    }
    .admin-adjust-card .button {
      grid-column: 1/-1;
    }
  }
  @media (max-width: 48rem) {
    .workspace-layout {
      display: block;
      padding-bottom: 66px;
    }
    .workspace-sidebar {
      display: none;
    }
    .workspace-main {
      min-height: calc(100svh - 64px);
    }
    .workspace-mobile-nav {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: var(--z-sticky);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      min-height: 64px;
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--color-paper) 95%, transparent);
      backdrop-filter: blur(18px);
    }
    .workspace-mobile-nav[data-mobile-nav-count="4"] {
      grid-template-columns: repeat(4, 1fr);
    }
    .workspace-mobile-nav > a,
    .workspace-mobile-account > summary {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      padding: 8px;
      border: 0;
      background: transparent;
      color: var(--muted-foreground);
      font-size: 0.65rem;
      list-style: none;
    }
    .workspace-mobile-nav > a.active {
      color: var(--primary);
    }
    .workspace-mobile-nav .ui-icon {
      width: 20px;
      height: 20px;
    }
    .workspace-mobile-account {
      position: relative;
    }
    .workspace-mobile-account > summary::-webkit-details-marker {
      display: none;
    }
    .workspace-mobile-account-panel {
      position: fixed;
      right: 12px;
      bottom: 72px;
      left: 12px;
      z-index: var(--z-sticky);
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--background);
      box-shadow: var(--shadow-xl);
    }
    .workspace-mobile-account-panel .account-menu-panel {
      position: static;
      width: 100%;
      border: 0;
      box-shadow: none;
    }
    .workspace-dashboard {
      padding: 24px 16px 42px;
    }
    .workspace-stat-grid {
      grid-template-columns: 1fr;
    }
    .workspace-stat:last-child {
      grid-column: auto;
    }
    .recent-job-grid {
      grid-template-columns: 1fr;
    }
    .workspace-section-heading {
      margin-top: 32px;
    }
    .workspace-table-card th:nth-child(2),
    .workspace-table-card td:nth-child(2) {
      display: none;
    }
    dialog.detail-drawer,
    dialog.admin-detail-dialog {
      top: auto;
      bottom: 0;
      width: 100%;
      height: min(88svh, 760px);
      margin: auto 0 0;
      border-radius: 18px 18px 0 0;
      animation: drawer-up 0.22s ease-out;
    }
    .drawer-panel,
    dialog.admin-detail-dialog {
      border-top: 1px solid var(--border);
      border-left: 0;
      border-radius: 18px 18px 0 0;
    }
    .detail-list > div,
    dialog.admin-detail-dialog dl > div {
      grid-template-columns: 120px minmax(0, 1fr);
    }
    .credit-package-grid {
      grid-template-columns: 1fr;
    }
    .billing-meta-grid {
      grid-template-columns: 1fr;
    }
    .settings-card > footer {
      align-items: flex-start;
      flex-direction: column;
    }
    .data-table-toolbar > * {
      width: 100%;
    }
    .data-table-toolbar .column-menu-trigger,
    .data-table-toolbar .data-table-toolbar-actions {
      width: auto;
      max-width: none;
    }
    .data-table-toolbar select {
      min-width: 0;
    }
    .admin-filter-bar > * {
      width: 100%;
    }
    .admin-filter-bar label {
      min-width: 0;
      flex: 1 1 100%;
    }
    .admin-adjust-card input:nth-of-type(3),
    .admin-adjust-card .button {
      grid-column: auto;
    }
    .admin-table-tools > span {
      display: none;
    }
    .blog-category-nav {
      display: none;
    }
    .blog-category-mobile {
      display: grid;
      gap: 7px;
      margin-bottom: 20px;
    }
    .blog-category-mobile label {
      color: var(--muted-foreground);
      font-size: 0.7rem;
      font-weight: 600;
    }
    .blog-category-mobile select {
      width: 100%;
    }
  }
  @media (max-width: 48rem) {
  }

  /* Round 10 final structure parity: dashboard header, settings/admin content and real workspace markup */
  .dashboard-header {
    display: flex;
    height: 64px;
    flex: 0 0 64px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--color-paper) 88%, transparent);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
  }
  .dashboard-breadcrumbs {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 500;
  }
  .dashboard-breadcrumbs .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--muted-foreground);
  }
  .dashboard-breadcrumb-parent {
    color: var(--muted-foreground);
  }
  .dashboard-breadcrumbs strong,
  .dashboard-page-title {
    overflow: hidden;
    margin: 0;
    color: var(--foreground);
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }
  .dashboard-credit-button {
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--background);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent);
    font-size: 0.76rem;
    font-weight: 600;
    transition: 0.16s;
  }
  .dashboard-credit-button:hover {
    border-color: color-mix(in srgb, var(--color-feature) 38%, transparent);
    background: color-mix(in srgb, var(--color-feature) 4%, transparent);
  }
  .dashboard-credit-button .ui-icon {
    width: 15px;
    height: 15px;
    color: var(--primary);
  }
  .dashboard-credit-button strong {
    font-variant-numeric: tabular-nums;
  }
  .dashboard-locale-menu {
    position: relative;
  }
  .dashboard-locale-menu .locale-pill {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--background);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent);
  }
  .settings-page,
  .admin-page {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 72px;
  }
  .settings-page .settings-content,
  .admin-page .admin-content {
    max-width: none;
  }
  .settings-page .app-heading,
  .admin-page .app-heading {
    margin-bottom: 26px;
  }
  .settings-page .app-heading h1,
  .admin-page .app-heading h1,
  .settings-page .app-heading .app-heading-title,
  .admin-page .app-heading .app-heading-title {
    font-size: 1.875rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .settings-page .app-heading p:not(.app-heading-title),
  .admin-page .app-heading p:not(.app-heading-title) {
    margin-top: 7px;
    font-size: 0.875rem;
  }
  .settings-section-stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .settings-row-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
  .settings-row-grid > .settings-card {
    min-width: 0;
  }
  .settings-card {
    border-radius: 12px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 2%, transparent);
  }
  .settings-card > header {
    padding: 24px 24px 0;
  }
  .settings-card > header h2 {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .settings-card > header p {
    font-size: 0.875rem;
  }
  .settings-card-body {
    padding: 24px;
  }
  .settings-card > footer {
    min-height: 64px;
    padding: 16px 24px;
    font-size: 0.875rem;
  }
  .settings-card input,
  .settings-card select {
    height: 40px;
  }
  .avatar-preview.large {
    width: 80px;
    height: 80px;
  }
  .avatar-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .avatar-upload-state {
    min-height: 18px;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }
  .billing-date-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
  }
  .billing-date-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 14px;
    border-radius: 9px;
    background: var(--muted);
    font-size: 0.8rem;
  }
  .billing-date-list span {
    color: var(--muted-foreground);
  }
  .billing-date-list strong {
    font-weight: 600;
  }
  .billing-date-list .trial-date {
    background: color-mix(in srgb, var(--color-feature) 8%, transparent);
  }
  .billing-date-list .cancel-notice {
    display: block;
    color: var(--destructive);
  }
  .alert-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
  }
  .alert-dialog::backdrop {
    background: color-mix(in srgb, var(--color-ink) 45%, transparent);
    backdrop-filter: blur(2px);
  }
  .alert-dialog-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--background);
    box-shadow: var(--shadow-xl);
  }
  .alert-dialog-card > header {
    padding: 24px;
  }
  .alert-dialog-card h2 {
    margin: 0 0 8px;
    font-size: 1.12rem;
  }
  .alert-dialog-card p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.84rem;
    line-height: 1.6;
  }
  .alert-dialog-card footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--muted);
  }
  .admin-page {
    width: min(1440px, calc(100% - 48px));
  }
  .admin-page .admin-content {
    display: block;
  }
  .admin-filter-bar {
    margin-bottom: 16px;
  }
  .admin-table-panel {
    border-radius: 10px;
  }
  .admin-table-panel table {
    min-width: 0;
  }
  .admin-detail-dialog {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(520px, 100vw);
    height: 100svh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: var(--background);
    box-shadow: -20px 0 60px color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .admin-detail-dialog::backdrop {
    background: color-mix(in srgb, var(--color-ink) 40%, transparent);
    backdrop-filter: blur(2px);
  }
  .admin-detail-dialog[open] {
    animation: drawer-in 0.2s ease-out;
  }
  .admin-detail-dialog .dialog-close-row {
    display: flex;
    justify-content: flex-end;
    padding: 16px 18px 0;
  }
  .admin-detail-dialog .dialog-close-row button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }
  .admin-detail-dialog .dialog-close-row button:hover {
    background: var(--muted);
    color: var(--foreground);
  }
  .admin-detail-dialog > header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--border);
  }
  .admin-detail-dialog > header h2 {
    overflow: hidden;
    margin: 3px 0 0;
    font-size: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-detail-dialog > dl {
    display: grid;
    overflow: auto;
    max-height: calc(100svh - 220px);
    margin: 0;
    padding: 20px 24px;
  }
  .admin-detail-dialog > dl > div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
  }
  .admin-detail-dialog dt {
    color: var(--muted-foreground);
    font-size: 0.73rem;
  }
  .admin-detail-dialog dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
  }
  .admin-detail-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    overflow: hidden;
    place-items: center;
    border-radius: 50%;
    background: var(--muted);
    color: var(--primary);
    font-weight: 700;
  }
  .admin-user-actions {
    padding: 18px 24px;
    border-top: 1px solid var(--border);
    background: var(--muted);
  }
  .admin-user-actions form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px auto;
    align-items: end;
    gap: 10px;
  }
  .admin-user-actions label {
    display: grid;
    gap: 6px;
  }
  .admin-user-actions label span {
    font-size: 0.7rem;
    color: var(--muted-foreground);
  }
  .workspace-shell {
    min-height: 100svh;
    background: var(--workspace-shell);
  }
  .workspace-main {
    min-width: 0;
    min-height: 100svh;
    margin-left: 256px;
    padding: 0;
    background: var(--background);
  }
  .workspace-sidebar {
    background: var(--background);
  }
  .workspace-account {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .workspace-account-popover > summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    list-style: none;
  }
  .workspace-account-popover > summary > span:nth-child(2) {
    display: grid;
    min-width: 0;
    flex: 1;
  }
  .workspace-account-popover > summary strong,
  .workspace-account-popover > summary small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-account-popover > summary strong {
    font-size: 0.78rem;
  }
  .workspace-account-popover > summary small {
    font-size: 0.66rem;
    color: var(--muted-foreground);
  }
  .workspace-account-popover .account-menu-panel {
    right: auto;
    bottom: 66px;
    left: 0;
    width: 224px;
  }
  .article-content-layout {
    align-items: start;
  }
  .article-toc {
    top: 92px;
  }
  .article-toc nav {
    max-height: calc(100svh - 132px);
    overflow: auto;
  }
  .article-toc a {
    display: block;
    padding: 5px 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.35;
  }
  .article-toc a:hover {
    color: var(--foreground);
  }
  @media (max-width: 64rem) {
    .dashboard-header {
      padding: 0 16px;
    }
    .dashboard-breadcrumb-parent,
    .dashboard-breadcrumbs > .ui-icon {
      display: none;
    }
    .settings-page,
    .admin-page {
      width: min(100% - 32px, 1200px);
      padding-top: 24px;
    }
    .settings-row-grid {
      grid-template-columns: 1fr;
    }
    .admin-detail-dialog > dl > div {
      grid-template-columns: 120px minmax(0, 1fr);
    }
  }
  @media (max-width: 48rem) {
    .workspace-main {
      margin-left: 0;
      padding-bottom: 64px;
    }
    .dashboard-header {
      position: sticky;
      top: 0;
    }
    .dashboard-credit-button span {
      display: none;
    }
    .dashboard-credit-button {
      padding: 0 10px;
    }
    .settings-page,
    .admin-page {
      width: calc(100% - 28px);
      padding: 22px 0 88px;
    }
    .settings-card > header,
    .settings-card-body {
      padding-right: 20px;
      padding-left: 20px;
    }
    .settings-card > footer {
      padding: 15px 20px;
    }
    .admin-detail-dialog {
      top: auto;
      bottom: 0;
      width: 100%;
      height: min(88svh, 760px);
      border-top: 1px solid var(--border);
      border-left: 0;
      border-radius: 18px 18px 0 0;
    }
    .admin-detail-dialog > dl {
      max-height: calc(88svh - 220px);
    }
    .admin-table-panel {
      margin-right: -14px;
      margin-left: -14px;
      border-right: 0;
      border-left: 0;
      border-radius: 0;
    }
  }
  @media (max-width: 48rem) {
    .dashboard-header {
      height: 58px;
      flex-basis: 58px;
    }
    .dashboard-breadcrumbs {
      font-size: 0.92rem;
    }
    .dashboard-header-actions {
      gap: 8px;
    }
    .settings-page,
    .admin-page {
      width: calc(100% - 24px);
    }
    .avatar-editor {
      gap: 18px;
    }
    .admin-detail-dialog > dl > div {
      grid-template-columns: 1fr;
      gap: 4px;
    }
  }

  /* Small parity corrections for protected navigation and state badges. */
  .workspace-account-popover .account-menu-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .quick-action-grid a,
  .quick-action-grid button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--background);
    color: var(--foreground);
    font: inherit;
    font-size: 0.77rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
  }
  .quick-action-grid a:hover,
  .quick-action-grid button:hover {
    border-color: color-mix(in srgb, var(--color-feature) 35%, transparent);
    background: color-mix(in srgb, var(--color-feature) 4%, transparent);
  }
  .workspace-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .status.true {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-success);
  }
  .status.false {
    background: var(--muted);
    color: var(--muted-foreground);
  }

  /* Round 11: refined locale selector, public ImageAI tools and resilient protected UI. */

  .locale-pill {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
    list-style: none;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent);
    transition:
      border-color 0.16s,
      background 0.16s,
      box-shadow 0.16s,
      transform 0.16s;
  }
  .locale-pill::-webkit-details-marker {
    display: none;
  }
  .locale-pill .ui-icon {
    width: 15px;
    height: 15px;
  }
  .locale-pill:hover,
  .locale-menu[open] > .locale-pill {
    border-color: color-mix(in srgb, var(--color-feature) 42%, transparent);
    background: color-mix(in srgb, var(--color-feature) 6%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-ink) 7%, transparent);
    transform: translateY(-1px);
  }
  .locale-menu-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: var(--z-sticky);
    display: grid;
    width: 206px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--popover);
    box-shadow: 0 18px 46px color-mix(in srgb, var(--color-ink) 14%, transparent);
    animation: locale-pop 0.15s ease-out;
    transform-origin: top right;
  }
  @keyframes locale-pop {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .locale-menu:not([open]) > .locale-menu-panel {
    display: none;
  }
  .locale-menu-panel a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 9px;
    border-radius: 8px;
    color: var(--foreground);
    font-family: var(--font-sans);
    text-decoration: none;
    transition:
      background 0.14s,
      color 0.14s;
  }
  .locale-menu-panel a:hover {
    background: var(--muted);
  }
  .locale-menu-panel a.active {
    background: color-mix(in srgb, var(--color-feature) 8%, transparent);
  }
  .locale-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.05rem;
    line-height: 1;
  }
  .locale-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
  }
  .locale-copy strong {
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.25;
  }
  .locale-copy small {
    color: var(--muted-foreground);
    font-size: 0.66rem;
    line-height: 1.25;
  }
  .locale-check {
    width: 14px;
    height: 14px;
    color: var(--primary);
  }
  .dashboard-locale-menu .locale-pill {
    width: 36px;
    height: 36px;
    border-radius: 9px;
  }
  .dashboard-locale-menu .locale-menu-panel {
    top: calc(100% + 8px);
  }
  .mobile-locale-row {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding: 18px 0 4px;
    border-top: 1px solid var(--border);
  }
  .mobile-locale-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted-foreground);
    font-size: 0.76rem;
    font-weight: 650;
  }
  .mobile-locale-title .ui-icon {
    width: 15px;
    height: 15px;
  }
  .mobile-locale-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .mobile-locale-options a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--background);
    color: var(--foreground);
  }
  .mobile-locale-options a > span {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1rem;
  }
  .mobile-locale-options a strong {
    font-size: 0.8rem;
    font-weight: 600;
  }
  .mobile-locale-options a.active {
    border-color: color-mix(in srgb, var(--color-feature) 50%, transparent);
    background: color-mix(in srgb, var(--color-feature) 7%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-feature) 8%, transparent);
  }

  .image-tool-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: min(1180px, calc(100% - 40px));
    padding: 0 0 78px;
  }
  .image-tool-points article {
    position: relative;
    display: flex;
    min-height: 80px;
    align-items: center;
    justify-content: center;
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--background);
    color: var(--foreground);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-ink) 2%, transparent);
  }
  .image-tool-points article:before {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-right: 9px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-feature) 11%, transparent);
    color: var(--primary);
    content: "✓";
    font-size: 0.68rem;
    font-weight: 800;
  }

  /* Preserve protected page content when optional navigation widgets fail. */
  .workspace-main {
    isolation: isolate;
  }
  .workspace-main > section,
  .workspace-main > .settings-page,
  .workspace-main > .admin-page {
    position: relative;
    z-index: var(--z-raised);
  }
  .workspace-content-warning {
    margin: 18px 24px;
    padding: 12px 14px;
    border: 1px solid var(--color-feature);
    border-radius: 10px;
    background: var(--color-paper);
    color: var(--color-warning);
    font-size: 0.8rem;
  }

  .locale-menu-panel a {
    grid-template-columns: 28px minmax(0, 1fr) 16px;
  }
  .locale-name {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 550;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .locale-copy {
    display: none;
  }

  /* Round 11 final parity: match the original compact locale menu and clean tool pages. */
  .locale-menu-panel {
    width: 174px;
    padding: 5px;
    border-radius: 9px;
  }
  .locale-menu-panel a {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 6px;
  }
  .locale-menu-panel a.active {
    background: var(--muted);
  }
  .locale-flag {
    font-size: 1rem;
  }
  .locale-name {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25;
  }
  .locale-check {
    display: none;
  }

  .image-tool-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 80px;
  }
  .image-tool-points article {
    display: block;
    min-height: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card, var(--background));
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    box-shadow: none;
  }
  .image-tool-points article:before {
    display: none;
  }

  /* Round 12: locale trigger icon-only + admin drawer layout fixes */
  .locale-pill {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .locale-pill .ui-icon {
    font-size: 1rem;
  }
  dialog.admin-detail-dialog:not([open]) {
    display: none;
    position: fixed;
    inset: auto;
    width: 0;
    height: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    visibility: hidden;
    pointer-events: none;
    animation: none;
  }
  .admin-detail-dialog-portal {
    position: fixed;
    inset: 0;
    width: 0;
    height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    z-index: var(--z-sticky);
  }
  .admin-detail-dialog-portal dialog[open] {
    pointer-events: auto;
  }
  dialog.admin-detail-dialog[open] {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(520px, 100vw);
    height: 100svh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: var(--background);
    box-shadow: -20px 0 60px color-mix(in srgb, var(--color-ink) 16%, transparent);
    visibility: visible;
    pointer-events: auto;
  }
  dialog.admin-detail-dialog[open]::backdrop {
    background: color-mix(in srgb, var(--color-ink) 40%, transparent);
    backdrop-filter: blur(2px);
  }
  @media (max-width: 48rem) {
    dialog.admin-detail-dialog[open] {
      top: auto;
      bottom: 0;
      width: 100%;
      height: min(88svh, 760px);
      border-top: 1px solid var(--border);
      border-left: 0;
      border-radius: 18px 18px 0 0;
    }
  }
  .workspace-main:has(.admin-page, .settings-page) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .workspace-main:has(.admin-page, .settings-page) > .dashboard-header {
    flex: 0 0 auto;
  }
  .workspace-main:has(.admin-page, .settings-page) > .admin-page,
  .workspace-main:has(.admin-page, .settings-page) > .settings-page {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Round 13: keep workspace-shell sidebar fixed — sticky/100svh rules are for workspace-layout only */
  .workspace-shell > .workspace-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-raised);
    width: 256px;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  dialog.detail-drawer:not([open]) {
    display: none;
    position: fixed;
    inset: auto;
    width: 0;
    height: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    visibility: hidden;
    pointer-events: none;
    animation: none;
  }
  dialog.detail-drawer[open] {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(460px, 100vw);
    max-width: none;
    height: 100svh;
    max-height: none;
    margin: 0 0 0 auto;
  }
  @media (max-width: 48rem) {
    dialog.detail-drawer[open] {
      top: auto;
      bottom: 0;
      width: 100%;
      height: min(88svh, 760px);
      margin: auto 0 0;
      border-radius: 18px 18px 0 0;
    }
  }

  /* Round 14: settings dashboard pages — sans headings, aligned padding, card polish */
  .settings-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 16px 72px;
  }
  @media (min-width: 64rem) {
    .settings-page {
      padding: 24px 24px 72px;
    }
  }
  .settings-page .settings-content {
    max-width: none;
    width: 100%;
  }
  .settings-page .app-heading {
    margin-bottom: 32px;
  }
  .settings-page .app-heading h1,
  .settings-page .app-heading .app-heading-title {
    font-family: var(--font-sans);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--foreground);
  }
  .settings-page .app-heading p:not(.app-heading-title) {
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted-foreground);
  }
  .settings-page .app-heading .app-heading-title + p {
    margin-top: 8px;
  }
  .settings-page .settings-card > header h2,
  .settings-page .settings-card > header p {
    font-family: var(--font-sans);
  }
  .settings-page .settings-section-stack {
    gap: 32px;
  }
  .settings-page .settings-row-grid {
    gap: 32px;
  }
  .settings-page .settings-row-grid.billing-row,
  .settings-page .settings-row-grid:has(> :only-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-page .settings-row-grid.billing-row > .settings-card,
  .settings-page .settings-row-grid:has(> :only-child) > .settings-card {
    grid-column: 1;
    max-width: 100%;
  }
  @media (max-width: 64rem) {
    .settings-page .settings-row-grid.billing-row,
    .settings-page .settings-row-grid:has(> :only-child) {
      grid-template-columns: 1fr;
    }
  }
  .settings-page .plan-heading {
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  .settings-page .plan-heading > strong {
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .settings-page .plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--foreground);
  }
  .settings-page .plan-badge .ui-icon {
    width: 12px;
    height: 12px;
  }
  .settings-page .plan-badge.trial {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
    background: color-mix(in srgb, var(--color-paper-2) 45%, transparent);
  }
  .settings-page .plan-badge.active {
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 28%, transparent);
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
  }
  .settings-page .muted-copy {
    font-size: 0.875rem;
    line-height: 1.55;
  }
  .settings-page .billing-plan-card {
    display: flex;
    flex-direction: column;
  }
  .settings-page .billing-plan-card .settings-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
  }
  .settings-page .billing-plan-card > footer {
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    background: var(--muted);
  }
  .settings-page .billing-plan-card > footer:has(span:not(:empty)) {
    justify-content: space-between;
  }
  .settings-page .billing-history-card {
    grid-column: 1/-1;
  }
  .settings-page .billing-history-card .settings-card-body.flush {
    padding-top: 16px;
    padding-bottom: 0;
  }
  .settings-page .billing-history-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .settings-page .billing-history-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
  }
  .settings-page .billing-history-table th,
  .settings-page .billing-history-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: left;
    vertical-align: middle;
  }
  .settings-page .billing-history-table th {
    background: color-mix(in srgb, var(--color-paper-2) 42%, transparent);
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
  }
  .settings-page .billing-history-table tr:last-child td {
    border-bottom: 0;
  }
  .settings-page .billing-kind-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--background);
    font-size: 0.68rem;
    font-weight: 650;
    white-space: nowrap;
  }
  .settings-page .billing-kind-badge.subscription {
    color: var(--color-info);
    border-color: color-mix(in srgb, var(--color-info) 22%, transparent);
    background: color-mix(in srgb, var(--color-info) 6%, transparent);
  }
  .settings-page .billing-kind-badge.credits {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 22%, transparent);
    background: color-mix(in srgb, var(--color-warning) 7%, transparent);
  }
  .settings-page .billing-history-card > footer {
    justify-content: space-between;
    gap: 16px;
  }
  @media (max-width: 48rem) {
    .settings-page .billing-history-card > footer {
      align-items: flex-start;
      flex-direction: column;
    }
  }
  .settings-page .settings-tabs {
    margin-top: 0;
    margin-bottom: 24px;
  }
  .settings-page .large-credit-balance {
    font-family: var(--font-sans);
  }

  /* Round 15: auth dialog captcha, credits drawer portal, settings polish, newsletter card */
  .credit-detail-dialog-portal {
    position: fixed;
    inset: 0;
    width: 0;
    height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
    z-index: var(--z-sticky);
  }
  .credit-detail-dialog-portal dialog[open] {
    pointer-events: auto;
  }
  .settings-page .settings-card.reveal,
  .settings-page .credit-package.reveal {
    opacity: 1;
    transform: none;
  }
  .settings-page .settings-tabs a {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 650;
  }
  .settings-page .credit-package-grid,
  .settings-page .credits-balance-grid {
    gap: 24px;
  }
  /* Round 16: pixel-level marketing/blog/workspace parity vs original Claude skin */
  .button.pill,
  .center-actions .button,
  .cta-panel .button,
  .pricing-overview-visual .button,
  .original-hero .button {
    border-radius: 999px;
    padding-inline: 28px;
  }
  .button.large.pill {
    padding: 13px 28px;
  }
  .original-product-card,
  .product-list-card {
    border-radius: 24px;
  }
  .original-feature {
    border-radius: 16px;
  }
  .cta-panel {
    border-radius: 24px;
    max-width: 64rem;
    padding: 80px 48px;
  }
  .cta-panel h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
  }
  .site-header {
    height: auto;
    min-height: 72px;
    padding: 16px 0;
    background: transparent;
    border-bottom-color: transparent;
  }
  .site-header.scrolled {
    background: color-mix(in srgb, var(--color-paper) 80%, transparent);
    border-bottom-color: var(--border);
    backdrop-filter: blur(18px);
    box-shadow: none;
  }
  .nav-wrap {
    height: auto;
    min-height: 40px;
  }
  .brand span {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.02em;
  }
  .price-card.popular {
    transform: none;
    box-shadow: var(--shadow-md);
    outline: 2px solid color-mix(in srgb, var(--color-feature) 35%, transparent);
  }

  /* Blog index — no hero, 3-column grid like original BlogGrid */
  .blog-index-parity {
    padding: 32px 0 64px;
    margin-bottom: 64px;
  }
  .blog-index-parity .blog-category-nav {
    margin: 0 auto 32px;
  }
  .blog-index-parity .blog-post-grid,
  .blog-post-grid,
  .related-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .blog-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  .blog-card-parity {
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--background);
    box-shadow: none;
    height: 100%;
    transition:
      border-color 0.3s,
      box-shadow 0.3s;
  }
  .blog-card-parity:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-feature) 18%, transparent);
    transform: none;
  }
  .blog-card-parity .post-cover {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
  }
  .blog-card-parity .post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .blog-card-parity .post-category-row {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: var(--z-raised);
  }
  .blog-card-parity .post-category-row b {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-paper);
    background: color-mix(in srgb, var(--color-ink) 50%, transparent);
    padding: 4px 8px;
    border-radius: 6px;
  }
  .blog-card-parity .post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
  }
  .blog-card-parity .post-body h2,
  .blog-card-parity .post-body h3 {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
    color: var(--foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-parity .post-body > p {
    margin: 8px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-parity .post-author-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  .blog-card-parity .post-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .blog-card-parity .post-author img {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--border);
  }
  .blog-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--muted-foreground);
  }

  /* Blog article — original text-3xl / no TOC sidebar */
  .blog-article-parity {
    padding: 32px 0 0;
    max-width: 64rem;
  }
  .blog-article-parity .article-header {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 0;
  }
  .blog-article-parity .article-cover {
    aspect-ratio: 16/9;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  .blog-article-parity .article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .blog-article-parity .article-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }
  .blog-article-parity .article-meta-row time {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--muted-foreground);
  }
  .blog-article-parity .article-meta-row svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
  }
  .blog-article-parity .article-header h1 {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--foreground);
  }
  .blog-article-parity .article-header > p {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    margin: 0;
  }
  .blog-article-parity .article-body,
  .blog-article-parity .prose {
    margin-top: 32px;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-ink-2);
  }
  .blog-article-parity .prose h1,
  .blog-article-parity .prose h2,
  .blog-article-parity .prose h3,
  .blog-article-parity .prose h4 {
    font-family: var(--font-sans);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--foreground);
  }
  .blog-article-parity .prose code,
  .blog-article-parity .prose pre {
    font-family: var(--font-mono);
  }
  .blog-article-parity .article-all-posts {
    display: flex;
    justify-content: flex-start;
    margin: 64px 0;
  }
  .related-posts-section {
    padding: 32px 0 48px;
  }
  .related-posts-section .related-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
  }
  .related-posts-section .related-heading h2 {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--primary);
    margin: 0;
  }
  .related-posts-section .related-icon {
    display: inline-flex;
    color: var(--primary);
  }
  .related-posts-section .related-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
  }

  /* Kill legacy site.css leakage on marketing/blog */
  .page-hero.blog-hero {
    display: none;
  }
  .section.blog-index-section {
    padding-top: 0;
  }
  body .post-grid:not(.blog-post-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  body .prose {
    font-family: var(--font-sans);
  }
  body .feature-card,
  body .price-card,
  body .empty-card {
    border-radius: 16px;
  }
  @media (max-width: 64rem) {
    .blog-post-grid,
    .related-post-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 48rem) {
    .blog-post-grid,
    .related-post-grid {
      grid-template-columns: 1fr;
    }
    .blog-index-parity {
      padding-top: 24px;
    }
    .blog-article-parity .article-header h1 {
      font-size: 1.75rem;
    }
    .cta-panel {
      padding: 56px 24px;
      border-radius: 20px;
    }
    .button.pill,
    .center-actions .button,
    .cta-panel .button {
      width: auto;
    }
  }

  /* ImageAI shared preview controls — required by both public tool pages and the workspace. */

  .ui-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.14em;
  }
  .nav-menu-trigger .ui-icon {
    margin-left: 3px;
  }
  .nav-icon .ui-icon {
    width: 18px;
    height: 18px;
  }
  .workspace-logo img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }
  .workspace-nav a > span,
  .workspace-mobile-nav a > span {
    display: grid;
    place-items: center;
  }
  .workspace-nav .ui-icon,
  .workspace-mobile-nav .ui-icon {
    width: 17px;
    height: 17px;
  }
  .account-chevron .ui-icon {
    width: 13px;
    height: 13px;
  }
  .workspace-avatar > .ui-icon {
    width: 18px;
    height: 18px;
  }
  .footer-social-link .ui-icon {
    width: 15px;
    height: 15px;
  }
  .account-menu-links .ui-icon,
  .account-menu-logout .ui-icon {
    width: 15px;
    height: 15px;
  }
  .imageai-tabs .ui-icon,
  .workspace-header-actions .ui-icon,
  .history-toolbar .ui-icon {
    width: 15px;
    height: 15px;
  }
  .upload-cloud .ui-icon {
    width: 30px;
    height: 30px;
  }
  .settings-icon .ui-icon {
    width: 18px;
    height: 18px;
  }
  .hero-pill .ui-icon,
  .feature-icon .ui-icon,
  .product-list-icon .ui-icon,
  .visual-icon .ui-icon {
    width: 1.15em;
    height: 1.15em;
  }
  .visual-icon .ui-icon {
    width: 56px;
    height: 56px;
  }
  .product-list-icon .ui-icon {
    width: 42px;
    height: 42px;
  }
  .feature-icon .ui-icon {
    width: 20px;
    height: 20px;
  }
  .button > .ui-icon,
  .text-link > .ui-icon,
  .workspace-stat > a > .ui-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
  }
  .price-card li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .feature-check {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 0.24em;
    color: var(--primary);
  }
  .preview-arrow .ui-icon {
    width: 19px;
    height: 19px;
  }
  .icon-button .ui-icon {
    width: 18px;
    height: 18px;
  }
  .stat-icon .ui-icon {
    width: 19px;
    height: 19px;
  }
  .quick-action-grid a span {
    display: grid;
    place-items: center;
  }
  .quick-action-grid .ui-icon {
    width: 16px;
    height: 16px;
  }
  .package-top strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .package-top strong .ui-icon {
    width: 17px;
    height: 17px;
    color: var(--primary);
  }
  .payment-status-mark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .payment-status-mark .ui-icon {
    width: 18px;
    height: 18px;
  }
  .auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .auth-back-link .ui-icon {
    width: 16px;
    height: 16px;
  }
  @media (max-width: 64rem) {
    .nav-actions .desktop-auth {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .admin-detail-dialog,
    .history-drawer,
    .navigation-progress.active {
      animation: none;
    }
    .reveal {
      transition: none;
    }
  }

  @media (max-width: 64rem) {
    .dashboard-locale-menu {
      display: block;
    }
    .dashboard-locale-menu .locale-pill {
      width: 44px;
      height: 44px;
    }
  }
  /* Consolidated final visual layer (formerly redesign.css). */
  /* Product-wide redesign layer. Loaded last so public, workbench and admin families
   share one visual grammar without replacing their route-specific behavior. */

  :root {
    --ui-surface-raised: color-mix(in srgb, var(--background) 92%, var(--muted));
    --ui-surface-quiet: color-mix(in srgb, var(--muted) 44%, transparent);
    --ui-rule-strong: color-mix(in srgb, var(--border) 78%, var(--foreground));
    --ui-control-height: 44px;
    --ui-control-height-compact: 38px;
    --ui-content-width: 1200px;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    text-rendering: optimizeLegibility;
  }
  ::selection {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    color: var(--foreground);
  }

  /* Shared controls: restrained, tactile and usable in both marketing and operations. */
  .button {
    min-height: var(--ui-control-height);
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.012em;
  }
  .button:hover {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-ink-2) 10%, transparent);
    transform: translateY(-1px);
  }
  .button:active {
    box-shadow: none;
    transform: translateY(1px);
  }
  .button.small {
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 9px;
    font-size: 0.76rem;
  }
  .button.large {
    min-height: 48px;
    padding: 12px 19px;
  }
  .button.outline,
  .button.ghost {
    background: transparent;
    border-color: var(--ui-rule-strong);
    color: var(--foreground);
  }
  .button.outline:hover,
  .button.ghost:hover {
    background: var(--ui-surface-quiet);
    border-color: var(--primary);
    color: var(--primary);
  }
  input,
  select,
  textarea {
    min-height: var(--ui-control-height);
    border-color: var(--color-control-border, var(--border));
    border-radius: 10px;
    background: var(--background);
  }
  input:hover,
  select:hover,
  textarea:hover {
    border-color: var(--color-control-border-hover, var(--foreground));
  }

  /* Public shell: a quiet editorial masthead rather than a generic SaaS toolbar. */
  .site-header {
    min-height: 72px;
    padding-block: 15px;
    background: color-mix(in srgb, var(--background) 90%, transparent);
    border-bottom: 1px solid transparent;
  }
  .site-header.scrolled {
    background: color-mix(in srgb, var(--background) 96%, transparent);
    border-color: var(--border);
    box-shadow: none;
  }
  .nav-wrap {
    width: min(var(--ui-content-width), calc(100% - 48px));
    height: 40px;
    gap: 20px;
  }
  .brand {
    gap: 10px;
  }
  .brand span {
    font-size: 1.32rem;
    letter-spacing: -0.035em;
  }
  .brand img {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }
  .desktop-nav,
  .nav-links {
    gap: 4px;
    margin-left: 22px;
  }
  .desktop-nav > a,
  .nav-links > a {
    position: relative;
    padding: 9px 10px;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .desktop-nav > a::after,
  .nav-links > a::after {
    position: absolute;
    right: 10px;
    bottom: 3px;
    left: 10px;
    height: 1px;
    background: var(--primary);
    content: "";
    opacity: 0;
    transform: scaleX(0.45);
    transition:
      opacity var(--dur-micro),
      transform var(--dur-micro);
  }
  .desktop-nav > a:hover,
  .desktop-nav > a[aria-current="page"],
  .nav-links > a:hover,
  .nav-links > a[aria-current="page"] {
    color: var(--foreground);
  }
  .desktop-nav > a:hover::after,
  .desktop-nav > a[aria-current="page"]::after,
  .nav-links > a:hover::after,
  .nav-links > a[aria-current="page"]::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .nav-actions {
    gap: 8px;
  }
  .locale-menu summary,
  .locale-pill {
    border-color: var(--border);
    background: var(--background);
  }
  .page-breadcrumb {
    padding-top: 20px;
    color: var(--muted-foreground);
    font-size: 0.74rem;
  }
  .page-breadcrumb a:hover {
    color: var(--primary);
  }

  /* Marketing families: evidence-led surfaces and deliberately varied rhythm. */
  .original-hero,
  .corporate-hero {
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, color-mix(in srgb, var(--background) 92%, var(--muted)), var(--background) 72%);
  }
  .original-hero::after,
  .corporate-hero::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--border);
    content: "";
  }
  .product-catalog-hero {
    padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--background) 89%, var(--muted)), var(--background) 78%);
  }
  .product-catalog-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.7fr);
    align-items: end;
    gap: clamp(2rem, 7vw, 7rem);
  }
  .product-catalog-hero h1 {
    max-width: 13ch;
    margin: 16px 0 18px;
    font-family: var(--font-display);
    font-size: clamp(3.3rem, 6vw, 6rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.055em;
  }
  .product-catalog-hero p {
    max-width: 56ch;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 1.03rem;
    line-height: 1.7;
  }
  .product-catalog-hero .accent-rule {
    margin: 0 0 20px;
  }
  .product-catalog-context {
    display: grid;
    gap: 10px;
    padding: 22px 24px;
    border-left: 2px solid color-mix(in srgb, var(--primary) 65%, var(--border));
    background: color-mix(in srgb, var(--muted) 30%, transparent);
  }
  .product-catalog-context strong {
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: -0.02em;
  }
  .product-catalog-context p {
    font-size: 0.82rem;
    line-height: 1.65;
  }
  .marketing-section {
    padding-block: clamp(4.5rem, 7vw, 7.5rem);
  }
  .marketing-section.muted,
  .section.tinted {
    background: color-mix(in srgb, var(--muted) 52%, var(--background));
    border-block: 1px solid var(--border);
  }
  .section-intro {
    max-width: 48rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
  }
  .section-intro h2,
  .page-hero h1 {
    max-width: 17ch;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }
  .section-intro p {
    max-width: 60ch;
    color: var(--muted-foreground);
  }
  .section-kicker,
  .eyebrow {
    color: var(--primary);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
  }
  .original-feature,
  .feature-card,
  .faq-card,
  .company-card {
    border-color: var(--border);
    border-radius: 14px;
    background: var(--background);
    box-shadow: none;
  }
  .original-feature:hover,
  .feature-card.link-card:hover,
  .faq-card:hover {
    border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
    box-shadow: 0 16px 30px color-mix(in srgb, var(--color-ink-2) 7%, transparent);
    transform: translateY(-2px);
  }
  .feature-icon,
  .card-icon {
    border-radius: 11px;
    background: color-mix(in srgb, var(--primary) 9%, var(--muted));
    color: var(--primary);
  }
  .cta-panel {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--foreground);
    box-shadow: none;
  }
  .cta-panel h2,
  .cta-panel p {
    color: var(--background);
  }
  .product-list-card,
  .home-product-proof {
    border-color: var(--border);
    box-shadow: 0 20px 44px color-mix(in srgb, var(--color-ink-2) 8%, transparent);
  }
  .article,
  .blog-article-parity,
  .legal-article {
    max-width: 68ch;
  }
  .article-body,
  .prose {
    font-size: 1.08rem;
    line-height: 1.82;
  }
  .article-body h2,
  .prose h2 {
    margin-top: 2.5em;
    letter-spacing: -0.025em;
  }
  .blog-index-toolbar {
    padding: clamp(2rem, 5vw, 4.5rem) 0 2rem;
    border-bottom: 1px solid var(--border);
  }
  .blog-index-toolbar h1 {
    max-width: 15ch;
    letter-spacing: -0.045em;
  }
  .blog-search-field {
    min-height: 44px;
    border-radius: 10px;
    background: var(--background);
  }
  .blog-category-nav,
  .blog-category-native {
    border-color: var(--border);
    background: var(--ui-surface-quiet);
  }
  .blog-card-parity,
  .blog-post-grid article {
    border-color: var(--border);
    border-radius: 14px;
    box-shadow: none;
  }
  .blog-card-parity:hover {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--color-ink-2) 6%, transparent);
  }
  .pricing-grid,
  .imageai-pricing-grid {
    align-items: stretch;
    gap: 14px;
  }
  .price-card {
    border-color: var(--border);
    border-radius: 15px;
    box-shadow: none;
  }
  .price-card.popular,
  .price-card.recommended {
    border-color: var(--primary);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-ink-2) 8%, transparent);
  }
  .price-card .button {
    width: 100%;
  }
  .faq-grid,
  .faq-page {
    gap: 10px;
  }
  .faq-item {
    border-color: var(--border);
    border-radius: 12px;
    background: var(--background);
  }
  .faq-item[open] {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
    background: color-mix(in srgb, var(--primary) 3%, var(--background));
  }
  .contact-form-panel,
  .contact-aside,
  .commerce-disclosure,
  .checkout-confirmation {
    border-color: var(--border);
    border-radius: 16px;
    box-shadow: none;
  }
  .contact-item-icon {
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 9%, var(--muted));
    color: var(--primary);
  }

  /* Workbench shell: compact operational field, not a marketing sidebar carried inward. */
  .workspace-page-body {
    background: var(--background);
  }
  .workspace-shell {
    min-height: 100dvh;
    grid-template-columns: 244px minmax(0, 1fr);
    background: var(--background);
  }
  .workspace-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100dvh;
    flex-direction: column;
    padding: 22px 14px 16px;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 93%, var(--muted));
  }
  .workspace-sidebar .brand,
  .workspace-brand {
    padding: 4px 9px;
  }
  .workspace-sidebar-nav,
  .workspace-nav {
    gap: 4px;
    margin-top: 28px;
  }
  .workspace-sidebar-nav > small,
  .workspace-nav > small {
    padding: 0 10px;
    color: var(--muted-foreground);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
  }
  .workspace-sidebar-nav > a,
  .workspace-nav a {
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--muted-foreground);
    font-size: 0.79rem;
    font-weight: 650;
  }
  .workspace-sidebar-nav > a:hover,
  .workspace-nav a:hover {
    background: var(--ui-surface-quiet);
    color: var(--foreground);
  }
  .workspace-sidebar-nav > a.active,
  .workspace-nav a.active {
    position: relative;
    background: color-mix(in srgb, var(--primary) 11%, var(--background));
    color: var(--primary);
  }
  .workspace-sidebar-nav > a.active::before,
  .workspace-nav a.active::before {
    position: absolute;
    left: -14px;
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
    content: "";
  }
  .workspace-account {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .workspace-main {
    background: var(--background);
  }
  .dashboard-header,
  .product-workspace-header {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    min-height: 74px;
    padding: 15px clamp(20px, 3vw, 38px);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 94%, transparent);
    backdrop-filter: blur(18px);
  }
  .dashboard-header h1,
  .product-workspace-header h1 {
    font-family: var(--font-sans);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.03em;
  }
  .dashboard-header .eyebrow {
    margin-bottom: 3px;
    font-size: 0.58rem;
  }
  .workspace-dashboard {
    width: min(1120px, 100%);
    padding: 32px clamp(20px, 3vw, 42px) 72px;
  }
  .workspace-dashboard > h1 {
    font-size: 1.55rem;
    font-weight: 700;
  }
  .workspace-stat,
  .stat-grid article,
  .dashboard-stat {
    border-radius: 13px;
    box-shadow: none;
  }
  .workspace-stat {
    border-top: 2px solid color-mix(in srgb, var(--primary) 34%, var(--border));
  }
  .workspace-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
  }
  .workspace-section-heading > div {
    min-width: 0;
  }
  .workspace-section-heading h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.035em;
  }
  .workspace-section-heading p {
    max-width: 48rem;
    margin: 7px 0 0;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    line-height: 1.6;
  }
  .workspace-heading-action {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .product-dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    align-items: stretch;
  }
  .workspace-table-card {
    margin-top: 34px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: color-mix(in srgb, var(--background) 92%, var(--muted));
    box-shadow: none;
  }
  .workspace-table-card .workspace-section-heading {
    margin-bottom: 18px;
  }
  .workspace-table-card .workspace-stat {
    background: var(--background);
  }
  .imageai-public-hero {
    padding-block: clamp(3rem, 6vw, 5.5rem);
    background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 48%, var(--background)), var(--background));
    border-bottom: 1px solid var(--border);
  }
  .imageai-surface.public-mode .tool-heading {
    max-width: 64rem;
    padding: 72px 20px 64px;
  }
  .imageai-surface.public-mode .tool-heading h1 {
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.6vw, 4.1rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.045em;
  }
  .imageai-surface.public-mode .tool-heading p {
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.7;
  }
  .public-mode .image-workbench {
    padding-top: 44px;
  }
  .image-workbench {
    gap: 20px;
  }
  .workbench-main-card,
  .workbench-settings-card {
    border-color: var(--border);
    border-radius: 15px;
    box-shadow: none;
  }
  .workbench-main-card {
    background: var(--background);
  }
  .workbench-settings-card {
    background: color-mix(in srgb, var(--background) 92%, var(--muted));
  }
  .workbench-drop-zone {
    min-height: 164px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--muted) 38%, transparent);
  }
  .workbench-drop-zone:hover,
  .workbench-drop-zone.dragging {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--background));
  }
  .preview-canvas {
    border-radius: 12px;
  }
  .option-card {
    border-radius: 10px;
  }
  .option-card:has(input:checked) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent);
  }
  .processing-cost {
    border-radius: 11px;
    background: var(--ui-surface-quiet);
  }

  /* Admin and account surfaces: dense enough for work, consistent with the brand. */
  .settings-shell,
  .admin-shell {
    width: min(1240px, calc(100% - 56px));
    grid-template-columns: 218px minmax(0, 1fr);
    gap: 44px;
    padding-block: 38px 80px;
  }
  .settings-shell .side-nav,
  .admin-shell .side-nav {
    top: 96px;
    padding-right: 14px;
    border-right: 1px solid var(--border);
  }
  .side-nav a {
    min-height: 40px;
    border-radius: 8px;
    font-size: 0.78rem;
  }
  .side-nav a.active {
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    color: var(--primary);
  }
  .settings-card,
  .panel,
  .admin-panel,
  .admin-data-card,
  .admin-module-card,
  .admin-operations-card {
    border-color: var(--border);
    border-radius: 14px;
    box-shadow: none;
  }
  .settings-card > header,
  .admin-panel-heading {
    padding: 20px 22px 0;
  }
  .settings-card-body {
    padding: 20px 22px;
  }
  .settings-card > footer {
    border-top: 1px solid var(--border);
    background: var(--ui-surface-quiet);
  }
  .product-billing-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.68fr);
    align-items: stretch;
    gap: 24px;
  }
  .product-billing-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    align-content: start;
    justify-content: start;
    gap: 12px;
  }
  .product-billing-grid .workspace-stat {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    justify-content: flex-start;
  }
  .product-billing-grid .payment-actions {
    margin-top: auto;
  }
  .product-billing-context {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 22px 0 22px 24px;
    border-left: 1px solid var(--border);
  }
  .product-billing-context .eyebrow {
    margin: 0;
    font-size: 0.62rem;
  }
  .product-billing-context strong {
    max-width: 25ch;
    font-size: 1rem;
    line-height: 1.45;
  }
  .product-billing-context p {
    max-width: 32ch;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.8rem;
    line-height: 1.65;
  }
  .product-billing-context > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
  }
  .product-billing-context > a:hover {
    color: var(--foreground);
  }
  .product-billing-context .ui-icon {
    width: 14px;
    height: 14px;
  }
  .settings-tabs {
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
  }
  .settings-tabs a {
    min-height: 34px;
    border-radius: 7px;
  }
  .settings-tabs a.active {
    box-shadow: none;
    background: var(--foreground);
    color: var(--background);
  }
  .admin-page {
    width: min(1360px, calc(100% - 56px));
    padding: 34px 0 80px;
  }
  .admin-heading,
  .admin-page-heading,
  .admin-overview-hero,
  .admin-section-heading {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .admin-heading h1,
  .admin-page-heading h1,
  .admin-overview-hero h1,
  .admin-user-profile-hero h1 {
    font-family: var(--font-sans);
    font-size: clamp(1.55rem, 2vw, 2.2rem);
    font-weight: 730;
    letter-spacing: -0.045em;
  }
  .admin-section-nav {
    margin: 0 0 28px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--background) 90%, var(--muted));
    box-shadow: none;
  }
  .admin-section-nav-scroll {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
  }
  .admin-nav-group {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  .admin-nav-group + .admin-nav-group {
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .admin-nav-group h2 {
    margin: 7px 0 0;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .admin-nav-group-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .admin-nav-group-links a {
    display: inline-flex;
    min-width: 0;
    min-height: 34px;
    flex: 0 1 auto;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted-foreground);
    font-size: 0.7rem;
    font-weight: 650;
  }
  .admin-nav-group-links a:hover {
    border-color: var(--border);
    background: var(--background);
    color: var(--foreground);
  }
  .admin-nav-group-links a.active {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--background));
    color: var(--primary);
  }
  .admin-nav-group-links .admin-section-nav-icon {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
  }
  .admin-overview-stats > article,
  .growth-stat-grid article,
  .admin-user-stat-grid > article {
    border-radius: 12px;
    box-shadow: none;
  }
  .admin-stat-icon,
  .growth-stat-icon {
    border-radius: 10px;
  }
  .admin-filter-bar,
  .data-table-toolbar {
    border-color: var(--border);
    background: var(--ui-surface-quiet);
    box-shadow: none;
  }
  .admin-filter-grid {
    padding: 14px 16px 4px;
  }
  .admin-filter-bar > .admin-filter-card-head {
    padding: 15px 16px 12px;
  }
  .admin-filter-bar > .admin-filter-actions {
    padding: 10px 16px 15px;
  }
  .admin-table-panel,
  .credit-ledger-panel,
  .billing-history-panel {
    border-radius: 14px;
  }
  .admin-table-panel th,
  .credit-ledger-panel th,
  .billing-history-table th {
    background: color-mix(in srgb, var(--muted) 58%, var(--background));
    font-size: 0.63rem;
    letter-spacing: 0.07em;
  }
  .admin-table-panel tbody tr:hover,
  .credit-ledger-panel tbody tr:hover,
  .billing-history-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--background));
  }
  .admin-detail-dialog,
  .auth-dialog {
    border-radius: 18px;
  }
  .admin-detail-dialog > header {
    background: var(--ui-surface-quiet);
  }
  .empty-state,
  .settings-empty,
  .growth-empty-state,
  .history-state {
    border: 1px dashed var(--ui-rule-strong);
    border-radius: 14px;
    background: color-mix(in srgb, var(--muted) 25%, transparent);
  }
  .admin-module-grid,
  .admin-module-cards,
  .admin-operations-grid {
    gap: 14px;
  }
  .admin-module-card,
  .admin-operations-card,
  .admin-mail-provider-card,
  .feature-flag-card {
    border-color: var(--border);
    border-radius: 14px;
    box-shadow: none;
  }
  .admin-module-card:hover,
  .admin-operations-card:hover,
  .admin-mail-provider-card:hover {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--color-ink-2) 6%, transparent);
  }
  .admin-mail-provider-card::before {
    height: 2px;
  }
  .feature-flag-card[data-enabled="false"] {
    opacity: 0.78;
  }
  .admin-status-timeline li::before {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--background) 85%, transparent);
  }
  .admin-compact-code,
  .copyable-value,
  .id-copy-badge {
    border-color: var(--border);
    background: var(--ui-surface-quiet);
  }

  /* Transactional pages deserve the same hierarchy without marketing decoration. */
  .auth-page-body main {
    background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 56%, var(--background)), var(--background) 52%);
  }
  .auth-card,
  .payment-card,
  .checkout-confirmation {
    border-radius: 18px;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--color-ink-2) 8%, transparent);
  }
  .auth-card-header h1,
  .auth-heading h1,
  .payment-card h1 {
    letter-spacing: -0.04em;
  }
  .auth-divider {
    margin-block: 24px;
  }

  @media (max-width: 64rem) {
    .nav-wrap {
      width: min(var(--ui-content-width), calc(100% - 32px));
    }
    .workspace-shell {
      grid-template-columns: 1fr;
    }
    .workspace-sidebar {
      display: none;
    }
    .workspace-main {
      padding-bottom: 72px;
    }
    .workspace-mobile-nav {
      border-top: 1px solid var(--border);
      background: color-mix(in srgb, var(--background) 96%, transparent);
      backdrop-filter: blur(18px);
    }
    .settings-shell,
    .admin-shell {
      grid-template-columns: 1fr;
      gap: 18px;
      width: min(100% - 32px, 860px);
    }
    .settings-shell .side-nav,
    .admin-shell .side-nav {
      position: static;
      overflow: auto;
      padding: 0 0 10px;
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }
  }

  @media (max-width: 48rem) {
    .site-header {
      min-height: 64px;
      padding-block: 12px;
    }
    .nav-wrap {
      height: 40px;
      width: calc(100% - 28px);
    }
    .mobile-nav {
      border-bottom: 1px solid var(--border);
      background: var(--background);
      box-shadow: 0 18px 35px color-mix(in srgb, var(--color-ink) 8%, transparent);
    }
    .mobile-nav-inner {
      padding-block: 12px 20px;
    }
    .mobile-nav a,
    .mobile-nav summary {
      min-height: 44px;
    }
    .marketing-section {
      padding-block: 4rem;
    }
    .section-intro {
      margin-bottom: 2rem;
    }
    .section-intro h2,
    .page-hero h1 {
      max-width: none;
    }
    .product-catalog-hero {
      padding-block: 3.5rem;
    }
    .product-catalog-hero-grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .product-catalog-hero h1 {
      font-size: clamp(3rem, 14vw, 4.2rem);
    }
    .product-catalog-context {
      padding: 18px;
    }
    .workspace-dashboard {
      padding: 22px 16px 80px;
    }
    .dashboard-header,
    .product-workspace-header {
      min-height: 66px;
      padding: 12px 16px;
    }
    .workspace-section-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 15px;
    }
    .workspace-heading-action {
      width: 100%;
    }
    .product-dashboard-grid {
      grid-template-columns: 1fr;
    }
    .workspace-table-card {
      margin-top: 24px;
      padding: 16px;
    }
    .product-billing-layout {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .product-billing-grid {
      grid-template-columns: 1fr;
    }
    .product-billing-grid .workspace-stat {
      min-height: 0;
    }
    .product-billing-context {
      min-height: 0;
      padding: 18px 0 0;
      border-top: 1px solid var(--border);
      border-left: 0;
    }
    .imageai-public-hero {
      padding-block: 3rem;
    }
    .imageai-surface.public-mode .tool-heading {
      padding: 48px 18px 42px;
    }
    .imageai-surface.public-mode .tool-heading h1 {
      font-size: clamp(2.25rem, 10vw, 3rem);
    }
    .public-mode .image-workbench {
      padding-top: 28px;
    }
    .image-workbench {
      gap: 12px;
    }
    .workbench-main-card,
    .workbench-settings-card {
      padding: 16px;
    }
    .workbench-drop-zone {
      min-height: 148px;
    }
    .admin-page {
      width: calc(100% - 28px);
      padding-block: 24px 80px;
    }
    .settings-shell,
    .admin-shell {
      width: calc(100% - 28px);
      padding-block: 24px 80px;
    }
    .admin-section-nav {
      padding: 12px;
      margin-bottom: 20px;
    }
    .admin-nav-group {
      grid-template-columns: 1fr;
      gap: 7px;
    }
    .admin-nav-group h2 {
      margin: 0;
    }
    .admin-nav-group-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .admin-nav-group-links a {
      min-height: 42px;
      padding: 8px;
      font-size: 0.68rem;
    }
    .settings-card > header,
    .admin-panel-heading {
      padding: 18px 16px 0;
    }
    .settings-card-body {
      padding: 18px 16px;
    }
    .settings-card > footer {
      padding: 13px 16px;
    }
    .admin-filter-grid,
    .admin-filter-bar > .admin-filter-card-head,
    .admin-filter-bar > .admin-filter-actions {
      padding-inline: 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .button,
    .original-feature,
    .feature-card,
    .faq-card,
    .desktop-nav > a::after,
    .nav-links > a::after {
      transition: none;
    }
  }

  /* Product proof must share the first visual band with its promise. */
  .original-hero-inner:has(.home-hero-copy) {
    display: grid;
    width: min(1200px, 100%);
    max-width: 90rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.72fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 5rem);
  }
  .home-hero-copy {
    margin-top: 0;
  }
  .home-product-proof {
    align-self: start;
    margin: 0;
  }
  .imageai-surface.public-mode .tool-heading {
    padding: 48px 20px 36px;
  }
  .public-mode .image-workbench {
    padding-top: 32px;
  }
  .imageai-public-hero + .image-workbench {
    margin-top: 0;
  }
  @media (max-width: 48rem) {
    .original-hero-inner:has(.home-hero-copy) {
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }
    .home-hero-copy {
      margin-top: 0;
    }
    .home-product-proof {
      top: auto;
    }
    .imageai-surface.public-mode .tool-heading {
      padding: 42px 18px 30px;
    }
    .public-mode .image-workbench {
      padding-top: 24px;
    }
  }
}