:root {
    --bg: #05070a;
    --steel: #131820;
    --steel-line: #232b38;
    --electric: #00d9ff;
    --ember: #ff6b35;
    --ember-hot: #ffb74d;
    --ink: #e8edf2;
    --ink-dim: #8a94a3;
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-glow-sm: 0 2px 12px rgba(0, 217, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-glow-lg: 0 8px 32px rgba(0, 217, 255, 0.28), 0 2px 8px rgba(0, 0, 0, 0.35);
    --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  }
  * { box-sizing: border-box; }
  .hidden { display: none; }
  html, body {
    margin: 0; height: 100%; background: var(--bg); color: var(--ink);
    font-family: 'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  body { display: flex; flex-direction: column; min-height: 100vh; padding: 28px 24px 40px; position: relative; }

  
  body::before, body::after {
    content: ''; position: fixed; z-index: -2; pointer-events: none;
  }
  body::before {
    top: -20%; left: 50%; width: 1100px; height: 1100px; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(0, 217, 255, 0.10) 0%, rgba(0, 217, 255, 0) 60%);
  }
  body::after {
    bottom: -25%; right: -10%; width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.07) 0%, rgba(255, 107, 53, 0) 60%);
  }
  
  @media (prefers-reduced-motion: no-preference) {
    body::before { animation: ambientBreatheCenter 14s ease-in-out infinite; }
    body::after { animation: ambientBreathe 18s ease-in-out infinite reverse; }
  }
  @keyframes ambientBreatheCenter {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.04); opacity: 0.85; }
  }
  @keyframes ambientBreathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.85; }
  }
  .grid-overlay {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      linear-gradient(rgba(232, 237, 242, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232, 237, 242, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 90%);
  }
  h1, h2, .display { font-family: 'Chakra Petch', sans-serif; letter-spacing: 0.01em; }
  .mono { font-family: 'IBM Plex Mono', monospace; }

  header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: clamp(24px, 6vh, 48px); }
  
  .header-logo {
    height: 120px; width: 120px; aspect-ratio: 1 / 1; flex-shrink: 0;
    filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.3)) drop-shadow(0 0 16px rgba(255, 107, 53, 0.18));
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: default;
  }
  .header-logo svg { width: 100%; height: 100%; overflow: visible; }
  .header-logo:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.55)) drop-shadow(0 0 28px rgba(255, 107, 53, 0.4)) hue-rotate(8deg);
  }
  .header-logo .sf-logo-ring-outer { animation-duration: 9s; }
  .header-logo .sf-logo-ring-inner { animation-duration: 6s; }
  .header-logo .sf-logo-core-group { animation-duration: 3s; }
  .header-logo .sf-logo-orbit { animation-duration: 2.4s; }
  .header-logo .sf-logo-branch { animation-duration: 1.6s; }
  .header-logo .sf-logo-sheen { animation-duration: 1.2s; }

  .header-wordmark {
    font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    letter-spacing: 0.08em; color: var(--ink);
    text-shadow: 0 0 18px rgba(255, 107, 53, 0.35), 0 0 30px rgba(0, 217, 255, 0.18);
  }
  .header-wordmark .dev { color: var(--electric); text-shadow: 0 0 18px rgba(0, 217, 255, 0.5); }
  .header-actions { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .header-actions button { padding: 6px 12px; font-size: 0.72rem; }


  header .logo-icon {
    width: 52px; height: 52px; overflow: hidden; border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 0 22px 2px rgba(0, 217, 255, 0.35), 0 0 4px rgba(255, 107, 53, 0.25);
  }


  .welcome-logo {
    position: relative;
    width: 168px; height: 168px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease-out; transform-style: preserve-3d;
  }
  .welcome-logo svg { width: 100%; height: 100%; overflow: visible; cursor: pointer; position: relative; z-index: 2; }

  .hero-wordmark {
    font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: 0.14em;
    font-size: clamp(1.1rem, 3vw, 1.4rem); color: var(--ink); margin: 6px 0 18px;
  }
  .hero-wordmark .dev { color: var(--electric); }
  .hero-wordmark { animation: sfWordmarkGlow 4s ease-in-out infinite; }
  @keyframes sfWordmarkGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 107, 53, 0.25); }
    50% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.6), 0 0 34px rgba(0, 217, 255, 0.3); }
  }

  .sf-logo-ring-outer { transform-origin: 200px 200px; animation: sfLogoSpin 46s linear infinite; opacity: .55; }
  .sf-logo-ring-inner { transform-origin: 200px 200px; animation: sfLogoSpin 30s linear infinite reverse; opacity: .35; }
  .sf-logo-orbit { transform-origin: 200px 200px; animation: sfLogoSpin 7s linear infinite; }
  .sf-logo-core-group { transform-origin: 200px 200px; animation: sfLogoBreathe 8s ease-in-out infinite; }
  @keyframes sfLogoSpin { to { transform: rotate(360deg); } }
  @keyframes sfLogoBreathe {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.04); filter: brightness(1.18); }
  }

  .sf-logo-flare {
    position: absolute; left: 50%; top: 50%; width: 24%; height: 24%;
    transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
    background: conic-gradient(from 0deg, transparent 0%, #FFD79A 8%, transparent 20%, transparent 55%, #FFD79A 63%, transparent 75%);
    animation: sfLogoSpin 5.5s linear infinite; pointer-events: none; z-index: 3; filter: blur(1.5px);
  }

  .sf-logo-branch { stroke-dasharray: 14 10; animation: sfLogoFlow 2.6s linear infinite; }
  .sf-logo-branch path:nth-child(2) { animation-delay: .15s; }
  .sf-logo-branch path:nth-child(3) { animation-delay: .3s; }
  .sf-logo-branch path:nth-child(4) { animation-delay: .45s; }
  .sf-logo-branch path:nth-child(5) { animation-delay: .6s; }
  .sf-logo-branch path:nth-child(6) { animation-delay: .75s; }
  @keyframes sfLogoFlow { to { stroke-dashoffset: -48; } }

  .sf-logo-sheen { stroke-dasharray: 20 60; animation: sfLogoFlowSheen 2s linear infinite; mix-blend-mode: screen; }
  .sf-logo-sheen path:nth-child(2) { animation-delay: .15s; }
  .sf-logo-sheen path:nth-child(3) { animation-delay: .3s; }
  .sf-logo-sheen path:nth-child(4) { animation-delay: .45s; }
  .sf-logo-sheen path:nth-child(5) { animation-delay: .6s; }
  .sf-logo-sheen path:nth-child(6) { animation-delay: .75s; }
  @keyframes sfLogoFlowSheen { to { stroke-dashoffset: -80; } }

  .sf-logo-ember {
    position: absolute; bottom: 46%; left: 50%; width: 4px; height: 4px; border-radius: 50%;
    background: radial-gradient(circle, #FFFFFF 0%, #FFE3B0 30%, #FF7A18 80%, transparent 100%);
    box-shadow: 0 0 6px 1px rgba(255, 122, 24, 0.4);
    opacity: 0; animation: sfLogoRise 3.4s ease-in infinite; pointer-events: none; z-index: 4;
  }
  .sf-logo-ember-cyan {
    background: radial-gradient(circle, #FFFFFF 0%, #DFFBFF 30%, #23D7FF 80%, transparent 100%);
    box-shadow: 0 0 6px 1px rgba(35, 215, 255, 0.4);
  }
  @keyframes sfLogoRise {
    0% { opacity: 0; transform: translate(0, 0) scale(.3); }
    15% { opacity: .95; }
    80% { opacity: .4; }
    100% { opacity: 0; transform: translate(var(--sf-dx, 10px), -76px) scale(1.3); }
  }
  .sf-logo-ember-1 { left: 49%; --sf-dx: 14px; animation-delay: 0s; width: 5px; height: 5px; }
  .sf-logo-ember-2 { left: 46%; --sf-dx: -25px; animation-delay: .3s; width: 3px; height: 3px; }
  .sf-logo-ember-3 { left: 53%; --sf-dx: 10px; animation-delay: .8s; }
  .sf-logo-ember-4 { left: 48%; --sf-dx: -8px; animation-delay: 1.2s; width: 6px; height: 6px; }
  .sf-logo-ember-5 { left: 51%; --sf-dx: 22px; animation-delay: 1.6s; }

  .welcome-logo:hover .sf-logo-core-group { animation-duration: 2.4s; }
  .welcome-logo:hover .sf-logo-branch { animation-duration: .9s; }
  .welcome-logo:hover .sf-logo-sheen { animation-duration: .7s; }
  .welcome-logo:hover .sf-logo-flare { animation-duration: 2.2s; }
  .sf-logo-heat-bleed { transition: opacity .6s ease; }
  .welcome-logo:hover .sf-logo-heat-bleed { opacity: 1 !important; filter: brightness(1.2); }
  .welcome-logo:hover .sf-logo-ring-outer { animation-duration: 14s; opacity: .85; }

  .sf-logo-shock {
    position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid rgba(255, 178, 71, .85); transform: translate(-50%, -50%);
    pointer-events: none; z-index: 6; animation: sfLogoShockwave .9s ease-out forwards;
  }
  @keyframes sfLogoShockwave {
    0% { width: 10px; height: 10px; opacity: .9; border-color: rgba(255, 215, 158, .95); }
    100% { width: 220px; height: 220px; opacity: 0; border-color: rgba(35, 215, 255, .15); }
  }

  main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
  .stage { width: 100%; max-width: 460px; text-align: center; }
  
  .stage.wide { max-width: 1180px; }
  .stage.hidden { display: none; }
  html.sf-booting .stage { visibility: hidden; pointer-events: none; }
  html.sf-booting main::after {
    content: ''; position: fixed; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border-radius: 50%; border: 2px solid rgba(0, 217, 255, 0.18); border-top-color: var(--electric);
    animation: sfBootSpin 0.9s linear infinite;
  }
  @keyframes sfBootSpin { to { transform: rotate(360deg); } }

  
  @media (prefers-reduced-motion: no-preference) {
    .stage[data-stage="0"] { animation: heroRise 0.7s var(--ease-expo-out) both; }
    .stage[data-stage="0"] .welcome-logo { animation: heroRise 0.8s var(--ease-expo-out) both; }
  }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); margin-bottom: 14px; font-weight: 600; }
  .stage h1, .stage h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 600; margin: 0 0 14px; line-height: 1.25; }
  .stage p.lede { color: var(--ink-dim); font-size: 0.95rem; line-height: 1.55; margin: 0 0 28px; }

  input {
    width: 100%; padding: 14px 16px; font-size: 1rem; font-family: inherit;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    color: var(--ink); outline: none;
    transition: border-color 0.2s var(--ease-expo-out), box-shadow 0.2s var(--ease-expo-out);
  }
  
  input:focus { border-color: var(--electric); box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.15), var(--shadow-glow-sm); }
  input.invalid { border-color: var(--ember-hot); }
  input.invalid:focus { box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.15); }
  input::placeholder { color: var(--ink-dim); }
  label { display: block; text-align: left; font-size: 0.78rem; color: var(--ink-dim); margin: 16px 0 6px; font-weight: 500; }
  label:first-of-type { margin-top: 0; }

  
  .input-wrap { position: relative; }
  .input-wrap input { padding-right: 44px; }
  .input-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    margin: 0; padding: 8px 10px; background: transparent; border: none;
    color: var(--ink-dim); font-size: 0.95rem; cursor: pointer; line-height: 1;
  }
  .input-toggle:hover { color: var(--electric); opacity: 1; }
  .field-hint { text-align: left; font-size: 0.72rem; color: var(--ink-dim); margin-top: 5px; }
  .field-hint.invalid { color: var(--ember-hot); }
  .field-hint.hidden { display: none; }
  .legal-notice { text-align: center; font-size: 0.72rem; color: var(--ink-dim); margin-top: 14px; line-height: 1.5; }
  .legal-notice a { color: var(--ink-dim); text-decoration: underline; }
  .legal-notice a:hover { color: var(--electric); }

  .forgot-password-link {
    display: block; text-align: right; width: 100%;
    font-size: 0.75rem; font-weight: 400; letter-spacing: normal;
    color: var(--ink-dim); background: none; border: none; box-shadow: none;
    border-radius: 0; cursor: pointer; margin: 8px 0 18px; padding: 0;
    transition: color 0.15s;
  }
  .forgot-password-link:hover:not(:disabled) { color: var(--electric); text-decoration: underline; transform: none; box-shadow: none; }
  .forgot-password-link:active:not(:disabled) { transform: none; box-shadow: none; }

  
  button {
    padding: 14px 20px; margin-top: 22px; font-family: inherit;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
    border-radius: 8px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #33e4ff, var(--electric)); color: #04141a;
    box-shadow: var(--shadow-glow-sm);
    transition: box-shadow 0.25s var(--ease-expo-out), transform 0.2s var(--ease-expo-out), opacity 0.15s;
  }
  button.full { width: 100%; }
  button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-glow-lg); }
  button:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-glow-sm); }
  button:disabled { opacity: 0.4; cursor: not-allowed; }
  
  button.ghost { background: transparent; border: 1px solid var(--steel-line); color: var(--ink); box-shadow: none; }
  button.ghost:hover:not(:disabled) { box-shadow: var(--shadow-sm); border-color: var(--ink-dim); }

  .auth-divider { text-align: center; color: var(--ink-dim); font-size: 0.75rem; margin: 16px 0 0; }
  .actions { display: flex; gap: 10px; }

  .message { margin-top: 16px; font-size: 0.85rem; padding: 11px 14px; border-radius: 8px; text-align: left; }
  .message.error { background: rgba(255, 107, 53, 0.1); color: var(--ember-hot); }
  .message.success { background: rgba(0, 217, 255, 0.1); color: var(--electric); }
  .message.info { background: rgba(0, 217, 255, 0.08); color: var(--electric); }
  .message.hidden { display: none; }

  
  .modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(5, 7, 10, 0.86);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .modal-overlay.hidden { display: none; }
  .modal-box {
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 12px;
    box-shadow: var(--shadow-glow-lg);
    padding: 28px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto;
    text-align: left;
  }
  .modal-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .modal-box h3 { margin: 0; font-size: 1.15rem; }
  .modal-box .lede { margin: 6px 0 0; font-size: 0.88rem; }
  .modal-close {
    margin: 0; padding: 4px 9px; font-size: 1rem; line-height: 1; flex-shrink: 0;
    background: transparent; border: 1px solid var(--steel-line); color: var(--ink-dim); box-shadow: none;
  }
  .modal-close:hover { border-color: var(--ink-dim); color: var(--ink); transform: none; box-shadow: none; }
  .tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
  @media (max-width: 480px) { .tier-grid { grid-template-columns: 1fr; } }
  .tier-card { border: 1px solid var(--steel-line); border-radius: 10px; padding: 18px; background: var(--bg); }
  .tier-card .tier-name { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1rem; }
  .tier-card .tier-price { color: var(--electric); font-size: 1.3rem; font-weight: 700; margin: 6px 0 12px; }
  .tier-card ul { margin: 0 0 14px; padding-left: 18px; font-size: 0.82rem; color: var(--ink-dim); }
  .tier-card li { margin-bottom: 4px; }
  .paywall-lifetime-features { margin: 18px 0 0; padding: 0; list-style: none; }
  .paywall-lifetime-features.hidden { display: none; }
  .paywall-lifetime-features li {
    position: relative; padding-left: 22px; margin-bottom: 7px;
    font-size: 0.87rem; color: var(--ink); line-height: 1.4;
  }
  .paywall-lifetime-features li::before {
    content: '✓'; position: absolute; left: 0; color: var(--electric); font-weight: 700;
  }
  .paywall-lifetime-buyout { margin-top: 22px; }
  .paywall-lifetime-buyout.hidden { display: none; }
  .paywall-lifetime-divider {
    text-align: center; font-size: 0.75rem; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px;
  }
  .paywall-lifetime-buyout-lede { font-size: 0.85rem; color: var(--ink-dim); margin: 0 0 12px; line-height: 1.4; }
  .paywall-lifetime-buyout .btn-own-app { margin-top: 0; }
  .tier-card button { margin-top: 0; width: 100%; }
  .trial-offer-banner {
    border: 1px solid var(--electric); border-radius: 10px; padding: 16px;
    background: var(--bg); margin-bottom: 18px;
  }
  .trial-offer-banner.hidden { display: none; }
  .trial-offer-lede { font-size: 0.85rem; color: var(--ink); margin: 0 0 12px; line-height: 1.4; }
  .trial-offer-banner button { width: 100%; }

  
  .expanded-preview-box {
    max-width: 95vw; width: 95vw; height: 90vh;
    display: flex; flex-direction: column; padding: 20px;
  }
  .expanded-preview-frame {
    flex: 1; margin-top: 14px; border-radius: 8px; overflow: hidden;
    background: #fff;
  }
  .expanded-preview-frame iframe { width: 100%; height: 100%; border: none; }

  
  .profile-menu { position: relative; }
  .profile-menu.hidden { display: none; }
  .avatar-btn {
    margin: 0; padding: 0; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #33e4ff, var(--electric)); color: #04141a;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
    box-shadow: var(--shadow-glow-sm);
  }
  .dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 170px;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 10px;
    box-shadow: var(--shadow-glow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  }
  .dropdown.hidden { display: none; }
  .dropdown button {
    margin: 0; padding: 9px 12px; background: transparent; border: none; box-shadow: none;
    color: var(--ink); font-size: 0.85rem; font-weight: 500; text-align: left; border-radius: 6px; transform: none;
  }
  .dropdown button:hover { background: rgba(0, 217, 255, 0.08); transform: none; box-shadow: none; }

  .settings-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--steel-line); font-size: 0.85rem;
  }
  .settings-row:last-child { border-bottom: none; }
  .settings-row .mono { color: var(--ink-dim); font-size: 0.8rem; }
  .tier-badge {
    padding: 4px 11px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    background: rgba(0, 217, 255, 0.1); color: var(--electric); text-transform: capitalize;
  }

  .settings-password-change { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--steel-line); }
  .settings-password-change h4 { margin: 0 0 10px; font-size: 0.85rem; }
  .settings-password-change input { margin-bottom: 10px; }
  .settings-password-change button { margin-top: 0; }

  .settings-api-keys { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--steel-line); }
  .settings-api-keys h4 { margin: 0 0 4px; font-size: 0.85rem; }
  .settings-api-keys .lede { font-size: 0.76rem; margin-bottom: 12px; }
  .api-key-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 0; font-size: 0.8rem; border-bottom: 1px solid var(--steel-line);
  }
  .api-key-row:last-child { border-bottom: none; }
  .api-key-value {
    font-family: monospace; font-size: 0.78rem; word-break: break-all;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 6px;
    padding: 8px 10px; margin: 8px 0;
  }
  .api-key-warning { color: var(--ember-hot); font-size: 0.76rem; margin: 10px 0 0; }
  #btn-generate-api-key, #btn-copy-api-key { margin-top: 10px; }

  
  .workspace { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; align-items: start; text-align: left; position: relative; }

  .metier-gate-overlay {
    position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center;
    padding: 24px; background: rgba(5, 8, 12, 0.94); backdrop-filter: blur(6px);
    border-radius: 12px; overflow-y: auto;
  }
  .metier-gate-overlay.hidden { display: none; }
  .metier-gate-box { max-width: 640px; width: 100%; text-align: center; margin: 0 auto; }
  .metier-gate-box h2 { margin: 0 0 8px; font-size: 1.4rem; }
  .metier-gate-box .lede { margin: 0 0 18px; color: var(--ink-dim); }
  .metier-gate-quickstart-label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #00d9ff; margin-bottom: 10px; }
  .metier-gate-quickstart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
  .quickstart-card {
    display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; margin: 0;
    background: linear-gradient(135deg, rgba(0,217,255,0.08), rgba(124,77,255,0.08));
    border: 1px solid rgba(0,217,255,0.3); border-radius: 8px; cursor: pointer; transition: border-color .15s, transform .15s;
  }
  .quickstart-card:hover { border-color: #00d9ff; transform: translateY(-1px); box-shadow: none; }
  .quickstart-card-label { font-size: 0.83rem; font-weight: 700; color: var(--ink); }
  .quickstart-card-desc { font-size: 0.7rem; color: var(--ink-dim); line-height: 1.3; }
  .metier-gate-or { font-size: 0.78rem; color: var(--ink-dim); margin-bottom: 14px; }
  .metier-gate-toggle {
    width: 100%; background: transparent; border: 1px dashed var(--steel-line); color: var(--ink-dim);
    font-size: 0.85rem; padding: 10px; border-radius: 8px; margin-bottom: 14px; cursor: pointer; box-shadow: none;
  }
  .metier-gate-toggle:hover { border-color: #00d9ff; color: #00d9ff; transform: none; box-shadow: none; }
  .metier-gate-toggle.hidden { display: none; }
  .metier-gate-more.hidden { display: none; }
  #metier-gate-picker.hidden { display: none; }
  .metier-gate-unavailable.hidden { display: none; }
  .metier-gate-unavailable { padding: 24px 0; }
  @media (max-width: 520px) { .metier-gate-quickstart { grid-template-columns: 1fr; } }
  .metier-gate-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
    margin-bottom: 20px; text-align: left;
  }
  .metier-gate-tile-wrap { position: relative; }
  .metier-gate-tile {
    width: 100%; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--steel-line); background: var(--steel);
    color: var(--ink); cursor: pointer; font-size: 0.85rem; font-weight: 600; text-align: left;
    transition: border-color 0.15s, background 0.15s;
  }
  .metier-gate-tile:hover { border-color: var(--electric); background: rgba(0, 217, 255, 0.06); }
  .metier-gate-tooltip {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 45;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    padding: 10px 12px; font-size: 0.76rem; line-height: 1.5; color: var(--ink-dim);
    box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
  }
  .metier-gate-tooltip p { margin: 0 0 8px; }
  .metier-gate-tooltip ul { margin: 0; padding-left: 16px; }
  .metier-gate-tooltip li { margin-bottom: 3px; }
  .metier-gate-tooltip li:last-child { margin-bottom: 0; }
  .metier-gate-tile-wrap:hover .metier-gate-tooltip,
  .metier-gate-tile-wrap:focus-within .metier-gate-tooltip { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .metier-gate-custom { width: 100%; font-size: 0.8rem; }
  .metier-gate-custom.hidden { display: none; }
  .workspace-chat, .workspace-preview { display: flex; flex-direction: column; min-width: 0; }
  .workspace-col-label {
    font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 10px; font-weight: 600;
  }
  .preview-ownership-notice {
    font-size: 0.8rem; color: var(--ink-dim); margin: -6px 0 14px; line-height: 1.4;
  }
  .preview-card {
    border: 1px solid var(--steel-line); border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .preview-card.has-ownership-cta {
    border-color: rgba(255, 107, 53, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.08), var(--shadow-glow-sm);
  }
  .ownership-cta-top, .ownership-cta-bottom {
    background: linear-gradient(160deg, rgba(255, 107, 53, 0.10), rgba(0, 217, 255, 0.06));
    padding: 18px 20px 14px;
  }
  .ownership-cta-top.hidden, .ownership-cta-bottom.hidden { display: none; }
  .ownership-cta-top { border-bottom: 1px solid rgba(255, 107, 53, 0.15); }
  .ownership-cta-bottom { padding: 14px 20px 18px; border-top: 1px solid rgba(255, 107, 53, 0.15); }
  .ownership-cta-badge-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
  .ownership-cta-badge {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, var(--ember-hot), var(--ember));
    color: #1a0a02; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em;
    padding: 5px 12px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(255, 107, 53, 0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .ownership-cta-badge:hover:not(:disabled) {
    transform: scale(1.05); box-shadow: 0 2px 16px rgba(255, 107, 53, 0.7);
  }
  .ownership-cta-badge:disabled { cursor: default; opacity: 0.6; }
  .ownership-cta-eyebrow {
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ember-hot); font-weight: 700; margin-bottom: 6px;
  }
  .ownership-cta-top h3 {
    margin: 0 0 12px; font-family: 'Chakra Petch', sans-serif; font-size: 1.15rem;
    line-height: 1.3; color: var(--ink);
  }
  .ownership-cta-list { margin: 0; padding: 0; list-style: none; }
  .ownership-cta-list li {
    position: relative; padding-left: 22px; margin-bottom: 7px;
    font-size: 0.87rem; color: var(--ink); line-height: 1.4;
  }
  .ownership-cta-list li::before {
    content: '✓'; position: absolute; left: 0; color: var(--electric); font-weight: 700;
  }
  .btn-own-app {
    width: 100%; margin-top: 0; padding: 15px 20px; font-size: 1rem;
    background: linear-gradient(135deg, var(--ember-hot), var(--ember) 55%, var(--electric));
    color: #0a0704; box-shadow: 0 0 22px 2px rgba(255, 107, 53, 0.35), 0 0 4px rgba(0, 217, 255, 0.25);
  }
  .btn-own-app:hover:not(:disabled) {
    box-shadow: 0 0 30px 4px rgba(255, 107, 53, 0.5), 0 0 8px rgba(0, 217, 255, 0.35);
  }
  .ownership-cta-fineprint {
    margin: 10px 0 0; font-size: 0.75rem; color: var(--ink-dim); text-align: center; line-height: 1.4;
  }
  .upgrade-nudge-banner {
    position: relative; margin: 0 0 14px; padding: 14px 40px 14px 16px;
    border-radius: 10px; border: 1px solid rgba(0, 217, 255, 0.3);
    background: linear-gradient(160deg, rgba(0, 217, 255, 0.10), rgba(0, 217, 255, 0.03));
  }
  .upgrade-nudge-banner.hidden { display: none; }
  .upgrade-nudge-eyebrow {
    font-size: 0.85rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3;
  }
  .upgrade-nudge-body {
    margin: 0 0 10px; font-size: 0.8rem; color: var(--ink-dim); line-height: 1.4;
  }
  .upgrade-nudge-cta {
    margin: 0; padding: 7px 16px; font-size: 0.8rem; border-radius: 999px;
    background: transparent; border: 1px solid var(--electric); color: var(--electric);
    box-shadow: none; transform: none;
  }
  .upgrade-nudge-cta:hover { background: rgba(0, 217, 255, 0.08); }
  .upgrade-nudge-close {
    position: absolute; top: 10px; right: 10px; margin: 0; padding: 2px 6px;
    background: transparent; border: none; box-shadow: none; color: var(--ink-dim);
    font-size: 0.85rem; cursor: pointer; transform: none;
  }
  .upgrade-nudge-close:hover { color: var(--ink); }

  @media (max-width: 900px) {
    .workspace { grid-template-columns: 1fr; }
  }

  
  .side-tabs { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--steel-line); }
  .side-tab {
    margin: 0; padding: 9px 4px 11px; background: transparent; border: none; box-shadow: none;
    color: var(--ink-dim); font-size: 0.85rem; font-weight: 600; border-bottom: 2px solid transparent;
    border-radius: 0; display: flex; align-items: center; gap: 6px; transform: none;
  }
  .side-tab:hover:not(:disabled) { color: var(--ink); transform: none; box-shadow: none; }
  .side-tab.active { color: var(--electric); border-bottom-color: var(--electric); }
  .side-tab-panel.hidden { display: none; }
  
  #tab-chat.drag-over {
    outline: 2px dashed var(--electric); outline-offset: -2px; border-radius: 10px;
    background: rgba(0, 217, 255, 0.05);
  }

  #btn-upload-logo.drag-over, #btn-upload-favicon.drag-over {
    outline: 2px dashed var(--electric); outline-offset: 2px;
    background: rgba(0, 217, 255, 0.1);
  }

  .file-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
  .file-list-empty { color: var(--ink-dim); font-size: 0.85rem; padding: 8px 0; }
  .file-list-item {
    display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: transparent;
    border: none; box-shadow: none; margin: 0; padding: 8px 10px; border-radius: 6px;
    font-family: 'IBM Plex Mono', monospace; transform: none; cursor: pointer;
  }
  .file-list-name { color: var(--ink); font-weight: 600; font-size: 0.95rem; word-break: break-all; line-height: 1.35; }
  .file-list-dir { color: var(--ink-dim); font-weight: 400; font-size: 0.78rem; word-break: break-all; line-height: 1.3; }
  .file-list-item:hover { background: rgba(0, 217, 255, 0.08); transform: none; box-shadow: none; }
  .file-list-item:hover .file-list-name { color: #00d9ff; }
  .file-viewer.hidden { display: none; }
  .file-viewer-path { font-size: 0.78rem; color: var(--ink-dim); margin: 10px 0 8px; word-break: break-all; }
  .file-viewer-content {
    max-height: 380px; overflow: auto; margin: 0; padding: 12px; font-size: 0.78rem; line-height: 1.5;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px; white-space: pre-wrap;
  }
  .files-pro-lock {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.09), rgba(124, 77, 255, 0.09));
    border: 1px solid rgba(0, 217, 255, 0.28); border-radius: 10px; padding: 16px 14px; margin-bottom: 12px; text-align: center;
  }
  .files-pro-lock.hidden { display: none; }
  .files-pro-lock-icon { font-size: 1.5rem; }
  .files-pro-lock h3 { margin: 6px 0 4px; font-size: 0.98rem; color: var(--ink); }
  .files-pro-lock p { margin: 0 0 12px; font-size: 0.83rem; color: var(--ink-dim); line-height: 1.45; }

  .addons-intro { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.45; margin: 0 0 14px; }
  .addons-section { margin-bottom: 18px; }
  .addons-section-title {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-dim); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--steel-line);
  }
  .addon-card {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
  }
  .addon-info { flex: 1; min-width: 0; }
  .addon-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
  .addon-desc { font-size: 0.78rem; color: var(--ink-dim); line-height: 1.35; margin-top: 2px; }
  .addon-action {
    flex-shrink: 0; margin: 0; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; border-radius: 7px; cursor: pointer;
    background: #00d9ff; color: #041018; border: none; box-shadow: none;
  }
  .addon-action.is-locked { background: transparent; color: #00d9ff; border: 1px solid rgba(0, 217, 255, 0.4); }
  .addon-action.is-remove { background: transparent; color: #ff6b6b; border: 1px solid rgba(255, 107, 107, 0.4); }
  .addon-lock-note { font-size: 0.74rem; font-weight: 600; color: #00b8d9; margin-top: 4px; }

  
  .suggestion-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .suggestion-chips.hidden { display: none; }
  .chip {
    margin: 0; padding: 7px 13px; background: var(--steel); border: 1px solid var(--steel-line); box-shadow: none;
    color: var(--ink); font-size: 0.78rem; font-weight: 500; border-radius: 999px; transform: none;
  }
  .chip:hover:not(:disabled) { border-color: var(--electric); color: var(--electric); transform: none; box-shadow: none; }

  .blueprint-picker-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .blueprint-chip-wrap { position: relative; display: inline-block; }
  .blueprint-chip {
    margin: 0; padding: 7px 13px; background: var(--steel); border: 1px solid var(--steel-line); box-shadow: none;
    color: var(--ink); font-size: 0.78rem; font-weight: 500; border-radius: 999px; transform: none; cursor: pointer;
  }
  .blueprint-chip:hover:not(:disabled) { border-color: var(--electric); color: var(--electric); transform: none; box-shadow: none; }
  .blueprint-chip.selected { border-color: var(--electric); color: var(--electric); background: var(--steel); }
  .blueprint-chip.locked { cursor: default; opacity: 0.7; }
  .blueprint-chip.locked:hover { border-color: var(--steel-line); color: var(--ink); }


  .blueprint-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20; width: 260px;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    padding: 10px 12px; font-size: 0.76rem; line-height: 1.5; color: var(--ink-dim);
    box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: translateY(4px);
    transition: opacity 0.12s, transform 0.12s;
  }
  .blueprint-chip-wrap:hover .blueprint-tooltip,
  .blueprint-chip-wrap:focus-within .blueprint-tooltip { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .blueprint-tooltip-section + .blueprint-tooltip-section { margin-top: 8px; }
  .blueprint-tooltip-label {
    display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--electric); margin-bottom: 4px;
  }
  .blueprint-tooltip ul { margin: 0; padding-left: 16px; }
  .blueprint-tooltip li { margin-bottom: 3px; }
  .blueprint-tooltip li:last-child { margin-bottom: 0; }

  
  .blueprint-tab-intro { font-size: 0.85rem; color: var(--ink-dim); line-height: 1.5; margin: 0 0 16px; }
  .blueprint-tab-locked-notice {
    font-size: 0.8rem; color: var(--ink-dim); background: var(--steel); border: 1px solid var(--steel-line);
    border-radius: 8px; padding: 10px 12px; margin-bottom: 14px;
  }
  .blueprint-tab-locked-notice.hidden { display: none; }

  
  .blueprint-cta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
    padding: 8px 12px; background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    font-size: 0.78rem; color: var(--ink-dim);
  }
  .blueprint-cta.hidden { display: none; }

  
  .blueprint-badge {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    padding: 6px 10px; background: var(--steel); border: 1px solid var(--electric); border-radius: 999px;
    font-size: 0.78rem; color: var(--ink); width: fit-content;
  }
  .blueprint-badge.hidden { display: none; }

  .blueprint-payroll-notice {
    margin-bottom: 12px; padding: 8px 12px; border-radius: 8px;
    background: rgba(255, 183, 77, 0.1); border: 1px solid rgba(255, 183, 77, 0.3);
    font-size: 0.75rem; color: var(--ember-hot); line-height: 1.4;
  }
  .blueprint-payroll-notice.hidden { display: none; }
  .blueprint-badge-change, .blueprint-badge-remove {
    margin: 0; padding: 2px 8px; background: transparent; border: none; box-shadow: none;
    color: var(--electric); font-size: 0.75rem; font-weight: 600; cursor: pointer; transform: none;
  }
  .blueprint-badge-remove { padding: 2px 6px; color: var(--ink-dim); }
  .blueprint-badge-remove.hidden { display: none; }

  .attachment-preview {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 10px;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px; font-size: 0.8rem;
  }
  .attachment-preview.hidden { display: none; }
  .attachment-preview img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
  .attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
  .attachment-remove {
    margin: 0; padding: 3px 8px; background: transparent; border: none; box-shadow: none;
    color: var(--ink-dim); font-size: 0.85rem; transform: none; flex-shrink: 0;
  }
  .attachment-remove:hover { color: var(--ember-hot); transform: none; box-shadow: none; }

  .actions { align-items: stretch; }
  .icon-btn {
    margin: 0; padding: 0 14px; flex: 0 0 auto; font-size: 1rem; display: flex; align-items: center; justify-content: center;
  }
  .icon-btn.hidden { display: none; }
  #chat-file-input.hidden, #logo-file-input.hidden, #favicon-file-input.hidden { display: none; }
  #stage0-form.hidden, #stage0-pending-confirmation.hidden, #stage0-set-password.hidden { display: none; }
  #stage0-mfa.hidden, #mfa-enroll-ui.hidden, #api-key-reveal.hidden { display: none; }
  .icon-btn.active { border-color: var(--electric); color: var(--electric); background: rgba(0, 217, 255, 0.08); }

  .chat-thread { max-height: 420px; overflow-y: auto; text-align: left; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
  .bubble { max-width: 85%; padding: 11px 14px; border-radius: 10px; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
  .bubble.user { align-self: flex-end; background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.25); }
  .bubble.agent { align-self: flex-start; background: var(--steel); border: 1px solid var(--steel-line); }
  .bubble .who { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); margin-bottom: 4px; }

  .bubble.suggestion-card { display: flex; flex-direction: column; gap: 10px; border-color: var(--electric); }
  .suggestion-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .suggestion-actions button { margin: 0; padding: 7px 14px; font-size: 0.8rem; }

  .thinking { display: flex; align-items: center; gap: 8px; justify-content: flex-start; font-size: 0.82rem; color: var(--ink-dim); margin-bottom: 14px; }
  .thinking.hidden { display: none; }
  .thinking-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); animation: pulse 1.2s infinite ease-in-out; flex-shrink: 0; }
  .thinking-dot:nth-child(2) { animation-delay: 0.2s; }
  .thinking-dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

  textarea {
    width: 100%; padding: 12px 14px; font-size: 0.95rem; font-family: inherit;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    color: var(--ink); outline: none; resize: vertical; transition: border-color 0.15s, box-shadow 0.15s;
  }
  textarea:focus { border-color: var(--electric); }
  
  #chat-input:focus { box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.15), 0 0 18px rgba(0, 217, 255, 0.25); }

  
  .project-list { text-align: left; margin-bottom: 8px; }
  
  
  .skeleton-card {
    height: 64px; margin-bottom: 10px; border-radius: 8px;
    background: var(--steel); border: 1px solid var(--steel-line);
    overflow: hidden; position: relative;
  }
  .skeleton-card::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(232, 237, 242, 0.06), transparent);
  }
  @media (prefers-reduced-motion: no-preference) {
    .skeleton-card::after { animation: skeletonShimmer 1.6s ease-in-out infinite; }
  }
  @media (prefers-reduced-motion: reduce) {
    .skeleton-card { opacity: 0.6; }
  }
  @keyframes skeletonShimmer { 100% { transform: translateX(100%); } }

  .project-card {
    display: flex; align-items: stretch; gap: 0; margin-bottom: 10px; border-radius: 8px;
    background: var(--steel); border: 1px solid var(--steel-line);
    transition: border-color 0.15s;
  }
  .project-card:hover { border-color: var(--electric); }
  .project-card-main {
    flex: 1; display: flex; justify-content: space-between; align-items: center;
    background: transparent; border: none; padding: 14px 16px; cursor: pointer;
    text-align: left; font-family: inherit; color: inherit;
  }
  .project-card-main:active { transform: scale(0.99); }
  .project-card .name { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
  .project-card .meta { font-size: 0.75rem; color: var(--ink-dim); margin-top: 3px; }
  .project-card .arrow { color: var(--electric); font-size: 1.2rem; flex-shrink: 0; margin-left: 10px; }

  
  .project-card-checkbox {
    display: flex; align-items: center; padding: 0 6px 0 14px; flex-shrink: 0;
  }
  .project-card-checkbox input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--electric); }
  .batch-bar {
    display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 10px 14px;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    font-size: 0.82rem; color: var(--ink-dim);
  }
  .batch-select-all { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink); }
  .batch-select-all input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--electric); }
  .batch-count { flex: 1; }
  .batch-actions { display: flex; gap: 8px; }
  .batch-actions button {
    margin: 0; padding: 7px 14px; font-size: 0.8rem; transform: none; box-shadow: none;
  }
  .batch-actions button:disabled { opacity: 0.35; cursor: not-allowed; }

  
  .project-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin: -4px 0 18px;
  }
  .project-badge {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: rgba(0, 217, 255, 0.06); border: 1px solid rgba(0, 217, 255, 0.2);
    border-radius: 999px; font-size: 0.92rem; font-weight: 500; color: var(--ink); max-width: 100%;
  }
  .project-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .recent-menu { position: relative; }
  .recent-menu .dropdown { min-width: 220px; }
  .recent-item {
    margin: 0; padding: 9px 12px; background: transparent; border: none; box-shadow: none;
    color: var(--ink); font-size: 0.85rem; font-weight: 500; text-align: left; border-radius: 6px;
    transform: none; width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .recent-item:hover { background: rgba(0, 217, 255, 0.08); transform: none; box-shadow: none; }
  .recent-empty { padding: 9px 12px; color: var(--ink-dim); font-size: 0.82rem; }
  .project-badge-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--electric);
    box-shadow: 0 0 8px 2px rgba(0, 217, 255, 0.6); flex-shrink: 0;
  }
  .project-badge span.label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px;
  }
  .btn-switch {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px;
    background: transparent; border: 1px solid var(--steel-line); border-radius: 999px;
    color: var(--ink-dim); font-size: 0.78rem; font-weight: 500; cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s; flex-shrink: 0;
  }
  .btn-switch:hover { border-color: var(--electric); color: var(--electric); background: rgba(0, 217, 255, 0.06); }
  .btn-switch:active { transform: scale(0.97); }
  .btn-switch .icon { font-size: 0.9rem; line-height: 1; }
  .btn-switch.hidden { display: none; }

  
  .progress-track {
    width: 100%; height: 4px; background: var(--steel-line); border-radius: 4px;
    overflow: hidden; margin: 4px 0 12px;
  }
  .progress-track.hidden { display: none; }
  .progress-fill {
    width: 40%; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--electric), transparent);
    animation: sweep 1.4s ease-in-out infinite;
  }
  @keyframes sweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(340%); }
  }
  .files-progress {
    text-align: left; font-size: 0.76rem; color: var(--ink-dim); margin: -8px 0 14px;
    font-family: 'IBM Plex Mono', monospace;
  }
  .files-progress.hidden { display: none; }

  
  .build-log {
    text-align: left; background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    padding: 12px 14px; font-size: 0.78rem; color: var(--ink-dim); max-height: 160px; overflow-y: auto;
    white-space: pre-wrap; line-height: 1.6;
  }
  .build-log .ok { color: var(--electric); }
  .build-log .err { color: var(--ember-hot); }

  
  .build-log-details { margin-bottom: 16px; }
  .build-log-details summary {
    cursor: pointer; font-size: 0.78rem; color: var(--ink-dim); font-family: 'IBM Plex Mono', monospace;
    padding: 4px 0; user-select: none;
  }
  .build-log-details[open] summary { margin-bottom: 8px; }

  
  
  .preview-frame-wrap {
    position: relative;
    border: 1px solid var(--steel-line); border-radius: 10px; overflow: hidden;
    background:
      radial-gradient(3px 3px at 20% 30%, rgba(0, 217, 255, 0.55), transparent 60%),
      radial-gradient(2.5px 2.5px at 75% 22%, rgba(255, 107, 53, 0.5), transparent 60%),
      radial-gradient(3px 3px at 62% 78%, rgba(0, 217, 255, 0.45), transparent 60%),
      radial-gradient(2px 2px at 30% 82%, rgba(255, 107, 53, 0.4), transparent 60%),
      radial-gradient(2px 2px at 85% 65%, rgba(0, 217, 255, 0.35), transparent 60%),
      linear-gradient(rgba(232, 237, 242, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232, 237, 242, 0.035) 1px, transparent 1px),
      var(--bg);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 42px 42px, 42px 42px, 100% 100%;
    height: 480px; display: flex; align-items: center; justify-content: center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .preview-frame-wrap { animation: previewAmbientDrift 20s ease-in-out infinite; }
  }
  @keyframes previewAmbientDrift {
    0%, 100% { background-position: 20% 30%, 75% 22%, 62% 78%, 30% 82%, 85% 65%, 0 0, 0 0, 0 0; }
    50% { background-position: 24% 35%, 71% 26%, 66% 73%, 26% 77%, 81% 70%, 8px 8px, 8px 8px, 0 0; }
  }
  .preview-frame-wrap.has-iframe { background: #fff; animation: none; }
  .preview-frame-wrap iframe { width: 100%; height: 100%; border: none; }
  
  .preview-frame-wrap iframe.preview-iframe-loading { position: absolute; inset: 0; z-index: 1; }
  .preview-placeholder { color: #94a3b8; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; }

  
  .preview-idle {
    display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 20px;
  }
  .preview-idle-logo {
    position: relative;
    width: 200px; max-width: 60%; aspect-ratio: 1 / 1;
    filter: drop-shadow(0 0 26px rgba(0, 217, 255, 0.35)) drop-shadow(0 0 44px rgba(255, 107, 53, 0.22));
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: default;
  }
  .preview-idle-logo svg { width: 100%; height: 100%; overflow: visible; }

  .preview-idle-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 42px rgba(0, 217, 255, 0.6)) drop-shadow(0 0 68px rgba(255, 107, 53, 0.45)) hue-rotate(10deg);
  }
  .preview-idle-logo { animation: brandLogoLive 5s ease-in-out infinite; }
  
  .preview-idle .preview-placeholder {
    display: inline-block; text-align: left; max-width: 60ch; white-space: nowrap; overflow: hidden;
    vertical-align: bottom;
  }
  .preview-idle .preview-placeholder::after {
    content: '|'; margin-left: 2px; color: var(--electric);
  }
  @media (prefers-reduced-motion: no-preference) {
    .preview-idle .preview-placeholder {
      max-width: 0;
      animation: typewriterCycle 9s steps(60, end) infinite;
    }
    .preview-idle .preview-placeholder::after {
      animation: cursorBlink 0.8s step-end infinite;
    }
  }
  @keyframes typewriterCycle {
    0% { max-width: 0; }
    40% { max-width: 60ch; }
    75% { max-width: 60ch; }
    100% { max-width: 0; }
  }
  @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

  
  #preview-wrap.loading { background: radial-gradient(circle at 50% 38%, rgba(0, 217, 255, 0.10), var(--bg) 72%); }
  
  .preview-loading {
    position: absolute; inset: 0; z-index: 2;
    
    background:
      radial-gradient(3px 3px at 20% 30%, rgba(0, 217, 255, 0.55), transparent 60%),
      radial-gradient(2.5px 2.5px at 75% 22%, rgba(255, 107, 53, 0.5), transparent 60%),
      radial-gradient(3px 3px at 62% 78%, rgba(0, 217, 255, 0.45), transparent 60%),
      radial-gradient(2px 2px at 30% 82%, rgba(255, 107, 53, 0.4), transparent 60%),
      linear-gradient(rgba(232, 237, 242, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232, 237, 242, 0.035) 1px, transparent 1px),
      radial-gradient(circle at 50% 38%, rgba(0, 217, 255, 0.10), var(--bg) 72%), var(--bg);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 42px 42px, 42px 42px, 100% 100%, 100% 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 20px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .preview-loading { animation: previewLoadingAmbientDrift 20s ease-in-out infinite; }
  }
  
  @keyframes previewLoadingAmbientDrift {
    0%, 100% { background-position: 20% 30%, 75% 22%, 62% 78%, 30% 82%, 0 0, 0 0, 50% 38%, 0 0; }
    50% { background-position: 24% 35%, 71% 26%, 66% 73%, 26% 77%, 8px 8px, 8px 8px, 50% 38%, 0 0; }
  }
  
  .preview-loading-logo {
    position: relative;
    width: 160px; max-width: 44%; aspect-ratio: 1 / 1;
    animation: brandLogoLive 5s ease-in-out infinite;
  }
  .preview-loading-logo svg { width: 100%; height: 100%; overflow: visible; }
  
  @keyframes brandLogoLive {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 26px rgba(0, 217, 255, 0.35)) drop-shadow(0 0 44px rgba(255, 107, 53, 0.22)) hue-rotate(0deg);
    }
    50% {
      transform: scale(1.06);
      filter: drop-shadow(0 0 42px rgba(0, 217, 255, 0.55)) drop-shadow(0 0 64px rgba(255, 107, 53, 0.38)) hue-rotate(14deg);
    }
  }
  .preview-steps { display: flex; flex-direction: column; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; }
  .preview-step { display: flex; align-items: center; gap: 11px; color: var(--ink-dim); transition: color 0.3s ease; }
  .preview-step .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--steel-line); flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  .preview-step.active { color: var(--electric); }
  .preview-step.active .dot { background: var(--electric); box-shadow: 0 0 8px 2px rgba(0, 217, 255, 0.6); animation: pulse 1.2s infinite ease-in-out; }
  .preview-step.done { color: var(--ink); }
  .preview-step.done .dot { background: var(--electric); box-shadow: none; animation: none; }

  .stage2-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
  
  #btn-expand-preview.hidden { display: none; }

  footer { text-align: center; font-size: 0.72rem; color: var(--ink-dim); margin-top: 32px; }
  .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 10px; font-size: 0.78rem; }
  .footer-links a { color: var(--ink-dim); text-decoration: none; }
  .footer-links a:hover { color: var(--electric); }
  .footer-links .footer-fx { background: none; border: 0; padding: 0; margin: 0; width: auto; font: inherit; color: var(--ink-dim); cursor: pointer; text-decoration: underline dotted; }
  .footer-links .footer-fx:hover { color: var(--electric); }

  #btn-convene-board { margin-bottom: 14px; }
  .board-quota { font-size: 0.78rem; color: var(--ink-dim); margin: 0 0 12px; }
  .btn-switch:disabled { opacity: 0.5; cursor: default; }
  .board-status { font-size: 0.85rem; color: var(--ink-dim); margin: 4px 0 12px; }
  .board-status.hidden { display: none; }
  .board-report { margin: 4px 0 16px; }
  .board-report h2 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 18px 0 8px; }
  .board-report h3 { font-size: 0.9rem; font-weight: 700; color: var(--electric); margin: 16px 0 6px; }
  .board-report h4 { font-size: 0.85rem; font-weight: 700; color: var(--ink); margin: 14px 0 5px; }
  .board-report h5 { font-size: 0.8rem; font-weight: 600; color: var(--ink-dim); margin: 12px 0 4px; }
  .board-report p { font-size: 0.85rem; color: var(--ink); line-height: 1.5; margin: 0 0 8px; }
  .board-report ul { margin: 0 0 10px; padding-left: 18px; }
  .board-report li { font-size: 0.85rem; color: var(--ink); line-height: 1.45; margin-bottom: 4px; }
  .board-report strong { color: var(--ink); font-weight: 700; }
  .board-report hr { border: none; border-top: 1px solid var(--steel-line); margin: 12px 0; }
  .board-history-item {
    display: block; width: 100%; text-align: left; margin: 0 0 6px; padding: 8px 12px;
    background: var(--steel); border: 1px solid var(--steel-line); border-radius: 8px;
    color: var(--ink-dim); font-size: 0.82rem; cursor: pointer; box-shadow: none;
  }
  .board-history-item:hover { border-color: var(--electric); color: var(--electric); }

  .auth-gate-box { max-width: 460px; }
  .auth-gate-box .lede { margin-bottom: 18px; }
  .auth-gate-box form { text-align: left; }
  .auth-gate-toggle {
    display: block; margin: 14px auto 0; background: none; border: none; box-shadow: none;
    color: var(--ink-dim); font-size: 0.85rem; cursor: pointer; text-decoration: underline; padding: 6px;
  }
  .auth-gate-toggle:hover { color: var(--electric); }

  @media (max-width: 480px) {
    body { padding: 20px 16px 32px; }
    .stage h2 { font-size: 1.4rem; }
    .preview-frame-wrap { height: 320px; }
    .header-logo { width: 64px; height: 64px; }
  }