/* ============================================================
     STEALTHQL — Editorial luxury edition
     A landing page that whispers, then states.
     ============================================================ */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    /* Cinematic blacks, warmed slightly */
    --ink:        #08080A;
    --ink-soft:   #0E0E12;
    --ink-elev:   #15151A;
    --surface:    #1A1A20;
    --surface-2:  #20202A;

    /* Warm bone whites */
    --text:       #F4F2EC;
    --text-mute:  #A8A6A0;
    --text-soft:  #6F6E68;
    --text-faint: #424148;

    /* Hairline borders */
    --line:       rgba(244, 242, 236, 0.06);
    --line-bold:  rgba(244, 242, 236, 0.14);

    /* Signature: luminous jeweltone mint, used like white gold */
    --jewel:      #8DF2C5;
    --jewel-soft: #C4F8DF;
    --jewel-deep: #4FD8A2;
    --jewel-glow: rgba(141, 242, 197, 0.22);
    --jewel-dim:  rgba(141, 242, 197, 0.10);

    /* Warning red, used once */
    --crimson:    #F47272;
    --crimson-dim:rgba(244, 114, 114, 0.10);

    --max:        1240px;
    --measure:    640px;
  }

  /* ============================================================
     MCP / Agent Capsule subpage — blue jeweltone variant
     Wrap the page in <div className="theme-mcp"> to apply.
     Same structure as the home palette; the accent is the only shift.
     ============================================================ */
  .theme-mcp {
    --jewel:      #8DC5F2;
    --jewel-soft: #C4DFF8;
    --jewel-deep: #4FA2D8;
    --jewel-glow: rgba(141, 197, 242, 0.22);
    --jewel-dim:  rgba(141, 197, 242, 0.10);
  }

  /* /openclaw — warm amber palette, sibling integration page to /mcp. */
  .theme-openclaw {
    --jewel:      #F2A876;
    --jewel-soft: #F8C9A6;
    --jewel-deep: #D88B4F;
    --jewel-glow: rgba(242, 168, 118, 0.22);
    --jewel-dim:  rgba(242, 168, 118, 0.10);
  }

  /* Crusader — brand gold (logo kit primary). Same mechanic; accent only. */
  .theme-crusader {
    --jewel:      #EFA022;
    --jewel-soft: #F1BC3D;
    --jewel-deep: #D88A18;
    --jewel-glow: rgba(239, 160, 34, 0.22);
    --jewel-dim:  rgba(239, 160, 34, 0.10);
  }

  /* ============================================================
     EXTENSION MARKETPLACE  (/extensions)
     ============================================================ */

  .theme-crusader .hero-compact { padding-bottom: 60px; }
  .theme-crusader .market-hero { max-width: 880px; }
  .theme-crusader .market-hero h1 { font-size: clamp(40px, 5.5vw, 72px); line-height: 1.04; }
  .theme-crusader .hero-code {
    font-family: 'Geist Mono', monospace;
    font-size: 0.78em;
    font-weight: 500;
    color: var(--jewel);
    background: var(--ink-soft);
    border: 0.5px solid var(--jewel-glow);
    border-radius: 8px;
    padding: 4px 14px;
    vertical-align: 2px;
  }

  /* Stat row under the hero */
  .theme-crusader .market-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 48px;
    max-width: 880px;
  }
  .theme-crusader .market-stat {
    background: var(--ink);
    padding: 18px 20px;
    font-size: 13px;
    color: var(--text-mute);
  }
  .theme-crusader .market-stat span {
    display: block;
    font-family: 'Geist', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--jewel);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }

  /* Search + filter band */
  .theme-crusader .market-controls {
    background: var(--ink-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 32px 0;
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: rgba(14, 14, 18, 0.85);
  }
  .theme-crusader .market-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ink);
    border: 1px solid var(--line-bold);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    transition: border-color 0.15s ease;
  }
  .theme-crusader .market-search:focus-within { border-color: var(--jewel-dim); }
  .theme-crusader .market-search-icon {
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1;
  }
  .theme-crusader .market-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: 'Geist', sans-serif;
    font-size: 14.5px;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .theme-crusader .market-search input::placeholder { color: var(--text-soft); }
  .theme-crusader .market-search-shortcut {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
    background: var(--ink-soft);
    border: 0.5px solid var(--line);
    border-radius: 4px;
    padding: 2px 6px;
  }

  .theme-crusader .market-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .theme-crusader .market-chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-mute);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: 'Geist', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .theme-crusader .market-chip:hover { border-color: var(--line-bold); color: var(--text); }
  .theme-crusader .market-chip.active {
    background: var(--jewel-dim);
    border-color: var(--jewel-glow);
    color: var(--jewel);
  }
  .theme-crusader .market-chip .count {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
    background: var(--ink);
    padding: 1px 6px;
    border-radius: 999px;
  }
  .theme-crusader .market-chip.active .count {
    background: var(--ink-soft);
    color: var(--jewel-soft);
  }
  .theme-crusader .market-sort {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .theme-crusader .market-sort-opt {
    background: transparent;
    border: 0;
    color: var(--text-mute);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 4px;
  }
  .theme-crusader .market-sort-opt.active { color: var(--jewel); background: var(--jewel-dim); }

  /* Section heads inside marketplace */
  .theme-crusader .market-section { padding: 80px 0; }
  .theme-crusader .market-section-alt { background: var(--ink-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .theme-crusader .market-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
  .theme-crusader .market-section-head h2 {
    font-family: 'Geist', sans-serif;
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--text);
    margin: 0 0 14px;
  }
  .theme-crusader .market-section-head h2 em {
    font-family: 'Instrument Serif', 'Fraunces', serif;
    font-style: italic;
    color: var(--jewel);
  }
  .theme-crusader .market-section-head p {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text-mute);
    margin: 0;
  }
  .theme-crusader .market-section-head p code,
  .theme-crusader .market-section-head p strong { color: var(--text); }
  .theme-crusader .market-section-head p code {
    background: var(--ink);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--jewel);
    font-family: 'Geist Mono', monospace;
    font-size: 0.92em;
  }

  /* Featured row (3 large cards) */
  .theme-crusader .featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .theme-crusader .featured-card {
    background: linear-gradient(180deg, #16161B 0%, #101015 100%);
    border: 0.5px solid var(--line-bold);
    border-radius: 14px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.18s ease, transform 0.18s ease;
    position: relative;
  }
  .theme-crusader .featured-card:hover { border-color: var(--jewel-glow); transform: translateY(-2px); }
  .theme-crusader .featured-head {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 14px;
    align-items: center;
  }
  .theme-crusader .featured-card h3 {
    font-family: 'Geist', sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0;
  }
  .theme-crusader .featured-author {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
    margin: 4px 0 0;
  }
  .theme-crusader .featured-author strong { color: var(--jewel-soft); font-weight: 500; }
  .theme-crusader .featured-badge {
    font-family: 'Geist Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--jewel);
    background: var(--jewel-dim);
    border: 0.5px solid var(--jewel-glow);
    padding: 3px 8px;
    border-radius: 4px;
    align-self: start;
  }
  .theme-crusader .featured-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-mute);
    margin: 0;
    flex: 1;
  }
  .theme-crusader .featured-desc code {
    background: var(--ink);
    color: var(--jewel-soft);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
  }
  .theme-crusader .featured-desc em { color: var(--text); font-style: italic; }

  /* Grid of regular plugin cards */
  .theme-crusader .plugin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .theme-crusader .plugin-card {
    background: var(--ink);
    border: 0.5px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .theme-crusader .plugin-card:hover { border-color: var(--jewel-glow); background: var(--ink-elev); }
  .theme-crusader .plugin-head {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
  }
  .theme-crusader .plugin-card h4 {
    font-family: 'Geist', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 2px;
  }
  .theme-crusader .plugin-author {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    color: var(--text-soft);
    margin: 0;
  }
  .theme-crusader .plugin-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-mute);
    margin: 0;
    flex: 1;
  }

  /* Plugin icon (small colored letter block) */
  .theme-crusader .plugin-icon {
    width: 40px; height: 40px;
    border-radius: 9px;
    display: grid; place-items: center;
    font-family: 'Geist Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text);
  }
  .theme-crusader .featured-card .plugin-icon {
    width: 48px; height: 48px;
    font-size: 14px;
  }
  .theme-crusader .icon-jewel  { background: var(--jewel-dim); color: var(--jewel); border: 0.5px solid var(--jewel-glow); }
  .theme-crusader .icon-danger { background: rgba(244, 114, 114, 0.10); color: var(--crimson); border: 0.5px solid rgba(244, 114, 114, 0.30); }
  .theme-crusader .icon-success{ background: rgba(141, 242, 197, 0.10); color: var(--jewel-soft); border: 0.5px solid rgba(141, 242, 197, 0.25); }
  .theme-crusader .icon-info   { background: rgba(141, 197, 242, 0.10); color: #8DC5F2; border: 0.5px solid rgba(141, 197, 242, 0.28); }
  .theme-crusader .icon-warn   { background: rgba(232, 163, 61, 0.10); color: #E8A33D; border: 0.5px solid rgba(232, 163, 61, 0.28); }

  /* Tag pills */
  .theme-crusader .plugin-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .theme-crusader .plugin-tag {
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    background: var(--ink-soft);
    border: 0.5px solid var(--line);
    padding: 2px 8px;
    border-radius: 4px;
  }
  .theme-crusader .featured-card .plugin-tag {
    background: var(--ink);
    color: var(--jewel-soft);
  }

  /* Stats + install line at bottom of every card */
  .theme-crusader .plugin-foot {
    border-top: 0.5px solid var(--line);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .theme-crusader .plugin-stats {
    display: flex;
    gap: 16px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
  }
  .theme-crusader .stat-installs { color: var(--text-mute); }
  .theme-crusader .stat-rating { color: var(--jewel-soft); }
  .theme-crusader .plugin-install {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ink-soft);
    border: 0.5px solid var(--line);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Geist Mono', monospace;
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  .theme-crusader .plugin-install:hover { border-color: var(--jewel-glow); }
  .theme-crusader .install-prompt { color: var(--jewel); user-select: none; }
  .theme-crusader .install-cmd { color: var(--text); }

  .theme-crusader .market-loadmore {
    text-align: center;
    margin-top: 56px;
  }

  /* Publish CTA (cinema-style two-pane) */
  .theme-crusader .publish-cinema {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .theme-crusader .publish-pane {
    background: var(--ink);
    border: 0.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
  }
  .theme-crusader .publish-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 0.5px solid var(--line);
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
  }
  .theme-crusader .publish-head .badge {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--ink-soft);
    border: 0.5px solid var(--line);
  }
  .theme-crusader .publish-head .badge.def { color: var(--jewel); background: var(--jewel-dim); border-color: var(--jewel-glow); }
  .theme-crusader .publish-head .badge.use { color: var(--text); }
  .theme-crusader .publish-code {
    margin: 0;
    padding: 22px;
    font-family: 'Geist Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-mute);
    overflow-x: auto;
  }
  .theme-crusader .publish-code .c { color: var(--text-soft); }
  .theme-crusader .publish-code .k { color: var(--text); font-weight: 500; }
  .theme-crusader .publish-code .s { color: #E2D6A8; }
  .theme-crusader .publish-code .v { color: var(--jewel); }
  .theme-crusader .publish-features {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .theme-crusader .pub-feat {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 8px;
    transition: background 0.15s ease;
  }
  .theme-crusader .pub-feat:hover { background: var(--ink-soft); }
  .theme-crusader .pub-icon {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--jewel-dim);
    border: 0.5px solid var(--jewel-glow);
    color: var(--jewel);
    display: grid; place-items: center;
    font-size: 13px;
    font-family: 'Geist Mono', monospace;
    margin-top: 2px;
  }
  .theme-crusader .pub-feat h5 {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .theme-crusader .pub-feat p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-mute);
  }
  .theme-crusader .publish-note {
    max-width: 760px;
    margin: 56px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-mute);
  }
  .theme-crusader .publish-note em { color: var(--text); }
  .theme-crusader .publish-note strong { color: var(--jewel); font-weight: 500; }

  /* Responsive */
  @media (max-width: 1000px) {
    .theme-crusader .featured-grid { grid-template-columns: 1fr; }
    .theme-crusader .plugin-grid { grid-template-columns: repeat(2, 1fr); }
    .theme-crusader .publish-cinema { grid-template-columns: 1fr; }
    .theme-crusader .market-stats { grid-template-columns: repeat(2, 1fr); }
    .theme-crusader .market-sort { margin-left: 0; }
  }
  @media (max-width: 640px) {
    .theme-crusader .plugin-grid { grid-template-columns: 1fr; }
  }

  /* Crusader: affiliate earnings calculator widget (replaces capsule on /affiliate). */
  .theme-crusader .aff-calc {
    background: linear-gradient(180deg, #16161B 0%, #101015 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 28px;
    box-shadow:
        0 50px 120px -30px rgba(0, 0, 0, 0.9),
        0 0 0 0.5px rgba(255, 255, 255, 0.03);
  }
  .theme-crusader .aff-calc-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 0.5px solid var(--line);
  }
  .theme-crusader .aff-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2fr auto;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
  }
  .theme-crusader .aff-row-note { opacity: 0.7; }
  .theme-crusader .aff-label {
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    color: var(--text-mute);
  }
  .theme-crusader .aff-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .theme-crusader .aff-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--jewel-deep), var(--jewel));
    border-radius: 999px;
    box-shadow: 0 0 12px var(--jewel-glow);
  }
  .theme-crusader .aff-amt {
    font-family: 'Geist Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--jewel);
    letter-spacing: -0.01em;
  }
  .theme-crusader .aff-calc-foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 0.5px solid var(--line);
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    color: var(--text-soft);
    text-align: center;
    letter-spacing: 0.04em;
  }

  /* Crusader: FAQ row (/affiliate /04). */
  .theme-crusader .faq {
    max-width: 880px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
  }
  .theme-crusader .faq-row {
    display: block; /* override the unused .faq-row grid (line ~2700) so h4 + p stack full-width */
    border-bottom: 1px solid var(--line);
    padding: 24px 0;
  }
  .theme-crusader .faq-row h4 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .theme-crusader .faq-row p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-mute);
  }
  .theme-crusader .faq-row p code {
    background: var(--ink);
    color: var(--jewel);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
  }
  .theme-crusader .faq-row p em {
    color: var(--text);
    font-style: italic;
  }

  /* Crusader: dense tools-in-the-box grid (/03). */
  .theme-crusader .tool-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink-soft);
  }
  .theme-crusader .tool {
    padding: 22px 22px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background 0.18s ease;
  }
  .theme-crusader .tool:hover { background: var(--ink-elev); }
  .theme-crusader .tool:nth-child(4n) { border-right: 0; }
  .theme-crusader .tool:nth-last-child(-n+4) { border-bottom: 0; }
  .theme-crusader .tool-num {
    display: block;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    margin-bottom: 10px;
  }
  .theme-crusader .tool h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.005em;
  }
  .theme-crusader .tool p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-mute);
  }
  .theme-crusader .tool p code {
    background: var(--ink);
    color: var(--jewel);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.92em;
  }
  @media (max-width: 1080px) {
    .theme-crusader .tool-grid { grid-template-columns: repeat(2, 1fr); }
    .theme-crusader .tool:nth-child(4n) { border-right: 1px solid var(--line); }
    .theme-crusader .tool:nth-child(2n) { border-right: 0; }
    .theme-crusader .tool:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
    .theme-crusader .tool:nth-last-child(-n+2) { border-bottom: 0; }
  }
  @media (max-width: 640px) {
    .theme-crusader .tool-grid { grid-template-columns: 1fr; }
    .theme-crusader .tool { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
    .theme-crusader .tool:last-child { border-bottom: 0 !important; }
  }

  /* Crusader: moat-row (/04). Left meta col + right share-cinema-style pane.
     Stacks on narrow screens. */
  .theme-crusader .moat-row {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--line);
  }
  .theme-crusader .moat-row:first-of-type { border-top: 0; padding-top: 16px; }
  .theme-crusader .moat-meta { position: sticky; top: 100px; }
  .theme-crusader .moat-num {
    display: inline-block;
    font-family: 'Instrument Serif', 'Fraunces', serif;
    font-style: italic;
    font-size: 64px;
    line-height: 0.9;
    color: var(--jewel);
    margin-bottom: 12px;
    letter-spacing: -0.04em;
  }
  .theme-crusader .moat-name {
    font-size: 19px;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 12px;
    letter-spacing: -0.015em;
  }
  .theme-crusader .moat-name code {
    background: var(--ink-soft);
    color: var(--jewel);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
  }
  .theme-crusader .moat-blurb {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-mute);
  }
  .theme-crusader .moat-blurb code {
    background: var(--ink-soft);
    color: var(--jewel);
    padding: 1px 5px;
    border-radius: 3px;
  }
  .theme-crusader .share-cinema.single {
    display: block;
  }
  .theme-crusader .share-cinema.single .share-pane { max-width: none; }
  @media (max-width: 900px) {
    .theme-crusader .moat-row { grid-template-columns: 1fr; gap: 24px; }
    .theme-crusader .moat-meta { position: static; }
    .theme-crusader .moat-num { font-size: 48px; }
  }

  /* Crusader hero bullet list. Editorial, not bullet-point-y. */
  .theme-crusader .hero-bullets {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    max-width: 600px;
  }
  .theme-crusader .hero-bullets li {
    position: relative;
    padding: 10px 0 10px 26px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--text-mute);
    border-bottom: 1px solid var(--line);
  }
  .theme-crusader .hero-bullets li:last-child { border-bottom: 0; }
  .theme-crusader .hero-bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 17px;
    width: 14px; height: 1px;
    background: var(--jewel);
  }
  .theme-crusader .hero-bullets li strong {
    color: var(--text);
    font-weight: 500;
    margin-right: 4px;
  }

  html {
    scroll-behavior: smooth;
    background: var(--ink);
  }

  body {
    background: var(--ink);
    color: var(--text);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
  }

  /* Subtle grain over everything — the magazine paper feel */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
  }

  code, pre, .mono {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, ui-monospace, SFMono-Regular, Menlo, monospace;
    font-feature-settings: 'ss01', 'ss02';
  }

  .serif {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .italic { font-style: italic; }

  a { color: inherit; text-decoration: none; }

  ::selection {
    background: var(--jewel);
    color: var(--ink);
  }

  .wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 40px;
  }

  /* ============================================================
     NAV — quiet, almost invisible
     ============================================================ */
  .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    background: rgba(8, 8, 10, 0.55);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 18px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Brand wordmark — full STEALTHQL on transparent background.
     The .mark element acts as a fixed-size box with the wordmark as a
     background image. The inline children ("Stealth", em "QL", and the
     <span class="glyph"/>) are kept in the DOM for screen-reader fallback
     and SEO, but visually hidden so only the artwork shows.

     Override the height per surface (.dash-aside .mark, .st-mark) to fit
     each context's chrome. The 3:1 aspect ratio is maintained automatically. */
  .mark {
    display: inline-block;
    height: 44px;
    aspect-ratio: 3 / 1;
    background: url('/assets/full-logo.svg') left center / contain no-repeat;
    font-size: 0;
    line-height: 0;
    color: transparent;
    flex-shrink: 0;
    text-decoration: none;
  }
  .mark .glyph,
  .mark em {
    display: none;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 36px;
  }
  .nav-right a {
    color: var(--text-mute);
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s;
  }
  .nav-right a:hover { color: var(--text); }

  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--text);
    color: var(--ink);
    border-color: var(--text);
  }
  .btn-primary:hover {
    background: var(--jewel);
    border-color: var(--jewel);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 14px 40px var(--jewel-glow);
  }
  .btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line-bold);
  }
  .btn-ghost:hover {
    border-color: var(--text);
    background: rgba(244, 242, 236, 0.04);
  }
  .btn-large {
    padding: 16px 28px;
    font-size: 15px;
  }
  .btn .arrow {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ============================================================
     HERO — the moment
     ============================================================ */
  .hero {
    position: relative;
    min-height: 100vh;
    padding: 200px 40px 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  /* Atmospheric gradient — like a planet's terminator */
  .hero::before {
    content: '';
    position: absolute;
    top: -480px;
    left: 50%;
    transform: translateX(-50%);
    width: 1600px;
    height: 1400px;
    background:
      radial-gradient(ellipse 50% 40% at 50% 50%, rgba(141, 242, 197, 0.10), transparent 60%),
      radial-gradient(ellipse 70% 60% at 50% 70%, rgba(141, 242, 197, 0.04), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
  }

  /* Architectural grid, mostly invisible */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(244, 242, 236, 0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(244, 242, 236, 0.02) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: 50% 50%;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 80%);
    pointer-events: none;
    z-index: 0;
  }

  .hero-grid {
    position: relative;
    z-index: 2;
    max-width: var(--max);
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    color: var(--jewel);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .hero-eyebrow .line {
    width: 28px;
    height: 1px;
    background: var(--jewel);
    opacity: 0.7;
  }

  .hero h1 {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-weight: 400;
    font-size: clamp(46px, 5.4vw, 84px);
    line-height: 0.98;
    letter-spacing: -0.015em;
    color: var(--text);
    margin-bottom: 32px;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--jewel);
  }
  .hero h1 .nowrap { white-space: nowrap; }

  .hero .lede {
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-mute);
    max-width: 480px;
    margin-bottom: 48px;
    font-weight: 400;
  }
  .hero .lede strong {
    color: var(--text);
    font-weight: 500;
  }

  .hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 56px;
  }

  .hero-meta {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    color: var(--text-soft);
    letter-spacing: 0.04em;
  }
  .hero-meta div span {
    display: block;
    color: var(--text);
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 24px;
    margin-bottom: 4px;
    letter-spacing: 0;
  }

  /* ============================================================
     CAPSULE — the centerpiece
     A layered glass object representing what a backend "is" now
     ============================================================ */
  .capsule-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.15;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
  }

  .capsule {
    position: relative;
    width: 78%;
    aspect-ratio: 0.72;
    transform-style: preserve-3d;
    animation: drift 22s ease-in-out infinite;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
  }
  @keyframes drift {
    0%, 100% { transform: rotateY(-12deg) rotateX(8deg) translateY(0); }
    50%      { transform: rotateY(12deg) rotateX(-3deg) translateY(-14px); }
  }
  .capsule:has(.layer:hover) {
    animation-play-state: paused;
    transform: rotateY(0) rotateX(0) translateY(0);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* The capsule's inner light source */
  .capsule::before {
    content: '';
    position: absolute;
    inset: -25%;
    background:
      radial-gradient(ellipse 40% 50% at 50% 50%, var(--jewel-glow), transparent 60%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
  }

  .layer {
    position: relative;
    flex: 1 1 0;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,
      rgba(244, 242, 236, 0.05) 0%,
      rgba(244, 242, 236, 0.015) 100%);
    border: 1px solid rgba(244, 242, 236, 0.08);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
      inset 0 1px 0 rgba(244, 242, 236, 0.10),
      inset 0 -1px 0 rgba(0, 0, 0, 0.4),
      0 6px 20px rgba(0, 0, 0, 0.30);
    cursor: pointer;
    overflow: hidden;
    transition:
      flex-grow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.35s ease,
      border-color 0.35s ease,
      background 0.35s ease,
      filter 0.35s ease;
  }
  .layer-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    gap: 14px;
  }
  .layer .lbl {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex: 1;
    transition: color 0.3s ease;
  }
  .layer .marker {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jewel);
    box-shadow: 0 0 8px var(--jewel-glow);
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .layer .name {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 20px;
    color: var(--text);
    letter-spacing: -0.01em;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
  }

  /* Glyph slot — animated icon, hidden until layer is hovered */
  .layer .glyph {
    width: 44px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease 0.1s;
  }
  .layer:hover .glyph { opacity: 1; }
  .layer:hover .marker { opacity: 0; transform: scale(0.5); }

  /* Explain panel inside each layer — visible on hover */
  .layer .explain {
    flex: 1;
    padding: 4px 22px 18px;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.35s ease 0.15s,
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
  }
  .explain .does {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 12px;
    font-weight: 400;
  }
  .explain .does strong { color: var(--jewel); font-weight: 500; }
  .explain .moat-label {
    display: block;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jewel);
    margin-bottom: 6px;
    opacity: 0.85;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .explain .moat {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-mute);
    letter-spacing: 0.01em;
  }

  /* :has() hover — hovered layer grows, others squeeze */
  .capsule:has(.layer:hover) .layer {
    flex: 0.4 1 0;
    opacity: 0.4;
    filter: saturate(0.7);
  }
  .capsule:has(.layer:hover) .layer:hover {
    flex: 6 1 0;
    opacity: 1;
    filter: none;
    border-color: var(--jewel-dim);
    background: linear-gradient(180deg,
      rgba(141, 242, 197, 0.10) 0%,
      rgba(141, 242, 197, 0.02) 100%);
  }
  .capsule:has(.layer:hover) .layer:hover .lbl { color: var(--jewel); }
  .capsule:has(.layer:hover) .layer:hover .explain {
    opacity: 1;
    transform: translateY(0);
  }

  /* ============================================================
     LAYER GLYPHS — six animated icons
     ============================================================ */

  /* Schema — 3×2 grid fills in */
  .glyph-schema {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
    width: 38px; height: 22px;
  }
  .glyph-schema span {
    background: var(--jewel);
    border-radius: 1px;
    opacity: 0;
    transform: scale(0.4);
  }
  .layer:hover .glyph-schema span { animation: schema-fill 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .layer:hover .glyph-schema span:nth-child(1) { animation-delay: 0.00s; }
  .layer:hover .glyph-schema span:nth-child(2) { animation-delay: 0.06s; }
  .layer:hover .glyph-schema span:nth-child(3) { animation-delay: 0.12s; }
  .layer:hover .glyph-schema span:nth-child(4) { animation-delay: 0.20s; }
  .layer:hover .glyph-schema span:nth-child(5) { animation-delay: 0.26s; }
  .layer:hover .glyph-schema span:nth-child(6) { animation-delay: 0.32s; }
  @keyframes schema-fill {
    0%   { opacity: 0; transform: scale(0.4); }
    60%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0.85; transform: scale(1); }
  }

  /* Auth — two dots pop in, line draws between */
  .glyph-auth { position: relative; width: 44px; height: 14px; }
  .glyph-auth .actor {
    position: absolute; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--jewel);
    transform: translateY(-50%) scale(0);
    box-shadow: 0 0 10px var(--jewel-glow);
  }
  .glyph-auth .actor.a { left: 0; }
  .glyph-auth .actor.b { right: 0; }
  .glyph-auth .link {
    position: absolute; top: 50%;
    left: 8px; height: 1px; width: 28px;
    background: var(--jewel);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    opacity: 0.6;
  }
  .layer:hover .glyph-auth .actor.a { animation: glyph-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .layer:hover .glyph-auth .actor.b { animation: glyph-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s forwards; }
  .layer:hover .glyph-auth .link    { animation: draw-line 0.5s ease-out 0.34s forwards; }
  @keyframes glyph-pop {
    0%   { transform: translateY(-50%) scale(0); }
    70%  { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
  }
  @keyframes draw-line {
    0%   { transform: translateY(-50%) scaleX(0); opacity: 0.6; }
    100% { transform: translateY(-50%) scaleX(1); opacity: 0.6; }
  }

  /* Policies — check draws, then X */
  .glyph-policies {
    position: relative; width: 44px; height: 22px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .glyph-policies svg {
    width: 18px; height: 18px;
    stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
    fill: none;
    opacity: 0;
  }
  .glyph-policies .ok   { stroke: var(--jewel); }
  .glyph-policies .deny { stroke: var(--crimson); }
  .glyph-policies .ok path,
  .glyph-policies .deny path,
  .glyph-policies .deny line {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
  }
  .layer:hover .glyph-policies .ok   { animation: glyph-fade-in 0.3s ease-out forwards; }
  .layer:hover .glyph-policies .deny { animation: glyph-fade-in 0.3s ease-out 0.45s forwards; }
  .layer:hover .glyph-policies .ok path,
  .layer:hover .glyph-policies .deny path,
  .layer:hover .glyph-policies .deny line {
    animation: draw-stroke 0.5s ease-out forwards;
  }
  .layer:hover .glyph-policies .ok path   { animation-delay: 0.05s; }
  .layer:hover .glyph-policies .deny path { animation-delay: 0.50s; }
  .layer:hover .glyph-policies .deny line { animation-delay: 0.85s; }
  @keyframes glyph-fade-in { to { opacity: 1; } }
  @keyframes draw-stroke   { to { stroke-dashoffset: 0; } }

  /* Functions — three dots travel left to right */
  .glyph-functions { display: flex; align-items: center; gap: 6px; width: 44px; }
  .glyph-functions span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jewel);
    opacity: 0;
    transform: translateX(-12px);
  }
  .layer:hover .glyph-functions span { animation: travel 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
  .layer:hover .glyph-functions span:nth-child(1) { animation-delay: 0.00s; }
  .layer:hover .glyph-functions span:nth-child(2) { animation-delay: 0.18s; }
  .layer:hover .glyph-functions span:nth-child(3) { animation-delay: 0.36s; }
  @keyframes travel {
    0%   { opacity: 0; transform: translateX(-10px); }
    30%  { opacity: 1; transform: translateX(0); }
    70%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(10px); }
  }

  /* Storage — three file rectangles stack in */
  .glyph-storage { width: 44px; height: 26px; position: relative; flex-shrink: 0; }
  .glyph-storage span {
    position: absolute;
    width: 14px; height: 18px;
    background: rgba(141, 242, 197, 0.12);
    border: 1px solid var(--jewel);
    border-radius: 2px;
    clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
    opacity: 0;
  }
  .glyph-storage span:nth-child(1) { right: 0;    top: 0; }
  .glyph-storage span:nth-child(2) { right: 8px;  top: 4px; }
  .glyph-storage span:nth-child(3) { right: 16px; top: 8px; }
  .layer:hover .glyph-storage span { animation: file-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .layer:hover .glyph-storage span:nth-child(1) { animation-delay: 0.28s; }
  .layer:hover .glyph-storage span:nth-child(2) { animation-delay: 0.14s; }
  .layer:hover .glyph-storage span:nth-child(3) { animation-delay: 0.00s; }
  @keyframes file-in {
    0%   { opacity: 0; transform: translate(8px, -4px); }
    100% { opacity: 0.95; transform: translate(0, 0); }
  }

  /* Shares — two interlocking rings + TTL tag */
  .glyph-shares {
    width: 56px; height: 22px;
    display: flex; align-items: center; justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
  }
  .glyph-shares .chain { position: relative; width: 30px; height: 16px; flex-shrink: 0; }
  .glyph-shares .ring {
    position: absolute; top: 0;
    width: 16px; height: 16px;
    border: 1.5px solid var(--jewel);
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    transform: scale(0.6);
  }
  .glyph-shares .ring-1 { left: 0; }
  .glyph-shares .ring-2 { left: 12px; }
  .layer:hover .glyph-shares .ring { animation: ring-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  .layer:hover .glyph-shares .ring-1 { animation-delay: 0.05s; }
  .layer:hover .glyph-shares .ring-2 { animation-delay: 0.25s; }
  @keyframes ring-in {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
  }
  .glyph-shares .ttl {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 10px;
    color: var(--jewel);
    letter-spacing: 0.06em;
    opacity: 0;
  }
  .layer:hover .glyph-shares .ttl { animation: glyph-fade-in 0.4s ease-out 0.6s forwards; }

  /* Responsive capsule layers */
  @media (max-width: 720px) {
    .layer .name { font-size: 17px; }
    .layer-row { padding: 0 14px; gap: 10px; }
    .layer .explain { padding: 0 16px 14px; }
    .explain .does { font-size: 13px; }
    .explain .moat { font-size: 10.5px; }
  }

  /* Caption beneath the capsule */
  .capsule-caption {
    position: absolute;
    bottom: -8px;
    left: 0; right: 0;
    text-align: center;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--text-soft);
    text-transform: uppercase;
  }
  .capsule-caption .dot {
    display: inline-block;
    margin: 0 12px;
    color: var(--text-faint);
  }

  /* ============================================================
     COMMON SECTION STRUCTURE
     ============================================================ */
  section {
    padding: 160px 40px;
    position: relative;
  }
  section.tight { padding: 120px 40px; }
  section.snug  { padding: 100px 40px; }

  /* The marketing 160px rule above is for bare landing-page sections only.
     Anything inside the dashboard or studio shell governs its own padding via
     its own component class (.dash-section, .evidence-intro, .sql-console-*,
     .st-section, etc.). The :where() makes this reset specificity 0,0,1 so
     any class-targeted padding rule (e.g. `.evidence-intro { padding: ... }`)
     wins automatically — no need to bump every component rule's specificity. */
  :where(.dash-shell, .st-shell) section {
    padding: 0;
  }

  .eyebrow {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jewel);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
  }
  .eyebrow .num {
    color: var(--text-soft);
    font-size: 10px;
  }

  .display {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--text);
  }
  .display em { font-style: italic; color: var(--jewel); }
  .display.smaller { font-size: clamp(30px, 3.8vw, 54px); }

  .lede-text {
    font-size: 19px;
    line-height: 1.55;
    color: var(--text-mute);
    max-width: var(--measure);
    margin-top: 32px;
  }
  .lede-text strong {
    color: var(--text);
    font-weight: 500;
  }

  /* Section header layout */
  .section-head {
    max-width: 920px;
    margin-bottom: 80px;
  }
  .section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .section-head.center .lede-text {
    margin-left: auto;
    margin-right: auto;
  }

  /* ============================================================
     MANIFESTO — the big text moment
     ============================================================ */
  .manifesto {
    padding: 200px 40px 220px;
    position: relative;
  }
  .manifesto::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1100px; height: 800px;
    background: radial-gradient(ellipse, var(--jewel-dim), transparent 65%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
  }
  .manifesto .wrap { position: relative; z-index: 1; }
  .manifesto-text {
    max-width: 980px;
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: clamp(30px, 3.9vw, 60px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--text);
  }
  .manifesto-text .quiet { color: var(--text-faint); }
  .manifesto-text em { font-style: italic; color: var(--jewel); }
  .manifesto-text .pause {
    display: inline-block;
    width: 1px; height: 1em;
    background: var(--text-faint);
    margin: 0 0.6em -0.18em;
    transform: rotate(20deg);
    opacity: 0.6;
  }

  .manifesto-attr {
    margin-top: 64px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--text-soft);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .manifesto-attr::before {
    content: '';
    width: 36px; height: 1px;
    background: var(--jewel);
  }

  /* ============================================================
     THREE STEPS — magazine grid
     ============================================================ */
  .three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
  }
  .three .step {
    padding-top: 28px;
    border-top: 1px solid var(--line);
    transition: border-color 0.4s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .three .step:hover {
    border-top-color: var(--jewel);
    transform: translateY(-2px);
  }
  .three .num {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 64px;
    line-height: 1;
    color: var(--jewel);
    margin-bottom: 28px;
    display: inline-block;
  }
  .three h3 {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--text);
  }
  .three p {
    color: var(--text-mute);
    font-size: 16px;
    line-height: 1.6;
  }
  .three .step-cmd {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 7px 14px;
    background: rgba(141, 242, 197, 0.06);
    border: 1px solid var(--jewel-dim);
    border-radius: 6px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    color: var(--jewel);
  }
  .three .step-cmd::before {
    content: '$';
    color: var(--jewel-deep);
    opacity: 0.7;
  }

  /* Framework strip — restrained "works with" line beneath the three steps */
  .framework-strip {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 44px;
  }
  .framework-strip-label {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-right: 6px;
    align-self: center;
  }
  .framework-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.7;
    transition: opacity 0.3s;
  }
  .framework-mark:hover {
    opacity: 1;
  }
  .framework-mark img {
    height: 22px;
    width: auto;
    display: block;
  }
  .framework-mark span {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-soft);
  }

  /* ============================================================
     THE TIMELINE — premium typographic counter
     ============================================================ */
  .timeline {
    margin-top: 80px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .timeline-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 40px;
    align-items: baseline;
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
    transition: background 0.3s, padding 0.3s;
  }
  .timeline-row:last-child { border-bottom: none; }
  .timeline-row:hover {
    background: rgba(244, 242, 236, 0.015);
  }
  .timeline-time {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 36px;
    color: var(--jewel);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .timeline-row.live .timeline-time { color: var(--jewel); }
  .timeline-row.live::before {
    content: '';
    position: absolute;
  }
  .timeline-content h4 {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 8px;
  }
  .timeline-content p {
    color: var(--text-mute);
    font-size: 15px;
    line-height: 1.55;
    max-width: 540px;
  }
  .timeline-cmd {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    color: var(--text-soft);
    text-align: right;
    padding: 6px 12px;
    background: rgba(244, 242, 236, 0.02);
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .timeline-row.live .timeline-cmd {
    color: var(--jewel);
    background: rgba(141, 242, 197, 0.06);
    border-color: var(--jewel-dim);
  }

  /* ============================================================
     CAPSULE LEGEND — explanation panel
     ============================================================ */
  .legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 40px;
  }
  .legend-list {
    display: flex;
    flex-direction: column;
  }
  .legend-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 20px;
    align-items: baseline;
    transition: padding-left 0.3s;
  }
  .legend-item:last-child { border-bottom: none; }
  .legend-item:hover {
    padding-left: 8px;
  }
  .legend-num {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    color: var(--text-soft);
    letter-spacing: 0.1em;
  }
  .legend-name {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 26px;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .legend-name + p {
    grid-column: 2 / 4;
    color: var(--text-mute);
    font-size: 14px;
    line-height: 1.55;
    margin-top: 4px;
  }
  .legend-side {
    color: var(--text-soft);
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ============================================================
     THE AI MOMENT — single hero demo
     ============================================================ */
  .ai-stage {
    margin-top: 80px;
    background: linear-gradient(180deg, var(--ink-soft), var(--ink));
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
      0 60px 140px rgba(0, 0, 0, 0.6),
      0 0 0 1px var(--line),
      0 0 120px rgba(141, 242, 197, 0.04);
  }
  .ai-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    border-bottom: 1px solid var(--line);
    background: rgba(244, 242, 236, 0.015);
  }
  .ai-titlebar .lights {
    display: flex; gap: 7px;
  }
  .ai-titlebar .lights span {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--text-faint);
    opacity: 0.5;
  }
  .ai-titlebar .lights span:nth-child(2) { background: var(--text-faint); }
  .ai-titlebar .lights span:nth-child(3) { background: var(--text-faint); }
  .ai-titlebar .agent {
    margin-left: auto;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    color: var(--text-soft);
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ai-titlebar .agent .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jewel);
    box-shadow: 0 0 10px var(--jewel-glow);
  }

  .ai-conversation {
    padding: 0;
  }
  .ai-turn {
    padding: 32px 36px;
    border-bottom: 1px solid var(--line);
  }
  .ai-turn:last-child { border-bottom: none; }
  .ai-role {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ai-turn.assistant .ai-role { color: var(--jewel); }
  .ai-role .you {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--text-faint);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0;
  }
  .ai-turn.assistant .ai-role .you {
    background: var(--jewel);
    color: var(--ink);
  }
  .ai-content {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: 26px;
    line-height: 1.35;
    color: var(--text);
    letter-spacing: -0.01em;
    max-width: 720px;
  }
  .ai-content em { font-style: italic; }

  .ai-trace {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
  }
  .ai-step {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 14px;
    padding: 9px 0;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    color: var(--text-mute);
    line-height: 1.5;
  }
  .ai-step .check {
    color: var(--jewel);
    font-weight: 500;
    transform: translateY(2px);
  }
  .ai-step code {
    color: var(--jewel);
    background: rgba(141, 242, 197, 0.06);
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid var(--jewel-dim);
  }
  .ai-step.divider {
    height: 1px;
    background: var(--line);
    margin: 12px 0;
    padding: 0;
  }
  .ai-final {
    margin-top: 18px;
    padding: 16px 18px;
    background: rgba(141, 242, 197, 0.04);
    border: 1px solid var(--jewel-dim);
    border-radius: 10px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    color: var(--jewel);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ai-final::before {
    content: '✓';
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--jewel);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
  }

  /* ============================================================
     FEATURES GRID — refined cards
     ============================================================ */
  .features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 80px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
  }
  .feature {
    padding: 56px 48px;
    background: var(--ink);
    transition: background 0.4s;
    position: relative;
  }
  .feature:hover {
    background: var(--ink-soft);
  }
  .feature-num {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 20px;
    color: var(--jewel);
    margin-bottom: 24px;
    display: block;
  }
  .feature h3 {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 18px;
  }
  .feature h3 em { font-style: italic; color: var(--jewel); }
  .feature p {
    color: var(--text-mute);
    font-size: 16px;
    line-height: 1.6;
    max-width: 480px;
  }
  .feature p strong {
    color: var(--text);
    font-weight: 500;
  }

  /* ============================================================
     SHARING — the signature feature
     ============================================================ */
  .share-cinema {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
  }
  .share-pane {
    background: var(--ink-soft);
    padding: 0;
    min-width: 0; /* grid item must be allowed to shrink so .share-code's overflow-x scrolls
                     instead of the pane expanding to the code's intrinsic width and being
                     clipped by the cinema's overflow:hidden (mobile cut-off fix). */
  }
  .share-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    color: var(--text-soft);
    letter-spacing: 0.06em;
  }
  .share-head .badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .share-head .badge.def {
    background: rgba(141, 242, 197, 0.10);
    color: var(--jewel);
    border: 1px solid var(--jewel-dim);
  }
  .share-head .badge.use {
    background: rgba(244, 242, 236, 0.04);
    color: var(--text-mute);
    border: 1px solid var(--line-bold);
  }
  .share-code {
    padding: 28px 26px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13.5px;
    line-height: 1.85;
    white-space: pre;
    overflow-x: auto;
    color: var(--text);
  }
  .share-code .k  { color: var(--jewel); }
  .share-code .s  { color: #E2D6A8; }
  .share-code .n  { color: #C4B5FD; }
  .share-code .c  { color: var(--text-soft); font-style: italic; }
  .share-code .p  { color: var(--text-mute); }

  /* ============================================================
     DIFF VIEWER — refined
     ============================================================ */
  .diff {
    margin-top: 80px;
    background: var(--ink-soft);
    border: 1px solid var(--line-bold);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5);
  }
  .diff-head {
    padding: 18px 26px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 16px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
  }
  .diff-head .label {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 18px;
    color: var(--text);
    letter-spacing: -0.01em;
  }
  .diff-head .meta {
    color: var(--text-soft);
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-left: auto;
  }
  .diff-row {
    padding: 18px 26px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 220px 1fr 180px;
    gap: 24px;
    align-items: center;
    transition: background 0.2s;
  }
  .diff-row:last-of-type { border-bottom: none; }
  .diff-row.bad { background: rgba(244, 114, 114, 0.025); }
  .diff-row:hover:not(.bad) { background: rgba(141, 242, 197, 0.02); }
  .diff-field {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    color: var(--text-mute);
  }
  .diff-change {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
  }
  .diff-old {
    color: var(--text-soft);
    text-decoration: line-through;
    text-decoration-color: rgba(244, 114, 114, 0.55);
  }
  .diff-arrow {
    color: var(--text-soft);
  }
  .diff-new { color: var(--text); font-weight: 500; }
  .diff-row.ok .diff-new { color: var(--jewel); }
  .diff-row.bad .diff-new { color: var(--crimson); text-decoration: line-through; opacity: 0.65; }
  .diff-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    justify-self: end;
  }
  .diff-status.ok {
    background: rgba(141, 242, 197, 0.10);
    color: var(--jewel);
    border: 1px solid var(--jewel-dim);
  }
  .diff-status.no {
    background: rgba(244, 114, 114, 0.10);
    color: var(--crimson);
    border: 1px solid rgba(244, 114, 114, 0.32);
  }
  .diff-foot {
    padding: 18px 26px;
    border-top: 1px solid var(--line);
    background: rgba(244, 242, 236, 0.015);
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .diff-foot .meta {
    margin-right: auto;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    color: var(--text-soft);
  }
  .diff-btn {
    padding: 9px 18px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid;
  }
  .diff-btn.primary {
    background: var(--jewel);
    color: var(--ink);
    border-color: var(--jewel);
  }
  .diff-btn.primary:hover { background: var(--jewel-soft); }
  .diff-btn.ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line-bold);
  }
  .diff-btn.ghost:hover { border-color: var(--text); }

  /* ============================================================
     SECURITY COMPARE — before / after
     ============================================================ */
  .compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 60px;
  }
  .compare-col {
    background: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
  }
  .compare-col.bad   { border-color: rgba(244, 114, 114, 0.20); }
  .compare-col.good  {
    border-color: var(--jewel-dim);
    box-shadow: 0 0 60px rgba(141, 242, 197, 0.05);
  }
  .compare-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 12px;
    color: var(--text-soft);
  }
  .compare-tag {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 18px;
    letter-spacing: -0.01em;
  }
  .compare-col.bad .compare-tag { color: var(--crimson); }
  .compare-col.good .compare-tag { color: var(--jewel); }
  .compare-code {
    padding: 26px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    line-height: 1.85;
    color: var(--text);
    white-space: pre;
    overflow-x: auto;
  }
  .compare-code .k { color: var(--jewel); }
  .compare-code .s { color: #E2D6A8; }
  .compare-code .c { color: var(--text-soft); font-style: italic; }
  .compare-code .x { color: var(--crimson); }
  .compare-code .v { color: var(--jewel); }

  /* ============================================================
     GRAPHQL SECTION — the case against
     ============================================================ */
  .gql-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 60px;
  }
  .gql-col {
    background: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .gql-col.before { border-color: rgba(244, 114, 114, 0.18); }
  .gql-col.after  {
    border-color: var(--jewel-dim);
    box-shadow: 0 0 60px rgba(141, 242, 197, 0.05);
  }
  .gql-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .gql-tag {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  .gql-col.before .gql-tag { color: var(--crimson); }
  .gql-col.after  .gql-tag { color: var(--jewel);   }
  .gql-meta {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  .gql-tree {
    padding: 28px 26px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 13px;
    line-height: 2.05;
    color: var(--text);
    white-space: pre;
    overflow-x: auto;
    flex: 1;
  }
  .gql-tree .dir   { color: var(--text-mute); }
  .gql-tree .file  { color: var(--text); }
  .gql-tree .note  { color: var(--text-soft); font-style: italic; }
  .gql-tree .key   { color: var(--jewel); }
  .gql-tree .root  { color: var(--text-mute); }
  .gql-tree .singleton {
    display: block;
    color: var(--jewel);
    font-size: 14.5px;
  }
  .gql-foot {
    padding: 18px 22px;
    border-top: 1px solid var(--line);
    background: rgba(244, 242, 236, 0.015);
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .gql-foot .count {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.01em;
  }
  .gql-col.before .gql-foot .count { color: var(--crimson); }
  .gql-col.after  .gql-foot .count { color: var(--jewel); }

  /* The ledger — what GraphQL needs vs what StealthQL has */
  .ledger {
    margin-top: 100px;
    border-top: 1px solid var(--line);
  }
  .ledger-head {
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    gap: 40px;
    align-items: baseline;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
  .ledger-head span:first-child  { color: var(--text-mute); }
  .ledger-head span:last-child   { color: var(--jewel); }
  .ledger-row {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 24px 1fr;
    gap: 40px;
    align-items: baseline;
    transition: padding-left 0.3s, background 0.3s;
  }
  .ledger-row:hover {
    padding-left: 12px;
    background: rgba(141, 242, 197, 0.015);
  }
  .ledger-need {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: 22px;
    color: var(--text-mute);
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-decoration: line-through;
    text-decoration-color: rgba(244, 114, 114, 0.55);
    text-decoration-thickness: 1px;
  }
  .ledger-arrow {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 14px;
    color: var(--jewel);
    opacity: 0.7;
    text-align: center;
  }
  .ledger-with {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--jewel);
    letter-spacing: -0.01em;
    line-height: 1.3;
  }
  .ledger-with .plain {
    font-style: normal;
    color: var(--text);
  }

  .gql-kicker {
    margin-top: 100px;
    padding: 60px 0 0;
    border-top: 1px solid var(--line);
    max-width: 880px;
  }
  .gql-kicker .pull {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text);
  }
  .gql-kicker .pull em { font-style: italic; color: var(--jewel); }
  .gql-kicker .attr {
    margin-top: 28px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .gql-kicker .attr::before {
    content: '';
    width: 32px; height: 1px;
    background: var(--jewel);
  }

  @media (max-width: 960px) {
    .gql-stack { grid-template-columns: 1fr; }
    .ledger-head, .ledger-row {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .ledger-arrow { display: none; }
    .ledger-row { padding: 20px 0; }
  }

  /* ============================================================
     REPLACEMENTS — list of competitors, refined
     ============================================================ */
  .replace-list {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 60px;
    border-top: 1px solid var(--line);
  }
  .replace-row {
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 60px;
    align-items: baseline;
    transition: padding-left 0.3s;
  }
  .replace-row:hover { padding-left: 14px; }
  .replace-name {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: 36px;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--jewel);
    text-underline-offset: 0.2em;
  }
  .replace-row p {
    color: var(--text-mute);
    font-size: 16px;
    line-height: 1.6;
    max-width: 700px;
  }
  .replace-row p code {
    color: var(--jewel);
    font-size: 13px;
    background: rgba(141, 242, 197, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--jewel-dim);
  }

  /* ============================================================
     PRICING — clean, confident
     ============================================================ */
  .pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 60px;
  }
  .price {
    background: var(--ink);
    padding: 42px 28px;
    transition: background 0.3s;
    display: flex;
    flex-direction: column;
  }
  .price .buy { margin-top: auto; }
  .price:hover { background: var(--ink-soft); }
  .price.featured {
    background: linear-gradient(180deg, rgba(141, 242, 197, 0.04), var(--ink));
    position: relative;
  }
  .price.featured::after {
    content: 'Default deploy';
    position: absolute;
    top: 20px; right: 20px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jewel);
  }
  .price h3 {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .price p {
    color: var(--text-mute);
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 28px;
    min-height: 126px;
  }
  .price .amount {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: clamp(32px, 3.2vw, 44px);
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .price .amount .small {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
    font-size: 14px;
    color: var(--text-mute);
    letter-spacing: 0;
  }
  .price .amount.usage {
    font-style: italic;
    font-size: 32px;
    color: var(--jewel);
  }

  .tier-line {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    line-height: 1.5;
  }
  .tier-line .now {
    color: var(--jewel);
  }

  .pricing-coda {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    max-width: 880px;
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text-mute);
  }
  .pricing-coda strong {
    color: var(--text);
    font-weight: 400;
    font-style: normal;
  }
.pricing-coda em {
  color: var(--jewel);
}

.license-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 56px;
}
.license-card {
  background: var(--ink);
  padding: 38px 34px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.license-card.featured {
  background: linear-gradient(180deg, rgba(141, 242, 197, 0.04), var(--ink));
}
.license-kicker {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jewel);
}
.license-card h3 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.license-card p {
  margin: 0;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.6;
}
.license-card code {
  margin-top: auto;
  border: 1px solid var(--jewel-dim);
  border-radius: 6px;
  background: rgba(141, 242, 197, 0.06);
  color: var(--jewel);
  padding: 7px 10px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}

/* ============================================================
   FAQ — magazine column
   ============================================================ */
  .faq {
    max-width: 820px;
    margin: 60px auto 0;
  }
  .faq-row {
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 32px;
    align-items: baseline;
  }
  .faq-row:last-child { border-bottom: none; }
  .faq-num {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 24px;
    color: var(--jewel);
  }
  .faq-q {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-size: 24px;
    line-height: 1.25;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .faq-a {
    color: var(--text-mute);
    font-size: 15.5px;
    line-height: 1.6;
  }
  .faq-a code {
    color: var(--jewel);
    font-size: 13px;
    background: rgba(141, 242, 197, 0.06);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid var(--jewel-dim);
  }
  .faq-a strong {
    color: var(--text);
    font-weight: 500;
  }

  /* ============================================================
     FINAL CTA — the closer
     ============================================================ */
  .closer {
    text-align: center;
    padding: 220px 40px;
    position: relative;
    overflow: hidden;
  }
  .closer::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 1400px; height: 900px;
    background: radial-gradient(ellipse, var(--jewel-glow), transparent 60%);
    filter: blur(80px);
    pointer-events: none;
  }
  .closer-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
  }
  .closer h2 {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-weight: 400;
    font-size: clamp(44px, 5.4vw, 84px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 56px;
  }
  .closer h2 em { font-style: italic; color: var(--jewel); }

  .closer-cmd {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 28px;
    margin-bottom: 40px;
    background: rgba(244, 242, 236, 0.03);
    border: 1px solid var(--line-bold);
    border-radius: 999px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 15px;
    color: var(--text);
    transition: all 0.3s;
  }
  .closer-cmd:hover {
    background: var(--jewel);
    border-color: var(--jewel);
    color: var(--ink);
    box-shadow: 0 20px 60px var(--jewel-glow);
  }
  .closer-cmd .prompt { color: var(--jewel); }
  .closer-cmd:hover .prompt { color: var(--ink); }

  /* ============================================================
     FOOTER — quiet
     ============================================================ */
  footer {
    padding: 80px 40px 60px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 14px;
  }
  .foot-grid {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
  }
  .foot-grid h5 {
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
    margin-bottom: 20px;
  }
  .foot-grid ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .foot-grid a {
    color: var(--text-soft);
    transition: color 0.2s;
  }
  .foot-grid a:hover { color: var(--text); }
  .foot-tagline {
    font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--text-mute);
    line-height: 1.4;
    margin-top: 18px;
    max-width: 320px;
    letter-spacing: -0.01em;
  }
  .foot-bottom {
    max-width: var(--max);
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 60px; }
    .capsule-stage { aspect-ratio: 1 / 0.9; max-width: 480px; margin: 0 auto; }
    .three { grid-template-columns: 1fr; gap: 32px; }
    .features { grid-template-columns: 1fr; }
    .legend { grid-template-columns: 1fr; gap: 40px; }
    .compare { grid-template-columns: 1fr; }
    .share-cinema { grid-template-columns: 1fr; }
    .pricing { grid-template-columns: 1fr 1fr; }
    .price p { min-height: auto; }
    .license-grid { grid-template-columns: 1fr; }
    .replace-row { grid-template-columns: 1fr; gap: 12px; }
    .replace-name { font-size: 28px; }
    .timeline-row { grid-template-columns: 90px 1fr; gap: 20px; }
    .timeline-cmd { grid-column: 1 / 3; text-align: left; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .diff-row { grid-template-columns: 1fr; gap: 8px; }
    .diff-status { justify-self: start; }
    /* The homepage's dense in-page nav (7 section links) needs ~942px to fit; at/below
       the layout-collapse breakpoint, hide secondary links so the Download CTA is never
       pushed off-screen. Lighter navs (privacy/terms/docs) collapse the same way. */
    .nav-right .nav-secondary { display: none; }
  }

  @media (max-width: 640px) {
    .wrap { padding: 0 24px; }
    section { padding: 100px 24px; }
    .hero { padding: 140px 24px 80px; }
    .hero h1 { font-size: clamp(48px, 16vw, 72px); }
    .hero .lede { font-size: 17px; }
    .closer { padding: 140px 24px; }
    .nav-inner { padding: 14px 24px; }
    .nav-right { gap: 18px; }
    .pricing { grid-template-columns: 1fr; }
    .license-card { padding: 30px 26px; min-height: auto; }
    .feature { padding: 40px 28px; }
    .ai-turn { padding: 24px 22px; }
    .ai-content { font-size: 22px; }
    .manifesto-text { font-size: 32px; }
    .foot-grid { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

/* ============================================================
   WAITLIST FORM
   Used in the closer section. Designed for zero CLS — the
   message line reserves vertical space whether or not it's filled.
   ============================================================ */
.waitlist {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.waitlist.waitlist-stacked { max-width: 420px; }

.waitlist-row {
  display: flex;
  gap: 10px;
  background: rgba(244, 242, 236, 0.04);
  border: 1px solid var(--line-bold);
  border-radius: 999px;
  padding: 6px;
  transition: border-color 0.2s, background 0.2s;
}
.waitlist-row:focus-within {
  border-color: var(--jewel);
  background: rgba(141, 242, 197, 0.04);
  box-shadow: 0 0 0 4px rgba(141, 242, 197, 0.10);
}

.waitlist-stacked .waitlist-row {
  flex-direction: column;
  border-radius: 14px;
  padding: 10px;
  gap: 8px;
}

.waitlist-input {
  flex: 1;
  min-width: 0;
  padding: 13px 18px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.waitlist-input::placeholder {
  color: var(--text-soft);
}
.waitlist-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist-btn {
  padding: 13px 22px;
  font-size: 14px;
  flex-shrink: 0;
}
.waitlist-stacked .waitlist-btn {
  width: 100%;
  justify-content: center;
}

/* Animated dots while submitting — keeps button width stable (no CLS). */
.waitlist-btn .dots::after {
  content: "...";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%, 100% { content: "..."; }
}

/* Status line — fixed height to avoid layout shift on response. */
.waitlist-msg {
  margin-top: 14px;
  min-height: 22px;            /* reserves space — zero CLS */
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  line-height: 1.6;
  text-align: center;
}
.waitlist-msg.ok  { color: var(--jewel); }
.waitlist-msg.err { color: var(--crimson); }

@media (max-width: 540px) {
  .waitlist-row {
    flex-direction: column;
    border-radius: 14px;
    padding: 10px;
  }
  .waitlist-btn {
    width: 100%;
    justify-content: center;
  }
}

/* H3 overrides for elements that semantically should be h3 but visually
   continue the editorial design (FAQ questions). */
h3.faq-q {
  margin: 0 0 12px 0;
  font-weight: 400;
}

/* "or" divider for the closer CTA. */
.closer-or {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 360px;
  margin: 36px auto;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-soft);
  letter-spacing: 0;
}
.closer-or::before,
.closer-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Closer caption beneath waitlist form. */
.closer-caption {
  margin-top: 28px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  line-height: 1.5;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* skip-to-main link for accessibility. Hidden until focused. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--jewel);
  color: var(--ink);
  padding: 12px 20px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  z-index: 200;
  border-bottom-right-radius: 8px;
  transition: top 0.15s;
}
.skip-link:focus {
  top: 0;
}

/* ============================================================
   DASHBOARD
   Customer-facing dashboard for managing their StealthQL Managed server.
   Editorial aesthetic continues, but layout is functional (sidebar + content).
   ============================================================ */

.dash-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--ink);
}

.dash-main {
  padding: 32px 48px 48px;
  min-width: 0;
}

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.dash-head .left { flex: 1; min-width: 260px; }
.dash-head .eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
  margin-bottom: 12px;
}
.dash-head h1 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}
.dash-head h1 em { font-style: italic; color: var(--jewel); }
.dash-head .lede {
  margin: 16px 0 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text-mute);
  max-width: 58ch;
}
.dash-head .lede strong { color: var(--text); font-style: normal; font-weight: 500; }
.dash-head .right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Standalone intro paragraph used by pages with longer lead-ins (replaces
   ad-hoc inline styles on secrets / tokens / shares / proposals / eject). */
