/* Jack — promo site shared styles
   Tokens mirror src/renderer/src/styles/globals.css.
   Layouts mirror the real renderer components (App, Sidebar, AgentChat,
   WorkspaceBoard, FileViewer, ConflictResolver, WorkspaceGitPanel). */

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1e1e1e;
  --bg-hover: #262626;
  --border: #2a2a2a;
  --border-bright: #3a3a3a;
  --accent: #e88a3a;
  --accent-dim: #c27030;
  --accent-glow: rgba(232, 138, 58, 0.15);
  --accent-soft: rgba(232, 138, 58, 0.08);
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #ef4444;
  --info: #60a5fa;
  --text-primary: #f5f5f5;
  --text-secondary: #b5b5b5;
  --text-muted: #858585;
  --diff-add: rgba(74, 222, 128, 0.10);
  --diff-add-text: rgba(74, 222, 128, 0.95);
  --diff-del: rgba(239, 68, 68, 0.10);
  --diff-del-text: rgba(239, 68, 68, 0.95);
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text-primary); }

/* ==== Layout primitives ==== */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 96px 0;
  position: relative;
}

.section + .section { border-top: 1px solid var(--border); }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}

.section-title {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.section-lead {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 0 56px;
  line-height: 1.65;
}

/* ==== Top marketing bar ==== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(20px);
  background: rgba(10, 10, 10, 0.78);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
}

.brand-name { font-size: 16px; }
.brand-sub  { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 6px; }

.nav { display: flex; gap: 28px; align-items: center; }
.nav a { color: var(--text-secondary); font-size: 13px; }
.nav a:hover { color: var(--text-primary); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-primary { background: var(--accent); color: #1a0c00; }
.btn-primary:hover { background: #ff993f; }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-bright); }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--text-muted); }

/* ==== Real-screenshot showcases ==== */

/* Shots are wrapped in an anchor that opens the full-resolution PNG in a
   new tab — gives users a zoom-in escape hatch without any JS. */
.shot-link {
  display: block;
  position: relative;
  cursor: zoom-in;
  transition: transform 0.25s ease;
}
.shot-link:hover { transform: translateY(-2px); }

/* The "open full size" hint that fades in on hover. */
.shot-link::after {
  content: '↗ open full size';
  position: absolute;
  top: 14px; right: 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-bright);
  backdrop-filter: blur(8px);
  padding: 5px 10px;
  border-radius: 7px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.shot-link:hover::after { opacity: 1; }

.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 30px 80px -30px rgba(0, 0, 0, 0.65);
  background: var(--bg-secondary);
}

/* ==== Lightbox (pure CSS, :target-based) ==== */

/* Each shot's anchor points to `#lb-<scene>`. The matching <div id="lb-…">
   is hidden by default and revealed via the :target pseudo-class. ESC
   support is wired in a tiny <script> at the bottom of the page. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox:target {
  display: flex;
  animation: lb-fade 0.18s ease-out;
}
@keyframes lb-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Backdrop is a transparent <a href="#"> covering the whole modal — click
   anywhere outside the image to close. */
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

.lightbox img {
  position: relative;
  z-index: 1;
  max-width: 95%;
  max-height: 95%;
  border-radius: 12px;
  border: 1px solid var(--border-bright);
  box-shadow: 0 50px 120px -20px black;
  cursor: default;
}

/* Explicit close button, top-right of the modal. */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-primary);
}

/* Block page scroll while a lightbox is open. Toggled from JS. */
body.lb-open { overflow: hidden; }

/* ==== Hero ==== */

/* The sticky topbar already eats ~58px; we just need a comfortable
   breathing strip before the headline (64px), not a full 120px gap.
   Bottom is 0 because the next .section adds its own 96px padding-top. */
