/* =========================================================
   Poof Dashboard — clean, brand-consistent, utilitarian
   ========================================================= */

:root {
  /* surfaces — slightly cleaner than landing, but same family */
  --bg: #F5EFE3;            /* page cream (matches landing) */
  --bg-2: #FBF6EA;          /* card hover bg */
  --surface: #FFFFFF;       /* primary card */
  --sidebar: #FFFFFF;
  --ink: #181818;
  --ink-2: #545159;
  --ink-3: #8A8590;
  --line: #ECE4CE;
  --line-2: #F1EAD6;
  --line-strong: #1F1A2E;

  /* accents */
  --coral: #FF5C4D;
  --coral-deep: #E84A3C;
  --coral-tint: #FFE7E1;
  --sun: #FFC53D;
  --sun-tint: #FFF1CB;
  --mint: #1FB295;
  --mint-tint: #E0F1EC;
  --sky: #6FA8E0;
  --sky-tint: #E7F0FB;
  --pink: #F08DB8;
  --pink-tint: #FBE4ED;
  --plum: #4C3A5C;

  /* status */
  --live: #1FB295;
  --draft: #FFC53D;
  --error: #FF5C4D;

  /* type — refined trio: Geist (sans) · Instrument Serif (display) · Geist Mono */
  --f-sans:  "Geist", "Inter Tight", -apple-system, "Segoe UI", sans-serif;
  --f-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --f-serif: "Instrument Serif", "Iowan Old Style", "Hoefler Text", Georgia, serif;

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;

  /* shadows */
  --sh-xs: 0 1px 2px rgba(26,26,31,.04);
  --sh-sm: 0 4px 14px -4px rgba(26,26,31,.08);
  --sh-md: 0 16px 40px -16px rgba(26,26,31,.18);
  --sh-lg: 0 30px 70px -24px rgba(26,26,31,.22);

  /* layout */
  --sidebar-w: 252px;
  --topbar-h: 60px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); height: 100%; }
body {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.005em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ============= APP SHELL ============= */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.content { flex: 1; min-width: 0; }

/* ============= SIDEBAR ============= */
.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.sb-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 18px;
  border-bottom: 1px solid var(--line-2);
  min-height: 44px;
}
.sb-logo-img {
  display: block;
  max-width: 100%;
  max-height: 38px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sb-logo-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--ink); color: var(--sun);
  display: grid; place-items: center;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 14px;
}
.sb-logo-name {
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
}
.sb-section {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 18px 12px 8px;
}
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s, color .15s;
  cursor: pointer;
}
.sb-link:hover { background: var(--bg-2); color: var(--ink); }
.sb-link.active { background: var(--ink); color: var(--bg); }
.sb-link.active .sb-link-icon { color: var(--sun); }
.sb-link-icon { width: 18px; height: 18px; flex-shrink: 0; }
.sb-badge {
  margin-left: auto;
  background: var(--coral);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.sb-spacer { flex: 1; }

/* ---------- Sidebar: Invite friends card ---------- */
.sb-refer-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  flex-shrink: 0;
  margin: 14px 0 2px;
  padding: 11px 12px 11px 11px;
  border-radius: 14px;
  text-align: left;
  color: var(--ink);
  background:
    radial-gradient(180px 80px at 100% 0%, rgba(255, 197, 61, .35), transparent 60%),
    linear-gradient(160deg, #FFF1CB 0%, #FFE3D2 50%, #FFD0BE 100%);
  border: 1px solid rgba(232, 74, 60, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 6px 14px -10px rgba(232, 74, 60, .35);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.18, .89, .32, 1.15), box-shadow .18s, border-color .18s;
}
.sb-refer-card::before {
  /* gold coin peeking out top-right */
  content: "+50";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-style: italic;
  font-size: 12px;
  color: #6B3A05;
  text-shadow: 0 1px 0 rgba(255, 240, 190, .6);
  background:
    radial-gradient(circle at 32% 28%, #FFF1B8 0%, #FFC53D 38%, #E89B1F 75%, #B26A0A 100%);
  box-shadow:
    inset 0 -2px 4px rgba(120, 60, 0, .35),
    inset 0 2px 3px rgba(255, 245, 200, .55),
    0 6px 12px -4px rgba(232, 74, 60, .45),
    0 0 0 2px var(--sidebar, #fff);
  transform: rotate(-10deg);
  transition: transform .35s cubic-bezier(.18, .89, .32, 1.15);
  z-index: 1;
}
.sb-refer-card:hover {
  transform: translateY(-1px);
  border-color: rgba(232, 74, 60, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 14px 24px -14px rgba(232, 74, 60, .45);
}
.sb-refer-card:hover::before {
  transform: rotate(8deg) scale(1.12) translateY(-2px);
}
.sb-refer-card:active { transform: translateY(0); }

.sb-refer-emoji {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(232, 74, 60, .12),
    0 3px 8px -3px rgba(232, 74, 60, .25);
  transition: transform .28s cubic-bezier(.18, .89, .32, 1.15);
}
.sb-refer-card:hover .sb-refer-emoji {
  transform: translateY(-1px) rotate(-8deg);
}

.sb-refer-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sb-refer-text strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.sb-refer-text span {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--coral-deep, #E84A3C);
  font-weight: 500;
}
.sb-refer-text span em,
.sb-refer-text em {
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-right: 2px;
}

.sb-refer-arrow {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  color: var(--coral-deep, #E84A3C);
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: transform .22s cubic-bezier(.18, .89, .32, 1.15), background .18s;
}
.sb-refer-card:hover .sb-refer-arrow {
  transform: translateX(3px);
  background: #fff;
}

/* Compact-sidebar fallback */
.sb-refer-mini {
  width: 40px; height: 40px;
  margin: 14px auto 2px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-radius: 12px;
  background: linear-gradient(160deg, #FFF1CB 0%, #FFE3D2 50%, #FFD0BE 100%);
  border: 1px solid rgba(232, 74, 60, .2);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
}
.sb-refer-mini:hover {
  transform: translateY(-1px) rotate(-6deg);
  box-shadow: 0 10px 18px -10px rgba(232, 74, 60, .4);
}

.sb-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  margin-top: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  position: relative;
  border-radius: 12px;
}
.sb-user:hover { background: var(--bg-2); border-color: var(--line-2); }
.sb-user.open { background: var(--bg-2); border-color: var(--ink); }
.sb-user-caret {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--ink-3);
  transition: transform .2s;
}
.sb-user-caret svg { width: 14px; height: 14px; }
.sb-user.open .sb-user-caret { transform: rotate(180deg); color: var(--ink); }

/* --- User popover menu (anchored to .sb-user) --- */
.user-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 56px rgba(20,16,24,.18), 0 2px 8px rgba(20,16,24,.06);
  padding: 6px;
  z-index: 60;
  cursor: default;
  animation: um-pop .16s cubic-bezier(.2,.8,.2,1);
  min-width: 280px;
}
@keyframes um-pop {
  from { transform: translateY(6px) scale(.98); opacity: 0; }
  to   { transform: translateY(0)   scale(1);   opacity: 1; }
}
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 10px;
}
.user-menu-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--sun));
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.user-menu-name { font-weight: 700; font-size: 14px; }
.user-menu-email { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-family: var(--f-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-plan {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  background: var(--mint);
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 700;
}
.user-menu-credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 6px 4px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255,92,77,.06), rgba(255,197,61,.06));
  border-radius: 10px;
  border: 1px solid var(--line);
}
.user-menu-credits-kicker {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
}
.user-menu-credits-num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.018em;
  margin-top: 1px;
}
.user-menu-credits-num small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}
.user-menu-meter {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  margin: 0 12px 6px;
  overflow: hidden;
}
.user-menu-meter > div {
  height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--sun));
  border-radius: 2px;
}
.user-menu-divider {
  height: 1px;
  background: var(--line-2);
  margin: 6px 0;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-family: var(--f-sans);
  transition: background .12s;
}
.user-menu-item:hover { background: var(--bg-2); }
.user-menu-item svg { width: 14px; height: 14px; color: var(--ink-3); flex-shrink: 0; }
.user-menu-item:hover > svg:last-child { color: var(--ink); transform: translateX(2px); transition: transform .12s; }
.user-menu-ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--bg-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.user-menu-ic svg { width: 15px; height: 15px; color: var(--ink-2); }
.user-menu-label { font-weight: 600; font-size: 13px; }
.user-menu-sub { font-size: 11px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-item.subtle { padding: 8px 12px; }
.user-menu-item.subtle .user-menu-label { font-weight: 500; font-size: 12.5px; color: var(--ink-2); }
.user-menu-item.danger .user-menu-label { color: var(--coral); }
.user-menu-item.danger:hover { background: var(--coral-tint); }
.user-menu-item.danger:hover .user-menu-label { color: var(--coral); }

.sb-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--sun));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.sb-user-name { font-weight: 500; font-size: 13.5px; }
.sb-user-plan { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* ---- compact (editor mode): slim icon rail ---- */
.shell:has(.sidebar.compact) { grid-template-columns: 64px 1fr; }
.sidebar.compact {
  padding: 14px 8px;
  align-items: center;
  /* inherits overflow-y: auto from .sidebar — whole rail scrolls when content overflows */
}
.sidebar.compact .sb-logo {
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--line-2);
  justify-content: center;
  overflow: hidden;
  width: 100%;
}
.sidebar.compact .sb-logo-img {
  height: 32px;
  max-height: 32px;
  width: 32px;
  max-width: none;
  object-fit: cover;
  object-position: 0% 50%;
  /* scale: image is 1024x201, mark is ~200x200 at far left (~20%) */
  /* show only the leftmost square of the lockup */
}
.sidebar.compact .sb-logo-name { display: none; }
.sidebar.compact .btn-coral {
  width: 40px !important;
  height: 40px;
  padding: 0 !important;
  border-radius: 12px !important;
  margin: 14px 0 6px !important;
  justify-content: center;
  gap: 0;
}
.sidebar.compact .btn-coral > span,
.sidebar.compact .btn-coral { font-size: 0; }
.sidebar.compact .btn-coral svg { width: 18px; height: 18px; }
.sidebar.compact .sb-section { display: none; }
.sidebar.compact .sb-nav { width: 100%; gap: 4px; }
.sidebar.compact .sb-link {
  padding: 10px 0;
  justify-content: center;
  border-radius: 10px;
  position: relative;
}
.sidebar.compact .sb-link > span:not(.sb-link-icon):not(.sb-badge) { display: none; }
.sidebar.compact .sb-badge {
  position: absolute;
  top: 4px; right: 6px;
  margin: 0;
  font-size: 9px;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
}
.sidebar.compact .sb-user {
  padding: 6px;
  border-radius: 12px;
  margin-top: 0;
  border: 0;
  background: transparent;
}
.sidebar.compact .sb-user > div,
.sidebar.compact .sb-user > .sb-user-caret,
.sidebar.compact .sb-user > svg { display: none; }
.sidebar.compact .sb-user .sb-avatar { width: 36px; height: 36px; }
.sidebar.compact .user-menu { left: 100%; bottom: 0; margin-left: 12px; right: auto; }

/* native browser tooltips via title attr — reliable across overflow contexts */

/* ============= TOPBAR ============= */
.topbar {
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(8px);
  background: rgba(245,239,227,.85);
}
.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px;
  color: var(--ink-3);
}
.crumbs .here { color: var(--ink); font-weight: 500; }
.crumbs .sep { color: var(--ink-3); opacity: .5; }

.topbar-search {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.topbar-search input {
  width: 280px;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, width .2s;
}
.topbar-search input:focus { border-color: var(--ink); width: 340px; }
.topbar-search svg {
  position: absolute;
  left: 12px;
  color: var(--ink-3);
}
.topbar-kbd {
  position: absolute;
  right: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--ink-3);
  pointer-events: none;
}
.topbar-icons { display: flex; gap: 4px; align-items: center; }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
  position: relative;
}
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.icon-btn .dot {
  position: absolute;
  top: 9px; right: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  border: 2px solid var(--bg);
}

/* ============= PAGE WRAPPERS ============= */
.page { padding: 32px 32px 72px; max-width: 1400px; margin: 0 auto; }
.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}
.page-head h1 {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0;
}
.page-head .sub { color: var(--ink-2); font-size: 16px; margin-top: 8px; max-width: 60ch; line-height: 1.55; }

/* ============= BUTTONS ============= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  line-height: 1;
}
.btn-coral { background: var(--coral); color: #fff; font-weight: 600; }
.btn-coral:hover { background: var(--coral-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(255,92,77,.5); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-outline { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 13px 22px; font-size: 15px; }

/* ============= CHIPS / SEGMENT ============= */
.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.seg button.active { background: var(--ink); color: var(--bg); }
.seg button:hover:not(.active) { color: var(--ink); }

.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip .count { color: var(--ink-3); margin-left: 2px; }
.chip.active .count { color: rgba(255,255,255,.55); }

/* ============= HOME STATS ROW ============= */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1100px) { .home-stats { grid-template-columns: repeat(2, 1fr); } }
.home-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .15s;
}
.home-stat:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: var(--ink-3); }
.home-stat .hs-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 500;
}
.home-stat .hs-label .hs-ic {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  background: var(--bg-2);
}
.home-stat .hs-value {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.025em;
  margin-top: 12px;
  line-height: 1.02;
}
.home-stat .hs-delta {
  margin-top: 8px;
  font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 4px;
}
.home-stat .hs-delta.up { color: var(--mint); }
.home-stat .hs-delta.down { color: var(--coral); }
.home-stat .hs-spark { position: absolute; right: 14px; bottom: 14px; opacity: .55; }

/* ============= BANNER ============= */
.banner {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 20px;
  background: linear-gradient(95deg, var(--sun-tint) 0%, var(--coral-tint) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 20px;
}
.banner-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ink); color: var(--sun);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.banner-body { flex: 1; min-width: 0; }
.banner-body strong { font-weight: 700; }
.banner-body p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.banner-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.banner-close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1200px) { .apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .apps-grid { grid-template-columns: 1fr; } }

.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .15s;
  cursor: pointer;
  position: relative;
}
.app-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(26,26,31,.18);
  border-color: var(--ink-3);
}
.app-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity .4s;
  mix-blend-mode: overlay;
}
.app-card:hover::after { opacity: 1; }
.app-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.app-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18) 100%);
}
.app-status {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.app-status .pulse {
  width: 6px; height: 6px; border-radius: 50%;
}
.app-status.live .pulse { background: var(--live); box-shadow: 0 0 0 3px rgba(31,178,149,.25); animation: pulse 2s ease-in-out infinite; }
.app-status.draft .pulse { background: var(--draft); }
.app-status.archived .pulse { background: var(--ink-3); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(31,178,149,.25); }
  50% { box-shadow: 0 0 0 6px rgba(31,178,149,.05); }
}

.app-menu-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  color: var(--ink);
  opacity: 0;
  transition: opacity .2s;
}
.app-card:hover .app-menu-btn { opacity: 1; }

