/* ============================================================
   Orchard dashboard — minimal light theme
   Design tokens: one warm-neutral surface system, thin borders,
   a single accent. No gradients, no heavy shadows.
   ============================================================ */
:root {
  --bg: #f7f6f3;          /* page background (warm off-white, never dark) */
  --surface: #ffffff;     /* cards, bars */
  --surface-2: #f4f3f0;   /* subtle fills (code block, inline rows) */
  --border: #e7e5df;      /* hairline borders */
  --border-strong: #d8d5cc;
  --text: #1d1c1a;        /* primary text */
  --muted: #6f6c64;       /* secondary text */
  --accent: #2f6fe0;      /* project blue — used sparingly */
  --accent-soft: #e4eefb;
  --brand-gold: #0d121c;
  --danger: #b4453a;
  --radius: 10px;
  --radius-sm: 7px;
  /* System UI sans for nav, CTAs, and landing screen 1. Logo keeps --brand-font;
     landing copy (screen 2) keeps Libre Baskerville via --font. */
  --ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --brand-font: "Outfit", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

/* The root background is what the OS rubber-band overscroll reveals at the very
   top/bottom. Keep it white on every page (the body's warm off-white only fills
   the page content, never the overscroll gutter). */
html {
  background: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Hide focus rings site-wide (pointer + keyboard). Active/hover states show
   what's selected; no blue outline after click. */
:focus,
:focus-visible {
  outline: none;
}

.hidden,
[hidden] {
  display: none !important;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.btn:hover {
  background: var(--surface-2);
}

/* Liquid-glass (halo-lens) button variant — transparent surface so the frosted
   refraction shows the card behind, matching the dashboard cards. Requires the
   inner .halo-lens + .halo-lens-panel-content spans. The shared .halo-lens-panel
   sets padding:0 + a heavy card shadow, so restore button padding + a light one. */
.btn.halo-lens-panel {
  padding: 10px 16px;
  background: transparent;
  border: none;
  --halo-lens-panel-radius: 12px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn.halo-lens-panel:hover {
  background: transparent;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 3px 10px rgba(29, 28, 26, 0.1);
}
.btn.halo-lens-panel:active { transform: translateY(0); }
.btn.halo-lens-panel .halo-lens-panel-content { flex-direction: row; }
/* "Show usage details" toggle — same liquid-glass pill treatment as the Upgrade
   CTA (custom halo-lens values below in .upgrade-pill), just a compact size. */
.btn.halo-lens-panel.usage-toggle-btn {
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  min-width: 96px; /* same width whether it reads "Details" or "Hide" */
}
.btn.halo-lens-panel.usage-toggle-btn .halo-lens-panel-content { justify-content: center; }

.btn-google {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
}

.btn-ghost {
  padding: 8px 12px;
  font-size: 13px;
  background: transparent;
  border-color: var(--border);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

/* Landing topbar "Dashboard" (logged in): drop the box + serif anchor styling so
   it reads as a clean system-ui text button, not an unstyled link. */
#landing-dashboard {
  border: none;
  background: transparent;
  font-family: var(--ui-font);
  text-decoration: none;
}
#landing-dashboard:hover {
  background: transparent;
}

/* Compact "Continue with Google" CTA for the landing topbar — sleek black pill
   to match the landing's dark accents (auto width, unlike the full-width
   .btn-google used inside the auth card). */
.btn-signin {
  gap: 9px;
  padding: 7px 15px 7px 7px;
  font-family: var(--ui-font);
  font-size: 12.5px;
  font-weight: 600;
  color: #18181b;
  background: #ffffff;
  border: 1px solid rgba(18, 22, 31, 0.12);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(18, 22, 31, 0.05),
    0 2px 8px rgba(18, 22, 31, 0.06);
  transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.btn-signin:hover {
  background: #f7f7f8;
  box-shadow:
    0 1px 3px rgba(18, 22, 31, 0.05),
    0 3px 9px rgba(18, 22, 31, 0.06);
}
.btn-signin:active {
  transform: translateY(0.5px);
}
.btn-signin svg {
  width: 16px;
  height: 16px;
  padding: 3px;
  background: #ffffff;
  border-radius: 50%;
  box-sizing: content-box;
}
.btn-signin:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "Connect Orchard" CTA (logged out) — clicking it reveals the Google login in
   a small popover below. */
/* Plain text "Sign in" — no pill, just the label. */
.btn-connect {
  padding: 6px 4px;
  font-family: var(--ui-font);
  font-size: 15px;
  font-weight: 600;
  color: #18181b;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: opacity 0.14s ease;
}
.btn-connect:hover {
  background: transparent;
  box-shadow: none;
  opacity: 0.6;
}
.btn-connect:active {
  opacity: 0.5;
}

.connect-wrap {
  position: relative;
  display: inline-flex;
}

.connect-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  animation: connect-pop-in 0.16s ease both;
}
.connect-pop .btn-signin {
  width: 100%;
  white-space: nowrap;
}

@keyframes connect-pop-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Auth screens (loading / logged out)
   ============================================================ */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-loading {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 15px;
}

.auth-card {
  width: min(380px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.brand {
  font-family: var(--brand-font);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--brand-gold);
}

.auth-tagline {
  margin: 12px 0 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   App shell (logged in): topbar + sidebar + content
   ============================================================ */
.app {
  min-height: 100vh;
  display: block;
  height: auto;
  overflow: visible;
  background: #ffffff;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 60px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.brand-sm {
  font-size: 30px;
}

.topbar-brand-group {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.brand-link {
  color: var(--brand-gold);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.topbar-nav-link {
  flex-shrink: 0;
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s ease;
}

.topbar-nav-link:hover {
  color: var(--text);
}

/* Current page: the matching nav link goes solid/black (e.g. Docs on docs.html,
   Connect on the Connect page). */
.topbar-nav-link[aria-current="page"] {
  color: var(--text);
}

.brand-link:hover {
  color: #060a10;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}

/* Avatar is the account-menu trigger; the Log out action lives in the popover
   (mirrors the .connect-wrap / .connect-pop sign-in pattern). */
.avatar-wrap {
  position: relative;
  display: inline-flex;
}
.avatar-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  display: inline-flex;
}
.avatar-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  animation: connect-pop-in 0.16s ease both;
}
/* Log out reads as the same white pill as the "Continue with Google" CTA
   (.btn-signin) — rounded-full, subtle border + shadow, same hover. */
.avatar-pop .btn-ghost {
  width: 100%;
  white-space: nowrap;
  padding: 8px 18px;
  font-family: var(--ui-font);
  font-size: 12.5px;
  font-weight: 600;
  color: #18181b;
  background: #ffffff;
  border: 1px solid rgba(18, 22, 31, 0.12);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(18, 22, 31, 0.05),
    0 2px 8px rgba(18, 22, 31, 0.06);
  transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.avatar-pop .btn-ghost:hover {
  background: #f7f7f8;
  box-shadow:
    0 1px 3px rgba(18, 22, 31, 0.05),
    0 3px 9px rgba(18, 22, 31, 0.06);
}
.avatar-pop .btn-ghost:active {
  transform: translateY(0.5px);
}

/* Logged-in dashboard topbar — fixed + solid (document scroll, native rubber-band). */
.app .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

/* Optically center the nav links against the heavy Orchard wordmark (Outfit 800
   sits a touch high) — same nudge the landing topbar uses. */
.app .topbar-brand-group .topbar-nav-link {
  position: relative;
  top: 3px;
  display: none;
}

/* Public Connect page: Docs / Connect / Pricing in topbar. Logged-in dashboard
   Connect keeps the app shell topbar minimal and uses the sidebar for nav. */
body.connect-public .topbar-brand-group .topbar-nav-link {
  display: inline-flex;
}

/* Public Connect view (logged out): show only the Connect instructions.
   Projects/Billing need a session, so hide them along with the avatar/Log out,
   and surface a Sign in button instead. */
body.connect-public {
  --font: var(--ui-font);
  font-family: var(--ui-font);
}

body.connect-public .nav-item[data-view="storage"],
body.connect-public .nav-item[data-view="billing"],
body.connect-public #avatar-wrap {
  display: none;
}
body.connect-public #connect-signin-wrap {
  display: inline-flex !important;
}

/* No sidebar on the public Connect page — the lone Connect tab is redundant
   here (the page already IS Connect), and an empty glass pill looks off. */
body.connect-public .sidebar {
  display: none;
}

/* Without the sidebar the content would stretch the full shell; keep it at a
   comfortable reading width, centered. */
body.connect-public .content {
  max-width: 860px;
  margin: 0 auto;
}

/* Connect page uses the landing's simple footer: drop the multi-column block,
   make the divider span full width, and center the © + links row (matches the
   landing footer). */
body.connect-public .footer-top {
  display: none;
}
body.connect-public .dashboard-footer {
  max-width: none;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
body.connect-public .footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
  border-top: none;
  padding-top: 0;
}
/* Match the landing footer's 13px text (dashboard footer uses 12px). */
body.connect-public .footer-copy,
body.connect-public .footer-legal-link {
  font-size: 13px;
}

/* Keep the Connect view at the same comfortable 760px reading width in the
   logged-in dashboard as on the public Connect page — without this the sidebar
   Connect view stretched to the full content width. */
.view[data-view="connect"] {
  max-width: 860px;
  margin-inline: auto;
  margin-top: 48px; /* start lower under the topbar (Docs matches) */
  --font: var(--ui-font);
  font-family: var(--ui-font);
}

/* Connect view typography — system UI sans; code blocks keep var(--mono). */
.view[data-view="connect"] .view-title {
  /* Fixed size (not vw): the Docs title renders inside an iframe where `vw`
     resolves against the iframe width, not the window — a vw-based size would
     make the two titles differ. Keep both at a fixed 36px so they match. */
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.view[data-view="connect"] .view-sub {
  font-size: 18px;
  padding-bottom: 20px;
}

.account {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.account-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.account-name {
  font-size: 13px;
  font-weight: 600;
}

.account-email {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell {
  display: flex;
  align-items: flex-start;
  padding-top: 60px;
  overflow: visible;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 0; /* float-only: the pill is absolutely positioned, so the sidebar
               reserves no flow width — this lets the Projects panel center on
               the page instead of being pushed right by the nav. */
  flex-shrink: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px); /* fill viewport below the topbar */
  z-index: 10; /* expanded capsule floats above the project cards */
}

/* visionOS-style vertical TabView: a tall capsule of liquid glass holding the
   nav items. Stadium ends (radius 999px) read as a long vertical oval. */
/* Collapsed: a narrow icon-only capsule. On hover the bar expands, slides
   right so ~half of it floats over the project area, the corners relax from a
   full stadium to a rounded rectangle, and the labels fade in (visionOS
   sidebar TabView behavior). */
.sidebar-tabbar.halo-lens-panel {
  /* Same corner radius collapsed and expanded so hover only animates WIDTH —
     a smooth rightward slide with no shape morph. At the 50px collapsed width
     this 26px radius still caps to a vertical capsule (identical to before);
     at the 120px expanded width it reads as a rounded rectangle. */
  --halo-lens-panel-radius: 26px;
  --halo-lens-panel-blur: 7px;
  /* tint uses the shared halo-lens default (common glass transparency) */
  position: absolute;
  left: 35px; /* straddle the Projects panel's left edge (overlaps it);
                 expands rightward over the cards on hover */
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  z-index: 1;
  /* Grow rightward only (left edge stays fixed) so the pointer always stays
     over the bar — this is what prevents the hover on/off flicker. */
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-tabbar.halo-lens-panel:hover {
  /* Fits the "Projects" label snugly (no right padding) and lands exactly half
     over the Projects panel: left(50) + 120/2 = 110 = panel's left edge. */
  width: 125px;
  z-index: 30;
}

.sidebar-tabbar-inner {
  gap: 6px;
  padding: 7px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  /* Libre Baskerville only ships 400/700, so fake a semibold for the labels
     with a thin text-stroke; the active item goes to real bold below. */
  font-weight: 400;
  -webkit-text-stroke: 0.32px currentColor;
}

.nav-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

/* Bolder icon strokes (overrides the inline stroke-width="1.6" on the SVGs). */
.nav-ico svg {
  stroke-width: 2;
}

.nav-label {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sidebar-tabbar.halo-lens-panel:hover .nav-label {
  opacity: 1;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.4);
  color: var(--text);
}

.nav-item:hover .nav-ico {
  color: var(--text);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-weight: 700; /* focused item: real bold (vs the semibold others) */
  -webkit-text-stroke: 0.5px currentColor;
  box-shadow: 0 1px 2px rgba(29, 28, 26, 0.12),
    0 3px 10px -2px rgba(29, 28, 26, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Focused/active item: black icon, extra-bold stroke. */
.nav-item.active .nav-ico {
  color: var(--text);
}
.nav-item.active .nav-ico svg {
  stroke-width: 2.4;
}

/* ---------- Content ---------- */
.content {
  flex: 1;
  min-width: 0;
  padding: 28px 28px 64px;
}

.view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.view-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* Projects list & Billing headings — serif weight (not project detail). */
.view[data-view="storage"] #projects-list .view-title,
.view[data-view="billing"] .view-title {
  font-size: 28px;
  -webkit-text-stroke: 0.5px currentColor;
}

.view-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.usage-pill {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.card-title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

/* ---------- Connect-Cursor 1·2·3 step panel ---------- */
/* Connect view: Cursor / Claude Code tab switcher */
.connect-tabs {
  display: flex;
  width: fit-content;
  gap: 4px;
  margin: 0 auto 10px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  /* Halo-lens liquid glass (same tokens as the sidebar tabbar panel). */
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.54) 55%,
    rgba(247, 246, 243, 0.62) 100%
  );
  -webkit-backdrop-filter: blur(7px) saturate(195%) brightness(1.05);
  backdrop-filter: blur(7px) saturate(195%) brightness(1.05);
  box-shadow:
    0 1px 2px rgba(29, 28, 26, 0.08),
    0 8px 18px -6px rgba(29, 28, 26, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -10px 22px -14px rgba(29, 28, 26, 0.1);
}

.connect-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

/* Phones: the 4-client pill row (~460px) is wider than a small viewport — wrap
   into two centered rows instead of clipping/forcing horizontal page scroll.
   Scoped to exclude the project-detail tab bar (.proj-tabs), which already
   handles overflow with its own horizontal scroll. */
@media (max-width: 520px) {
  .connect-tabs:not(.proj-tabs) {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    border-radius: 24px;
  }
  .connect-tabs:not(.proj-tabs) .connect-tab {
    padding: 8px 14px;
  }
}

.tab-logo {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tab-logo--claude {
  color: #d97757;
}

.tab-logo--codex {
  color: #1f6feb;
}

.tab-logo--antigravity {
  color: #e35d52;
}

.connect-tab:hover {
  color: var(--text);
}

.connect-tab.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(29, 28, 26, 0.1),
    0 2px 6px rgba(29, 28, 26, 0.08);
}

/* Active pill picks up a soft, bright brand tint per agent. */
.connect-tab[data-client="cursor"].is-active {
  background: linear-gradient(135deg, #f6f6f7 0%, #e7e7ea 100%);
}
.connect-tab[data-client="claude"].is-active {
  background: linear-gradient(135deg, #fff3ec 0%, #fde3d6 100%);
}
.connect-tab[data-client="codex"].is-active {
  background: linear-gradient(135deg, #eef4ff 0%, #dbe8fe 100%);
}
.connect-tab[data-client="antigravity"].is-active {
  background: linear-gradient(135deg, #fff1ef 0%, #fcdcd6 100%);
}

.connect-subtabs {
  display: flex;
  width: fit-content;
  gap: 4px;
  margin: 0 auto 10px;
  /* ~15% smaller than the main bar (.connect-tabs is 5px). */
  padding: 4.25px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  /* Halo-lens liquid glass (matches .connect-tabs). */
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.54) 55%,
    rgba(247, 246, 243, 0.62) 100%
  );
  -webkit-backdrop-filter: blur(7px) saturate(195%) brightness(1.05);
  backdrop-filter: blur(7px) saturate(195%) brightness(1.05);
  box-shadow:
    0 1px 2px rgba(29, 28, 26, 0.08),
    0 8px 18px -6px rgba(29, 28, 26, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -10px 22px -14px rgba(29, 28, 26, 0.1);
}

.connect-subtab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* ~15% smaller than the main tab (.connect-tab: 8px 20px / 13px). */
  padding: 6.8px 17px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.connect-subtab:hover {
  color: var(--text);
}

.connect-subtab.is-active {
  color: var(--text);
  background: var(--surface);
  box-shadow:
    0 1px 2px rgba(29, 28, 26, 0.1),
    0 2px 6px rgba(29, 28, 26, 0.08);
}

/* Active subtab pill picks up the same brand tint as its agent. */
.connect-panel[data-client="cursor"] .connect-subtab.is-active {
  background: linear-gradient(135deg, #f6f6f7 0%, #e7e7ea 100%);
}
.connect-panel[data-client="claude"] .connect-subtab.is-active {
  background: linear-gradient(135deg, #fff3ec 0%, #fde3d6 100%);
}
.connect-panel[data-client="codex"] .connect-subtab.is-active {
  background: linear-gradient(135deg, #eef4ff 0%, #dbe8fe 100%);
}
.connect-panel[data-client="antigravity"] .connect-subtab.is-active {
  background: linear-gradient(135deg, #fff1ef 0%, #fcdcd6 100%);
}

/* Numbers stay fixed in a top-left cluster (grid row 1); the active step's
   description fills the full-width row beneath them. `display: contents` lets
   each step's number + text place directly into this grid. */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, max-content) 1fr;
  align-items: start;
  column-gap: 14px;
  row-gap: 14px;
  margin: 0 0 22px;
}
.step {
  display: contents;
}
.step-num {
  grid-row: 1;
}
.step-text {
  grid-row: 2;
  grid-column: 1 / -1;
}

/* Only the active step shows its description. */
.step:not(.is-active) .step-text {
  display: none;
}

/* Plain numerals: gray when inactive, bold black when active. No box. */
.step-num {
  color: #c2bfb6;
  font-family: var(--ui-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  transition: color 0.14s ease;
}
.step.is-active .step-num {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.step-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
}
.step-text strong {
  font-weight: 600;
  color: var(--text);
}
.step-text code,
.note code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Clickable stepper: each step is a button that reveals its detail below.
   Step 1 → the prompt card; steps 2 & 3 → a screenshot slot. */
.step {
  text-align: left;
  font-family: inherit;
}
.step-num {
  cursor: pointer;
}
.step:not(.is-active):hover .step-num {
  color: var(--text);
}

.step-details {
  margin-top: 4px;
}

/* Screenshot slot for steps 2 & 3 — drop an <img class="step-shot-img"> in. */
.step-shot {
  margin: 0;
}
.step-shot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 16px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
  overflow: hidden;
}
.step-shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

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

/* ---------- Steps + code block ---------- */
.steps {
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
}

.steps code,
.note code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 5px;
}

.card-lead {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
}

.card-lead code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 5px;
}

.code-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1e2733;
  background: #0e131b;
  box-shadow: 0 1px 2px rgba(13, 18, 28, 0.25);
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 9px 14px;
  background: #151c26;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.code-file {
  font-family: var(--mono);
  font-size: 12px;
  color: #8a9bb2;
}

.code-wrap pre {
  margin: 0;
  padding: 16px;
  /* Cap tall prompts and scroll inside instead of stretching the card. */
  max-height: 320px;
  overflow: auto;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: #cdd8e8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Syntax colors for the connect prompts */
.code-wrap .tok-key {
  color: #9cdcfe;
}

.code-wrap .tok-str {
  color: #c3e88d;
}

.code-wrap .tok-inline {
  color: #82aaff;
}

.code-wrap .code-comment {
  color: #6a7a90;
}

/* Inline help screenshot under a card's code block. */
.step-screenshot {
  margin: 16px 0 0;
}

.step-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.step-screenshot figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Callout under the prompt: the one-time manual toggle + approve step. */
.connect-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text);
  border-radius: var(--radius-sm);
}

.connect-note p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.connect-note-title {
  margin: 0 0 4px !important;
  color: var(--text) !important;
  font-weight: 600;
  font-size: 14px !important;
}

.connect-note strong {
  color: var(--text);
  font-weight: 600;
}

/* ---- Runtime API key rows (project detail) ---- */
.key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.key-row:first-child {
  border-top: none;
}
.key-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.key-prefix {
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--text);
}
/* Revoke reads as an inline text action in the keys table — drop the border. */
#project-detail .svc-console:has(#api-keys-list) .t-actions .mini-btn.danger {
  border: none;
}

/* Signals the stored value is a one-way hash — the full key is never kept. */
.key-hashed-tag {
  margin-left: 8px;
  font-family: var(--ui-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  vertical-align: middle;
}
.mini-btn.danger {
  color: #b42318;
  border-color: #f0c2bc;
}
.mini-btn.danger:hover {
  background: #fdeceb;
}

#create-key-btn {
  margin-left: auto;
}
.new-key {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
}
.new-key-warn {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #b42318;
}
.new-key-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.new-key-value {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  word-break: break-all;
}

/* ---- Database section (project detail) ---- */
.db-section-usage {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.db-table {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.db-table:last-child {
  margin-bottom: 0;
}
.db-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: background 0.12s ease;
}
.db-table-head:hover {
  background: var(--surface-2);
}
.db-table-head.open {
  border-bottom: 1px solid var(--border);
}
.db-caret {
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.db-table-head.open .db-caret {
  transform: rotate(90deg);
}
.db-table-name {
  font-weight: 600;
  font-size: 14px;
  font-family: var(--mono);
}
.db-table-head .row-sub {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}
.db-rows {
  padding: 12px 14px;
}
.db-rows .muted {
  margin: 0;
}
.db-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.db-data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.db-data th,
.db-data td {
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.db-data th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.db-data tbody tr:last-child td {
  border-bottom: none;
}
.db-data tbody tr:nth-child(even) td {
  background: var(--surface-2);
}
.db-rows .usage-note {
  margin: 8px 0 0;
}

/* Load-more paging button under a table's rows. */
.db-load-more {
  margin-top: 10px;
}

.copy-btn {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: #aeb9c9;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 11px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.copy-btn:hover {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
}

.note,
.pricing {
  color: var(--muted);
  font-size: 13px;
}

.note {
  margin: 12px 0 0;
}

.pricing {
  margin: 0 0 16px;
}

/* ---------- Generic lists / rows ---------- */
.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.muted {
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 14px;
  margin: 0;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.row-title {
  font-weight: 600;
  font-size: 14.5px;
}

.row-sub {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.badge.on {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge.on::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.badge.off {
  background: var(--surface-2);
  color: var(--muted);
}

/* ---------- Small buttons (rename / revoke / delete) ---------- */
.mini-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}

.mini-btn:hover {
  background: var(--surface-2);
}

.mini-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.mini-btn.danger {
  color: var(--danger);
  border-color: #e4cac6;
}

.mini-btn.danger:hover {
  background: #faf0ef;
}

/* ---------- Projects + files ---------- */
.project {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.project > .row {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}

/* Header left group: collapse chevron + project name */
.project-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.chevron-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.chevron-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

/* Collapsed → chevron points right, file list hidden */
.chevron-btn[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

.files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2);
}

.files.collapsed {
  display: none;
}

/* ---------- Project card monogram ---------- */
/* ---------- Projects: toolbar + grid + usage panel ---------- */
/* Animated cloudy-sky panel behind just the Projects area — drifting
   clouds give the liquid-glass cards living motion to refract. */
#projects-list {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  height: 476px;
  padding: 24px 24px 0;
  border-radius: 28px;
  background: linear-gradient(140deg, #c8e1fa 0%, #a6c8f2 45%, #7aaae8 100%);
  width: 860px;
  max-width: calc(100% - 160px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}

#billing-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(140deg, #c8e1fa 0%, #a6c8f2 45%, #7aaae8 100%);
  width: 860px;
  max-width: calc(100% - 160px);
  margin-inline: auto;
  min-height: 476px;
}

/* Docs view: embedded docs page grows with its content; the dashboard scrolls
   as one page (header + body move together). */
.view[data-view="docs"] {
  margin-top: 24px;
}

.content:has(.view[data-view="docs"]:not(.hidden)) {
  padding-bottom: 61px;
}

.docs-frame {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
}

/* Vertically center the Projects list, Billing panel, and project detail in the
   viewport (below the fixed topbar). Requires .shell flex — not block. */
.view[data-view="storage"],
.view[data-view="billing"] {
  min-height: calc(100vh - 152px); /* viewport − topbar (60) − content padding (92) */
  display: flex;
  flex-direction: column;
}

.view[data-view="storage"] > #projects-list,
.view[data-view="billing"] > #billing-panel {
  margin-block: auto;
  margin-inline: auto;
  flex-shrink: 0;
}

.view[data-view="storage"] > #project-detail {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  margin-block: 0;
  align-self: flex-start;
  flex-shrink: 0;
}

/* Detail view: top-align (no vertical centering) so header stays put when tabs change height. */
.view[data-view="storage"]:has(#project-detail:not(.hidden)) {
  min-height: 0;
}

.content:has(#project-detail:not(.hidden)) {
  padding-top: 20px;
}

/* The grid holds a fixed 2 rows; more projects scroll inside the box instead of
   making the panel taller. Pin the row height (minmax floor) so cards keep their
   full size and overflow into a scroll rather than compressing to fit.
   318px = 2 × 152px row + 14px gap. */
#projects {
  grid-auto-rows: minmax(108px, auto);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Hover lift at scroll edges; extra bottom pad so the last row isn't clipped. */
  padding-top: 4px;
  padding-bottom: 24px;
}
#projects::-webkit-scrollbar {
  display: none;
}

/* Billing uses a pink sky instead of blue — clouds & effects unchanged.
   Saturated like the blue (was too pale, so it didn't show through the sidebar
   glass the way Projects' blue does). */
#billing-panel {
  /* top-left → bottom-right */
  background: linear-gradient(135deg, #ffd0dc 0%, #ffb6c6 50%, #ff9caf 100%);
}

/* Lift the real content above the animated cloud layers. */
#projects-list > .view-head,
#projects-list > .projects-layout,
#billing-panel > .view-head,
#billing-panel > .billing-layout {
  position: relative;
  z-index: 1;
}
#projects-list > .view-head {
  margin-bottom: 5px;
  flex-shrink: 0;
}
#projects-list > .projects-layout {
  flex: 1;
  min-height: 0;
}

/* Cloud container — each blob inside swirls on its own path, so the
   clouds churn and tangle individually instead of the whole layer sliding. */
.projects-clouds {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Each cloud is several overlapping white puffs → lumpy, wide, not a perfect
   circle. */
.cloud {
  position: absolute;
  filter: blur(20px);
  will-change: transform;
}

.cloud-1 {
  top: -10%;
  left: 0%;
  width: 56%;
  height: 42%;
  background:
    radial-gradient(closest-side at 26% 64%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 50% 44%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 74% 62%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 100%);
  animation: swirl-a 22s ease-in-out infinite;
}

.cloud-2 {
  top: 22%;
  left: 38%;
  width: 50%;
  height: 38%;
  background:
    radial-gradient(closest-side at 30% 58%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 58% 46%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 80% 60%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0) 100%);
  animation: swirl-b 27s ease-in-out infinite;
  animation-delay: -7s;
}

.cloud-3 {
  top: 2%;
  left: 56%;
  width: 60%;
  height: 46%;
  background:
    radial-gradient(closest-side at 24% 60%, rgba(248, 252, 255, 0.7), rgba(248, 252, 255, 0) 100%),
    radial-gradient(closest-side at 52% 42%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 78% 64%, rgba(248, 252, 255, 0.66), rgba(248, 252, 255, 0) 100%);
  animation: swirl-c 24s ease-in-out infinite;
  animation-delay: -12s;
}

.cloud-4 {
  top: 48%;
  left: 8%;
  width: 48%;
  height: 38%;
  background:
    radial-gradient(closest-side at 28% 60%, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 56% 46%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 80% 62%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 100%);
  animation: swirl-b 20s ease-in-out infinite;
  animation-delay: -9s;
}

.cloud-5 {
  top: 30%;
  left: 70%;
  width: 54%;
  height: 42%;
  background:
    radial-gradient(closest-side at 26% 58%, rgba(252, 254, 255, 0.68), rgba(252, 254, 255, 0) 100%),
    radial-gradient(closest-side at 54% 44%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 100%),
    radial-gradient(closest-side at 78% 62%, rgba(252, 254, 255, 0.64), rgba(252, 254, 255, 0) 100%);
  animation: swirl-a 29s ease-in-out infinite;
  animation-delay: -5s;
}

@keyframes swirl-a {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(55%, 35%) scale(1.25) rotate(70deg);
  }
  66% {
    transform: translate(-40%, 50%) scale(0.85) rotate(-55deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes swirl-b {
  0% {
    transform: translate(0, 0) scale(1.05) rotate(0deg);
  }
  33% {
    transform: translate(-55%, -30%) scale(1.3) rotate(-65deg);
  }
  66% {
    transform: translate(45%, -45%) scale(0.95) rotate(60deg);
  }
  100% {
    transform: translate(0, 0) scale(1.05) rotate(0deg);
  }
}

@keyframes swirl-c {
  0% {
    transform: translate(0, 0) scale(1.1) rotate(0deg);
  }
  33% {
    transform: translate(40%, -50%) scale(0.85) rotate(75deg);
  }
  66% {
    transform: translate(-50%, 35%) scale(1.3) rotate(-60deg);
  }
  100% {
    transform: translate(0, 0) scale(1.1) rotate(0deg);
  }
}

.projects-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

#projects-list > .projects-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.projects-main {
  min-width: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Billing view: the usage panel now lives here as a standalone card. */
.billing-layout {
  max-width: 460px;
}
.billing-layout .usage-panel {
  position: static;
  top: auto;
}

.projects-grid {
  display: grid;
  /* Exactly 4 columns; grid's default row-major flow fills left→right, then
     wraps to the next row starting from the left. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  gap: 14px;
}

/* Narrow screens: keep it usable rather than cramming 4 columns. */
@media (max-width: 640px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Apple-style liquid glass via the halo-lens module (.halo-lens-panel
   supplies the frosted surface, edge highlights and depth). */
/* The card is a positioning container now (holds the open-area button + the ⋯
   menu). The open-area button carries the tile's click/hover behaviour. */
.project-card {
  position: relative;
  display: block;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
  transform: translateY(-3px);
}

.project-card:active {
  transform: translateY(-1px);
}

/* Full-tile clickable area that opens the project. */
.project-card-open {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
  border: none;
  background: transparent;
  border-radius: inherit;
  cursor: pointer;
}

/* No drop shadow on project cards (rest or hover) — they sit flat on the panel.
   Overrides the shared .halo-lens-panel shadow; keeps only a faint top rim so
   the glass edge still reads. The radius lives here (two classes) so it beats
   halo-lens.css's `.halo-lens-panel { --halo-lens-panel-radius: 12px }`, which
   loads after style.css and would otherwise win the tie. */
.project-card.halo-lens-panel,
.project-card.halo-lens-panel:hover {
  --halo-lens-panel-radius: 32px;
  /* Glass transparency (--halo-glass-bg / --halo-lens-panel-tint) is now the
     shared default in halo-lens.css, applied to every halo-lens panel. */
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.project-card-inner {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px 18px 16px;      /* a touch more top so the name sits slightly lower */
  min-height: 108px;
  height: 100%;
  justify-content: flex-start;  /* pin content to the top */
  align-items: flex-start;      /* …and the left */
}

/* ⋯ actions menu (top-right of the card). Kept above the open-area button so the
   click lands on the menu, not the tile. */
.project-card-menu {
  position: absolute;
  /* Vertically centered on the project-name line, and right gap matches the
     name's 18px left padding so both sides of the card are symmetric. */
  top: 19px;
  right: 18px;
  z-index: 4;
}

.project-card-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  /* The ⋯ glyph renders slightly high in its em box; a hair of top padding
     nudges it to the optical center of the button. */
  padding: 2px 0 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  /* Always reachable (touch has no hover), but understated at rest; the button's
     own hover, keyboard focus, or an open menu brings it forward. */
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.project-card-menu-btn:hover,
.project-card-menu-btn:focus-visible,
.project-card-menu-btn[aria-expanded="true"] {
  opacity: 1;
  background: rgba(255, 255, 255, 0.48);
}

/* Popover with the Delete action. Right-aligned so it never overflows the tile. */
.project-card-menu-pop {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 132px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(29, 28, 26, 0.16);
}

.project-card-menu-pop[hidden] {
  display: none;
}

.project-card-menu-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-family: var(--ui-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease;
}

.project-card-menu-item:hover {
  background: rgba(29, 28, 26, 0.06);
}

.project-card-menu-item.danger {
  color: var(--danger);
}

.project-card-menu-item.danger:hover {
  background: rgba(180, 69, 58, 0.1);
}

.project-card-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.25;
  /* Long names wrap onto a second line instead of running under the ⋯ button or
     off the card. The right gutter keeps every line clear of the top-right ⋯
     button, and anything past three lines is truncated with an ellipsis (…). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 34px;
}

.project-card-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.project-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Per-service chips on a project card (Storage / Database / Auth / Email /
   Deploy / Functions) — wrap freely so cards stay tidy on narrow screens. */
.project-card-chips {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.project-card-chips .badge {
  font-size: 13px;               /* bigger chip text */
  padding: 0;                    /* the content span carries the padding now */
  --halo-lens-panel-radius: 999px;
  /* Stronger glass rim: a hairline edge + brighter inner highlight so the pill
     reads clearly over the light card, plus a soft drop to lift it. */
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, 0.75),
    inset 0 -1px 1px rgba(29, 28, 26, 0.06),
    0 2px 6px -1px rgba(29, 28, 26, 0.18);
}

/* Fully transparent halo-lens chip: strip the opaque tint/fill (가림막) so only
   the refractive glass + edge highlight remain and the background shows through.
   The frosted inner layer is .halo-lens--panel::before — hide it, and clear the
   old solid .badge background. */
.project-card-chips .badge.on,
.project-card-chips .badge.off {
  background: transparent;
}
.project-card-chips .badge .halo-lens--panel::before {
  display: none;
}
.project-card-chips .badge .halo-lens-panel-content {
  flex-direction: row;
  align-items: center;
  padding: 6px 15px;             /* bigger pill */
  color: var(--text);           /* black text */
}

/* Project-card chips are text-only — drop the leading status dot. */
.project-card-chips .badge.on::before {
  display: none;
}

.project-card-activity {
  font-size: 11.5px;
  color: var(--muted);
}

.usage-panel {
  position: sticky;
  top: 84px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(29, 28, 26, 0.04);
}

.usage-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.usage-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.usage-panel-sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

.usage-panel-cost {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.usage-panel-cost small {
  margin-left: 2px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
}

/* Per-service group inside the Billing panel (Storage, Database, …). */
.usage-group {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.usage-group:first-of-type {
  margin-top: 14px;
}

/* Clickable header that collapses/expands the group's rows. */
.usage-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.usage-group-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.usage-group-caret {
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.usage-group:not(.collapsed) .usage-group-caret {
  transform: rotate(90deg);
}

.usage-group.collapsed .usage-rows {
  display: none;
}

.usage-group.collapsed .usage-group-head {
  margin-bottom: 0;
}

.usage-group-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.usage-group-cost {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.usage-rows {
  display: flex;
  flex-direction: column;
}

.usage-row {
  padding: 13px 0;
  border-top: 1px dashed var(--border);
}

.usage-row:first-child {
  padding-top: 0;
  border-top: none;
}

.usage-row:last-child {
  padding-bottom: 0;
}

.usage-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.usage-row-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.usage-row-value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.usage-row-limit {
  font-weight: 500;
  color: var(--muted);
}

.usage-track {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.usage-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.5s ease;
}

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

  .usage-panel {
    position: static;
  }
}

/* ---------- Project detail (back button + feature sections) ---------- */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding: 6px 12px 6px 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.back-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.back-btn svg {
  width: 18px;
  height: 18px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.feature-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}

/* Storage-tab upload button lives in the Files section header. */

.usage-note {
  margin: 0;
  padding: 8px 16px 0;
  font-size: 12px;
  color: var(--muted);
}

.feature-title {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Thumbnail (images) / icon box (everything else) */
.file-thumb-wrap,
.file-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}

.file-thumb-wrap {
  overflow: hidden;
  background: var(--surface-2);
}

.file-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.file-icon svg {
  width: 20px;
  height: 20px;
}

.cat-image {
  color: #3a7d5d;
  background: #e7f1ea;
  border-color: #d3e6da;
}

.cat-video {
  color: #7257a0;
  background: #efeaf6;
  border-color: #e2d9ef;
}

.cat-file {
  color: #b0743a;
  background: #f6efe5;
  border-color: #ece0cd;
}

.file-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.file-name {
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row actions: Preview / Download / Delete */
.file-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.icon-btn.danger:hover {
  background: #faf0ef;
  color: var(--danger);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
}

.icon-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Empty files state */
.empty-files {
  padding: 16px 14px;
}

.empty-title {
  margin: 0;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
}

.empty-sub {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Confirm dialog ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(28, 27, 25, 0.38);
}

.modal-card {
  width: min(360px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  font-family: var(--ui-font);
}

.modal-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.modal-msg {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--muted);
}

.modal-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 10px 12px;
  font-family: var(--ui-font);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
}
.modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 224, 0.16);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-actions .btn {
  border-radius: 999px;
  padding: 9px 18px;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-danger:hover {
  background: #9c3a31;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 60;
  transform: translateX(-50%) translateY(8px);
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Responsive: collapse the sidebar into a top strip
   ============================================================ */
@media (max-width: 760px) {
  .shell {
    flex-direction: column;
    align-items: stretch; /* stretch content to full width in column mode */
  }

  .sidebar {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    position: static;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }

  /* No hover on touch — back to a normal in-flow horizontal strip, expanded. */
  .sidebar-tabbar.halo-lens-panel,
  .sidebar-tabbar.halo-lens-panel:hover {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: max-content;
  }

  .sidebar-tabbar-inner {
    flex-direction: row;
    padding: 6px 8px;
  }

  .nav-label {
    opacity: 1;
  }

  .nav-item {
    width: auto;
  }

  .content {
    width: 100%;
    padding: 20px 16px 48px;
  }

  /* Pill becomes a top strip here, so no left gutter needed — use full width. */
  #projects-list,
  #billing-panel {
    max-width: 100%;
  }

  .account-meta {
    display: none;
  }

  .topbar {
    padding: 0 16px;
  }

  .dashboard-footer {
    padding-inline: 16px;
  }

  .footer-top {
    flex-direction: column;
    gap: 32px;
  }

  .footer-links {
    gap: 32px;
  }
}

/* ---------- Dashboard footer ---------- */
.dashboard-footer {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 28px 28px;
  border-top: 1px solid var(--border);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 120px;
}

.footer-col-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.footer-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s ease;
}

.footer-link:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.footer-copy {
  font-size: 12px;
  color: var(--muted);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-legal-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s ease;
}

.footer-legal-link:hover {
  color: var(--text);
}

/* ============================================================
   Landing page — LoveFrom-style minimal
   ============================================================ */
/* The document itself scrolls (not an inner container) so the OS gives us the
   native rubber-band overscroll at the very top/bottom, like a normal page. */
html:has(.landing-page) {
  scroll-snap-type: y mandatory;
}

.landing-page {
  background: #ffffff;
}

/* Docs / Connect / Pricing — document scroll (not an inner container) so the OS
   gives native rubber-band overscroll at the very top/bottom, like the landing page. */
body.docs-page,
body.connect-public,
body.pricing-page,
body:has(#logged-in:not(.hidden)),
html.embed body {
  background: #ffffff;
}

/* Topbar floats above content (landing snap screens, docs, pricing). */
.landing-page .topbar,
.docs-page .topbar,
.pricing-page .topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom-color: var(--border);
}

body.pricing-page .pricing-layout {
  padding-top: 60px;
}

/* Optically center "Connect" against the heavy Orchard wordmark (Outfit 800
   sits a touch high, so nudge the nav link down to match). Docs and Pricing get
   the same nudge so the nav doesn't jump up 3px when navigating between pages. */
.landing-page .topbar-brand-group .topbar-nav-link,
.docs-page .topbar-brand-group .topbar-nav-link,
.pricing-page .topbar-brand-group .topbar-nav-link {
  position: relative;
  top: 3px;
}

/* Each <section> is one full-viewport screen, and one scroll gesture jumps a
   whole screen (scroll-snap-stop: always).
   Screen 1 = the IDE demo, screen 2 = the marketing copy. */
.landing-main {
  display: block;
  padding: 0;
}

.landing-screen {
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 80px 24px 24px;
}

.landing-screen--demo .landing-prompt-demo {
  flex: none;
  width: 100%;
  max-width: 520px;
  margin: 0;
}

/* Screen 1: IDE demo + prompt chips — system UI sans (screen 2 keeps serif). */
.landing-screen--demo {
  --font: var(--ui-font);
  font-family: var(--ui-font);
}

/* Screen 2 is a column: copy centered in the available space, footer at the
   bottom edge of the snap screen. */
.landing-screen--copy {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.landing-copy-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 24px;
}

.landing-screen--copy .landing-about-copy {
  width: 100%;
  max-width: min(1120px, 94vw);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  color: var(--text);
  text-align: left;
}

.landing-footer {
  flex-shrink: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  font-family: var(--ui-font);
}

.landing-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  max-width: 1160px;
  margin: 0 auto;
}

.landing-footer-brand {
  font-size: 13px;
  color: var(--muted);
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.landing-footer-links a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.12s ease;
}

.landing-footer-links a:hover {
  color: var(--text);
}

/* Nudge only the headline + body up; the CTA stays put (transform doesn't
   affect layout flow, so the outro keeps its original position). */
.landing-screen--copy .landing-about-lead,
.landing-screen--copy .landing-about-body {
  transform: translateY(-60px);
}

.landing-screen--copy .landing-about-outro {
  margin-inline: 0;
  margin-top: 28px;
}

.landing-about-lead,
.landing-about-body,
.landing-prompt-suggestions,
.landing-about-outro {
  transition:
    opacity 0.85s ease,
    transform 0.85s ease,
    max-height 0.85s ease,
    margin 0.85s ease;
}

/* Above the IDE: keep their box reserved during the intro so the chat IDE
   never moves — only fade + slide in. */
.landing-about--intro .landing-about-lead {
  opacity: 0;
  max-height: 200px;
  max-width: none;
  margin-bottom: 10px;
  overflow: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}

.landing-about--intro .landing-about-body {
  opacity: 0;
  max-height: 240px;
  max-width: none;
  margin-bottom: 14px;
  overflow: hidden;
  transform: translateY(-6px);
  pointer-events: none;
}

/* Below the IDE: safe to collapse — appearing doesn't move the IDE. */
.landing-about--intro .landing-prompt-suggestions,
.landing-about--intro .landing-about-outro {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  transform: translateY(16px);
  pointer-events: none;
}

.landing-about.is-intro-done .landing-about-lead {
  opacity: 1;
  max-height: 200px;
  max-width: none;
  margin-bottom: 10px;
  transform: none;
  transition-delay: 0.06s;
}

.landing-about.is-intro-done .landing-about-body {
  opacity: 1;
  max-height: 240px;
  max-width: none;
  margin-bottom: 14px;
  transform: none;
  transition-delay: 0.2s;
}

.landing-about.is-intro-done .landing-prompt-suggestions {
  opacity: 1;
  max-height: 96px;
  transform: none;
  transition-delay: 0.34s;
}

.landing-about.is-intro-done .landing-about-outro {
  opacity: 1;
  max-height: 80px;
  transform: none;
  transition-delay: 0.48s;
}

.landing-about-lead {
  margin: 0 0 18px;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #000000;
}

.landing-about-body {
  margin: 0 0 22px;
  max-width: none;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  color: #565656;
}

/* Keep the example-prompt line on a single row (no wrapping before "more"). */
.landing-prompts-line {
  white-space: nowrap;
}

/* Literary "pull-quote" treatment for the example prompts: italic serif with
   oversized, softly-toned quotation marks — like a phrase lifted from a book. */
.landing-about-body .landing-quote {
  font-style: italic;
  white-space: nowrap;
  color: #444444;
}

.landing-about-body .landing-quote::before,
.landing-about-body .landing-quote::after {
  font-style: normal;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: 1.35em;
  line-height: 0;
  color: #b9af9c;
  vertical-align: -0.12em;
}

.landing-about-body .landing-quote::before {
  content: "\201C";
  margin-right: 0.04em;
}

.landing-about-body .landing-quote::after {
  content: "\201D";
  margin-left: 0.02em;
}

.landing-prompt-demo {
  flex: 1.15 1 0;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin: 0;
  text-align: left;
  font-family: var(--font);
  transition: margin 0.85s ease;
}

.landing-about--intro .landing-prompt-demo {
  margin-bottom: 0;
}

.landing-about.is-intro-done .landing-prompt-demo {
  margin-bottom: 0;
}

.landing-prompt-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 7px;
  margin-top: 14px;
}

.landing-prompt-chip {
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: #2b2f37;
  background: #ffffff;
  border: 1px solid rgba(18, 22, 31, 0.1);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(18, 22, 31, 0.04),
    0 2px 8px rgba(18, 22, 31, 0.05);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}

.landing-prompt-chip:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #12161f;
  border-color: rgba(18, 22, 31, 0.18);
  box-shadow:
    0 2px 6px rgba(18, 22, 31, 0.06),
    0 8px 22px rgba(18, 22, 31, 0.09);
}

.landing-prompt-chip:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(18, 22, 31, 0.05),
    0 2px 6px rgba(18, 22, 31, 0.06);
}

.landing-prompt-chip:disabled {
  color: #9aa0aa;
  background: #f5f6f8;
  border-color: rgba(18, 22, 31, 0.06);
  box-shadow: none;
  cursor: default;
}

/* Sequential reveal — chips stay hidden until the intro finishes, then bloom
   in one at a time, ~1s apart, like emerging softly out of a cloud (blur →
   focus). JS adds .is-revealed when the typing intro completes. */
.landing-prompt-suggestions .landing-prompt-chip {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px) scale(0.92);
}

.landing-prompt-suggestions.is-revealed .landing-prompt-chip {
  animation: landing-chip-bloom 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.landing-prompt-suggestions.is-revealed .landing-prompt-chip:nth-child(1) {
  animation-delay: 0s;
}
.landing-prompt-suggestions.is-revealed .landing-prompt-chip:nth-child(2) {
  animation-delay: 1s;
}
.landing-prompt-suggestions.is-revealed .landing-prompt-chip:nth-child(3) {
  animation-delay: 2s;
}
.landing-prompt-suggestions.is-revealed .landing-prompt-chip:nth-child(4) {
  animation-delay: 3s;
}
.landing-prompt-suggestions.is-revealed .landing-prompt-chip:nth-child(5) {
  animation-delay: 4s;
}

@keyframes landing-chip-bloom {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(12px) scale(0.92);
  }
  55% {
    opacity: 1;
    filter: blur(2.5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.landing-prompt-chat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(29, 28, 26, 0.06);
  overflow: hidden;
  transition:
    background 0.85s ease,
    border-color 0.85s ease,
    box-shadow 0.85s ease;
}

/* --- Dark mode for the IDE mock (scoped to the chat panel only) ---
   Softer blue-tinted slate with a subtle top-to-bottom gradient so the panel
   feels lit and modern instead of flat near-black. */
.landing-prompt-chat {
  --surface: #2a3040;
  --surface-2: #1e2330;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #eef1f7;
  --muted: #a7b0c4;
  --accent: #5a8dff;
  background: linear-gradient(180deg, #2d3343 0%, #232838 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 12px 16px 44px rgba(16, 20, 34, 0.32);
}

.landing-prompt-chat .landing-prompt-header {
  background: rgba(255, 255, 255, 0.04);
}

/* User message: neutral soft fill */
.landing-prompt-chat .landing-prompt-msg {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.09);
}

/* Agent reply: soft accent tint so it reads as the assistant's voice */
.landing-prompt-chat .landing-prompt-msg--agent {
  background: rgba(90, 141, 255, 0.14);
  border-color: rgba(120, 162, 255, 0.26);
}

.landing-prompt-chat .landing-prompt-input-add {
  background: rgba(255, 255, 255, 0.05);
}

.landing-prompt-chat .landing-prompt-send {
  background: var(--accent);
  color: #fff;
}

.landing-prompt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px 0 8px;
  background: rgba(247, 246, 243, 0.88);
  border-bottom: 1px solid var(--border);
}

.landing-prompt-header-start {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.landing-prompt-header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--muted);
  border-radius: 6px;
}

.landing-prompt-header-icon svg {
  display: block;
}

.landing-prompt-header-title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.landing-prompt-header-name {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-prompt-header-device {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.72;
}

.landing-prompt-header-more {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.landing-prompt-thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  height: 320px;
  padding: 16px 20px 14px;
  overflow-y: auto;
}

.landing-prompt-msg {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--border);
  border-radius: 12px;
  align-self: stretch;
  box-shadow: none;
  animation: landing-prompt-msg-in 0.38s ease both;
}

@keyframes landing-prompt-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-prompt-msg--agent {
  align-self: stretch;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: none;
  animation: landing-prompt-msg-in 0.38s ease both;
}

.landing-prompt-msg--thinking {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  padding: 10px 12px 11px;
  background: var(--surface);
  border-color: var(--border);
  border-radius: 12px;
  box-shadow: none;
  color: var(--muted);
  animation: landing-prompt-msg-in 0.38s ease both;
}

.landing-thinking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.landing-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.landing-thinking-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: landing-prompt-typing 1s ease-in-out infinite;
}

.landing-thinking-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.landing-thinking-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.landing-thinking-line {
  margin-top: 9px;
  font-size: 11px;
  color: var(--muted);
  min-height: 1.4em;
  animation: landing-thinking-step 0.36s ease both;
}

.landing-thinking-line::before {
  content: "• ";
  color: var(--accent);
}

.landing-thinking-line.is-swapping {
  animation: landing-thinking-step 0.36s ease both;
}

@keyframes landing-thinking-step {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes landing-prompt-typing {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.landing-prompt-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 2px 2px 0;
  animation: landing-prompt-stack-in 0.45s ease both;
}

.landing-prompt-stack[hidden] {
  display: none;
}

.landing-prompt-stack-label {
  margin: 0;
  flex-shrink: 0;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9b988f;
}

/* Left-aligned, natural-size pills that wrap onto 2 lines within the IDE width. */
.landing-prompt-stack-list {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  width: 100%;
  gap: 7px;
}

.landing-feature-live {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #2b2f37;
  background: #ffffff;
  border: 1px solid rgba(18, 22, 31, 0.1);
  border-radius: 999px;
  box-shadow:
    0 1px 2px rgba(18, 22, 31, 0.04),
    0 2px 8px rgba(18, 22, 31, 0.05);
  animation: landing-feature-pop 0.5s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

.landing-feature-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  color: #6b7280;
}

.landing-feature-live::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: #1f9d57;
  border-radius: 999px;
}

@keyframes landing-feature-pop {
  from {
    opacity: 0;
    transform: scale(0.72);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes landing-prompt-stack-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-prompt-compose {
  padding: 10px 12px 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  transition:
    padding 0.85s ease,
    border-color 0.85s ease,
    background 0.85s ease;
}

.landing-prompt-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.landing-prompt-action-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.landing-prompt-changes {
  gap: 5px;
  color: var(--text);
}

.landing-prompt-changes-add {
  color: var(--accent);
}

.landing-prompt-changes-del {
  color: var(--danger);
}

.landing-prompt-mcp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 3px 10px 3px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.landing-prompt-mcp-label {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text);
}

.landing-prompt-mcp-switch {
  position: relative;
  flex-shrink: 0;
  width: 27px;
  height: 15px;
  background: #c8c5bc;
  border-radius: 999px;
}

.landing-prompt-mcp-toggle.is-on .landing-prompt-mcp-switch {
  background: var(--accent);
}

.landing-prompt-mcp-switch-thumb {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
}

.landing-prompt-mcp-toggle.is-on .landing-prompt-mcp-switch-thumb {
  transform: translateX(12px);
}

.landing-prompt-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 6px 5px 5px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: none;
  transition:
    min-height 0.85s ease,
    padding 0.85s ease,
    background 0.85s ease,
    border-color 0.85s ease;
}

.landing-prompt-input-add {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.landing-prompt-input-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.landing-prompt-input-meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.landing-prompt-model {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.landing-prompt-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--text);
  border-radius: 50%;
  transition:
    transform 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.landing-prompt-send.is-pressed {
  transform: scale(0.86);
  background: #000;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
}

.landing-prompt-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  margin-top: 6px;
  padding: 0 4px 8px;
  font-family: var(--font);
  font-size: 10px;
  line-height: 1;
  color: var(--muted);
}

.landing-prompt-status-left {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.landing-prompt-status-sep {
  opacity: 0.55;
}

.landing-prompt-input-text {
  color: inherit;
}

.landing-prompt-input-cursor {
  flex-shrink: 0;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  background: currentColor;
  animation: landing-input-cursor-blink 1.05s step-end infinite;
}

.landing-prompt-input-cursor.is-hidden {
  display: none;
}

.landing-prompt-placeholder {
  font-family: var(--font);
  color: var(--muted);
}

.landing-prompt-placeholder.hidden {
  display: none;
}

@keyframes landing-input-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.landing-about-outro {
  margin: 0;
  max-width: none;
  margin-inline: auto;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.5;
  color: var(--muted);
}

.landing-about-link {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}

/* Inline IDE logos in the CTA — scale with the text, centered on the baseline. */
.landing-ide {
  white-space: nowrap;
}

.landing-ide-logo {
  width: 0.92em;
  height: 0.92em;
  margin-right: 0.16em;
  vertical-align: -0.13em;
}

/* Brand-tinted IDE names: Claude orange, Codex blue, Antigravity Google green
   (logos inherit color). */
.landing-ide--claude {
  color: #d97757;
}

.landing-ide--codex {
  color: #1f6feb;
}

/* Antigravity's mark keeps its rainbow gradient (carried by the inline SVG);
   the wordmark is a soft red. */
.landing-ide--antigravity {
  color: #e35d52;
}

/* CTA wrapped in the dashboard's floating-cloud blue backdrop + halo glass. */
/* Gradient-blue pill with drifting clouds inside (like the project panels) +
   a soft blue glow. No halo-lens — that's what left edge artifacts on this long
   pill; the clouds clip themselves and fade before the rounded ends, so the
   surface stays clean. */
.landing-cta-panel {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border-radius: 999px;
  /* 1px white gradient border: fill paints in the padding box, the white
     gradient in the border box shows only through the transparent border. */
  border: 1px solid transparent;
  background:
    linear-gradient(140deg, #c6e2ff 0%, #a3cfff 45%, #6db3ff 100%) padding-box,
    linear-gradient(140deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.9) 100%) border-box;
  /* Constant soft blue glow + a light depth shadow cast toward the bottom-right
     + faint top rim + a tight white glow hugging the border. The breathing part
     of the glow lives on ::after so it can pulse without fighting :hover. */
  box-shadow:
    4px 5px 11px -5px rgba(29, 28, 26, 0.16),
    0 0 10px rgba(255, 255, 255, 0.55),
    inset 0 1px 1px rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.45s ease-in-out;
}

/* Hover fades in a bluer fill (via the ::before overlay below) and casts a soft
   shadow toward the bottom-right only — no surrounding glow bleed. */
.landing-cta-panel:hover {
  box-shadow:
    6px 8px 15px -8px rgba(29, 28, 26, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* Bluer hover fill lives on its own layer so its opacity can cross-fade —
   CSS can't smoothly transition between two background gradients, so we fade
   this overlay in/out instead of swapping the panel's background. */
.landing-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg, #bbdcff 0%, #93c3ff 45%, #63acfa 100%);
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}

.landing-cta-panel:hover::before {
  opacity: 1;
}

/* Gently breathing glow — "은은하게 빛나게". Pure outer shadow on a fill-less
   layer, so it never covers the text and never clips. */
.landing-cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 24px 2px rgba(109, 179, 255, 0.5);
  animation: cta-glow 4.5s ease-in-out infinite;
  transition: box-shadow 0.25s ease;
}

@keyframes cta-glow {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.85;
  }
}

/* Clouds drift inside the pill; .projects-clouds already clips them (overflow
   hidden + inherited radius). Fade them out before the rounded ends and keep
   them subtle so the pill glows softly rather than looking busy. */
.landing-cta-panel .projects-clouds {
  border-radius: inherit;
  opacity: 0.9;
  -webkit-mask: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
}

/* The pill is short, so the dashboard's 20px blur washes the puffs into a flat
   haze and the drift becomes invisible. Tighten the blur so the clouds stay
   distinct and their movement actually reads at this size. */
.landing-cta-panel .cloud {
  filter: blur(10px);
}

.landing-cta-content {
  position: relative;
  z-index: 1;
  padding: 0;
}

/* Link fills the whole pill so the entire button is the hover/click target. */
.landing-cta-content .landing-about-link {
  display: block;
  width: 100%;
  padding: 11px 24px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(15px, 1.6vw, 19px);
}

/* Snap sections stay full-height on small screens; just tighten sizing */
@media (max-width: 860px) {
  .landing-screen {
    padding: 72px 20px 20px;
  }

  .landing-copy-wrap {
    padding: 72px 20px 20px;
  }

  .landing-screen--demo .landing-prompt-demo {
    max-width: 460px;
  }

  .landing-screen--copy .landing-about-copy {
    max-width: 100%;
  }

  /* On small screens let the headline + prompt line wrap instead of overflowing */
  .landing-about-lead,
  .landing-prompts-line {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .landing-prompt-compose-actions {
    margin-bottom: 6px;
  }

  .landing-prompt-header {
    gap: 6px;
    padding-inline: 8px 10px;
  }

  .landing-prompt-header-name {
    font-size: 12px;
  }

  .landing-prompt-model {
    display: none;
  }

  .landing-prompt-input-meta {
    gap: 0;
  }

  .landing-prompt-thread {
    padding-inline: 14px;
  }
}

/* iPhone landing layout — standard iPhone viewport is 390px CSS px (375px SE,
   430px Pro Max). Scoped to .landing-page so docs/pricing keep desktop nav. */
@media (max-width: 430px) {
  .landing-page .topbar {
    align-items: center;
    height: auto;
    min-height: 48px;
    padding: 8px 16px;
    gap: 16px;
  }

  .landing-page .topbar-brand-group {
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    gap: 16px;
  }

  .landing-page .topbar-brand-group .brand-link {
    font-size: 20px;
    line-height: 1;
  }

  .landing-page .topbar-brand-group .topbar-nav-link {
    top: 0;
    font-size: 13px;
    font-weight: 600;
  }

  .landing-page .topbar-actions {
    flex-shrink: 0;
  }

  .landing-page .btn-connect {
    font-size: 14px;
  }

  .landing-page .connect-pop {
    right: -4px;
    min-width: 220px;
  }

  /* Taller fixed header — snap screens need extra top padding. */
  .landing-page .landing-screen {
    /* Real phones: 100svh. Tall narrow desktop windows: cap at iPhone 14 ratio
       (390×844) so DevTools / resized browser previews match a phone, not a
       full monitor height. */
    --landing-mobile-vh: min(100svh, calc(100vw * 844 / 390));
    height: var(--landing-mobile-vh);
    min-height: var(--landing-mobile-vh);
    max-height: var(--landing-mobile-vh);
    padding: 0 16px;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Screen 1: compact IDE + chips pinned toward the bottom. */
  .landing-page .landing-screen--demo {
    display: flex;
    flex-direction: column;
    padding-top: 88px;
    padding-bottom: 12px;
    overflow: hidden;
  }

  .landing-page .landing-screen--demo .landing-prompt-demo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .landing-page .landing-prompt-stack {
    flex-shrink: 0;
    margin-bottom: 10px;
  }

  .landing-page .landing-prompt-chat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(29, 28, 26, 0.08);
    overflow: hidden;
  }

  .landing-page .landing-prompt-header {
    flex-shrink: 0;
    min-height: 34px;
    gap: 6px;
    padding: 0 8px 0 6px;
  }

  .landing-page .landing-prompt-header-name {
    font-size: 12px;
  }

  .landing-page .landing-prompt-thread {
    flex: 0 0 auto;
    height: 250px;
    min-height: 0;
    padding: 12px 14px 10px;
    gap: 5px;
  }

  .landing-page .landing-prompt-msg,
  .landing-page .landing-prompt-msg--agent,
  .landing-page .landing-prompt-msg--thinking {
    font-size: 12px;
    padding: 8px 10px;
    line-height: 1.45;
  }

  .landing-page .landing-prompt-compose {
    flex-shrink: 0;
    padding: 8px 10px 0;
  }

  .landing-page .landing-prompt-compose-actions {
    margin-bottom: 6px;
  }

  .landing-page .landing-prompt-input {
    min-height: 38px;
    font-size: 12.5px;
  }

  .landing-page .landing-prompt-status {
    min-height: 22px;
    font-size: 10px;
  }

  .landing-page .landing-prompt-suggestions {
    flex-shrink: 0;
    gap: 6px;
    margin-top: 0;
    padding-top: 16px;
    padding-bottom: 2px;
  }

  .landing-page .landing-prompt-chip {
    padding: 7px 11px;
    font-size: 11px;
  }

  /* Screen 2: copy at top, footer pinned to the bottom of the viewport. */
  .landing-page .landing-screen--copy {
    display: flex;
    flex-direction: column;
    padding-top: 88px;
    padding-bottom: 0;
    overflow: hidden;
  }

  .landing-page .landing-copy-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    align-items: stretch;
    justify-content: center;
  }

  .landing-page .landing-screen--copy .landing-about-copy {
    flex: 0 0 auto;
    text-align: left;
  }

  .landing-page .landing-screen--copy .landing-about-lead,
  .landing-page .landing-screen--copy .landing-about-body {
    transform: none;
  }

  .landing-page .landing-about-lead {
    margin-bottom: 12px;
    font-size: clamp(24px, 6.2vw, 30px);
    line-height: 1.18;
    letter-spacing: -0.02em;
  }

  .landing-page .landing-about-body {
    margin-bottom: 0;
    font-size: 17px;
    line-height: 1.55;
  }

  .landing-page .landing-screen--copy .landing-about-outro {
    margin-top: 24px;
    padding-top: 0;
  }

  .landing-page .landing-about-outro {
    font-size: 14px;
    line-height: 1.45;
  }

  .landing-page .landing-cta-panel {
    display: inline-block;
    width: auto;
    max-width: 100%;
    border-radius: 999px;
  }

  .landing-page .landing-ide-name {
    display: none;
  }

  .landing-page .landing-cta-content .landing-about-link {
    display: inline-block;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
  }

  .landing-page .landing-ide {
    display: inline;
    white-space: nowrap;
  }

  .landing-page .landing-ide-logo {
    width: 1em;
    height: 1em;
    margin: 0 0.06em 0 0;
    vertical-align: -0.13em;
  }

  .landing-page .landing-footer {
    flex-shrink: 0;
    margin-top: auto;
    margin-left: -16px;
    margin-right: -16px;
    padding: 14px 16px 20px;
    border-top: 1px solid var(--border);
  }

  .landing-page .landing-footer-inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .landing-page .landing-footer-brand {
    flex-shrink: 0;
    font-size: 12px;
    white-space: nowrap;
  }

  .landing-page .landing-footer-links {
    flex-shrink: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 12px;
  }

  .landing-page .landing-footer-links a {
    font-size: 12px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-about--intro .landing-about-lead,
  .landing-about--intro .landing-about-body,
  .landing-about--intro .landing-prompt-suggestions,
  .landing-about--intro .landing-about-outro {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .landing-prompt-input-cursor {
    animation: none;
  }

  .landing-prompt-msg,
  .landing-prompt-msg--agent,
  .landing-prompt-msg--thinking {
    animation: none;
  }

  .landing-prompt-send {
    transition: none;
  }

  .landing-thinking-dots span,
  .landing-thinking-line {
    animation: none;
    opacity: 0.7;
  }

  .landing-feature-live,
  .landing-prompt-stack {
    animation: none;
  }

  /* Show chips with no pop animation, but still gated behind .is-revealed */
  .landing-prompt-suggestions .landing-prompt-chip {
    opacity: 0;
    transform: none;
  }

  .landing-prompt-suggestions.is-revealed .landing-prompt-chip {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Auth section (read-only) ---------- */
.auth-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.auth-uris-wrap {
  margin: 4px 0 14px;
}

.auth-uris {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-uris code {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  word-break: break-all;
}

.auth-users-title {
  margin: 0 0 8px;
  font-weight: 600;
}

.auth-users {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-top: 1px solid var(--border);
}

.auth-user:first-child {
  border-top: none;
}

.auth-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}

.auth-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border);
}

.auth-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.auth-user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.auth-user-meta .row-sub {
  word-break: break-word;
}

/* ============================================================
   Project detail — tabbed layout (Overview cloud-sky + tabs)
   Reuses .projects-clouds / .cloud-* (cloud layer) and
   .halo-lens-panel (liquid glass) already defined above.
   ============================================================ */
#project-detail {
  width: 100%;
  font-family: var(--ui-font);
  --font: var(--ui-font);
}

#project-detail .proj-detail-head {
  /* Back button + title scroll away with the page; only the tabs bar below
     pins (see .proj-tabs-bar), so scrolling never hides content behind a tall
     sticky header. */
  padding-top: 4px;
  padding-bottom: 2px;
}

/* Only the tabs pin under the fixed topbar — a full-width OPAQUE bar so scrolled
   content passes cleanly beneath it (no bleed through the translucent pill). */
#project-detail .proj-tabs-bar {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: #ffffff;
  padding-bottom: 8px;
}

#project-detail .back-btn {
  gap: 8px;
  margin-top: 5px;
  margin-left: -10px;
  margin-bottom: 14px;
  padding: 9px 15px 9px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 650;
  color: rgba(34, 45, 58, 0.66);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 8px 22px -18px rgba(23, 37, 58, 0.42),
    inset 0 1px 1px rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  transition:
    color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease;
}

#project-detail .back-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    0 12px 26px -20px rgba(23, 37, 58, 0.52),
    inset 0 1px 1px rgba(255, 255, 255, 0.85);
  transform: translateX(-1px);
}

#project-detail .back-btn:focus-visible {
  outline: 2px solid rgba(61, 131, 219, 0.42);
  outline-offset: 3px;
}

#project-detail .back-btn svg {
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
}

#project-detail .view-head {
  margin-top: 6px;
  margin-bottom: 0;
  align-items: center;
  gap: 20px;
}

#project-detail .proj-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#project-detail .view-title {
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.45px;
  line-height: 1.15;
  -webkit-text-stroke: 0;
}

#project-detail .view-sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.proj-head-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

#project-detail .proj-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

#project-detail .proj-status.on {
  color: #1a6b45;
}