.hero {
  padding: 64px 0 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--border-bright);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 28px;
}
.hero-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.hero h1 {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 24px;
  background: linear-gradient(180deg, #ffffff 0%, #c0c0c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--accent) 0%, #ff6b1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  font-size: 19px;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; }
.hero-stats {
  display: flex;
  gap: 56px;
  justify-content: center;
  margin-top: 64px;
  color: var(--text-muted);
  font-size: 12px;
}
.hero-stat strong {
  display: block;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
/* The hero shot sits in its own <section class="hero-shot-section">
   so it doesn't inherit the .hero padding / radial glow. */
.hero-shot-section {
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
/* Ambient orange glow behind the photo — lives on the section, not on
   the image, so it adds zero layout space. Just a soft halo bleeding
   from behind the screenshot. */
.hero-shot-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(232, 138, 58, 0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-shot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* ==== Feature grid ==== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.feature-card {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.feature-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.feature-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--accent-glow);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.feature-card h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.feature-card p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.feature-card code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ==== Showcase row (alternating) ==== */
.showcase {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
  margin: 96px 0;
}
.showcase.reverse { grid-template-columns: 7fr 5fr; }
.showcase.reverse .showcase-text { order: 2; }
.showcase-text h3 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
}
.showcase-text p { color: var(--text-secondary); font-size: 16px; line-height: 1.65; margin: 0 0 20px; }
.showcase-text ul { list-style: none; padding: 0; margin: 0; }
.showcase-text li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
}
.showcase-text li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
  flex-shrink: 0;
}
.showcase-text code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}
.showcase-frame {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

/* =====================================================================
   ====   Real Jack window mockup chrome   ============================
   =====================================================================
   Real layout (App.tsx): vertical flex column
   - .app-shell        full window
     - .app-titlebar   48px tall, dark bg, contains app controls
     - .app-body       flex row
       - .app-sidebar  resizable left, ~288px
       - .app-main     flex-1, surface depending on view
*/

.mock {
  background: var(--bg-primary);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  height: 680px;
  overflow: hidden;
}

/* App-level titlebar (replaces the old window chrome) */
.app-titlebar {
  height: 48px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
}

.app-titlebar .traffic { display: flex; gap: 6px; padding-left: 4px; }
.app-titlebar .traffic span { width: 12px; height: 12px; border-radius: 50%; }
.app-titlebar .traffic span:nth-child(1) { background: #ff5f57; }
.app-titlebar .traffic span:nth-child(2) { background: #febc2e; }
.app-titlebar .traffic span:nth-child(3) { background: #28c840; }

.app-iconbtn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: default;
}
.app-iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.app-iconbtn.active { background: var(--bg-hover); color: var(--text-primary); }

.app-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text-muted);
  height: 30px;
}
.app-search-trigger .kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--bg-primary);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* Mode tabs (Chats / Workspaces) — pill segmented control */
.mode-tabs {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  height: 30px;
}
.mode-tabs button {
  font: inherit;
  font-size: 12px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mode-tabs .active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Inbox badge pill */
.inbox-pill {
  position: relative;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
}
.inbox-pill:hover { background: var(--bg-hover); color: var(--text-primary); }
.inbox-pill .count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--accent);
  color: #1a0c00;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1.5px solid var(--bg-secondary);
  line-height: 1.2;
}

/* Context usage chip in titlebar */
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  height: 26px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--mono);
}
.context-chip .gauge {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.app-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* =====================================================================
   ====   Sidebar (real Sidebar.tsx)   =================================
   ===================================================================== */

.app-sidebar {
  width: 288px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
}

.sb-head .title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: 1;
}

.sb-head button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
}
.sb-head button:hover { background: var(--bg-hover); color: var(--text-primary); }

.sb-search {
  margin: 0 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.sb-search input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-secondary);
  font: inherit;
  flex: 1;
  min-width: 0;
}