.app-body {
  padding: 18px 20px 20px;
}
.app-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.012em;
  margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.app-emoji {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-size: 14px;
}
.app-url {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
  display: flex; align-items: center; gap: 4px;
}
.app-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
  border-top: 1px solid var(--line-2);
  padding-top: 14px;
}
.app-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* gradient thumbs (same as landing templates) */
.thumb-bakery  { background: linear-gradient(135deg,#3a1410,#6e2a1c 35%,#c0784a 70%,#ffd9a8); }
.thumb-portal  { background: linear-gradient(150deg,#102a3d,#1c4a73 45%,#6FA8E0 78%,#DCEDFB); }
.thumb-yoga    { background: linear-gradient(160deg,#1F1A2E,#4C3A5C 40%,#E892B5 75%,#FBE4ED); }
.thumb-shop    { background: linear-gradient(140deg,#0F3A33,#1FB295 50%,#DFF6EE); }
.thumb-book    { background: linear-gradient(135deg,#3a2a14,#7d5a32 40%,#d6a85a 80%,#fff1cb); }
.thumb-event   { background: linear-gradient(155deg,#1A1A1F,#3a2845 35%,#9a4e74 70%,#FBE4ED); }
.thumb-pet     { background: linear-gradient(150deg,#2a1a3d,#5d3a83 50%,#b78ec9); }
.thumb-invoice { background: linear-gradient(140deg,#142a3d,#2e5e8a 50%,#bfd9f2); }
.thumb-empty   { background: linear-gradient(135deg, #EFE9DA, #FBF6EA); }

.thumb-preview { background: #fff; }
.app-thumb-iframe {
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  border: none;
  transform: scale(.5);
  transform-origin: top left;
  pointer-events: none;
}

/* "new app" card */
.app-card.new-app {
  background: transparent;
  border: 2px dashed var(--line);
  display: grid; place-items: center;
  min-height: 100%;
  transition: border-color .15s, background .15s, transform .25s;
}
.app-card.new-app:hover { border-color: var(--ink); background: var(--bg-2); transform: translateY(-4px); }
.app-card.new-app .inner {
  text-align: center;
  padding: 32px 24px;
}
.app-card.new-app .plus {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  box-shadow: 0 10px 24px -8px rgba(255,92,77,.5);
}
.app-card.new-app h3 { font-size: 16px; margin: 0 0 4px; font-weight: 700; letter-spacing: -0.01em; }
.app-card.new-app p { font-size: 13px; color: var(--ink-3); margin: 0; }

/* ============= EDITOR — chat + live preview ============= */
.editor {
  display: grid;
  grid-template-columns: 400px 1fr;
  height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  position: relative;
}
.editor-chat {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.editor-chat-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.editor-chat-head h3 {
  font-size: 14.5px; font-weight: 700; margin: 0;
  letter-spacing: -0.01em;
}
.editor-chat-head .pill {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mint-tint);
  color: var(--mint);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.editor-chat-head .pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint);
  animation: pulse 2s ease-in-out infinite;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex; flex-direction: column; gap: 16px;
}
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg .msg-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.msg.user .msg-avatar {
  background: linear-gradient(135deg, var(--coral), var(--sun));
  color: #fff;
}
.msg .msg-body {
  font-size: 13.5px;
  line-height: 1.55;
  flex: 1;
  min-width: 0;
}
.msg.user .msg-body { color: var(--ink); }
.msg.ai .msg-body { color: var(--ink-2); }
.msg-markdown p { margin: 0 0 8px; }
.msg-markdown p:last-child { margin-bottom: 0; }
.msg-markdown h2, .msg-markdown h3, .msg-markdown h4 { margin: 12px 0 6px; font-size: 14px; color: var(--ink); }
.msg-markdown h2 { font-size: 16px; }
.msg-markdown h3 { font-size: 15px; }
.msg-markdown ul, .msg-markdown ol { margin: 6px 0; padding-left: 20px; }
.msg-markdown li { margin: 3px 0; }
.msg-markdown strong { color: var(--ink); font-weight: 600; }
.msg-markdown em { font-style: italic; }
.chat-inline-code {
  background: var(--bg-2); padding: 1px 5px; border-radius: 4px;
  font-family: var(--f-mono); font-size: 12.5px; color: var(--ink);
}
.chat-code-block {
  background: var(--bg-2); border-radius: 8px; padding: 12px 14px;
  margin: 8px 0; overflow-x: auto; font-size: 12.5px; line-height: 1.5;
  font-family: var(--f-mono); color: var(--ink);
}
.chat-code-block code { background: none; padding: 0; }
.chat-files-badge {
  display: inline-block; margin-top: 8px; padding: 4px 10px;
  background: var(--bg-2); border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
}
.msg .msg-time {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

.msg-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
}
.msg-card-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--mint);
  color: #fff;
  display: grid; place-items: center;
}

/* chip suggestions inside chat */
.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 18px 14px;
}
.chat-suggestion {
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
  cursor: pointer;
}
.chat-suggestion:hover { border-color: var(--ink); color: var(--ink); background: var(--bg-2); }

.chat-input {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--surface);
}
.chat-input-box {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--bg-2);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.chat-input-box:focus-within {
  border-color: var(--coral);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(255,92,77,.08);
}
.chat-input-box textarea {
  width: 100%;
  border: 0; outline: 0;
  background: transparent;
  resize: none;
  min-height: 40px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.chat-input-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
}
.chat-input-actions { display: flex; gap: 2px; }
.mini-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 7px;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.mini-icon:hover { background: var(--bg-2); color: var(--ink); }
.chat-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
.chat-send:hover { background: var(--coral-deep); transform: scale(1.05); }
.chat-send:disabled { background: var(--line); color: var(--ink-3); cursor: not-allowed; transform: none; }

.editor-preview {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.preview-url {
  flex: 1;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-2);
  max-width: 380px;
}
.preview-url .lock { color: var(--mint); }
.preview-vp { display: flex; gap: 2px; align-items: center; background: var(--bg-2); border-radius: 8px; padding: 3px; }
.preview-vp button {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink-3);
  display: grid; place-items: center;
}
.preview-vp button.active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); }

.preview-canvas {
  flex: 1;
  background:
    linear-gradient(var(--bg) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--bg) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  display: grid; place-items: center;
  overflow: auto;
  padding: 28px;
  position: relative;
}
.preview-canvas::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 50%, var(--bg) 100%);
  pointer-events: none;
}
.preview-frame {
  width: 100%;
  max-width: 1100px;
  height: 100%;
  max-height: 760px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 36px 90px -32px rgba(26,26,31,.32), 0 8px 24px -10px rgba(26,26,31,.18);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* highlighted change overlay */
.preview-highlight {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid var(--coral);
  pointer-events: none;
  opacity: 0;
  animation: hl 1.6s ease-out;
  z-index: 2;
}
@keyframes hl {
  0% { opacity: 0; transform: scale(1.01); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* ============= SETTINGS / TABS ============= */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.tab {
  font-size: 15px; font-weight: 500;
  padding: 14px 4px;
  margin-right: 28px;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px;
  max-width: 980px;
}
.setting-row {
  display: contents;
}
.setting-label h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.setting-label p { font-size: 13px; color: var(--ink-2); margin: 0; }
.setting-control { display: flex; flex-direction: column; gap: 10px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.card-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.card-row + .card-row { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 14px; }

input.field, select.field {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s;
}
select.field {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%238A8590' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}
input.field:focus, select.field:focus { border-color: var(--ink); }

/* ============= TEAM ============= */
.team-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.team-row:last-child { border-bottom: 0; }
.team-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--mint));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.team-info { flex: 1; min-width: 0; }
.team-name { font-weight: 600; font-size: 14px; }
.team-email { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; font-family: var(--f-mono); }
.role-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.role-tag.role-owner { background: var(--coral-tint); color: var(--coral-deep); }
.role-tag.role-editor { background: var(--sky-tint); color: var(--sky); }
.role-tag.role-viewer { background: var(--bg-2); color: var(--ink-2); }

/* ============= BILLING ============= */
.plan-tile {
  display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(135deg, var(--ink) 0%, #2A2435 100%);
  color: #fff;
  padding: 24px 28px;
  border-radius: 16px;
  gap: 16px;
}
.plan-tile-name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sun);
  margin-bottom: 6px;
}
.plan-tile-amt {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.plan-tile-amt small { font-size: 14px; font-weight: 500; opacity: .7; }
.plan-tile-meta { font-size: 12.5px; opacity: .7; margin-top: 4px; }

.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.usage-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.usage-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.usage-value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.015em;
}
.usage-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.usage-bar > div {
  height: 100%;
  background: var(--coral);
  border-radius: 2px;
}

/* ============= ANALYTICS ============= */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1000px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
.kpi-label {
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.kpi-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-top: 6px;
}
.kpi-delta {
  margin-top: 6px;
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi-delta.up { color: var(--mint); }
.kpi-delta.down { color: var(--coral); }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 20px;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.chart-head h3 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.chart-svg { width: 100%; height: 220px; display: block; }

.split-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@media (max-width: 1000px) { .split-grid { grid-template-columns: 1fr; } }

.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.list-row:last-child { border-bottom: 0; }
.list-row .label { flex: 1; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .count { color: var(--ink-3); font-family: var(--f-mono); font-size: 12px; }
.list-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
  max-width: 140px;
}
.list-bar > div {
  height: 100%;
  background: var(--ink);
  border-radius: 3px;
}

/* ============= ACTIVITY / FEED ============= */
.activity { display: flex; flex-direction: column; gap: 4px; }
.activity-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.activity-item:last-child { border-bottom: 0; }
.activity-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}
.activity-dot.publish { background: var(--mint-tint); color: var(--mint); }
.activity-dot.edit { background: var(--sky-tint); color: var(--sky); }
.activity-dot.create { background: var(--sun-tint); color: var(--sun-deep, var(--ink)); }
.activity-dot.invite { background: var(--pink-tint); color: var(--pink); }
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 13.5px; color: var(--ink); }
.activity-text strong { font-weight: 600; }
.activity-time { font-size: 11.5px; color: var(--ink-3); font-family: var(--f-mono); margin-top: 2px; }

/* ============= TEMPLATES ============= */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .15s;
  cursor: pointer;
}
.tpl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--ink-3); }
.tpl-card .thumb { aspect-ratio: 4/3; position: relative; }
.tpl-card .thumb-cat {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.15);
}
.tpl-card .body { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tpl-card .body h4 { font-size: 14.5px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.tpl-card .body p { font-size: 12.5px; color: var(--ink-3); margin: 2px 0 0; }

/* ============= TOGGLE ============= */
.toggle {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .2s;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle.on { background: var(--mint); }
.toggle.on::after { transform: translateX(16px); }

/* ============= COMMAND PALETTE ============= */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(15,15,20,.45);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: start center;
  padding-top: 12vh;
  animation: fadeIn .15s ease-out;
}
.cmd-palette {
  width: 580px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
  animation: zoomIn .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

.cmd-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
}
.cmd-input input {
  flex: 1; border: 0; outline: 0;
  font-size: 15px; color: var(--ink);
  background: transparent;
}
.cmd-input input::placeholder { color: var(--ink-3); }

.cmd-list {
  max-height: 340px; overflow-y: auto;
  padding: 8px;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.cmd-item.active { background: var(--bg-2); color: var(--ink); }
.cmd-item-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-2);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.cmd-item.active .cmd-item-ic { background: var(--ink); color: var(--sun); }

.cmd-footer {
  display: flex; gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-3);
}
.cmd-footer kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  margin-right: 3px;
  color: var(--ink-2);
}

/* ============= NOTIFICATIONS DROPDOWN ============= */
.notif-dd {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-lg);
  z-index: 70;
  overflow: hidden;
  animation: zoomIn .18s cubic-bezier(.2,.8,.2,1);
}
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.notif-head strong { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.notif-list { max-height: 380px; overflow-y: auto; padding: 4px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.notif-item:hover { background: var(--bg-2); }
.notif-item.unread { background: rgba(255,92,77,.04); }
.notif-unread-dot {
  position: absolute;
  top: 16px; right: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
}
.empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-3);
}
.empty-icon {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: var(--bg-2);
  display: grid; place-items: center;
  margin: 0 auto 20px;
}
.empty h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.empty p { font-size: 14px; margin: 0 auto; max-width: 36ch; }

.divider { height: 1px; background: var(--line-2); margin: 20px 0; }

/* ============= LAUNCH page ============= */
.launch-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}
@media (max-width: 1000px) { .launch-hero { grid-template-columns: 1fr; } }
.score-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.score-label {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.score-detail {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 10px;
}

.countdown-card {
  background: linear-gradient(135deg, var(--coral) 0%, #FF8466 100%);
  color: #fff;
  border-radius: 22px;
  padding: 24px 28px;
}
.countdown-card .kicker { color: rgba(255,255,255,.7); }
.countdown-num {
  font-weight: 700; font-size: 72px;
  letter-spacing: -0.04em;
  line-height: .9;
  margin: 8px 0 4px;
}
.countdown-num small { font-size: 22px; font-weight: 500; margin-left: 4px; opacity: .75; }
.countdown-card .field { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); color: #fff; }
.countdown-card .field::-webkit-calendar-picker-indicator { filter: invert(1); }
.countdown-streak { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.streak-row { display: flex; gap: 5px; margin-top: 6px; }
.streak-dot { width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
.streak-dot.on { background: var(--sun); }

.launch-mode {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 22px;
  margin-bottom: 24px;
}
.mode-toggle {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 3px;
}
.mode-toggle button {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .2s, color .2s;
}
.mode-toggle button.active { background: var(--ink); color: var(--bg); }

.launch-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}
@media (max-width: 1100px) { .launch-grid { grid-template-columns: 1fr; } }

.check-group-head {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  padding: 14px 22px 8px;
  border-top: 1px solid var(--line-2);
}
.check-group-head:first-of-type { border-top: 0; }

.check-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px;
  border-top: 1px solid var(--line-2);
}
.check-status {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.check-status.pass    { background: var(--mint-tint); color: var(--mint); }
.check-status.warn    { background: var(--sun-tint); color: #9a7000; }
.check-status.fail    { background: var(--coral-tint); color: var(--coral-deep); }
.check-status.pending { background: var(--bg-2); color: var(--ink-3); }
.check-name { font-weight: 500; font-size: 13.5px; }
.check-hint { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-family: var(--f-mono); }

.copilot-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
}
.copilot-row:first-of-type { border-top: 0; }

.presskit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.presskit-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.presskit-tile:hover { border-color: var(--ink); background: var(--bg-2); }

/* ============= MARKETING HUB ============= */
.mkt-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sun-tint);
  color: #9a7000;
  display: inline-block;
}
.credits-pill {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 16px 10px 12px;
}
.credits-ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--sun);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
}
.credits-label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.credits-num { font-weight: 700; font-size: 17px; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 6px; }
.credits-buy { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--coral); cursor: pointer; font-weight: 600; }

.mkt-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 24px;
  width: fit-content;
}
.mkt-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.mkt-tab:hover { color: var(--ink); }
.mkt-tab.active { background: var(--ink); color: var(--bg); }
.mkt-tab-ic {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
}

/* Marketing overview cards */
.mkt-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .mkt-overview { grid-template-columns: repeat(2, 1fr); } }
.mkt-ov-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  display: flex; flex-direction: column;
}
.mkt-ov-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 10px;
}
.mkt-ov-num {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.mkt-ov-delta {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--mint);
  font-weight: 700;
  margin-left: 6px;
}
.mkt-ov-sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.mkt-ov-sub-inline { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.mkt-spark { width: 100%; height: 50px; margin-top: auto; }
.mkt-bars { display: flex; align-items: flex-end; gap: 5px; height: 50px; margin-top: auto; }
.mkt-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--coral), var(--sun));
  border-radius: 3px 3px 0 0;
}
.mkt-pill-row { display: flex; margin-top: auto; }
.mkt-mini-pill {
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  font-size: 9.5px;
  font-weight: 700;
  border: 2px solid var(--surface);
  margin-left: -6px;
}
.mkt-mini-pill:first-child { margin-left: 0; }

/* Tribe finder hero */
.mkt-hero {
  background: linear-gradient(135deg, #0F2A1F 0%, #1A3A2A 60%, #0F2A1F 100%);
  color: #fff;
  border-radius: 22px;
  padding: 36px 40px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.mkt-hero::before {
  content: "";
  position: absolute;
  right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,197,61,.15), transparent 70%);
}
.mkt-hero-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--sun);
  font-weight: 600;
  margin-bottom: 12px;
}
.mkt-hero-h {
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.mkt-hero-sub {
  font-size: 14.5px;
  color: rgba(255,255,255,.7);
  max-width: 56ch;
  margin: 0 0 22px;
  line-height: 1.55;
}
.mkt-hero-match {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
}
.mkt-match-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,.5); }
.mkt-match-edit { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--sun); cursor: pointer; }

.mkt-steps {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 22px;
  margin-bottom: 24px;
}
.mkt-step { display: flex; align-items: center; gap: 12px; flex: 1; }
.mkt-step-n {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sun-tint);
  color: #9a7000;
  font-weight: 700;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 12.5px;
}
.mkt-step-title { font-weight: 600; font-size: 13.5px; }
.mkt-step-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.mkt-step-arrow { color: var(--ink-3); font-size: 16px; }

.mkt-filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mkt-refresh { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--mint); font-weight: 600; }

.tribe-list { display: flex; flex-direction: column; gap: 10px; }
.tribe-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  transition: border-color .15s;
}
.tribe-card.open { border-color: var(--ink-3); }
.tribe-head { display: flex; gap: 14px; align-items: flex-start; }
.tribe-letter {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
  flex-shrink: 0; color: #fff;
}
.tribe-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tribe-platform { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 600; }
.tribe-fit { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.tribe-stat { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-2); }
.tribe-dot { color: var(--ink-3); }
.tribe-name { font-weight: 700; font-size: 16px; letter-spacing: -0.012em; margin-top: 4px; }
.tribe-cultural { background: var(--sun-tint); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #6a4d00; margin-top: 12px; line-height: 1.5; }
.tribe-cultural strong { color: #4a3500; }
.tribe-draft { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
.tribe-draft-head { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 12px; }
.tribe-draft-regen { color: var(--coral); cursor: pointer; font-weight: 600; }
.tribe-draft p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.tribe-draft p:last-child { margin-bottom: 0; }

/* Ads Studio */
.ads-summary { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 22px; margin-bottom: 16px; flex-wrap: wrap; }
.ads-stat { display: flex; align-items: baseline; gap: 8px; }
.ads-stat-num { font-weight: 700; font-size: 18px; letter-spacing: -0.015em; }
.ads-stat-label { font-size: 13px; color: var(--ink-2); }
.ads-stat-dot { color: var(--ink-3); }
.ads-table-head, .ads-row { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1.2fr 40px; gap: 16px; padding: 14px 22px; }
.ads-table-head { border-bottom: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); font-weight: 600; }
.ads-row { align-items: center; border-bottom: 1px solid var(--line-2); transition: background .15s; }
.ads-row:hover { background: var(--bg-2); }
.ads-row:last-child { border-bottom: 0; }
.ads-camp { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ads-letter { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.ads-camp-name { font-weight: 600; font-size: 14px; }
.ads-camp-status { font-size: 11.5px; margin-top: 4px; font-family: var(--f-mono); letter-spacing: 0.06em; }
.ads-status-tag { padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.ads-goal { color: var(--ink-3); margin-left: 6px; }
.ads-platforms { display: flex; gap: 4px; }
.ads-plat { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.ads-dates { font-weight: 600; font-size: 13.5px; }
.ads-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ads-spent { font-size: 14px; }
.ads-spent strong { font-weight: 700; }
.ads-budget { color: var(--ink-3); }
.ads-results { font-size: 13px; }
.ads-bars { display: flex; align-items: flex-end; gap: 2px; margin-top: 4px; height: 18px; }
.ads-bar { width: 4px; border-radius: 1px; }

/* Content Studio */
.content-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.content-cta {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: var(--sun-tint); border: 1.5px dashed var(--sun);
  border-radius: 14px; padding: 16px; width: 100%; margin-bottom: 20px;
  font-size: 14.5px; font-weight: 600; color: #6a4d00; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.content-cta:hover { background: rgba(255,197,61,.22); }
.content-cta-ic { width: 24px; height: 24px; border-radius: 6px; background: var(--sun); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; }
.content-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1200px) { .content-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .content-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .content-grid { grid-template-columns: repeat(2, 1fr); } }
.content-card { border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform .2s; }
.content-card:hover { transform: translateY(-3px); }
.content-thumb { aspect-ratio: 3/4; position: relative; display: flex; align-items: flex-end; padding: 14px; color: #fff; overflow: hidden; }
.content-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55) 100%); pointer-events: none; }
.content-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); }
.content-tag.image { color: var(--sun); }
.content-tag.video { color: #FF8466; }
.content-menu { position: absolute; top: 8px; right: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; }
.content-icon { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 56px; opacity: .85; z-index: 1; }
.content-duration { position: absolute; bottom: 14px; right: 14px; font-family: var(--f-mono); font-size: 11px; background: rgba(0,0,0,.6); padding: 3px 7px; border-radius: 4px; z-index: 2; color: #fff; }
.content-overlay { position: relative; z-index: 2; width: 100%; }
.content-title { font-weight: 700; font-size: 14px; letter-spacing: -0.012em; line-height: 1.25; }
.content-sub { font-size: 11.5px; opacity: .85; margin-top: 3px; }

/* small responsive */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .editor { grid-template-columns: 1fr; }
  .editor-chat { height: 50vh; }
  .settings-grid { grid-template-columns: 1fr; }
  .topbar-search input { width: 160px; }
  .home-stats { grid-template-columns: 1fr; }
}

/* ============= PRD PLAN page ============= */
.stepper {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 16px;
  padding: 8px;
  position: relative;
}
.step-pill {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
  min-width: 0;
}
.step-pill:hover { background: var(--bg-2); }
.step-pill.active { background: var(--bg-2); }
.step-pill.done .step-num { background: var(--mint); color: #fff; }
.step-pill.active .step-num { background: var(--ink); color: var(--sun); }
.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.step-label { font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.step-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.step-bar {
  position: absolute;
  right: -1px; top: 50%;
  height: 1px; width: 1px;
  background: var(--line);
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
}
@media (max-width: 1100px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-main { min-width: 0; }
.plan-side { display: flex; flex-direction: column; gap: 12px; }
.plan-nav {
  display: flex; align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.card-lg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px;
}
.step-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
}
.step-head h2 { font-weight: 700; font-size: 22px; margin: 0 0 6px; letter-spacing: -0.018em; }
.step-head p { color: var(--ink-2); margin: 0; font-size: 14px; max-width: 56ch; }

.kicker {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 6px;
}

.avatar-preview { display: flex; flex-direction: column; align-items: center; }
.avatar-circle {
  width: 88px; height: 88px;
  border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 30px;
  letter-spacing: -0.02em;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.25);
  border: 4px solid var(--surface);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group.full { grid-column: 1 / -1; }
.field-group label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.palette-row { display: flex; gap: 8px; }
.palette-swatch {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  transition: transform .15s, border-color .15s;
}
.palette-swatch:hover { transform: translateY(-2px); }
.palette-swatch.active { border-color: var(--ink); transform: translateY(-2px); }

.pill-stat {
  font-weight: 700; font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--coral);
}
.pill-stat span { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }

.pain-list { display: flex; flex-direction: column; gap: 8px; }
.pain-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.pain-row.add { padding-top: 16px; border-top: 1px dashed var(--line); margin-top: 8px; }
.pain-grip {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink-3);
  cursor: grab;
}
.pain-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.pain-input { flex: 1; }
.seg-sev { padding: 2px; }
.seg-sev button { font-size: 11px; padding: 5px 10px; font-weight: 600; }

.generating-banner {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--coral-tint);
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--coral-deep);
  font-weight: 500;
}

.reqs-section { margin-top: 24px; }
.reqs-section-h {
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.reqs-section-h .muted { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.req-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.req-row:hover { border-color: var(--ink-3); background: var(--bg-2); }
.req-name { font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.req-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.prio-pill {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 600;
  flex-shrink: 0;
}
.prio-pill.must { background: var(--coral-tint); color: var(--coral-deep); }
.prio-pill.nice { background: var(--sky-tint); color: var(--sky); }

.reqs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 800px) { .reqs-grid { grid-template-columns: 1fr; } }
.bullet {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.bullet-x { color: var(--coral); font-weight: 700; flex-shrink: 0; }
.bullet-c { color: var(--mint); font-weight: 700; flex-shrink: 0; }

.handoff { text-align: center; padding: 56px 40px; }
.handoff-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
  text-align: left;
}
@media (max-width: 700px) { .handoff-summary { grid-template-columns: 1fr; } }
.handoff-summary > div {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 16px 18px;
}
.handoff-line { font-weight: 600; font-size: 14px; margin-top: 4px; }

/* plan sidebar */
.side-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-2);
}
.side-row:first-of-type { border-top: 0; padding-top: 0; }
.side-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.side-label { font-size: 11.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; font-family: var(--f-mono); }
.side-value { font-weight: 600; font-size: 13.5px; margin-top: 2px; }
.side-check { color: var(--ink-3); font-weight: 700; }
.side-check.done { color: var(--mint); }

.card.tip {
  background: linear-gradient(135deg, var(--sun-tint), var(--coral-tint));
  border-color: var(--line);
}

/* ============= AGENT (Testing + Security) ============= */
.agent-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  background: linear-gradient(95deg, var(--sun-tint) 0%, var(--coral-tint) 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.agent-bot { flex-shrink: 0; }
.ai-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--sun);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.agent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.agent-row:hover { background: var(--bg-2); }
.agent-row.active { background: var(--ink); color: var(--bg); }
.agent-row.active .app-emoji { background: rgba(255,255,255,.12); }
.agent-health {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mint-tint);
  color: var(--mint);
  flex-shrink: 0;
}
.agent-row.active .agent-health { background: rgba(31,178,149,.25); color: #c2f1e4; }
.agent-health[data-h="86"], .agent-health[data-h="90"] { background: var(--sun-tint); color: #9a7000; }
.agent-row.active .agent-health[data-h="86"], .agent-row.active .agent-health[data-h="90"] { background: rgba(255,197,61,.25); color: #ffd97a; }

.agent-detail-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-2);
}

.test-list { padding: 6px; }
.test-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  border-radius: 12px;
  transition: background .15s;
}
.test-row.active { background: var(--coral-tint); }
.test-status {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
}
.test-status.pass    { background: var(--mint-tint); color: var(--mint); }
.test-status.fail    { background: var(--coral-tint); color: var(--coral-deep); }
.test-status.pending { background: var(--bg-2); color: var(--ink-3); }
.test-error {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  border-radius: 10px;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.test-error strong { font-weight: 700; margin-right: 4px; }

.agent-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .agent-cards { grid-template-columns: 1fr; } }
.agent-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.agent-card-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ============= TESTING — extras ============= */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--coral);
  margin-left: 6px;
  box-shadow: 0 0 0 4px rgba(255,92,77,.18);
  animation: pulse 2s ease-in-out infinite;
}