.dash-lede {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-mute);
  letter-spacing: -0.005em;
  max-width: 760px;
  margin: -4px 0 48px;
}
.dash-lede strong {
  color: var(--text);
  font-style: normal;
  font-weight: 500;
}
.dash-lede code {
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  font-style: normal;
  padding: 1px 6px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
/* StatusBadge component renders a leading glyph (✓ / ✕ / ·) for non-live
   pills so users don't rely on color alone. Live pills keep the animated
   dot above and skip the glyph. */
.status .status-glyph {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
}
/* When a glyph is rendered, hide the bare-dot ::before to avoid stacking. */
.status:has(.status-glyph)::before { display: none; }
.status.live { color: var(--jewel); background: rgba(141, 242, 197, 0.10); border: 1px solid var(--jewel-dim); }
.status.live::before { box-shadow: 0 0 8px var(--jewel); animation: pulse-status 2.4s infinite; }
.status.pending,
.status.provisioning,
.status.applying,
.status.building,
.status.gating,
.status.restoring { color: #E2D6A8; background: rgba(226, 214, 168, 0.06); border: 1px solid rgba(226, 214, 168, 0.20); }
.status.applying::before,
.status.building::before,
.status.gating::before,
.status.provisioning::before { animation: pulse-status 1.6s infinite; }
.status.failed,
.status.suspended { color: var(--crimson); background: rgba(244, 114, 114, 0.06); border: 1px solid rgba(244, 114, 114, 0.20); }
.status.complete { color: var(--jewel); background: rgba(141, 242, 197, 0.06); border: 1px solid var(--jewel-dim); }
.status.ejected,
.status.historical { color: var(--text-soft); background: rgba(244, 242, 236, 0.04); border: 1px solid var(--line); }
.status.historical::before { opacity: 0.55; }
.gate-tone-pass { color: var(--jewel); }
.gate-tone-fail { color: var(--crimson); }
.gate-tone-unknown { color: var(--text-soft); }
@keyframes pulse-status {
  0%, 100% { box-shadow: 0 0 0 0 rgba(141, 242, 197, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(141, 242, 197, 0); }
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin-bottom: 24px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.dash-stat {
  background: var(--ink);
  padding: 28px 28px;
  transition: background 0.3s;
}
.dash-stat:hover { background: var(--ink-soft); }
.dash-stat .label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 14px;
}
.dash-stat .value {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.0;
  margin-bottom: 6px;
}
.dash-stat .value em { font-style: italic; color: var(--jewel); }
.dash-stat .value .small {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 14px;
  color: var(--text-mute);
  margin-left: 6px;
  font-style: normal;
}
.dash-stat .sub {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.dash-stat .sub.accent { color: var(--jewel); }

.dash-section { margin-bottom: 24px; }
.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.dash-section-head h2 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dash-section-head h2 em { font-style: italic; color: var(--jewel); }
.dash-section-head .hint {
  font-size: 13px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
}

.dash-detail {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.dash-detail-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.dash-detail-row:last-child { border-bottom: none; }
.dash-detail-row:hover { background: rgba(244, 242, 236, 0.015); }
.dash-detail-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.dash-detail-val {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
}
.dash-detail-val.empty {
  color: var(--text-soft);
  font-style: italic;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.dash-copy-field,
.provisioning-ip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.copy-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(244, 242, 236, 0.03);
  color: var(--text-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.copy-btn:hover {
  border-color: rgba(141, 242, 197, 0.45);
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.08);
}
.copy-btn.copied {
  color: var(--jewel);
  border-color: rgba(141, 242, 197, 0.5);
}
.copy-btn svg {
  width: 14px;
  height: 14px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: 13px;
}
.server-log-row {
  align-items: start;
}
.server-log-val {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.server-log-target {
  color: var(--text);
  word-break: break-all;
}
.server-log-command {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--text-soft);
}
.server-log-command code {
  display: inline-block;
  max-width: 100%;
  color: var(--jewel);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.server-log-command.muted {
  color: var(--text-soft);
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  letter-spacing: 0;
}
.api-key-manager {
  display: grid;
  gap: 18px;
}
.api-key-create {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.api-key-reveal {
  align-items: flex-start;
}
.api-key-secret {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.api-key-secret code {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.api-key-history {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
}
.dash-detail-action {
  font-size: 12px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
}

.dash-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ink-soft);
  min-width: 600px;
}
.dash-table th, .dash-table td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table th {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
  background: rgba(244, 242, 236, 0.015);
}
.dash-table td { color: var(--text-mute); }
.dash-table td.mono {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--text);
}
.dash-table td.serif {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dash-table tr:hover { background: rgba(244, 242, 236, 0.015); }

.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 7px;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
  white-space: nowrap;
}
.dash-btn.primary {
  background: var(--jewel);
  color: var(--ink);
  border-color: var(--jewel);
}
.dash-btn.primary:hover { background: var(--jewel-soft); }
.dash-btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-bold);
}
.dash-btn.ghost:hover {
  border-color: var(--text);
  background: rgba(244, 242, 236, 0.03);
}
.dash-btn.danger {
  background: rgba(244, 114, 114, 0.06);
  color: var(--crimson);
  border-color: rgba(244, 114, 114, 0.32);
}
.dash-btn.danger:hover {
  background: rgba(244, 114, 114, 0.14);
  border-color: var(--crimson);
}
.dash-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.eject-card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 48px;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
.eject-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(141, 242, 197, 0.06), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.eject-card > * { position: relative; }
.eject-card h2 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 560px;
}
.eject-card h2 em { font-style: italic; color: var(--jewel); }
.eject-card p {
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.6;
  max-width: 560px;
  margin-bottom: 32px;
}
.eject-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 32px 0 32px;
}
.eject-list-item {
  background: var(--ink-soft);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eject-list-item .key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jewel);
}
.eject-list-item .val {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dash-empty {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 48px 40px;
  text-align: center;
  color: var(--text-soft);
}
.dash-empty h3 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.012em;
}
.dash-empty p {
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto;
}
.dash-empty p + .dash-btn,
.dash-empty p + a.dash-btn {
  margin-top: 18px;
}
.dash-empty .dash-btn { display: inline-flex; }

/* ============================================================
   DASHBOARD SIDEBAR — single source of truth for the aside.
   ============================================================ */

.dash-aside {
  background: var(--ink-soft);
  border-right: 1px solid var(--line);
  padding: 24px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.dash-aside-top {
  display: block;
}

.dash-aside .mark {
  height: 38px;
  padding: 0 4px;
  /* font-size override removed: wordmark is now an image, not text */
}

/* Back-to-home link sits beneath the logo, distinct from the dashboard nav. */
.dash-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -6px;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  align-self: flex-start;
  transition: color 0.15s, background 0.15s;
}
.dash-back:hover {
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.06);
}
.dash-back svg {
  width: 11px; height: 11px;
}

.dash-aside .nav-divider {
  height: 1px;
  background: var(--line);
  margin: 0 -18px;
  border: 0;
}

.sidebar-server-card {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(141, 242, 197, 0.035);
  color: var(--text-soft);
}

.sidebar-server-card.invalid {
  border-color: rgba(255, 143, 143, 0.35);
  background: rgba(255, 143, 143, 0.055);
}

.sidebar-server-card.pending {
  border-color: rgba(246, 201, 113, 0.28);
  background: rgba(246, 201, 113, 0.045);
}

.sidebar-server-card.invalid .sidebar-server-key {
  color: #ff9f9f;
}

.sidebar-server-card.pending .sidebar-server-key {
  color: #f6c971;
}

.sidebar-server-card summary {
  list-style: none;
  display: grid;
  gap: 3px;
  cursor: pointer;
}

.sidebar-server-card summary::-webkit-details-marker { display: none; }

.sidebar-server-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jewel);
}