#project-detail .proj-status .status-dot {
  width: 7px;
  height: 7px;
}

#project-detail .proj-status .status-dot.on {
  background: #2e9b6b;
}

#project-detail .proj-title-row .icon-btn,
#project-detail .proj-head-actions .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

#project-detail .proj-title-row .icon-btn svg,
#project-detail .proj-head-actions .icon-btn svg {
  width: 16px;
  height: 16px;
}

/* Project detail tabs — Connect page liquid-glass bar, neutral gray active pill. */
#project-detail .connect-tabs {
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#project-detail .connect-tabs::-webkit-scrollbar {
  display: none;
}

#project-detail .connect-tab.is-active {
  background: linear-gradient(135deg, #f6f6f7 0%, #e7e7ea 100%);
}

.proj-panel {
  padding-top: 14px;
}

#project-detail .proj-panel:not([data-panel="overview"]) {
  padding-top: 12px;
}

/* Breathing room between every project panel and the footer. */
#project-detail .proj-panel {
  padding-bottom: 70px;
}

/* Service tabs — minimal console (borderless, type-led) */
#project-detail .svc-console {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#project-detail .svc-console .feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 14px;
  margin-bottom: 2px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  min-height: 0;
}

#project-detail .svc-console .feature-title {
  display: block;
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Small "Beta" tag beside a feature title. */
.beta-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  vertical-align: middle;
  font-family: var(--ui-font);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