/* Scenarios */
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 1000px) { .scenario-grid { grid-template-columns: 1fr; } }
.scenario-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .15s;
}
.scenario-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: var(--ink-3); }
.scenario-head { display: flex; justify-content: space-between; align-items: center; }
.scenario-tag {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--sky-tint);
  color: var(--sky);
}
.scenario-success {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.scenario-name {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.015em;
  margin: 12px 0 14px;
}
.scenario-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.scenario-steps li {
  counter-increment: step;
  font-size: 13px;
  color: var(--ink-2);
  display: flex; gap: 10px;
  align-items: flex-start;
}
.scenario-steps li::before {
  content: counter(step);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.scenario-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Uptime grid */
.uptime-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.uptime-row {
  display: flex;
  gap: 3px;
  align-items: center;
}
.uptime-day {
  width: 40px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.uptile {
  width: 18px; height: 22px;
  border-radius: 4px;
  background: var(--mint);
  flex-shrink: 0;
  transition: transform .15s;
  cursor: pointer;
}
.uptile.up   { background: var(--mint); }
.uptile.slow { background: var(--sun); }
.uptile.down { background: var(--coral); }
.uptile:hover { transform: scale(1.18); z-index: 2; box-shadow: 0 4px 14px -4px rgba(0,0,0,.3); }

.incident-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}
.incident-row:last-child { border-bottom: 0; }

/* Schedule grid */
.sched-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  overflow-x: auto;
}
.sched-head, .sched-row {
  display: grid;
  grid-template-columns: 200px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}
.sched-head {
  margin-bottom: 6px;
  padding-left: 200px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.sched-head > div { text-align: center; padding-left: 0; }
.sched-head > div:first-child { display: none; }
.sched-row { padding: 4px 0; }
.sched-label {
  display: flex; align-items: center; gap: 10px;
  padding-right: 12px;
}
.sched-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sched-cell {
  height: 22px;
  border-radius: 4px;
  background: var(--bg-2);
  cursor: pointer;
  transition: transform .15s, opacity .15s;
}
.sched-cell:hover { transform: scale(1.12); }
.sched-cell.on { background: var(--ink); }
.sched-cell.on.smoke  { background: var(--coral); }
.sched-cell.on.e2e    { background: var(--sky); }
.sched-cell.on.visual { background: var(--plum); }
.sched-cell.on.ping   { background: var(--mint); opacity: .65; }

/* Alerts routing */
.route-grid {
  display: flex; flex-direction: column; gap: 12px;
}
.route-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.route-chip {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
}

/* Live feed */
.live-feed {
  padding: 6px;
}
.live-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .15s;
}
.live-item:hover { background: var(--bg-2); }
.live-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  flex-shrink: 0;
  text-transform: uppercase;
}
.live-tag.live-tester  { background: var(--coral-tint); color: var(--coral-deep); }
.live-tag.live-watcher { background: var(--sky-tint); color: var(--sky); }
.live-text {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.live-time {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.live-stat {
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: 10px;
}
.live-stat-num {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.live-stat-label {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* ============= PLAN — simpler stepped layout ============= */
.step-mini {
  display: flex;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.step-mini-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.step-mini-pill.active { background: var(--bg-2); color: var(--ink); }
.step-mini-pill.done { color: var(--ink-2); }
.step-mini-pill.done .step-mini-num { background: var(--mint); color: #fff; }
.step-mini-pill.active .step-mini-num { background: var(--ink); color: var(--sun); }
.step-mini-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
}

.plan-simple {
  display: block;
  max-width: 880px;
  margin: 0 auto;
}
.plan-simple > .card-lg { max-width: 100%; }

.plan-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .plan-2col { grid-template-columns: 1fr; } }
.plan-chat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.plan-chat-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.plan-chat-head .pill {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--coral-tint);
  color: var(--coral-deep);
  font-weight: 600;
}

.plan-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  min-height: 480px;
}
.plan-preview-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.plan-preview-body { padding: 18px 20px 20px; }
.prd-section { margin-top: 18px; }
.prd-section:first-of-type { margin-top: 14px; }
.prd-section-h {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-family: var(--f-mono);
}
.prd-section-h .muted { color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.prd-empty { font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.prd-avatar { display: flex; align-items: center; gap: 12px; }
.avatar-circle-sm {
  width: 40px; height: 40px;
  border-radius: 50%;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.prd-pain {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
}
.prd-pain-rank {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sev {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sev-1 { background: var(--mint); }
.sev-2 { background: var(--sun); }
.sev-3 { background: var(--coral); }
.prd-feat {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0;
}

.plan-quickedit { margin-top: 8px; }
.quick-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
}
.sec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.sec-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
}
.sec-tile-head { display: flex; align-items: center; gap: 14px; }
.sec-tile-ic {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
}
.sec-tile-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.sec-tile-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }


/* =========================================================
   EDITOR v2 — top toolbar, tabs, checkpoints, inspector, etc.
   ========================================================= */

/* override: editor now has its own top toolbar instead of relying on app topbar */
.editor.v2 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
}

/* ---------- ed-top toolbar ---------- */
.ed-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  min-height: 60px;
}
.ed-top-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; flex: 1; }
.ed-top-r { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.ed-tabs { flex: 0 0 auto; margin-left: 8px; }

.ed-icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.ed-icon-btn:hover { background: var(--bg-2); color: var(--ink); }
.ed-icon-btn.on { background: var(--ink); color: var(--sun); }

.ed-app-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px 5px 6px;
  border-radius: 12px;
  transition: background .15s;
  min-width: 0;
  overflow: hidden;
}
.ed-app-badge > div { min-width: 0; overflow: hidden; }
.ed-app-badge:hover { background: var(--bg-2); }
.ed-app-name {
  font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
}
.ed-app-name:hover { background: var(--bg-2); }
.ed-app-name-input {
  font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  border: 1px solid var(--coral);
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
  background: var(--surface);
  outline: none;
  width: 100%;
  color: var(--ink);
}
.ed-app-state {
  font-size: 11px; color: var(--ink-3);
  font-family: var(--f-mono);
  letter-spacing: 0.02em;
  margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ed-app-state .dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.ed-app-state .dot-mint { background: var(--mint); box-shadow: 0 0 0 3px rgba(31,178,149,.18); }
.ed-app-state .dot-sun  { background: var(--sun); box-shadow: 0 0 0 3px rgba(255,197,61,.25); }
.ed-link {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--coral);
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ed-history-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--ink-3);
  transition: background .15s, color .15s;
  margin-left: 4px;
}
.ed-history-btn:hover { background: var(--bg-2); color: var(--ink); }
.ed-history-btn.on { background: var(--ink); color: var(--sun); }

/* ============= VERSION HISTORY DRAWER ============= */
.vh-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 24, 0.32);
  backdrop-filter: blur(2px);
  z-index: 90;
  animation: vh-fade .18s ease-out;
}
@keyframes vh-fade { from { opacity: 0; } to { opacity: 1; } }
.vh-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 440px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 60px rgba(20,16,24,.18);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: vh-slide .26s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes vh-slide {
  from { transform: translateX(36px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.vh-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line-2);
}
.vh-kicker {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.vh-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.vh-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line-2);
}
.vh-summary-stat {
  padding: 14px 12px;
  text-align: center;
  border-right: 1px solid var(--line-2);
}
.vh-summary-stat:last-child { border-right: 0; }
.vh-summary-num {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.vh-summary-label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

.vh-tip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 18px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.vh-tip svg { flex-shrink: 0; margin-top: 1px; color: var(--ink-3); width: 16px; height: 16px; }

.vh-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px 14px;
  position: relative;
}
.vh-list::before {
  content: "";
  position: absolute;
  left: 28px; top: 8px; bottom: 8px;
  width: 1.5px;
  background: var(--line-2);
}
.vh-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
}
.vh-item-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--ink-3);
  flex-shrink: 0;
  margin-top: 4px;
  margin-left: 4px;
  z-index: 1;
}
.vh-item.viewing .vh-item-dot { background: var(--sun); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,197,61,.22); }
.vh-dot-latest { background: var(--mint) !important; border-color: var(--ink) !important; box-shadow: 0 0 0 4px rgba(31,178,149,.18); }

.vh-item-body {
  flex: 1;
  min-width: 0;
  padding: 8px 12px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s, transform .15s, background .15s;
}
.vh-item:hover .vh-item-body { border-color: var(--ink-3); transform: translateX(2px); }
.vh-item.viewing .vh-item-body {
  border-color: var(--sun);
  background: linear-gradient(180deg, rgba(255,197,61,.06), var(--surface) 60%);
  border-width: 1.5px;
}
.vh-item.latest .vh-item-body { border-color: var(--mint); background: linear-gradient(180deg, rgba(31,178,149,.06), var(--surface) 60%); }
.vh-item.latest { cursor: default; }
.vh-item.latest .vh-item-body { transform: none; }
.vh-item.latest:hover .vh-item-body { border-color: var(--mint); transform: none; }

.vh-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.vh-item-v {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.vh-item-pill {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.vh-pill-current { background: var(--mint); color: var(--surface); }
.vh-pill-prev    { background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line); }
.vh-item-time {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.vh-item-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.4;
}
.vh-item-summary {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 8px;
}
.vh-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.vh-item-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vh-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.vh-item-diff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
}
.vh-diff-plus  { color: var(--mint); font-weight: 700; }
.vh-diff-minus { color: var(--coral); font-weight: 700; }
.vh-item-files { color: var(--ink-3); }

.vh-item-hover-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
  font-size: 11.5px;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .15s;
}
.vh-item:hover .vh-item-hover-cta { opacity: 1; }
.vh-restore-link {
  border: 0;
  background: transparent;
  color: var(--coral);
  font-weight: 600;
  font-size: 11.5px;
  cursor: pointer;
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
}
.vh-restore-link:hover { text-decoration: underline; text-underline-offset: 2px; }

.vh-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.vh-item-actions .btn { flex: 1; justify-content: center; }

.vh-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-2);
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--bg-2);
}
.vh-foot svg { width: 14px; height: 14px; }

/* Restore modal */
.vh-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20,16,24,.45);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 200;
  padding: 20px;
  animation: vh-fade .18s ease-out;
}
.vh-modal {
  width: 460px;
  max-width: 100%;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--line);
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(20,16,24,.28);
  animation: vh-pop .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes vh-pop {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.vh-modal-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg-2);
  display: grid; place-items: center;
  color: var(--coral);
  margin-bottom: 14px;
}
.vh-modal-ic svg { width: 20px; height: 20px; }
.vh-modal h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.vh-modal p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.vh-modal-diff {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 14px;
}
.vh-modal-diff-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vh-modal-diff-kicker {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.vh-modal-diff-v {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.vh-modal-diff-time {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.vh-modal-diff-arrow {
  font-size: 18px;
  color: var(--ink-3);
  font-weight: 600;
}
.vh-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 18px;
  cursor: pointer;
}
.vh-modal-check input { width: 14px; height: 14px; accent-color: var(--coral); }
.vh-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ============= SETTINGS — full overhaul ============= */
.page-settings { padding-top: 22px; }
.page-settings .page-head { margin-bottom: 20px; }

.settings-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 900px) { .settings-shell { grid-template-columns: 1fr; gap: 18px; } }

.settings-side {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 8px;
  border-right: 1px solid var(--line-2);
}
@media (max-width: 900px) {
  .settings-side { position: static; border-right: 0; border-bottom: 1px solid var(--line-2); padding-bottom: 12px; flex-direction: row; overflow-x: auto; }
}
.settings-side-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  padding: 2px 10px 12px;
  font-weight: 600;
}
.settings-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.settings-side-link:hover { background: var(--bg-2); color: var(--ink); }
.settings-side-link.active { background: var(--ink); color: var(--sun); }
.settings-side-link.active .ssl-ic { color: var(--sun); }
.ssl-ic { width: 18px; height: 18px; display: inline-flex; color: var(--ink-3); }
.settings-side-link.active .ssl-ic { color: var(--sun); }

.settings-page { max-width: 880px; }

.settings-section {
  margin-bottom: 34px;
}
.settings-section-head { margin-bottom: 14px; }
.settings-section-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.settings-section-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 60ch;
}
.settings-section.tone-danger .settings-section-head h3 { color: var(--coral); }

.card.pad { padding: 20px 22px; }
.setting-divider { height: 1px; background: var(--line-2); margin: 18px 0; }
.setting-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}

/* Field helpers */
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.field-with-prefix {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.field-with-prefix:focus-within { border-color: var(--ink); }
.field-prefix {
  display: grid;
  place-items: center;
  padding: 0 12px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-3);
}
.field-with-prefix .field {
  border: 0;
  border-radius: 0;
}
.field-with-action {
  display: flex;
  align-items: center;
  gap: 12px;
}
.field-with-action .field { flex: 1; }
.field-status {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 8px;
}
.field-status.verified { background: var(--mint-tint); color: var(--mint); }

/* Profile hero */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 18px;
}
.profile-photo {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.profile-photo-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--sun));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
}
.profile-photo-edit {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  border: 2px solid var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.profile-photo-edit:hover { background: var(--coral); }

/* Linked accounts */
.linked-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.linked-row:last-child { border-bottom: 0; }
.linked-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-2);
  display: grid; place-items: center;
  color: var(--ink);
}
.linked-name { font-weight: 600; font-size: 14px; }
.linked-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.linked-meta .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; vertical-align: 1px; margin-right: 4px; }
.linked-meta .dot-mint { background: var(--mint); }

/* ============= PLAN ============= */
.plan-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, #1F1A2E 0%, #2A2435 60%, #3a2540 100%);
  color: #fff;
  min-height: 160px;
  display: flex;
  padding: 28px 30px;
}
.plan-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.plan-hero-glow {
  position: absolute;
  top: -120px; right: -80px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,92,77,.36), transparent 70%);
  filter: blur(20px);
}
.plan-hero-content { position: relative; z-index: 1; flex: 1; }
.plan-hero-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
}
.plan-hero-price {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1;
}
.plan-hero-price span {
  font-size: 18px;
  font-weight: 500;
  opacity: .65;
  margin-left: 6px;
  letter-spacing: 0;
}
.plan-hero-meta {
  margin-top: 8px;
  font-size: 13px;
  opacity: .75;
}
.plan-hero-actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}