.sidebar-server-card strong {
  min-width: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-server-card span:not(.sidebar-server-key) {
  min-width: 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-server-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  z-index: 80;
}

.sidebar-server-menu a {
  display: grid;
  gap: 2px;
  padding: 8px 9px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--text);
}

.sidebar-server-menu a:hover,
.sidebar-server-menu a.active {
  background: rgba(141, 242, 197, 0.08);
}

.server-scope-missing {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 28px;
  display: grid;
  gap: 18px;
}

.server-scope-kicker {
  margin: 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: #ff9f9f;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.server-scope-missing h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 6vw, 58px);
  line-height: 0.96;
  font-weight: 500;
}

.server-scope-missing p {
  margin: 0;
  max-width: 620px;
  color: var(--text-soft);
  line-height: 1.6;
}

.server-scope-missing code {
  color: var(--jewel);
}

.server-scope-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.server-scope-list a {
  display: grid;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
}

.server-scope-list a:hover {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.06);
}

.server-scope-list span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
}

.server-scope-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.server-scope-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.025);
}

.server-scope-actions a:first-child {
  border-color: var(--jewel-dim);
  color: #0d0d0d;
  background: var(--jewel);
}

.dash-section-label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
  padding: 0 4px;
}

.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dash-nav a {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.dash-nav a:hover {
  background: rgba(244, 242, 236, 0.04);
  color: var(--text);
}
.dash-nav a[aria-current="page"] {
  background: rgba(141, 242, 197, 0.08);
  color: var(--jewel);
}
.dash-nav a[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 6px; bottom: 6px;
  width: 2px;
  background: var(--jewel);
  border-radius: 0 2px 2px 0;
}

.dash-nav .nav-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.dash-nav a:hover .nav-icon { opacity: 0.9; }
.dash-nav a[aria-current="page"] .nav-icon { opacity: 1; }

.dash-nav .nav-label {
  flex: 1;
  min-width: 0;
}

.dash-nav .pill {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  background: rgba(244, 242, 236, 0.06);
  color: var(--text-soft);
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Compact user pill */
.dash-user {
  margin-top: auto;
  padding: 14px 12px;
  border-radius: 10px;
  background: rgba(244, 242, 236, 0.025);
  border: 1px solid var(--line);
}
.dash-user .who {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
  letter-spacing: -0.01em;
  word-break: break-all;
  line-height: 1.2;
}
.dash-user .what {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dash-user .signout-btn {
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--line-bold);
  border-radius: 6px;
  color: var(--text-mute);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.dash-user .signout-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

/* Mobile hamburger toggle — hidden on desktop */
.mobile-nav-btn { display: none; }

@media (max-width: 980px) {
  .dash-shell { grid-template-columns: 1fr; }

  .dash-aside {
    position: sticky;
    top: 0;
    z-index: 200;
    height: auto;
    max-height: none;
    padding: 0;
    gap: 0;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  /* Top bar: logo + hamburger, always visible */
  .dash-aside-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
  }
  .dash-aside-top .mark { padding: 0; }

  .mobile-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--line-bold);
    border-radius: 8px;
    color: var(--text-mute);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    padding: 0;
  }
  .mobile-nav-btn:hover {
    border-color: var(--text);
    color: var(--text);
  }
  .mobile-nav-btn svg { width: 18px; height: 18px; }

  /* Everything below top bar — hidden until toggle opens */
  .dash-back,
  .dash-aside .nav-divider,
  .dash-aside > div:not(.dash-aside-top),
  .dash-user {
    display: none;
  }

  /* Open state — controlled by .mobile-nav-open on <html> */
  .mobile-nav-open .dash-aside {
    position: fixed;
    inset: 0;
    z-index: 200;
    height: 100dvh;
    overflow-y: auto;
    padding-bottom: 32px;
    gap: 8px;
    border-right: none;
    border-bottom: none;
  }
  .mobile-nav-open .dash-aside-top {
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
  }
  .mobile-nav-open .dash-back { display: none; }
  .mobile-nav-open .dash-aside .nav-divider { display: none; }
  .mobile-nav-open .dash-aside > div:not(.dash-aside-top) {
    display: block;
    padding: 0 16px;
  }
  .mobile-nav-open .dash-aside .dash-section-label {
    margin-top: 12px;
  }
  .mobile-nav-open .dash-user {
    display: block;
    margin: auto 16px 0;
  }
  .mobile-nav-open .dash-nav a[aria-current="page"]::before { left: -16px; }

  /* Hide page content when menu is open */
  .mobile-nav-open .dash-main { display: none; }

  /* Content area */
  .dash-main { padding: 28px 16px 64px; }
  .dash-detail-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .dash-detail-val { font-size: 12.5px; }
  .dash-detail-action { font-size: 11px; }
  .api-key-create { grid-template-columns: 1fr; }
  .dash-head { margin-bottom: 28px; padding-bottom: 18px; gap: 16px; }
  .dash-head h1 { font-size: 28px; }
  .dash-head .left { min-width: 0; }
  .dash-head .right { flex-wrap: wrap; }
  .dash-stats { margin-bottom: 28px; }
  .dash-stat { padding: 18px 16px; }
  .dash-stat .value { font-size: 26px; }
  .dash-section { margin-bottom: 28px; }
  .dash-section-head { flex-direction: column; gap: 6px; margin-bottom: 14px; }
  .dash-section-head h2 { font-size: 22px; }

  /* Tables scroll horizontally */
  .dash-table-wrap { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }

  /* KV rows */
  .kv-row { padding: 14px 16px; gap: 16px; }

  /* Logs */
  .log-row { padding: 10px 16px; }

  /* Growth chart */
  .growth-chart { height: 44px; }

  /* Status pills */
  .status.live { font-size: 11px; padding: 4px 10px; }
}

/* ============================================================
   ENVIRONMENT / TOKENS / DOMAIN tables — slightly different
   density than backups/deployments.
   ============================================================ */
.kv-list {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.kv-row {
  display: grid;
  grid-template-columns: 280px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  transition: background 0.2s;
}
.kv-row:last-child { border-bottom: none; }
.kv-row:hover { background: rgba(244, 242, 236, 0.015); }
.kv-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
}
.kv-key .kv-hint {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-soft);
  margin-left: 8px;
  letter-spacing: -0.01em;
}
.kv-val {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--text-mute);
  word-break: break-all;
}
.kv-val.secret {
  color: var(--text-soft);
  letter-spacing: 0.1em;
}
.kv-actions { display: flex; gap: 8px; }

@media (max-width: 720px) {
  .kv-row { grid-template-columns: 1fr; gap: 6px; }
  .kv-actions { justify-self: start; }
}

/* ============================================================
   LOGS — activity feed
   ============================================================ */
.logs {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
}
.log-row {
  display: grid;
  grid-template-columns: 130px 110px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
}
.log-row:last-child { border-bottom: none; }
.log-row:hover { background: rgba(244, 242, 236, 0.015); }
.log-time { color: var(--text-soft); letter-spacing: 0.04em; }
.log-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
  background: transparent;
}
.log-kind.deploy   { color: var(--jewel);    border-color: var(--jewel-dim); }
.log-kind.auth     { color: #C4B5FD;          border-color: rgba(196, 181, 253, 0.30); }
.log-kind.share    { color: #E2D6A8;          border-color: rgba(226, 214, 168, 0.30); }
.log-kind.mutation { color: var(--text-mute); border-color: var(--line-bold); }
.log-kind.policy   { color: var(--crimson);   border-color: rgba(244, 114, 114, 0.32); }
.log-msg { color: var(--text); }
.log-msg .acc { color: var(--jewel); }
.log-actor { color: var(--text-soft); }

@media (max-width: 720px) {
  .log-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   SHARES — beautiful card grid for the killer feature
   ============================================================ */
.share-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}
.share-card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.share-card:hover {
  border-color: var(--line-bold);
  transform: translateY(-2px);
}
.share-card.revoked {
  opacity: 0.55;
}
.share-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.share-card-name {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
  flex: 1;
}
.share-card-meta {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 14px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  align-items: baseline;
}
.share-card-meta dt {
  color: var(--text-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.share-card-meta dd {
  color: var(--text);
  word-break: break-all;
}
.share-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-card-fields .chip {
  background: rgba(141, 242, 197, 0.06);
  border: 1px solid var(--jewel-dim);
  color: var(--jewel);
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.share-card-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-mute);
  overflow: hidden;
}
.share-card-url .url-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-card-url .copy-btn {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  color: var(--text-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}
.share-card-url .copy-btn:hover {
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.08);
}
.share-card-url .copy-btn.copied {
  color: var(--jewel);
}
.share-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.share-card-stats {
  display: flex;
  gap: 18px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
.share-card-stats strong {
  color: var(--text);
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 2px;
}

/* Create share form */
.share-form {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 56px;
}
.share-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-form-field.span-2 { grid-column: span 2; }
.share-form-field label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.share-form-field input,
.share-form-field select,
.share-form-field textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.share-form-field input:focus,
.share-form-field select:focus,
.share-form-field textarea:focus {
  outline: 0;
  border-color: var(--jewel);
  box-shadow: 0 0 0 3px var(--jewel-dim);
}
.share-form-actions {
  grid-column: span 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.share-form-msg {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  flex: 1;
}
.share-form-msg.ok  { color: var(--jewel); }
.share-form-msg.err { color: var(--crimson); }
@media (max-width: 720px) {
  .share-grid { grid-template-columns: 1fr; }
  .share-card { padding: 18px; }
  .share-card-name { font-size: 19px; }
  .share-card-meta { grid-template-columns: 80px 1fr; gap: 4px 10px; }
  .share-form { grid-template-columns: 1fr; }
  .share-form-field.span-2 { grid-column: span 1; }
  .share-form-actions { grid-column: span 1; flex-direction: column; }
}

/* Mode toggle inside the form */
.mode-toggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
}
.mode-toggle label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-align: center;
  transition: background 0.15s, color 0.15s;
  margin: 0;
}
.mode-toggle label small {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-faint);
}
.mode-toggle label:hover { color: var(--text); }
.mode-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-toggle input:checked + label,
.mode-toggle label:has(input:checked) {
  background: rgba(141, 242, 197, 0.10);
  color: var(--jewel);
}
.mode-toggle label:has(input:checked) small { color: var(--jewel-soft); }

/* ============================================================
   PROPOSAL CARDS — Tinder for database commits
   ============================================================ */
.proposal-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.proposal-card {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s, opacity 0.4s;
}
.proposal-card.pending {
  border-color: rgba(226, 214, 168, 0.20);
}
.proposal-card.approved {
  border-color: var(--jewel-dim);
  opacity: 0.85;
}
.proposal-card.rejected {
  border-color: rgba(244, 114, 114, 0.20);
  opacity: 0.65;
}
.proposal-card.dismissing {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
.proposal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 242, 236, 0.015);
}
.proposal-head .left {
  flex: 1;
  min-width: 0;
}
.proposal-id {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}
.proposal-meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.proposal-meta strong { color: var(--text-mute); font-weight: 500; }
.proposal-summary {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.proposal-summary .ok { color: var(--jewel); }
.proposal-summary .no { color: var(--crimson); }

.proposal-changes {
  display: flex;
  flex-direction: column;
}
.proposal-row {
  display: grid;
  grid-template-columns: 200px 1fr 180px;
  gap: 22px;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.proposal-row:last-child { border-bottom: none; }
.proposal-row.approved { background: rgba(141, 242, 197, 0.025); }
.proposal-row.rejected { background: rgba(244, 114, 114, 0.025); }
.proposal-field {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--text-mute);
}
.proposal-change {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.proposal-old {
  color: var(--text-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 114, 114, 0.5);
}
.proposal-arrow { color: var(--text-soft); }
.proposal-new { color: var(--text); font-weight: 500; }
.proposal-row.approved .proposal-new { color: var(--jewel); }
.proposal-row.rejected .proposal-new { color: var(--crimson); text-decoration: line-through; opacity: 0.7; }

.proposal-decision {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid;
  text-align: center;
  justify-self: end;
}
.proposal-decision.approved {
  color: var(--jewel);
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.10);
}
.proposal-decision.rejected {
  color: var(--crimson);
  border-color: rgba(244, 114, 114, 0.32);
  background: rgba(244, 114, 114, 0.10);
}
.proposal-reason {
  display: block;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 400;
}

.proposal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: rgba(244, 242, 236, 0.015);
}
.proposal-actions .meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.proposal-actions .buttons {
  display: flex;
  gap: 10px;
}
.proposal-resolved {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-soft);
  letter-spacing: -0.01em;
  text-align: right;
  flex: 1;
}
.proposal-resolved strong {
  color: var(--text);
  font-weight: 400;
}

@media (max-width: 720px) {
  .proposal-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 16px; }
  .proposal-decision { justify-self: start; }
  .proposal-head { padding: 16px; gap: 10px; flex-direction: column; }
  .proposal-id { font-size: 19px; }
  .proposal-summary { white-space: normal; }
  .proposal-change { font-size: 12px; gap: 8px; }
  .proposal-actions { flex-direction: column; align-items: stretch; padding: 14px 16px; }
  .proposal-actions .buttons { width: 100%; justify-content: stretch; }
  .proposal-actions .buttons .dash-btn { flex: 1; justify-content: center; }
}

/* ============================================================
   REPLAY — production state as a video
   ============================================================ */
.replay-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  margin-top: 32px;
}
.replay-timeline {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  max-height: 720px;
  overflow-y: auto;
}
.replay-event {
  position: relative;
  padding: 14px 18px 14px 38px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-family: inherit;
  color: inherit;
}
.replay-event::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 18px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  border: 1px solid var(--line-bold);
}
.replay-event::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 30px;
  bottom: -1px;
  width: 1px;
  background: var(--line);
}
.replay-event:last-child::after { display: none; }
.replay-event:hover { background: rgba(244, 242, 236, 0.02); }
.replay-event.selected {
  background: rgba(141, 242, 197, 0.06);
}
.replay-event.selected::before {
  background: var(--jewel);
  border-color: var(--jewel);
  box-shadow: 0 0 12px var(--jewel-glow);
}
.replay-event-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.replay-event-time {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.replay-event-msg {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}
.replay-event-actor {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 4px;
}

.replay-detail {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-self: start;
}
.replay-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.replay-detail-title {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.replay-detail-meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  text-align: right;
}
.replay-card {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.replay-card h4 {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(141, 242, 197, 0.025);
  font-weight: 500;
}
.replay-card pre {
  margin: 0;
  padding: 18px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}
.replay-card pre .k { color: var(--jewel); }
.replay-card pre .s { color: #C4B5FD; }
.replay-card pre .n { color: #E2D6A8; }
.replay-card pre .c { color: var(--text-soft); font-style: italic; }
.replay-card pre .ok { color: var(--jewel); }
.replay-card pre .no { color: var(--crimson); }

.replay-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.replay-workbench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.replay-workbench-task {
  min-height: 150px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-soft);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}
.replay-workbench-task:hover {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.035);
}
.replay-workbench-task .key,
.replay-control-panel .key,
.replay-snapshot-head .key,
.replay-sim-bottom .key,
.replay-impact-metric .key,
.replay-impact-row .key,
.replay-template-head .key,
.replay-template-cards .key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.replay-workbench-task strong {
  font-size: 15px;
  font-weight: 600;
}
.replay-workbench-task span:last-child {
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.replay-feature {
  margin-top: 38px;
  scroll-margin-top: 90px;
}
.replay-feature-grid,
.replay-sim-grid,
.replay-template-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.replay-control-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-soft);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.replay-form-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.replay-form-row label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.replay-form-row input,
.replay-form-row select,
.replay-form-row textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--text);
  padding: 10px 11px;
  font: inherit;
  font-size: 13px;
}
.replay-form-row textarea {
  min-height: 110px;
  resize: vertical;
}
.replay-panel-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.replay-snapshot-card,
.replay-sim-result,
.replay-impact-panel,
.replay-template-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-soft);
  overflow: hidden;
}
.replay-snapshot-head,
.replay-template-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.replay-snapshot-head strong,
.replay-template-head strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
}
.replay-snapshot-head code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--jewel);
  white-space: nowrap;
}
.replay-incident-line {
  margin: 16px 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(160, 234, 188, 0.2);
  border-radius: 8px;
  background: rgba(160, 234, 188, 0.05);
  color: var(--text-soft);
  font-size: 13px;
}
.replay-incident-line strong {
  color: var(--text);
}
.replay-table-wrap {
  overflow-x: auto;
  padding: 16px 18px 18px;
}
.replay-mini-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  font-size: 12.5px;
}
.replay-mini-table th {
  text-align: left;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--line);
}
.replay-mini-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--text-soft);
}
.replay-mini-table td strong,
.replay-mini-table td span {
  display: block;
}
.replay-mini-table td strong {
  color: var(--text);
  font-weight: 500;
}
.replay-mini-table td span {
  margin-top: 3px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
}
.replay-redacted {
  display: inline-flex !important;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(246, 201, 113, 0.08);
  color: #f6c971 !important;
}
.replay-sim-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.replay-sim-verdict strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
.replay-step-list {
  list-style: none;
  margin: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.replay-step-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
}
.replay-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  display: grid;
  place-items: center;
}
.replay-step-list strong {
  color: var(--text);
  font-size: 13.5px;
}
.replay-step-list p {
  margin: 4px 0 6px;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.replay-step-list code {
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
}
.replay-sim-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}
.replay-sim-bottom > div {
  background: var(--ink-soft);
  padding: 16px 18px;
}
.replay-sim-bottom p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.replay-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.replay-impact-metric {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-soft);
  padding: 16px;
}
.replay-impact-metric strong {
  display: block;
  margin: 6px 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 34px;
  color: var(--text);
}
.replay-impact-metric p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.replay-impact-metric.ok strong { color: var(--jewel); }
.replay-impact-metric.warn strong { color: #f6c971; }
.replay-impact-metric.bad strong { color: var(--crimson); }
.replay-impact-panel {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}
.replay-impact-code {
  border-right: 1px solid var(--line);
  overflow-x: auto;
}
.replay-impact-code pre,
.replay-template-code {
  margin: 0;
  padding: 18px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  line-height: 1.7;
}
.replay-impact-review {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.replay-impact-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.replay-impact-row.ok .key { color: var(--jewel); }
.replay-impact-row.warn .key { color: #f6c971; }
.replay-impact-row.bad .key { color: var(--crimson); }
.replay-template-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.replay-template-cards > div {
  background: var(--ink-soft);
  padding: 16px 18px;
}
.replay-template-cards p {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.replay-template-code {
  background: var(--ink);
  overflow-x: auto;
}

@media (max-width: 980px) {
  .replay-shell { grid-template-columns: 1fr; }
  .replay-timeline { max-height: 360px; }
  .replay-detail { padding: 20px; gap: 20px; }
  .replay-detail-title { font-size: 24px; }
  .replay-detail-meta { text-align: left; }
  .replay-card pre { font-size: 11.5px; white-space: pre-wrap; word-break: break-all; }
  .replay-feature-grid,
  .replay-sim-grid,
  .replay-template-grid,
  .replay-impact-panel,
  .replay-sim-bottom,
  .replay-template-cards {
    grid-template-columns: 1fr;
  }
  .replay-impact-code { border-right: 0; border-bottom: 1px solid var(--line); }
  .replay-snapshot-head,
  .replay-template-head,
  .replay-sim-verdict {
    flex-direction: column;
    align-items: flex-start;
  }
  .replay-snapshot-head code { white-space: normal; }
}

/* ============================================================
   MEMBERS — manage the customer's app users
   ============================================================ */

/* Growth chart — pure CSS bar chart, no JS, zero CLS */
.growth-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
  margin-top: 14px;
}
.growth-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--jewel) 0%, rgba(141, 242, 197, 0.25) 100%);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  position: relative;
  cursor: default;
  transition: opacity 0.15s, transform 0.15s;
}
.growth-bar:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.growth-bar:hover .growth-tip {
  opacity: 1;
  transform: translate(-50%, -4px);
}
.growth-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 6px 9px;
  background: var(--ink);
  border: 1px solid var(--line-bold);
  border-radius: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 5;
}
.growth-tip strong {
  color: var(--jewel);
  font-weight: 500;
}
.growth-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

/* Members table */
.members-list {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.member-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1.2fr) 100px 110px 110px auto;
  gap: 18px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.member-row:last-child { border-bottom: none; }
.member-row:hover { background: rgba(244, 242, 236, 0.015); }
.member-row.suspended { opacity: 0.7; }
.member-row.banned { opacity: 0.55; }
.member-row.invited {
  background: rgba(141, 242, 197, 0.025);
}
.member-row.expanded {
  background: rgba(244, 242, 236, 0.02);
}

.member-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(141, 242, 197, 0.18), rgba(141, 242, 197, 0.04));
  border: 1px solid var(--jewel-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jewel);
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.member-row.banned .member-avatar { color: var(--crimson) !important; border-color: rgba(244, 114, 114, 0.32) !important; background: rgba(244, 114, 114, 0.05) !important; }
.member-row.invited .member-avatar { color: var(--text-soft) !important; border-color: var(--line) !important; background: var(--ink) !important; font-style: normal; }
.member-row.suspended .member-avatar { opacity: 0.65; }
.member-avatar-small {
  width: 24px; height: 24px;
  font-size: 11px;
  letter-spacing: 0;
}

