/* ─── Design Tokens ──────────────────────────────────────────────── */
      :root {
        --bg:             #EAE0CF;
        --bg-deep:        #D4C49E;
        --panel:          rgba(255, 252, 245, 0.93);
        --panel-solid:    #FFFCF5;
        --ink:            #171F17;
        --ink-soft:       #38463A;
        --muted:          #64594C;
        --muted-light:    #988D82;
        --accent:         #B87220;
        --accent-strong:  #8C4E0A;
        --accent-pale:    rgba(184, 114, 32, 0.12);
        --gold:           #C9A44A;
        --gold-pale:      rgba(201, 164, 74, 0.16);
        --forest:         #1A4230;
        --forest-light:   rgba(26, 66, 48, 0.08);
        --sage:           #3D6652;
        --success:        #1F6B38;
        --success-pale:   rgba(31, 107, 56, 0.10);
        --danger:         #963122;
        --danger-pale:    rgba(150, 49, 34, 0.08);
        --line:           rgba(88, 66, 36, 0.13);
        --line-strong:    rgba(88, 66, 36, 0.22);
        --shadow-sm:      0 2px 10px rgba(40,28,12,0.09);
        --shadow-md:      0 8px 28px rgba(40,28,12,0.11);
        --shadow-lg:      0 22px 56px rgba(40,28,12,0.15);
        --shadow-panel:   0 1px 0 rgba(255,255,255,0.65) inset, 0 18px 44px rgba(40,28,12,0.11);
        --shadow-glow:    0 0 0 1px rgba(184,114,32,0.18), 0 8px 32px rgba(184,114,32,0.18);
        --r-sm:  8px;
        --r-md:  14px;
        --r-lg:  20px;
        --r-xl:  28px;
        --r-pill: 999px;
        --font-ui:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
        --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        --t-fast: 120ms ease;
        --t-base: 220ms ease;
        --t-slow: 380ms cubic-bezier(0.4,0,0.2,1);
      }

      /* ─── Reset & Base ─────────────────────────────────────────────── */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; scroll-padding-top: 100px; }
      body {
        min-height: 100vh;
        font-family: var(--font-ui);
        font-size: 15px;
        line-height: 1.5;
        color: var(--ink);
        background:
          radial-gradient(ellipse 70% 50% at 5% 5%,   rgba(184,114,32,0.20), transparent 60%),
          radial-gradient(ellipse 55% 45% at 96% 4%,  rgba(26,66,48,0.18),   transparent 55%),
          radial-gradient(ellipse 60% 40% at 50% 105%,rgba(184,114,32,0.10), transparent 60%),
          radial-gradient(ellipse 40% 60% at 50% 50%, rgba(201,164,74,0.06), transparent 70%),
          linear-gradient(180deg, #F5E9D4 0%, #EAE0CF 48%, #DED0B8 100%);
        background-attachment: fixed;
      }
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        background-image:
          linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: radial-gradient(ellipse 80% 80% at center, black 10%, transparent 80%);
      }

      /* ─── Layout ───────────────────────────────────────────────────── */
      .page {
        position: relative;
        z-index: 1;
        max-width: 1520px;
        margin: 0 auto;
        padding: 24px 18px 72px;
      }
      .site-header {
        position: sticky;
        top: 12px;
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
        padding: 12px 18px;
        border-radius: var(--r-lg);
        background: rgba(255, 252, 245, 0.90);
        backdrop-filter: blur(20px) saturate(1.6);
        -webkit-backdrop-filter: blur(20px) saturate(1.6);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm), 0 1px 0 rgba(255,255,255,0.70) inset;
        transition: box-shadow var(--t-base);
      }
      .site-logo {
        display: inline-flex;
        align-items: center;
        color: var(--ink);
        text-decoration: none;
        font-family: var(--font-ui);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }
      .site-logo-wordmark {
        display: block;
        width: 188px;
        height: auto;
      }
      .site-logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
      }
      .site-logo-mark img {
        width: 34px;
        height: 34px;
        display: block;
        filter: drop-shadow(0 2px 8px rgba(26,66,48,0.20));
      }
      .site-logo-text {
        font-size: 1.05rem;
      }
      .site-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
      }
      .site-nav a,
      .site-footer a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 12px;
        border-radius: var(--r-pill);
        border: 1px solid transparent;
        color: var(--muted);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.84rem;
      }
      .site-nav a { transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); font-size: 0.88rem; }
      .site-nav a:hover,
      .site-footer a:hover {
        background: rgba(255,255,255,0.80);
        border-color: var(--line);
      }
      .site-nav a[aria-current="page"] {
        color: var(--accent-strong);
        background: var(--accent-pale);
        border-color: rgba(184,114,32,0.25);
      }
      .site-footer {
        margin-top: 40px;
        padding: 0;
      }
      .site-footer-inner {
        padding: 24px 0 20px;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
      }
      .site-footer-brand {
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .site-footer-brand strong {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.01em;
      }
      .site-footer-brand span {
        font-size: 0.75rem;
        color: var(--muted-light);
      }
      .site-footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }

      .auth-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
        padding: 13px 18px;
        border-radius: var(--r-lg);
        background: rgba(255, 252, 245, 0.94);
        border: 1px solid rgba(184,114,32,0.18);
        box-shadow: var(--shadow-sm), 0 0 0 1px rgba(201,164,74,0.08) inset;
      }
      .auth-copy {
        display: grid;
        gap: 2px;
      }
      .auth-copy strong {
        font-size: 0.95rem;
      }
      .auth-copy span {
        color: var(--muted);
        font-size: 0.86rem;
      }
      .auth-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .account-panel-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .account-panel-grid .brand-pillar strong {
        font-size: 0.70rem;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .account-profile-meta {
        display: grid;
        gap: 4px;
        font-size: 0.88rem;
        font-weight: 500;
        color: var(--ink-soft);
      }
      .account-list-card {
        padding: 16px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.58);
        border: 1px solid var(--line);
        display: grid;
        gap: 12px;
      }
      .account-list-head {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: baseline;
        flex-wrap: wrap;
      }
      .account-list-head h3 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.10rem;
        font-weight: 700;
        color: var(--ink);
      }
      .account-list-body {
        display: grid;
        gap: 10px;
      }
      .account-record {
        display: grid;
        gap: 8px;
        padding: 12px 14px;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.76);
        border: 1px solid var(--line);
        transition: box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
      }
      .account-record:hover {
        background: rgba(255,255,255,0.96);
        border-color: var(--line-strong);
        box-shadow: var(--shadow-sm);
      }
      .account-record-head,
      .account-record-meta,
      .account-record-actions {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .account-record-meta {
        color: var(--muted);
        font-size: 0.82rem;
      }
      .account-search-row input {
        width: 100%;
      }
      .account-toolbar {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .account-toolbar-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }
      .account-toolbar select {
        min-width: 180px;
      }
      .account-record-primary {
        display: grid;
        gap: 2px;
      }
      .account-record-primary .editor-note {
        font-size: 0.76rem;
      }
      .account-record-status {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.8);
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .account-record-status.is-ready {
        color: var(--success);
        border-color: rgba(43,122,69,0.18);
        background: rgba(43,122,69,0.08);
      }
      .account-record-status.is-processing {
        color: var(--accent-strong);
        border-color: rgba(179,104,38,0.20);
        background: rgba(179,104,38,0.08);
      }
      .account-record-status.is-failed {
        color: var(--danger);
        border-color: rgba(150,49,34,0.18);
        background: rgba(150,49,34,0.08);
      }
      .account-empty-state {
        display: grid;
        gap: 6px;
        padding: 16px;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.65);
        border: 1px dashed var(--line);
      }
      .account-empty-state strong {
        font-size: 0.92rem;
        color: var(--ink);
      }
      .account-billing-amount {
        font-weight: 700;
        color: var(--ink);
      }
      .account-billing-status {
        display: inline-flex;
        align-items: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.8);
        border: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.74rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .auth-user-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: var(--r-pill);
        background: rgba(255,255,255,0.75);
        border: 1px solid var(--line);
        color: var(--forest);
        font-size: 0.86rem;
        font-weight: 600;
      }
      .auth-user-pill::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 999px;
        background: var(--success);
      }

      /* ─── Glass Panel ──────────────────────────────────────────────── */
      .brand-panel, .upload-card, .result-card, .results-empty {
        background: var(--panel);
        backdrop-filter: blur(24px) saturate(1.5);
        -webkit-backdrop-filter: blur(24px) saturate(1.5);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-panel);
      }

      /* ─── Brand Panel ──────────────────────────────────────────────── */
      .brand-panel {
        position: relative;
        overflow: hidden;
        padding: 22px;
        border-radius: var(--r-xl);
      }
      .brand-panel::after {
        content: "";
        position: absolute;
        inset: auto -60px -80px auto;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(201,164,74,0.14), transparent 68%);
        pointer-events: none;
      }
      .brand-mark {
        width: 60px;
        height: 60px;
        display: grid;
        place-items: center;
        margin-bottom: 16px;
        flex-shrink: 0;
      }
      .brand-mark img {
        width: 60px;
        height: 60px;
        display: block;
        filter: drop-shadow(0 8px 20px rgba(26,66,48,0.16));
      }
      .brand-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--gold);
        padding: 5px 12px;
        border-radius: var(--r-pill);
        background: rgba(201,164,74,0.12);
        border: 1px solid rgba(201,164,74,0.28);
      }
      .brand-title {
        margin: 0 0 12px;
        font-family: var(--font-display);
        font-size: clamp(2.1rem, 3.8vw, 3.5rem);
        font-weight: 600;
        line-height: 1.06;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
      .brand-copy {
        margin: 0 0 16px;
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--muted);
      }
      .brand-pillars { display: grid; gap: 8px; }
      .brand-pillar {
        padding: 12px 14px;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.56);
        border: 1px solid var(--line);
        border-left: 3px solid var(--gold);
        transition: box-shadow var(--t-base), transform var(--t-base);
      }
      .brand-pillar:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
      .brand-pillar strong { display: block; margin-bottom: 5px; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
      .brand-pillar span   { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

      .landing-shell {
        padding: 0;
        overflow: hidden;
      }
      .landing-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        gap: 0;
      }
      .landing-copy {
        padding: 48px 44px;
        display: grid;
        gap: 24px;
        align-content: center;
      }
      .landing-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .landing-secondary-link {
        text-decoration: none;
        min-height: 44px;
        padding: 10px 20px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      .landing-secondary-link::before {
        content: "▶";
        font-size: 0.60rem;
        opacity: 0.7;
      }
      .landing-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .landing-trust-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        align-items: center;
        padding: 14px 0 0;
        border-top: 1px solid var(--line);
      }
      .landing-trust-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .landing-trust-value {
        font-family: var(--font-display);
        font-size: 1.30rem;
        font-weight: 700;
        color: var(--forest);
        line-height: 1;
      }
      .landing-trust-label {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.10em;
        color: var(--muted);
      }
      .landing-visual {
        padding: 40px 36px;
        background: linear-gradient(160deg, rgba(255,255,255,0.60) 0%, rgba(232,218,196,0.62) 60%, rgba(201,164,74,0.10) 100%);
        border-left: 1px solid var(--line);
        display: grid;
        gap: 16px;
        align-content: center;
        justify-items: center;
        position: relative;
        overflow: hidden;
      }
      .landing-visual::before {
        content: "";
        position: absolute;
        inset: -60px;
        background: radial-gradient(circle at 50% 50%, rgba(201,164,74,0.10), transparent 65%);
        pointer-events: none;
      }
      .landing-sample {
        background: transparent;
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 340px;
      }
      .landing-sample::before {
        content: "";
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(201,164,74,0.16), transparent 70%);
        pointer-events: none;
      }
      .landing-sample img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid rgba(201,164,74,0.40);
        box-shadow: 0 0 0 8px rgba(255,252,240,0.55), 0 20px 60px rgba(40,28,12,0.16);
        display: block;
        width: 100%;
      }
      .landing-sample figcaption {
        margin-top: 14px;
        text-align: center;
        font-size: 0.78rem;
        color: var(--muted);
        font-style: italic;
        line-height: 1.4;
      }
      .intake-shell {
        max-width: 940px;
        margin: 0 auto;
      }
      .intake-stack {
        display: grid;
        gap: 14px;
      }
      .intake-progress {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: var(--r-pill);
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.68);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--accent-strong);
      }
      .intake-progress-bar {
        position: relative;
        width: 100%;
        height: 8px;
        margin-top: 12px;
        border-radius: 999px;
        background: rgba(99, 77, 45, 0.10);
        overflow: hidden;
      }
      .intake-progress-fill {
        position: absolute;
        inset: 0 auto 0 0;
        width: 33.333%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--gold) 0%, var(--accent) 50%, var(--accent-strong) 100%);
        box-shadow: 0 0 8px rgba(184,114,32,0.35);
        transition: width var(--t-slow);
      }
      .intake-step-panel[hidden] {
        display: none !important;
      }
      .intake-step-panel:not([hidden]) {
        animation: step-enter 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
      }
      .intake-step {
        padding: 18px;
      }
      .intake-footer {
        margin-top: 18px;
        justify-content: space-between;
      }
      .intake-status {
        flex: 1;
      }
      .intake-next {
        width: auto;
        min-width: 220px;
      }
      .upload-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.80);
        border: 1px solid var(--line-strong);
        color: var(--muted);
        margin-bottom: 4px;
      }
      .upload-icon svg { width: 22px; height: 22px; }
      .upload-surface {
        display: grid;
        gap: 14px;
        padding: 18px;
        border-radius: var(--r-lg);
        border: 1.5px dashed rgba(179,104,38,0.28);
        background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(250,244,232,0.90));
        transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
      }
      .upload-surface.is-dragging {
        border-color: var(--accent);
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(251,239,223,0.96));
        box-shadow: 0 0 0 4px rgba(179,104,38,0.08), 0 12px 28px rgba(179,104,38,0.12);
      }
      .upload-surface-top {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .upload-surface-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink);
      }
      .upload-surface-copy {
        font-size: 0.84rem;
        color: var(--muted);
        line-height: 1.55;
        max-width: 60ch;
      }
      .upload-multi-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: var(--r-pill);
        background: rgba(255,255,255,0.78);
        border: 1px solid var(--line);
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--accent-strong);
      }
      .upload-picker-row {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
      }
      .upload-picker-button {
        min-height: 44px;
        padding: 10px 18px;
        border-radius: var(--r-pill);
        background: rgba(255,255,255,0.95);
        border: 1px solid var(--line-strong);
        color: var(--ink);
        font-weight: 700;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
      }
      .upload-picker-button:hover {
        transform: translateY(-1px);
        border-color: rgba(179,104,38,0.34);
        box-shadow: 0 10px 22px rgba(50,35,18,0.08);
      }
      .upload-picker-meta {
        font-size: 0.84rem;
        color: var(--muted);
      }
      .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;
      }


      /* ─── Upload Card ──────────────────────────────────────────────── */
      .upload-card { padding: 18px; border-radius: var(--r-xl); }
      .upload-card-header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 14px;
      }
      .section-kicker {
        display: block;
        margin-bottom: 4px;
        font-size: 0.70rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent-strong);
      }
      .section-title {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 600;
      }
      .section-copy { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }


      /* ─── Form Fields ──────────────────────────────────────────────── */
      .field { display: grid; gap: 6px; }
      .field-label {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: baseline;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--ink-soft);
      }
      .field-hint { font-size: 0.74rem; font-weight: 400; color: var(--muted-light); }

      input[type="file"],
      input[type="text"],
      input[type="number"] {
        width: 100%;
        min-height: 44px;
        padding: 10px 13px;
        border-radius: var(--r-md);
        border: 1px solid var(--line-strong);
        background: rgba(255,255,255,0.92);
        color: var(--ink);
        font: 0.88rem/1.4 var(--font-ui);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        transition: border-color var(--t-fast), box-shadow var(--t-fast);
      }
      input[type="file"]:focus,
      input[type="text"]:focus,
      input[type="number"]:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(179,104,38,0.14), inset 0 1px 0 rgba(255,255,255,0.5);
      }
      input[type="range"] { width: 100%; accent-color: var(--accent); }
      input[type="range"]:focus { outline: 2px solid rgba(179,104,38,0.30); outline-offset: 2px; }

      /* Advanced options collapsible */
      details.advanced-toggle { margin-top: 4px; }
      details.advanced-toggle > summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
        font-size: 0.80rem;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        user-select: none;
      }
      details.advanced-toggle > summary::-webkit-details-marker { display: none; }
      .toggle-chevron { display: inline-block; font-size: 0.62rem; transition: transform var(--t-fast); }
      details.advanced-toggle[open] > summary .toggle-chevron { transform: rotate(90deg); }
      .advanced-fields { display: grid; gap: 10px; margin-top: 8px; }

      /* ─── Buttons ──────────────────────────────────────────────────── */
      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 22px;
        border-radius: var(--r-pill);
        border: 1px solid rgba(140,78,10,0.30);
        font: 600 0.88rem/1 var(--font-ui);
        letter-spacing: 0.02em;
        color: white;
        background: linear-gradient(155deg, #D08828 0%, var(--accent) 38%, var(--accent-strong) 100%);
        box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 5px 18px rgba(140,78,10,0.24);
        cursor: pointer;
        transition: transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
        user-select: none;
        text-shadow: 0 1px 2px rgba(80,40,0,0.22);
      }
      button:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 28px rgba(140,78,10,0.32);
      }
      button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(140,78,10,0.20); }
      button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
      button:disabled { opacity: 0.48; cursor: not-allowed; }

      /* Secondary / ghost */
      .editor-secondary {
        color: var(--ink-soft);
        background: rgba(255,255,255,0.72);
        border-color: var(--line-strong);
        box-shadow: 0 2px 6px rgba(50,35,18,0.06), inset 0 1px 0 rgba(255,255,255,0.80);
      }
      .editor-secondary:hover:not(:disabled) {
        background: white;
        box-shadow: 0 4px 12px rgba(50,35,18,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
      }
      .editor-secondary.is-active {
        color: var(--accent-strong);
        background: var(--accent-pale);
        border-color: rgba(179,104,38,0.30);
        box-shadow: none;
      }

      /* Tool buttons (compact) */
      .tool-btn { min-height: 34px; min-width: 34px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 0.80rem; }
      .tool-btn svg { width: 14px; height: 14px; pointer-events: none; }

      /* Large process button */
      .btn-process { min-height: 52px; padding: 14px 26px; font-size: 0.94rem; font-weight: 700; width: 100%; letter-spacing: 0.02em; }

      /* ─── Status Bar ───────────────────────────────────────────────── */
      .status {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 10px 14px;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.52);
        border: 1px solid var(--line);
        font-size: 0.84rem;
        color: var(--muted);
        transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
      }
      .status::before {
        content: "";
        flex-shrink: 0;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--muted-light);
        transition: background var(--t-base);
      }
      .status[data-state="working"]::before { background: var(--accent); animation: pulse-dot 1.2s ease-in-out infinite; }
      .status[data-state="success"]::before { background: var(--success); }
      .status[data-state="error"]::before   { background: var(--danger); }
      .status[data-state="working"] { color: var(--forest); background: var(--forest-light); border-color: rgba(38,72,54,0.18); }
      .status[data-state="success"], .status.success { color: var(--success); background: var(--success-pale); border-color: rgba(43,122,69,0.20); }
      .status[data-state="error"]   { color: var(--danger);  background: var(--danger-pale);  border-color: rgba(160,52,41,0.20); }

      @keyframes pulse-dot {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%       { opacity: 0.45; transform: scale(0.70); }
      }

      /* ─── File Chips ───────────────────────────────────────────────── */
      .selected-files { min-height: 28px; display: flex; flex-wrap: wrap; gap: 6px; }
      .selected-files[data-empty="true"]::before {
        content: "No files selected yet.";
        font-size: 0.80rem; color: var(--muted-light); font-style: italic;
      }
      .chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 10px;
        border-radius: var(--r-pill);
        border: 1px solid var(--line-strong);
        background: rgba(255,255,255,0.88);
        font-size: 0.80rem; font-weight: 500; color: var(--ink-soft);
      }

      /* ─── Results / Empty State ────────────────────────────────────── */
      .results { display: grid; gap: 18px; }
      .results-stage { min-width: 0; }
      .results-empty { padding: 32px; border-radius: var(--r-xl); }


      /* ─── Result Card ──────────────────────────────────────────────── */
      .result-card { padding: 22px; border-radius: var(--r-xl); }

      /* ─── Metric Cards ─────────────────────────────────────────────── */
      .result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 12px;
      }
      .metric {
        padding: 16px;
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(250,244,232,0.90));
        border: 1px solid var(--line);
        transition: box-shadow var(--t-base), transform var(--t-base);
      }
      .metric:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
      .metric-label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.70rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .metric-value { font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; color: var(--ink); line-height: 1.2; }

      /* ─── Workflow Shell ───────────────────────────────────────────── */
      .workflow-shell { display: grid; gap: 20px; }
      .workflow-access-panel {
        display: grid;
        gap: 8px;
        padding: 14px 16px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(179,104,38,0.20);
        box-shadow: 0 10px 28px rgba(50,35,18,0.08);
      }
      .workflow-access-panel strong {
        font-size: 0.95rem;
        color: var(--accent-strong);
      }
      .workflow-header {
        padding: 20px 22px;
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(251,245,235,0.82));
        border: 1px solid var(--line);
        display: grid;
        gap: 14px;
      }
      .workflow-header h3 { font-family: var(--font-display); font-size: 1.30rem; font-weight: 600; }
      .workflow-intro { font-size: 0.88rem; color: var(--muted); line-height: 1.6; max-width: 70ch; }
      .workflow-progress-pill {
        display: inline-flex; align-items: center;
        padding: 6px 12px;
        border-radius: var(--r-pill);
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.65);
        font-size: 0.78rem; font-weight: 600; color: var(--muted);
      }

      /* ─── Workflow Stepper ─────────────────────────────────────────── */
      .workflow-stepper { display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 8px; }
      .step-connector { flex: 1; min-width: 10px; height: 1px; background: var(--line-strong); }
      .workflow-step-chip {
        display: flex; align-items: center; gap: 7px;
        padding: 7px 14px 7px 7px;
        border-radius: var(--r-pill);
        border: 1px solid var(--line-strong);
        background: rgba(255,255,255,0.72);
        color: var(--muted);
        font-size: 0.82rem; font-weight: 600;
        box-shadow: none;
        transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
      }
      .workflow-step-chip:hover:not(:disabled) { transform: none; background: white; box-shadow: var(--shadow-sm); }
      .step-num {
        width: 22px; height: 22px;
        border-radius: 50%;
        display: grid; place-items: center;
        font-size: 0.70rem; font-weight: 700;
        background: rgba(100,78,44,0.14);
        color: var(--muted);
        flex-shrink: 0;
        transition: background var(--t-base), color var(--t-base);
      }
      .workflow-step-chip.is-active { color: var(--accent-strong); background: linear-gradient(180deg, rgba(255,255,255,0.95), var(--accent-pale)); border-color: rgba(184,114,32,0.30); box-shadow: 0 0 0 3px rgba(184,114,32,0.10), var(--shadow-sm); }
      .workflow-step-chip.is-active .step-num { background: var(--accent); color: white; box-shadow: 0 2px 6px rgba(184,114,32,0.30); }
      .workflow-step-chip.is-complete { color: var(--success); background: var(--success-pale); border-color: rgba(31,107,56,0.22); }
      .workflow-step-chip.is-complete .step-num { background: var(--success); color: white; }

      /* ─── Summary (last step only) ─────────────────────────────────── */
      .workflow-summary { display: none; }
      .workflow-shell.is-final-step .workflow-summary { display: grid; }

      /* ─── Page Transitions ─────────────────────────────────────────── */
      /* All top-level page sections participate in the shared transition */
      #landingPage, #intakePage, .results, .results-empty {
        animation: page-enter 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
      }
      @keyframes page-enter {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      /* Use a quicker fade for the loading state so it doesn't feel slow */
      .loading-state { animation-duration: 0.22s; }

      /* ─── Workflow Steps ───────────────────────────────────────────── */
      .workflow-step { display: none; gap: 18px; }
      .workflow-step.is-active { display: grid; animation: step-enter var(--t-slow) both; }
      .is-review-locked [data-workflow-step].is-active > :not(.workflow-step-card) {
        pointer-events: none;
        opacity: 0.52;
        filter: saturate(0.75);
      }
      @keyframes step-enter {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .workflow-step-card {
        padding: 20px 22px;
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,244,232,0.80));
        border: 1px solid var(--line);
      }
      .workflow-step-card h4 { margin-bottom: 6px; font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; }
      .workflow-step-copy { font-size: 0.86rem; color: var(--muted); line-height: 1.55; }

      /* ─── Workflow Nav ─────────────────────────────────────────────── */
      .workflow-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 14px 2px 0;
        border-top: 1px solid var(--line);
        flex-wrap: wrap;
      }
      .workflow-nav-meta {
        display: inline-flex; align-items: center;
        padding: 6px 12px;
        border-radius: var(--r-pill);
        background: rgba(255,255,255,0.62);
        border: 1px solid var(--line);
        font-size: 0.80rem; font-weight: 500; color: var(--muted);
      }
      .workflow-nav-actions { display: flex; gap: 10px; }

      /* ─── Boundary / Overlap Review ────────────────────────────────── */
      .boundary-review {
        padding: 20px 22px;
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,244,232,0.80));
        border: 1px solid var(--line);
      }
      .boundary-review h4 { margin-bottom: 6px; font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
      .boundary-review > p { margin-bottom: 14px; font-size: 0.86rem; color: var(--muted); line-height: 1.55; }

      /* ─── Editor Shell ─────────────────────────────────────────────── */
      .editor-shell {
        position: relative;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-lg);
        overflow: hidden;
        background: #fff;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
      }
      .editor-shell img { display: block; width: 100%; height: auto; }
      .editor-shell svg { position: absolute; inset: 0; width: 100%; height: 100%; }

      /* ─── Editor Toolbar ───────────────────────────────────────────── */
      .editor-controls {
        display: flex; gap: 10px; flex-wrap: wrap;
        margin-top: 12px; align-items: center;
      }
      .editor-toolbar {
        display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        margin-top: 12px;
      }
      .editor-tool-group {
        display: flex; gap: 3px;
        padding: 3px;
        border-radius: var(--r-md);
        background: rgba(255,255,255,0.72);
        border: 1px solid var(--line);
      }
      .editor-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
      .editor-note    { font-size: 0.80rem; color: var(--muted); line-height: 1.4; }
      .boundary-kbd-hint {
        margin-top: 8px;
        font-size: 0.75rem;
        color: var(--muted-light);
        line-height: 1.6;
      }
      kbd {
        display: inline-block;
        padding: 1px 5px;
        font-family: var(--font-ui);
        font-size: 0.72rem;
        font-weight: 600;
        border-radius: 4px;
        border: 1px solid var(--line-strong);
        background: rgba(255,255,255,0.85);
        box-shadow: 0 1px 0 var(--line-strong);
        color: var(--ink-soft);
      }

      /* ─── Stack Preview ────────────────────────────────────────────── */
      .stack-review-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
        gap: 18px;
        align-items: start;
      }
      .stack-preview {
        position: relative;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-lg);
        overflow: hidden;
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,243,235,0.96));
        min-height: min(72vh, 860px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
      }
      .stack-preview canvas {
        display: block;
        width: 100%;
        height: auto;
        touch-action: none;
        cursor: grab;
        background: transparent;
      }
      .stack-controls { display: grid; gap: 12px; }
      .stack-floor-card {
        padding: 16px;
        border-radius: var(--r-lg);
        background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(250,244,232,0.92));
        border: 1px solid var(--line);
        box-shadow: 0 8px 18px rgba(50,35,18,0.06);
      }
      .stack-floor-card h5 { margin-bottom: 8px; font-size: 0.90rem; font-weight: 700; }
      .overlap-shell {
        display: grid;
        gap: 16px;
      }
      .overlap-stage-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border-radius: var(--r-pill);
        border: 1px solid rgba(38,72,54,0.22);
        background: rgba(38,72,54,0.10);
        font-size: 0.76rem;
        font-weight: 700;
        color: var(--forest);
        width: fit-content;
      }
      .overlap-preview-card,
      .overlap-control-card {
        padding: 16px;
        border-radius: var(--r-lg);
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.56);
      }
      .overlap-control-card h5 {
        margin-bottom: 6px;
        font-size: 0.92rem;
        font-weight: 700;
      }
      .overlap-control-card > p {
        margin-bottom: 12px;
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.5;
      }
      .overlap-guidance {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
      }
      .overlap-guidance-card {
        padding: 14px 16px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.58);
        border: 1px solid var(--line);
      }
      .overlap-guidance-card strong {
        display: block;
        margin-bottom: 6px;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--ink);
      }
      .overlap-guidance-card span {
        font-size: 0.80rem;
        color: var(--muted);
        line-height: 1.5;
      }

      /* ─── Nudge Pad ────────────────────────────────────────────────── */
      .nudge-pad {
        display: grid;
        grid-template-columns: 38px 38px 38px;
        grid-template-rows: 38px 38px 38px;
        gap: 4px;
        margin: 10px 0;
      }
      .nudge-btn { min-height: 38px; width: 38px; padding: 0; border-radius: var(--r-sm); }
      .nudge-btn svg { width: 13px; height: 13px; pointer-events: none; }
      .nudge-center { min-height: 38px; width: 38px; padding: 0; border-radius: var(--r-sm); font-size: 1.1rem; }
      .rotation-row { display: grid; gap: 6px; }
      .rotation-row label { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
      .opacity-row { display: grid; gap: 6px; margin-top: 8px; }
      .opacity-row label { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
      .tool-advanced { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
      .tool-advanced > summary { font-size: 0.80rem; color: var(--muted); cursor: pointer; }

      /* ─── Orientation ──────────────────────────────────────────────── */
      .orientation-panel, .orientation-review-panel {
        padding: 20px 22px;
        border-radius: var(--r-xl);
        background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,244,232,0.80));
        border: 1px solid var(--line);
      }
      .orientation-panel h4, .orientation-review-panel h4 {
        font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
      }
      .orientation-review-panel h4 { margin-bottom: 6px; }
      .orientation-summary-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
      .orientation-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
      .orientation-review-grid.is-overlay-mode { grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr); }

      .orientation-preview-shell {
        position: relative;
        min-height: 420px;
        display: grid; place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-lg);
        overflow: hidden;
        background: white;
      }
      .orientation-preview-shell.is-overlay-mode {
        min-height: 560px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,243,235,0.98));
      }
      .orientation-reference-shell { position: relative; }
      .orientation-guide-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
      .orientation-guide-overlay.is-interactive { pointer-events: auto; cursor: crosshair; }
      .orientation-guide-overlay line { stroke: rgba(179,103,42,0.86); stroke-width: 2.5; }
      .orientation-guide-axis { stroke: rgba(179,103,42,0.82); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
      .orientation-guide-axis.is-aligned { stroke: rgba(43,122,69,0.96); }
      .orientation-guide-axis.is-target  { stroke: rgba(179,103,42,0.42); stroke-dasharray: 10 8; }
      .orientation-guide-axis.is-live    { stroke: rgba(38,71,54,0.80); }
      .orientation-guide-axis.is-live.is-aligned,
      .orientation-guide-axis.is-target.is-aligned { stroke: rgba(43,122,69,0.96); }
      .orientation-guide-handle { fill: rgba(255,255,255,0.96); stroke: rgba(179,103,42,0.90); stroke-width: 2; vector-effect: non-scaling-stroke; }
      .orientation-guide-handle.is-aligned { stroke: rgba(43,122,69,0.96); }
      .orientation-guide-chip {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px; border-radius: var(--r-pill);
        background: rgba(255,255,255,0.72); border: 1px solid var(--line);
        font-size: 0.78rem; font-weight: 600;
      }
      .orientation-guide-chip.is-aligned { color: var(--success); background: var(--success-pale); border-color: rgba(43,122,69,0.20); }

      .orientation-preview-stage {
        position: relative; width: 100%; min-height: 420px; overflow: hidden;
        background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,243,235,0.94));
      }
      .orientation-preview-stage.is-overlay-mode {
        min-height: 560px;
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,243,235,0.96));
        cursor: grab;
      }
      .orientation-preview-stage.is-overlay-mode.is-panning { cursor: grabbing; }
      .orientation-preview-stage::before,
      .orientation-preview-stage::after {
        content: ""; position: absolute; left: 50%; top: 50%;
        transform: translate(-50%,-50%); pointer-events: none; z-index: 1;
      }
      .orientation-preview-stage::before { width: calc(100% - 36px); height: 1px; background: rgba(38,71,54,0.14); }
      .orientation-preview-stage::after  { width: 1px; height: calc(100% - 36px); background: rgba(38,71,54,0.14); }
      .orientation-preview-shell img {
        position: absolute; left: 50%; top: 50%;
        display: block; width: auto; height: auto;
        max-width: calc(100% - 24px); max-height: calc(100% - 24px);
        transform-origin: center center; will-change: transform;
      }
      .orientation-reference-image {
        z-index: 1;
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px rgba(85,67,42,0.08);
      }
      .orientation-overlay-image {
        z-index: 2;
        cursor: grab;
        filter: drop-shadow(0 16px 26px rgba(31, 24, 14, 0.14));
      }
      .orientation-overlay-image.is-draggable:active,
      .orientation-overlay-image.is-dragging {
        cursor: grabbing;
      }
      .orientation-toolbar { display: grid; gap: 12px; margin-top: 16px; }
      .orientation-rotate-controls {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      }
      .orientation-rotate-group {
        display: inline-flex; align-items: center; gap: 0;
        border: 1px solid var(--line-strong); border-radius: var(--r-pill);
        overflow: hidden; background: rgba(255,255,255,0.80);
      }
      .orientation-rotate-group .rot-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 5px;
        padding: 0 14px; height: 38px; border: none; border-radius: 0;
        background: transparent; color: var(--ink); font-size: 0.78rem; font-weight: 600;
        cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
        white-space: nowrap;
      }
      .orientation-rotate-group .rot-btn svg { flex-shrink: 0; }
      .orientation-rotate-group .rot-btn:hover { background: var(--accent-pale); color: var(--accent); }
      .orientation-rotate-group .rot-btn:active { background: rgba(179,104,38,0.18); }
      .orientation-rotate-group .rot-sep {
        width: 1px; height: 24px; background: var(--line-strong); flex-shrink: 0;
      }
      .orientation-rotate-group .rot-reset {
        padding: 0 16px; font-size: 0.76rem; color: var(--ink-soft);
      }
      .orientation-rotate-group .rot-reset:hover { color: var(--danger); background: rgba(160,52,41,0.08); }
      .orientation-slider-card {
        padding: 14px 16px; border-radius: var(--r-lg);
        background: rgba(255,255,255,0.65); border: 1px solid var(--line);
        display: grid; gap: 10px;
      }
      .orientation-move-card {
        padding: 14px 16px; border-radius: var(--r-lg);
        background: rgba(255,255,255,0.65); border: 1px solid var(--line);
        display: grid; gap: 12px;
      }
      .orientation-move-controls {
        display: grid; justify-items: center; gap: 8px;
      }
      .orientation-move-row {
        display: flex; align-items: center; gap: 8px;
      }
      .orientation-move-btn {
        min-width: 56px; min-height: 48px; font-size: 1.1rem; font-weight: 700;
      }
      .orientation-slider-header {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
      }
      .orientation-slider-label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
      .orientation-slider-meta { display: flex; align-items: center; gap: 8px; }
      .orientation-angle-input { width: 96px; min-height: 36px; text-align: center; }
      .orientation-delta-chip {
        display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
        border-radius: var(--r-pill); background: var(--accent-pale); border: 1px solid rgba(179,104,38,0.18);
        font-size: 0.76rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
      }
      .orientation-save-row {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
      }

      /* ─── Analysis Panel ───────────────────────────────────────────── */
      .analysis-panel { display: grid; gap: 16px; }

      /* ─── Artifacts ────────────────────────────────────────────────── */
      .artifact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
      figure { margin: 0; background: rgba(255,255,255,0.90); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
      figure img { display: block; width: 100%; height: auto; }
      figcaption { padding: 10px 14px; font-size: 0.80rem; color: var(--muted); border-top: 1px solid var(--line); background: rgba(255,255,255,0.70); }
      .chakra-floor-page { display: grid; gap: 14px; }
      .chakra-view-switcher {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .final-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        position: sticky;
        top: 10px;
        z-index: 14;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: rgba(252, 248, 240, 0.92);
        backdrop-filter: blur(10px);
        box-shadow: 0 12px 28px rgba(28, 44, 34, 0.08);
      }
      .final-topbar-left,
      .final-topbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .final-mode-btn.is-active {
        background: var(--forest);
        color: #fff;
        border-color: transparent;
      }
      .final-tool-panels {
        display: grid;
        gap: 10px;
        position: sticky;
        top: 92px;
        z-index: 13;
      }
      .final-tool-panel {
        display: none;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.92);
        padding: 14px;
        box-shadow: 0 10px 24px rgba(28, 44, 34, 0.06);
      }
      .final-tool-panel.is-open {
        display: grid;
        gap: 12px;
      }
      .final-tool-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .final-tool-panel-title {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--ink);
      }
      .final-tool-panel-copy {
        font-size: 0.80rem;
        color: var(--muted);
      }
      .chakra-view-tab {
        min-height: 40px;
      }
      .chakra-view-tab.is-active {
        background: var(--accent);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 28px rgba(179,104,38,0.18);
      }
      .chakra-stage {
        position: relative;
        min-height: min(72vh, 820px);
        border-radius: var(--r-lg);
        overflow: hidden;
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px;
        transition: opacity 150ms ease;
      }
      @media (max-width: 920px) {
        .final-topbar,
        .final-tool-panels {
          position: static;
          top: auto;
        }
        .final-topbar {
          padding: 0;
          border: none;
          background: transparent;
          backdrop-filter: none;
          box-shadow: none;
        }
      }
      .chakra-stage.is-annotation-mode {
        cursor: crosshair;
      }
      .chakra-base-image {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(68vh, 760px);
        transform-origin: center center;
        position: relative;
        z-index: 1;
      }
      .brahmasthan-dot {
        position: absolute;
        left: 0;
        top: 0;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        background: var(--accent);
        border: 2px solid #fff;
        box-shadow: 0 0 0 10px rgba(179, 104, 38, 0.18);
        transform: translate(-50%, -50%);
        pointer-events: none;
        visibility: hidden;
        z-index: 2;
      }
      .chakra-overlay-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 240px;
        height: 240px;
        background-image: url("/static/vastu_chakra.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        transform-origin: center center;
        pointer-events: auto;
        cursor: grab;
        user-select: none;
        mix-blend-mode: multiply;
        opacity: 0.62;
        visibility: hidden;
        z-index: 3;
      }
      .chakra-overlay-image.is-dragging { cursor: grabbing; }
      .chakra-stage.is-annotation-mode .chakra-overlay-image {
        visibility: hidden !important;
        pointer-events: none;
      }
      .annotation-layer {
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
      }
      .chakra-stage.is-annotation-mode .annotation-layer {
        pointer-events: auto;
      }
      .annotation-marker {
        position: absolute;
        transform: translate(-50%, -50%);
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 800;
        color: #fff;
        border: 2px solid rgba(255,255,255,0.96);
        box-shadow: 0 10px 20px rgba(16, 24, 18, 0.16);
        pointer-events: auto;
        cursor: pointer;
      }
      .annotation-marker::after {
        content: attr(data-short);
      }
      .annotation-marker[data-kind="entrance"] { background: #2d6a4f; }
      .annotation-marker[data-kind="toilet"] { background: #7b3fe4; }
      .annotation-marker[data-kind="stove"] { background: #d9480f; }
      .annotation-marker[data-kind="primary-bed"] { background: #1d4ed8; }
      .annotation-marker[data-kind="kids-bed"] { background: #db2777; }
      .annotation-marker[data-kind="study"] { background: #8b5e34; }
      .annotation-hint {
        position: absolute;
        left: 20px;
        bottom: 20px;
        z-index: 5;
        padding: 9px 12px;
        border-radius: 14px;
        background: rgba(255,255,255,0.94);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        font-size: 0.78rem;
        color: var(--ink-soft);
        max-width: min(420px, calc(100% - 40px));
      }
      .annotation-hint strong { color: var(--ink); }
      .annotation-panel {
        display: none;
      }
      .annotation-toolbar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
      }
      .annotation-tool {
        min-height: 40px;
      }
      .annotation-tool.is-active {
        background: var(--accent);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 28px rgba(179,104,38,0.18);
      }
      .annotation-mode-toggle.is-active {
        background: var(--forest);
        color: #fff;
        border-color: transparent;
      }
      .annotation-toolbar-meta {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        color: var(--muted);
        font-size: 0.8rem;
      }
      .annotation-list {
        display: grid;
        gap: 10px;
      }
      .annotation-empty {
        padding: 14px;
        border-radius: 16px;
        border: 1px dashed var(--line-strong);
        color: var(--muted);
        background: rgba(255,255,255,0.7);
      }
      .annotation-item {
        display: grid;
        gap: 6px;
        padding: 12px 14px;
        border-radius: 16px;
        background: rgba(246, 241, 231, 0.94);
        border: 1px solid rgba(179,104,38,0.12);
      }
      .annotation-item-head {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .annotation-item-title {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        font-weight: 700;
        color: var(--ink);
      }
      .annotation-swatch {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        display: inline-block;
      }
      .annotation-item-meta {
        font-size: 0.8rem;
        color: var(--muted);
      }
      .annotation-item-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .annotation-inline-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .annotation-inline-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.9);
        border: 1px solid rgba(179,104,38,0.16);
        font-size: 0.78rem;
        color: var(--ink-soft);
      }
      .annotation-inline-count {
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(179,104,38,0.12);
        color: var(--accent-strong);
        font-weight: 700;
        font-size: 0.74rem;
      }
      .chakra-controls {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.72);
        border: 1px solid var(--line);
      }
      .chakra-control-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 12px;
      }
      .chakra-control-grid label {
        display: grid;
        gap: 6px;
        font-size: 0.78rem;
        color: var(--muted);
      }
      .chakra-move-row {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .vastu-analysis-card {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.84);
        border: 1px solid var(--line);
      }
      .vastu-analysis-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .vastu-analysis-title {
        margin: 0;
        font-size: 1rem;
        color: var(--ink);
      }
      .vastu-analysis-copy {
        margin: 0;
        font-size: 0.88rem;
        color: var(--muted);
      }
      .vastu-analysis-summary {
        display: grid;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(250, 247, 240, 0.92);
        border: 1px solid rgba(179,104,38,0.12);
      }
      .vastu-analysis-summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .vastu-analysis-summary-copy {
        margin: 0;
        font-size: 0.78rem;
        color: var(--muted);
      }
      .vastu-score-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        font-size: 0.88rem;
        font-weight: 800;
        border: 1px solid var(--line);
        background: rgba(255,255,255,0.9);
      }
      .vastu-score-badge.is-positive {
        color: var(--success);
        background: var(--success-pale);
        border-color: rgba(43,122,69,0.2);
      }
      .vastu-score-badge.is-medium {
        color: var(--accent-strong);
        background: rgba(246, 237, 214, 0.98);
        border-color: rgba(179,104,38,0.2);
      }
      .vastu-score-badge.is-negative {
        color: #a03429;
        background: rgba(249, 226, 222, 0.98);
        border-color: rgba(160,52,41,0.22);
      }
      .vastu-summary-chips {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .vastu-summary-list {
        display: grid;
        gap: 4px;
      }
      .vastu-summary-line {
        font-size: 0.79rem;
        color: var(--ink-soft);
        line-height: 1.4;
      }
      .vastu-summary-line strong {
        color: var(--ink);
      }
      .vastu-analysis-list {
        display: grid;
        gap: 8px;
      }
      .vastu-analysis-item {
        display: grid;
        gap: 5px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(246, 241, 231, 0.94);
        border: 1px solid rgba(179,104,38,0.12);
      }
      .vastu-analysis-item.is-positive {
        background: linear-gradient(180deg, rgba(234, 248, 239, 0.98) 0%, rgba(226, 244, 233, 0.98) 100%);
        border-color: rgba(43,122,69,0.22);
      }
      .vastu-analysis-item.is-moderate {
        background: linear-gradient(180deg, rgba(249, 242, 225, 0.98) 0%, rgba(246, 237, 214, 0.98) 100%);
        border-color: rgba(179,104,38,0.20);
      }
      .vastu-analysis-item.is-high,
      .vastu-analysis-item.is-critical {
        background: linear-gradient(180deg, rgba(252, 236, 234, 0.98) 0%, rgba(249, 226, 222, 0.98) 100%);
        border-color: rgba(160,52,41,0.24);
      }
      .vastu-analysis-item-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
      }
      .vastu-analysis-room {
        font-weight: 700;
        color: var(--ink);
        font-size: 0.98rem;
      }
      .vastu-analysis-meta {
        font-size: 0.78rem;
        color: var(--muted);
        line-height: 1.35;
      }
      .vastu-analysis-body {
        display: grid;
        gap: 3px;
      }
      .vastu-analysis-message {
        font-size: 0.81rem;
        color: var(--ink-soft);
        line-height: 1.38;
      }
      .vastu-analysis-suggestion {
        font-size: 0.77rem;
        color: var(--muted);
        line-height: 1.35;
      }
      .vastu-analysis-detail-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .vastu-analysis-action-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 1px;
      }
      .vastu-analysis-empty {
        padding: 14px;
        border-radius: 16px;
        border: 1px dashed var(--line-strong);
        color: var(--muted);
        background: rgba(255,255,255,0.7);
      }
      .analysis-tool-grid {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
      .vastu-analysis-report-card {
        display: grid;
        gap: 8px;
        padding: 12px 14px;
        border-radius: 16px;
        border: 1px dashed rgba(53, 91, 69, 0.28);
        background: rgba(247, 250, 248, 0.96);
        font-size: 0.8rem;
        color: var(--muted);
      }
      .vastu-analysis-report-card.is-analysis-report {
        border-style: solid;
        background: rgba(250, 251, 248, 0.98);
      }
      .vastu-analysis-report-card strong {
        color: var(--ink);
      }
      .vastu-debug-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .vastu-analysis-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,0.9);
        border: 1px solid rgba(53, 91, 69, 0.12);
      }
      .artifact-disclosure {
        margin-top: 14px; padding: 10px 14px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.52); border: 1px solid var(--line);
      }
      .artifact-disclosure summary { list-style: none; }
      .artifact-disclosure summary::-webkit-details-marker { display: none; }
      .artifact-disclosure > summary {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 0.82rem; font-weight: 600; color: var(--muted); cursor: pointer;
      }
      .artifact-disclosure[open] > summary { margin-bottom: 12px; }

      .page-reset {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 200;
        min-height: 38px;
        padding: 0 16px;
        font-size: 0.82rem;
        border-radius: var(--r-pill);
        border: 1px solid var(--line-strong);
        background: rgba(255,252,245,0.92);
        color: var(--ink-soft);
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(14px);
        transition: box-shadow var(--t-fast), background var(--t-fast);
      }
      .page-reset:hover:not(:disabled) {
        background: rgba(255,255,255,0.98);
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
      }
      .page-reset[hidden] { display: none; }

      /* ─── Tone Pills ───────────────────────────────────────────────── */
      .tone-pill {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 10px; border-radius: var(--r-pill);
        font-size: 0.76rem; font-weight: 700;
        border: 1px solid var(--line); background: rgba(255,255,255,0.72);
      }
      .tone-pill.review { color: var(--accent-strong); background: var(--accent-pale); border-color: rgba(179,104,38,0.22); }
      .tone-pill.ready  { color: var(--success); background: var(--success-pale); border-color: rgba(43,122,69,0.22); }
      .tone-pill.medium { color: var(--ink-soft); background: rgba(100,78,44,0.07); border-color: rgba(100,78,44,0.14); }

      /* ─── Loading State ────────────────────────────────────────────── */
      .loading-state { padding: 48px 32px; border-radius: var(--r-xl); text-align: center; }
      .loading-compass { display: inline-block; width: 68px; height: 68px; margin-bottom: 24px; position: relative; }
      .loading-compass svg { width: 68px; height: 68px; animation: loading-spin 2.2s cubic-bezier(0.5,0.1,0.5,0.9) infinite; }
      .loading-compass::before, .loading-compass::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        border: 2px solid transparent;
        inset: -8px;
      }
      .loading-compass::before {
        border-top-color: rgba(184,114,32,0.25);
        animation: loading-spin 3.4s linear infinite;
      }
      .loading-compass::after {
        border-bottom-color: rgba(26,66,48,0.20);
        animation: loading-spin 2.6s linear infinite reverse;
        inset: -16px;
      }
      @keyframes loading-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      .loading-state h2 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; margin-bottom: 8px; }
      .loading-state p  { font-size: 0.88rem; color: var(--muted); margin-bottom: 30px; }
      .loading-agent-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        max-width: 760px;
        margin: 0 auto 28px;
        text-align: left;
      }
      .loading-agent-card {
        position: relative;
        display: grid;
        gap: 8px;
        padding: 16px 18px;
        border-radius: var(--r-lg);
        border: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(248,241,229,0.92));
        box-shadow: 0 16px 32px rgba(54, 37, 17, 0.06);
        color: var(--muted);
        transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
      }
      .loading-agent-card strong {
        font-size: 0.92rem;
        color: var(--ink);
      }
      .loading-agent-card span:last-child {
        font-size: 0.8rem;
        line-height: 1.55;
      }
      .loading-agent-card.is-active {
        transform: translateY(-3px);
        color: var(--ink-soft);
        border-color: rgba(179,104,38,0.30);
        box-shadow: 0 20px 44px rgba(179,104,38,0.14);
      }
      .loading-agent-badge {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(184,114,32,0.10);
        border: 1px solid rgba(184,114,32,0.16);
      }
      .loading-agent-badge span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--line-strong);
        transition: background var(--t-base), transform var(--t-base);
      }
      .loading-agent-card.is-active .loading-agent-badge span {
        background: var(--accent);
        transform: scale(1.15);
        animation: pulse-dot 1s ease-in-out infinite;
      }
      .loading-steps { display: flex; justify-content: center; gap: 36px; }
      .loading-step  { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.80rem; font-weight: 600; color: var(--muted-light); transition: color var(--t-base); }
      .loading-step-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); transition: background var(--t-base); }
      .loading-step.is-active { color: var(--accent); }
      .loading-step.is-active .loading-step-dot { background: var(--accent); animation: pulse-dot 1s ease-in-out infinite; }
      .loading-step.is-done { color: var(--success); }
      .loading-step.is-done .loading-step-dot { background: var(--success); animation: none; }
      .loading-tip-card {
        max-width: 760px;
        margin: 28px auto 0;
        padding: 18px 22px;
        border-radius: var(--r-lg);
        text-align: left;
        border: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(250,245,236,0.94));
      }
      .loading-tip-label {
        display: inline-block;
        margin-bottom: 8px;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent-strong);
      }
      .loading-tip-card p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--ink-soft);
      }
      @media (max-width: 900px) {
        .loading-agent-grid {
          grid-template-columns: 1fr;
        }
      }


      /* ─── Misc ─────────────────────────────────────────────────────── */
      summary { cursor: pointer; font-weight: 600; }

      /* ─── Responsive ───────────────────────────────────────────────── */
      @media (max-width: 1120px) {
        .landing-grid { grid-template-columns: 1fr; }
        .landing-visual { border-left: none; border-top: 1px solid var(--line); }
        .landing-pillars { grid-template-columns: 1fr; }
      }
      @media (max-width: 900px) {
        .stack-review-grid, .orientation-review-grid, .orientation-review-grid.is-overlay-mode { grid-template-columns: 1fr; }
        .orientation-preview-shell.is-overlay-mode,
        .orientation-preview-stage.is-overlay-mode { min-height: 420px; }
      }
      /* ─── Toast Notifications ───────────────────────────────────────── */
      .vastu-toast {
        position: fixed;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        z-index: 9999;
        min-width: 280px;
        max-width: 520px;
        padding: 13px 18px 13px 20px;
        border-radius: var(--r-md);
        background: var(--panel-solid);
        border: 1px solid var(--line);
        border-left: 4px solid var(--forest);
        box-shadow: var(--shadow-lg);
        font-size: 0.86rem;
        font-weight: 500;
        color: var(--ink);
        opacity: 1;
        transition: opacity 400ms ease, transform 400ms ease;
        pointer-events: none;
      }
      .vastu-toast.is-error {
        background: var(--panel-solid);
        border-color: rgba(150,49,34,0.18);
        border-left-color: var(--danger);
        color: var(--danger);
      }
      .vastu-toast.is-fading {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
      }

      /* ─── Resume Banner ──────────────────────────────────────────────── */
      .resume-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        padding: 12px 16px;
        border-radius: var(--r-md);
        background: var(--success-pale);
        border: 1px solid rgba(43,122,69,0.22);
        margin-bottom: 4px;
        animation: step-enter 0.28s ease both;
      }
      .resume-banner-text { display: flex; flex-direction: column; gap: 2px; }
      .resume-banner-text strong { font-size: 0.88rem; color: var(--success); }
      .resume-banner-text span   { font-size: 0.80rem; color: var(--muted); }
      .resume-banner-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
      .resume-banner-actions button { min-height: 34px; padding: 6px 16px; font-size: 0.82rem; }

      /* ─── Step Chip Saved State ───────────────────────────────────────── */
      .workflow-step-chip[data-saved="true"]::before {
        content: "\2713\00a0";
        color: var(--success);
        font-weight: 700;
      }

      /* ─── Analyze Button ─────────────────────────────────────────────── */
      .chakra-analyze-row {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: flex-end;
      }
      .analyze-btn {
        background: linear-gradient(145deg, var(--forest) 0%, var(--sage) 100%);
        box-shadow: 0 5px 16px rgba(38,72,54,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
        gap: 8px;
        position: relative;
      }
      .analyze-btn:hover:not(:disabled) {
        box-shadow: 0 9px 22px rgba(38,72,54,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
      }
      .analyze-coming-soon {
        font-size: 0.70rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 2px 7px;
        border-radius: var(--r-pill);
        background: rgba(255,255,255,0.20);
        border: 1px solid rgba(255,255,255,0.28);
        margin-left: 4px;
      }

      /* ─── Final Review Summary ───────────────────────────────────────── */
      .final-review-summary {
        display: none;
      }
      .final-review-summary .section-kicker { margin-bottom: 12px; }
      .final-review-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 10px 18px;
        margin-bottom: 10px;
      }
      .final-review-item { display: flex; flex-direction: column; gap: 2px; }
      .final-review-item--wide { grid-column: 1 / -1; }
      .final-review-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
      .final-review-value { font-size: 0.92rem; font-weight: 600; color: var(--ink); font-family: var(--font-display); }
      .final-review-note  { font-size: 0.80rem; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }

      /* ─── Brahmasthan Lock Indicator ──────────────────────────────────── */
      .brahmasthan-lock {
        position: absolute;
        z-index: 4;
        display: none;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: var(--r-pill);
        background: rgba(255,255,255,0.88);
        border: 1px solid var(--line);
        font-size: 0.70rem;
        font-weight: 600;
        color: var(--ink-soft);
        pointer-events: none;
        white-space: nowrap;
        box-shadow: var(--shadow-sm);
        transform: translate(-50%, 8px);
      }
      .brahmasthan-lock.is-visible {
        display: inline-flex;
      }

      /* ─── Landing Explanation & Disclaimer ────────────────────────────── */
      .landing-explanation {
        padding: 0 0 4px;
        font-size: 0.90rem;
        line-height: 1.6;
        color: var(--muted);
        max-width: 62ch;
      }
      .landing-disclaimer-card {
        padding: 14px 16px 14px 18px;
        border-radius: var(--r-md);
        background: rgba(150,49,34,0.045);
        border: 1px solid rgba(150,49,34,0.16);
        border-left: 3px solid rgba(150,49,34,0.35);
        font-size: 0.82rem;
        line-height: 1.58;
        color: var(--ink-soft);
      }
      .landing-disclaimer-card strong {
        display: block;
        margin-bottom: 4px;
        font-size: 0.84rem;
        font-weight: 700;
        color: var(--danger);
      }
      .landing-muted-disclaimer {
        font-size: 0.76rem;
        color: var(--muted-light);
        font-style: italic;
      }
      .legal-page {
        max-width: 1100px;
      }
      .legal-shell {
        display: grid;
        gap: 22px;
        padding: 24px 28px 28px;
      }
      .page-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
        color: var(--gold);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding: 5px 12px;
        border-radius: var(--r-pill);
        background: rgba(201,164,74,0.12);
        border: 1px solid rgba(201,164,74,0.28);
      }
      .page-title {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 2.4vw, 2rem);
        line-height: 1.15;
        letter-spacing: -0.01em;
        color: var(--ink);
        margin: 0;
        max-width: 42ch;
      }
      .legal-hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        padding-bottom: 4px;
        flex-wrap: wrap;
      }
      .page-summary,
      .legal-summary {
        max-width: 65ch;
        margin-top: 10px;
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.65;
      }
      .page-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        flex-shrink: 0;
      }
      .legal-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
      }
      .legal-sidebar {
        position: sticky;
        top: 20px;
      }
      .legal-sidebar-card {
        display: grid;
        gap: 14px;
        padding: 16px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.62);
        border: 1px solid var(--line);
      }
      .legal-sidebar-label {
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .legal-toc {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px;
      }
      .legal-toc a {
        color: var(--ink-soft);
        text-decoration: none;
        font-weight: 500;
        font-size: 0.84rem;
        padding: 7px 10px;
        border-radius: var(--r-md);
        border-left: 2px solid transparent;
        transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
      }
      .legal-toc a:hover {
        background: rgba(255,255,255,0.72);
        border-left-color: var(--gold);
        color: var(--ink);
      }
      .legal-toc a.is-active {
        background: var(--accent-pale);
        border-left-color: var(--accent);
        color: var(--accent-strong);
        font-weight: 600;
      }
      .legal-content {
        display: grid;
        gap: 18px;
      }
      .legal-section {
        display: grid;
        gap: 10px;
        padding: 20px 22px 22px;
        border-radius: var(--r-lg);
        background: rgba(255,255,255,0.62);
        border: 1px solid var(--line);
        transition: box-shadow var(--t-base);
        scroll-margin-top: 100px;
      }
      .legal-section:target {
        box-shadow: 0 0 0 2px rgba(184,114,32,0.28), var(--shadow-sm);
      }
      .legal-section-kicker {
        display: inline-block;
        color: var(--accent-strong);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: var(--r-pill);
        background: var(--accent-pale);
        border: 1px solid rgba(184,114,32,0.22);
      }
      .legal-section h2,
      .legal-section p {
        margin: 0;
      }
      .legal-section h2 {
        font-family: var(--font-display);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.01em;
        color: var(--ink);
      }
      .legal-section p {
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.72;
      }

      @media (max-width: 780px) {
        .site-header {
          flex-direction: column;
          align-items: flex-start;
        }
        .legal-hero {
          flex-direction: column;
        }
        .legal-layout {
          grid-template-columns: 1fr;
        }
        .account-panel-grid {
          grid-template-columns: 1fr;
        }
        .legal-sidebar {
          position: static;
        }
      }

      /* ─── Processing Error Card ───────────────────────────────────────── */
      .processing-error-card {
        padding: 32px;
        border-radius: var(--r-xl);
        background: var(--panel);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-panel);
        text-align: center;
      }
      .processing-error-card .error-icon {
        display: inline-block;
        width: 56px;
        height: 56px;
        line-height: 56px;
        font-size: 2rem;
        margin-bottom: 14px;
        border-radius: 50%;
        background: var(--danger-pale);
        color: var(--danger);
      }
      .processing-error-card h3 {
        font-family: var(--font-display);
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--danger);
        margin-bottom: 8px;
      }
      .processing-error-card .error-message {
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.55;
        margin-bottom: 20px;
        max-width: 48ch;
        margin-left: auto;
        margin-right: auto;
      }

      @media (max-width: 640px) {
        .page { padding: 14px 12px 52px; }
        .auth-shell { flex-direction: column; align-items: flex-start; }
        .account-panel-grid { grid-template-columns: 1fr; }
        .workflow-nav { flex-direction: column; align-items: stretch; }
        .workflow-nav-actions { width: 100%; }
        .workflow-nav-actions button { flex: 1; }
        .metric-value { font-size: 1.05rem; }
        .step-connector { display: none; }
        .workflow-stepper { gap: 6px; flex-wrap: wrap; }
        /* Stack chips vertically on very small screens */
        .workflow-step-chip { font-size: 0.78rem; padding: 6px 10px 6px 6px; }
        .step-num { width: 20px; height: 20px; font-size: 0.70rem; }
        /* Landing pillars full-width on mobile */
        .landing-pillars { grid-template-columns: 1fr; }
        .landing-copy { padding: 24px 20px; }
        /* Analyze row stacks on mobile */
        .chakra-analyze-row { justify-content: stretch; }
        .analyze-btn { width: 100%; justify-content: center; }
        /* Final review grid: 2 cols on mobile */
        .final-review-grid { grid-template-columns: repeat(2, 1fr); }
        /* Resume banner: stack on mobile */
        .resume-banner { flex-direction: column; align-items: flex-start; }
        .resume-banner-actions { width: 100%; }
        .resume-banner-actions button { flex: 1; }
      }