/* AI balance */
.balance-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}
@media (max-width: 820px) { .balance-grid { grid-template-columns: 1fr; } }
.balance-big {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px 20px;
}
.balance-kicker {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 600;
}
.balance-num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin-top: 4px;
}
.balance-num-of {
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0;
}
.balance-meter {
  position: relative;
  margin-top: 14px;
  height: 10px;
  border-radius: 5px;
  background: var(--bg-2);
  overflow: hidden;
}
.balance-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--sun) 70%, var(--coral));
  border-radius: 5px;
}
.balance-meter-warning {
  position: absolute;
  top: -3px;
  width: 1.5px;
  height: 16px;
  background: var(--ink-3);
  opacity: .4;
}
.balance-meter-warning span {
  position: absolute;
  top: -16px;
  left: -10px;
  font-size: 9px;
  font-family: var(--f-mono);
  color: var(--ink-3);
}
.balance-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 16px;
}
.balance-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  position: relative;
  min-height: 64px;
}
.balance-spark-bar {
  flex: 1;
  background: linear-gradient(to top, var(--coral), var(--sun));
  border-radius: 3px 3px 0 0;
  min-height: 4px;
}
.balance-spark-label {
  position: absolute;
  top: 16px;
  right: 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.balance-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.balance-mini {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.balance-mini-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-2);
  display: grid; place-items: center;
  color: var(--ink-2);
}
.balance-mini-num {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
}
.balance-mini-num small {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  margin-left: 2px;
}
.balance-mini-label {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.balance-topup {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--coral), #e85a45);
  color: #fff;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.balance-topup:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(255,92,77,.28); }

/* Plan comparison cards */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 820px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-card.popular {
  border-color: var(--coral);
  box-shadow: 0 8px 30px rgba(255,92,77,.12);
}
.plan-card.current {
  background: linear-gradient(180deg, rgba(31,178,149,.04), var(--surface) 60%);
  border-color: var(--mint);
}
.plan-card-flag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}
.plan-card-current {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--mint);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.plan-card-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.plan-card-price {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1;
}
.plan-card-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 4px;
  letter-spacing: 0;
}
.plan-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  flex: 1;
}
.plan-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.plan-check {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mint-tint);
  color: var(--mint);
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
}

/* ============= MEMBERS ============= */
.member-list { padding: 4px 0; }
.member-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line-2);
}
.member-row:last-child { border-bottom: 0; }
.member-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.member-avatar.pending { background: var(--bg-2); color: var(--ink-3); border: 1px dashed var(--line-2); }
.member-info { flex: 1; min-width: 140px; }
.member-name { font-weight: 600; font-size: 14px; }
.member-email { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; font-family: var(--f-mono); }
.member-skills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.skill-chip {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}
.member-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 110px;
}
.member-last {
  font-size: 11px;
  font-family: var(--f-mono);
  color: var(--ink-3);
}
.seat-meter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px 4px;
  margin-top: 8px;
  border-top: 1px solid var(--line-2);
}
.seat-meter-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden;
}
.seat-meter-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--sun));
  border-radius: 3px;
}
.invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inline-link {
  font-family: var(--f-mono);
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--ink-2);
}
.knowledge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) { .knowledge-grid { grid-template-columns: 1fr; } }
.knowledge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.knowledge-card:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.knowledge-ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.knowledge-card.tone-coral .knowledge-ic { background: var(--coral-tint); color: var(--coral); }
.knowledge-card.tone-sun   .knowledge-ic { background: var(--sun-tint);   color: #9a7000; }
.knowledge-card.tone-mint  .knowledge-ic { background: var(--mint-tint);  color: var(--mint); }
.knowledge-card.tone-sky   .knowledge-ic { background: var(--sky-tint);   color: var(--sky); }
.knowledge-body { flex: 1; min-width: 0; }
.knowledge-name { font-weight: 600; font-size: 13.5px; }
.knowledge-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.knowledge-type {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-2);
  margin-right: 4px;
}
.knowledge-add {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: transparent;
  border: 1.5px dashed var(--line-2);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink-2);
  text-align: left;
  font-family: var(--f-sans);
}
.knowledge-add:hover { border-color: var(--ink); color: var(--ink); }
.knowledge-add svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============= SECURITY ============= */
.twofa-card { padding: 4px 22px; }
.twofa-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
.twofa-row + .twofa-row { border-top: 1px solid var(--line-2); }
.twofa-ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink-2);
  display: grid; place-items: center;
}
.twofa-title { font-weight: 600; font-size: 14px; }
.twofa-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }

.session-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
}
.session-row:last-child { border-bottom: 0; }
.session-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink-2);
  display: grid; place-items: center;
}
.session-name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.session-current {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--mint);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.session-flagged {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--coral-tint);
  color: var(--coral);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.session-meta {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--f-mono);
}
.session-meta code {
  font-family: var(--f-mono);
  background: var(--bg-2);
  padding: 1px 5px;
  border-radius: 4px;
}

.danger-card {
  background: linear-gradient(180deg, rgba(255,92,77,.04), var(--surface) 60%);
  border: 1px solid var(--coral-tint);
  border-radius: 14px;
  padding: 18px 20px;
}
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.danger-title { font-weight: 700; font-size: 14px; color: var(--coral); }
.danger-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; max-width: 56ch; }
.danger-btn { color: var(--coral) !important; border-color: var(--coral-tint) !important; }
.danger-btn:hover { background: var(--coral) !important; color: #fff !important; border-color: var(--coral) !important; }


/* ---------- ed-tabs ---------- */
.ed-tabs {
  display: flex;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.ed-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .15s, color .15s, box-shadow .15s;
}
.ed-tab svg { opacity: .7; }
.ed-tab:hover { color: var(--ink); }
.ed-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}
.ed-tab.active svg { opacity: 1; }

/* ---------- collab cluster ---------- */
.ed-collab {
  display: flex; align-items: center;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  margin-right: 4px;
}
.ed-collab-av {
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: grid; place-items: center;
  border: 2px solid var(--surface);
}
.ed-collab-label {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-left: 8px;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .ed-collab-label { display: none; }
  .ed-collab { padding-right: 4px; }
}
@media (max-width: 1080px) {
  .ed-collab { display: none; }
}

/* ---------- main grid ---------- */
.ed-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.ed-grid > * { min-height: 0; min-width: 0; }
.ed-grid.chat-collapsed { grid-template-columns: 0 1fr; }

.editor-chat.v2 {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* msg-meta row */
.msg-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
  min-height: 24px;
}
.msg-actions {
  display: flex;
  gap: 1px;
  opacity: 0;
  transition: opacity .15s;
}
.msg:hover .msg-actions { opacity: 1; }
.msg-actions button {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-3);
  transition: background .15s, color .15s;
}
.msg-actions button:hover { background: var(--bg-2); color: var(--ink); }

/* ---------- checkpoint row ---------- */
.ck-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--surface) 100%);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  position: relative;
}
.ck-row:hover { border-color: var(--ink-3); transform: translateX(2px); }
.ck-row.active {
  border-style: solid;
  border-color: var(--sun);
  background: var(--sun-tint);
}
.ck-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.06em;
}
.ck-label {
  flex: 1; min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 500;
  font-size: 12.5px;
}
.ck-files {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.ck-restore {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 13px;
  transition: background .15s, color .15s;
}
.ck-restore:hover { background: var(--ink); color: var(--sun); }

/* ---------- insight card ---------- */
.insight-card {
  display: flex; gap: 12px;
  padding: 14px 16px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  position: relative;
  background: linear-gradient(135deg, var(--sky-tint) 0%, rgba(231,240,251,.4) 100%);
}
.insight-card.tone-sun { background: linear-gradient(135deg, var(--sun-tint) 0%, rgba(255,241,203,.4) 100%); }
.insight-card.tone-coral { background: linear-gradient(135deg, var(--coral-tint) 0%, rgba(255,231,225,.4) 100%); }
.insight-card.tone-mint { background: linear-gradient(135deg, var(--mint-tint) 0%, rgba(224,241,236,.4) 100%); }
.insight-ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--sun);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.insight-card.tone-sun .insight-ic { color: var(--sun); }
.insight-title { font-weight: 700; font-size: 13.5px; letter-spacing: -0.005em; }
.insight-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 3px; }
.insight-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 16px;
  line-height: 1;
}
.insight-x:hover { background: rgba(0,0,0,.06); color: var(--ink); }

/* ---------- build strip ---------- */
.build-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-family: var(--f-mono);
  color: var(--ink-2);
}
.build-spin {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--coral);
  animation: ed-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }
.build-phase { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-progress {
  width: 60px; height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.build-progress > span {
  display: block; height: 100%; width: 40%;
  background: var(--coral);
  border-radius: 2px;
  animation: ed-prog 1.6s ease-in-out infinite;
}
@keyframes ed-prog {
  0% { transform: translateX(-100%); width: 25%; }
  50% { width: 65%; }
  100% { transform: translateX(200%); width: 25%; }
}

/* ---------- chat mode selector ---------- */
.chat-mode-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.chat-mode-seg {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 9px;
  padding: 3px;
  gap: 1px;
}
.chat-mode-seg button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  transition: background .15s, color .15s, box-shadow .15s;
}
.chat-mode-seg button svg { opacity: .65; }
.chat-mode-seg button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-xs);
}
.chat-mode-seg button.active svg { opacity: 1; }
.chat-mode-hint {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--f-mono);
  letter-spacing: 0.02em;
}

/* ---------- input bar extras ---------- */
.mini-icon.on { background: var(--ink); color: var(--sun); }
.mini-sep {
  width: 1px; height: 16px;
  background: var(--line);
  margin: 0 4px;
}
.chat-send-row { display: flex; align-items: center; gap: 4px; }
.chat-send-mode {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-2);
  transition: background .15s, color .15s;
}
.chat-send-mode:hover { background: var(--line-2); color: var(--ink); }

/* ---------- preview bar v2 ---------- */
.preview-bar.v2 { gap: 8px; padding: 10px 14px; }
.preview-nav-btns { display: flex; gap: 2px; }
.preview-bar.v2 .mini-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
}

/* ---------- inspect mode ---------- */
.preview-frame.inspecting { cursor: crosshair; }
.preview-frame.inspecting::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,92,77,.04) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(255,92,77,.04) 1px, transparent 1px) 0 0 / 16px 16px;
  pointer-events: none;
  z-index: 3;
  border-radius: 14px;
}
.inspect-box {
  position: absolute;
  border: 1.5px dashed var(--coral);
  background: rgba(255,92,77,.06);
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
  transition: left .12s, top .12s, width .12s, height .12s;
}
.inspect-label {
  position: absolute;
  top: -26px; left: -1px;
  background: var(--coral);
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ---------- pinned-version overlay ---------- */
.preview-pin-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,15,20,.18);
  display: grid; place-items: start center;
  padding-top: 20px;
  z-index: 5;
  pointer-events: none;
  border-radius: 14px;
}
.ppo-card {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 8px 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  pointer-events: auto;
  box-shadow: var(--sh-md);
}
.ppo-card strong { color: var(--sun); font-family: var(--f-mono); margin-left: 2px; }

/* =========================================================
   CODE PANE
   ========================================================= */
.code-pane {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
  background: var(--surface);
}
.code-files {
  border-right: 1px solid var(--line-2);
  background: var(--bg-2);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.code-files-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px 10px;
}
.code-file {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  border-left: 2px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.code-file:hover { background: var(--surface); }
.code-file.active {
  background: var(--surface);
  color: var(--ink);
  border-left-color: var(--coral);
}
.code-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.code-dot.edited { background: var(--sun); }
.code-dot.new { background: var(--mint); }

.code-editor {
  display: flex; flex-direction: column;
  min-height: 0;
}
.code-tabs {
  display: flex; gap: 4px;
  padding: 6px 10px 0;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
}
.code-tab {
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  border-radius: 8px 8px 0 0;
  background: transparent;
  cursor: pointer;
}
.code-tab.active {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-bottom-color: var(--surface);
  margin-bottom: -1px;
  z-index: 1;
}
.code-body {
  flex: 1;
  margin: 0;
  padding: 20px 24px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  overflow: auto;
  white-space: pre;
}
.code-diff-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
  font-family: var(--f-mono);
  font-size: 11.5px;
}
.diff-plus  { color: var(--mint); font-weight: 700; }
.diff-minus { color: var(--coral); font-weight: 700; }

/* =========================================================
   PLAN PANE
   ========================================================= */
.plan-pane {
  flex: 1; overflow: auto;
  background: var(--bg);
  padding: 24px 28px 48px;
}
.plan-pane-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px;
  gap: 16px;
}
.plan-pane-progress {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.ppp-bar {
  width: 140px; height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.ppp-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--sun));
  border-radius: 3px;
}
.plan-tasks { display: flex; flex-direction: column; gap: 6px; }
.plan-task {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s, transform .15s;
}
.plan-task:hover { border-color: var(--ink-3); }
.plan-task-status {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.plan-task.done .plan-task-status { background: var(--mint); color: #fff; }
.plan-task.doing .plan-task-status { background: var(--sun-tint); color: #9a7000; }
.plan-task.todo .plan-task-status { background: var(--bg-2); border: 1.5px dashed var(--line); color: var(--ink-3); }
.plan-task.done .plan-task-text { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line); }
.plan-task-text { flex: 1; font-size: 14px; font-weight: 500; }
.plan-task-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--sun-tint);
  color: #9a7000;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.plan-task-go {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--coral);
  font-weight: 600;
  opacity: 0;
  transition: opacity .15s;
}
.plan-task:hover .plan-task-go { opacity: 1; }

/* =========================================================
   ACTIVITY PANE — event log
   ========================================================= */
.activity-pane {
  flex: 1;
  overflow: auto;
  padding: 18px 24px 48px;
  background: var(--bg);
  font-family: var(--f-mono);
}
.ap-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.ap-row {
  display: grid;
  grid-template-columns: 100px 90px 1fr;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12.5px;
  align-items: center;
}
.ap-row:hover { background: var(--surface); }
.ap-time { color: var(--ink-3); }
.ap-kind {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.ap-kind.k-build  { background: var(--sun-tint);  color: #9a7000; }
.ap-kind.k-diff   { background: var(--sky-tint);  color: #245c93; }
.ap-kind.k-user   { background: var(--pink-tint); color: #a8467c; }
.ap-kind.k-deploy { background: var(--mint-tint); color: #14745f; }
.ap-msg { color: var(--ink); font-size: 13px; }



/* =========================================================
   EDITOR v2 — extras (scrubber, variations, insights, credits)
   ========================================================= */

/* ---------- credits meter chip ---------- */
.ed-credits {
  display: flex; align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.ed-credits svg { color: var(--sun); flex-shrink: 0; }
.ed-credits-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 600;
  line-height: 1;
}
.ed-credits-num {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ed-credits-num span { color: var(--ink-3); font-weight: 500; font-size: 11px; }
.ed-credits-bar {
  width: 32px; height: 4px;
  background: var(--bg-2);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.ed-credits-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--sun));
  border-radius: 2px;
}
@media (max-width: 1200px) { .ed-credits { display: none; } }
/* progressively shed the right cluster at narrow widths so it never overflows into the tabs column */
@media (max-width: 1140px) {
  .ed-top-r .ed-icon-btn[title="Comments"],
  .ed-top-r .ed-icon-btn[title="GitHub"] { display: none; }
}
@media (max-width: 920px) {
  .ed-top-r .btn-outline { display: none; }
}

/* ---------- tab badge ---------- */
.ed-tab-badge {
  margin-left: 4px;
  background: var(--coral);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--f-mono);
}
.ed-tab.active .ed-tab-badge { background: var(--coral); }

/* ---------- variations rail ---------- */
.var-rail {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  padding: 12px 14px 14px;
}
.var-rail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
  gap: 12px;
}
.var-rail-title { font-weight: 700; font-size: 13px; letter-spacing: -0.005em; }
.var-rail-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.var-rail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.var-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 6px 6px 8px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column;
  align-items: stretch;
}
.var-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.var-thumb {
  aspect-ratio: 1.1;
  border-radius: 6px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.var-letter {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.var-tag {
  position: absolute;
  top: 5px; left: 5px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.var-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 6px;
  text-align: center;
}

/* ---------- time-travel scrubber ---------- */
.scrubber {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex; align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 4px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  box-shadow: var(--sh-md);
  min-width: 420px;
  max-width: calc(100% - 64px);
}
.scrub-step {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,.6);
  transition: background .15s, color .15s;
}
.scrub-step:hover { background: rgba(255,255,255,.1); color: #fff; }
.scrub-track {
  flex: 1;
  position: relative;
  height: 24px;
  display: flex; align-items: center;
  min-width: 0;
}
.scrub-line {
  position: absolute;
  left: 6px; right: 6px;
  height: 2px;
  background: rgba(255,255,255,.18);
  border-radius: 1px;
}
.scrub-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 2px solid var(--ink);
  transition: transform .15s, background .15s;
  cursor: pointer;
}
.scrub-dot:hover { background: var(--sun); transform: scale(1.4); z-index: 2; }
.scrub-dot.active {
  background: var(--sun);
  box-shadow: 0 0 0 4px rgba(255,197,61,.25);
  transform: scale(1.3);
  z-index: 3;
}
.scrub-dot.latest { background: var(--mint); }
.scrub-dot.latest.active { background: var(--mint); box-shadow: 0 0 0 4px rgba(31,178,149,.3); }
.scrub-dot-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--line);
  font-family: var(--f-sans);
}
.scrub-dot-tip strong { font-family: var(--f-mono); color: var(--coral); margin-right: 4px; }
.scrub-dot:hover .scrub-dot-tip { opacity: 1; }
.scrub-meta {
  display: flex; align-items: baseline; gap: 6px;
  padding-right: 8px;
  white-space: nowrap;
}
.scrub-meta-v {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--sun);
  font-weight: 700;
}
.scrub-meta-label {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   INSIGHTS PANE
   ========================================================= */
.insights-pane {
  flex: 1; overflow: auto;
  padding: 24px 28px 48px;
  background: var(--bg);
}
.insights-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 22px;
  gap: 16px;
}

.insights-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 1100px) { .insights-scores { grid-template-columns: repeat(2, 1fr); } }
.score-ring {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}
.score-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.score-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }

.insights-issues {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}
.ii-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-2);
  font-weight: 700;
  font-size: 14.5px;
}
.ii-count {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 500;
}
.ii-row {
  display: grid;
  grid-template-columns: 28px 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--line-2);
  transition: background .15s;
}
.ii-row:first-of-type { border-top: 0; }
.ii-row:hover { background: var(--bg-2); }
.ii-sev {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  font-family: var(--f-mono);
}
.ii-row.sev-warn .ii-sev { background: var(--sun-tint); color: #9a7000; }
.ii-row.sev-info .ii-sev { background: var(--sky-tint); color: #245c93; }
.ii-row.sev-pass .ii-sev { background: var(--mint-tint); color: var(--mint); }
.ii-area {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.ii-title { font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
.ii-hint { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.ii-fix {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 600;
  transition: background .15s, transform .15s;
  white-space: nowrap;
}
.ii-fix:hover { transform: translateY(-1px); }
.ii-fix svg { color: var(--sun); }

.insights-cta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--coral-tint), var(--sun-tint));
  border: 1px solid var(--line);
  border-radius: 16px;
}



/* =========================================================
   PLAN page v2 — starter rail, mood, storyboard, effort meter
   ========================================================= */

/* ---------- inspiration starter rail ---------- */
.starter-rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 20px 18px;
  margin-bottom: 18px;
}
.starter-rail-head {
  display: flex; align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.starter-rail-kicker {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink-3);
}
.starter-rail-sub {
  font-size: 12.5px;
  color: var(--ink-3);
}
.starter-rail-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 1100px) { .starter-rail-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .starter-rail-grid { grid-template-columns: repeat(2, 1fr); } }
.starter-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
  text-align: left;
}
.starter-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.starter-card.picked {
  border-color: var(--coral);
  background: var(--coral-tint);
}
.starter-emoji {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.starter-card-body { min-width: 0; flex: 1; }
.starter-title {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.starter-pages {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- feature chip suggestions in chat ---------- */
.feat-suggest {
  margin-top: 4px;
  padding: 12px 0 4px;
  border-top: 1px dashed var(--line);
}
.feat-suggest-head {
  display: flex; align-items: baseline;
  gap: 8px;
  padding: 0 18px 10px;
}
.feat-suggest-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ink-3);
}
.feat-suggest-sub { font-size: 11.5px; color: var(--ink-3); }
.feat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 18px 4px;
}
.feat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
  cursor: pointer;
}
.feat-chip:hover { border-color: var(--ink); color: var(--ink); }
.feat-chip.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.feat-chip-emoji { font-size: 13px; }
.feat-chip-x {
  background: var(--sun);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-left: 2px;
}