.member-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.member-id .name {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.member-id .email {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.member-role.owner  { background: rgba(141, 242, 197, 0.10); color: var(--jewel); border: 1px solid var(--jewel-dim); }
.member-role.admin  { background: rgba(196, 181, 253, 0.10); color: #C4B5FD; border: 1px solid rgba(196, 181, 253, 0.25); }
.member-role.member { background: rgba(244, 242, 236, 0.04); color: var(--text-mute); border: 1px solid var(--line); }
.member-role.viewer { background: transparent; color: var(--text-soft); border: 1px solid var(--line); }

.member-time {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
.member-time.recent { color: var(--jewel); }

.member-actions {
  display: flex;
  gap: 6px;
  justify-self: end;
}

.member-toggle {
  background: transparent;
  border: 0;
  color: var(--text-soft);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s, background 0.15s;
}
.member-toggle:hover {
  color: var(--text);
  background: rgba(244, 242, 236, 0.04);
}
.member-toggle.open {
  color: var(--jewel);
}

/* Expanded panel beneath a member row */
.member-detail {
  grid-column: 1 / -1;
  padding: 22px 22px 24px 78px;
  border-top: 1px solid var(--line);
  background: rgba(244, 242, 236, 0.012);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.member-detail .col h4 {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
  margin-bottom: 14px;
  font-weight: 500;
}
.member-detail-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
}
.member-detail-grid dt {
  color: var(--text-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.member-detail-grid dd { color: var(--text); }

.member-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-mute);
}
.member-action-row.danger { border-color: rgba(244, 114, 114, 0.20); }
.member-action-row strong {
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  display: block;
  margin-bottom: 2px;
}
.member-email-form {
  display: flex;
  gap: 8px;
}
.member-email-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.member-email-form input:focus {
  outline: 0;
  border-color: var(--jewel);
  box-shadow: 0 0 0 3px var(--jewel-dim);
}

.member-note {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  background: rgba(244, 242, 236, 0.025);
  border: 1px solid var(--line);
}
.member-note.ok  { background: rgba(141, 242, 197, 0.06); border-color: var(--jewel-dim); color: var(--jewel); }
.member-note.err { background: rgba(244, 114, 114, 0.06); border-color: rgba(244, 114, 114, 0.32); color: var(--crimson); }

.invite-form {
  display: grid;
  grid-template-columns: 1fr 140px auto;
  gap: 10px;
  align-items: center;
}
.invite-form input,
.invite-form select {
  padding: 11px 14px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
}
.invite-form input:focus,
.invite-form select:focus {
  outline: 0;
  border-color: var(--jewel);
  box-shadow: 0 0 0 3px var(--jewel-dim);
}
.invite-msg {
  margin-top: 10px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
}
.invite-msg.ok  { color: var(--jewel); }
.invite-msg.err { color: var(--crimson); }

@media (max-width: 980px) {
  .member-row { grid-template-columns: 38px 1fr auto; gap: 14px; padding: 12px 16px; }
  .member-row .member-role,
  .member-row .member-time { display: none; }
  .member-row .status { font-size: 11px; }
  .member-detail { grid-template-columns: 1fr; padding: 16px; }
  .member-detail-grid { grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: 12px; }
  .member-action-row { grid-template-columns: 1fr; gap: 8px; }
  .member-action-row form,
  .member-email-form { width: 100%; }
  .member-email-form { flex-direction: column; }
  .member-email-form input { flex: none; }
  .invite-form { grid-template-columns: 1fr; }
}

/* ============================================================
   LAUNCH DROPLET FORM
   ============================================================ */

.launch-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
  background: var(--surface-1, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 24px;
}

.launch-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px dashed var(--border-soft, rgba(255, 255, 255, 0.12));
  background: rgba(160, 234, 188, 0.04);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.launch-banner strong {
  color: var(--accent, #a0eabc);
  font-size: 13px;
}
.launch-banner span {
  color: var(--text-soft);
}

.launch-success {
  grid-column: 1 / -1;
  border-radius: 10px;
  border: 1px solid rgba(160, 234, 188, 0.25);
  background: rgba(160, 234, 188, 0.06);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.launch-success strong { color: var(--accent, #a0eabc); }
.launch-success code { background: rgba(255, 255, 255, 0.06); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.launch-success p { margin: 0; color: var(--text-soft); font-size: 12px; }

/* Inline callouts for "this section has a prerequisite that isn't
   met yet." Visible-by-default block, not a hidden tooltip. Used on
   the Members → OAuth providers panel and anywhere else we need to
   say "this won't work until X." */
.dash-callout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.dash-callout strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dash-callout span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.dash-callout .dash-btn { align-self: flex-start; margin-top: 4px; }
.dash-callout-warn {
  border-color: rgba(246, 201, 113, 0.35);
  background: rgba(246, 201, 113, 0.05);
}
.dash-callout-warn strong { color: #f6c971; }

/* Inline "why is this disabled" block — used next to disabled
   buttons so the user sees the prerequisite, not a dead button.
   See /dashboard/deployments and /dashboard/replay for examples. */
.dash-disabled-reason {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(246, 201, 113, 0.4);
  border-radius: 8px;
  background: rgba(246, 201, 113, 0.04);
}
.dash-disabled-reason strong {
  display: block;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}
.dash-disabled-reason ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-disabled-reason li {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.dash-disabled-reason a {
  color: var(--jewel);
  text-decoration: none;
}
.dash-disabled-reason a:hover { text-decoration: underline; }

/* Launch form: explanation block for fields that are locked by
   another setting (e.g. deployWeb forced-on under private-backend
   topology). Sits where the checkbox normally would. */
.launch-field-locked-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.014);
}
.launch-field-locked-note strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--jewel);
}
.launch-field-locked-note span {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ============================================================
   TableSpreadsheet — Airtable-style row editor on /studio/schema.
   Click cell to edit, Tab/Enter for navigation, auto-save draft,
   "Push to live server" when there's a service token.

   Design intent: a non-technical user (mom making her first
   recipe app) should be able to add and edit rows without ever
   thinking the words "INSERT", "UPDATE", or "primary key".
   Engineers see the same surface — keyboard-driven, type-aware
   inputs, real persistence — without it feeling toy.
   ============================================================ */
.ts-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ssms-line, var(--line));
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.16);
}

.ts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
  flex-wrap: wrap;
}
.ts-toolbar-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.ts-toolbar-right { display: flex; align-items: center; gap: 12px; }
.ts-table-name {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -0.012em;
}
.ts-row-count {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.ts-row-count em {
  font-style: normal;
  color: #f6c971;
}

.ts-grid-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.ts-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
}
.ts-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.34);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  font-weight: 500;
  white-space: nowrap;
}
.ts-grid thead th:last-child { border-right: none; }
.ts-th { display: flex; flex-direction: column; gap: 1px; }
.ts-th-name {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}
.ts-th-type {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.ts-th-req { color: #f6c971; font-weight: 600; }
.ts-th-pk {
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 999px;
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.06);
}
.ts-th-pii {
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  border: 1px solid rgba(246, 201, 113, 0.4);
  border-radius: 999px;
  color: #f6c971;
  background: rgba(246, 201, 113, 0.06);
}
.ts-th-actions { width: 36px; }

.ts-grid tbody tr {
  transition: background 90ms ease;
}
.ts-grid tbody tr:hover { background: rgba(255, 255, 255, 0.018); }
.ts-grid tbody tr.is-fresh { background: rgba(141, 242, 197, 0.04); }
.ts-grid tbody tr.is-dirty { box-shadow: inset 2px 0 0 #f6c971; }
.ts-grid tbody tr.is-fresh.is-dirty { box-shadow: inset 2px 0 0 var(--jewel); }

.ts-cell {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  cursor: text;
  vertical-align: middle;
  min-width: 120px;
  max-width: 380px;
  word-break: break-word;
}
.ts-cell:last-of-type { border-right: none; }
.ts-cell.is-editing {
  padding: 0;
  background: rgba(141, 242, 197, 0.06);
}
.ts-cell.is-missing {
  background: rgba(246, 201, 113, 0.05);
}
.ts-cell-value { color: var(--text); }
.ts-cell-bool {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.024);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.ts-cell-placeholder {
  color: var(--text-mute);
  font-style: italic;
  font-size: 12px;
}
.ts-cell-input {
  width: 100%;
  height: 100%;
  padding: 7px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
}
.ts-cell-input:focus { outline: 2px solid var(--jewel-dim); outline-offset: -2px; }

.ts-cell-actions {
  width: 36px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ts-row-remove {
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.ts-row-remove:hover {
  border-color: rgba(255, 138, 138, 0.45);
  color: #ff8a8a;
  background: rgba(255, 138, 138, 0.07);
}

.ts-empty {
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-mute);
}
.ts-empty strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--text);
}
.ts-empty span { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12px; }

.ts-add {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
  flex-wrap: wrap;
}
.ts-add-hint {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-mute);
}
.ts-add-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  color: var(--text-soft);
}

.ts-readonly-note {
  padding: 14px 16px;
  border-top: 1px dashed var(--line);
  background: rgba(246, 201, 113, 0.04);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
}
.ts-readonly-note code {
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  color: var(--text);
}

.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.ts-btn:hover:not(:disabled) { border-color: var(--text-mute); color: var(--text); }
.ts-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.ts-btn-primary {
  border-color: var(--jewel-dim);
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.06);
}
.ts-btn-primary:hover:not(:disabled) {
  border-color: var(--jewel);
  background: rgba(141, 242, 197, 0.12);
}
.ts-btn-add {
  border-style: dashed;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.ts-btn-add:hover { border-color: var(--jewel-dim); color: var(--jewel); }

.ts-save-status {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
}
.ts-save-saving { color: #e2d6a8; animation: ts-fade 1s ease-in-out infinite alternate; }
.ts-save-saved  { color: var(--jewel); }
.ts-save-error  { color: #ff8a8a; }
.ts-save-idle   { color: var(--text-mute); }
@keyframes ts-fade {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* Container override for the spreadsheet so it gets the full
   width of the work area and doesn't fight existing tabpanel
   padding. */
.ssms-tabpanel.ssms-tabpanel-spreadsheet {
  padding: 0;
  background: transparent;
  border: none;
}

/* Eject-page destructive-target reinforcement. The layout breadcrumb
   already shows the active server; this gives it extra weight on the
   one page where clicking the wrong button has irreversible
   consequences. */
.eject-target {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin: 0 0 22px;
  border: 1px solid rgba(255, 138, 138, 0.32);
  border-radius: 999px;
  background: rgba(255, 138, 138, 0.05);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.eject-target-key {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffb4b4;
}
.eject-target strong {
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.eject-target-meta {
  color: var(--text-mute);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Replay-page export-disabled cluster: button + visible reason text
   side-by-side. Replaces a tooltip-only disabled state so mobile +
   accessibility users actually see why the button can't be clicked. */
.replay-export-disabled {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.replay-export-reason {
  font-size: 12.5px;
  color: var(--text-mute);
  font-style: italic;
  max-width: 480px;
  line-height: 1.5;
}

.launch-error {
  grid-column: 1 / -1;
  border-radius: 10px;
  border: 1px solid rgba(255, 138, 138, 0.3);
  background: rgba(255, 138, 138, 0.08);
  padding: 12px 14px;
  font-size: 13px;
  color: #ffb4b4;
}
.launch-error.dashboard-alert,
.launch-success.dashboard-alert {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.launch-error.dashboard-alert strong {
  color: #ffd0d0;
}
.launch-success.dashboard-alert strong {
  color: var(--accent, #a0eabc);
}
.launch-error.dashboard-alert span {
  color: #ffc4c4;
}
.launch-success.dashboard-alert span {
  color: var(--text-soft);
}
.launch-error.dashboard-alert .dash-btn,
.launch-success.dashboard-alert .dash-btn {
  align-self: flex-start;
  margin-top: 2px;
}

.launch-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.launch-field.span-2 { grid-column: 1 / -1; }
.launch-field.inline label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-soft);
}
.launch-field.inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #a0eabc);
}

.launch-option {
  padding: 14px;
  border: 1px solid rgba(160, 234, 188, 0.22);
  border-radius: 8px;
  background: rgba(160, 234, 188, 0.045);
}
.launch-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.launch-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent, #a0eabc);
}

.launch-field > label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.launch-field.launch-option > label {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.launch-field input,
.launch-field select {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.15s ease;
}
.launch-field input:focus,
.launch-field select:focus {
  outline: none;
  border-color: var(--accent, #a0eabc);
}
.launch-field input:disabled,
.launch-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.launch-field .hint {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

.github-deploy-form {
  background: rgba(255, 255, 255, 0.018);
}

/* ============================================================
   Skeleton loaders — shown while dashboard pages stream in.
   Pulse animation matches the rhythm of a heartbeat so it feels
   alive, not stuck. Sizes mirror real content (eyebrow / h1 / lede /
   stat tile / detail row) to avoid layout shift on hydration.
   ============================================================ */
.dash-skeleton {
  display: block;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 70%
  );
  background-size: 220% 100%;
  border-radius: 5px;
  animation: dash-skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes dash-skeleton-pulse {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
.dash-skeleton-eyebrow      { width: 120px; height: 11px; margin-bottom: 12px; }
.dash-skeleton-h1           { width: 60%;   height: 44px; margin-bottom: 16px; max-width: 480px; }
.dash-skeleton-lede         { width: 100%;  height: 22px; margin-bottom: 6px;  max-width: 540px; }
.dash-skeleton-pill         { width: 80px;  height: 26px; border-radius: 999px; }
.dash-skeleton-stat-label   { width: 80px;  height: 11px; margin-bottom: 14px; }
.dash-skeleton-stat-value   { width: 64px;  height: 32px; margin-bottom: 8px; }
.dash-skeleton-stat-sub     { width: 110px; height: 11px; }
.dash-skeleton-section-title{ width: 200px; height: 26px; }
.dash-skeleton-section-meta { width: 140px; height: 13px; }
.dash-skeleton-key          { width: 110px; height: 11px; }
.dash-skeleton-val          { width: 80%;   height: 14px; max-width: 420px; }
.dash-skeleton-action       { width: 60px;  height: 14px; }

/* ============================================================
   ConfirmAction — single confirmation pattern for destructive /
   irreversible actions across the dashboard. Replaces five different
   ad-hoc form layouts.
   ============================================================ */
.confirm-action {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.confirm-action-desc {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.confirm-action-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.confirm-action-check:hover {
  border-color: var(--text-mute);
}
.confirm-action-check:has(input:checked) {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.confirm-action-check input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--jewel);
  cursor: pointer;
}
.confirm-action-row {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   SaveSchemaToRepoPanel — Studio's "commit to repo" UI on the
   /studio/diff page. Three-state: form, success, error.
   ============================================================ */
.save-schema-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  margin-bottom: 28px;
}
.save-schema-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.save-schema-summary > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.save-schema-meta-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.save-schema-summary code,
.save-schema-meta code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
}
.save-schema-mode {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.save-schema-mode legend {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
  padding: 0;
}
.save-schema-option {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.save-schema-option:hover { border-color: var(--text-mute); }
.save-schema-option.active {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.save-schema-option input { margin-top: 4px; accent-color: var(--jewel); }
.save-schema-option span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.save-schema-option strong {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}
.save-schema-option strong code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
}
.save-schema-option small {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.save-schema-option small code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text);
}
.save-schema-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.save-schema-hint {
  font-size: 13px;
  color: var(--text-soft);
  flex: 1 1 200px;
}
.save-schema-hint a {
  color: var(--jewel);
  text-decoration: none;
}
.save-schema-hint a:hover { text-decoration: underline; }
.save-schema-error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 138, 138, 0.4);
  border-radius: 10px;
  background: rgba(255, 138, 138, 0.06);
  color: #ffcfcf;
  font-size: 13px;
  line-height: 1.5;
}
.save-schema-error-cta {
  color: var(--jewel);
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}
.save-schema-error-cta:hover { text-decoration: underline; }

.save-schema-success {
  border-color: var(--jewel-dim);
  background:
    radial-gradient(ellipse at top right, rgba(141, 242, 197, 0.06), transparent 60%),
    rgba(141, 242, 197, 0.03);
}
.save-schema-headline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.save-schema-headline > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--jewel);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.save-schema-headline strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.3;
}
.save-schema-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.save-schema-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.save-schema-meta a {
  color: var(--jewel);
  text-decoration: none;
}
.save-schema-meta a:hover { text-decoration: underline; }
.save-schema-next {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.save-schema-next code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
}

/* ============================================================
   Studio sync status — banner shown at the top of Studio pages
   that explains in plain English what currently syncs to the live
   server and what stays Studio-side. Replaces the implicit "Studio
   = live database" expectation with an honest split.
   ============================================================ */
.studio-sync {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.012);
}
.studio-sync.studio-sync-ok {
  border-color: var(--jewel-dim);
  background:
    radial-gradient(ellipse at top right, rgba(141, 242, 197, 0.06), transparent 60%),
    rgba(141, 242, 197, 0.02);
}
.studio-sync.studio-sync-warn {
  border-color: rgba(246, 201, 113, 0.3);
  background:
    radial-gradient(ellipse at top right, rgba(246, 201, 113, 0.06), transparent 60%),
    rgba(246, 201, 113, 0.02);
}
.studio-sync.studio-sync-wait {
  border-color: rgba(226, 214, 168, 0.3);
  background: rgba(226, 214, 168, 0.02);
}
.studio-sync.studio-sync-muted { border-color: var(--line); }
.studio-sync-head {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.studio-sync-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--text-soft);
}
.studio-sync-ok .studio-sync-dot {
  background: var(--jewel);
  box-shadow: 0 0 8px rgba(141, 242, 197, 0.6);
  animation: studio-sync-pulse 2.4s ease-in-out infinite;
}
.studio-sync-warn .studio-sync-dot { background: #f6c971; }
.studio-sync-wait .studio-sync-dot {
  background: #e2d6a8;
  animation: studio-sync-blink 1.6s ease-in-out infinite;
}
@keyframes studio-sync-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(141, 242, 197, 0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(141, 242, 197, 0); }
}
@keyframes studio-sync-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.studio-sync-head-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.studio-sync-head-body strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.2;
}
.studio-sync-head-body span {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.studio-sync-head-body code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
  border: 1px solid var(--jewel-dim);
}
.studio-sync-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid var(--jewel-dim);
  border-radius: 7px;
  background: rgba(141, 242, 197, 0.08);
  color: var(--jewel);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}
.studio-sync-cta:hover {
  background: rgba(141, 242, 197, 0.14);
}
.studio-sync-details > summary {
  cursor: pointer;
  padding: 6px 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.studio-sync-details[open] > summary { color: var(--text); }
.studio-sync-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
}
@media (max-width: 720px) {
  .studio-sync-grid { grid-template-columns: 1fr; }
}
.studio-sync-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.studio-sync-col-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.studio-sync-col-head.ok   { color: var(--jewel); }
.studio-sync-col-head.wait { color: #e2d6a8; }
.studio-sync-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.studio-sync-col li {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.studio-sync-col li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-mute);
}

/* ============================================================
   Server page tab strip — Overview / GitHub deploy / Operations
   ============================================================ */
.server-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  overflow-x: auto;
}
.server-tab {
  flex: 1 1 auto;
  min-width: max-content;
  padding: 10px 16px;
  border-radius: 7px;
  text-align: center;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 13.5px;
  letter-spacing: -0.005em;
  transition: background 0.15s, color 0.15s;
}
.server-tab:hover { background: rgba(255, 255, 255, 0.025); color: var(--text); }
.server-tab.active {
  background: rgba(141, 242, 197, 0.10);
  color: var(--jewel);
}

/* ============================================================
   ⌘K Command palette — global jump-to-anything modal on the
   dashboard. Keyboard-first: arrow keys navigate, Enter opens,
   Esc closes. Triggered via Cmd/Ctrl+K (and / when not typing).
   ============================================================ */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 12, 12, 0.62);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 16px 16px;
  animation: cmdk-fade 0.12s ease-out;
}
@keyframes cmdk-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cmdk-modal {
  width: 100%;
  max-width: 580px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: cmdk-slide 0.16s ease-out;
}
@keyframes cmdk-slide {
  from { transform: translateY(-4px); opacity: 0.4; }
  to   { transform: translateY(0); opacity: 1; }
}
.cmdk-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
}
.cmdk-search-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.02);
}
.cmdk-search input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 16px;
  padding: 4px 0;
}
.cmdk-search input::placeholder { color: var(--text-mute); }
.cmdk-results {
  max-height: 56vh;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cmdk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  color: var(--text);
  transition: background 0.1s;
}
.cmdk-row:hover,
.cmdk-row.active {
  background: rgba(141, 242, 197, 0.08);
}
.cmdk-row-label { font-size: 14px; color: var(--text); }
.cmdk-row-group {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.cmdk-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-soft);
  font-size: 13.5px;
}
.cmdk-foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.cmdk-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  font-family: inherit;
  font-size: 10px;
  color: var(--text-soft);
  margin-right: 3px;
}

/* Billing portal action buttons — render as plain action-text inside the
   detail-row right slot so they read like links rather than buttons. */
.billing-portal-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.billing-portal-link:hover {
  color: var(--jewel);
}

/* OAuth buttons on /login — appear under the email form when GitHub /
   Google credentials are configured. Hidden when no provider is wired. */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0;
  color: var(--text-mute);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oauth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.oauth-button:hover {
  background: rgba(141, 242, 197, 0.04);
  border-color: var(--jewel-dim);
  transform: translateY(-1px);
}
.oauth-button-icon {
  flex-shrink: 0;
  color: var(--text);
}

/* Live log tail — opt-in polling stream above the static activity feed.
   Lights up green when on, shows last-check time + new-event count. */
.live-log-tail {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.live-log-tail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.live-log-tail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 0.04em;
}
.live-log-tail-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.live-log-tail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-mute);
  transition: background 0.15s, box-shadow 0.15s;
}
.live-log-tail-dot[data-on="true"] {
  background: var(--jewel);
  box-shadow: 0 0 8px rgba(141, 242, 197, 0.6);
  animation: live-tail-pulse 1.6s ease-in-out infinite;
}
@keyframes live-tail-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.live-log-tail-status {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.live-log-tail-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.live-log-tail-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(141, 242, 197, 0.02);
  font-size: 12.5px;
  animation: live-tail-rowin 0.3s ease-out;
}
.live-log-tail-row:last-child { border-bottom: none; }
@keyframes live-tail-rowin {
  from { opacity: 0; transform: translateY(-4px); background: rgba(141, 242, 197, 0.08); }
  to   { opacity: 1; transform: translateY(0); background: rgba(141, 242, 197, 0.02); }
}
.live-log-tail-time {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
}
.live-log-tail-kind {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  width: fit-content;
}
.live-log-tail-kind.kind-auth     { color: var(--jewel); background: rgba(141, 242, 197, 0.12); }
.live-log-tail-kind.kind-mutation { color: var(--jewel); background: rgba(141, 242, 197, 0.06); }
.live-log-tail-kind.kind-share    { color: var(--text); background: rgba(244, 242, 236, 0.05); }
.live-log-tail-kind.kind-policy   { color: #f6c971; background: rgba(246, 201, 113, 0.12); }
.live-log-tail-kind.kind-deploy   { color: var(--text-soft); background: rgba(141, 242, 197, 0.04); }
.live-log-tail-kind.kind-audit    { color: var(--text-mute); background: rgba(244, 242, 236, 0.03); }
.live-log-tail-msg { color: var(--text); line-height: 1.5; word-break: break-word; }
.live-log-tail-actor {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  color: var(--text-mute);
}
@media (max-width: 720px) {
  .live-log-tail-row { grid-template-columns: 70px 70px 1fr; }
  .live-log-tail-actor { grid-column: 1 / -1; text-align: left; }
}

/* Server-page live metrics tiles — CPU / memory / bandwidth from DO
   Monitoring, with sparkline of the last 24h underneath each value. */
.server-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.server-metric-tile {
  background: var(--ink);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.server-metric-tile.server-metric-warn { background: rgba(246, 201, 113, 0.04); }
.server-metric-label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.server-metric-value {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.server-metric-warn .server-metric-value { color: #f6c971; }
.server-metric-unit {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 14px;
  color: var(--text-mute);
  margin-left: 4px;
}
.server-metric-spark { height: 32px; }

.server-metrics-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.server-metrics-empty strong { color: var(--text); font-size: 15px; }
.server-metrics-empty span { color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.server-metrics-empty code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}

/* Custom-domain in-flight status cards — show "waiting for DNS" /
   "verified · waiting for cert" / "needs attention" between the request
   and the cert landing. Lives above the form on the Domain page. */
.domain-pending-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.domain-pending {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.012);
}
.domain-pending-requested { border-color: rgba(226, 214, 168, 0.3); background: rgba(226, 214, 168, 0.04); }
.domain-pending-verified  { border-color: var(--jewel-dim);          background: rgba(141, 242, 197, 0.05); }
.domain-pending-failed    { border-color: rgba(255, 138, 138, 0.4);  background: rgba(255, 138, 138, 0.05); }
.domain-pending-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.domain-pending-head code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13.5px;
  color: var(--text);
}
.domain-pending p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ============================================================
   Custom-domain in-app form on the Domain page. Replaces the
   mailto-only flow with a real submission that writes an audit
   event and acknowledges receipt.
   ============================================================ */
.custom-domain-form {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.custom-domain-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.custom-domain-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.custom-domain-row label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.custom-domain-row label .hint.inline {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  color: var(--text-mute);
  margin-left: 4px;
}
.custom-domain-row input,
.custom-domain-row textarea {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.custom-domain-row input:focus,
.custom-domain-row textarea:focus {
  outline: none;
  border-color: var(--jewel-dim);
  box-shadow: 0 0 0 1px var(--jewel-dim);
}
.custom-domain-row .hint code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--jewel);
  padding: 1px 4px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
}
.custom-domain-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.custom-domain-note {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 200px;
}
.custom-domain-success,
.custom-domain-error {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.custom-domain-success {
  border: 1px solid var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.custom-domain-success strong { color: var(--text); font-weight: 500; }
.custom-domain-success > span { color: var(--text-soft); }
.custom-domain-success-next {
  margin-top: 4px;
  color: var(--text);
  font-size: 13px;
}
.custom-domain-success-next code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
  font-size: 12px;
}

/* DNS challenge records returned after a custom-domain submission. Two
   stacked cards (A + TXT) with copy-buttons and an under-line hint
   explaining what each record does. */
.dns-records {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.dns-record {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}
.dns-record.dns-record-pending {
  border-style: dashed;
  border-color: rgba(226, 214, 168, 0.3);
  background: rgba(226, 214, 168, 0.04);
}
.dns-record-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dns-record-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--jewel-dim);
  background: rgba(141, 242, 197, 0.08);
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dns-record-name {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  flex: 1;
}
.dns-record-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.dns-record-value {
  flex: 1;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  word-break: break-all;
}
.dns-record-hint {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
}
.dns-record-hint code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--jewel);
}
@media (max-width: 720px) {
  .dns-record-meta { gap: 8px; }
  .dns-record-name { width: 100%; flex: none; font-size: 12px; }
}
.custom-domain-error {
  border: 1px solid rgba(255, 138, 138, 0.4);
  background: rgba(255, 138, 138, 0.05);
  color: #ffb4b4;
}
.custom-domain-error strong { color: #ffcfcf; }

/* ============================================================
   ProvisioningPhases — four-step progress list shown on the
   server page during/after a launch. Each row lights up as the
   live signals satisfy that phase's precondition.
   ============================================================ */
.provisioning-phases {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.provisioning-phase {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  transition: border-color 0.2s, background 0.2s;
}
.provisioning-phase.done {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.provisioning-phase.active {
  border-color: rgba(226, 214, 168, 0.35);
  background: rgba(226, 214, 168, 0.04);
  animation: provisioning-phase-pulse 2s ease-in-out infinite;
}
.provisioning-phase.fail {
  border-color: rgba(255, 138, 138, 0.4);
  background: rgba(255, 138, 138, 0.04);
}
.provisioning-phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
}
.provisioning-phase.done .provisioning-phase-icon {
  border-color: var(--jewel);
  background: var(--jewel);
  color: var(--ink);
}
.provisioning-phase.active .provisioning-phase-icon {
  border-color: rgba(226, 214, 168, 0.6);
  color: #e2d6a8;
}
.provisioning-phase.fail .provisioning-phase-icon {
  border-color: rgba(255, 138, 138, 0.6);
  color: #ff8a8a;
}
.provisioning-phase-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.provisioning-phase-body strong {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
}
.provisioning-phase-body span {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
}
/* Cycling copy under the active phase — fade each new message in so the
   change reads as motion, not a flicker. The `key` on the span flips
   every cycle so React remounts and replays the animation cleanly. */
.provisioning-phase-active-copy {
  display: inline-block;
  color: var(--text);
  animation: provisioning-active-fade 0.5s ease-out;
}
@keyframes provisioning-active-fade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes provisioning-phase-pulse {
  0%, 100% { background-color: rgba(226, 214, 168, 0.04); }
  50%      { background-color: rgba(226, 214, 168, 0.10); }
}

/* ============================================================
   Event-kind breakdown bar on the logs page. Stacked horizontal
   bar where each segment is one event kind, sized by its count.
   Color-coded so users see at a glance whether the window is
   auth-heavy, mutation-heavy, policy-denial-heavy, etc.
   ============================================================ */
.event-kind-section { margin-bottom: 24px; }
.event-kind-bar {
  display: flex;
  width: 100%;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.event-kind-bar-segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 0 12px;
  border-right: 1px solid rgba(0, 0, 0, 0.32);
  transition: filter 0.15s;
  cursor: default;
}
.event-kind-bar-segment:last-child { border-right: none; }
.event-kind-bar-segment:hover { filter: brightness(1.15); }
.event-kind-bar-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.event-kind-bar-label strong { color: var(--text); font-weight: 500; }
.event-kind-bar-label span { color: var(--text-soft); font-size: 10.5px; }
.event-kind-bar-segment.kind-auth     { background: rgba(141, 242, 197, 0.18); }
.event-kind-bar-segment.kind-mutation { background: rgba(141, 242, 197, 0.10); }
.event-kind-bar-segment.kind-share    { background: rgba(141, 242, 197, 0.06); }
.event-kind-bar-segment.kind-policy   { background: rgba(246, 201, 113, 0.18); }
.event-kind-bar-segment.kind-deploy   { background: rgba(141, 242, 197, 0.04); }
.event-kind-bar-segment.kind-audit    { background: rgba(244, 242, 236, 0.04); }

/* Tighter labels when a segment is very small. */
.event-kind-bar-segment[style*="flex-grow: 1"]:not(:hover) .event-kind-bar-label span { display: none; }

/* ============================================================
   Sparkline + stat-tile mini chart slot.
   ============================================================ */
.sparkline {
  display: block;
  width: 100%;
  margin-top: 8px;
  overflow: visible;
}
.dash-stat-spark {
  margin-top: 10px;
  height: 32px;
  display: flex;
  align-items: stretch;
}
.dash-stat-spark .sparkline { height: 32px; }

/* ============================================================
   Failed-server diagnostic card — shown above the delete-confirm
   on the server page so users have something actionable when a
   provisioning attempt fails. Replaces the previous opaque "the
   app never came online" red banner.
   ============================================================ */
.failed-diagnostic {
  border: 1px solid rgba(255, 138, 138, 0.35);
  border-radius: 12px;
  background: rgba(255, 138, 138, 0.04);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.failed-diagnostic-head { display: flex; flex-direction: column; gap: 4px; }
.failed-diagnostic-head strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: #ffcfcf;
  letter-spacing: -0.01em;
}
.failed-diagnostic-head span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}
.failed-diagnostic-checks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.failed-diagnostic-checks li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.failed-diagnostic-check-icon {
  color: #ff8a8a;
  font-size: 14px;
  text-align: center;
  line-height: 1;
}
.failed-diagnostic-events {
  margin-top: 6px;
}
.failed-diagnostic-events > summary {
  cursor: pointer;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 6px 0;
}
.failed-diagnostic-events[open] > summary { color: var(--text); }
.failed-diagnostic-events pre {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* ============================================================
   InviteForm success card — shown after a successful invite so the
   user has something they can copy and use (email, accept URL) plus
   a clear "what to do next" instead of a single-line message.
   ============================================================ */
.invite-success {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--jewel-dim);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at top right, rgba(160, 234, 188, 0.06), transparent 60%),
    rgba(160, 234, 188, 0.03);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.invite-success-head { display: flex; flex-direction: column; gap: 4px; }
.invite-success-head strong { color: var(--text); font-size: 16px; font-weight: 500; }
.invite-success-head span { color: var(--text-soft); font-size: 13px; }
.invite-success-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.invite-success-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: center;
}
.invite-success-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.invite-success-val code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
}
.invite-success-next {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.invite-success-next code {
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
}
@media (max-width: 720px) {
  .invite-success-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   NextStepsBanner — onboarding card shown for 7 days after launch.
   ============================================================ */
.next-steps {
  border: 1px solid var(--jewel-dim, rgba(160, 234, 188, 0.30));
  border-radius: 14px;
  padding: 22px 24px;
  background:
    radial-gradient(ellipse at top right, rgba(160, 234, 188, 0.06), transparent 60%),
    rgba(160, 234, 188, 0.03);
  margin-bottom: 28px;
}
.next-steps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.next-steps-eyebrow {
  margin: 0 0 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
}
.next-steps-head h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text);
}
.next-steps-dismiss {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.next-steps-dismiss:hover {
  border-color: var(--text-mute);
  color: var(--text);
}
.next-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.next-steps-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.next-steps-item.done {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.next-steps-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--jewel-dim);
  background: rgba(160, 234, 188, 0.06);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--jewel);
}
.next-steps-item.done .next-steps-num {
  background: var(--jewel);
  color: var(--ink);
  border-color: var(--jewel);
}
.next-steps-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.next-steps-body strong {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
}
.next-steps-body span {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .next-steps { padding: 18px 18px; }
  .next-steps-item {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .next-steps-item .dash-btn { grid-column: 1 / -1; justify-self: start; }
}

/* ============================================================
   Mobile + responsive polish
   ============================================================ */

/* Status pill row in page headers wraps cleanly on phones instead of
   stretching the header height. */
@media (max-width: 720px) {
  .dash-head .right {
    width: 100%;
    justify-content: flex-start;
  }
  .dash-head .right .status,
  .dash-head .right .dash-btn {
    flex: 0 1 auto;
  }
}

/* dash-detail-row already collapses to single column under 720px;
   tighten the row gap so labels don't sit awkwardly far from values. */
@media (max-width: 720px) {
  .dash-detail-row {
    gap: 4px;
    padding: 12px 14px;
  }
  .dash-detail-row .dash-detail-action {
    align-self: flex-start;
    margin-top: 2px;
  }
}

/* Belt-and-suspenders: any table inside .dash-table-wrap can scroll
   horizontally if its columns exceed the container, even if the table
   wasn't explicitly tagged .dash-table-responsive. */
.dash-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive table column hiding. Tables tagged with .dash-table-responsive
   can mark non-essential columns with .dash-col-secondary and they'll be
   hidden below 900px. The visible subset becomes "the basics — when, what,
   status" with full detail returning on wider screens. */
@media (max-width: 900px) {
  .dash-table-responsive th.dash-col-secondary,
  .dash-table-responsive td.dash-col-secondary {
    display: none;
  }
}

/* Replay page tool disclosures — three of the four workbench panels are
   collapsed by default so the timeline + Replay detail above stay the
   focus. Each summary keeps the numbered tag + plain-language name so the
   user can scan what's available before opening one. */
.replay-tool-disclosure {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;
}
.replay-tool-disclosure > summary {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  cursor: pointer;
  padding: 14px 18px;
  list-style: none;
}
.replay-tool-disclosure > summary::-webkit-details-marker { display: none; }
.replay-tool-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
  background: rgba(141, 242, 197, 0.03);
}
.replay-tool-disclosure-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--jewel);
  text-align: center;
  padding: 4px 0;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.replay-tool-disclosure-name {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.2;
}
.replay-tool-disclosure-hint {
  font-size: 12px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-align: right;
}
@media (max-width: 720px) {
  .replay-tool-disclosure > summary {
    grid-template-columns: 36px 1fr;
  }
  .replay-tool-disclosure-hint { display: none; }
}
/* Inner panel keeps its own padding/margin since it was designed as a
   stand-alone section. We just contain it inside the disclosure body. */
.replay-tool-disclosure[open] > .dash-section,
.replay-tool-disclosure[open] > section {
  margin-top: 0;
}

/* ============================================================
   /studio/schema — the rebuild.
   Cards-grid for the index view, single-detail-page for a table,
   spreadsheet view for rows. Shared by demo + real-customer paths.
   ============================================================ */

/* Filter input on the index view. */
.schema-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.schema-search label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.schema-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
}

/* Tables grid. */
.schema-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}

.schema-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.014);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  min-height: 260px;
}
.schema-card:hover {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
  transform: translateY(-1px);
}
.schema-card-imported {
  border-color: rgba(246, 201, 113, 0.3);
  background: rgba(246, 201, 113, 0.03);
}
.schema-card-imported:hover {
  border-color: rgba(246, 201, 113, 0.55);
  background: rgba(246, 201, 113, 0.06);
}

.schema-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.schema-card-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.schema-card-title strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.15;
}
.schema-card-title code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.schema-card-badge {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.02);
}
.schema-card-badge-live { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.06); }
.schema-card-badge-imported { color: #f6c971; border-color: rgba(246, 201, 113, 0.3); background: rgba(246, 201, 113, 0.06); }
.schema-card-badge-demo { color: var(--text-mute); }

.schema-card-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.schema-card-fields li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.schema-card-fields li:last-child { border-bottom: none; }
.schema-card-fields li.is-pii .schema-card-field-name { color: #f6c971; }
.schema-card-field-name {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.schema-card-field-type {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-soft);
}
.schema-card-field-flag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-soft);
}
.schema-card-field-flag.pii { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); }
.schema-card-fields-more {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.schema-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.schema-card-foot-pii { color: #f6c971; }
.schema-card-open { margin-left: auto; color: var(--jewel); }

/* "Add a table" card. */
.schema-card-add {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  border-style: dashed;
  background: rgba(141, 242, 197, 0.02);
}
.schema-card-add:hover {
  background: rgba(141, 242, 197, 0.06);
}
.schema-card-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--jewel-dim);
  background: rgba(141, 242, 197, 0.08);
  color: var(--jewel);
  font-size: 22px;
  line-height: 1;
}
.schema-card-add strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
}
.schema-card-add span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Empty hero — no tables yet. */
.schema-empty-hero {
  padding: 40px 44px;
  border: 1px solid var(--jewel-dim);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at top right, rgba(141, 242, 197, 0.08), transparent 60%),
    rgba(141, 242, 197, 0.02);
  margin-bottom: 28px;
}
.schema-empty-hero-head {
  margin-bottom: 28px;
  max-width: 720px;
}
.schema-empty-hero-eyebrow {
  margin: 0 0 12px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
}
.schema-empty-hero-head h2 {
  margin: 0 0 14px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text);
}
.schema-empty-hero-head p {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-mute);
  letter-spacing: -0.005em;
}
.schema-empty-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.schema-empty-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.schema-empty-option:hover { border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.04); }
.schema-empty-option-primary {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.05);
}
.schema-empty-option-soon {
  border-style: dashed;
  cursor: default;
}
.schema-empty-option-soon:hover {
  border-color: var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.schema-empty-option-eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.schema-empty-option-primary .schema-empty-option-eyebrow { color: var(--jewel); }
.schema-empty-option strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.2;
}
.schema-empty-option > span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.schema-empty-option-cta {
  font-size: 13px;
  color: var(--jewel);
  font-weight: 500;
  margin-top: 4px;
}
.schema-empty-option-cta-muted {
  font-size: 13px;
  color: var(--text-mute);
  font-style: italic;
}
.schema-empty-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* Detail view — header badge, tab strip, fields, data grid, rules. */
.schema-detail-badge {
  display: inline-block;
  margin-left: 12px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jewel);
  padding: 3px 10px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
  vertical-align: middle;
}

.schema-tab-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  align-self: flex-start;
}
.schema-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 13.5px;
  transition: background 0.15s, color 0.15s;
}
.schema-tab:hover { background: rgba(255, 255, 255, 0.025); color: var(--text); }
.schema-tab.active { background: rgba(141, 242, 197, 0.10); color: var(--jewel); }
.schema-tab-count {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}
.schema-tab.active .schema-tab-count { color: var(--jewel); background: rgba(141, 242, 197, 0.08); }

/* Fields tab. */
.schema-fields-head { margin-bottom: 14px; }
.schema-fields-meta {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 640px;
}
.schema-fields {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.schema-fields-headrow,
.schema-field-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 18px;
  padding: 12px 18px;
  align-items: center;
}
.schema-fields-headrow {
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.schema-field-row {
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.schema-field-row:last-child { border-bottom: none; }
.schema-field-name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.schema-field-name strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.schema-field-type {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.schema-field-type-friendly { color: var(--text); }
.schema-field-type-tech code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
}
.schema-field-notes {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.schema-field-flag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--text-soft);
}
.schema-field-flag.pk { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.06); }
.schema-field-flag.required { color: var(--text); border-color: var(--text-mute); }
.schema-field-flag.pii { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.06); }
.schema-field-flag.muted { color: var(--text-mute); border-color: var(--line); }

@media (max-width: 720px) {
  .schema-fields-headrow,
  .schema-field-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Data tab — read-only spreadsheet preview. */
.schema-data-meta {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.schema-data-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}
.schema-data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.schema-data-table th,
.schema-data-table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schema-data-table th {
  background: rgba(0, 0, 0, 0.32);
  color: var(--text-soft);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.schema-data-table td code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
}
.schema-data-table tr:last-child td { border-bottom: none; }

/* Rules tab. */
.schema-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.schema-rule-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.schema-rule-row strong { display: block; color: var(--text); margin-bottom: 4px; font-weight: 500; font-size: 14px; }
.schema-rule-row > div span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.schema-rule-row code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.schema-rule-action {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--jewel);
  text-decoration: none;
}
.schema-rule-action:hover { text-decoration: underline; }

/* Importer source banner — sits above the CSV importer to tell users
   where the "existing tables" dropdown values came from. Without it,
   picking "Replace rows" felt like a footgun. */