#project-detail .feature-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#project-detail .feature-title .beta-tag {
  margin-left: 6px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #2a5fad;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}

#project-detail .svc-console .mini-btn {
  font-size: 12px;
  padding: 4px 10px;
  background: transparent;
}

/* Email panel buttons (Send test email, Change ×2, Pause) read as inline text
   actions — drop the border to lighten the panel. */
#project-detail .svc-console:has(#email-section) .mini-btn {
  border: none;
}

#project-detail .svc-console .usage-note {
  margin: 0 0 16px;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  border: none;
}

#project-detail .svc-console .usage-note code {
  font-size: 11.5px;
}

/* Stats — inline row, no boxes */
#project-detail .svc-console .metric-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 6px;
  gap: 6px 22px;
  border: none;
}

#project-detail .svc-console .metric {
  flex: 0 1 auto;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
}

#project-detail .svc-console .metric-lab {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

#project-detail .svc-console .metric-num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

#project-detail .svc-console .metric-num.sm {
  font-size: 13px;
  font-weight: 500;
}

#project-detail .svc-console .section-label {
  margin: 0;
  padding: 18px 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
}

#project-detail .svc-console .count-chip {
  font-size: inherit;
  font-weight: 400;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
}

#project-detail .svc-console .count-chip::before {
  content: "· ";
  opacity: 0.6;
}