/* ---------- mood picker ---------- */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.mood-card {
  text-align: left;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  display: flex; flex-direction: column; gap: 6px;
}
.mood-card:hover { border-color: var(--ink); transform: translateY(-1px); }
.mood-card.on {
  border-color: var(--coral);
  background: var(--coral-tint);
}
.mood-swatch {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.04);
}
.mood-swatch > span { display: block; height: 100%; }
.mood-card-label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.005em;
}
.mood-card-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.3;
}

/* ---------- storyboard ---------- */
.storyboard {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.story-card {
  display: flex; flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}
.story-sketch {
  width: 84px;
  aspect-ratio: 3/4;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 6px;
  display: flex; flex-direction: column;
  gap: 4px;
  transition: border-color .15s, transform .15s;
}
.story-card:hover .story-sketch {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.story-sketch-bar {
  height: 4px;
  background: var(--ink-3);
  border-radius: 2px;
  opacity: 0.35;
  width: 100%;
}
.story-sketch-bar.w70 { width: 70%; }
.story-sketch-bar.w50 { width: 50%; }
.story-sketch-img {
  flex: 1;
  background: var(--ink-3);
  border-radius: 4px;
  opacity: 0.18;
  margin-top: 2px;
}
.story-sketch-btn {
  margin-top: auto;
  height: 14px;
  width: 60%;
  border-radius: 999px;
  background: var(--coral);
  opacity: 0.7;
}
.story-card-label {
  display: flex; align-items: baseline; gap: 5px;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 600;
}
.story-card-n {
  font-family: var(--f-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.story-arrow {
  position: absolute;
  right: -8px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 14px;
  background: var(--surface);
  z-index: 1;
  padding: 0 1px;
}

/* ---------- effort meter ---------- */
.effort-meter {
  display: flex; align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-2);
  border-radius: 12px;
  border: 1px solid var(--line);
}
.effort-size {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  min-width: 60px;
}
.effort-size.tone-mint { border-color: var(--mint); }
.effort-size.tone-sun  { border-color: var(--sun); }
.effort-size.tone-coral{ border-color: var(--coral); }
.effort-size-letter {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.effort-size.tone-mint  .effort-size-letter { color: var(--mint); }
.effort-size.tone-sun   .effort-size-letter { color: #9a7000; }
.effort-size.tone-coral .effort-size-letter { color: var(--coral); }
.effort-size-label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 2px;
  font-weight: 600;
}
.effort-stats {
  display: flex; gap: 18px;
  flex: 1;
}
.effort-stat-label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
}
.effort-stat-val {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2px;
}



/* =========================================================
   PRD PREVIEW — full-page comprehensive brief overlay
   ========================================================= */
.prd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,15,20,.55);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: 24px 24px 80px;
  animation: fadeIn .2s ease-out;
}
.prd-paper {
  width: 100%;
  max-width: 920px;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 50px 120px -32px rgba(0,0,0,.45);
  overflow: hidden;
  animation: zoomIn .25s cubic-bezier(.2,.8,.2,1);
}
.prd-paper-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--bg);
  position: sticky; top: 0;
  z-index: 10;
}
.prd-paper-close {
  font-size: 13px;
  font-weight: 500;
  color: var(--bg);
  padding: 6px 10px;
  border-radius: 8px;
  transition: background .15s;
}
.prd-paper-close:hover { background: rgba(255,255,255,.1); }
.prd-paper-actions { display: flex; gap: 8px; align-items: center; }
.prd-paper-actions .btn-outline { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: var(--bg); }
.prd-paper-actions .btn-outline:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

.prd-doc {
  padding: 48px 56px 64px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-sans);
}
@media (max-width: 700px) { .prd-doc { padding: 28px 22px 40px; } }

/* doc header */
.prd-doc-head {
  text-align: center;
  margin-bottom: 28px;
}
.prd-doc-emoji {
  font-size: 36px;
  margin-bottom: 8px;
}
.prd-doc-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.prd-doc-title {
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.028em;
  margin: 0 0 12px;
  line-height: 1.05;
  text-wrap: balance;
}
.prd-doc-sub {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 auto;
  line-height: 1.55;
}
.prd-doc-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--bg-2);
  border-radius: 12px;
  text-align: left;
}
@media (max-width: 700px) { .prd-doc-meta { grid-template-columns: repeat(2, 1fr); } }
.prd-doc-meta > div { min-width: 0; }
.prd-doc-meta span {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 4px;
}
.prd-doc-meta strong {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.prd-doc-meta .effort-inline {
  white-space: nowrap;
}

.prd-doc-rule {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 8px, transparent 8px 16px);
  opacity: .35;
  margin: 28px 0;
}

/* sections */
.prd-doc-section { margin-bottom: 36px; }
.prd-doc-h2 {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  border-top: 1px solid var(--line-2);
  padding-top: 14px;
  margin: 0 0 14px;
}
.prd-doc-section.tone-coral .prd-doc-h2 { color: var(--coral); }
.prd-doc-body { font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.prd-doc-body p { margin: 0 0 10px; }
.prd-doc-body p:last-child { margin-bottom: 0; }

.prd-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.prd-list li {
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.6;
}
.prd-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: var(--ink-3);
  font-weight: 700;
}
.prd-list-no li::before { content: "✕"; color: var(--coral); font-size: 11px; top: 7px; }
.prd-list-yes li::before { content: "✓"; color: var(--mint); font-size: 13px; top: 5px; font-weight: 700; }

.persona {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.persona-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 4px;
}

/* journey */
.journey-stages {
  display: flex; flex-direction: column;
  gap: 8px;
}
.journey-stage {
  display: flex; gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: 12px;
  border-left: 3px solid var(--coral);
}
.journey-stage-n {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--coral);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}
.journey-stage-text { font-size: 14px; line-height: 1.5; }

/* features doc-style */
.prd-feats { display: flex; flex-direction: column; gap: 12px; }
.prd-doc-feat {
  display: flex; gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.prd-doc-feat-n {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--sun);
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.prd-doc-feat-name {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.012em;
}
.prd-doc-feat-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.5;
}

/* pages grid */
.prd-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.prd-page-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prd-page-n {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
}
.prd-page-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* tech table */
.prd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.prd-table th, .prd-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
}
.prd-table th {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
  text-transform: uppercase;
  background: var(--bg-2);
}
.prd-table td code {
  font-family: var(--f-mono);
  font-size: 12.5px;
  background: var(--bg-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* design */
.prd-design {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 700px) { .prd-design { grid-template-columns: 1fr; } }
.prd-design-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 10px;
}
.prd-design-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.prd-design-swatch {
  display: flex; flex-direction: column; gap: 4px;
}
.prd-design-swatch > div {
  aspect-ratio: 1.2;
  border-radius: 6px;
  border: 1px solid var(--line);
}
.prd-design-swatch code {
  font-family: var(--f-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  text-align: center;
  letter-spacing: 0.04em;
}

/* phases */
.prd-phases { display: flex; flex-direction: column; gap: 10px; }
.prd-phase {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
}
.prd-phase-head {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 10px;
}
.prd-phase-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--sun);
  display: grid; place-items: center;
  font-weight: 700;
  font-family: var(--f-mono);
  font-size: 13px;
}
.prd-phase-name {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.prd-phase-weeks {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 600;
  margin-top: 2px;
}
.prd-phase-items {
  margin: 0; padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--ink-2);
}
.prd-phase-items li {
  padding: 4px 0 4px 20px;
  position: relative;
}
.prd-phase-items li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 10px; height: 10px;
  border: 1.5px solid var(--ink-3);
  border-radius: 3px;
}

.prd-firsttask {
  background: linear-gradient(135deg, var(--coral-tint), var(--sun-tint));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 14.5px;
  line-height: 1.55;
}

.prd-doc-foot {
  text-align: center;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-2);
}
.prd-doc-foot p {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.prd-doc-foot span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

/* ============= PLAN — inline pickers inside chat ============= */
.inline-picker {
  margin: 4px 56px 8px 44px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.inline-picker-kicker {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 10px;
}
.inline-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.inline-picker-head .inline-picker-kicker { margin-bottom: 0; }
.inline-picker-sub {
  font-size: 11.5px;
  color: var(--ink-3);
}
.inline-picker-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.inline-picker-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.inline-picker-actions .inline-picker-hint { margin-top: 0; }

.mood-grid-inline {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .mood-grid-inline { grid-template-columns: repeat(2, 1fr); } }

.page-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 6px 4px 12px;
}
.page-row-n {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  min-width: 22px;
}
.page-row-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 4px;
}
.page-row-x {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.page-row-x:hover { background: var(--bg-2); color: var(--coral); }
.page-add {
  align-self: flex-start;
  margin-top: 2px;
  border: 1px dashed var(--line-2);
  background: transparent;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.page-add:hover { border-color: var(--ink); color: var(--ink); }

.plan-ready-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.plan-ready-bar .effort-meter.compact { flex: 1; padding: 0; background: transparent; border: 0; }

/* ============= PLAN — tighter spacing + kickoff gate ============= */
.page-plan { padding-top: 22px; padding-bottom: 48px; }
.page-plan .page-head { margin-bottom: 18px; }
.page-plan .page-head .sub { font-size: 14px; margin-top: 4px; }
.page-plan .starter-rail { margin-bottom: 14px; padding: 14px 16px; }
.page-plan .step-mini { padding: 6px; margin-bottom: 12px; }

.kickoff {
  max-width: 880px;
  margin: 0 auto 18px;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.kickoff-q {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.kickoff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) { .kickoff-grid { grid-template-columns: 1fr; } }
.kickoff-card {
  text-align: left;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.kickoff-card:hover {
  border-color: var(--ink);
  background: var(--surface);
  transform: translateY(-1px);
}
.kickoff-emoji {
  display: inline-block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 8px;
}
.kickoff-card-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.kickoff-card-sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 10px;
}
.page-plan .chat-log {
  flex: 0 1 auto;
  max-height: calc(100vh - 280px);
  min-height: 120px;
  padding: 16px 18px 8px;
}
.page-plan .card-lg .chat-log { gap: 14px; }

.kickoff-card-cta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--coral);
  text-transform: uppercase;
}



/* ============================================================
   Plan ready bar — simplified (no credits)
   ============================================================ */
.plan-ready-headline {
  display: flex; align-items: center; gap: 12px;
  flex: 1;
  min-width: 0;
}
.plan-ready-tick {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.plan-ready-title {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.plan-ready-sub {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-family: var(--f-mono);
}
.plan-ready-actions {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============================================================
   Invite modal  (scoped under .invite-overlay so the
   ".invite-card" name doesn't collide with the home-strip card)
   ============================================================ */
.invite-overlay { z-index: 100; }
.invite-overlay .invite-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 24px;
  max-width: 720px;
  width: 92vw;
  max-height: 92vh;
  overflow: auto;
  padding: 40px 44px 36px;
  box-shadow: 0 40px 96px -24px rgba(26,26,31,.35);
}
.invite-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.invite-close:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.invite-eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: 12px;
}
.invite-h {
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.invite-h em {
  font-style: italic;
  color: var(--coral-deep);
}
.invite-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 52ch;
}

.invite-share-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 28px;
}
@media (max-width: 640px) {
  .invite-share-grid { grid-template-columns: 1fr; }
  .invite-qr { justify-self: center; }
}

.invite-qr {
  width: 200px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.invite-qr svg {
  width: 100%;
  height: auto;
  display: block;
}
.invite-qr-caption {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.invite-link-col { min-width: 0; }
.invite-field-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.invite-link-row {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 16px;
}
.invite-link-input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: var(--ink);
  padding: 0 12px;
  min-width: 0;
}
.invite-copy-btn { flex-shrink: 0; }

.invite-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (max-width: 640px) {
  .invite-channels { grid-template-columns: 1fr 1fr; }
}
.invite-channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.invite-channel:hover {
  border-color: var(--ink);
  background: #fff;
  transform: translateY(-1px);
}

.invite-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 18px;
}
.invite-stat { text-align: center; }
.invite-stat-num {
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.invite-stat-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

.invite-fineprint {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: 4px;
}


/* ============================================================
   Plan — "Need help?" AI suggestion panel
   ============================================================ */
.need-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--coral-tint, #FFE7E1);
  border: 1px solid transparent;
  color: var(--coral-deep, #E84A3C);
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s, opacity .15s;
}
.need-help-btn:hover {
  background: #FFD9CF;
  transform: translateY(-1px);
}
.need-help-btn.on {
  background: var(--ink, #181818);
  color: var(--sun, #FFC53D);
  border-color: var(--ink, #181818);
}
.need-help-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
  transform: none;
}
.need-help-spark {
  font-size: 13px;
  line-height: 1;
}

.help-panel {
  margin: 0 0 12px;
  background: linear-gradient(135deg, #FFF5E5, #FFE7E1 70%, #FFD9CF);
  border: 1px solid #F2C9BD;
  border-radius: 14px;
  padding: 14px 16px 12px;
  animation: helpFadeIn .25s ease both;
}
@keyframes helpFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-panel-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.help-panel-spark { font-size: 14px; }
.help-panel-title {
  flex: 1;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--coral-deep, #E84A3C);
  font-weight: 600;
}
.help-panel-close {
  width: 22px; height: 22px;
  border: 0; background: transparent;
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.help-panel-close:hover { background: rgba(0,0,0,.06); color: var(--ink); }

.help-panel-thinking {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px;
  color: var(--ink-2);
  font-size: 13.5px;
}
.dots-3 { display: inline-flex; gap: 4px; }
.dots-3 span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral-deep, #E84A3C);
  opacity: .4;
  animation: dot3 1.2s ease-in-out infinite;
}
.dots-3 span:nth-child(2) { animation-delay: .15s; }
.dots-3 span:nth-child(3) { animation-delay: .3s; }
@keyframes dot3 {
  0%, 80%, 100% { opacity: .25; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}

.help-panel-list {
  display: grid;
  gap: 8px;
}
.help-suggestion {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(232,74,60,.18);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  transition: background .15s, border-color .15s, transform .12s;
}
.help-suggestion:hover {
  background: #fff;
  border-color: var(--coral-deep, #E84A3C);
  transform: translateY(-1px);
}
.help-suggestion-text {
  flex: 1;
  white-space: pre-wrap;
}
.help-suggestion-cta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-deep, #E84A3C);
  font-weight: 600;
  white-space: nowrap;
  align-self: flex-end;
  opacity: .65;
  transition: opacity .15s;
}
.help-suggestion:hover .help-suggestion-cta { opacity: 1; }

.help-panel-foot {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}


/* ============================================================
   Sidebar sub-nav (Testing → Tests/Scenarios/Uptime/etc)
   ============================================================ */
.sb-caret {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  width: 14px; height: 14px;
  color: inherit;
  opacity: .6;
  transition: transform .18s ease, opacity .18s;
}
.sb-caret svg { width: 12px; height: 12px; }
.sb-caret.open { transform: rotate(180deg); opacity: 1; }

.sb-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
}
.sb-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.sb-sublink:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.sb-sublink.active {
  background: var(--bg-2);
  color: var(--ink);
  font-weight: 600;
}
.sb-sublink.active .sb-sublink-tick {
  background: var(--coral);
  transform: scale(1);
}
.sb-sublink-tick {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
  transform: scale(.65);
  transition: background .15s, transform .15s;
}
.sb-sublink-icon {
  width: 14px; height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  flex-shrink: 0;
}
.sb-sublink-icon svg { width: 14px; height: 14px; }
.sb-sublink.active .sb-sublink-icon { color: var(--ink); }

.sb-live-dot {
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,92,77,.18);
  animation: sblive 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sblive {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,92,77,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(255,92,77,.06); }
}

/* compact sidebar — hide sub-nav entirely (caret label etc.) */
.sidebar.compact .sb-sub,
.sidebar.compact .sb-caret { display: none; }


/* ============================================================
   INVITE A FRIEND — modal (v2)
   ============================================================ */
.invite2-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(255, 180, 110, .18), transparent 70%),
    radial-gradient(90% 80% at 50% 50%, rgba(26, 15, 34, .55) 0%, rgba(26, 15, 34, .82) 70%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 28px 20px;
  overflow-y: auto;
  animation: invite2FadeIn .22s ease both;
}
@keyframes invite2FadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Designed backdrop (coins, sparkles, rings) ---------- */
.invite2-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  animation: invite2BackdropIn .5s ease both .1s;
}
@keyframes invite2BackdropIn { from { opacity: 0; } to { opacity: 1; } }

.invite2-bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  mix-blend-mode: screen;
}
.invite2-bloom-1 {
  width: 520px; height: 520px;
  left: -120px; top: -120px;
  background: radial-gradient(circle, #9C3597 0%, transparent 65%);
}
.invite2-bloom-2 {
  width: 620px; height: 620px;
  right: -160px; bottom: -160px;
  background: radial-gradient(circle, #FB8855 0%, transparent 65%);
}

.invite2-coin {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #FFF1B8 0%, #FFC53D 38%, #E89B1F 75%, #B26A0A 100%);
  box-shadow:
    inset 0 -3px 6px rgba(120, 60, 0, .35),
    inset 0 3px 4px rgba(255, 245, 200, .55),
    0 12px 26px -10px rgba(255, 140, 60, .55),
    0 0 0 1.5px rgba(255, 225, 130, .35);
  transform: rotate(var(--rot, 0deg));
  display: grid;
  place-items: center;
  animation: invite2CoinFloat 10s ease-in-out infinite;
  will-change: transform;
}
.invite2-coin::before {
  /* etched outer rim */
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1.5px dashed rgba(120, 60, 0, .25);
}
.invite2-coin-face {
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-style: italic;
  font-size: calc(0.42 * 1em);
  font-size: 42%;
  color: #6B3A05;
  text-shadow: 0 1px 0 rgba(255, 240, 190, .55);
  letter-spacing: -0.02em;
  font-weight: 400;
  position: relative;
}
@keyframes invite2CoinFloat {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
  50%      { transform: rotate(calc(var(--rot, 0deg) + 12deg)) translateY(-14px) scale(1.03); }
}

.invite2-sparkle {
  position: absolute;
  color: #FFE08A;
  filter: drop-shadow(0 0 10px rgba(255, 224, 138, .8));
  animation: invite2Twinkle 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes invite2Twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.1) rotate(180deg); }
}

.invite2-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 200, 130, .35);
  animation: invite2RingDrift 14s linear infinite;
}
@keyframes invite2RingDrift {
  0%   { transform: rotate(0deg)   scale(1);    opacity: .35; }
  50%  { transform: rotate(180deg) scale(1.08); opacity: .55; }
  100% { transform: rotate(360deg) scale(1);    opacity: .35; }
}