.importer-source {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
}
.importer-source strong { color: var(--text); font-weight: 500; }
.importer-source > span { color: var(--text-soft); }
.importer-source code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.importer-source-ok {
  border: 1px solid var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.importer-source-warn {
  border: 1px solid rgba(246, 201, 113, 0.35);
  background: rgba(246, 201, 113, 0.04);
}
.importer-source-cta {
  align-self: flex-start;
  color: var(--jewel);
  font-weight: 500;
  text-decoration: none;
  font-size: 13px;
  margin-top: 2px;
}
.importer-source-cta:hover { text-decoration: underline; }

/* "How tables work" disclosure on the index view. */
.schema-explainer {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.schema-explainer > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.schema-explainer[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.schema-explainer-body {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.schema-explainer-body > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.schema-explainer-body strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--text);
}
.schema-explainer-body span {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ============================================================
   Action designer — the form-driven page in /studio/functions.
   Two-column layout: form on the left, live source preview on
   the right. Reuses .ssms-* shell from the schema page.
   ============================================================ */
.action-designer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  padding: 0;
}
@media (max-width: 1100px) {
  .action-designer { grid-template-columns: 1fr; }
}

.action-designer-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.action-designer-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: none;
  margin: 0;
  padding: 0;
}
.action-designer-form fieldset:disabled { opacity: 0.78; }

.action-designer-readonly {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(246, 201, 113, 0.04);
}
.action-designer-readonly strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
}
.action-designer-readonly span {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.action-designer-readonly code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.action-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.action-field-head { display: flex; flex-direction: column; gap: 2px; }
.action-field-head strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.action-field-head span {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.action-field-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-field-body input[type="text"],
.action-field-body select,
.action-field-body textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  outline: none;
}
.action-field-body input[type="text"]:focus,
.action-field-body select:focus,
.action-field-body textarea:focus {
  border-color: var(--jewel-dim);
  background: rgba(0, 0, 0, 0.32);
}

.action-designer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.action-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.action-pill:hover { border-color: var(--text-mute); color: var(--text); }
.action-pill.is-active {
  border-color: var(--jewel-dim);
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.08);
}

.action-designer-params {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-designer-empty {
  font-size: 12.5px;
  color: var(--text-mute);
  font-style: italic;
  margin: 0;
}
.action-designer-param-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
@media (max-width: 720px) {
  .action-designer-param-row { grid-template-columns: 1fr 1fr; }
}
.action-designer-param-name { /* uses default input style */ }
.action-designer-param-type { /* uses default select style */ }
.action-designer-param-req {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  cursor: pointer;
}
.action-designer-param-req input[type="checkbox"] {
  accent-color: var(--jewel);
  width: 14px;
  height: 14px;
}
.action-designer-param-remove {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.action-designer-param-remove:hover {
  border-color: #ff8a8a;
  color: #ff8a8a;
  background: rgba(255, 138, 138, 0.06);
}
.action-designer-add {
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.action-designer-add:hover { border-color: var(--jewel-dim); color: var(--jewel); }

.action-designer-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.action-template-btn {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease;
}
.action-template-btn:hover { border-color: var(--jewel-dim); color: var(--jewel); }

.action-designer-body {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px !important;
  line-height: 1.55;
  resize: vertical;
  min-height: 220px;
}

.action-designer-preview {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
  position: sticky;
  top: 18px;
  align-self: start;
  max-height: calc(100vh - 60px);
}
.action-designer-preview header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}
.action-designer-preview header strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.action-designer-preview header span {
  font-size: 11.5px;
  color: var(--text-mute);
}
.action-designer-preview header code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.action-designer-preview pre {
  margin: 0;
  padding: 14px;
  overflow: auto;
  flex: 1;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-soft);
  background: rgba(0, 0, 0, 0.28);
  white-space: pre-wrap;
  word-break: break-all;
}
.action-designer-preview pre code {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
}
.action-designer-preview footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}
.action-designer-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--jewel-dim);
  border-radius: 8px;
  background: rgba(141, 242, 197, 0.08);
  color: var(--jewel);
  text-decoration: none;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 120ms ease, background 120ms ease;
}
.action-designer-save:hover { border-color: var(--jewel); background: rgba(141, 242, 197, 0.14); }
.action-designer-save[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--line);
  color: var(--text-mute);
  background: transparent;
}
.action-designer-save-hint {
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.5;
}

/* Template grid for the empty state */
.actions-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.actions-template-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.actions-template-card:hover {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
  transform: translateY(-1px);
}
.actions-template-blank { border-style: dashed; }
.actions-template-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 16px;
  margin-bottom: 4px;
}
.actions-template-card strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.012em;
}
.actions-template-card > span:not(.actions-template-icon) {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.actions-template-card code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.action-field.has-error { border-color: rgba(255, 138, 138, 0.4); background: rgba(255, 138, 138, 0.025); }
.action-field-error {
  margin: 0;
  font-size: 12px;
  color: #ff8a8a;
  letter-spacing: 0.02em;
}

.action-designer-readonly-link {
  align-self: flex-start;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--jewel);
  text-decoration: none;
  margin-top: 4px;
}
.action-designer-readonly-link:hover { text-decoration: underline; }

.action-designer-submit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}
.action-designer-form-error {
  font-size: 12px;
  color: #ff8a8a;
  font-style: italic;
}
.action-designer-form-ok {
  font-size: 12px;
  color: var(--jewel);
}
.action-designer-confirm-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--text-soft);
}

/* Save-actions-to-repo panel */
.save-actions-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 24px;
  border-top: 1px solid var(--ssms-line);
  background: rgba(255, 255, 255, 0.012);
}
.save-actions-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
.save-actions-eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 4px;
}
.save-actions-head h3 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 6px;
}
.save-actions-head h3 em { font-style: italic; color: var(--jewel); }
.save-actions-lead {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 720px;
  margin: 0;
}
.save-actions-lead code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.save-actions-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--text-soft);
}
.save-actions-pill-ok { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.06); }
.save-actions-pill-warn { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.06); }
.save-actions-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.save-actions-dot-ok { background: var(--jewel); box-shadow: 0 0 8px rgba(141, 242, 197, 0.45); }
.save-actions-dot-warn { background: #f6c971; box-shadow: 0 0 8px rgba(246, 201, 113, 0.4); }

.save-actions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.save-actions-help {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-mute);
  font-style: italic;
}
.save-actions-help a { color: var(--jewel); text-decoration: none; }
.save-actions-help a:hover { text-decoration: underline; }

/* Explorer callout when repo can't be read */
.actions-explorer-callout {
  margin: 10px 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(246, 201, 113, 0.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.actions-explorer-callout strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #f6c971;
  text-transform: uppercase;
}
.actions-explorer-callout span {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}
.actions-explorer-callout span code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.actions-explorer-callout a {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--jewel);
  text-decoration: none;
  margin-top: 2px;
}
.actions-explorer-callout a:hover { text-decoration: underline; }

/* ============================================================
   ServerScopeBreadcrumb — the always-visible "working on
   [server]" banner above every dashboard page. Makes the
   active server unambiguous and lets multi-server accounts
   one-click switch without losing query params.
   ============================================================ */
.scope-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.012);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  flex-wrap: wrap;
}
.scope-bar-ok { border-color: var(--jewel-dim); }
.scope-bar-wait { border-color: rgba(226, 214, 168, 0.35); }
.scope-bar-muted { border-color: var(--line); opacity: 0.85; }

.scope-bar-key {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  font-size: 10px;
  flex-shrink: 0;
}
.scope-bar-server {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.scope-bar-server strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scope-bar-server > span:last-of-type {
  font-size: 10.5px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.scope-bar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-mute);
  flex-shrink: 0;
}
.scope-bar-dot-ok { background: var(--jewel); box-shadow: 0 0 6px rgba(141, 242, 197, 0.5); }
.scope-bar-dot-wait {
  background: #e2d6a8;
  animation: scope-blink 1.6s ease-in-out infinite;
}
.scope-bar-dot-muted { background: var(--text-mute); }
@keyframes scope-blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.scope-bar-location {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.scope-bar-tag {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* Multi-server: the entire bar becomes a clickable summary that
   expands a one-click switcher menu. */
.scope-bar-multi { padding: 0; flex-direction: column; align-items: stretch; }
.scope-bar-multi > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  flex-wrap: wrap;
}
.scope-bar-multi > summary::-webkit-details-marker { display: none; }
.scope-bar-multi > summary::marker { content: ""; }
.scope-bar-multi > summary:hover { background: rgba(141, 242, 197, 0.04); }
.scope-bar-switch-cta {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--jewel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 10px;
  border: 1px solid var(--jewel-dim);
  border-radius: 999px;
  background: rgba(141, 242, 197, 0.06);
  flex-shrink: 0;
}
.scope-bar-multi[open] > summary { background: rgba(141, 242, 197, 0.04); }
.scope-bar-menu {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.scope-bar-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: var(--text-soft);
  transition: background 120ms ease;
}
.scope-bar-option:last-child { border-bottom: none; }
.scope-bar-option:hover { background: rgba(141, 242, 197, 0.04); color: var(--text); }
.scope-bar-option.is-active { background: rgba(141, 242, 197, 0.08); color: var(--jewel); }
.scope-bar-option strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0;
}
.scope-bar-option.is-active strong { color: var(--jewel); }
.scope-bar-option > span {
  font-size: 10.5px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.scope-bar-account-note {
  margin: 0;
  padding: 10px 16px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-soft);
  border-top: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.012);
  letter-spacing: 0;
}

/* ============================================================
   RuntimeTokenPanel — the Studio↔runtime connection observer
   on /dashboard/secrets. Shows whether the deploy-time token
   relay actually worked, lets the user re-probe, and lets them
   rotate a new token without ejecting + relaunching.
   ============================================================ */
.rt-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.014);
  margin-bottom: 18px;
}
.rt-panel[data-tone="ok"] { border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.025); }
.rt-panel[data-tone="warn"] { border-color: rgba(246, 201, 113, 0.35); background: rgba(246, 201, 113, 0.025); }
.rt-panel[data-tone="wait"] { border-color: rgba(226, 214, 168, 0.3); }

.rt-panel-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
.rt-panel-head-text { min-width: 0; }
.rt-panel-eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 4px;
}
.rt-panel-head-text h3 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.2;
}
.rt-panel-head-text h3 em {
  font-style: italic;
  color: var(--jewel);
}
.rt-panel-lead {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
}
.rt-panel-lead code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.rt-panel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  white-space: nowrap;
}
.rt-panel-pill-ok { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.06); }
.rt-panel-pill-warn { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.06); }
.rt-panel-pill-wait { color: #e2d6a8; border-color: rgba(226, 214, 168, 0.4); }
.rt-panel-pill-muted { color: var(--text-mute); }

.rt-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-mute);
  flex-shrink: 0;
}
.rt-panel-dot-ok   { background: var(--jewel); box-shadow: 0 0 8px rgba(141, 242, 197, 0.45); }
.rt-panel-dot-warn { background: #f6c971; box-shadow: 0 0 8px rgba(246, 201, 113, 0.4); }
.rt-panel-dot-wait { background: #e2d6a8; animation: rt-blink 1.6s ease-in-out infinite; }
.rt-panel-dot-muted { background: var(--text-mute); }
@keyframes rt-blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.rt-panel-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 720px) { .rt-panel-meta { grid-template-columns: 1fr; } }
.rt-panel-meta > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rt-panel-meta-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.rt-panel-meta code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
}
.rt-panel-meta span:not(.rt-panel-meta-key) {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-panel-mono { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; }

.rt-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.rt-rotate-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rt-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
}
.rt-confirm input[type="checkbox"] {
  accent-color: var(--jewel);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.rt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.rt-btn:hover:not(:disabled) { border-color: var(--text-mute); color: var(--text); }
.rt-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rt-btn-primary {
  border-color: var(--jewel-dim);
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.04);
}
.rt-btn-primary:hover:not(:disabled) { border-color: var(--jewel); background: rgba(141, 242, 197, 0.10); }

.rt-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.rt-result-ok { border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.04); }
.rt-result-warn { border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.04); }
.rt-result strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--text);
}
.rt-result span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.rt-result span code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.rt-result-meta { color: var(--text-mute) !important; font-size: 11.5px !important; }
.rt-result-list {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rt-result-list li {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  word-break: break-all;
}

.rt-fallback-note {
  font-size: 12px;
  color: var(--text-mute);
  font-style: italic;
  flex: 1 0 100%;
  margin-top: 4px;
}

.rt-panel-details {
  border-top: 1px dashed var(--line);
  padding-top: 14px;
  margin-top: 4px;
}
.rt-panel-details > summary {
  cursor: pointer;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rt-panel-details > summary::before {
  content: "â–¸";
  display: inline-block;
  transition: transform 120ms ease;
  color: var(--text-mute);
}
.rt-panel-details[open] > summary::before { transform: rotate(90deg); }
.rt-panel-details > summary:hover { color: var(--text-soft); }
.rt-panel-details ol {
  margin: 12px 0 8px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rt-panel-details ol li {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.rt-panel-details ol li strong {
  color: var(--text);
  font-weight: 500;
}
.rt-panel-details ol li code,
.rt-panel-details > p code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.rt-panel-details > p {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.55;
  margin: 8px 0 0;
  font-style: italic;
}

/* ============================================================
   SSMS shell — the Schema page's Tables tab is rendered as a
   SQL Server Management Studio-style three-region layout:
   titlebar / object-explorer + work area / status bar.
   The visual density is intentionally tighter than the rest
   of Studio because this is the "tool" surface — engineers
   recognise the shape, non-tech users still get plain-English
   labels. See app/studio/schema/page.tsx for the structure.
   ============================================================ */

.ssms {
  --ssms-line: rgba(255, 255, 255, 0.08);
  --ssms-bg: rgba(255, 255, 255, 0.012);
  --ssms-bg-deep: rgba(0, 0, 0, 0.18);
  --ssms-row-hover: rgba(141, 242, 197, 0.05);
  --ssms-row-selected: rgba(141, 242, 197, 0.10);

  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--ssms-line);
  border-radius: 14px;
  background: var(--ssms-bg);
  overflow: hidden;
  margin-bottom: 32px;
  font-size: 13px;
}

/* Titlebar */
.ssms-title {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ssms-line);
  background: rgba(255, 255, 255, 0.018);
}
.ssms-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ssms-icon {
  font-size: 18px;
  color: var(--jewel);
  line-height: 1;
}
.ssms-title-stack { display: flex; flex-direction: column; min-width: 0; }
.ssms-title-stack strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.2;
}
.ssms-title-stack span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: lowercase;
}
.ssms-title-conn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--ssms-line);
  border-radius: 999px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}
.ssms-title-actions { display: flex; align-items: center; gap: 8px; }

.ssms-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-mute);
  flex-shrink: 0;
}
.ssms-dot-ok   { background: var(--jewel); box-shadow: 0 0 8px rgba(141, 242, 197, 0.45); }
.ssms-dot-warn { background: #f6c971; box-shadow: 0 0 8px rgba(246, 201, 113, 0.4); }
.ssms-dot-wait {
  background: #e2d6a8;
  animation: ssms-blink 1.6s ease-in-out infinite;
}
.ssms-dot-muted { background: var(--text-mute); }
@keyframes ssms-blink {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.ssms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ssms-line);
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.ssms-btn:hover { border-color: var(--text-mute); color: var(--text); }
.ssms-btn-primary {
  border-color: var(--jewel-dim);
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.04);
}
.ssms-btn-primary:hover { border-color: var(--jewel); background: rgba(141, 242, 197, 0.08); }
.ssms-btn-ghost { border-color: var(--ssms-line); }
.ssms-btn-small { padding: 4px 9px; font-size: 10px; }

/* Body — explorer + work area */
.ssms-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 540px;
  background: var(--ssms-bg-deep);
}
@media (max-width: 980px) {
  .ssms-body { grid-template-columns: 1fr; }
}

/* Object Explorer */
.ssms-explorer {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ssms-line);
  background: rgba(255, 255, 255, 0.014);
  min-height: 0;
}
.ssms-explorer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--ssms-line);
}
.ssms-explorer-head strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ssms-explorer-head span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
}
.ssms-explorer-filter {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ssms-line);
}
.ssms-explorer-filter input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--ssms-line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: 12px;
  outline: none;
}
.ssms-explorer-filter input:focus {
  border-color: var(--jewel-dim);
}
.ssms-explorer-tree {
  flex: 1;
  padding: 6px 0;
  overflow-y: auto;
  max-height: 70vh;
}

/* Tree nodes — branches use <details> for CSS-only collapse. */
.ssms-tree-branch { margin: 0; }
.ssms-tree-branch > summary,
.ssms-tree-leaf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  list-style: none;
  cursor: pointer;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 12.5px;
  line-height: 1.4;
}
.ssms-tree-branch > summary::-webkit-details-marker { display: none; }
.ssms-tree-branch > summary::marker { content: ""; }
.ssms-tree-branch > summary:hover,
.ssms-tree-leaf:hover { background: var(--ssms-row-hover); color: var(--text); }
.ssms-tree-summary.is-selected,
.ssms-tree-leaf.is-selected { background: var(--ssms-row-selected); color: var(--text); }

/* Twisty (▶ → ▼) — rotates when <details> is open. */
.ssms-tree-twisty {
  width: 10px;
  height: 10px;
  position: relative;
  flex-shrink: 0;
}
.ssms-tree-twisty::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--text-mute);
  transition: transform 120ms ease;
}
.ssms-tree-branch[open] > summary > .ssms-tree-twisty::before {
  transform: rotate(90deg) translateY(-2px) translateX(2px);
}
.ssms-tree-leaf .ssms-tree-twisty,
.ssms-tree-column .ssms-tree-twisty { display: none; }

.ssms-tree-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  flex-shrink: 0;
}
.ssms-tree-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
.ssms-tree-label strong {
  font-weight: 500;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ssms-tree-label span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ssms-tree-table-link {
  cursor: pointer;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.25;
}
.ssms-tree-table-link:hover strong { color: var(--jewel); }
.ssms-tree-table-link strong {
  max-width: 100%;
  flex-shrink: 1;
}
.ssms-tree-table-meta {
  max-width: 100%;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ssms-tree-badge {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--ssms-line);
  color: var(--text-mute);
}
.ssms-source-live .ssms-tree-badge { color: var(--jewel); border-color: var(--jewel-dim); }
.ssms-source-draft .ssms-tree-badge { color: #f6c971; border-color: rgba(246, 201, 113, 0.3); }
.ssms-source-demo .ssms-tree-badge { color: var(--text-mute); }

.ssms-tree-children {
  border-left: 1px dashed rgba(255, 255, 255, 0.06);
  margin-left: 18px;
  padding-left: 4px;
}
.ssms-tree-empty {
  padding: 4px 14px 6px 28px;
  font-size: 11px;
  color: var(--text-mute);
  font-style: italic;
}

.ssms-tree-column {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px 3px 14px;
  font-size: 11.5px;
}
.ssms-tree-column .ssms-tree-label strong { font-size: 11.5px; color: var(--text-soft); font-weight: 400; }
.ssms-tree-column .ssms-tree-label span { font-size: 10px; }
.ssms-tree-column .ssms-tree-label span code {
  font-size: 10px;
  color: var(--text-mute);
  background: transparent;
  padding: 0;
  border: none;
}
.ssms-tree-column.is-pii .ssms-tree-label strong { color: #f6c971; }
.ssms-tree-column.is-pii .ssms-tree-icon { color: #f6c971; }

/* Work area */
.ssms-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

/* Welcome */
.ssms-welcome {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 32px 24px;
}
.ssms-welcome-empty { padding: 60px 32px; align-items: flex-start; }
.ssms-welcome-resting {
  border-bottom: 1px solid var(--ssms-line);
  background: rgba(141, 242, 197, 0.014);
}
.ssms-welcome-eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ssms-welcome h2 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.15;
  margin: 0;
}
.ssms-welcome-lead {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}
.ssms-welcome-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 720px) { .ssms-welcome-options { grid-template-columns: 1fr; } }
.ssms-welcome-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--ssms-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, background 120ms ease;
}
.ssms-welcome-option:hover { border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.04); }
.ssms-welcome-option-primary { border-color: var(--jewel-dim); }
.ssms-welcome-option-soon { opacity: 0.7; }
.ssms-welcome-option-soon:hover { border-color: var(--ssms-line); background: rgba(255, 255, 255, 0.018); }
.ssms-welcome-option-eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.ssms-welcome-option-primary .ssms-welcome-option-eyebrow { color: var(--jewel); }
.ssms-welcome-option strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.012em;
  color: var(--text);
}
.ssms-welcome-option > span:nth-of-type(2) { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.ssms-welcome-option-cta { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--jewel); margin-top: 4px; }
.ssms-welcome-option-cta-muted { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.ssms-welcome-note {
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 10px 14px;
  border: 1px dashed var(--ssms-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  margin: 0;
}
.ssms-welcome-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.ssms-welcome-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--ssms-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.ssms-welcome-stats strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
}
.ssms-welcome-stats span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Work-area (selected table) */
.ssms-work {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--ssms-line);
}
.ssms-work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ssms-line);
  background: rgba(255, 255, 255, 0.014);
}
.ssms-work-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ssms-work-icon { color: var(--jewel); font-size: 18px; line-height: 1; }
.ssms-work-title strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -0.012em;
  display: block;
  line-height: 1.2;
}
.ssms-work-title span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.ssms-work-title em {
  font-style: normal;
  color: var(--jewel);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Tabs */
.ssms-tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--ssms-line);
  background: rgba(0, 0, 0, 0.18);
}
.ssms-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: transparent;
  color: var(--text-mute);
  text-decoration: none;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  top: 1px;
}
.ssms-tab:hover { color: var(--text-soft); }
.ssms-tab.is-active {
  color: var(--jewel);
  background: var(--ssms-bg-deep);
  border-color: var(--ssms-line);
  border-bottom-color: var(--ssms-bg-deep);
}
.ssms-tab-count {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  padding: 1px 7px;
  border: 1px solid var(--ssms-line);
  border-radius: 999px;
  color: var(--text-mute);
  text-transform: none;
  letter-spacing: 0;
}
.ssms-tab.is-active .ssms-tab-count { color: var(--jewel); border-color: var(--jewel-dim); }

.ssms-tabpanel {
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ssms-tabpanel-empty {
  padding: 40px 24px;
  align-items: flex-start;
}
.ssms-tabpanel-empty strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--text);
}
.ssms-tabpanel-empty > span {
  display: block;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 560px;
  margin-top: 4px;
}
.ssms-tab-hint {
  font-size: 12.5px;
  color: var(--text-soft);
  margin: 0;
}

/* Grid (column design + data) */
.ssms-grid {
  border: 1px solid var(--ssms-line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
}
.ssms-grid-data { overflow-x: auto; }
.ssms-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ssms-grid-table thead th {
  text-align: left;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid var(--ssms-line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.ssms-grid-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
  color: var(--text-soft);
}
.ssms-grid-table tbody tr:last-child td { border-bottom: none; }
.ssms-grid-table tbody tr:hover { background: var(--ssms-row-hover); }
.ssms-grid-table tbody tr.is-pii { background: rgba(246, 201, 113, 0.025); }
.ssms-grid-table tbody tr.is-pii:hover { background: rgba(246, 201, 113, 0.06); }
.ssms-grid-key {
  text-align: center;
  font-size: 13px;
  color: var(--text-mute);
}
.ssms-grid-table tbody td strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--text);
  font-weight: 500;
  font-size: 12.5px;
}
.ssms-grid-type-friendly {
  display: block;
  color: var(--text);
  font-size: 12px;
}
.ssms-grid-type-tech {
  display: block;
  font-size: 10.5px;
  color: var(--text-mute);
  margin-top: 2px;
}
.ssms-grid-muted { color: var(--text-mute); }
.ssms-grid-table tbody td code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  background: transparent;
  padding: 0;
  border: none;
}

.ssms-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--ssms-line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.ssms-flag.pk   { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.06); }
.ssms-flag.req  { color: var(--text); border-color: var(--text-mute); }
.ssms-flag.pii  { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.06); }
.ssms-flag.muted { color: var(--text-mute); }

/* Rules tab */
.ssms-rules {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ssms-line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.ssms-rule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ssms-rule-row:last-child { border-bottom: none; }
.ssms-rule-row > div { min-width: 0; }
.ssms-rule-row strong {
  display: block;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.25;
}
.ssms-rule-row > div span {
  display: block;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.ssms-rule-row code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}
.ssms-rule-tag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex-shrink: 0;
}
.ssms-rule-tag.is-link { color: var(--jewel); text-decoration: none; }
.ssms-rule-tag.is-link:hover { text-decoration: underline; }

/* Importer + how-it-works section inside the SSMS pane */
.ssms-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 26px;
  border-top: 1px solid var(--ssms-line);
  background: rgba(255, 255, 255, 0.012);
}
.ssms-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ssms-section-head h3 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}
.ssms-section-meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}

/* Status bar */
.ssms-status {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 16px;
  border-top: 1px solid var(--ssms-line);
  background: rgba(255, 255, 255, 0.018);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}