#project-detail .svc-console .table-scroll {
  margin: 0;
}

#project-detail .svc-console .data-table thead th {
  padding: 0 0 7px;
  background: none;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

#project-detail .svc-console .data-table tbody td {
  padding: 9px 0;
  font-size: 13px;
}

#project-detail .svc-console .data-table tbody tr:hover {
  background: transparent;
}

#project-detail .svc-console .table-empty {
  margin: 0;
  padding: 24px 0;
  border: none;
  text-align: left;
  font-size: 12.5px;
}

/* Storage, Database, Auth, Email, Deploy, and API keys tabs — compact dashboard surfaces. */
#project-detail #storage-panel,
#project-detail .svc-console:has(#db-section),
#project-detail .svc-console:has(#auth-section),
#project-detail .svc-console:has(#email-section),
#project-detail .svc-console:has(#deploy-section),
#project-detail .svc-console:has(#api-keys-list) {
  padding: 22px;
  border: none;
  border-radius: 24px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0.42) 34%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(247, 250, 252, 0.74) 100%);
  box-shadow:
    0 18px 42px -30px rgba(37, 73, 110, 0.34),
    inset 0 1px 1px rgba(255, 255, 255, 0.76);
}

#project-detail #storage-panel .feature-head,
#project-detail .svc-console:has(#db-section) .feature-head,
#project-detail .svc-console:has(#auth-section) .feature-head,
#project-detail .svc-console:has(#email-section) .feature-head,
#project-detail .svc-console:has(#deploy-section) .feature-head,
#project-detail .svc-console:has(#api-keys-list) .feature-head {
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: 0;
}