.invite2 {
  position: relative;
  z-index: 1;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 28px;
  width: min(680px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  box-shadow: 0 48px 120px -32px rgba(20, 12, 28, .5);
  animation: invite2Pop .28s cubic-bezier(.18, .89, .32, 1.15) both;
}
@keyframes invite2Pop {
  from { transform: translateY(16px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);     opacity: 1; }
}

.invite2-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.4);
  color: #1A0F22;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s, transform .15s;
}
.invite2-close:hover {
  background: #fff;
  transform: rotate(90deg) scale(1.04);
}

/* ---------- Hero band ---------- */
.invite2-hero {
  position: relative;
  background: linear-gradient(155deg, #1A0F22 0%, #3A1F5C 32%, #9C3597 65%, #FB8855 110%);
  color: #fff;
  padding: 48px 44px 42px;
  overflow: hidden;
}
.invite2-hero-bloom {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle at center, rgba(255,200,80,.45), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.invite2-hero::after {
  /* subtle starfield dots */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.6) 1px, transparent 1.5px),
    radial-gradient(circle at 28% 65%, rgba(255,255,255,.4) 1px, transparent 1.5px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.5) 1px, transparent 1.5px),
    radial-gradient(circle at 55% 80%, rgba(255,255,255,.35) 1px, transparent 1.5px),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.5) 1px, transparent 1.5px);
  pointer-events: none;
  opacity: .65;
}