.ssms-status > span { display: inline-flex; align-items: center; gap: 6px; }
.ssms-status-conn { color: var(--text-soft); }
.ssms-status-conn-ok { color: var(--jewel); }
.ssms-status-conn-warn { color: #f6c971; }
.ssms-status-conn-wait { color: #e2d6a8; }
.ssms-status-private { color: #f6c971; }
.ssms-status-cta {
  margin-left: auto;
  color: var(--jewel);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.ssms-status-cta:hover { text-decoration: underline; }

/* ============================================================
   Studio sub-page primitives — the pattern shared by every
   Studio page that's now honest (auth, functions, storage,
   sync, policies, privacy, tests, seeds, compliance, readiness,
   shares). Empty states with a clear next step, member cards,
   readiness checklist rows.
   ============================================================ */
.st-empty {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 30px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
  align-items: flex-start;
}
.st-empty strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.2;
}
.st-empty > span {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 560px;
}
.st-empty .st-btn,
.st-empty .dash-btn {
  margin-top: 4px;
}

/* Studio members grid (used on /studio/auth) */
.studio-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.studio-member-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: var(--text);
}
.studio-member-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.studio-member-card-body strong {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-member-card-body span {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-member-card-role {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jewel);
  padding: 3px 8px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.studio-member-card-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border-style: dashed;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
}
.studio-member-card-more span { color: var(--jewel); font-size: 11px; }

/* Readiness checklist rows on /studio/readiness — each pulled from a
   real signal. Status icon + body + optional fix-this action. */
.readiness-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.readiness-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.readiness-ok       { border-color: var(--jewel-dim); background: rgba(141, 242, 197, 0.04); }
.readiness-warn     { border-color: rgba(246, 201, 113, 0.3); background: rgba(246, 201, 113, 0.04); }
.readiness-fail     { border-color: rgba(255, 138, 138, 0.4); background: rgba(255, 138, 138, 0.04); }
.readiness-pending  { opacity: 0.7; border-style: dashed; }

.readiness-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.readiness-ok      .readiness-icon { background: var(--jewel); color: var(--ink); }
.readiness-warn    .readiness-icon { background: #f6c971; color: var(--ink); }
.readiness-fail    .readiness-icon { background: #ff8a8a; color: var(--ink); }
.readiness-pending .readiness-icon { background: rgba(255, 255, 255, 0.05); color: var(--text-mute); border: 1px solid var(--line); }

.readiness-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.readiness-body strong { font-size: 14px; font-weight: 500; color: var(--text); }
.readiness-body span { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }

.readiness-action {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 12.5px;
  color: var(--jewel);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}
.readiness-action:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .readiness-row { grid-template-columns: 24px 1fr; }
  .readiness-action { grid-column: 1 / -1; justify-self: start; }
}

/* ============================================================
   Studio overview — three real entry-point cards + live status
   strip + recent-activity feed. Replaces the previous mock-data
   layout (8 capsule files / 4 fake gates / 12-item readiness /
   placeholder feeds) with only signals we can actually compute
   for the customer's real server.
   ============================================================ */
.studio-overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.studio-overview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.studio-overview-card:hover {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
  transform: translateY(-1px);
}
.studio-overview-card-warn {
  border-color: rgba(246, 201, 113, 0.35);
  background: rgba(246, 201, 113, 0.04);
}
.studio-overview-card-warn:hover {
  border-color: rgba(246, 201, 113, 0.6);
  background: rgba(246, 201, 113, 0.08);
}
.studio-overview-card-eyebrow {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.studio-overview-card-headline {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.2;
}
.studio-overview-card-body {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  flex: 1;
}
.studio-overview-card-cta {
  font-size: 13px;
  color: var(--jewel);
  font-weight: 500;
  margin-top: 4px;
}
.studio-overview-card-warn .studio-overview-card-cta { color: #f6c971; }

/* "What's live on your server" — four real signals only. */
.studio-overview-live {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.studio-overview-live > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.studio-overview-live-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.studio-overview-live-val {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}
.studio-overview-live-sub {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
}
.studio-overview-live-sub a { color: var(--jewel); text-decoration: none; }
.studio-overview-live-sub a:hover { text-decoration: underline; }

/* Activity feed — single column, dense but scannable. */
.studio-overview-feed {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.studio-overview-feed-row {
  display: grid;
  grid-template-columns: 80px 80px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.studio-overview-feed-row:last-child { border-bottom: none; }
.studio-overview-feed-time {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.studio-overview-feed-kind {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}
.studio-overview-feed-kind.kind-auth     { color: var(--jewel);  background: rgba(141, 242, 197, 0.12); }
.studio-overview-feed-kind.kind-mutation { color: var(--jewel);  background: rgba(141, 242, 197, 0.06); }
.studio-overview-feed-kind.kind-share    { color: var(--text);   background: rgba(244, 242, 236, 0.05); }
.studio-overview-feed-kind.kind-policy   { color: #f6c971;       background: rgba(246, 201, 113, 0.12); }
.studio-overview-feed-kind.kind-deploy   { color: var(--text-soft); background: rgba(141, 242, 197, 0.04); }
.studio-overview-feed-kind.kind-audit    { color: var(--text-mute); background: rgba(244, 242, 236, 0.03); }
.studio-overview-feed-msg {
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.studio-overview-feed-actor {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-align: right;
}

@media (max-width: 720px) {
  .studio-overview-feed-row {
    grid-template-columns: 70px 70px 1fr;
  }
  .studio-overview-feed-actor {
    grid-column: 1 / -1;
    text-align: left;
    color: var(--text-soft);
  }
}

/* Pre-launch CTA — when the server isn't running yet. Honest empty
   state with a single primary action. */
.studio-overview-prelaunch-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.studio-overview-prelaunch-note {
  flex: 1;
  min-width: 240px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* Settings page banner + stacked-row variant used by the danger zone
   so a ConfirmAction can render with a checkbox above the button without
   getting cramped against the right gutter of the detail-row grid. */
.settings-banner {
  margin-bottom: 24px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.settings-banner-ok {
  border: 1px solid var(--jewel-dim);
  background: rgba(141, 242, 197, 0.06);
  color: var(--text);
}
.settings-banner-warn {
  border: 1px solid rgba(246, 201, 113, 0.4);
  background: rgba(246, 201, 113, 0.06);
  color: #f6c971;
}
.dash-detail-row.dash-detail-row-stack {
  grid-template-columns: 200px 1fr;
  align-items: start;
}
.dash-detail-row.dash-detail-row-stack > .confirm-action {
  grid-column: 2;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .dash-detail-row.dash-detail-row-stack {
    grid-template-columns: 1fr;
  }
  .dash-detail-row.dash-detail-row-stack > .confirm-action {
    grid-column: 1;
  }
}

/* ============================================================
   Schema line diff — red/green inline diff shown on /studio/diff
   when Studio is about to commit a schema change. Header shows
   added / removed counts, body shows three columns: old line
   number, new line number, glyph + line content.
   ============================================================ */
.schema-diff {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.schema-diff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.schema-diff-label {
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.12em;
}
.schema-diff-stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.schema-diff-added   { color: var(--jewel); }
.schema-diff-removed { color: #ff8a8a; }
.schema-diff-context { color: var(--text-mute); }
.schema-diff-noop    { color: var(--text-mute); font-style: italic; }

.schema-diff-body {
  max-height: 520px;
  overflow-y: auto;
}
.schema-diff-row {
  display: grid;
  grid-template-columns: 44px 44px 18px 1fr;
  align-items: stretch;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
}
.schema-diff-row.equal { background: transparent; }
.schema-diff-row.insert {
  background: rgba(141, 242, 197, 0.06);
  border-left: 2px solid var(--jewel);
}
.schema-diff-row.delete {
  background: rgba(255, 138, 138, 0.06);
  border-left: 2px solid #ff8a8a;
}
.schema-diff-num {
  text-align: right;
  padding: 2px 8px 2px 4px;
  color: var(--text-mute);
  font-size: 11px;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.schema-diff-glyph {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 0;
}
.schema-diff-row.insert .schema-diff-glyph { color: var(--jewel); }
.schema-diff-row.delete .schema-diff-glyph { color: #ff8a8a; }
.schema-diff-row.equal  .schema-diff-glyph { color: var(--text-mute); }
.schema-diff-line {
  padding: 2px 12px 2px 6px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.schema-diff-row.equal  .schema-diff-line { color: var(--text-soft); }

.st-diff-readerr {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.012);
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.55;
}

/* ============================================================
   Public signup form on /signup
   ============================================================ */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.signup-plans { border: none; padding: 0; margin: 0; }
.signup-plans legend {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.signup-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.signup-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.012);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.signup-plan:hover { border-color: var(--jewel-dim); transform: translateY(-1px); }
.signup-plan.active {
  border-color: var(--jewel);
  background: rgba(141, 242, 197, 0.06);
}
.signup-plan input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.signup-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.signup-plan-head strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
}
.signup-plan.active .signup-plan-head strong { color: var(--jewel); }
.signup-plan-rec {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jewel);
  padding: 2px 8px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.signup-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.signup-plan-price-amount {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.signup-plan-price-suffix {
  font-size: 13px;
  color: var(--text-soft);
}
.signup-plan-tagline {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.signup-plan ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.signup-plan li {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text);
  padding-left: 14px;
  position: relative;
  letter-spacing: 0.02em;
}
.signup-plan li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--jewel);
}

.signup-email {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.signup-email label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.signup-email input {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  font-size: 16px;
}
.signup-email input:focus {
  outline: none;
  border-color: var(--jewel);
  box-shadow: 0 0 0 1px var(--jewel-dim);
}
.signup-email-hint {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}

.signup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.signup-note {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.signup-error {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 138, 138, 0.4);
  background: rgba(255, 138, 138, 0.06);
  color: #ffb4b4;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ============================================================
   In-app glossary — discreet dotted-underline term wrapper +
   /docs page that lists every term plainly.
   ============================================================ */
.glossary-term {
  border-bottom: 1px dotted var(--text-mute);
  cursor: help;
}
.glossary-term:hover {
  border-bottom-color: var(--jewel);
  color: var(--jewel);
}

.docs-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px;
  border-bottom: 1px solid var(--line);
}
.docs-nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.docs-nav a:hover { color: var(--jewel); }
.docs-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}
.docs-eyebrow {
  margin: 0 0 18px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
}
.docs-h1 {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  margin: 0 0 22px;
}
.docs-lede {
  margin: 0 0 48px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-mute);
  letter-spacing: -0.005em;
}
.docs-glossary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.docs-glossary-row {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.docs-glossary-row h3 {
  margin: 0 0 8px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--jewel);
  line-height: 1.2;
}
.docs-glossary-row p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.docs-extra {
  margin-top: 56px;
  padding: 24px 26px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.docs-extra h2 {
  margin: 0 0 12px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.docs-extra ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.docs-extra a { color: var(--jewel); text-decoration: none; font-weight: 500; }
.docs-extra a:hover { text-decoration: underline; }
.docs-extra code,
.docs-inline-code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}

/* Footer-stub pages: /about, /privacy, /terms, /changelog. They reuse
   .docs-shell + .docs-extra + .docs-lede above, plus a small footer
   nav and a few changelog-specific bits. */
.docs-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 40px;
  border-top: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.docs-foot nav {
  display: flex;
  gap: 18px;
}
.docs-foot a {
  color: var(--text-soft);
  text-decoration: none;
}
.docs-foot a:hover { color: var(--jewel); }
.docs-foot-note {
  margin: 56px 0 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-style: italic;
}

.changelog-feed {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 12px;
}
.changelog-entry {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
}
.changelog-entry header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.changelog-entry time {
  text-transform: uppercase;
}
.changelog-version {
  padding: 2px 8px;
  border: 1px solid var(--jewel-dim);
  border-radius: 999px;
  color: var(--jewel);
  background: rgba(141, 242, 197, 0.06);
}
.changelog-entry h2 {
  margin: 0 0 8px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.014em;
  color: var(--text);
  line-height: 1.18;
}
.changelog-entry p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}
.changelog-entry ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.changelog-entry li {
  padding-left: 18px;
  position: relative;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.changelog-entry li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--jewel);
}

/* /docs/accept-invite — code snippet sections */
.docs-snippet {
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}
.docs-snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}
.docs-snippet-head h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  color: var(--text);
}
.docs-snippet-path {
  margin: 0 0 14px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.docs-snippet-path code {
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.docs-snippet pre {
  margin: 0;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre;
}

/* ============================================================
   First-deploy celebration — confetti card shown once per server
   when its first deploy lands. localStorage-deduped so it never
   plays twice for the same server.
   ============================================================ */
.first-deploy-celebration {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 36px;
  border-radius: 18px;
  border: 1px solid var(--jewel-dim);
  background:
    radial-gradient(ellipse at top, rgba(141, 242, 197, 0.10), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(246, 201, 113, 0.06), transparent 60%),
    rgba(141, 242, 197, 0.025);
  margin-bottom: 24px;
  overflow: hidden;
  animation: first-deploy-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes first-deploy-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.first-deploy-celebration-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.first-deploy-celebration-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.first-deploy-celebration-eyebrow {
  margin: 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
}
.first-deploy-celebration-title {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}
.first-deploy-celebration-lede {
  margin: 0;
  font-size: 14.5px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 640px;
}
.first-deploy-celebration-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.first-deploy-celebration-build {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.first-deploy-celebration-build code {
  color: var(--jewel);
  padding: 1px 6px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.06);
}
.first-deploy-celebration-dismiss {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-left: auto;
  transition: border-color 0.15s, color 0.15s;
}
.first-deploy-celebration-dismiss:hover {
  border-color: var(--text-mute);
  color: var(--text);
}

/* ============================================================
   First-run hero — the single screen a brand-new user sees
   before they have a server. Replaces the previous welcome card
   + "what lands here once it's running" tour with a confident
   greeting, a one-sentence promise, and the launch form inline.
   Three questions, two minutes, done.
   ============================================================ */
.first-run-hero {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 56px 56px 48px;
  border-radius: 18px;
  border: 1px solid var(--jewel-dim);
  background:
    radial-gradient(ellipse at top right, rgba(141, 242, 197, 0.08), transparent 65%),
    radial-gradient(ellipse at bottom left, rgba(141, 242, 197, 0.04), transparent 60%),
    rgba(141, 242, 197, 0.018);
  margin-bottom: 32px;
}
.first-run-hero-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 720px;
}
.first-run-hero-eyebrow {
  margin: 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel);
}
.first-run-hero-title {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--text);
}
.first-run-hero-title em { font-style: italic; color: var(--jewel); }
.first-run-hero-lede {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--text-mute);
  letter-spacing: -0.005em;
  max-width: 640px;
}
.first-run-hero-form {
  /* Re-tighten the form's outer spacing so it sits flush inside the
     hero card rather than looking like a stranded sub-section. */
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
}
.first-run-hero-form .launch-form {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}
.first-run-hero-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.first-run-hero-preview-eyebrow {
  margin: 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.first-run-hero-preview ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.first-run-hero-preview li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.first-run-hero-preview li strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}
.first-run-hero-preview li span {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .first-run-hero { padding: 32px 24px 28px; gap: 28px; }
  .first-run-hero-form { padding: 18px; }
}

/* Technical-details disclosure on the dashboard overview. Engineers see
   build version, server ID, and last health check; everyone else gets a
   clean "what your app looks like" page without hex strings. */
.dash-tech-details {
  margin-top: 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.005);
}
.dash-tech-details > summary {
  cursor: pointer;
  padding: 10px 16px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  list-style: none;
}
.dash-tech-details > summary::-webkit-details-marker { display: none; }
.dash-tech-details > summary::after {
  content: "â–¸";
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.15s;
  color: var(--text-mute);
}
.dash-tech-details[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.dash-tech-details[open] > summary::after { transform: rotate(90deg); }
.dash-tech-details .dash-detail {
  border: none;
  border-radius: 0;
}
.dash-tech-details .dash-detail-row code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
}

/* "Why this matters" disclosure at the bottom of the activity log page —
   houses the compliance framing (HIPAA / FRE / FRCP) that used to lead the
   page. Default-closed so the actual logs are the headline. */
.logs-why-disclosure {
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.logs-why-disclosure > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 13px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.logs-why-disclosure[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.logs-why-disclosure .evidence-intro {
  margin: 0 16px 16px;
}

/* Advanced (terminal access) disclosure on the server page. Hidden by
   default so non-technical users don't see a shell prompt; engineers can
   open it for SSH copy commands. */
.advanced-ops {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.advanced-ops > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.advanced-ops[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.advanced-ops-lede {
  margin: 14px 16px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.advanced-ops-lede code {
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
}
.advanced-ops-grid {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}
.advanced-ops-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.advanced-ops-item strong {
  font-size: 13.5px;
  color: var(--text);
}
.advanced-ops-item > span:not(.dash-copy-field) {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.advanced-ops-item .dash-copy-field {
  margin-top: 4px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line);
  border-radius: 6px;
  word-break: break-all;
  align-items: flex-start;
}
.advanced-ops-item code {
  font-size: 11.5px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  flex: 1;
  word-break: break-all;
}

/* GitHub auto-deploy — single status banner that owns the section's
   "where do I stand right now?" message. Three tones: ok (connected /
   waiting), info (not yet configured), fail (setup blocked). */
.github-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.github-status strong {
  font-size: 14px;
  color: var(--text);
}
.github-status span {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
}
.github-status.ok {
  background: rgba(141, 242, 197, 0.05);
  border-color: var(--jewel-dim);
}
.github-status.ok strong { color: var(--jewel); }
.github-status.fail {
  background: rgba(244, 114, 114, 0.05);
  border-color: rgba(244, 114, 114, 0.30);
}
.github-status.fail strong { color: #ffb4b4; }
.github-status.info {
  background: rgba(255, 255, 255, 0.022);
  border-color: var(--line);
}

/* "Two ways to fix it" / "Set it up by hand" cards. Side-by-side on wide
   screens, stacked on narrow. The .single variant centers a lone card. */
.github-fix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.github-fix-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.github-fix-card.single {
  margin-bottom: 18px;
}
.github-fix-tag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jewel);
  align-self: flex-start;
}
.github-fix-card h3 {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--text);
}
.github-fix-card > p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.github-fix-foot {
  margin-top: auto;
  padding-top: 8px;
  font-size: 12.5px;
  color: var(--text-mute);
  border-top: 1px dashed var(--line);
}
.github-fix-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.github-fix-steps li {
  list-style: decimal;
  color: var(--text-soft);
}
.github-fix-steps li strong { color: var(--text); }
.github-fix-steps li code {
  font-size: 12px;
  color: var(--jewel);
  padding: 1px 5px;
  border: 1px solid var(--jewel-dim);
  border-radius: 4px;
  background: rgba(141, 242, 197, 0.05);
}
.github-fix-steps a.dash-btn { margin-top: 2px; }
.github-perms-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.github-perms-list li {
  list-style: none;
  font-size: 12.5px;
  color: var(--text-soft);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.018);
}
.github-perms-list li strong { color: var(--text); margin-right: 6px; }

/* Inline copy lozenge for webhook URL / secret values inside the steps. */
.github-fix-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
  max-width: 100%;
}
.github-fix-copy code {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
}

/* Settings drawer — collapsed by default once a deploy hook is wired up,
   open by default until then so first-time users see the form. */
.github-settings-drawer {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
}
.github-settings-drawer > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.github-settings-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.github-settings-drawer > .dash-detail,
.github-settings-drawer > form {
  margin: 16px;
}

.github-permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-soft);
  font-size: 12px;
}

.github-permission-list strong,
.github-permission-list span {
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.035);
}

.github-permission-list strong {
  color: var(--text);
  font-weight: 600;
}

.manual-webhook-setup {
  margin-top: 16px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.manual-webhook-setup summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.manual-webhook-setup[open] summary {
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
}

.manual-webhook-steps {
  display: grid;
  gap: 6px;
  margin: 14px 16px;
  padding-left: 20px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.manual-webhook-setup .dash-detail {
  border: 0;
  border-top: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
}

/* Region picker */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.region-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.region-card:hover { border-color: rgba(160, 234, 188, 0.4); }
.region-card.selected {
  border-color: var(--accent, #a0eabc);
  background: rgba(160, 234, 188, 0.06);
}
.region-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.region-card .flag { font-size: 18px; }
.region-card .label {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.region-card .slug {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

/* Server-size picker — friendly cards with plain-language capacity hint
   instead of a slug dropdown. Mirrors the region picker layout so the form
   reads consistently. */
.size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.size-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.size-card:hover { border-color: rgba(160, 234, 188, 0.4); }
.size-card.selected {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.size-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.size-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.size-card-head strong {
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--text);
}
.size-card.selected .size-card-head strong { color: var(--jewel); }
.size-card-price {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.size-card-capacity {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.size-card-spec {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* Launch-form advanced-options disclosure — keeps the easy path at three
   questions while engineers and stricter-security users open this when
   they need it. */
.launch-advanced {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  padding: 0;
  overflow: hidden;
}
.launch-advanced > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  list-style: none;
}
.launch-advanced > summary::-webkit-details-marker { display: none; }
.launch-advanced[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.launch-advanced > summary::after {
  content: "â–¸";
  margin-left: 8px;
  display: inline-block;
  transition: transform 0.15s;
}
.launch-advanced[open] > summary::after { transform: rotate(90deg); }
.launch-advanced-lede {
  margin: 14px 18px 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
}
.launch-advanced > .launch-field {
  margin: 18px;
}
.launch-advanced > .launch-field:not(:last-child) {
  margin-bottom: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.launch-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-soft, rgba(255, 255, 255, 0.08));
}
.launch-hint {
  font-size: 12px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.03em;
}

/* "What happens next" steps */
.launch-steps {
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.launch-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 6px 16px;
  padding-left: 0;
  position: relative;
}
.launch-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.12));
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--accent, #a0eabc);
  background: rgba(0, 0, 0, 0.3);
  grid-row: span 2;
  align-self: start;
}
.launch-steps strong {
  font-size: 14px;
  color: var(--text);
}
.launch-steps span {
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
.launch-steps code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
}

/* ============================================================
   PROVISIONING STATUS WIDGET
   ============================================================ */

.provisioning-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}
.provisioning-status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.provisioning-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.provisioning-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-soft);
}
.provisioning-pill.provisioning .dot {
  background: #f6c971;
  animation: provisioning-pulse 1.4s ease-in-out infinite;
}
.provisioning-pill.live .dot { background: var(--accent, #a0eabc); }
.provisioning-pill.failed .dot { background: #ff8a8a; }
.provisioning-pill.live { border-color: rgba(160, 234, 188, 0.4); color: var(--accent, #a0eabc); }
.provisioning-pill.failed { border-color: rgba(255, 138, 138, 0.4); color: #ffb4b4; }

@keyframes provisioning-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.provisioning-ip {
  font-size: 13px;
  color: var(--text-soft);
}
.provisioning-ip.muted { opacity: 0.6; font-style: italic; }
.provisioning-ip code {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text);
}

.provisioning-tag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6c971;
  border: 1px solid rgba(246, 201, 113, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}

.provisioning-hint {
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
}

.provisioning-diagnostic {
  display: block;
  width: 100%;
  border: 1px solid rgba(246, 201, 113, 0.24);
  border-radius: 8px;
  background: rgba(246, 201, 113, 0.06);
  color: #f8df9b;
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 12px;
}

.dash-btn.small { padding: 6px 12px; font-size: 12px; }

@media (max-width: 720px) {
  .launch-form { grid-template-columns: 1fr; padding: 18px; }
  .region-grid { grid-template-columns: 1fr 1fr; }
  .launch-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============================================================
   EVIDENCE MODE — ledger integrity + filter bar + evidence rows
   ============================================================ */

/* ----- Ledger Integrity widget ----- */
.ledger-integrity {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 24px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top left, rgba(160, 234, 188, 0.04), transparent 60%),
    rgba(0, 0, 0, 0.22);
}
.ledger-integrity-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.ledger-integrity-row.anchor {
  padding-top: 12px;
  border-top: 1px dashed var(--border-soft, rgba(255, 255, 255, 0.06));
}

.ledger-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.12));
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.ledger-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #a0eabc);
}
.ledger-pill.intact {
  border-color: rgba(160, 234, 188, 0.35);
  color: var(--accent, #a0eabc);
}
.ledger-pill.broken {
  border-color: rgba(255, 138, 138, 0.4);
  color: #ffb4b4;
}
.ledger-pill.broken .dot { background: #ff8a8a; }
.ledger-pill .muted { color: var(--text-soft); font-size: 11px; }

.ledger-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-stat.wide { flex: 1; }
.ledger-stat .key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ledger-stat strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.ledger-stat .muted { color: var(--text-soft); font-weight: 400; font-size: 11px; }
.ledger-stat .hash,
.ledger-integrity code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.anchor-status {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
}
.anchor-status .key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.anchor-status strong { font-size: 13px; color: var(--text); font-weight: 500; }
.anchor-status .muted { color: var(--text-soft); font-weight: 400; font-size: 12px; }
.anchor-status code {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 3px;
}
.anchor-status.missing strong { color: #f6c971; }
.anchor-status.configured strong { color: var(--accent, #a0eabc); }

/* ----- Investigator Filter Bar ----- */
.log-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 22px;
  margin-bottom: 22px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}
.log-filter-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.log-filter-row.inputs {
  align-items: flex-end;
  margin-top: 4px;
}
.log-filter-label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  min-width: 56px;
}
.log-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.log-filter-pills .pill {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
  background: transparent;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.log-filter-pills .pill:hover { border-color: rgba(160, 234, 188, 0.35); color: var(--text); }
.log-filter-pills .pill.active {
  border-color: var(--accent, #a0eabc);
  background: rgba(160, 234, 188, 0.08);
  color: var(--accent, #a0eabc);
}
.log-filter-pills .pill:disabled { opacity: 0.5; cursor: not-allowed; }

.log-filter-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
  flex: 1;
}
.log-filter-input label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.log-filter-input input {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--text);
  letter-spacing: 0.02em;
}
.log-filter-input input:focus { outline: none; border-color: var(--accent, #a0eabc); }
.log-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.log-filter-summary {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.03em;
  padding-top: 6px;
  border-top: 1px dashed var(--border-soft, rgba(255, 255, 255, 0.06));
}
.log-filter-summary strong { color: var(--accent, #a0eabc); font-weight: 500; }
.log-filter-summary .muted { opacity: 0.7; }

.dash-btn.primary {
  background: var(--accent, #a0eabc);
  color: #0d0d0d;
  border: 1px solid var(--accent, #a0eabc);
  font-weight: 500;
}
.dash-btn.primary:hover { filter: brightness(1.08); }
.dash-btn.primary.small { padding: 6px 14px; font-size: 12px; }

/* ----- Evidence row layout (Logs page) ----- */
.log-row.evidence {
  display: grid;
  grid-template-columns: 130px 110px 1fr 220px 140px;
  gap: 18px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
}
.log-row.evidence:hover { background: rgba(160, 234, 188, 0.04); }
.log-row.evidence .log-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.log-row.evidence .log-time .time { font-size: 12px; }
.log-row.evidence .log-time .index {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
.log-row .log-hash code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.log-row.evidence:hover .log-hash code { color: var(--accent, #a0eabc); }

@media (max-width: 1100px) {
  .log-row.evidence { grid-template-columns: 110px 100px 1fr 110px; }
  .log-row.evidence .log-hash { display: none; }
}
@media (max-width: 720px) {
  .log-row.evidence { grid-template-columns: 1fr; gap: 4px; }
}

/* ----- Ledger position card on Replay page ----- */
.replay-card.ledger-card { border-color: rgba(160, 234, 188, 0.18); }
.ledger-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-bottom: 12px;
}
.ledger-card-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ledger-card-grid .key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.ledger-card-grid code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  width: fit-content;
}
.ledger-card-note {
  font-size: 12px;
  color: var(--text-soft);
  margin: 4px 0 0;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .ledger-card-grid { grid-template-columns: 1fr; }
  .ledger-integrity { padding: 14px 18px; }
  .log-filter { padding: 14px 18px; }
  .log-filter-input { min-width: 100%; }
}

/* ============================================================
   EVIDENCE MODE — vertical-specific framing
   ============================================================ */

.evidence-intro {
  position: relative;
  padding: 22px 26px 26px;
  margin-bottom: 24px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top right, rgba(160, 234, 188, 0.05), transparent 55%),
    rgba(0, 0, 0, 0.18);
}
.evidence-intro-tag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #a0eabc);
  margin-bottom: 16px;
}
.evidence-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 14px;
}
.evidence-scenario {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.06));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.evidence-scenario:hover {
  border-color: rgba(160, 234, 188, 0.2);
  background: rgba(160, 234, 188, 0.025);
}
.evidence-scenario h3 {
  margin: 0;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.evidence-scenario p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
}
.evidence-scenario-frame {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  text-transform: lowercase;
}

.evidence-intro-note {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--text-soft);
  font-style: italic;
  line-height: 1.5;
}

/* ----- Comparison panel (normal vs. StealthQL) ----- */
.evidence-compare {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
}
.compare-side {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.compare-side.ours { border-color: rgba(160, 234, 188, 0.25); }

.compare-head {
  padding: 12px 18px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.06));
  background: rgba(255, 255, 255, 0.02);
}
.compare-side.ours .compare-head { color: var(--accent, #a0eabc); }

.compare-side pre {
  margin: 0;
  padding: 18px 20px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-soft);
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
}
.compare-side.ours pre { color: var(--text); }

.compare-foot {
  padding: 10px 18px 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-style: italic;
  color: var(--text-mute);
}

.evidence-compare-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 820px;
}
.evidence-compare-note strong { color: var(--text); font-weight: 500; }

/* ----- Replay "designed for" strip ----- */
.replay-designed-for {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 32px;
  padding: 12px 18px;
  border: 1px dashed var(--border-soft, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
}
.replay-designed-for .key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: 4px;
}
.replay-designed-for .tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.1));
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.replay-designed-for .tag:hover {
  border-color: rgba(160, 234, 188, 0.3);
  color: var(--accent, #a0eabc);
}

@media (max-width: 1100px) {
  .evidence-intro-grid { grid-template-columns: 1fr; }
  .evidence-compare { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .evidence-intro { padding: 18px 18px 20px; }
  .compare-side pre { font-size: 11.5px; padding: 14px 16px; }
  .replay-designed-for { padding: 10px 14px; gap: 6px; }
}

/* ============================================================
   SIGNATURE SHARES — landing-page sub-section
   ============================================================ */

.signature-share {
  margin-top: 84px;
  padding-top: 56px;
  border-top: 1px dashed var(--line, rgba(255, 255, 255, 0.08));
}

.signature-share-head { max-width: 760px; margin-bottom: 36px; }

.signature-share-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jewel, #a0eabc);
}

.signature-share-title {
  margin: 0 0 14px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 400;
}
.signature-share-title em { font-style: italic; color: var(--jewel, #a0eabc); }

.signature-share-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}
.signature-share-lede strong { color: var(--text); font-weight: 500; }

.signature-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 28px 0 18px;
  padding: 14px 18px;
  border: 1px dashed var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.signature-flow .flow-step {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}
.signature-flow .flow-step:last-of-type {
  border-color: rgba(160, 234, 188, 0.4);
  color: var(--jewel, #a0eabc);
  background: rgba(160, 234, 188, 0.06);
}
.signature-flow .flow-arrow {
  color: var(--text-mute);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
}

.signature-share-note {
  margin: 6px 0 0;
  max-width: 820px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.signature-share-note code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel, #a0eabc);
  background: rgba(160, 234, 188, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--jewel-dim, rgba(160, 234, 188, 0.2));
}

@media (max-width: 720px) {
  .signature-share { margin-top: 60px; padding-top: 36px; }
  .signature-flow { padding: 12px 14px; gap: 6px 8px; }
  .signature-flow .flow-step { font-size: 10.5px; padding: 4px 9px; }
}

/* ============================================================
   CONFUSED-DEPUTY GUARD — landing-page sub-section
   ============================================================ */

.confused-deputy {
  margin-top: 84px;
  padding-top: 56px;
  border-top: 1px dashed var(--line, rgba(255, 255, 255, 0.08));
}

.confused-deputy .cd-head { max-width: 820px; margin-bottom: 36px; }

.confused-deputy .cd-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jewel, #a0eabc);
}

.confused-deputy .cd-title {
  margin: 0 0 14px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-weight: 400;
}
.confused-deputy .cd-title em { font-style: italic; color: var(--jewel, #a0eabc); }

.confused-deputy .cd-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}
.confused-deputy .cd-lede strong { color: var(--text); font-weight: 500; }
.confused-deputy .cd-lede code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  color: var(--jewel, #a0eabc);
  background: rgba(160, 234, 188, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--jewel-dim, rgba(160, 234, 188, 0.2));
  white-space: nowrap;
}

.confused-deputy .cd-note {
  margin: 18px 0 0;
  max-width: 820px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.confused-deputy .cd-note code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

@media (max-width: 720px) {
  .confused-deputy { margin-top: 60px; padding-top: 36px; }
}

/* ============================================================
   STUDIO — repo-native backend management surface (/studio)
   ============================================================
   Sibling to /dashboard. Same theme tokens, denser visual character,
   namespaced under .st-* so nothing here affects the marketing or
   dashboard surfaces.
   ============================================================ */

.st-shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 52px 1fr;
  grid-template-areas:
    "cmd cmd"
    "aside main";
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* ---------- Command bar ---------- */
.st-cmd {
  grid-area: cmd;
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 480px) minmax(280px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.st-cmd-left, .st-cmd-mid, .st-cmd-right { display: flex; align-items: center; gap: 14px; }
.st-cmd-right { justify-content: flex-end; }

.st-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-size: 14px;
}
/* In the Studio command bar, the wordmark replaces the icon + "StealthQL"
   text. The "/ STUDIO" mode tag (.st-mark-sep + .st-mark-product) stays
   visible to the right so users always see which surface they're on. */
.st-mark .glyph {
  display: inline-block;
  width: 114px;
  height: 36px;
  background: url('/assets/full-logo.svg') left center / contain no-repeat;
  flex-shrink: 0;
}
.st-mark .st-mark-name { display: none; }
.st-mark-name em { font-style: italic; color: var(--text-soft); }
.st-mark-sep { color: var(--text-mute); margin: 0 2px; }
.st-mark-product {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jewel);
}

.st-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
}
.st-breadcrumb-key { color: var(--text-soft); letter-spacing: 0.06em; }
.st-breadcrumb-name { color: var(--text); }
.st-breadcrumb-sep { color: var(--text-mute); }
.st-breadcrumb-hash { color: var(--jewel); }
.st-breadcrumb-caret { color: var(--text-mute); margin-left: 2px; font-size: 9px; }
.st-breadcrumb.invalid {
  border-color: rgba(255, 143, 143, 0.35);
  background: rgba(255, 143, 143, 0.055);
}
.st-breadcrumb.invalid .st-breadcrumb-key {
  color: #ff9f9f;
}
.st-breadcrumb.pending {
  border-color: rgba(246, 201, 113, 0.28);
  background: rgba(246, 201, 113, 0.045);
}
.st-breadcrumb.pending .st-breadcrumb-key {
  color: #f6c971;
}

/* Breadcrumb-as-dropdown — used when the user has 2+ servers so they can
   hop between capsules without leaving Studio. */
.st-breadcrumb-switch {
  position: relative;
  cursor: pointer;
  padding: 0;
  border: none;
  background: transparent;
}
.st-breadcrumb-switch > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.st-breadcrumb-switch > summary::-webkit-details-marker { display: none; }
.st-breadcrumb-switch > summary:hover {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.04);
}
.st-breadcrumb-switch[open] > summary {
  border-color: var(--jewel-dim);
  background: rgba(141, 242, 197, 0.05);
}
.st-breadcrumb-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-width: 360px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-breadcrumb-menu-head {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 8px 10px 6px;
}
.st-breadcrumb-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 5px;
  text-decoration: none;
  color: var(--text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif, sans-serif;
  transition: background 0.15s;
}
.st-breadcrumb-menu a:hover {
  background: rgba(141, 242, 197, 0.06);
}
.st-breadcrumb-menu a.active {
  background: rgba(141, 242, 197, 0.10);
}
.st-breadcrumb-menu-name {
  font-size: 13.5px;
  color: var(--text);
}
.st-breadcrumb-menu-detail {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

.st-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.st-search input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 12px 7px 36px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.st-search input::placeholder { color: var(--text-mute); }
.st-search input:focus { outline: none; border-color: var(--jewel-dim); box-shadow: 0 0 0 1px var(--jewel-dim); }
.st-search-key {
  position: absolute;
  left: 10px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 0.08em;
  pointer-events: none;
}

.st-build-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.st-build-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.st-build-pill.ok { color: var(--jewel); border-color: var(--jewel-dim); }
.st-build-pill.ok .dot { background: var(--jewel); box-shadow: 0 0 6px var(--jewel-glow); }
.st-build-pill.warn { color: #f6c971; border-color: rgba(246, 201, 113, 0.3); }
.st-build-pill.warn .dot { background: #f6c971; }
.st-build-pill.fail { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-build-pill.fail .dot { background: #ff8a8a; }
.st-build-pill.wait { color: #e2d6a8; border-color: rgba(226, 214, 168, 0.3); }
.st-build-pill.wait .dot { background: #e2d6a8; animation: build-pill-wait 1.6s ease-in-out infinite; }
.st-build-pill.muted { color: var(--text-soft); border-color: var(--line); }
.st-build-pill.muted .dot { background: var(--text-soft); }
@keyframes build-pill-wait {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* user menu */
.st-user { position: relative; }
.st-user-trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.st-user-trigger::-webkit-details-marker { display: none; }
.st-user-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jewel);
  color: #0d0d0d;
  font-size: 12px;
  font-weight: 600;
}
.st-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-soft);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.st-user-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; }
.st-user-menu a { color: var(--text); text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.st-user-menu a:hover { background: rgba(255, 255, 255, 0.04); color: var(--jewel); }
.st-user-who { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12px; color: var(--text); }
.st-user-what { font-size: 11px; color: var(--text-soft); }
.st-user-signout { width: 100%; background: none; border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; color: var(--text); font-size: 12px; cursor: pointer; }
.st-user-signout:hover { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.3); }

/* ---------- Sidebar ---------- */
.st-aside {
  grid-area: aside;
  border-right: 1px solid var(--line);
  background: var(--ink-soft);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  position: sticky;
  top: 52px;
  height: calc(100vh - 52px);
}
.st-aside-section {}
.st-section-label {
  padding: 0 10px;
  margin-bottom: 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.st-nav { display: flex; flex-direction: column; gap: 1px; }
.st-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 13px;
  border: 1px solid transparent;
}
.st-nav-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.025); }
.st-nav-link.active {
  color: var(--text);
  background: rgba(160, 234, 188, 0.08);
  border-color: var(--jewel-dim);
}
.st-nav-pill {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
}
.st-nav-dot { width: 6px; height: 6px; border-radius: 50%; }
.st-nav-dot.ok { background: var(--jewel); }
.st-nav-dot.warn { background: #f6c971; }
.st-nav-dot.fail { background: #ff8a8a; }

.st-aside-foot {
  margin-top: auto;
  padding: 12px 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.st-aside-link {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.st-aside-link:hover { color: var(--jewel); }

/* ---------- Main / screen scaffolding ---------- */
.st-main {
  grid-area: main;
  padding: 28px 32px 64px;
  min-width: 0;
  overflow-x: hidden;
}

.st-screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.st-eyebrow {
  margin: 0 0 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--jewel);
}
.st-h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.012em;
  font-weight: 500;
  color: var(--text);
}
.st-screen-sub {
  margin: 8px 0 0;
  max-width: 760px;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
}
.st-screen-sub code { color: var(--jewel); }
.st-screen-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.st-btn:hover { border-color: var(--jewel-dim); color: var(--jewel); }
.st-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.st-btn.small { padding: 5px 10px; font-size: 12px; }
.st-btn-primary {
  background: var(--jewel);
  color: #0d0d0d;
  border-color: var(--jewel);
}
.st-btn-primary:hover { background: var(--jewel-soft); color: #0d0d0d; border-color: var(--jewel-soft); }
.st-btn-primary:disabled { background: rgba(160, 234, 188, 0.3); }
/* "Up to date" replacement for the Save button when there's nothing to save.
   Reads as a status, not an action — same shape as a button so the layout
   doesn't shift when switching between save-pending and saved. */
.st-btn-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--jewel-dim);
  border-radius: 7px;
  background: rgba(141, 242, 197, 0.06);
  color: var(--text-soft);
  font-size: 13px;
  cursor: default;
  user-select: none;
}
.st-btn-ghost { background: transparent; }
.st-btn-ghost.danger,
.st-btn-ghost.danger:hover {
  color: #ffb4b4;
  border-color: rgba(255, 138, 138, 0.45);
  background: rgba(255, 138, 138, 0.06);
}

/* Section header right-rail used when a section needs both an action button
   and an explanatory hint inline with the heading. */
.st-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Sections ---------- */
.st-section {
  margin-bottom: 28px;
}
.st-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.st-section-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
}
.st-section-meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.st-section-search {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.st-section-foot {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 820px;
}
.st-section-foot strong { color: var(--text); font-weight: 500; }
.st-link { color: var(--jewel); text-decoration: none; }
.st-link:hover { text-decoration: underline; }
.st-empty-text { font-size: 13px; color: var(--text-mute); font-style: italic; padding: 24px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }

/* ---------- Pills ---------- */
.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}
.st-pill.ok      { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(160, 234, 188, 0.06); }
.st-pill.warn    { color: #f6c971; border-color: rgba(246, 201, 113, 0.35); background: rgba(246, 201, 113, 0.06); }
.st-pill.fail    { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4);  background: rgba(255, 138, 138, 0.06); }
.st-pill.info    { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); background: rgba(141, 197, 242, 0.06); }
.st-pill.propose { color: #C4A6F7; border-color: rgba(196, 166, 247, 0.35); background: rgba(196, 166, 247, 0.06); }
.st-pill.small   { padding: 1px 7px; font-size: 9.5px; }

/* ---------- Stat cards ---------- */
.st-grid { display: grid; gap: 12px; }
.st-grid-4 { grid-template-columns: repeat(4, 1fr); }
.st-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.015);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 90px;
}
.st-stat-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.st-stat-val {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
}
.st-stat-foot { font-size: 11.5px; color: var(--text-soft); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; }
.st-stat-foot.ok   { color: var(--jewel); }
.st-stat-foot.warn { color: #f6c971; }
.st-stat-foot.fail { color: #ffb4b4; }
.st-stat-foot.accent { color: var(--jewel); }

/* ---------- Tables ---------- */
.st-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
}
.st-table-row {
  display: grid;
  grid-template-columns: 32px minmax(220px, 2fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(120px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
}
.st-table-row:last-child { border-bottom: none; }
.st-table-row:hover { background: rgba(160, 234, 188, 0.04); }
.st-cell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 14px;
  color: var(--jewel);
}
.st-cell-icon.ok { color: var(--jewel); border-color: var(--jewel-dim); }
.st-cell-icon.fail { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.3); }
.st-cell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-cell-name { font-size: 13.5px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cell-path { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cell-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-meta-key { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.st-meta-val { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cell-status { justify-self: end; }

/* ---------- Detail rows ---------- */
.st-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.st-detail-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.st-detail-row:last-child { border-bottom: none; }
.st-detail-row.warn { background: rgba(246, 201, 113, 0.04); }
.st-detail-row .key { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--text-soft); }
.st-detail-row .val { font-size: 13px; color: var(--text); }
.st-detail-row .val code { color: var(--jewel); }
.st-detail-row .action { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-soft); }
.st-detail-row .action.ok { color: var(--jewel); }
.st-detail-row a.action,
.st-detail-row button.action { background: none; border: none; padding: 0; cursor: pointer; }

/* ---------- Callouts ---------- */
.st-callout {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.015);
}
.st-callout.warn { border-color: rgba(246, 201, 113, 0.35); background: rgba(246, 201, 113, 0.05); }
.st-callout-tag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f6c971;
  margin-bottom: 6px;
}
.st-callout:not(.warn) .st-callout-tag { color: var(--jewel); }
.st-callout-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
}
.st-callout-title code,
.st-callout-body code { color: var(--jewel); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12.5px; }
.st-callout-body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-soft); max-width: 820px; }
.st-callout-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- Overview-specific ---------- */
.st-overview-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: flex-start;
}
.st-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.st-feed { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.st-feed-row {
  display: grid;
  grid-template-columns: 70px 70px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.st-feed-row:last-child { border-bottom: none; }
.st-feed-time { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-soft); }
.st-feed-kind {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  text-align: center;
  color: var(--text-soft);
}
.st-feed-kind.schema   { color: var(--jewel); border-color: var(--jewel-dim); }
.st-feed-kind.policy   { color: #f6c971; border-color: rgba(246, 201, 113, 0.35); }
.st-feed-kind.share    { color: #C4A6F7; border-color: rgba(196, 166, 247, 0.35); }
.st-feed-kind.test     { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); }
.st-feed-kind.func,
.st-feed-kind.tool     { color: var(--jewel); border-color: var(--jewel-dim); }
.st-feed-kind.storage  { color: var(--text); }
.st-feed-kind.deny     { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-feed-kind.proposal { color: #C4A6F7; border-color: rgba(196, 166, 247, 0.35); }
.st-feed-msg { color: var(--text); }
.st-feed-path { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-soft); white-space: nowrap; }

/* ---------- Checklist ---------- */
.st-checklist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.st-check {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.st-check:last-child { border-bottom: none; }
.st-check.warn { background: rgba(246, 201, 113, 0.04); }
.st-check.fail { background: rgba(255, 138, 138, 0.05); }
.st-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
}
.st-check-mark.ok   { background: rgba(160, 234, 188, 0.12); color: var(--jewel); }
.st-check-mark.warn { background: rgba(246, 201, 113, 0.15); color: #f6c971; }
.st-check-mark.fail { background: rgba(255, 138, 138, 0.15); color: #ffb4b4; }
.st-check-label { color: var(--text); }
.st-check-note { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-soft); }

.st-check.big { grid-template-columns: 28px 1fr auto; padding: 14px 16px; }
.st-check-body { display: flex; flex-direction: column; gap: 4px; }
.st-check-title { font-size: 14px; color: var(--text); font-weight: 500; }
.st-check-meta { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10.5px; color: var(--text-mute); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-check-meta code { color: var(--text-soft); }

/* ---------- Three-pane (schema designer, sync preview) ---------- */
.st-three-pane {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
}
.st-three-pane > .st-tree { border-right: 1px solid var(--line); }
.st-three-pane > .st-canvas { border-right: 1px solid var(--line); }
.st-three-pane.preview { grid-template-columns: 200px 1fr 300px; }

.st-tree {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.18);
  max-height: 720px;
  overflow-y: auto;
}
.st-tree-search { padding: 10px; border-bottom: 1px solid var(--line); }
.st-tree-search input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
}
.st-tree-group { padding: 8px 0 4px; border-bottom: 1px solid var(--line); }
.st-tree-group:last-child { border-bottom: none; }
.st-tree-group-label {
  padding: 0 12px;
  margin-bottom: 4px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.st-tree-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 12px;
  text-decoration: none;
  color: var(--text-soft);
  font-size: 12.5px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.st-tree-row:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.st-tree-row.active { color: var(--text); background: rgba(160, 234, 188, 0.08); }
.st-tree-glyph { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12px; color: var(--jewel); }
.st-tree-name { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; }
.st-tree-meta { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; color: var(--text-mute); }
.st-tree-tag {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--text-mute);
}
.st-tree-tag.pii  { color: #f6c971; border-color: rgba(246, 201, 113, 0.35); }
.st-tree-tag.warn { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-tree-tag.info { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); }

/* ---------- Canvas (table detail) ----------
   No max-height: the canvas grows with its content so the Data tab can show
   all rows without internal scrolling. The tree + inspector keep their own
   height caps so long sidebars scroll independently. */
.st-canvas { display: flex; flex-direction: column; min-width: 0; }
.st-canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  position: sticky;
  top: 0;
  z-index: 1;
}
.st-canvas-title { display: flex; align-items: center; gap: 10px; }
.st-canvas-title h2 { margin: 0; font-size: 17px; font-weight: 500; color: var(--text); }
.st-canvas-glyph { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 16px; color: var(--jewel); }
.st-canvas-actions { display: inline-flex; gap: 6px; }
.st-canvas-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 18px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.st-canvas-meta > div { display: flex; gap: 8px; align-items: baseline; }
.st-canvas-meta .key { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); min-width: 88px; }
.st-canvas-meta code { color: var(--jewel); }

.st-columns { display: flex; flex-direction: column; }
.st-columns-head, .st-column-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 110px 160px 160px minmax(220px, 2fr);
  gap: 12px;
  align-items: center;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.st-columns-head {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(0, 0, 0, 0.2);
}
.st-column-row.active { background: rgba(160, 234, 188, 0.05); }
.st-column-row code { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; color: var(--text); font-size: 12.5px; }
.st-col-name code { color: var(--jewel); }
.st-col-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-right: 4px;
  color: var(--text-soft);
}
.st-col-flag.pk    { color: var(--jewel); border-color: var(--jewel-dim); }
.st-col-flag.fk    { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); }
.st-col-flag.req   { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, 0.04); }
.st-col-flag.idx   { color: var(--text-soft); }
.st-col-flag.srch  { color: #C4A6F7; border-color: rgba(196, 166, 247, 0.35); }
.st-col-flag.pii   { color: #f6c971; border-color: rgba(246, 201, 113, 0.35); }
.st-col-flag.priv  { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-col-flag.ai-no { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-col-flag.warn  { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.06); }

.st-canvas-foot {
  margin-top: auto;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.18);
  flex-wrap: wrap;
}
.st-canvas-foot .st-btn-primary { margin-left: auto; }

/* ---------- Inspector ----------
   No max-height: lets the inspector grow to fit its content so the right
   column never shows a scrollbar when the rest of the row has room. The
   grid stretches all three columns to the tallest, so canvas + tree + this
   pane stay aligned. */
.st-inspector {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.22);
}
.st-inspector-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.st-inspector-head h3 { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--text); }
.st-inspector-head h3 code { color: var(--jewel); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; }
.st-inspector-section { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.st-inspector-section:last-child { border-bottom: none; }
.st-inspector-section-head {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.st-inspector-hint { margin: 0; font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }
.st-inspector-warn { margin: 0; font-size: 11.5px; color: #f6c971; line-height: 1.5; }
.st-inspector-warn code { color: var(--jewel); }
.st-inspector-foot { padding: 12px 16px; display: flex; gap: 6px; border-top: 1px solid var(--line); margin-top: auto; }

/* ---------- Form rows ---------- */
.st-form-row { display: flex; flex-direction: column; gap: 4px; }
.st-form-row label {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.st-form-row input, .st-form-row select, .st-form-row textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 9px;
  font-size: 12.5px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--text);
}
.st-form-row input:focus, .st-form-row select:focus, .st-form-row textarea:focus {
  outline: none;
  border-color: var(--jewel-dim);
  box-shadow: 0 0 0 1px var(--jewel-dim);
}
.st-form-row.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.st-form-row.checkbox label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text); font-family: inherit; }
.st-form-row.checkbox input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--jewel); }
.st-form-row.warn-row label { color: #f6c971; }
.st-form-row .st-form-row-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-form-row .st-form-row-inline .muted { color: var(--text-soft); font-size: 12px; }

.st-code-input {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace !important;
  font-size: 12px !important;
  line-height: 1.5;
  resize: vertical;
}

.st-inline-select {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--jewel);
  cursor: pointer;
}

/* ---------- CSV importer (schema drafts) ---------- */
.csv-importer {
  scroll-margin-top: 86px;
}
.csv-importer-head {
  align-items: flex-start;
}
.csv-importer-sub {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 820px;
}
.csv-importer-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.csv-importer-steps > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.012);
}
.csv-importer-steps span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--jewel-dim);
  border-radius: 50%;
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
}
.csv-importer-steps strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.csv-importer-steps small {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}
.csv-importer-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
}
.csv-importer-panel {
  min-width: 0;
  padding: 18px;
}
.csv-importer-panel + .csv-importer-panel {
  border-left: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}
.csv-file-row {
  margin-bottom: 14px;
}
.csv-file-picker {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  min-height: 64px;
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.csv-file-picker:hover {
  border-color: var(--jewel-dim);
}
.csv-file-picker.dragging {
  border-color: var(--jewel);
  background: rgba(141, 242, 197, 0.065);
}
.csv-file-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.csv-file-picker span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}
.csv-file-picker-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.csv-file-picker-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}
.csv-file-picker-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  line-height: 1.4;
}
.csv-import-mode {
  margin: 0 0 14px;
  padding: 0;
  border: none;
}
.csv-import-mode legend {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}
.csv-import-mode > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.csv-import-mode-option {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
}
.csv-import-mode-option:hover,
.csv-import-mode-option.active {
  border-color: var(--jewel-dim);
  background: rgba(160, 234, 188, 0.055);
}
.csv-import-mode-option.disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: rgba(255, 255, 255, 0.005);
}
.csv-import-mode-option.disabled:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.005);
}
.csv-import-mode-option input {
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--jewel);
}
.csv-import-mode-option span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.csv-import-mode-option strong {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
}
.csv-import-mode-option small {
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.35;
}
.csv-importer-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}
.csv-importer-help {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 11.8px;
  line-height: 1.4;
}
.csv-importer-help.danger {
  color: #f6c971;
}
.csv-checkbox {
  min-height: 42px;
  padding-bottom: 2px;
  white-space: nowrap;
}
.csv-importer-textarea {
  min-height: 220px;
  resize: vertical;
}
.csv-importer-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.csv-importer-warnings span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid rgba(246, 201, 113, 0.35);
  border-radius: 999px;
  background: rgba(246, 201, 113, 0.06);
  color: #f6c971;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
}
.csv-importer-tab-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.csv-importer-error {
  margin: 10px 0 0;
  color: #ffb4b4;
  font-size: 12.5px;
}
.csv-importer-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.csv-importer-metric {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.csv-importer-metric span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-mute);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.csv-importer-metric strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: 25px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}
.csv-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.csv-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.csv-preview-head strong {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}
.csv-preview-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.csv-preview-scroll {
  overflow-x: auto;
}
.csv-preview table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
}
.csv-preview th,
.csv-preview td {
  max-width: 190px;
  padding: 9px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.csv-preview th:last-child,
.csv-preview td:last-child {
  border-right: none;
}
.csv-preview tbody tr:last-child td {
  border-bottom: none;
}
.csv-preview th {
  background: rgba(0, 0, 0, 0.22);
}
.csv-preview th code {
  display: block;
  color: var(--jewel);
  font-family: inherit;
  font-size: 12px;
}
.csv-preview th span {
  display: block;
  margin-top: 3px;
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.csv-preview td {
  color: var(--text-soft);
}
/* Editable preview column header — rename input + type select + privacy chip.
   Uses the same monospace + inline-form aesthetic as the rest of the importer
   so users feel like they are editing the column directly, not jumping to a
   separate form. */
.csv-preview-table th {
  vertical-align: top;
  min-width: 168px;
}
.csv-col-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  white-space: normal;
}
.csv-col-name-input {
  background: rgba(141, 242, 197, 0.04);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.01em;
  width: 100%;
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.csv-col-name-input:hover {
  border-color: var(--jewel-dim);
}
.csv-col-name-input:focus {
  outline: none;
  border-color: var(--jewel);
  background: rgba(141, 242, 197, 0.08);
}
.csv-col-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.csv-col-type-select {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.csv-col-type-select:hover { border-color: var(--jewel-dim); }
.csv-col-type-select:focus { outline: none; border-color: var(--jewel); }
.csv-col-source {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.csv-col-source code {
  color: var(--text-soft);
  font-size: 10px;
}

/* Privacy chip — golden when auto-detected, green when user confirms,
   neutral when user vetoes. Two action buttons let the user resolve the
   inferred state inline without leaving the preview. */
.csv-col-pii {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 6px 3px 8px;
  border-radius: 4px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.csv-col-pii.inferred {
  background: rgba(246, 201, 113, 0.10);
  border-color: rgba(246, 201, 113, 0.35);
  color: #f6c971;
}
.csv-col-pii.confirmed {
  background: rgba(141, 242, 197, 0.10);
  border-color: var(--jewel-dim);
  color: var(--jewel);
}
.csv-col-pii.vetoed {
  background: rgba(244, 242, 236, 0.04);
  border-color: var(--line);
  color: var(--text-soft);
}
.csv-col-pii-label {
  white-space: nowrap;
}
.csv-col-pii-actions {
  display: inline-flex;
  gap: 4px;
}
.csv-col-pii-btn {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1px 6px;
  font-family: inherit;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.csv-col-pii-btn:hover {
  background: currentColor;
  color: var(--ink);
}
.csv-col-pii-btn.confirm { color: var(--jewel); border-color: var(--jewel-dim); }
.csv-col-pii-btn.veto { color: var(--text-soft); border-color: var(--line); }
.csv-col-pii-btn.revert {
  background: transparent;
  border: none;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-size: 10px;
  color: var(--text-mute);
  cursor: pointer;
  padding: 1px 2px;
}
.csv-col-pii-btn.revert:hover { color: var(--text); background: transparent; }

.csv-preview-empty {
  padding: 40px 16px;
  color: var(--text-mute);
  font-size: 13px;
  text-align: center;
}
.csv-importer-mode-note {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.csv-importer-mode-note.danger {
  padding: 9px 10px;
  border: 1px solid rgba(246, 201, 113, 0.3);
  border-radius: 8px;
  background: rgba(246, 201, 113, 0.055);
  color: #f6c971;
}
.csv-importer-output-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.csv-output-block {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.01);
}
.csv-output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.csv-output-head div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.csv-output-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
}
.csv-output-head span {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
}
.csv-output-head .copy-btn {
  flex: 0 0 auto;
}
.csv-output-code {
  max-height: 430px;
  min-height: 260px;
  border: none;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.55;
}
.csv-draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(160, 234, 188, 0.05);
}
.csv-draft-banner > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.csv-draft-banner .st-eyebrow {
  margin: 0;
}
.csv-draft-banner strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
}
.csv-draft-banner span:last-child {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.csv-draft-banner-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.csv-draft-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 22px;
  color: var(--text-soft);
  font-size: 13px;
}
.csv-draft-empty strong {
  color: var(--text);
  font-size: 15px;
}
.csv-draft-column-row {
  text-decoration: none;
}
.csv-draft-data-wrap {
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.18);
}
.csv-draft-data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
}
.csv-draft-data-table th,
.csv-draft-data-table td {
  max-width: 240px;
  padding: 11px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csv-draft-data-table th:last-child,
.csv-draft-data-table td:last-child {
  border-right: none;
}
.csv-draft-data-table th {
  background: rgba(0, 0, 0, 0.3);
}
.csv-draft-data-table th code {
  display: block;
  color: var(--jewel);
  font-family: inherit;
  font-size: 12px;
}
.csv-draft-data-table th span {
  display: block;
  margin-top: 3px;
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.csv-draft-data-table td {
  color: var(--text-soft);
  font-size: 12.5px;
}
.csv-draft-data-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.012);
}

@media (max-width: 1180px) {
  .csv-importer-shell,
  .csv-importer-output-grid {
    grid-template-columns: 1fr;
  }
  .csv-importer-steps {
    grid-template-columns: 1fr;
  }
  .csv-importer-panel + .csv-importer-panel {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .csv-importer-controls,
  .csv-import-mode > div,
  .csv-importer-stats {
    grid-template-columns: 1fr;
  }
  .csv-checkbox {
    white-space: normal;
  }
  .csv-file-picker {
    grid-template-columns: 1fr;
  }
  .csv-output-code {
    min-height: 220px;
    max-height: 360px;
  }
  .csv-draft-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- SQL console ---------- */
.sql-console {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
  gap: 18px;
  align-items: start;
}
.sql-console-editor,
.sql-console-results {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.012);
  overflow: hidden;
}
.sql-console-toolbar,
.sql-results-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.16);
}
.sql-console-toolbar .st-eyebrow,
.sql-results-head .st-eyebrow {
  margin: 0 0 5px;
}
.sql-console-toolbar h2,
.sql-results-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
}
.sql-console-toolbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.sql-snippets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 18px 0;
}
.sql-console-input {
  display: block;
  width: calc(100% - 36px);
  min-height: 260px;
  margin: 14px 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 13px;
  line-height: 1.65;
  resize: vertical;
}
.sql-console-input:focus {
  outline: none;
  border-color: var(--jewel-dim);
  box-shadow: 0 0 0 1px var(--jewel-dim);
}
.sql-console-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px 18px;
}
.sql-console-note {
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.45;
}
.sql-result-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
}
.sql-console-message {
  margin: 16px 18px 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.sql-console-message.warn {
  border: 1px solid rgba(246, 201, 113, 0.35);
  background: rgba(246, 201, 113, 0.06);
  color: #f6c971;
}
.sql-console-message.fail {
  border: 1px solid rgba(255, 138, 138, 0.35);
  background: rgba(255, 138, 138, 0.06);
  color: #ffb4b4;
}
.sql-console-empty {
  padding: 36px 24px;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.55;
}
.sql-results-scroll {
  overflow: auto;
  max-height: 620px;
}
.sql-results-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
}
.sql-results-table th,
.sql-results-table td {
  max-width: 280px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sql-results-table th:last-child,
.sql-results-table td:last-child {
  border-right: none;
}
.sql-results-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.42);
  color: var(--jewel);
  font-size: 11px;
  font-weight: 500;
}
.sql-results-table td {
  color: var(--text-soft);
  font-size: 12.5px;
}
.sql-results-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.012);
}