#project-detail #storage-panel .feature-title,
#project-detail .svc-console:has(#db-section) .feature-title,
#project-detail .svc-console:has(#auth-section) .feature-title,
#project-detail .svc-console:has(#email-section) .feature-title,
#project-detail .svc-console:has(#deploy-section) .feature-title,
#project-detail .svc-console:has(#api-keys-list) .feature-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

#project-detail #storage-panel #storage-files {
  min-width: 0;
}

#project-detail #storage-panel .email-pager {
  justify-content: flex-start;
  margin-top: 12px;
}

#project-detail #storage-panel .files-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-bottom: 10px;
}

#project-detail #storage-panel .files-section-head .section-label {
  margin: 0;
  padding: 0;
}

#project-detail #storage-panel #storage-upload-btn {
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(47, 111, 224, 0.22);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

#project-detail #storage-panel #storage-upload-btn:hover {
  background: #285fc4;
  border-color: #285fc4;
  box-shadow: 0 4px 12px rgba(47, 111, 224, 0.3);
}

#project-detail #storage-panel #storage-upload-btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
}

#project-detail #storage-panel .metric-row,
#project-detail .svc-console:has(#db-section) .metric-row,
#project-detail .svc-console:has(#auth-section) .metric-row,
#project-detail .svc-console:has(#email-section) .metric-row,
#project-detail .svc-console:has(#deploy-section) .metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