.invite2-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.invite2-h {
  position: relative;
  z-index: 1;
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #fff;
}
.invite2-h em {
  font-style: italic;
  color: #FFE08A;
  background: linear-gradient(180deg, #FFE08A 0%, #FFB35C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.invite2-sub {
  position: relative;
  z-index: 1;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
  max-width: 50ch;
  margin: 0;
}
.invite2-sub strong {
  color: #fff;
  font-weight: 600;
}

/* ---------- Body ---------- */
.invite2-body {
  padding: 32px 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Share row: QR + link/channels */
.invite2-share {
  display: grid;
  grid-template-columns: 184px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 620px) {
  .invite2-share { grid-template-columns: 1fr; }
  .invite2-qr-card { justify-self: center; }
}

.invite2-qr-card {
  width: 184px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px -4px rgba(20,12,28,.08);
}
.invite2-qr-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.invite2-qr-caption {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.invite2-share-right { min-width: 0; }

.invite2-field-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.invite2-link-row {
  display: flex;
  align-items: stretch;
  background: var(--bg-2, #F7F2E8);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 5px 5px 5px 14px;
  margin-bottom: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.invite2-link-row:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(24,24,24,.06);
}
.invite2-link-proto {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-3);
}
.invite2-link-input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-family: var(--f-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 0 8px;
  min-width: 0;
  cursor: text;
}
.invite2-copy {
  flex-shrink: 0;
  border: 0;
  background: var(--ink, #181818);
  color: #fff;
  border-radius: 9px;
  padding: 10px 18px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.invite2-copy:hover { transform: translateY(-1px); }
.invite2-copy.copied {
  background: var(--mint, #2EA56F);
}

.invite2-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.invite2-channel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg-2, #F7F2E8);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  transition: background .15s, border-color .15s, transform .12s;
}
.invite2-channel:hover {
  background: #fff;
  border-color: var(--ink);
  transform: translateY(-1px);
}
.invite2-channel .ic { display: inline-flex; align-items: center; color: var(--ink-2); }

/* ---------- Stats ---------- */
.invite2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.invite2-stat {
  background: var(--surface, #fff);
  padding: 18px 16px;
  text-align: center;
}
.invite2-stat.featured {
  background: linear-gradient(180deg, var(--coral-tint, #FFE7E1), #FFF5F1);
}
.invite2-stat .num {
  font-family: var(--f-serif, "Instrument Serif", serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.invite2-stat.featured .num { color: var(--coral-deep, #E84A3C); }
.invite2-stat .lbl {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

/* ---------- Milestone progress ---------- */
.invite2-progress {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 24px;
}
.invite2-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.invite2-progress-label {
  font-size: 13.5px;
  color: var(--ink-2);
}
.invite2-progress-label strong {
  color: var(--ink);
  font-weight: 600;
}
.invite2-progress-reward {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--coral-deep, #E84A3C);
  background: var(--coral-tint, #FFE7E1);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.invite2-progress-track {
  position: relative;
  height: 8px;
  background: var(--bg-2, #F7F2E8);
  border-radius: 999px;
  overflow: visible;
}
.invite2-progress-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #FB8855 0%, #B83E8E 100%);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.18, .89, .32, 1.15);
}
.invite2-progress-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.invite2-progress-pin .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-3);
  transition: border-color .2s, background .2s, transform .2s;
}
.invite2-progress-pin.hit .dot {
  border-color: var(--coral, #FB8855);
  background: var(--coral, #FB8855);
  transform: scale(1.1);
}
.invite2-progress-pin .tip {
  position: absolute;
  top: 20px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-3);
}

/* ---------- Friends list ---------- */
.invite2-friends-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.invite2-friends-link {
  font-family: var(--f-sans);
  font-size: 12.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--coral-deep, #E84A3C);
  font-weight: 500;
  cursor: pointer;
}
.invite2-friends-link:hover { color: var(--coral, #FB8855); }
.invite2-friends-list {
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.invite2-friend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2, #ECE6D8);
}
.invite2-friend:last-child { border-bottom: 0; }
.invite2-friend-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.invite2-friend-av.tint-rose { background: linear-gradient(135deg, #FF9AAE, #FF5C77); }
.invite2-friend-av.tint-warm { background: linear-gradient(135deg, #FFC76B, #FB8855); }
.invite2-friend-av.tint-plum { background: linear-gradient(135deg, #C58CE8, #6A2EB8); }
.invite2-friend .meta { flex: 1; min-width: 0; }
.invite2-friend .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.invite2-friend .when {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.invite2-friend .earned {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--mint, #2EA56F);
  background: rgba(46, 165, 111, .1);
  padding: 4px 10px;
  border-radius: 999px;
}

.invite2-foot {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.5;
}
.invite2-foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.invite2-foot a:hover { color: var(--ink); }


/* ============================================================
   Dashboard — display treatment with the serif, weight floor on sans
   ============================================================ */
.page-head h1 {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.page-head h1 em { font-style: italic; color: var(--coral-deep); }

.kickoff-q,
.vh-summary-num,
.credits-num {
  font-weight: 700;
}
.sb-link,
.sb-sublink,
.sb-section,
.tab,
.btn,
button.btn,
.chip,
.badge,
.eyebrow,
.field-label,
.auth-field-label,
.invite2-field-label,
.invite2-channel,
.invite2-copy,
.invite-channel,
.need-help-btn,
.plan-ready-title,
.help-panel-title,
.invite2-friend .name,
.invite2-stat .lbl,
.share-eyebrow,
.invite2-eyebrow,
.invite-eyebrow,
.invite2-friends-head,
.help-suggestion-cta {
  font-weight: 700;
}
.invite2-h em,
.invite-h em {
  font-weight: 500;
}
input, textarea, select {
  font-weight: 500;
}
::placeholder { font-weight: 400; }


/* ============================================================
   HOME — Shared-with-me pill on app cards
   ============================================================ */
.app-shared-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: rgba(20, 12, 28, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}
.app-shared-av {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
.app-shared-av.tint-warm { background: linear-gradient(135deg, #FFC76B, #FB8855); }
.app-shared-av.tint-plum { background: linear-gradient(135deg, #C58CE8, #6A2EB8); }
.app-shared-av.tint-rose { background: linear-gradient(135deg, #FF9AAE, #FF5C77); }
.app-shared-av.tint-mint { background: linear-gradient(135deg, #6BE2A8, #2EA56F); }

.app-card.is-shared { border-left: 3px solid var(--coral, #FB8855); }

/* shared-with-me thumbnails (re-use existing thumb gradients) */
.thumb-shared-rsvp     { background: linear-gradient(135deg, #C9E5B7 0%, #6BB377 100%); }
.thumb-shared-portfolio{ background: linear-gradient(135deg, #1F1A2E 0%, #6A2EB8 60%, #FB8855 110%); }
.thumb-shared-menu     { background: linear-gradient(135deg, #FFE8C2 0%, #FFB35C 100%); }

/* ============================================================
   INCOMING SHARE INVITES (Home strip + Review modal)
   ============================================================ */
.invites-strip {
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(255,92,77,.08), transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px 24px;
  margin-bottom: 24px;
}
.invites-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.invites-strip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}
.invites-strip-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 22%, transparent);
  animation: invPulse 1.8s ease-in-out infinite;
}
@keyframes invPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 22%, transparent); }
  50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--coral) 6%, transparent); }
}
.invites-strip-title {
  display: flex; flex-direction: column;
  font-size: 14px;
}
.invites-strip-title strong { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.invites-strip-title span { color: var(--ink-3); font-size: 13px; margin-top: 2px; }

.invites-strip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}

.invite-card {
  display: flex;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.invite-card:hover {
  border-color: var(--ink);
  box-shadow: 0 14px 32px -20px rgba(20,16,24,.18);
}
.invite-card-thumb {
  position: relative;
  width: 110px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
}
.invite-card-emoji {
  font-size: 34px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
}
.invite-card-role-pill {
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-weight: 700;
}
.invite-card-role-pill.role-viewer { color: #355d8a; }
.invite-card-role-pill.role-editor { color: var(--coral-deep); }
.invite-card-role-pill.role-admin  { color: var(--plum); }

.invite-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 16px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.invite-card-from { display: flex; align-items: center; gap: 10px; }
.invite-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--f-mono);
  flex-shrink: 0;
}
.invite-av.lg { width: 42px; height: 42px; font-size: 13.5px; }
.invite-av.tint-warm { background: linear-gradient(135deg, #FFC76B, #FB8855); }
.invite-av.tint-plum { background: linear-gradient(135deg, #C58CE8, #6A2EB8); }
.invite-av.tint-rose { background: linear-gradient(135deg, #FF9AAE, #FF5C77); }
.invite-av.tint-mint { background: linear-gradient(135deg, #6BE2A8, #2EA56F); }
.invite-av.tint-sky  { background: linear-gradient(135deg, #9CC9F0, #6FA8E0); }

.invite-card-from-meta { display: flex; flex-direction: column; min-width: 0; }
.invite-card-from-name { font-size: 12.5px; color: var(--ink-2); }
.invite-card-from-name strong { color: var(--ink); font-weight: 700; }
.invite-card-from-time { font-size: 11px; color: var(--ink-3); margin-top: 1px; font-family: var(--f-mono); }

.invite-card-project {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.invite-card-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.invite-card-actions { display: flex; gap: 4px; align-items: center; margin-top: auto; }

/* === Modal === */
.invite-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,16,24,.42);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: invFadeIn .2s ease-out;
}
@keyframes invFadeIn { from { opacity: 0; } to { opacity: 1; } }

.invite-modal {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 40px 100px -20px rgba(20,16,24,.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: invIn .25s cubic-bezier(.2,.7,.2,1);
}
@keyframes invIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.invite-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  border: 0;
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.invite-modal-close:hover { background: #fff; }

.invite-modal-hero {
  position: relative;
  padding: 28px 28px 24px;
  background-size: cover;
  background-position: center;
}
.invite-modal-hero-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,24,0) 0%, rgba(20,16,24,.55) 100%);
}
.invite-modal-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  color: #fff;
}
.invite-modal-emoji {
  font-size: 56px;
  width: 76px; height: 76px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.4);
}
.invite-modal-hero-meta { min-width: 0; }
.invite-modal-eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .85;
}
.invite-modal-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 4px 0 4px;
  line-height: 1.1;
  color: #fff;
}
.invite-modal-url {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  opacity: .85;
}
.invite-modal-role {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  align-self: start;
}
.invite-modal-role.role-viewer { color: #355d8a; }
.invite-modal-role.role-editor { color: var(--coral-deep); }
.invite-modal-role.role-admin  { color: var(--plum); }

.invite-modal-body {
  padding: 22px 28px 24px;
  overflow-y: auto;
}

.invite-from-block {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: var(--bg-2);
  border-radius: 14px;
  margin-bottom: 16px;
}
.invite-from-line { font-size: 14px; }
.invite-from-line strong { font-weight: 700; }
.invite-from-email { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.invite-from-time { text-align: right; font-size: 11.5px; color: var(--ink-3); font-family: var(--f-mono); flex-shrink: 0; }
.invite-expires { color: var(--coral); margin-top: 2px; }

.invite-note {
  display: flex; gap: 12px;
  padding: 14px 16px 14px 14px;
  background: linear-gradient(180deg, var(--sun-tint), transparent);
  border: 1px solid color-mix(in srgb, var(--sun) 30%, transparent);
  border-radius: 14px;
  margin-bottom: 22px;
}
.invite-note-quote { color: var(--sun); flex-shrink: 0; margin-top: 2px; }
.invite-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}

.invite-section { margin-bottom: 22px; }
.invite-section-head { margin-bottom: 10px; }
.invite-section-title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.invite-section-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

.invite-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .invite-perms { grid-template-columns: 1fr; gap: 10px; } }
.invite-perm-col { display: flex; flex-direction: column; gap: 8px; }
.invite-perm {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.invite-perm.muted { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 40%, transparent); }
.invite-perm-tick {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.invite-perm-tick.can    { background: var(--mint-tint); color: var(--mint); }
.invite-perm-tick.cannot { background: var(--bg-2);      color: var(--ink-3); }

.invite-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
  background: var(--bg-2);
  border-radius: 14px;
  margin-bottom: 22px;
}
@media (max-width: 560px) { .invite-facts { grid-template-columns: repeat(2, 1fr); } }
.invite-fact { text-align: left; }
.invite-fact-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.invite-fact-value { font-size: 15px; font-weight: 700; margin-top: 4px; letter-spacing: -0.01em; }

.invite-notify { display: flex; flex-direction: column; gap: 8px; }
.invite-notify-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.invite-notify-row:hover { border-color: var(--line); }
.invite-notify-row input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--coral);
  margin-top: 1px;
}
.invite-notify-label { font-weight: 600; font-size: 13px; }
.invite-notify-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

.invite-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--line-2);
  padding-top: 18px;
}

.invite-modal-fine {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.invite-modal-fine svg { width: 13px; height: 13px; color: var(--ink-3); flex-shrink: 0; }

/* Accepting / Accepted stages */
.invite-stage-center {
  padding: 56px 32px 64px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.invite-stage-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.invite-stage-sub { font-size: 13.5px; color: var(--ink-2); max-width: 36ch; }
.invite-stage-sub strong { color: var(--ink); }

.invite-spinner {
  display: inline-flex; gap: 6px;
  margin-bottom: 4px;
}
.invite-spinner span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--coral);
  animation: dot 1.2s ease-in-out infinite;
}
.invite-spinner span:nth-child(2) { animation-delay: .15s; }
.invite-spinner span:nth-child(3) { animation-delay: .3s; }

.invite-success {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--mint-tint);
  color: var(--mint);
  display: grid; place-items: center;
  animation: invPop .35s cubic-bezier(.2,.8,.2,1);
  margin-bottom: 4px;
}
@keyframes invPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================
   CONNECTORS PAGE
   ============================================================ */
.page-connectors .page-head { margin-bottom: 0; }

.conn-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0;
}
.conn-stat {
  background: var(--surface);
  padding: 22px 24px;
}
.conn-stat-num {
  font-family: var(--f-sans);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.conn-stat-lbl {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
@media (max-width: 720px) {
  .conn-stats { grid-template-columns: repeat(2, 1fr); }
}

.conn-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 22px;
  flex-wrap: wrap;
}
.conn-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.conn-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 36px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 240px;
}
.conn-search svg {
  position: absolute;
  left: 12px;
  color: var(--ink-3);
}
.conn-search input {
  border: 0; outline: 0; background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
}

.conn-section { margin-bottom: 36px; }
.conn-section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.conn-section-head h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.conn-count {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 700;
}
.conn-section-sub {
  font-size: 13px;
  color: var(--ink-3);
}

.conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.conn-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 16px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.conn-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgba(20,12,28,.12);
}
.conn-card.is-connected {
  background: linear-gradient(180deg, #fff 0%, #FCFAF4 100%);
}

.conn-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.conn-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.conn-card-meta { flex: 1; min-width: 0; }
.conn-card-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.conn-card-cat {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
  font-weight: 700;
}
.conn-pill {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.conn-pill.ok { background: rgba(46, 165, 111, .12); color: var(--mint, #2EA56F); }
.conn-pill.ok .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mint, #2EA56F);
  box-shadow: 0 0 0 3px rgba(46, 165, 111, .15);
}

.conn-card-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 12px;
  min-height: 38px;
}

.conn-card-status {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: grid;
  gap: 6px;
}
.conn-card-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.conn-card-status-line svg { color: var(--ink-3); flex-shrink: 0; }
.conn-card-spacer { flex: 1; }

.conn-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.conn-card-actions .btn { flex: 1; justify-content: center; }
.conn-disconnect { color: var(--ink-3) !important; }
.conn-disconnect:hover { color: var(--coral-deep) !important; }

/* ============================================================
   SETTINGS — Cloud balance cards & history
   ============================================================ */
.cloud-balances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 800px) { .cloud-balances { grid-template-columns: 1fr; } }

.balance-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.balance-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--coral);
}
.balance-card.tone-coral::before { background: linear-gradient(90deg, #FB8855, #E84A3C); }
.balance-card.tone-sun::before   { background: linear-gradient(90deg, #FFC76B, #FB8855); }
.balance-card.tone-mint::before  { background: linear-gradient(90deg, #6BE2A8, #2EA56F); }

.balance-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.balance-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-2);
}
.balance-card.tone-coral .balance-ic { background: var(--coral-tint, #FFE7E1); color: var(--coral-deep); }
.balance-card.tone-sun .balance-ic   { background: rgba(255, 199, 107, .25); color: #B86F1F; }
.balance-card.tone-mint .balance-ic  { background: rgba(46, 165, 111, .15); color: var(--mint); }
.balance-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.balance-headline {
  font-family: var(--f-sans);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.balance-sub {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
  margin-bottom: 14px;
  font-weight: 500;
}
.balance-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.balance-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
  transition: width .4s ease;
}
.balance-card.tone-coral .balance-fill { background: linear-gradient(90deg, #FB8855, #E84A3C); }
.balance-card.tone-sun .balance-fill   { background: linear-gradient(90deg, #FFC76B, #FB8855); }
.balance-card.tone-mint .balance-fill  { background: linear-gradient(90deg, #6BE2A8, #2EA56F); }
.balance-cta {
  border: 0;
  background: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  font-weight: 700;
}
.balance-cta:hover { color: var(--ink); }
.balance-card.tone-coral .balance-cta { color: var(--coral-deep); }

/* Storage rows */
.cloud-storage { display: flex; flex-direction: column; gap: 8px; }
.cloud-row {
  display: grid;
  grid-template-columns: 90px 1fr 200px 90px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
@media (max-width: 720px) { .cloud-row { grid-template-columns: 70px 1fr 70px; } .cloud-row-bar { display: none; } }
.cloud-row-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
}
.cloud-row-tag.tone-coral { background: var(--coral-tint, #FFE7E1); color: var(--coral-deep); }
.cloud-row-tag.tone-sun   { background: rgba(255, 199, 107, .25); color: #B86F1F; }
.cloud-row-tag.tone-warm  { background: rgba(251, 136, 85, .15); color: #B85327; }
.cloud-row-tag.tone-plum  { background: rgba(106, 46, 184, .12); color: #6A2EB8; }
.cloud-row-tag.tone-mint  { background: rgba(46, 165, 111, .15); color: var(--mint); }
.cloud-row-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.cloud-row-bar {
  height: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.cloud-row-fill { height: 100%; }
.cloud-row-fill.tone-coral { background: linear-gradient(90deg, #FB8855, #E84A3C); }
.cloud-row-fill.tone-sun   { background: linear-gradient(90deg, #FFC76B, #FB8855); }
.cloud-row-fill.tone-warm  { background: linear-gradient(90deg, #FFB388, #FB8855); }
.cloud-row-fill.tone-plum  { background: linear-gradient(90deg, #C58CE8, #6A2EB8); }
.cloud-row-fill.tone-mint  { background: linear-gradient(90deg, #6BE2A8, #2EA56F); }
.cloud-row-size {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-2);
  text-align: right;
  font-weight: 700;
}

/* History */
.cloud-history {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.cloud-history-row {
  display: grid;
  grid-template-columns: 90px 1fr 100px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.cloud-history-row:last-child { border-bottom: 0; }
.cloud-history-date {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .08em;
  font-weight: 700;
}
.cloud-history-item { font-size: 14px; color: var(--ink); font-weight: 500; }
.cloud-history-amount {
  font-family: var(--f-mono);
  font-size: 13.5px;
  font-weight: 700;
  text-align: right;
}
.cloud-history-amount.positive { color: var(--mint, #2EA56F); }
.cloud-history-amount.negative { color: var(--ink-2); }

/* Auto-recharge */
.cloud-auto {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.cloud-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.cloud-auto-row:last-child { border-bottom: 0; }
.cloud-auto-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.cloud-auto-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

/* Generic toggle */
.settings-toggle {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .18s;
  cursor: pointer;
  border: 0;
  padding: 0;
  flex-shrink: 0;
}
.settings-toggle.on { background: var(--ink); }
.settings-toggle-knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.settings-toggle.on .settings-toggle-knob { transform: translateX(18px); }

/* ============================================================
   SETTINGS — Knowledge base
   ============================================================ */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}
@media (max-width: 800px) { .kb-grid { grid-template-columns: 1fr; } }

.kb-pick {}
.kb-pick-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 700;
}
.kb-pick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kb-pick-opt {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.kb-pick-opt:hover { border-color: var(--ink); color: var(--ink); }
.kb-pick-opt.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.kb-toggles {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.kb-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.kb-toggle-row:last-child { border-bottom: 0; }
.kb-toggle-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.kb-toggle-sub   { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

.kb-field { margin-bottom: 18px; }
.kb-field:last-child { margin-bottom: 0; }
.kb-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  font-weight: 700;
}
.kb-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
  resize: vertical;
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.kb-textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(24,24,24,.06);
}
.kb-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.kb-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kb-swatch {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.kb-color-input {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  outline: 0;
}
.kb-color-input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(24,24,24,.06); }


/* ============================================================
   BUILT-WITH BADGE — appears on Free-tier published apps
   Bottom-right floating pill; remove via Pro plan
   ============================================================ */
.builtwith-badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(20, 12, 28, 0.92);
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(20,12,28,.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .18s cubic-bezier(.18,.89,.32,1.15), box-shadow .18s, background .18s;
  cursor: pointer;
  font-family: var(--f-sans);
}
.builtwith-badge:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 32px -10px rgba(20,12,28,.5);
  background: rgba(20,12,28,1);
}
.builtwith-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.builtwith-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.builtwith-text-1 {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  font-weight: 600;
  font-family: var(--f-mono);
}
.builtwith-text-2 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}

/* Smaller, lighter variant for in-preview overlays (dashboard editor) */
.builtwith-badge.in-preview {
  right: 14px;
  bottom: 14px;
  padding: 6px 12px 6px 6px;
  background: rgba(20, 12, 28, 0.85);
}
.builtwith-badge.in-preview .builtwith-mark { width: 20px; height: 20px; }
.builtwith-badge.in-preview .builtwith-mark svg { width: 12px; height: 12px; }
.builtwith-badge.in-preview .builtwith-text-1 { font-size: 8.5px; }
.builtwith-badge.in-preview .builtwith-text-2 { font-size: 11px; }

/* Hide on very small screens to avoid covering content */
@media (max-width: 480px) {
  .builtwith-badge { right: 12px; bottom: 12px; padding: 6px 10px 6px 6px; }
  .builtwith-badge .builtwith-text-1 { display: none; }
}


/* ============================================================
   HOME — Apps toolbar (redesigned)
   Primary tabs + secondary search/filter/sort row
   ============================================================ */

.apps-toolbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top row: title + primary tabs */
.apps-toolbar-row-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.apps-toolbar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Segmented tabs: All / Mine / Shared with me */
.apps-tabs {
  display: inline-flex;
  background: var(--bg-2, #EDE5D2);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.apps-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.apps-tab:hover { color: var(--ink); }
.apps-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 8px -2px rgba(20,12,28,.12), 0 1px 0 rgba(0,0,0,.04);
}
.apps-tab-ic {
  display: inline-flex;
  color: var(--coral-deep);
}
.apps-tab-ic svg { width: 14px; height: 14px; }
.apps-tab-count {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  color: var(--ink-2);
  font-weight: 700;
}
.apps-tab.active .apps-tab-count {
  background: var(--ink);
  color: #fff;
}

/* Bottom row: search + filter groups */
.apps-toolbar-row-secondary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}

.apps-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 36px;
  background: var(--bg-2, #EDE5D2);
  border: 1px solid transparent;
  border-radius: 10px;
  width: 220px;
  transition: border-color .15s, background .15s;
}
.apps-search:focus-within {
  background: var(--surface);
  border-color: var(--ink);
}
.apps-search svg {
  position: absolute;
  left: 12px;
  color: var(--ink-3);
}
.apps-search input {
  border: 0; outline: 0; background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  width: 100%;
}

.apps-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.apps-filter-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

/* Compact pill group (Status) */
.apps-pill-group {
  display: inline-flex;
  background: var(--bg-2, #EDE5D2);
  border-radius: 8px;
  padding: 3px;
  gap: 1px;
}
.apps-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: var(--f-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.apps-pill:hover { color: var(--ink); }
.apps-pill.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20,12,28,.1);
}
.apps-pill-count {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  font-weight: 700;
}
.apps-pill.active .apps-pill-count { color: var(--ink-2); }
.apps-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.apps-pill-dot.live  { background: var(--mint, #2EA56F); box-shadow: 0 0 0 2px rgba(46,165,111,.18); }
.apps-pill-dot.draft { background: var(--ink-3, #8A8590); }

/* Select dropdowns (Category / Sort) */
.apps-select {
  padding: 8px 32px 8px 12px;
  background: var(--bg-2, #EDE5D2);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  outline: 0;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23E84A3C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: background-color .15s, border-color .15s;
}
.apps-select:hover { background-color: var(--surface); border-color: var(--line); }
.apps-select:focus { background-color: var(--surface); border-color: var(--ink); }
.apps-select:disabled { opacity: .45; cursor: not-allowed; }

/* Result count — right side */
.apps-result-count {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-weight: 700;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 960px) {
  .apps-toolbar-row-secondary {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .apps-search { width: 100%; }
  .apps-result-count { margin-left: 0; text-align: right; }
  .apps-filter-group { justify-content: space-between; }
}
@media (max-width: 540px) {
  .apps-tabs { width: 100%; }
  .apps-tab { flex: 1; justify-content: center; padding: 8px 10px; }
  .apps-toolbar-row-primary { flex-direction: column; align-items: stretch; }
  .apps-toolbar-title { font-size: 16px; }
  .apps-pill-group { flex-wrap: wrap; }
}


/* ============================================================
   EDITOR — Status dropdown in URL bar
   ============================================================ */
.ed-status-wrap {
  position: relative;
  margin-left: auto;
}
.ed-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.ed-status-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.ed-status-label {
  text-transform: uppercase;
}
.ed-status-chev {
  color: var(--ink-3);
  margin-left: 2px;
}
.ed-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Status colors */
.status-draft     .ed-status-dot { background: var(--ink-3); }
.status-building  .ed-status-dot { background: #FFC53D; box-shadow: 0 0 0 3px rgba(255,197,61,.18); animation: status-pulse 1.6s ease-in-out infinite; }
.status-live      .ed-status-dot { background: var(--mint); box-shadow: 0 0 0 3px rgba(46,165,111,.18); }
.status-archived  .ed-status-dot { background: #C58CE8; }
.status-pinned    .ed-status-dot { background: #FFC76B; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,197,61,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(255,197,61,.06); }
}
.status-pill.status-live, .ed-status-pill.status-live { color: var(--mint); }
.ed-status-pill.status-building { color: #B86F1F; }
.ed-status-pill.status-archived { color: #6A2EB8; }

/* Dropdown */
.ed-status-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.ed-status-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 61;
  width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px -16px rgba(20,12,28,.25);
  padding: 6px;
  animation: ed-status-pop .18s cubic-bezier(.18,.89,.32,1.15) both;
}
@keyframes ed-status-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ed-status-menu-head {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  padding: 8px 10px 6px;
}
.ed-status-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ed-status-opt:hover { background: var(--bg-2, #EDE5D2); }
.ed-status-opt.active { background: var(--bg-2, #EDE5D2); }
.ed-status-opt-text { flex: 1; min-width: 0; }
.ed-status-opt-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.ed-status-opt-hint {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.ed-status-tick {
  color: var(--coral-deep);
  font-size: 13px;
  font-weight: 700;
}
.ed-status-menu-foot {
  margin-top: 4px;
  padding: 10px 12px 6px;
  border-top: 1px solid var(--line-2);
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.ed-status-menu-foot strong {
  color: var(--mint);
  font-weight: 700;
}

/* Move "LATEST" marker out of preview-url's right edge — now lives in the dropdown */
.preview-url > .lock { flex: 1; min-width: 0; }


/* ============================================================
   EDITOR — Pages dropdown (in URL bar)
   Click to jump between pages/screens of the app being built
   ============================================================ */
.ed-pages-wrap {
  position: relative;
  margin-left: auto;
}
.ed-pages-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  max-width: 280px;
}
.ed-pages-pill:hover { border-color: var(--ink); transform: translateY(-1px); }
.ed-pages-emoji { font-size: 13px; }
.ed-pages-name { font-weight: 700; }
.ed-pages-path {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}
.ed-pages-chev { color: var(--ink-3); margin-left: 2px; }

.ed-pages-backdrop { position: fixed; inset: 0; z-index: 60; }
.ed-pages-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 61;
  width: 280px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px -16px rgba(20,12,28,.25);
  padding: 6px;
  animation: ed-pages-pop .18s cubic-bezier(.18,.89,.32,1.15) both;
}
@keyframes ed-pages-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ed-pages-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  padding: 8px 10px 8px;
}
.ed-pages-count {
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--ink-2);
}
.ed-pages-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ed-pages-opt:hover { background: var(--bg-2, #EDE5D2); }
.ed-pages-opt.active { background: var(--coral-tint, #FFE7E1); }
.ed-pages-opt-emoji {
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border-radius: 6px;
  flex-shrink: 0;
}
.ed-pages-opt.active .ed-pages-opt-emoji { background: rgba(255,255,255,.7); }
.ed-pages-opt-text { flex: 1; min-width: 0; }
.ed-pages-opt-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.ed-pages-opt-path {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 1px;
}
.ed-pages-tick { color: var(--coral-deep); font-weight: 700; font-size: 13px; }
.ed-pages-add {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line-2);
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--coral-deep);
  text-align: left;
  transition: background .12s;
}
.ed-pages-add:hover { background: var(--coral-tint, #FFE7E1); }
.ed-pages-add-ic {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--coral-tint);
  color: var(--coral-deep);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}


/* ============================================================
   DATA PAGE — built-in database
   ============================================================ */
.page-data .page-head { margin-bottom: 0; }

.data-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin: 24px 0;
}
.data-stat { background: var(--surface); padding: 18px 22px; }
.data-stat-num {
  font-family: var(--f-sans);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}
.data-stat-lbl {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
@media (max-width: 720px) { .data-stats { grid-template-columns: repeat(2, 1fr); } }

.data-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  min-height: 600px;
}
@media (max-width: 900px) { .data-shell { grid-template-columns: 1fr; } }

.data-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.data-sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.data-add-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.data-add-btn:hover { border-color: var(--ink); color: var(--ink); }
.data-table-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.data-table-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.data-table-item:hover { background: var(--bg-2); }
.data-table-item.active { background: var(--coral-tint, #FFE7E1); }
.data-table-emoji {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.data-table-item.active .data-table-emoji { background: rgba(255,255,255,.7); }
.data-table-meta { flex: 1; min-width: 0; }
.data-table-name {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.data-table-rows {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.data-sidebar-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--ink-2);
}
.data-foot-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.data-foot-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--f-mono); }

.data-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.data-main-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.data-main-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.data-main-emoji {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-2);
  display: grid; place-items: center;
  font-size: 16px;
}
.data-main-title h2 {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.data-main-rowct {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--f-mono);
  margin-left: 8px;
}
.data-growth { color: var(--mint); }
.data-main-tabs {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 8px;
  padding: 3px;
  margin-left: 8px;
}
.data-main-tab {
  padding: 6px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.data-main-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.data-main-actions { margin-left: auto; display: flex; gap: 6px; }

.data-rows-wrap { overflow: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  position: sticky;
  top: 0;
  background: var(--bg-2);
  text-align: left;
  padding: 10px 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-th-row { display: flex; align-items: center; gap: 6px; }
.data-th-name { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink); }
.data-th-type { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.data-key {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 700;
}
.data-key.pk  { background: rgba(232,74,60,.12); color: var(--coral-deep); }
.data-key.uq  { background: rgba(46,165,111,.12); color: var(--mint); }
.data-key.idx { background: rgba(46,120,217,.12); color: #2E78D9; }
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
}
.data-table td.mono { font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.data-table tr:hover td { background: var(--bg-2); }
.data-pill {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.data-pill.status-paid    { background: rgba(46,165,111,.12); color: var(--mint); }
.data-pill.status-ready   { background: rgba(46,120,217,.12); color: #2E78D9; }
.data-pill.status-pending { background: rgba(255,199,107,.2); color: #B86F1F; }
.data-bool {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-weight: 700;
}
.data-bool.b-true  { background: rgba(46,165,111,.12); color: var(--mint); }
.data-bool.b-false { background: var(--bg-2); color: var(--ink-3); }
.data-add-row td { padding: 0; }
.data-add-row-btn {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.data-add-row-btn:hover { background: var(--bg-2); color: var(--coral-deep); }
.data-rows-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--f-mono);
}
.data-pager { display: inline-flex; align-items: center; gap: 8px; }
.data-page-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 14px;
}
.data-page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Schema view */
.data-schema { padding: 20px 22px; display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
@media (max-width: 900px) { .data-schema { grid-template-columns: 1fr; } }
.data-schema-card, .data-schema-rels {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px;
}
.data-schema-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.data-schema-card-head h3 {
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}
.data-field {
  display: grid;
  grid-template-columns: 32px 1.4fr 1fr 2fr 24px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 8px;
  margin-bottom: 6px;
}
.data-field-num {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.data-field-name {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.data-field-type {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg-2);
  padding: 3px 8px;
  border-radius: 4px;
  justify-self: start;
}
.data-field-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.data-flag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--ink-3);
  font-weight: 700;
}
.data-flag.required { background: rgba(232,74,60,.1); color: var(--coral-deep); }
.data-flag.default  { background: rgba(46,120,217,.1); color: #2E78D9; }
.data-field-edit {
  width: 24px; height: 24px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 4px;
  display: grid; place-items: center;
}
.data-field-edit:hover { background: var(--bg-2); color: var(--ink); }
.data-schema-add, .data-rel-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  justify-content: center;
}
.data-schema-add:hover, .data-rel-add:hover { border-color: var(--ink); color: var(--coral-deep); }
.data-schema-rels-head {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 12px;
}
.data-rel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.data-rel svg { color: var(--ink-3); }
.data-rel strong { color: var(--ink); font-family: var(--f-mono); font-weight: 700; }
.data-rel-kind {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 999px;
}

/* API view */
.data-api { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.data-api-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: 10px;
}
.data-api-method {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  width: 64px;
  text-align: center;
}
.data-api-method.get    { background: #2E78D9; }
.data-api-method.post   { background: var(--mint, #2EA56F); }
.data-api-method.patch  { background: #B86F1F; }
.data-api-method.delete { background: var(--coral-deep, #E84A3C); }
.data-api-body { flex: 1; }
.data-api-path {
  font-family: var(--f-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.data-api-desc { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.data-api-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 6px;
  background: var(--coral-tint);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.data-api-note svg { color: var(--coral-deep); flex-shrink: 0; margin-top: 2px; }
.data-api-note strong { color: var(--ink); }


/* ============================================================
   SEO PANE — meta tags, preview, Lighthouse, sitemap
   ============================================================ */
.seo-pane { padding: 20px 24px 32px; overflow-y: auto; }
.seo-head { margin-bottom: 24px; }
.seo-head h2 {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--ink);
}
.seo-head p { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 60ch; }

.seo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 1000px) { .seo-grid { grid-template-columns: 1fr; } }
.seo-section-wide { grid-column: 1 / -1; }

.seo-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}
.seo-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.seo-section-head h3 {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.seo-section-sub { font-size: 12.5px; color: var(--ink-3); }
.seo-section-sub strong { color: var(--ink-2); }

.seo-field { display: block; margin-bottom: 14px; }
.seo-field:last-child { margin-bottom: 0; }
.seo-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.seo-char { font-size: 11px; color: var(--ink-3); }
.seo-char.warn { color: var(--coral-deep); }
.seo-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  font-family: var(--f-sans);
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  outline: 0;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.seo-input:focus {
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(24,24,24,.06);
}
textarea.seo-input { resize: vertical; min-height: 70px; line-height: 1.5; }
.seo-og-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: stretch; }
.seo-og-thumb {
  border-radius: 8px;
  background: linear-gradient(135deg, #FB8855 0%, #B83E8E 60%, #5C2EB8 110%);
  aspect-ratio: 1200/630;
  border: 1px solid var(--line);
}
.seo-og-actions { display: flex; flex-direction: column; gap: 8px; }

/* Google search preview */
.seo-serp {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 14px 16px;
  font-family: var(--f-sans);
}
.seo-serp-url { font-size: 12px; color: var(--mint); margin-bottom: 4px; }
.seo-serp-title {
  font-size: 18px;
  color: #1A0DAB;
  margin-bottom: 4px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.seo-serp-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }

/* Social card preview */
.seo-social {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.seo-social-thumb {
  background: linear-gradient(135deg, #FB8855 0%, #B83E8E 60%, #5C2EB8 110%);
}
.seo-social-body { padding: 12px 14px; }
.seo-social-host {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.seo-social-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: 1.25; }
.seo-social-desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

/* Lighthouse */
.seo-lh-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .seo-lh-row { grid-template-columns: repeat(2, 1fr); } }
.seo-lh-card {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
  position: relative;
}
.seo-lh-ring { width: 70px; height: 70px; }
.seo-lh-ring-bg { fill: none; stroke: var(--line); stroke-width: 3; }
.seo-lh-ring-fg {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.seo-lh-card.tone-mint .seo-lh-ring-fg { stroke: var(--mint, #2EA56F); }
.seo-lh-card.tone-sun  .seo-lh-ring-fg { stroke: #FFC53D; }
.seo-lh-card.tone-coral .seo-lh-ring-fg { stroke: var(--coral-deep); }
.seo-lh-num {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: -50px;
  margin-bottom: 22px;
}
.seo-lh-k {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}

/* Sitemap routes */
.seo-routes { display: flex; flex-direction: column; gap: 4px; }
.seo-route {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-2);
  border-radius: 8px;
}
.seo-route-path { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.seo-route-pill {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 700;
}
.seo-route-pill.st-indexed { background: rgba(46,165,111,.12); color: var(--mint); }
.seo-route-pill.st-noindex { background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line); }

/* ============================================================
   LOGS PANE — server logs stream
   ============================================================ */
.logs-pane { padding: 20px 24px 24px; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.logs-head { margin-bottom: 16px; }
.logs-head h2 {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--ink);
}
.logs-head p { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 60ch; }

.logs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  flex-wrap: wrap;
}
.logs-filter-pills { display: flex; gap: 4px; }
.logs-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.logs-pill:hover { background: var(--bg-2); }
.logs-pill.active { background: var(--ink); color: #fff; }
.logs-pill.active.info  { background: #2E78D9; }
.logs-pill.active.warn  { background: #B86F1F; }
.logs-pill.active.error { background: var(--coral-deep); }
.logs-pill-count {
  font-family: var(--f-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  font-weight: 700;
}
.logs-pill.active .logs-pill-count { background: rgba(255,255,255,.2); color: #fff; }

.logs-actions { display: flex; align-items: center; gap: 8px; }
.logs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 700;
  cursor: pointer;
}
.logs-toggle input { margin: 0; }

.logs-stream {
  flex: 1;
  min-height: 200px;
  background: #181818;
  border-radius: 12px;
  overflow: auto;
  font-family: var(--f-mono);
  font-size: 12px;
}
.logs-stream-head, .logs-row {
  display: grid;
  grid-template-columns: 72px 60px 60px 1.4fr 60px 60px 2.6fr;
  gap: 12px;
  padding: 8px 14px;
  align-items: center;
}
.logs-stream-head {
  position: sticky;
  top: 0;
  background: #0E0915;
  color: rgba(255,255,255,.5);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 1;
}
.logs-row { color: rgba(255,255,255,.85); border-bottom: 1px solid rgba(255,255,255,.05); }
.logs-row:hover { background: rgba(255,255,255,.04); }
.logs-row.lvl-error { background: rgba(232,74,60,.08); }
.logs-row.lvl-warn  { background: rgba(255,199,107,.04); }
.logs-time { color: rgba(255,255,255,.5); }
.logs-lvl {
  font-size: 10px;
  letter-spacing: .12em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  width: fit-content;
}
.logs-lvl.lvl-info  { background: rgba(46,120,217,.2); color: #79B8FF; }
.logs-lvl.lvl-warn  { background: rgba(255,199,107,.22); color: #FFC76B; }
.logs-lvl.lvl-error { background: rgba(232,74,60,.25); color: #FF9AAE; }
.logs-method {
  font-size: 10.5px;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  width: fit-content;
}
.logs-method.m-get    { background: rgba(46,120,217,.25); color: #79B8FF; }
.logs-method.m-post   { background: rgba(46,165,111,.25); color: #6BE2A8; }
.logs-method.m-patch  { background: rgba(255,199,107,.25); color: #FFC76B; }
.logs-method.m-delete { background: rgba(232,74,60,.3); color: #FF9AAE; }
.logs-path { font-weight: 700; }
.logs-status.s-2 { color: #6BE2A8; }
.logs-status.s-3 { color: #79B8FF; }
.logs-status.s-4 { color: #FFC76B; }
.logs-status.s-5 { color: #FF9AAE; }
.logs-ms.slow { color: #FFC76B; }
.logs-msg { color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.logs-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-3);
}
.logs-foot svg { color: var(--ink-3); }

/* ============================================================
   FIGMA IMPORT MODAL
   ============================================================ */
.figma-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,12,28,.42);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.figma-modal {
  position: relative;
  background: var(--surface);
  border-radius: 24px;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 40px 32px;
  box-shadow: 0 48px 120px -32px rgba(20,12,28,.5);
}
.figma-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
}
.figma-close:hover { background: var(--ink); color: #fff; }
.figma-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 14px;
}
.figma-logo {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F24E1E 0%, #A259FF 100%);
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 700;
}
.figma-h {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.1;
  color: var(--ink);
}
.figma-h em { font-style: italic; color: var(--coral-deep); }
.figma-head p { font-size: 14px; color: var(--ink-2); margin: 0 0 24px; line-height: 1.55; }

.figma-field { display: block; margin-bottom: 18px; }
.figma-field-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 8px;
}
.figma-input-row {
  display: flex;
  align-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 4px 4px 12px;
}
.figma-input-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(24,24,24,.06); }
.figma-input-prefix { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); }
.figma-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 10px 8px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  min-width: 0;
}
.figma-hint { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.figma-hint a { color: var(--coral-deep); font-weight: 700; }

.figma-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.figma-option {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .12s;
}
.figma-option:hover { border-color: var(--ink); }
.figma-option input { margin-top: 3px; flex-shrink: 0; }
.figma-option span { display: flex; flex-direction: column; }
.figma-option strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.figma-option small { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* Parsing state */
.figma-parsing { text-align: center; padding: 12px 0; }
.figma-spinner {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid var(--bg-2);
  border-top-color: var(--coral-deep);
  margin: 0 auto 18px;
  animation: figma-spin 0.8s linear infinite;
}
@keyframes figma-spin { to { transform: rotate(360deg); } }
.figma-parsing h3 {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.figma-progress {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.figma-progress li {
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.figma-progress li.done { color: var(--mint); background: rgba(46,165,111,.08); }
.figma-progress li.active { color: var(--coral-deep); background: var(--coral-tint); font-weight: 700; }

/* Ready state */
.figma-ready { text-align: center; }
.figma-ready-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mint);
  color: #fff;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  font-size: 28px;
  font-weight: 700;
}
.figma-ready h3 {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.figma-ready h3 em { font-style: italic; color: var(--coral-deep); }
.figma-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.figma-stat { background: var(--bg-2); border-radius: 10px; padding: 14px 8px; }
.figma-stat .num {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.figma-stat .lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 700;
}
.figma-ready p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.5; }
.figma-ready-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   VISUAL EDIT CHIP — floating editor for selected elements
   ============================================================ */
.ve-chip {
  position: absolute;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(20,12,28,.25);
  padding: 10px;
  min-width: 240px;
}
.ve-chip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 8px;
}
.ve-chip-name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.ve-chip-close {
  width: 20px; height: 20px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  display: grid; place-items: center;
}
.ve-chip-close:hover { background: var(--bg-2); color: var(--ink); }
.ve-chip-body { display: flex; flex-direction: column; gap: 8px; }
.ve-chip-text {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  font-size: 13px;
  color: var(--ink);
  outline: 0;
}
.ve-chip-text:focus { background: var(--surface); border-color: var(--ink); }
.ve-chip-row { display: flex; align-items: center; gap: 8px; }
.ve-chip-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  width: 36px;
}
.ve-chip-swatches { display: flex; gap: 4px; }
.ve-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s;
}
.ve-swatch:hover { transform: scale(1.1); }
.ve-swatch.active { border-color: var(--ink); }
.ve-chip-pills { display: flex; gap: 4px; }
.ve-pill {
  width: 28px; height: 24px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}
.ve-pill:hover { border-color: var(--ink); color: var(--ink); }
.ve-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.ve-chip-apply {
  margin-top: 4px;
  padding: 8px;
  background: var(--coral-deep);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.ve-chip-apply:hover { background: var(--coral); }

/* ============= SUPPORT DESK ============= */
.sup-hero {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 48px 36px;
  margin: 8px 0 32px;
  overflow: hidden;
}
.sup-hero-bloom {
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun-tint) 0%, transparent 60%);
  pointer-events: none;
}
.sup-hero-eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sup-hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent);
}
.sup-hero-h {
  position: relative;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 14px 0 10px;
  max-width: 22ch;
}
.sup-hero-sub {
  position: relative;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 0 24px;
}

/* Ask box — the center of gravity */
.sup-ask {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 56px -32px rgba(20,16,24,.22), 0 2px 0 rgba(20,16,24,.02);
  transition: border-color .15s, box-shadow .15s;
}
.sup-ask:focus-within {
  border-color: var(--ink);
  box-shadow: 0 28px 72px -32px rgba(255,92,77,.35), 0 0 0 4px var(--coral-tint);
}
.sup-ask.thinking { border-color: var(--coral); }
.sup-ask.answered { border-color: var(--mint); box-shadow: 0 24px 56px -32px rgba(31,178,149,.3); }

.sup-ask-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--sun);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sup-ask-ic svg { width: 20px; height: 20px; }
.sup-ask-dots { display: inline-flex; gap: 4px; }
.sup-ask-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sun);
  animation: dot 1.2s ease-in-out infinite;
}
.sup-ask-dots span:nth-child(2) { animation-delay: .15s; }
.sup-ask-dots span:nth-child(3) { animation-delay: .3s; }

.sup-ask textarea {
  border: 0; outline: 0;
  background: transparent;
  resize: none;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  padding: 6px 0;
  min-height: 28px;
  max-height: 120px;
  width: 100%;
}
.sup-ask textarea::placeholder { color: var(--ink-3); }

.sup-ask-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sup-ask-clear {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border: 0;
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
}
.sup-ask-clear:hover { background: var(--line); color: var(--ink); }
.sup-ask-go { padding: 9px 16px; }
.sup-ask-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

.sup-ask-kbd {
  position: absolute;
  bottom: -22px; right: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Suggestion chips */
.sup-suggest {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px;
  align-items: center;
}
.sup-suggest-label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.sup-suggest-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s, color .15s, transform .15s;
}
.sup-suggest-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

/* AI answer card */
.sup-answer {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint);
  border-radius: 16px;
  padding: 18px 22px;
  animation: supAnsIn .35s ease-out;
}
@keyframes supAnsIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sup-answer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.sup-answer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--mint-tint);
  padding: 5px 10px;
  border-radius: 999px;
}
.sup-answer-badge svg { width: 14px; height: 14px; color: var(--mint); }
.sup-answer-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.sup-answer-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}
.sup-answer-body a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sup-answer-cites {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-2);
}
.sup-cite {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
}
.sup-cite:hover { border-color: var(--ink); color: var(--ink); }
.sup-answer-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
}
.sup-helpful {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.sup-helpful-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.sup-helpful-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ===== Sections ===== */
.sup-section { margin-bottom: 32px; }
.sup-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px;
}
.sup-section-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.sup-section-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.sup-section-link:hover { color: var(--ink); }

/* Topic grid */
.sup-topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .sup-topic-grid { grid-template-columns: repeat(2, 1fr); }
}
.sup-topic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sup-topic:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
  box-shadow: 0 14px 28px -16px rgba(20,16,24,.15);
}
.sup-topic-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sup-topic-ic svg { width: 20px; height: 20px; }
.sup-topic.tone-sun   .sup-topic-ic { background: var(--sun-tint);  color: #8a6a00; }
.sup-topic.tone-sky   .sup-topic-ic { background: var(--sky-tint);  color: #355d8a; }
.sup-topic.tone-mint  .sup-topic-ic { background: var(--mint-tint); color: var(--mint); }
.sup-topic.tone-coral .sup-topic-ic { background: var(--coral-tint);color: var(--coral-deep); }
.sup-topic.tone-plum  .sup-topic-ic { background: #ECE3F3;          color: var(--plum); }
.sup-topic.tone-ink   .sup-topic-ic { background: var(--bg-2);      color: var(--ink); }
.sup-topic-body { flex: 1; min-width: 0; }
.sup-topic-title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.sup-topic-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.sup-topic-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 10px;
}

/* Two-up: tickets + guides */
.sup-twoup {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1100px) {
  .sup-twoup { grid-template-columns: 1fr; }
}
.sup-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.sup-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line-2);
}
.sup-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sup-card-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* Tickets */
.sup-tickets > * + * { border-top: 1px solid var(--line-2); }
.sup-ticket {
  display: grid;
  grid-template-columns: 10px 1fr 20px;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  cursor: pointer;
  transition: background .12s;
}
.sup-ticket:hover { background: var(--bg-2); }
.sup-ticket-dot {
  width: 8px; height: 8px; border-radius: 50%;
  align-self: start;
  margin-top: 8px;
}
.sup-ticket-dot.tone-sun  { background: var(--sun); }
.sup-ticket-dot.tone-sky  { background: var(--sky); }
.sup-ticket-dot.tone-mint { background: var(--mint); }
.sup-ticket-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 3px;
}
.sup-ticket-id {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.sup-ticket-when {
  font-size: 11.5px;
  color: var(--ink-3);
}
.sup-ticket-when::before { content: "·"; margin-right: 8px; opacity: .5; }
.sup-ticket-subj { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.sup-ticket-foot { display: flex; align-items: center; gap: 10px; }
.sup-ticket-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.sup-ticket-status.tone-sun  { background: var(--sun-tint);  color: #8a6a00; }
.sup-ticket-status.tone-sky  { background: var(--sky-tint);  color: #2d4f78; }
.sup-ticket-status.tone-mint { background: var(--mint-tint); color: var(--mint); }
.sup-ticket-waits { font-size: 12px; color: var(--ink-3); }
.sup-ticket-arrow { color: var(--ink-3); display: grid; place-items: center; }
.sup-ticket:hover .sup-ticket-arrow { color: var(--ink); transform: translateX(2px); transition: transform .12s; }

/* Guides */
.sup-guides { padding: 6px 0; }
.sup-guide {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .12s;
}
.sup-guide:hover { background: var(--bg-2); }
.sup-guide:hover svg { color: var(--ink); transform: translateX(2px); transition: transform .12s; }
.sup-guide-idx {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  width: 22px;
}
.sup-guide-title { font-weight: 600; font-size: 14px; }
.sup-guide-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sup-guide svg { color: var(--ink-3); }

/* Contact strip */
.sup-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .sup-contact { grid-template-columns: 1fr; }
}
.sup-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.sup-contact-card > div:nth-child(2) { flex: 1; min-width: 0; }
.sup-contact-ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sup-contact-ic svg { width: 16px; height: 16px; }
.sup-contact-title { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.sup-contact-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sup-status .sup-contact-ic { background: var(--mint-tint); color: var(--mint); }
.sup-status-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent);
  animation: supPulse 2.2s ease-in-out infinite;
}
@keyframes supPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mint) 6%, transparent); }
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-md);
  border: 1px solid var(--line);
  animation: toast-in .22s cubic-bezier(.2,.8,.2,1);
  min-width: 240px;
  max-width: 380px;
}
.toast-success { border-left: 3px solid var(--mint); }
.toast-error { border-left: 3px solid var(--coral); }
.toast-info { border-left: 3px solid var(--ink); }
.toast-msg {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.toast-close {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--ink-3);
  transition: background .12s;
}
.toast-close:hover { background: var(--line); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   APP CONTEXT MENU
   ============================================================ */
.app-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
  padding: 6px;
  animation: um-pop .16s cubic-bezier(.2,.8,.2,1);
}
.app-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-xs);
  width: 100%;
  transition: background .1s;
}
.app-context-item:hover { background: var(--bg); }
.app-context-item.danger { color: var(--coral); }
.app-context-item.danger:hover { background: var(--coral-tint); }
.app-context-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}

/* ============================================================
   APPS LOADING STATE
   ============================================================ */
.apps-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  gap: 16px;
}
.apps-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -0.01em;
}

/* ============================================================
   APP SHARE MODAL
   ============================================================ */
.app-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20,12,28,.42);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
}
.app-share-modal {
  position: relative;
  background: var(--surface);
  border-radius: 24px;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 32px 36px 28px;
  box-shadow: 0 48px 120px -32px rgba(20,12,28,.5);
}
.app-share-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 18px;
  display: grid;
  place-items: center;
}
.app-share-close:hover { background: var(--ink); color: #fff; }
.app-share-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.app-share-head h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.app-share-emoji {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.app-share-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.app-share-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  border: 0;
  background: 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.app-share-tabs button:hover { color: var(--ink); }
.app-share-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--coral);
}
.app-share-body { min-height: 140px; }
.app-share-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.app-share-link-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--f-mono);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
}
.app-share-link-input:focus { border-color: var(--coral); }
.app-share-copy {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.app-share-copy:hover { background: var(--bg-2); }
.app-share-copy.copied {
  background: var(--mint-tint);
  border-color: var(--mint);
  color: var(--mint);
}
.app-share-qr-section {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.app-share-qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
}
.app-share-qr-svg {
  width: 120px;
  height: 120px;
  border-radius: 6px;
}
.app-share-qr-caption {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.app-share-channels {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.app-share-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.app-share-channel:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
.app-share-channel .ic { display: flex; color: var(--ink-2); }
.app-share-unpublished {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink-3);
  text-align: center;
  gap: 8px;
}
.app-share-unpublished h3 {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.app-share-unpublished p {
  margin: 0;
  font-size: 13px;
  max-width: 28ch;
}
.app-share-invite-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.app-share-invite-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
}
.app-share-invite-input:focus { border-color: var(--coral); }
.app-share-role-select {
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  outline: none;
}
.app-share-collab-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--ink-3);
  text-align: center;
  gap: 8px;
}
.app-share-collab-empty p {
  margin: 0;
  font-size: 13px;
  max-width: 30ch;
}

/* ============================================================
   PREVIEW DEAD / REBUILD OVERLAY
   ============================================================ */
.preview-dead-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-dead-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: var(--ink-3);
}
.preview-dead-card h3 {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.preview-dead-card p {
  margin: 0 0 4px;
  font-size: 13px;
  max-width: 28ch;
}

/* Preview building overlay */
.preview-building-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-building-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.preview-building-phase {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.preview-building-sub {
  font-size: 13px;
  color: var(--ink-3);
}

/* Rebuild button in preview toolbar */
.rebuild-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.rebuild-btn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--ink-3); }
.rebuild-btn:disabled { opacity: .5; cursor: default; }