@media (max-width: 1100px) {
  .sql-console {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sql-console-actions,
  .sql-console-toolbar,
  .sql-results-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .sql-console-toolbar-actions {
    justify-content: flex-start;
  }
  .sql-console-input {
    min-height: 220px;
  }
}

/* ---------- Diff drawer (schema) ---------- */
.st-diff-drawer {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.st-diff-drawer summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid transparent;
  font-size: 12.5px;
}
.st-diff-drawer summary::-webkit-details-marker { display: none; }
.st-diff-drawer[open] summary { border-bottom-color: var(--line); }
.st-diff-summary .st-eyebrow { margin: 0; }
.st-diff-title { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; color: var(--text); }

.st-diff-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.st-diff-grid > .st-diff-code { border-right: 1px solid var(--line); }
.st-diff-code {
  margin: 0;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.32);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  overflow-x: auto;
}
.st-diff-code code { color: inherit; font-family: inherit; }
.st-diff-impact {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.st-diff-impact-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.st-diff-impact-row:last-of-type { border-bottom: none; }
.st-diff-impact-row .key { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.st-diff-impact-row.warn .key { color: #f6c971; }
.st-diff-impact-row.warn span:last-child { color: #f6c971; }
.st-diff-impact .st-btn { margin-top: 8px; align-self: flex-start; }

/* ---------- Tabs ---------- */
.st-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.st-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  border-radius: 5px;
  color: var(--text-soft);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.st-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.st-tab.active { color: var(--text); background: rgba(160, 234, 188, 0.08); border: 1px solid var(--jewel-dim); padding: 6px 11px; }
.st-tab code { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12px; }
.st-tab-stat {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  color: var(--text-mute);
}
.st-tab-pill {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-mute);
}
.st-tab-pill.warn   { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); }
.st-tab-pill.schema { color: var(--jewel); border-color: var(--jewel-dim); }
.st-tab-pill.auth   { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); }
.st-tab-pill.test   { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); }
.st-tab-pill.share  { color: #C4A6F7; border-color: rgba(196, 166, 247, 0.35); }

/* ---------- Diff page (full diff pane) ---------- */
.st-diff-pane {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.st-diff-pane > .st-diff-code { border-right: 1px solid var(--line); max-height: 540px; }
.st-diff-side { padding: 14px 18px; display: flex; flex-direction: column; gap: 16px; max-height: 540px; overflow-y: auto; }
.st-diff-side-section { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
.st-diff-side-section:last-child { border-bottom: none; }
.st-diff-side-section.warn { background: rgba(246, 201, 113, 0.04); padding: 12px; border-radius: 6px; border: 1px dashed rgba(246, 201, 113, 0.3); }
.st-diff-side-section.info { background: rgba(141, 242, 197, 0.04); padding: 12px; border-radius: 6px; border: 1px dashed rgba(141, 242, 197, 0.3); }
.st-diff-side .st-eyebrow.warn { color: #f6c971; }
.st-diff-side .st-eyebrow.info { color: var(--jewel); }
.st-diff-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.st-diff-tests li { display: inline-flex; align-items: center; gap: 8px; }
.st-warn-line { margin: 0; font-size: 12.5px; color: var(--text); }
.st-warn-line strong { color: #f6c971; }

.st-apply { border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: rgba(0, 0, 0, 0.18); }
.st-apply-row { display: flex; flex-direction: column; gap: 4px; }
.st-apply-row.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.st-apply-row.checkbox label { font-size: 12.5px; color: var(--text); }
.st-apply-row label { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); }
.st-apply-row input, .st-apply-row select { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px; font-size: 12.5px; color: var(--text); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; }
.st-apply-actions { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.05); }
.st-apply-warn { font-size: 12px; color: #f6c971; font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; flex: 1; }
.st-apply-ok { font-size: 12px; color: var(--jewel); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; flex: 1; }

/* ---------- Matrix (policies, privacy) ---------- */
.st-matrix-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.18);
}
.st-matrix {
  display: grid;
  min-width: 100%;
}
.st-matrix-corner, .st-matrix-col {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  position: sticky;
  top: 0;
  z-index: 1;
}
.st-matrix-corner { left: 0; z-index: 2; }
.st-matrix-corner-label { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
.st-matrix-col { display: flex; flex-direction: column; gap: 2px; }
.st-matrix-col-name { font-size: 12px; color: var(--text); }
.st-matrix-col-meta { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; color: var(--text-mute); }

.st-matrix-actor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 0;
}
.st-actor-kind {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  width: fit-content;
  color: var(--text-soft);
}
.st-actor-kind.human    { color: var(--text); border-color: var(--line); }
.st-actor-kind.external { color: #C4A6F7; border-color: rgba(196, 166, 247, 0.35); }
.st-actor-kind.service  { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); }
.st-actor-kind.agent    { color: #F2A876; border-color: rgba(242, 168, 118, 0.35); }
.st-actor-kind.anon     { color: var(--text-mute); }
.st-actor-kind.PII      { color: #f6c971; border-color: rgba(246, 201, 113, 0.35); }
.st-actor-kind.PHI      { color: #f6c971; border-color: rgba(246, 201, 113, 0.35); }
.st-actor-kind.financial { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); }
.st-actor-kind.secret   { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-actor-kind.private  { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); }
.st-actor-name { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12px; color: var(--text); }
.st-actor-meta { font-size: 10.5px; color: var(--text-mute); }

.st-matrix-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--text-soft);
  border-top: none;
  border-left: none;
}
.st-matrix-cell:hover { background: rgba(255, 255, 255, 0.03); }
.st-matrix-cell.allow   { color: var(--jewel); background: rgba(160, 234, 188, 0.06); }
.st-matrix-cell.deny    { color: #ffb4b4; background: rgba(255, 138, 138, 0.05); }
.st-matrix-cell.redact  { color: #f6c971; background: rgba(246, 201, 113, 0.05); }
.st-matrix-cell.propose { color: #C4A6F7; background: rgba(196, 166, 247, 0.05); }
.st-matrix-cell.inherit { color: #8DC5F2; background: rgba(141, 197, 242, 0.05); }
.st-matrix-cell.missing { color: #f6c971; background: rgba(246, 201, 113, 0.07); }
.st-matrix-cell.st-matrix-status.ok   { color: var(--jewel); }
.st-matrix-cell.st-matrix-status.warn { color: #f6c971; }
.st-cell-effect-glyph { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 13px; }
.st-cell-effect-label { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.st-cell-effect {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
}
.st-cell-effect.allow   { background: var(--jewel); }
.st-cell-effect.deny    { background: #ff8a8a; }
.st-cell-effect.redact  { background: #f6c971; }
.st-cell-effect.propose { background: #C4A6F7; }
.st-cell-effect.inherit { background: #8DC5F2; }
.st-cell-effect.missing { background: rgba(246, 201, 113, 0.5); border: 1px dashed #f6c971; }

.st-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 0 0;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  color: var(--text-soft);
}

/* ---------- Private info setup ---------- */
.privacy-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.privacy-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 12px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}
.privacy-step span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--jewel-dim);
  border-radius: 50%;
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
.privacy-step strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.privacy-step p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.privacy-focus {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(141, 242, 197, 0.045);
}
.privacy-focus h2 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
}
.privacy-focus h2 code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--jewel);
  font-size: 18px;
}
.privacy-focus p {
  margin: 8px 0 0;
  max-width: 620px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.privacy-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.privacy-choice {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.privacy-choice.recommended {
  border-color: rgba(141, 242, 197, 0.32);
  background: rgba(141, 242, 197, 0.055);
}
.privacy-choice-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.privacy-choice-head span,
.privacy-choice-head strong {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.privacy-choice-head span { color: var(--text-soft); }
.privacy-choice-head strong {
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--jewel);
  color: #0d0d0d;
  letter-spacing: 0.04em;
}
.privacy-choice h3 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
}
.privacy-choice p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}
.privacy-choice ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  list-style: none;
}
.privacy-choice li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
}
.privacy-choice li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jewel);
}

.privacy-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  padding: 28px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}
.privacy-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 500;
}
.privacy-empty p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
.privacy-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  .privacy-steps,
  .privacy-choice-grid {
    grid-template-columns: 1fr;
  }
  .privacy-choice {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .privacy-step {
    grid-template-columns: 30px 1fr;
    padding: 14px;
  }
  .privacy-focus {
    flex-direction: column;
    padding: 16px;
  }
  .privacy-focus h2 code {
    font-size: 15px;
    word-break: break-word;
  }
  .privacy-choice,
  .privacy-empty {
    padding: 16px;
  }
  .privacy-choice-head {
    flex-direction: column;
  }
}

/* ---------- Simulator ---------- */
.st-sim-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: flex-start; }
.st-sim-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.18); }
.st-sim-form .st-btn-primary { align-self: flex-start; margin-top: 4px; }
.st-sim-result { padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: 16px; }
.st-sim-verdict { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }
.st-sim-verdict-note { font-size: 12.5px; color: var(--text-soft); }
.st-sim-verdict-note code { color: var(--jewel); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; }
.st-sim-stack h4, .st-sim-tests h4 {
  margin: 0 0 8px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 500;
}
.st-sim-stack-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.st-sim-stack-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 12.5px; color: var(--text); line-height: 1.55; }
.st-sim-stack-list li code { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; color: var(--jewel); font-size: 11.5px; }
.st-sim-stack-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--jewel-dim);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10px;
  color: var(--jewel);
}
.st-sim-stack-src {
  display: block;
  margin-top: 2px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  color: var(--text-soft);
  text-decoration: none;
}
.st-sim-stack-src:hover { color: var(--jewel); }
.st-sim-test-list { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); }
.st-sim-test-list li code { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; color: var(--text); }
.st-sim-test-list .ok { color: var(--jewel); font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Privacy templates ---------- */
.st-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.st-template {
  position: relative;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: inherit;
  color: var(--text);
}
.st-template:hover { border-color: var(--jewel-dim); }
.st-template.recommended { border-color: var(--jewel-dim); background: rgba(160, 234, 188, 0.04); }
.st-template-rec {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--jewel);
}
.st-template h3 { margin: 0; font-size: 14px; font-weight: 500; }
.st-template p { margin: 0; font-size: 12px; color: var(--text-soft); line-height: 1.55; }
.st-template-grid-rows { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.06); }
.st-template-row {
  display: grid;
  grid-template-columns: 80px 12px 1fr;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.st-template-row .key { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.st-template-row .val { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; color: var(--text-soft); }

/* ---------- Allowlist (shares) ---------- */
.st-allowlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.st-allowlist-row {
  display: grid;
  grid-template-columns: 22px 200px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.st-allowlist-row:last-child { border-bottom: none; }
.st-allowlist-row.deny { background: rgba(255, 138, 138, 0.04); }
.st-allowlist-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.st-allowlist-mark.ok { background: rgba(160, 234, 188, 0.12); color: var(--jewel); }
.st-allowlist-mark.deny { background: rgba(255, 138, 138, 0.12); color: #ffb4b4; }
.st-allowlist-field { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; color: var(--text); }
.st-allowlist-reason { color: var(--text-soft); font-size: 12px; }

/* ---------- Readiness rollup ---------- */
.st-readiness-rollup { border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: rgba(0, 0, 0, 0.15); display: flex; gap: 24px; align-items: stretch; }
.st-readiness-verdict { padding: 14px 18px; border-radius: 8px; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.st-readiness-verdict.ok { background: rgba(160, 234, 188, 0.08); border: 1px solid var(--jewel-dim); }
.st-readiness-verdict.warn { background: rgba(246, 201, 113, 0.06); border: 1px solid rgba(246, 201, 113, 0.3); }
.st-readiness-score { font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif; font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: var(--text); display: flex; align-items: baseline; gap: 4px; }
.st-readiness-score strong { font-style: italic; color: var(--jewel); font-weight: 400; }
.st-readiness-verdict.warn .st-readiness-score strong { color: #f6c971; }
.st-readiness-score span { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 14px; color: var(--text-soft); }
.st-readiness-label { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); margin-top: 4px; }
.st-readiness-note { margin: 6px 0 0; font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.st-readiness-bar { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.st-readiness-bar-group { display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: center; }
.st-readiness-bar-key { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
.st-readiness-bar-cells { display: flex; gap: 3px; }
.st-readiness-cell { width: 16px; height: 10px; border-radius: 2px; }
.st-readiness-cell.ok   { background: var(--jewel); }
.st-readiness-cell.warn { background: #f6c971; }
.st-readiness-cell.fail { background: #ff8a8a; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .st-shell { grid-template-columns: 200px 1fr; }
  .st-overview-grid { grid-template-columns: 1fr; }
  .st-three-pane { grid-template-columns: 220px 1fr; }
  .st-three-pane > .st-inspector { display: none; }
  .st-sim-grid { grid-template-columns: 1fr; }
  .st-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .st-table-row { grid-template-columns: 32px minmax(160px, 1.5fr) 1fr 1fr auto; }
  .st-table-row > .st-cell-meta:nth-of-type(3) { display: none; }
}
@media (max-width: 760px) {
  .st-shell { grid-template-columns: 1fr; grid-template-rows: 52px auto 1fr; grid-template-areas: "cmd" "aside" "main"; }
  .st-aside { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .st-aside-section { flex: 1; min-width: 200px; }
  .st-cmd { grid-template-columns: 1fr; padding: 8px 10px; gap: 6px; }
  .st-cmd-mid, .st-cmd-right { display: none; }
  .st-three-pane { grid-template-columns: 1fr; }
  .st-three-pane > .st-tree { display: none; }
  .st-readiness-rollup { flex-direction: column; }
  .st-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .st-screen-head { flex-direction: column; align-items: flex-start; }
  .st-table-row { grid-template-columns: 1fr; gap: 4px; }
  .st-detail-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   STUDIO — readability pass
   bigger type · more breathing room · cleaner mobile · plainer
   ============================================================ */

/* Base size up across the studio surface */
.st-shell { font-size: 15px; grid-template-columns: 256px 1fr; grid-template-rows: 60px 1fr; }
.st-aside { padding: 22px 14px; gap: 26px; top: 60px; height: calc(100vh - 60px); }
.st-main { padding: 40px 44px 96px; }

/* Command bar — taller, easier targets */
.st-cmd { padding: 0 22px; }
.st-mark-product { font-size: 12px; letter-spacing: 0.14em; }
/* (Studio mark glyph sizing now lives in the .st-mark .glyph rule above —
   90×28 wordmark image. Override removed so it doesn't get squashed back
   to 24×24.) */
.st-breadcrumb { padding: 6px 13px; font-size: 12px; gap: 9px; }
.st-search input { padding: 10px 14px 10px 42px; font-size: 14px; border-radius: 8px; }
.st-search-key { font-size: 11px; left: 12px; }
.st-build-pill { padding: 6px 13px; font-size: 12px; }
.st-build-pill .dot { width: 8px; height: 8px; }
.st-user-initial { width: 32px; height: 32px; font-size: 13px; }

/* Sidebar — easier to scan, plainer rhythm */
.st-section-label { font-size: 11px; letter-spacing: 0.18em; padding: 0 12px; margin-bottom: 10px; }
.st-nav { gap: 2px; }
.st-nav-link { padding: 10px 13px; font-size: 14px; gap: 10px; min-height: 38px; border-radius: 7px; }
.st-aside-link { font-size: 12px; }

/* Headers — readable for everyone */
.st-screen-head { padding-bottom: 28px; margin-bottom: 32px; gap: 28px; }
.st-eyebrow { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 8px; }
.st-h1 { font-size: 32px; letter-spacing: -0.018em; line-height: 1.1; }
.st-screen-sub { font-size: 15.5px; line-height: 1.6; max-width: 740px; margin-top: 14px; }
.st-screen-sub code { color: var(--jewel); font-size: 14px; }

/* Buttons — bigger touch targets */
.st-btn { padding: 10px 16px; font-size: 14px; border-radius: 7px; min-height: 38px; }
.st-btn.small { padding: 7px 12px; font-size: 13px; min-height: auto; }

/* Sections */
.st-section { margin-bottom: 40px; }
.st-section-head { padding-bottom: 14px; margin-bottom: 18px; }
.st-section-head h2 { font-size: 19px; font-weight: 500; }
.st-section-meta { font-size: 12.5px; }

/* Pills — readable, gentler */
.st-pill { padding: 4px 12px; font-size: 11px; letter-spacing: 0.06em; }
.st-pill.small { padding: 2px 9px; font-size: 10.5px; }

/* Stat cards — bigger numbers, more breathing room */
.st-stat { padding: 22px 24px; gap: 8px; min-height: 124px; border-radius: 10px; }
.st-stat-key { font-size: 11px; letter-spacing: 0.1em; }
.st-stat-val { font-size: 38px; line-height: 1.1; }
.st-stat-foot { font-size: 13px; }

/* Tables — plenty of room */
.st-table { border-radius: 10px; }
.st-table-row { padding: 16px 20px; gap: 22px; min-height: 64px; }
.st-cell-icon { width: 34px; height: 34px; font-size: 16px; border-radius: 6px; }
.st-cell-name { font-size: 15px; font-weight: 500; }
.st-cell-path { font-size: 12px; }
.st-meta-key { font-size: 10.5px; letter-spacing: 0.1em; }
.st-meta-val { font-size: 13.5px; }

/* Detail rows */
.st-detail { border-radius: 10px; }
.st-detail-row { padding: 16px 20px; gap: 24px; grid-template-columns: 220px 1fr auto; }
.st-detail-row .key { font-size: 12px; letter-spacing: 0.06em; }
.st-detail-row .val { font-size: 14px; line-height: 1.55; }
.st-detail-row .val code { font-size: 13px; }
.st-detail-row .action { font-size: 12px; }

/* Forms — readable, hand-friendly */
.st-form-row { gap: 6px; }
.st-form-row label { font-size: 11px; letter-spacing: 0.1em; }
.st-form-row input, .st-form-row select, .st-form-row textarea {
  padding: 10px 13px; font-size: 14px; border-radius: 6px;
}
.st-form-row.checkbox label { font-size: 14px; }
.st-form-row.checkbox input[type="checkbox"] { width: 16px; height: 16px; }
.st-code-input { font-size: 13px !important; line-height: 1.6; }

/* Callouts — give them space */
.st-callout { padding: 22px 26px; border-radius: 12px; }
.st-callout-tag { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 8px; }
.st-callout-title { font-size: 21px; line-height: 1.3; margin-bottom: 8px; }
.st-callout-body { font-size: 14.5px; line-height: 1.6; max-width: 760px; }
.st-callout-actions { gap: 10px; margin-top: 14px; }

/* Three-pane — collapse smarter at smaller widths */
.st-three-pane { grid-template-columns: 240px 1fr 320px; border-radius: 10px; }

/* Tree */
.st-tree-search { padding: 14px; }
.st-tree-search input { padding: 8px 10px; font-size: 13px; border-radius: 6px; }
.st-tree-row { padding: 8px 14px; font-size: 13.5px; gap: 10px; min-height: 36px; }
.st-tree-name { font-size: 13px; }
.st-tree-meta { font-size: 11px; }

/* Canvas */
.st-canvas-head { padding: 18px 22px; }
.st-canvas-title h2 { font-size: 19px; }
.st-canvas-meta { padding: 16px 22px; gap: 10px 28px; font-size: 13px; }
.st-canvas-meta .key { font-size: 11px; min-width: 110px; }
.st-canvas-meta code { font-size: 12.5px; }

/* Schema columns table — scrollable with comfortable spacing */
.st-columns { overflow-x: auto; }
.st-columns-head, .st-column-row { padding: 14px 22px; min-width: 880px; }
.st-columns-head { font-size: 11px; letter-spacing: 0.1em; }
.st-column-row { font-size: 13.5px; }
.st-column-row code { font-size: 13px; }
.st-col-flag { font-size: 10px; padding: 2px 7px; }

/* Inspector */
.st-inspector-head { padding: 18px 20px; }
.st-inspector-head h3 { font-size: 15px; }
.st-inspector-section { padding: 18px 20px; gap: 12px; }
.st-inspector-section-head { font-size: 11px; letter-spacing: 0.12em; }
.st-inspector-hint { font-size: 12.5px; line-height: 1.55; }
.st-inspector-warn { font-size: 13px; line-height: 1.55; }
.st-inspector-foot { padding: 14px 20px; }

/* Diff drawer — readable code */
.st-diff-drawer summary { padding: 14px 22px; }
.st-diff-title { font-size: 13px; }
.st-diff-code { padding: 22px 24px; font-size: 13px; line-height: 1.7; }
.st-diff-impact { padding: 20px 22px; gap: 10px; }
.st-diff-impact-row { font-size: 13px; padding: 5px 0; gap: 12px; grid-template-columns: 150px 1fr; }
.st-diff-impact-row .key { font-size: 11px; }
.st-diff-side { padding: 18px 22px; gap: 20px; }
.st-diff-side-section { gap: 8px; padding-bottom: 18px; }

/* Tabs */
.st-tabs { padding: 5px; gap: 4px; border-radius: 9px; }
.st-tab { padding: 9px 14px; font-size: 13.5px; border-radius: 6px; min-height: 36px; }
.st-tab code { font-size: 13px; }
.st-tab.active { padding: 8px 13px; }

/* Matrix — bigger cells, easier to land on */
.st-matrix-corner, .st-matrix-col { padding: 14px 14px; }
.st-matrix-col-name { font-size: 13px; }
.st-matrix-col-meta { font-size: 11px; }
.st-matrix-actor { padding: 14px 16px; gap: 5px; }
.st-actor-kind { font-size: 10px; padding: 2px 8px; }
.st-actor-name { font-size: 13.5px; }
.st-actor-meta { font-size: 12px; }
.st-matrix-cell { padding: 14px 12px; font-size: 12px; }
.st-cell-effect-glyph { font-size: 16px; }
.st-cell-effect-label { font-size: 10px; }
.st-cell-effect { width: 12px; height: 12px; }
.st-legend { font-size: 12px; padding-top: 14px; gap: 22px; }

/* Simulator */
.st-sim-grid { gap: 22px; }
.st-sim-form { padding: 22px; gap: 14px; border-radius: 10px; }
.st-sim-result { padding: 22px; gap: 22px; border-radius: 10px; }
.st-sim-stack-list li { font-size: 14px; line-height: 1.6; gap: 12px; }
.st-sim-stack-list li code { font-size: 12.5px; }
.st-sim-stack-num { width: 22px; height: 22px; font-size: 11px; }
.st-sim-stack h4, .st-sim-tests h4 { font-size: 11px; letter-spacing: 0.12em; margin-bottom: 10px; }
.st-sim-test-list { font-size: 13px; gap: 6px; }

/* Privacy templates */
.st-template { padding: 22px; gap: 12px; border-radius: 10px; }
.st-template h3 { font-size: 16px; }
.st-template p { font-size: 13.5px; line-height: 1.55; }
.st-template-row { font-size: 12px; padding: 2px 0; }
.st-template-row .key { font-size: 11px; }

/* Allowlist */
.st-allowlist-row { padding: 14px 18px; font-size: 13.5px; gap: 14px; }
.st-allowlist-mark { width: 22px; height: 22px; font-size: 12px; }
.st-allowlist-field { font-size: 13.5px; }
.st-allowlist-reason { font-size: 13px; }

/* Readiness */
.st-readiness-rollup { padding: 26px; gap: 30px; border-radius: 10px; }
.st-readiness-verdict { padding: 18px 22px; min-width: 260px; gap: 6px; border-radius: 9px; }
.st-readiness-score { font-size: 46px; }
.st-readiness-score span { font-size: 16px; }
.st-readiness-label { font-size: 13px; letter-spacing: 0.12em; }
.st-readiness-note { font-size: 14px; line-height: 1.55; }
.st-readiness-bar-group { grid-template-columns: 150px 1fr; gap: 14px; }
.st-readiness-bar-key { font-size: 11px; }
.st-readiness-cell { width: 18px; height: 12px; }

/* Checks */
.st-check { padding: 13px 18px; gap: 14px; font-size: 13.5px; min-height: 50px; }
.st-check-mark { width: 22px; height: 22px; font-size: 12px; }
.st-check-label { font-size: 14px; }
.st-check-note { font-size: 12px; }
.st-check.big { padding: 18px 22px; gap: 18px; min-height: 70px; }
.st-check-title { font-size: 15px; }
.st-check-body { gap: 6px; }
.st-check-meta { font-size: 11px; }

/* Feed rows */
.st-feed-row { padding: 11px 16px; font-size: 13px; gap: 16px; min-height: 46px; grid-template-columns: 80px 80px 1fr auto; }
.st-feed-time { font-size: 11.5px; }
.st-feed-kind { font-size: 10px; padding: 2px 7px; }
.st-feed-msg { font-size: 13px; }
.st-feed-path { font-size: 11.5px; }

/* Apply */
.st-apply { padding: 22px; gap: 14px; border-radius: 10px; }
.st-apply-row label { font-size: 11px; }
.st-apply-row input, .st-apply-row select { padding: 10px 13px; font-size: 14px; border-radius: 6px; }
.st-apply-row.checkbox label { font-size: 14px; }

/* Cell-name truncation guard — prevents the "smashed text" look */
.st-cell-main, .st-cell-meta { min-width: 0; }
.st-cell-name, .st-cell-path, .st-meta-val { overflow: hidden; text-overflow: ellipsis; }

/* ----- Mobile / tablet — much cleaner breakpoints ----- */
@media (max-width: 1180px) {
  .st-shell { grid-template-columns: 232px 1fr; }
  .st-overview-grid { grid-template-columns: 1fr; gap: 28px; }
  .st-three-pane { grid-template-columns: 220px 1fr; }
  .st-three-pane > .st-inspector { display: none; }
  .st-sim-grid { grid-template-columns: 1fr; }
  .st-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .st-table-row { grid-template-columns: 36px minmax(180px, 1.5fr) 1fr 1fr auto; }
  .st-table-row > .st-cell-meta:nth-of-type(3) { display: none; }
  .st-main { padding: 32px 28px 80px; }
}

@media (max-width: 1024px) {
  .st-shell {
    grid-template-columns: 212px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas:
      "cmd cmd"
      "aside main";
  }
  .st-aside {
    position: sticky;
    top: 60px;
    height: calc(100vh - 60px);
    border-right: 1px solid var(--line);
    border-bottom: none;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 14px 10px;
    gap: 18px;
  }
  .st-aside-section { flex: initial; min-width: 0; }
  .st-aside-foot { display: none; }
  .st-cmd { padding: 0 16px; gap: 12px; grid-template-columns: 1fr auto; }
  .st-cmd-mid { display: none; }
  .st-cmd-left { gap: 10px; min-width: 0; }
  .st-breadcrumb { display: none; }
  .st-main { padding: 28px 22px 72px; }
}

@media (max-width: 720px) {
  .st-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr;
    grid-template-areas: "cmd" "aside" "main";
  }
  .st-aside {
    position: static;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px;
    gap: 14px;
    top: 0;
  }
  .st-aside-section { flex: 1; min-width: 190px; }
  .st-shell { font-size: 14px; }
  .st-h1 { font-size: 26px; }
  .st-screen-sub { font-size: 14.5px; }
  .st-screen-head { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 22px; margin-bottom: 24px; }
  .st-screen-actions { flex-wrap: wrap; }
  .st-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-stat { padding: 16px 18px; min-height: auto; }
  .st-stat-val { font-size: 30px; }
  .st-table-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; min-height: auto; }
  .st-table-row > .st-cell-icon { display: none; }
  .st-table-row > .st-cell-status { justify-self: flex-start; }
  .st-table-row > .st-cell-meta { display: flex; flex-direction: row; gap: 6px; align-items: baseline; }
  .st-detail-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .st-three-pane { grid-template-columns: 1fr; }
  .st-three-pane > .st-tree { display: none; }
  .st-feed-row { grid-template-columns: 70px 1fr; gap: 8px; padding: 12px 14px; }
  .st-feed-row > .st-feed-kind { grid-column: 1 / -1; justify-self: start; }
  .st-feed-row > .st-feed-path { display: none; }
  .st-readiness-rollup { flex-direction: column; gap: 22px; padding: 20px; }
  .st-readiness-bar-group { grid-template-columns: 110px 1fr; }
  .st-cmd-right .st-btn { padding: 8px 12px; font-size: 13px; }
  .st-callout { padding: 18px 20px; }
  .st-callout-title { font-size: 18px; }
  .st-callout-body { font-size: 14px; }
  .st-checklist { font-size: 13px; }
  .st-check { padding: 12px 16px; }
  .st-check.big { padding: 14px 16px; }
}

/* ============================================================
   DASHBOARD — welcome state for first-run (no server yet)
   ============================================================ */

.dash-welcome {
  border: 1px solid var(--jewel-dim, rgba(160, 234, 188, 0.25));
  border-radius: 14px;
  padding: 36px 40px 32px;
  background:
    radial-gradient(ellipse at top right, rgba(160, 234, 188, 0.06), transparent 60%),
    rgba(160, 234, 188, 0.03);
  margin-bottom: 32px;
}

.dash-welcome-body { max-width: 720px; }

.dash-welcome-eyebrow {
  margin: 0 0 12px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jewel, #a0eabc);
}

.dash-welcome h2 {
  margin: 0 0 14px;
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--text);
}

.dash-welcome-lede {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
}

.dash-welcome .dash-btn.large {
  font-size: 15px;
  padding: 12px 22px;
}

.dash-welcome-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--text-mute);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
}

.dash-onboarding {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.dash-onboarding-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.dash-onboarding-row:last-child { border-bottom: none; }
.dash-onboarding-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--jewel-dim);
  background: rgba(160, 234, 188, 0.06);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--jewel);
  letter-spacing: 0.04em;
}
.dash-onboarding-row > div { display: flex; flex-direction: column; gap: 4px; }
.dash-onboarding-row strong { font-size: 15px; color: var(--text); font-weight: 500; }
.dash-onboarding-row span { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }
.dash-link { color: var(--jewel); text-decoration: none; }
.dash-link:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .dash-welcome { padding: 24px 22px; }
  .dash-onboarding-row { padding: 14px 16px; gap: 12px; }
}

/* ============================================================
   STUDIO — three-pane: hide inspector on Data / Settings tabs
   so the canvas can use the full width
   ============================================================ */

.st-three-pane.no-inspector {
  grid-template-columns: 240px 1fr;
}
.st-three-pane.no-inspector > .st-inspector { display: none; }

@media (max-width: 1180px) {
  .st-three-pane.no-inspector { grid-template-columns: 220px 1fr; }
}
@media (max-width: 760px) {
  .st-three-pane.no-inspector { grid-template-columns: 1fr; }
}

/* ============================================================
   STUDIO — Schema editing tabs (Structure / Data / Settings)
   ============================================================ */

.st-tab-strip {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.st-tab-strip-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 5px;
  font-size: 13px;
  text-decoration: none;
  color: var(--text-soft);
  font-weight: 500;
}
.st-tab-strip-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
.st-tab-strip-tab.active { color: var(--text); background: rgba(160, 234, 188, 0.1); }
.st-tab-strip-count {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ----- Data view (spreadsheet-style row editor) ----- */
.st-data-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.18);
}
.st-data-toolbar input[type="search"] {
  flex: 1;
  max-width: 320px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text);
}
.st-data-meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text-soft);
}