/* Managed/Local segmented control inside sidebar */
.sb-segmented {
  margin: 0 12px 6px;
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
}
.sb-segmented button {
  font: inherit;
  font-size: 11.5px;
  padding: 4px 10px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  border-radius: 5px;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sb-segmented .active {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sb-segmented .num {
  font-size: 10px;
  background: var(--bg-primary);
  padding: 0 5px;
  border-radius: 8px;
  color: var(--text-muted);
}

.sb-list {
  flex: 1;
  overflow: auto;
  padding: 4px 0 12px;
}

/* Project group header */
.sb-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 4px;
  cursor: default;
  color: var(--text-secondary);
}
.sb-group-head .chev {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.sb-group-head.open .chev { transform: rotate(90deg); }
.sb-group-head .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.sb-group-head .count {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.sb-group-head .running-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
.sb-group-head .path {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 130px;
}

/* Session row */
.sb-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px 6px 24px;
  cursor: default;
  border-left: 2px solid transparent;
  position: relative;
}
.sb-row:hover { background: var(--bg-hover); }
.sb-row.active {
  background: var(--bg-hover);
  border-left-color: var(--accent);
}
.sb-row .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  margin-top: 6px;
  flex-shrink: 0;
}
.sb-row .dot.active { background: var(--success); animation: pulse-dot 2s ease-in-out infinite; }
.sb-row .dot.waiting { background: var(--warning); animation: pulse-dot 2s ease-in-out infinite; }
.sb-row .dot.error { background: var(--error); }
.sb-row .dot.done { background: var(--text-secondary); }
.sb-row .dot.paused { background: var(--info); }
.sb-row .meta { flex: 1; min-width: 0; }
.sb-row .top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-primary);
}
.sb-row .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.sb-row .role-pill {
  background: rgba(96, 165, 250, 0.15);
  color: var(--info);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.sb-row .role-pill.porter { background: rgba(232,138,58,0.15); color: var(--accent); }
.sb-row .role-pill.analyst { background: rgba(251,191,36,0.15); color: var(--warning); }
.sb-row .role-pill.backend { background: rgba(74,222,128,0.15); color: var(--success); }
.sb-row .role-pill.frontend { background: rgba(96,165,250,0.15); color: var(--info); }
.sb-row .sub {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.sb-row .sub .ws-link {
  color: var(--accent);
  background: var(--accent-glow);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sb-row .sub .auto {
  color: var(--accent);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Workspace pane (Workspaces tab) */
.sb-ws-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  cursor: default;
}
.sb-ws-row:hover { background: var(--bg-hover); }
.sb-ws-row.active { background: var(--bg-hover); border-left: 2px solid var(--accent); padding-left: 10px; }
.sb-ws-row .chev { color: var(--text-muted); width: 14px; }
.sb-ws-row .icon {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--accent-glow);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sb-ws-row .name { font-size: 13px; font-weight: 500; flex: 1; }
.sb-ws-row .count { font-size: 10.5px; color: var(--text-muted); font-family: var(--mono); }
.sb-ws-row .running-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
.sb-ws-children {
  border-left: 1px solid var(--border);
  margin-left: 23px;
  padding-left: 0;
}

/* =====================================================================
   ====   AgentChat surface   ==========================================
   ===================================================================== */

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-primary);
}

.chat-stream {
  flex: 1;
  overflow: auto;
  padding: 24px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* User bubble — bg-accent/15 right-aligned */
.b-user {
  align-self: flex-end;
  max-width: 78%;
  background: rgba(232, 138, 58, 0.15);
  border: 1px solid rgba(232, 138, 58, 0.2);
  border-radius: 14px;
  border-bottom-right-radius: 6px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
}

/* Assistant bubble — bg-secondary border-border */
.b-assistant {
  align-self: flex-start;
  max-width: 85%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 6px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.b-assistant strong { color: var(--text-primary); font-weight: 600; }
.b-assistant code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}
.b-assistant ul { padding-left: 18px; margin: 6px 0 0; }
.b-assistant li { margin: 2px 0; }

.thinking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.thinking .pulse {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

/* Tool cards — left aligned, max-w 85%, varied accent border */
.tool {
  align-self: flex-start;
  width: 100%;
  max-width: 85%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  font-size: 12px;
}

.tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: default;
}
.tool-row:hover { background: var(--bg-hover); }

.tool-row .ic {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tool-row .ic.read    { background: rgba(96,165,250,0.13); color: var(--info); }
.tool-row .ic.write   { background: rgba(74,222,128,0.13); color: var(--success); }
.tool-row .ic.edit    { background: rgba(232,138,58,0.13); color: var(--accent); }
.tool-row .ic.bash    { background: rgba(251,191,36,0.13); color: var(--warning); }
.tool-row .ic.search  { background: rgba(96,165,250,0.13); color: var(--info); }
.tool-row .ic.task    { background: rgba(232,138,58,0.13); color: var(--accent); }
.tool-row .ic.plan    { background: rgba(232,138,58,0.13); color: var(--accent); }

.tool-row .title { font-size: 12.5px; color: var(--text-primary); font-weight: 500; }
.tool-row .title .file { font-family: var(--mono); }
.tool-row .title .args { color: var(--text-muted); font-family: var(--mono); margin-left: 4px; }
.tool-row .badge-new {
  background: rgba(74,222,128,0.15);
  color: var(--success);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
.tool-row .meta { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.tool-row .chev { color: var(--text-muted); }

.tool-body { border-top: 1px solid var(--border); }

/* Inline diff inside tool-body (Edit) */
.idiff {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 4px 0;
}
.idiff .hunk-h {
  font-size: 10.5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  padding: 3px 12px;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.idiff .ln {
  display: grid;
  grid-template-columns: 32px 32px 16px 1fr;
  align-items: center;
  padding: 1px 12px 1px 0;
  min-height: 18px;
}
.idiff .ln .gut1, .idiff .ln .gut2 { text-align: right; padding-right: 6px; color: var(--text-muted); font-size: 10.5px; user-select: none; }
.idiff .ln .pre { font-weight: 700; text-align: center; }
.idiff .ln .src { white-space: pre; color: var(--text-secondary); }
.idiff .ln.add { background: var(--diff-add); }
.idiff .ln.add .pre { color: var(--success); }
.idiff .ln.add .src { color: var(--diff-add-text); }
.idiff .ln.del { background: var(--diff-del); }
.idiff .ln.del .pre { color: var(--error); }
.idiff .ln.del .src { color: var(--diff-del-text); }

/* Bash body */
.bash-body {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 10px 14px;
  color: var(--text-secondary);
  background: rgba(0,0,0,0.25);
  white-space: pre;
  overflow-x: auto;
}
.bash-body .cmd::before { content: '$ '; color: var(--accent); }

/* Plan body */
.plan-body {
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.plan-body strong { color: var(--text-primary); }
.plan-body ol { padding-left: 18px; margin: 6px 0 0; }
.plan-body code {
  font-family: var(--mono); color: var(--accent);
  background: rgba(255,255,255,0.04);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}

/* TodoWrite body */
.todo-body { padding: 10px 14px; font-size: 12.5px; }
.todo-body .item {
  display: flex; gap: 8px; align-items: center;
  padding: 3px 0; color: var(--text-secondary);
}
.todo-body .item .mk { width: 12px; text-align: center; flex-shrink: 0; }
.todo-body .item.done { color: var(--text-muted); text-decoration: line-through; }
.todo-body .item.done .mk { color: var(--success); }
.todo-body .item.now { color: var(--text-primary); font-weight: 500; }
.todo-body .item.now .mk { color: var(--accent); }

/* Inline permission card (in chat stream) — bg-warning/5 + accent border */
.perm-inline {
  align-self: flex-start;
  width: 100%;
  max-width: 85%;
  border: 1px solid rgba(232, 138, 58, 0.4);
  background: linear-gradient(180deg, rgba(232, 138, 58, 0.06) 0%, rgba(232, 138, 58, 0.02) 100%);
  border-radius: 12px;
  overflow: hidden;
}
.perm-inline .head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(232, 138, 58, 0.18);
}
.perm-inline .head .ic {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--accent-glow);
  color: var(--accent);
  display: grid; place-items: center;
}
.perm-inline .head h4 { margin: 0; font-size: 12.5px; font-weight: 600; }
.perm-inline .head .sub { font-size: 11px; color: var(--text-muted); }
.perm-inline .body {
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.perm-inline .body .cmd { color: var(--text-primary); }
.perm-inline .actions {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
}
.perm-inline .actions button {
  font: inherit;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.perm-inline .actions .deny { color: var(--error); border-color: rgba(239,68,68,0.3); }
.perm-inline .actions .allow {
  background: var(--accent); color: #1a0c00; border-color: var(--accent);
  flex: 1;
}
.perm-inline .actions .always {
  border-color: rgba(232,138,58,0.4);
  color: var(--accent);
}
.perm-inline .kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.18);
  padding: 0 4px;
  border-radius: 3px;
  margin-left: 6px;
}
.perm-inline .actions .deny .kbd, .perm-inline .actions .always .kbd {
  background: var(--bg-primary);
  color: var(--text-muted);
}

/* ==== Composer (input bar) ==== */
.composer {
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 12px 18px 14px;
  flex-shrink: 0;
}

.composer-input {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.composer-input textarea, .composer-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  resize: none;
  line-height: 1.4;
  min-height: 22px;
  max-height: 200px;
}
.composer-input .send {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--accent);
  color: #1a0c00;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.composer-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.composer-meta .pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.composer-meta .pill .kbd {
  font-family: var(--mono); font-size: 9.5px;
  background: var(--bg-primary);
  padding: 0 4px;
  border-radius: 3px;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Slash command popover */
.slash-pop {
  position: absolute;
  bottom: 100%; left: 18px; right: 18px;
  margin-bottom: 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  box-shadow: 0 -8px 30px -10px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 5;
}
.slash-pop-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  display: flex; gap: 10px; align-items: center;
}
.slash-pop-head .icon { color: var(--accent); }
.slash-pop-head .hint {
  margin-left: auto;
  font-size: 10.5px;
  font-family: var(--mono);
}
.slash-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 12px;
  padding: 7px 12px;
  align-items: center;
  font-size: 12px;
}
.slash-row.sel { background: var(--accent-soft); }
.slash-row .name { font-family: var(--mono); color: var(--accent); }
.slash-row .desc { color: var(--text-secondary); }
.slash-row .scope {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(74,222,128,0.13);
  color: var(--success);
}

/* =====================================================================
   ====   WorkspaceBoard (vertical: header → agents row → settings)  ===
   ===================================================================== */

.ws-board {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-height: 0;
}

.ws-board-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  background: var(--bg-primary);
}
.ws-board-head .icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--accent-glow);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ws-board-head .name {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0;
}
.ws-board-head .desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.ws-board-head .root {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.ws-section {
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.ws-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ws-section-head .label { font-size: 11px; color: var(--text-muted); }
.ws-section-head .view-toggle {
  margin-left: auto;
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.ws-section-head .view-toggle button {
  font: inherit; font-size: 11px;
  padding: 3px 9px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.ws-section-head .view-toggle .active { background: var(--bg-hover); color: var(--text-primary); }
.ws-section-head .add {
  font: inherit; font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}

/* Agent strip (horizontal scroll of agent cards) */
.agent-strip {
  display: flex;
  gap: 12px;
  padding: 4px 24px 18px;
  overflow-x: auto;
}

.agent-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 14px;
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.agent-card.active { border-color: rgba(74,222,128,0.4); box-shadow: 0 0 0 1px rgba(74,222,128,0.1); }
.agent-card.waiting { border-color: rgba(251,191,36,0.4); }

.agent-card .head {
  display: flex; align-items: center; gap: 10px;
}
.agent-card .av {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.agent-card .av.frontend { background: rgba(96,165,250,0.18); color: var(--info); }
.agent-card .av.backend  { background: rgba(74,222,128,0.18); color: var(--success); }
.agent-card .av.analyst  { background: rgba(251,191,36,0.18); color: var(--warning); }
.agent-card .av.porter   { background: rgba(232,138,58,0.18); color: var(--accent); }
.agent-card .name { font-size: 13.5px; font-weight: 600; flex: 1; }
.agent-card .preset {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agent-card .status-pill {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.agent-card .status-pill.active   { background: rgba(74,222,128,0.15); color: var(--success); }
.agent-card .status-pill.waiting  { background: rgba(251,191,36,0.15); color: var(--warning); }
.agent-card .status-pill.idle     { background: var(--bg-hover); color: var(--text-muted); }
.agent-card .folder {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-muted);
  display: flex; gap: 6px; align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agent-card .folder .ro {
  font-size: 9.5px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 3px;
  color: var(--text-secondary);
  font-family: var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.agent-card .quote {
  background: var(--bg-tertiary);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.agent-card .quote .lab {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.agent-card .actions {
  display: flex; gap: 6px; margin-top: 4px;
}
.agent-card .actions button {
  font: inherit; font-size: 11px;
  padding: 5px 9px;
  border-radius: 5px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 5px;
}
.agent-card .actions .open {
  background: var(--accent); color: #1a0c00; border-color: var(--accent);
}

/* Add-agent placeholder card */
.agent-card.add-card {
  background: transparent;
  border-style: dashed;
  display: grid; place-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  cursor: default;
  height: auto;
}
.agent-card.add-card:hover { border-color: var(--accent); color: var(--accent); }

/* Settings stack rows */
.ws-settings {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
}

.ws-settings .row {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
}
.ws-settings .row .h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-primary);
}
.ws-settings .row .h .lab {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.ws-settings .row .h .add {
  margin-left: auto;
  font: inherit; font-size: 11px;
  padding: 4px 9px;
  border-radius: 5px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* Shared structure list */
.shared-list { display: flex; flex-direction: column; gap: 4px; }
.shared-list .item {
  display: grid;
  grid-template-columns: 22px 130px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 12px;
}
.shared-list .item .ic { color: var(--accent); }
.shared-list .item .pat { font-family: var(--mono); font-size: 11.5px; color: var(--text-primary); }
.shared-list .item .desc { color: var(--text-secondary); font-size: 11.5px; }
.shared-list .item .kind {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Triggers list */
.trig-list { display: flex; flex-direction: column; gap: 6px; }
.trig-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 12px;
}
.trig-row .toggle {
  width: 26px; height: 14px;
  background: var(--bg-tertiary);
  border-radius: 7px;
  position: relative;
}
.trig-row .toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.15s ease;
}
.trig-row.on .toggle { background: var(--accent); }
.trig-row.on .toggle::after { left: 14px; background: #1a0c00; }
.trig-row .summary { font-size: 12px; color: var(--text-secondary); }
.trig-row .summary .when { color: var(--text-primary); font-weight: 500; }
.trig-row .summary .then { color: var(--accent); }
.trig-row .meta {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--text-muted);
}

/* Folders list */
.fold-list { display: flex; flex-direction: column; gap: 4px; }
.fold-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 12px;
}
.fold-row .ic { color: var(--text-muted); }
.fold-row .label { color: var(--text-primary); font-weight: 500; }
.fold-row .path { font-family: var(--mono); color: var(--text-muted); font-size: 11px; }
.fold-row .ro {
  margin-left: auto;
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 600; padding: 1px 5px;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 3px;
}

/* Activity drawer (bottom) */
.activity {
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  height: 180px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.activity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.activity-head .label {
  display: inline-flex; gap: 6px; align-items: center;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10.5px; color: var(--text-muted); font-weight: 600;
}
.activity-head .filter {
  display: inline-flex; gap: 5px; align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  border-radius: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}
.activity-head .filter .num {
  background: var(--bg-primary);
  padding: 0 5px;
  font-size: 10px;
  border-radius: 8px;
  color: var(--text-muted);
}

.activity-list {
  flex: 1;
  overflow: auto;
  padding: 4px 16px 8px;
  font-size: 12px;
}
.act-row {
  display: grid;
  grid-template-columns: 70px 76px 110px 1fr auto;
  gap: 12px;
  padding: 4px 0;
  align-items: center;
  color: var(--text-secondary);
}
.act-row .when { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.act-row .who { color: var(--text-primary); font-weight: 500; font-size: 12px; }
.act-row .what { color: var(--text-secondary); font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-row .out {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px;
}
.act-row .out.fired   { background: var(--accent-glow); color: var(--accent); }
.act-row .out.observed { background: rgba(96,165,250,0.13); color: var(--info); }
.act-row .out.skipped { background: var(--bg-tertiary); color: var(--text-muted); }
.act-row .arrow { color: var(--text-muted); font-family: var(--mono); }

/* =====================================================================
   ====   FileViewer (slide-in panel — used in diff & conflict shots) ==
   ===================================================================== */

.fv {
  width: 640px;
  max-width: 100%;
  border-left: 1px solid var(--border);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-shrink: 0;
}

.fv-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.fv-head .close {
  width: 24px; height: 24px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--text-muted);
}
.fv-head .titlewrap { min-width: 0; flex: 1; }
.fv-head .name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.fv-head .path { font-size: 10.5px; color: var(--text-muted); font-family: var(--mono); }

.fv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.fv-toolbar .seg {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.fv-toolbar .seg button {
  font: inherit; font-size: 11.5px;
  padding: 3px 11px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
}
.fv-toolbar .seg .active { background: var(--bg-hover); color: var(--text-primary); }

.fv-toolbar .ref {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: var(--mono);
}

.fv-toolbar .spacer { flex: 1; }

.fv-toolbar .ide-btn {
  font: inherit; font-size: 11.5px;
  padding: 4px 10px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* Diff split (used inside fv body) */
.diff-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-primary);
  min-height: 0;
  overflow: hidden;
}

.diff-pane {
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 11.5px;
  overflow: hidden;
  border-right: 1px solid var(--border);
}
.diff-pane:last-child { border-right: 0; }

.diff-pane-h {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--sans);
  background: var(--bg-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.diff-pane-h .ref { color: var(--text-secondary); font-weight: 500; font-size: 10.5px; }

.diff-pane-body {
  flex: 1;
  overflow: auto;
  padding: 6px 0;
}

.dl {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: 18px;
  padding: 0 12px 0 0;
}
.dl .ln { text-align: right; color: var(--text-muted); padding-right: 8px; font-size: 10.5px; user-select: none; }
.dl pre { margin: 0; font: inherit; color: var(--text-secondary); white-space: pre; }
.dl.add  { background: var(--diff-add); }
.dl.add .ln { color: var(--success); }
.dl.add pre { color: var(--diff-add-text); }
.dl.del  { background: var(--diff-del); }
.dl.del .ln { color: var(--error); }
.dl.del pre { color: var(--diff-del-text); }
.dl.placeholder { background: rgba(255,255,255,0.015); }

/* Hunk actions panel (drawer at bottom of FileViewer in diff mode) */
.hunk-panel {
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  font-size: 12px;
  flex-shrink: 0;
}
.hunk-panel .h {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
.hunk-panel .h .col {
  flex: 1;
}
.hunk-panel .h .col + .col { border-left: 1px solid var(--border); padding-left: 14px; }
.hunk-panel .lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.hunk-panel .col-list {
  padding: 6px 14px 10px;
  border-right: 1px solid var(--border);
  max-height: 110px;
  overflow: auto;
}
.hunk-panel .col-list:last-child { border-right: 0; }
.hunk-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border);
}
.hunk-row:last-child { border-bottom: 0; }
.hunk-row .at { color: var(--text-muted); }
.hunk-row .summary { color: var(--text-secondary); margin-left: 8px; font-family: var(--sans); }
.hunk-row .act {
  font: inherit; font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(232,138,58,0.4);
  color: var(--accent);
  background: var(--accent-soft);
  font-family: var(--sans);
}
.hunk-row .act.unstage { border-color: var(--border-bright); color: var(--text-secondary); background: var(--bg-tertiary); }

/* =====================================================================
   ====   Conflict resolver  ===========================================
   ===================================================================== */

.conflict-banner {
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(251, 191, 36, 0.25);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  flex-shrink: 0;
}
.conflict-banner .ic {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: rgba(251,191,36,0.15);
  color: var(--warning);
  display: grid; place-items: center;
}
.conflict-banner .progress { color: var(--text-muted); font-size: 11px; margin-left: auto; }
.conflict-banner .mark-resolved {
  font: inherit; font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--success);
  color: #08140a;
  border: 0;
  font-weight: 500;
}

.merge-banner {
  background: rgba(251, 191, 36, 0.06);
  border-bottom: 1px solid rgba(251, 191, 36, 0.25);
  padding: 11px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  flex-shrink: 0;
}
.merge-banner .ic {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(251,191,36,0.15);
  color: var(--warning);
  display: grid; place-items: center;
}
.merge-banner .progress { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.merge-banner button {
  font: inherit; font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.merge-banner .continue {
  background: var(--success); color: #08140a; border-color: var(--success);
}

.conflict-list {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-primary);
}

.cf-file {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 4px;
  font-family: var(--mono);
  font-size: 12px;
}
.cf-file .uu { color: var(--error); font-weight: 700; }
.cf-file .name { color: var(--text-primary); }
.cf-file .meta { margin-left: auto; color: var(--text-muted); font-size: 11px; font-family: var(--sans); }

.chunk {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.chunk.unresolved { border-color: rgba(239,68,68,0.3); }
.chunk-h {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.chunk-h .num { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.chunk-h .badge {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px;
}
.chunk-h .badge.unresolved { background: rgba(239,68,68,0.13); color: var(--error); }
.chunk-h .badge.ours { background: rgba(96,165,250,0.13); color: var(--info); }
.chunk-h .badge.theirs { background: rgba(74,222,128,0.13); color: var(--success); }
.chunk-h .badge.both { background: rgba(232,138,58,0.13); color: var(--accent); }

.chunk-h .actions { margin-left: auto; display: flex; gap: 4px; }
.chunk-h .actions button {
  font: inherit; font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.chunk-h .actions button.active {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}

.chunk-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg-primary);
}
.chunk-body .pane {
  padding: 8px 12px;
  border-right: 1px solid var(--border);
  white-space: pre;
  color: var(--text-secondary);
  min-height: 60px;
  overflow: hidden;
}
.chunk-body .pane.ours { background: rgba(96,165,250,0.04); }
.chunk-body .pane.theirs { background: rgba(74,222,128,0.04); border-right: 0; }
.chunk-body .pane .label {
  display: block;
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* =====================================================================
   ====   Canvas (React Flow look-alike)  ==============================
   ===================================================================== */

.canvas {
  flex: 1;
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--bg-primary);
  position: relative;
  overflow: hidden;
}

.rf-controls {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  z-index: 4;
}
.rf-controls button {
  font: inherit;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--border);
}
.rf-controls button:last-child { border-bottom: 0; }
.rf-controls button:hover { background: var(--bg-hover); color: var(--text-primary); }

.rf-minimap {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 160px; height: 100px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  z-index: 4;
}
.rf-minimap-node {
  position: absolute;
  width: 16px; height: 9px;
  background: var(--accent);
  opacity: 0.7;
  border-radius: 2px;
}
.rf-minimap .vp {
  position: absolute;
  border: 1px solid var(--accent);
  border-radius: 3px;
  inset: 8px 8px 8px 8px;
  pointer-events: none;
}

/* Edges */
.rf-edge {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.rf-edge svg { width: 100%; height: 100%; overflow: visible; }
.rf-edge path {
  fill: none;
  stroke: rgba(232, 138, 58, 0.18);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.rf-edge.enabled path {
  stroke: rgba(232, 138, 58, 0.6);
  stroke-width: 1.5;
  stroke-dasharray: none;
}
.rf-edge.firing path {
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-dasharray: 6 4;
  animation: dash 1.4s linear infinite;
  filter: drop-shadow(0 0 5px var(--accent-glow));
}
@keyframes dash {
  to { stroke-dashoffset: -20; }
}

/* Agent node (240×100) */
.rf-node {
  position: absolute;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 10px 12px;
  width: 240px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rf-node.active { border-color: rgba(74,222,128,0.4); }
.rf-node.waiting { border-color: rgba(251,191,36,0.4); }

.rf-node .head {
  display: flex; align-items: center; gap: 8px;
}
.rf-node .av {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}
.rf-node .av.frontend { background: rgba(96,165,250,0.18); color: var(--info); }
.rf-node .av.backend  { background: rgba(74,222,128,0.18); color: var(--success); }
.rf-node .av.analyst  { background: rgba(251,191,36,0.18); color: var(--warning); }
.rf-node .av.porter   { background: rgba(232,138,58,0.18); color: var(--accent); }
.rf-node .name { font-size: 12.5px; font-weight: 600; flex: 1; }
.rf-node .preset {
  font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500;
}
.rf-node .pill {
  font-size: 9.5px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.rf-node .pill.active { background: rgba(74,222,128,0.15); color: var(--success); }
.rf-node .pill.idle { background: var(--bg-hover); color: var(--text-muted); }
.rf-node .pill.waiting { background: rgba(251,191,36,0.15); color: var(--warning); }
.rf-node .folder {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-muted);
  display: flex; gap: 5px; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* System node */
.rf-node.system {
  background: var(--bg-tertiary);
  border-style: dashed;
  border-color: rgba(232, 138, 58, 0.5);
  width: 200px;
  padding: 8px 10px;
}
.rf-node.system .head { color: var(--accent); font-size: 11.5px; gap: 6px; }
.rf-node.system .meta { font-family: var(--mono); font-size: 10px; color: var(--text-secondary); }

/* Handles */
.rf-handle {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--accent);
  border: 1.5px solid var(--bg-secondary);
  border-radius: 50%;
  z-index: 5;
}
.rf-handle.top { top: -5px; left: 50%; transform: translateX(-50%); }
.rf-handle.bottom { bottom: -5px; left: 50%; transform: translateX(-50%); }

/* =====================================================================
   ====   Workspace Git Panel  =========================================
   ===================================================================== */

.git-panel {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--bg-primary);
  min-height: 320px;
}

.git-list {
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow: auto;
}

.git-strip {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: var(--bg-secondary);
  flex-wrap: wrap;
}
.git-strip .branch {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex; gap: 5px; align-items: center;
}
.git-strip .badge {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--text-secondary);
}
.git-strip .badge.dirty { color: var(--warning); border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.05); }
.git-strip .badge.clean { color: var(--success); border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.05); }

.git-section {
  padding: 8px 14px 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.git-section .num {
  font-family: var(--mono);
  color: var(--text-muted);
  margin-left: 4px;
}

.git-file {
  display: flex;
  gap: 10px;
  padding: 6px 14px;
  align-items: center;
  font-size: 12px;
  border-left: 2px solid transparent;
  cursor: default;
}
.git-file:hover { background: var(--bg-hover); }
.git-file.selected { background: var(--bg-hover); border-left-color: var(--accent); }
.git-file .status {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.git-file .status.M  { color: var(--warning); }
.git-file .status.A  { color: var(--success); }
.git-file .status.D  { color: var(--error); }
.git-file .status.U  { color: var(--error); }
.git-file .status.R  { color: var(--info); }
.git-file .status.staged { color: var(--success); }
.git-file .name {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.git-file .name .dir { color: var(--text-muted); }
.git-file .lines { font-size: 10.5px; font-family: var(--mono); flex-shrink: 0; }
.git-file .lines.add { color: var(--success); }
.git-file .lines.del { color: var(--error); }
.git-file .lines.mut { color: var(--text-muted); }

.git-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.git-toolbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.git-toolbar button {
  font: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border-bright);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.git-toolbar button.primary {
  background: var(--accent);
  color: #1a0c00;
  border-color: var(--accent);
}
.git-toolbar button .num {
  background: rgba(0,0,0,0.25);
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10.5px;
}
.git-toolbar button:not(.primary) .num { background: var(--bg-primary); color: var(--text-secondary); }

.commit-composer {
  padding: 16px 18px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.commit-composer .lab {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.commit-composer .subject {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.commit-composer .body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 8px;
  white-space: pre-line;
}
.commit-composer .foot {
  display: flex; gap: 14px; align-items: center;
  font-size: 11px; color: var(--text-muted);
  margin-top: 12px;
}
.commit-composer .kbd {
  font-family: var(--mono);
  background: var(--bg-primary);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 10.5px;
}

.commit-list {
  padding: 8px 14px;
  font-size: 12px;
  flex: 1;
  overflow: auto;
}
.commit-list-h {
  padding: 4px 0 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.commit-row {
  display: grid;
  grid-template-columns: 70px 1fr 60px;
  gap: 12px;
  padding: 5px 0;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
}
.commit-row .sha {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 11px;
}
.commit-row .subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.commit-row .when { color: var(--text-muted); font-size: 11px; text-align: right; }

/* =====================================================================
   ====   Phone (mobile companion)  =====================================
   ===================================================================== */

.phone-frame {
  width: 280px;
  height: 560px;
  background: var(--bg-tertiary);
  border-radius: 36px;
  border: 8px solid #1a1a1a;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7), 0 0 0 1px var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 22px;
  background: #000;
  border-radius: 14px;
  z-index: 10;
}
.phone-head {
  height: 50px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  padding: 0 18px 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.phone-body {
  flex: 1;
  background: var(--bg-primary);
  padding: 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phone-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px 12px;
}
.phone-card .h {
  display: flex; gap: 8px; align-items: center;
  font-size: 11.5px; margin-bottom: 4px;
}
.phone-card .h .dot { width: 6px; height: 6px; border-radius: 50%; }
.phone-card .h .name { font-weight: 600; }
.phone-card .h .when { margin-left: auto; color: var(--text-muted); font-size: 10.5px; }
.phone-card .preview { color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; }
.phone-card .preview code {
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  background: rgba(255,255,255,0.04); padding: 0 4px; border-radius: 3px;
}
.phone-card .badge {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =====================================================================
   ====   Tier (pricing) + CTA + footer  ================================
   ===================================================================== */

.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tier {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 32px;
  position: relative;
}
.tier.premium {
  border-color: rgba(232, 138, 58, 0.4);
  background:
    linear-gradient(180deg, rgba(232, 138, 58, 0.04) 0%, transparent 50%),
    var(--bg-secondary);
}
.tier h3 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.tier .price { font-size: 13px; color: var(--text-muted); margin: 0 0 24px; }
.tier ul { list-style: none; padding: 0; margin: 0; }
.tier li {
  padding: 7px 0 7px 26px;
  position: relative;
  color: var(--text-secondary);
  font-size: 13.5px;
}
.tier li::before {
  content: '✓';
  color: var(--accent);
  position: absolute;
  left: 0; top: 7px;
  font-weight: 700;
}
.tier-tag {
  position: absolute;
  top: 20px; right: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 4px 9px;
  border-radius: 4px;
}

.cta {
  padding: 96px 0;
  text-align: center;
  background:
    radial-gradient(circle at center, var(--accent-glow) 0%, transparent 60%),
    var(--bg-primary);
  border-top: 1px solid var(--border);
}
.cta h2 {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.cta p { color: var(--text-secondary); font-size: 17px; max-width: 560px; margin: 0 auto 32px; }

footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 32px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.foot-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.foot-oglut-logo {
  height: 18px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.foot-oglut-logo:hover { opacity: 0.85; }
.foot-brand-text { color: var(--text-muted); font-size: 12px; }
.foot-brand-text a { color: var(--text-secondary); }
.foot-brand-text a:hover { color: var(--text-primary); }
.foot-links {
  display: flex; gap: 24px; justify-content: center; margin-bottom: 14px;
  flex-wrap: wrap;
}
.foot-links a { color: var(--text-secondary); font-size: 12px; }
.foot-tech { color: var(--text-muted); font-size: 12px; }

/* ==== Cookie consent banner ==== */
#cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-bright);
}
.cookie-banner-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1;
  min-width: 260px;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}
.cookie-banner-text a { color: var(--accent); }
.cookie-banner-text a:hover { color: var(--text-primary); }
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-banner-actions .btn {
  font-size: 12px;
  padding: 7px 14px;
}

/* ==== Legal pages (privacy-policy / cookie-policy) ==== */
.legal-body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}
.legal-body h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.legal-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 28px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
.legal-body p { margin: 0 0 16px; }
.legal-body ul { margin: 0 0 16px; padding-left: 20px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--accent); }
.legal-body a:hover { color: var(--text-primary); }
.legal-body code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-primary);
}
.cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 13px;
}
.cookie-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cookie-table td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
}

/* =====================================================================
   ====   Standalone bare mockup viewport  =============================
   ===================================================================== */

body.bare {
  background: var(--bg-primary);
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}
body.bare .mock {
  width: min(1280px, 100%);
  height: min(820px, 92vh);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 60px 120px -40px rgba(0,0,0,0.8);
}

/* ==== Responsive ==== */
@media (max-width: 880px) {
  .hero h1 { font-size: 42px; }
  .feature-grid { grid-template-columns: 1fr; }
  .showcase, .showcase.reverse { grid-template-columns: 1fr; gap: 24px; margin: 56px 0; }
  .showcase.reverse .showcase-text { order: 0; }
  .nav { display: none; }
  .tier-grid { grid-template-columns: 1fr; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .section { padding: 56px 0; }
}