#project-detail #storage-panel .metric,
#project-detail .svc-console:has(#db-section) .metric,
#project-detail .svc-console:has(#auth-section) .metric,
#project-detail .svc-console:has(#email-section) .metric,
#project-detail .svc-console:has(#deploy-section) .metric {
  min-width: 0;
  padding: 13px 14px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.78);
}

#project-detail #storage-panel .metric-lab,
#project-detail .svc-console:has(#db-section) .metric-lab,
#project-detail .svc-console:has(#auth-section) .metric-lab,
#project-detail .svc-console:has(#email-section) .metric-lab,
#project-detail .svc-console:has(#deploy-section) .metric-lab {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
}

#project-detail #storage-panel .metric-num,
#project-detail .svc-console:has(#db-section) .metric-num,
#project-detail .svc-console:has(#auth-section) .metric-num,
#project-detail .svc-console:has(#email-section) .metric-num,
#project-detail .svc-console:has(#deploy-section) .metric-num {
  margin-top: 1px;
  font-size: 21px;
  font-weight: 700;
}

#project-detail #storage-panel .usage-note,
#project-detail .svc-console:has(#db-section) .usage-note,
#project-detail .svc-console:has(#auth-section) .usage-note,
#project-detail .svc-console:has(#email-section) .usage-note,
#project-detail .svc-console:has(#deploy-section) .usage-note,
#project-detail .svc-console:has(#api-keys-list) .usage-note {
  margin: 12px 0 0;
  padding: 0;
}

#project-detail #storage-panel .section-label,
#project-detail .svc-console:has(#db-section) .section-label,
#project-detail .svc-console:has(#auth-section) .section-label,
#project-detail .svc-console:has(#email-section) .section-label,
#project-detail .svc-console:has(#deploy-section) .section-label,
#project-detail .svc-console:has(#api-keys-list) .section-label {
  margin-top: 22px;
  padding: 0 0 10px;
  color: rgba(54, 69, 86, 0.72);
}

#project-detail #storage-panel .table-scroll,
#project-detail .svc-console:has(#auth-section) .table-scroll,
#project-detail .svc-console:has(#email-section) .table-scroll,
#project-detail .svc-console:has(#api-keys-list) .table-scroll {
  overflow-x: auto;
  border: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

#project-detail #storage-panel .data-table,
#project-detail .svc-console:has(#auth-section) .data-table,
#project-detail .svc-console:has(#email-section) .data-table,
#project-detail .svc-console:has(#api-keys-list) .data-table {
  min-width: 680px;
}

#project-detail #storage-panel .data-table thead th,
#project-detail .svc-console:has(#auth-section) .data-table thead th,
#project-detail .svc-console:has(#email-section) .data-table thead th,
#project-detail .svc-console:has(#api-keys-list) .data-table thead th {
  padding: 12px 14px 10px;
  background: rgba(247, 250, 252, 0.7);
  border-bottom-color: rgba(206, 219, 229, 0.78);
}

#project-detail #storage-panel .data-table tbody td,
#project-detail .svc-console:has(#auth-section) .data-table tbody td,
#project-detail .svc-console:has(#email-section) .data-table tbody td,
#project-detail .svc-console:has(#api-keys-list) .data-table tbody td {
  padding: 13px 14px;
  border-bottom-color: rgba(222, 231, 238, 0.72);
}

#project-detail #storage-panel .data-table tbody tr:hover,
#project-detail .svc-console:has(#auth-section) .data-table tbody tr:hover,
#project-detail .svc-console:has(#email-section) .data-table tbody tr:hover,
#project-detail .svc-console:has(#api-keys-list) .data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.62);
}

#project-detail #storage-panel .user-cell-name,
#project-detail .svc-console:has(#auth-section) .user-cell-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#project-detail #storage-panel .file-type-ico {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
}

#project-detail #storage-panel .t-actions,
#project-detail .svc-console:has(#auth-section) .t-actions,
#project-detail .svc-console:has(#email-section) .t-actions,
#project-detail .svc-console:has(#api-keys-list) .t-actions {
  padding-right: 8px;
}

#project-detail #storage-panel .t-actions .icon-btn,
#project-detail .svc-console:has(#auth-section) .t-actions .icon-btn,
#project-detail .svc-console:has(#email-section) .t-actions .icon-btn,
#project-detail .svc-console:has(#api-keys-list) .t-actions .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

#project-detail .svc-console .tab-empty {
  padding: 32px 0;
  border: none;
}

#project-detail .svc-console .tab-empty-title {
  font-size: 13px;
  font-weight: 500;
}

#project-detail .svc-console .tab-empty-sub {
  font-size: 12px;
  max-width: 32em;
  margin: 4px 0 0;
}

#project-detail .svc-console > #db-section,
#project-detail .svc-console > #auth-section,
#project-detail .svc-console > #email-section,
#project-detail .svc-console > #deploy-section,
#project-detail .svc-console > #api-keys-list,
#project-detail .svc-console > #new-key-reveal {
  padding: 0;
}

#project-detail .svc-console > #db-section > .muted,
#project-detail .svc-console > #auth-section > .muted,
#project-detail .svc-console > #email-section > .muted,
#project-detail .svc-console > #deploy-section > .muted,
#project-detail .svc-console > #api-keys-list > .muted {
  padding: 16px 0;
  font-size: 12.5px;
}

#project-detail .svc-console .email-status-card {
  background: none;
  border: none;
  padding: 0 0 14px;
  margin: 0;
}

#project-detail .svc-console .email-settings {
  gap: 0;
}

#project-detail .svc-console .email-setting-row {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 0;
}

#project-detail .svc-console .email-setting-row:last-child {
  border-bottom: none;
}

#project-detail .svc-console .deploy-url-row {
  padding: 0 0 14px;
  margin: 0;
  border: none;
  background: none;
}

#project-detail .svc-console .deploy-url {
  color: var(--text);
  font-size: 13px;
  font-family: var(--ui-font);
}

#project-detail .svc-console .deploy-status-card {
  padding: 0 0 12px;
  margin: 0;
  border: none;
}

/* Copy URL / Open site read as inline text actions — drop the border. */
#project-detail .svc-console .deploy-url-actions .mini-btn {
  border: none;
}

/* "Last deployed …" — bold, system UI font. */
#project-detail .svc-console .deploy-status-card .t-dim {
  font-family: var(--ui-font);
  font-weight: 700;
}

/* Deploy tab's intro note reads larger than the other tabs' fine print. */
#project-detail .svc-console:has(#deploy-section) > .usage-note {
  font-size: 14px;
}

#project-detail .svc-console .db-table {
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

#project-detail .svc-console .db-table:last-child {
  border-bottom: none;
}

#project-detail .svc-console .db-table-head {
  padding: 10px 0;
}

#project-detail .svc-console .db-table-name {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
}

#project-detail .svc-console .db-rows {
  padding: 0 0 10px;
}