.st-data-grid {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.18);
  overflow-x: auto;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
}
.st-data-row {
  display: grid;
  grid-template-columns: 90px 110px 110px 120px 110px 140px minmax(180px, 1fr) 110px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  border-left: none;
  border-right: none;
  border-top: none;
  min-width: 970px;
}
.st-data-row.alt { background: rgba(255, 255, 255, 0.012); }
.st-data-row.st-data-row-head {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}
.st-data-row.st-data-row-add {
  cursor: pointer;
  width: 100%;
  border-bottom: none;
  padding: 0;
}
.st-data-row.st-data-row-add:hover { background: rgba(160, 234, 188, 0.04); }

.st-data-cell-head {
  padding: 10px 14px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-data-cell-head:last-child { border-right: none; }
.st-data-cell-name { font-size: 12px; color: var(--text); font-weight: 500; }
.st-data-cell-type {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  text-transform: lowercase;
}

.st-data-cell {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--line);
  padding: 0;
  min-height: 40px;
  position: relative;
}
.st-data-cell:last-child { border-right: none; }
.st-data-cell.private,
.st-data-cell.auto { background: rgba(0, 0, 0, 0.18); }
.st-data-cell-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 8px 14px;
  color: var(--text);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  cursor: text;
}
.st-data-cell-input:focus {
  outline: none;
  background: rgba(160, 234, 188, 0.08);
  box-shadow: inset 0 0 0 2px var(--jewel);
}
.st-data-cell-masked {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--text-soft);
  font-style: italic;
  width: 100%;
}
.st-data-cell-add {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.04em;
}

.st-data-hint {
  margin: 0;
  padding: 14px 22px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}

/* ----- Settings view ----- */
.st-settings {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 760px;
}
.st-settings-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.st-settings-section:last-child { border-bottom: none; }
.st-settings-section h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}
.st-settings-hint {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 600px;
}
.st-settings-help {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: -2px;
}

.st-settings-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.st-settings-list-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.st-settings-list-row:last-child { border-bottom: none; }
.st-settings-list-row code {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  color: var(--jewel);
  font-size: 13px;
}
.st-settings-list-meta { color: var(--text-soft); font-size: 12.5px; }

.st-settings-section.danger { border-color: rgba(255, 138, 138, 0.18); }
.st-settings-section.danger h3 { color: #ffb4b4; }
.st-settings-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.st-settings-danger-row strong { display: block; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.st-settings-danger-row strong.danger-text { color: #ffb4b4; }
.st-settings-danger-row span { font-size: 12.5px; color: var(--text-soft); }

/* ============================================================
   STUDIO — Members screen
   ============================================================ */

.st-members-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.st-members-chart {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.012);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
}
.st-members-chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}
.st-members-chart-head .st-eyebrow { margin-bottom: 4px; }
.st-members-chart-title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  font-family: 'Instrument Serif', 'Fraunces', 'Times New Roman', serif, serif;
  font-style: italic;
}
.st-members-chart-meta {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}

.st-members-side {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.012);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-members-side-head { display: flex; flex-direction: column; gap: 2px; }
.st-members-side-head .st-eyebrow { margin: 0 0 4px; }
.st-members-side-head h3 { margin: 0; font-size: 15px; font-weight: 500; color: var(--text); }

.st-breakdown { display: flex; flex-direction: column; gap: 8px; }
.st-breakdown-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.st-breakdown-label { color: var(--text-soft); font-size: 12.5px; }
.st-breakdown-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.st-breakdown-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--jewel), var(--jewel-soft, #c4f0d6));
  border-radius: 4px;
}
.st-breakdown-val {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  color: var(--text);
  text-align: right;
}

/* Filter bar */
.st-members-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.st-members-filter-search { flex: 1; min-width: 220px; }
.st-members-filter-search input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
}
.st-members-filter-pills { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-members-filter-key {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-right: 4px;
}
.st-filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
}
.st-filter-pill input { position: absolute; opacity: 0; pointer-events: none; }
.st-filter-pill:hover { color: var(--text); border-color: var(--jewel-dim); }
.st-filter-pill.active { color: var(--jewel); border-color: var(--jewel); background: rgba(160, 234, 188, 0.08); }
.st-members-filter-actions { display: inline-flex; gap: 6px; margin-left: auto; }

/* Members table */
.st-members-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.st-members-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) 100px 110px 130px 110px 110px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
}
.st-members-row:last-child { border-bottom: none; }
.st-members-row:hover { background: rgba(160, 234, 188, 0.04); }
.st-members-row.expanded { background: rgba(160, 234, 188, 0.05); }
.st-members-row.st-members-row-head {
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  padding: 11px 18px;
}
.st-members-row.st-members-row-head:hover { background: rgba(0, 0, 0, 0.22); }

.st-members-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.st-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--jewel);
  color: #0d0d0d;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.st-avatar.suspended { background: #f6c971; }
.st-avatar.banned { background: #ff8a8a; }
.st-avatar.invited { background: rgba(141, 197, 242, 0.6); }
.st-members-name-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-members-name-line { font-size: 14.5px; color: var(--text); font-weight: 500; }
.st-members-name-line .muted { color: var(--text-mute); font-style: italic; font-weight: 400; }
.st-members-email { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.st-members-cell { font-size: 13px; color: var(--text); }
.st-members-cell.muted { color: var(--text-soft); font-size: 12.5px; }
.st-members-cell-actions { justify-self: end; font-size: 12px; }
.st-members-cell-actions .st-link { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11.5px; }

.st-role {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-soft);
}
.st-role.owner { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(160, 234, 188, 0.08); }
.st-role.admin { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, 0.04); }
.st-role.member { color: var(--text-soft); }
.st-role.viewer { color: var(--text-mute); }

.st-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.st-status-pill.active { color: var(--jewel); border-color: var(--jewel-dim); background: rgba(160, 234, 188, 0.08); }
.st-status-pill.invited { color: #8DC5F2; border-color: rgba(141, 197, 242, 0.35); background: rgba(141, 197, 242, 0.06); }
.st-status-pill.suspended { color: #f6c971; border-color: rgba(246, 201, 113, 0.4); background: rgba(246, 201, 113, 0.06); }
.st-status-pill.banned { color: #ffb4b4; border-color: rgba(255, 138, 138, 0.4); background: rgba(255, 138, 138, 0.06); }

.st-via {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* Member detail (expanded row) */
.st-member-detail {
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.st-member-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.st-member-detail-head {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 12px;
}
.st-member-detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  font-size: 13px;
}
.st-member-detail-list dt {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
}
.st-member-detail-list dd { margin: 0; color: var(--text); }
.st-member-detail-list dd code { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11.5px; color: var(--jewel); }
.st-member-detail-list dd .ok-text { color: var(--jewel); }
.st-member-detail-list dd .warn-text { color: #f6c971; }
.st-member-detail-list dd .muted { color: var(--text-mute); font-style: italic; }

.st-member-note {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 12px;
}
.st-member-note-time { font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace; font-size: 11px; color: var(--text-mute); display: block; margin-bottom: 4px; }
.st-member-note p { margin: 0; font-size: 13px; color: var(--text); line-height: 1.5; }
.muted.small { color: var(--text-mute); font-size: 12.5px; font-style: italic; }

.st-member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-member-actions .st-btn { padding: 7px 12px; font-size: 12.5px; }

/* Members responsive */
@media (max-width: 1100px) {
  .st-members-hero { grid-template-columns: 1fr; gap: 18px; }
  .st-members-row { grid-template-columns: minmax(200px, 1.5fr) 90px 100px 110px 90px 90px; gap: 12px; padding: 13px 16px; }
  .st-member-detail-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 760px) {
  .st-members-row, .st-members-row.st-members-row-head {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
  }
  .st-members-row.st-members-row-head { display: none; }
  .st-members-row > .st-members-cell-actions { justify-self: flex-start; }
  .st-members-filter { padding: 14px; }
  .st-members-filter-pills { flex-wrap: wrap; }
  .st-members-filter-actions { margin-left: 0; }
}

/* Dashboard working controls */
.copy-btn.failed {
  color: var(--crimson);
  border-color: rgba(255, 138, 138, 0.45);
  background: rgba(255, 138, 138, 0.08);
}
.copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.dashboard-note {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.manual-backup-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.manual-backup-status {
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
}
.manual-backup-status.ok { color: var(--jewel); }
.manual-backup-status.error { color: var(--crimson); }
.inline-confirm-form,
.token-actions form,
.secret-delete-form {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-confirm-form label,
.token-actions label,
.secret-delete-form label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.service-token-manager,
.secrets-manager {
  display: grid;
  gap: 18px;
}

.oauth-provider-settings {
  display: grid;
  gap: 14px;
}

.oauth-provider-list {
  display: grid;
  gap: 12px;
}

.oauth-provider-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.14);
  border-radius: 12px;
}

.oauth-provider-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.oauth-provider-name {
  display: block;
  font-size: 15px;
  color: var(--text);
  font-weight: 500;
}

.oauth-provider-meta,
.oauth-provider-foot {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  line-height: 1.5;
}

.oauth-provider-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px;
}

.oauth-provider-fields label {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.oauth-provider-fields input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  border-radius: 10px;
  padding: 0 12px;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}

.oauth-provider-foot {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.oauth-provider-foot code {
  color: var(--jewel);
}

.oauth-provider-row > .dash-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
.service-token-create,
.secret-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.env-import-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(240px, 1.25fr) auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.env-import-head {
  display: grid;
  gap: 4px;
  align-self: start;
}
.env-import-head strong {
  color: var(--text);
  font-size: 14px;
}
.env-import-head span,
.env-import-upload span,
.env-import-paste span,
.env-import-option,
.env-import-result small {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
}
.env-import-upload,
.env-import-paste {
  display: grid;
  gap: 6px;
}
.env-import-upload input,
.env-import-paste textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
}
.env-import-upload input {
  min-height: 42px;
}
.env-import-paste {
  grid-column: 1 / -1;
}
.env-import-paste textarea {
  min-height: 150px;
  resize: vertical;
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
}
.env-import-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.env-import-result {
  grid-column: 1 / -1;
}
.env-import-result small {
  display: block;
  margin-top: 4px;
}
.secret-form .span-2 { grid-column: span 2; }
.token-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.secret-row {
  grid-template-columns: minmax(180px, 0.8fr) minmax(160px, 0.8fr) minmax(220px, 1.3fr) minmax(160px, auto) minmax(90px, auto);
  gap: 14px;
  align-items: center;
}
.secret-inline-form {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.secret-inline-form input,
.secret-form input,
.service-token-create input {
  width: 100%;
}
.kv-val.secret {
  color: var(--text-soft);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  letter-spacing: 0.08em;
}
.dash-server-switcher {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.dash-server-switcher strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
}
.server-switcher-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.server-switcher-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  text-decoration: none;
}
.server-switcher-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-switcher-card small {
  color: var(--text-mute);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 10.5px;
  text-transform: uppercase;
}
.server-switcher-card.active {
  color: var(--text);
  border-color: var(--jewel-dim);
  background: rgba(160, 234, 188, 0.07);
}
.deployment-gate-details summary {
  cursor: pointer;
  color: var(--jewel);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11.5px;
}
.deployment-gate-details pre {
  margin: 10px 0 0;
  max-width: 360px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.26);
  color: var(--text-soft);
  font-size: 11.5px;
}
.github-deploy-watch {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1.6fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.github-deploy-watch.active {
  border-color: rgba(226, 214, 168, 0.28);
  background: rgba(226, 214, 168, 0.055);
}
.github-deploy-watch div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.github-deploy-watch strong {
  color: var(--text);
  font-size: 14px;
}
.github-deploy-watch p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.35;
}
.github-deploy-watch > span {
  justify-self: end;
  color: var(--text-mute);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
}
.github-deploy-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--jewel);
  box-shadow: 0 0 10px rgba(141, 242, 197, 0.55);
}
.github-deploy-watch.active .github-deploy-dot {
  background: #E2D6A8;
  box-shadow: 0 0 10px rgba(226, 214, 168, 0.5);
  animation: pulse-status 1.6s infinite;
}
.dash-inline-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-inline-form .hint {
  color: var(--text-mute);
}
.dash-inline-form .dash-btn:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.proposal-action-error {
  width: 100%;
  color: var(--crimson);
  font-family: 'Geist Mono', 'SF Mono', Menlo, monospace, monospace;
  font-size: 12px;
}
@media (max-width: 900px) {
  .service-token-create,
  .secret-form,
  .env-import-form,
  .secret-row,
  .secret-inline-form,
  .oauth-provider-row,
  .oauth-provider-fields,
  .dash-server-switcher {
    grid-template-columns: 1fr;
  }
  .secret-form .span-2 { grid-column: auto; }
  .env-import-paste,
  .env-import-result {
    grid-column: auto;
  }
  .oauth-provider-row > .dash-btn {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }
  .server-switcher-grid { justify-content: flex-start; }
  .github-deploy-watch {
    grid-template-columns: 1fr;
  }
  .github-deploy-watch > span {
    justify-self: start;
  }
}