#project-detail .svc-console:has(#db-section) > .usage-note {
  margin: -8px 0 18px;
}

#project-detail .svc-console:has(#auth-section) > .usage-note {
  margin: -8px 0 18px;
}

#project-detail .svc-console:has(#email-section) > .usage-note {
  margin: -8px 0 18px;
}

#project-detail .svc-console:has(#deploy-section) > .usage-note,
#project-detail .svc-console:has(#api-keys-list) > .usage-note {
  margin: -8px 0 18px;
}

#project-detail .svc-console:has(#auth-section) .metric-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#project-detail .svc-console:has(#email-section) .metric-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#project-detail .svc-console:has(#deploy-section) .metric-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#project-detail .svc-console:has(#auth-section) .metric-num.sm {
  min-height: 28px;
  font-size: 14px;
}

#project-detail .svc-console:has(#email-section) .metric-num.sm {
  font-size: 14px;
}

#project-detail .svc-console:has(#auth-section) .table-empty,
#project-detail .svc-console:has(#auth-section) .tab-empty,
#project-detail .svc-console:has(#email-section) .table-empty,
#project-detail .svc-console:has(#email-section) .tab-empty,
#project-detail .svc-console:has(#deploy-section) .table-empty,
#project-detail .svc-console:has(#deploy-section) .tab-empty,
#project-detail .svc-console:has(#api-keys-list) .table-empty,
#project-detail .svc-console:has(#api-keys-list) .tab-empty {
  padding: 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

#project-detail .svc-console:has(#auth-section) .t-avatar {
  width: 32px;
  height: 32px;
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

#project-detail .svc-console:has(#auth-section) .user-cell-email {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#project-detail .svc-console:has(#email-section) .email-status-card {
  margin: 0 0 22px;
  padding: 16px;
  border: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

#project-detail .svc-console:has(#email-section) .email-status-top {
  gap: 12px;
}

#project-detail .svc-console:has(#email-section) .email-from {
  display: block;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

#project-detail .svc-console:has(#email-section) .email-settings {
  gap: 10px;
}

#project-detail .svc-console:has(#email-section) .email-setting-row {
  padding: 14px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

#project-detail .svc-console:has(#email-section) .email-setting-val {
  font-size: 14px;
}

#project-detail .svc-console:has(#auth-section) #auth-users {
  min-width: 0;
}

#project-detail .svc-console:has(#auth-section) .email-pager {
  justify-content: flex-start;
  margin-top: 12px;
}

#project-detail .svc-console:has(#email-section) #email-recent {
  min-width: 0;
}

#project-detail .svc-console:has(#email-section) .email-pager {
  justify-content: flex-start;
  margin-top: 12px;
}

#project-detail .svc-console:has(#deploy-section) .deploy-url-row,
#project-detail .svc-console:has(#api-keys-list) .new-key {
  padding: 16px;
  border: none;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72);
}

#project-detail .svc-console:has(#deploy-section) .deploy-url-row {
  margin: 0 0 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#project-detail .svc-console:has(#deploy-section) .deploy-status-card {
  margin: 0 0 18px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#project-detail .svc-console:has(#deploy-section) .deploy-url {
  display: block;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
}

#project-detail .svc-console:has(#api-keys-list) .new-key {
  margin: 0 0 16px;
}

#project-detail .svc-console:has(#api-keys-list) .new-key-row {
  gap: 10px;
}

#project-detail .svc-console:has(#api-keys-list) .new-key-value {
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

#project-detail .svc-console:has(#db-section) .db-table {
  margin: 0 0 10px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

#project-detail .svc-console:has(#db-section) .db-table:last-child {
  margin-bottom: 0;
}

#project-detail .svc-console:has(#db-section) .db-table-head {
  padding: 14px;
  border-bottom: 1px solid transparent;
}

#project-detail .svc-console:has(#db-section) .db-table-head:hover {
  background: rgba(255, 255, 255, 0.62);
}

#project-detail .svc-console:has(#db-section) .db-table-head.open {
  border-bottom-color: rgba(222, 231, 238, 0.72);
}

#project-detail .svc-console:has(#db-section) .db-table-name {
  font-size: 14px;
  font-weight: 600;
}

#project-detail .svc-console:has(#db-section) .db-table-head .row-sub {
  font-size: 12.5px;
}

#project-detail .svc-console:has(#db-section) .db-rows {
  padding: 14px;
}

#project-detail .svc-console:has(#db-section) .db-table-scroll {
  border: none;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
}

#project-detail .svc-console:has(#db-section) .db-data th {
  background: #e9ebee;
}

#project-detail .svc-console:has(#db-section) .db-data tbody tr:nth-child(even) td {
  background: #e9ebee;
}

#project-detail .svc-console:has(#db-section) .db-data th,
#project-detail .svc-console:has(#db-section) .db-data td {
  padding: 10px 12px;
  border-bottom-color: rgba(222, 231, 238, 0.72);
}

#project-detail .svc-console:has(#db-section) .tab-empty {
  padding: 30px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

#project-detail .svc-console .new-key {
  margin: 0 0 12px;
  padding: 10px 0 10px 12px;
  border: none;
  border-left: 2px solid var(--border-strong);
  border-radius: 0;
  background: none;
}

#project-detail .svc-console .key-prefix {
  font-size: 12px;
}

#project-detail .svc-console .file-type-ico {
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--muted);
  padding: 0;
}

#project-detail .svc-console .file-type-ico svg {
  width: 15px;
  height: 15px;
}

#project-detail .svc-console .user-cell-name {
  font-weight: 500;
}

#project-detail .svc-console .t-avatar {
  width: 28px;
  height: 28px;
}

@media (max-width: 900px) {
  #project-detail #storage-panel .metric-row,
  #project-detail .svc-console:has(#db-section) .metric-row,
  #project-detail .svc-console:has(#auth-section) .metric-row,
  #project-detail .svc-console:has(#email-section) .metric-row,
  #project-detail .svc-console:has(#deploy-section) .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #project-detail .svc-console .metric-row {
    gap: 12px 16px;
  }

  #project-detail .svc-console .metric {
    flex: 1 1 calc(50% - 8px);
  }

  #project-detail #storage-panel {
    padding: 16px;
    border-radius: 20px;
  }

  #project-detail .svc-console:has(#db-section) {
    padding: 16px;
    border-radius: 20px;
  }

  #project-detail .svc-console:has(#auth-section) {
    padding: 16px;
    border-radius: 20px;
  }

  #project-detail .svc-console:has(#email-section) {
    padding: 16px;
    border-radius: 20px;
  }

  #project-detail .svc-console:has(#deploy-section),
  #project-detail .svc-console:has(#api-keys-list) {
    padding: 16px;
    border-radius: 20px;
  }

  #project-detail #storage-panel .files-section-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #project-detail #storage-panel #storage-upload-btn {
    width: auto;
    margin-left: auto;
  }

  #project-detail #storage-panel .metric-row,
  #project-detail .svc-console:has(#db-section) .metric-row,
  #project-detail .svc-console:has(#auth-section) .metric-row,
  #project-detail .svc-console:has(#email-section) .metric-row,
  #project-detail .svc-console:has(#deploy-section) .metric-row {
    grid-template-columns: 1fr;
  }

  #project-detail .svc-console:has(#email-section) .email-status-top,
  #project-detail .svc-console:has(#email-section) .email-setting-row {
    align-items: stretch;
    flex-direction: column;
  }

  #project-detail .svc-console:has(#email-section) .mini-btn {
    width: 100%;
  }

  #project-detail .svc-console:has(#deploy-section) .deploy-url-actions,
  #project-detail .svc-console:has(#api-keys-list) .new-key-row {
    width: 100%;
  }

  #project-detail .svc-console:has(#deploy-section) .mini-btn,
  #project-detail .svc-console:has(#api-keys-list) .mini-btn {
    width: 100%;
    justify-content: center;
  }
}

.proj-panel.hidden {
  display: none;
}

/* Overview hero: brand cloud-sky (same gradient as the projects list) */
.proj-sky {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(140deg, #c8e1fa 0%, #a6c8f2 45%, #7aaae8 100%);
}

#project-detail .proj-sky {
  /* Match #projects-list panel height; cards scroll inside instead of growing. */
  box-sizing: border-box;
  height: 476px;
  display: flex;
  flex-direction: column;
  /* No bottom padding — scroll grid extends to panel edge (same as #projects-list). */
  padding: 24px 24px 0;
  border-radius: 28px;
  box-shadow: 0 14px 44px -18px rgba(48, 87, 140, 0.38);
}

#project-detail .proj-sky-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#project-detail .proj-sky-intro {
  flex-shrink: 0;
  margin-bottom: 18px;
  max-width: min(68em, 100%);
}

#project-detail .proj-sky-title {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a2740;
}

#project-detail .proj-sky-desc {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(26, 39, 64, 0.72);
}

#project-detail .proj-sky-usage-note {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.45;
  color: rgba(26, 39, 64, 0.55);
}

#project-detail .proj-sky-link {
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #1a4a8a;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#project-detail .proj-sky-link:hover {
  color: #0f3568;
}

#project-detail .proj-sky-grid {
  /* Match the Projects tab: 4 narrow columns, same gap. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(108px, auto);
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 4px;
  padding-bottom: 24px;
}

#project-detail .proj-sky-grid::-webkit-scrollbar {
  display: none;
}

#project-detail .svc-card:hover {
  transform: translateY(-2px);
}

/* Match the project-card size (padding + min-height) so the tiles read the same. */
#project-detail .proj-sky-grid .svc-card {
  height: 100%;
  min-height: 108px;
  align-self: start;
}

#project-detail .svc-card .halo-lens-panel-content {
  padding: 22px 18px 16px;
  min-height: 108px;
  height: 100%;
  box-sizing: border-box;
}

#project-detail .svc-card-top {
  gap: 10px;
  min-width: 0;
}

#project-detail .svc-ico {
  flex-shrink: 0;
}

#project-detail .svc-name {
  font-size: 15px;
  margin-top: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.25;
}

#project-detail .svc-stat {
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 600;
}

@media (max-width: 720px) {
  #project-detail .proj-sky-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.proj-sky > .projects-clouds {
  z-index: 0;
}

.proj-sky-inner {
  position: relative;
  z-index: 1;
}

.proj-sky-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 14px;
}

/* Liquid-glass service tile (button) floating on the cloud sky */
.svc-card {
  text-align: left;
  cursor: pointer;
  border: 0;
  background: none;
  font-family: inherit;
  padding: 0;
  transition: transform 0.15s ease;
}
/* Match the project-card corner radius (32px). Flat on the sky — no drop shadow
   (outer + bottom inset from halo-lens.css clip badly inside the scroll grid). */
.svc-card.halo-lens-panel,
.svc-card.halo-lens-panel:hover {
  --halo-lens-panel-radius: 32px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45);
}

.svc-card:hover {
  transform: translateY(-1px);
}

.svc-card .halo-lens-panel-content {
  padding: 16px 17px;
}

.svc-card-top {
  display: flex;
  align-items: center;
}

.svc-ico {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #2b3440;
}

.svc-ico svg {
  width: 20px;
  height: 20px;
}

.svc-name {
  font-weight: 600;
  font-size: 14.5px;
  color: #161a1f;
  margin-top: 13px;
}

.svc-stat {
  font-size: 12.5px;
  color: #46505b;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .proj-sky-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Feature tab content: metrics, sections, data tables ---------- */
.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 2px 0 4px;
}

.t-actions {
  text-align: right;
  white-space: nowrap;
}

.t-actions .icon-btn {
  vertical-align: middle;
}

.file-type-ico svg {
  width: 17px;
  height: 17px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 15px;
}

.metric-lab {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.metric-num {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.metric-num.sm {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.on { background: #2e9b6b; }
.status-dot.off { background: var(--muted); }

.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 9px;
}

.count-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
}

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.data-table .t-dim {
  color: var(--muted);
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.user-cell-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-cell-name {
  font-weight: 600;
  color: var(--text);
}

.user-cell-email {
  font-size: 12px;
  color: var(--muted);
}

.t-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  color: var(--muted);
}

.table-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 16px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}

.tab-empty {
  text-align: center;
  padding: 34px 16px;
}
/* Left-aligned variant (e.g. Deploy's "Not deployed yet" empty state). */
.tab-empty--left {
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

.tab-empty-title {
  font-weight: 600;
  font-size: 15px;
}

.tab-empty-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 5px;
}

/* ---- Email section (project detail → Email tab) ---- */
.email-status-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.email-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.email-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-identity-lab {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.email-from {
  font-family: var(--ui-font);
  font-size: 13px;
  word-break: break-all;
}
.email-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.email-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.email-setting-row > div {
  min-width: 0;
}
.email-setting-val {
  font-size: 14px;
  margin-top: 3px;
  word-break: break-all;
}
.email-err {
  color: var(--muted);
  font-size: 12px;
}

/* Recent-emails numbered pager (1 2 3 …). */
.email-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.email-pager-num {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.email-pager-num:not(.is-current):hover {
  background: transparent;
  color: var(--text);
}
.email-pager-num.is-current {
  color: var(--text);
  font-weight: 700;
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.email-pager-gap {
  min-width: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
#email-recent[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* ---- Orchard Deploy panel (read-only) ---- */
.deploy-url-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.deploy-url {
  font-family: var(--mono);
  font-size: 0.92rem;
  word-break: break-all;
  color: var(--accent);
  text-decoration: none;
}
.deploy-url:hover { text-decoration: underline; }
.deploy-url-actions { display: flex; gap: 8px; flex-shrink: 0; }
.deploy-status-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ============================================================
   Legal pages (Privacy, Terms) — centered title, left-aligned body
   ============================================================ */
.legal-page {
  min-height: 100vh;
  background: #ffffff;
  font-family: var(--ui-font);
}

.legal-topbar {
  display: flex;
  align-items: center;
  padding: 16px 24px;
}

.legal {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 96px;
  font-family: var(--ui-font);
  color: #161616;
}

.legal-published {
  margin: 16px 0 0;
  text-align: center;
  font-size: 16px;
  color: #161616;
}

.legal-title {
  margin: 14px 0 56px;
  text-align: center;
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #0a0a0a;
}

.legal-body {
  font-size: 18px;
  line-height: 1.7;
}

.legal-body > p {
  margin: 0 0 20px;
}

.legal-effective {
  margin-bottom: 36px !important;
}

.legal-body h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}

.legal-body ul {
  margin: 0 0 20px;
  padding-left: 22px;
}

.legal-body li {
  margin-bottom: 9px;
}

.legal-body a {
  color: #0a0a0a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .legal-body {
    font-size: 16px;
  }
}

/* ---------- Billing tab (Phase 7) ---------- */
/* The Billing tab now renders from /api/billing/status (cycle-aware). Hide the
   legacy supabase-counter usage panel so Builder numbers never come from old
   month counters directly. */
#billing-panel .usage-panel { display: none; }

.billing-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; /* both cards share one height */
  gap: 12px;
  width: 100%;
  max-width: 100%;
  flex: 1; /* fill the billing panel's height — no bottom gap */
}
/* Billing cards are liquid glass (halo-lens), matching the Project Dashboard.
   The .halo-lens-panel module supplies the frosted surface + edge highlights;
   the card itself stays transparent and content sits on top at z-index 3. */
.billing-card {
  background: transparent;
  border: none;
}
.billing-card.halo-lens-panel,
.billing-card.halo-lens-panel:hover {
  /* Match the project-card corner radius (see .project-card.halo-lens-panel). */
  --halo-lens-panel-radius: 32px;
}
.billing-card-inner {
  padding: 15px 18px;
  gap: 0;
  color: var(--text);
}
/* The allowance card fills the stretched row height so its inner can host a
   fixed-height, scrollable usage list (the card never grows when opened). */
.allowance-card.halo-lens-panel { display: flex; }
.allowance-card .billing-card-inner { flex: 1; min-height: 0; }
/* The plan card fills its stretched height too, so the Upgrade CTA can sit flush
   at the bottom (via .billing-actions margin-top:auto). */
.plan-card.halo-lens-panel { display: flex; }
.plan-card .billing-card-inner { flex: 1; }
.plan-card .plan-merged { flex: 1; }
.billing-card h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.billing-card h3 { margin: 0 0 8px; font-size: 13.5px; color: var(--text); }
/* "Additional cost" card: title, amount, and toggle in one horizontal row. */
.addcost-head { display: flex; align-items: center; gap: 12px; }
.addcost-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
/* Refresh + Details buttons grouped at the far right of the header row. */
.addcost-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.addcost-amount { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.addcost-sub { font-family: var(--ui-font); font-weight: 450; font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.usage-toggle {
  appearance: none; border: none; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.usage-toggle:hover { opacity: 0.8; }
/* Open usage list fills the remaining card height and scrolls internally, so
   opening it never grows the card. Scrollbar hidden (still scrollable). */
.usage-details {
  font-family: var(--ui-font);
  margin-top: 8px; flex: 1 1 0; min-height: 0; overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.usage-details::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */
/* The usage list always fills the space between the subtitle and the spending-cap
   section (as a scroll area when open, an empty spacer when collapsed) so the cap
   section stays pinned to the bottom of the card in both states. */
.usage-rows[hidden] { display: none; }
/* Toggle button, left-aligned just under the amount (above the list). */
.addcost-actions { display: flex; justify-content: flex-start; }
.plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-status {
  font-size: 12px; text-transform: capitalize; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
  background: rgba(255, 255, 255, 0.35);
}
.badge.test {
  font-size: 11px; background: #fff2cc; color: #8a6d00;
  border: 1px solid #f0d489;
  border-radius: 6px; padding: 2px 8px; vertical-align: middle;
}
.billing-status .muted { font-family: var(--ui-font); font-weight: 450; color: var(--muted); font-size: 12.5px; margin: 4px 0; }
/* Billing header subtitle + notices use the system UI font (like the landing). */
.view[data-view="billing"] .view-sub { font-family: var(--ui-font); font-weight: 450; }
.overage { font-size: 13.5px; font-weight: 600; margin: 6px 0; color: var(--text); }
.deploy-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; }

/* Notice banners as liquid-glass panels with a soft per-level colored wash. */
.billing-notice.halo-lens-panel {
  --halo-lens-panel-radius: 20px;
  --halo-lens-panel-tint: 0;
  margin: 8px 0;
  box-shadow:
    inset 0 0 0 1px rgba(29, 28, 26, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(29, 28, 26, 0.06);
}
.billing-notice .halo-lens-panel-content {
  font-family: var(--ui-font); font-weight: 450;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.4;
}
.billing-notice.halo-lens-panel { --halo-glass-bg: linear-gradient(transparent 0 0); }
.billing-notice.info  .halo-lens-panel-content { color: #1a3a6b; }
.billing-notice.warn  .halo-lens-panel-content { color: #6b5410; }
.billing-notice.error .halo-lens-panel-content { color: #8a1f1f; }
.billing-error { color: #b91c1c; }

/* Anchor the plan-card button to the bottom-right so the stretched card fills
   cleanly and the CTA sits in the corner. */
.billing-actions { margin: auto 0 10px; display: flex; justify-content: flex-end; }

/* Usage rows — quiet luxury: hairline-separated rows, a small glass percent
   chip, and a jewel-toned gradient bar on a recessed track. */
/* Short note that usage is account-wide (sum of all projects), not per-project. */
.usage-note { font-family: var(--ui-font); font-weight: 450; font-size: 11px; color: var(--muted); margin: 0; }
.svc-row { padding: 13px 0; }
.svc-row:first-child { padding-top: 10px; }
.svc-row + .svc-row { border-top: 1px solid rgba(120, 120, 120, 0.28); }
/* One line per service: name + numbers on the left, meter (bar + chip) on the
   right, vertically centered. */
.svc-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.svc-label {
  font-size: 13px; font-weight: 650; letter-spacing: 0.01em;
  margin-bottom: 2px; color: var(--text);
}
.svc-meter { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Builder: plain overage fee in place of the ring — no chip, no colour. */
.svc-overage-amount { font-family: var(--ui-font); font-weight: 600; font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
/* Real usage numbers for the binding dimension (e.g. "0 of 1 GB"). */
.svc-usage { font-weight: 450; font-size: 12px; color: var(--muted); margin: 0; letter-spacing: 0.01em; }
/* Billable overage beside the ring when Builder is past the included allowance. */
.svc-over {
  color: #8a5a12; font-weight: 650; font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(240, 180, 41, 0.18);
  box-shadow: inset 0 0 0 0.5px rgba(29, 28, 26, 0.08);
}
/* Circular progress ring — conic fill on a recessed track, hollowed by a radial
   mask; the percent label sits in the center. --pct (0–100) drives the sweep. */
.svc-ring {
  --pct: 0;
  --ring-color: #1d1c1a;
  --ring-track: rgba(29, 28, 26, 0.1);
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.svc-ring::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ring-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ring-color) 45%, transparent));
  transition: background .4s cubic-bezier(.22, .8, .36, 1);
}
.svc-ring-label {
  position: relative;
  font-size: 11px; font-weight: 650; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.svc-ring.warn { --ring-color: #ffcf1f; }
.svc-ring.warn .svc-ring-label { color: #9a6a00; }
.svc-ring.block { --ring-color: #f5321f; }
.svc-ring.block .svc-ring-label { color: #b3160a; }
.svc-ring.over { --ring-color: #ffcf1f; }
.svc-ring.over .svc-ring-label { color: #9a6a00; }
.svc-msg { font-weight: 450; font-size: 12.5px; margin-top: 6px; }
.svc-msg.warn { color: #8a5a12; }
.svc-msg.block { color: #c0392b; }

/* Spending cap: heading (+ hint) on the left, current value on the right. */
.cap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cap-head-left { display: flex; flex-direction: column; gap: 1px; }
.cap-hint { font-family: var(--ui-font); font-size: 11.5px; color: var(--muted); }
.cap-current { font-family: var(--ui-font); font-size: 14.5px; color: var(--text); margin: 0; }
.cap-current.cap-empty { font-size: 12px; color: var(--muted); }
.cap-edit { display: flex; flex-direction: column; gap: 6px; margin: 38px 0 0; }
.cap-edit label { font-family: var(--ui-font); font-size: 12px; color: var(--muted); }
.cap-edit-row { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cap-edit input {
  width: 76px; padding: 8px 16px; border-radius: 999px;
  font-family: var(--ui-font); font-size: 13px; font-weight: 600; color: var(--text);
  border: none;
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(29, 28, 26, 0.08);
  transition: box-shadow 0.15s ease;
}
.cap-edit input:focus { outline: none; }
/* Hide the number-input spinner arrows. */
.cap-edit input::-webkit-outer-spin-button,
.cap-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cap-edit input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.cap-note { font-size: 12px; color: var(--muted); margin: auto 0 0; }
.cap-hint { font-family: var(--ui-font); font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
/* Saved state: the Update-cap button dims and can't be re-clicked until the
   value changes again. */
.btn.halo-lens-panel.billing-pill:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* Subscription card merges plan info (left) + spending cap (right) as two columns
   separated by a hairline, so the full-width card stays clean and balanced. */
/* The subscription card is half-width, so plan info + spending cap stack
   vertically inside it, split by a hairline. */
.plan-merged { display: flex; flex-direction: column; }
.plan-info { display: flex; flex-direction: column; }
.plan-cap {
  position: relative;
  margin-top: 16px;
  padding-top: 16px;
}
/* Divider inset slightly from both edges (narrower than full width). */
.plan-cap::before {
  content: "";
  position: absolute; top: 0; left: 10px; right: 10px;
  height: 1px; background: rgba(120, 120, 120, 0.28);
}
.plan-cap h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
/* In the Additional-cost card the usage spacer already pins the cap section to the
   bottom; align the Update-cap button with the left card's Manage button (both sit
   10px above the card's content bottom). */
.allowance-card .plan-cap .cap-edit { margin-bottom: 10px; }

/* Builder pitch on the Free plan card — what upgrading buys, above the CTA. */
.plan-perks { margin: 14px 0 16px; }
.plan-perks h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.plan-perks ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.plan-perks li { font-family: var(--ui-font); font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.45; }

/* Pill-shaped liquid-glass buttons (Upgrade CTA + usage-details toggle share the
   exact same halo-lens values; only their padding/weight differ). Three classes
   so it beats halo-lens.css's later-loading radius default. Lighter glass than
   the default panels — a whisper of tint + mild frost + a crisp rim. */
.btn.halo-lens-panel.upgrade-pill,
.btn.halo-lens-panel.usage-toggle-btn,
.btn.halo-lens-panel.usage-refresh-btn,
.btn.halo-lens-panel.billing-pill {
  --halo-lens-panel-radius: 999px;
  --halo-lens-panel-tint: 0.1;
  --halo-glass-bg: linear-gradient(transparent 0 0);
  --halo-lens-panel-blur: 4px;
  --halo-lens-panel-saturate: 140%;
  --halo-lens-panel-brightness: 1.03;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(29, 28, 26, 0.08);
}
.btn.halo-lens-panel.upgrade-pill,
.btn.halo-lens-panel.billing-pill { padding: 8px 22px; font-size: 13px; font-weight: 600; }
/* Circular refresh button, left of the Details toggle. */
.btn.halo-lens-panel.usage-refresh-btn { width: 34px; height: 34px; padding: 0; color: var(--text); }
.btn.halo-lens-panel.usage-refresh-btn .halo-lens-panel-content { justify-content: center; }
.btn.halo-lens-panel.usage-refresh-btn svg { display: block; }
.btn.halo-lens-panel.usage-refresh-btn.spinning svg { animation: usage-spin 0.8s linear infinite; }
@keyframes usage-spin { to { transform: rotate(360deg); } }
/* Hover: the glass fills in noticeably (deeper tint + a touch more frost). */
.btn.halo-lens-panel.upgrade-pill:hover,
.btn.halo-lens-panel.usage-toggle-btn:hover,
.btn.halo-lens-panel.usage-refresh-btn:hover,
.btn.halo-lens-panel.billing-pill:hover {
  --halo-lens-panel-tint: 0.28;
  --halo-lens-panel-brightness: 1.06;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 4px 14px rgba(29, 28, 26, 0.12);
}

@media (max-width: 760px) {
  .billing-status { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cap-edit-row { flex-direction: column; align-items: stretch; }
  .cap-edit input { width: 100%; }
  /* Usage rows: meter drops under the text and stretches full-width. */
  .svc-line { flex-wrap: wrap; }
  .svc-meter { width: 100%; margin-top: 6px; }
  .svc-bar { flex: 1; width: auto; }
}