@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');
/* ============================================================
   淘龙 — Design Tokens
   ============================================================
   所有 token 通过 CSS Custom Properties 实现，受以下三层控制：
     1. :root             — 浅色主题（默认）
     2. [data-theme="dark"] — 显式深色模式（用户点击切换）
     3. @media (prefers-color-scheme: dark) — OS 系统级跟随

   Token 分类：
     § surface     背景色 / 边框 / 分隔
     § text        文字色（4 级：strong / main / muted / faint）
     § accent      品牌强调色（主色 + 深浅变体 + hover）
     § semantic    语义色（green / blue / purple / red / amber）
     § shadow      阴影（xs / sm / md / lg）
     § radius      圆角（sm / default / lg / pill）
     § font        字体族（serif / sans / mono）
   ============================================================ */

/* ── § surface ─────────────────────────────────────────── */
:root {
  --bg: #faf9f7;
  --bg-app: #faf9f7;
  --bg-panel: #ffffff;
  --bg-subtle: #f4f2ed;
  --bg-muted: #ece9e2;
  --bg-elevated: #ffffff;
  --border: #ebe8e1;
  --border-strong: #d8d4cb;
  --border-soft: #f1eee7;

  /* ── § text ─────────────────────────────────────────────── */
  --text: #1a1916;
  --text-strong: #0d0c0a;
  --text-muted: #74716b;
  --text-soft: #989590;
  --text-faint: #b3b0a8;

  /* ── § accent ───────────────────────────────────────────── */
  /* Orange brand color. */
  --accent: #ff6107;
  --accent-strong: #e55706;
  --accent-soft: #ffe4d6;
  --accent-tint: #fff2eb;
  --accent-hover: #e55706;

  /* ── § semantic ──────────────────────────────────────────── */
  /* Semantic accent tints used by tool / status pills. */
  --green: #1f7a3a;
  --green-bg: #e8f7ee;
  --green-border: #c6ead2;
  --blue: #2348b8;
  --blue-bg: #e8efff;
  --blue-border: #c8d6ff;
  --purple: #6c3aa6;
  --purple-bg: #f3ecf9;
  --purple-border: #e4d4f1;
  --red: #9c2a25;
  --red-bg: #fdecea;
  --red-border: #f5c6c2;
  --amber: #b26200;
  --amber-bg: #fff3e0;

  /* ── § shadow ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 0 rgba(28, 27, 26, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.05), 0 1px 3px rgba(28, 27, 26, 0.04);
  --shadow-md: 0 6px 24px rgba(28, 27, 26, 0.07), 0 2px 6px rgba(28, 27, 26, 0.04);
  --shadow-lg: 0 24px 60px rgba(28, 27, 26, 0.16), 0 8px 16px rgba(28, 27, 26, 0.07);

  /* ── § radius ────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ── § font ─────────────────────────────────────────────── */
  --serif: 'Source Serif Pro', 'Source Serif 4', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── § dark surface / text / accent / semantic / shadow ── */
/* Dark theme variables — shared between explicit [data-theme="dark"] and the
   OS-level prefers-color-scheme media query (system mode = no data-theme attr). */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1917;
  --bg-app: #1a1917;
  --bg-panel: #222120;
  --bg-subtle: #272523;
  --bg-muted: #2e2c29;
  --bg-elevated: #2a2825;
  --border: #333128;
  --border-strong: #46433c;
  --border-soft: #2a2825;

  --text: #e8e4dc;
  --text-strong: #f2ede4;
  --text-muted: #9a9690;
  --text-soft: #6e6b65;
  --text-faint: #4e4b46;

  --accent: #ff7b2e;
  --accent-strong: #ff8f4a;
  --accent-soft: #3d1a08;
  --accent-tint: #2e1206;
  --accent-hover: #ff8f4a;

  --green: #4caf72;
  --green-bg: #0f2a18;
  --green-border: #1a4028;
  --blue: #6b8fe8;
  --blue-bg: #0f1a38;
  --blue-border: #1a2c58;
  --purple: #a87dd4;
  --purple-bg: #1e1030;
  --purple-border: #321a50;
  --red: #e06b65;
  --red-bg: #2a0e0c;
  --red-border: #451714;
  --amber: #e09a40;
  --amber-bg: #2a1a04;

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* ── § system dark (OS preference) ────────────────────── */
/* System mode: follow OS preference when no explicit data-theme is set. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #1a1917;
    --bg-app: #1a1917;
    --bg-panel: #222120;
    --bg-subtle: #272523;
    --bg-muted: #2e2c29;
    --bg-elevated: #2a2825;
    --border: #333128;
    --border-strong: #46433c;
    --border-soft: #2a2825;

    --text: #e8e4dc;
    --text-strong: #f2ede4;
    --text-muted: #9a9690;
    --text-soft: #6e6b65;
    --text-faint: #4e4b46;

    --accent: #ff7b2e;
    --accent-strong: #ff8f4a;
    --accent-soft: #3d1a08;
    --accent-tint: #2e1206;
    --accent-hover: #ff8f4a;

    --green: #4caf72;
    --green-bg: #0f2a18;
    --green-border: #1a4028;
    --blue: #6b8fe8;
    --blue-bg: #0f1a38;
    --blue-border: #1a2c58;
    --purple: #a87dd4;
    --purple-bg: #1e1030;
    --purple-border: #321a50;
    --red: #e06b65;
    --red-bg: #2a0e0c;
    --red-border: #451714;
    --amber: #e09a40;
    --amber-bg: #2a1a04;

    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

html, body, #root { height: 100%; margin: 0; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg-app);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.od-loading-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--text-muted);
  background: var(--bg-app);
  font: 500 13px/1.4 var(--sans);
}

/* -------- Buttons --------------------------------------------------- */
button {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
button:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(180, 90, 59, 0.18) inset, var(--shadow-xs);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
button.primary-ghost {
  background: var(--bg-panel);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
button.primary-ghost:hover:not(:disabled) { background: var(--accent-tint); }

button.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
button.ghost:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }

button.subtle {
  background: var(--bg-subtle);
  border-color: transparent;
  color: var(--text);
}
button.subtle:hover:not(:disabled) { background: var(--bg-muted); }

button.icon-btn { padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* -------- Accessibility ------------------------------------------------ */
/* Screen reader only - visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  transition: top 0.2s;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  top: 0;
  outline: none;
}

/* Focus visible ring for keyboard navigation (supplement button:focus-visible) */
.focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -------- Inputs ---------------------------------------------------- */
input, textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
select { padding-right: 24px; }
textarea { resize: vertical; font-family: inherit; }

code {
  font-family: var(--mono);
  background: var(--bg-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--text);
}

/* -------- App shell ------------------------------------------------- */
.app {
  display: grid;
  /* Three rows: chrome header (auto, fixed at 40px), optional
   * project-actions toolbar (auto — collapses to 0 when hidden),
   * and the chat/workspace split (1fr — fills the remaining
   * viewport). The split gets explicit `grid-row: 3` below so the
   * layout works whether the toolbar is rendered or returns null
   * (workspace-focused mode). */
  grid-template-rows: auto auto 1fr;
  height: 100vh;
  background: var(--bg-app);
}
.app > .split {
  grid-row: 3;
}

.app-chrome-header {
  --app-chrome-traffic-space: 0px;
  display: flex;
  align-items: center;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 4px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 12px;
  flex-shrink: 0;
}
.app-chrome-traffic-space {
  width: var(--app-chrome-traffic-space);
  flex: 0 0 var(--app-chrome-traffic-space);
}
.app-chrome-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}
.app-chrome-mark {
  width: 28px;
  height: 28px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible;
  flex-shrink: 0;
}
.app-chrome-mark .brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.app-chrome-mark .brand-mark-svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--accent);
}
.app-chrome-name {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.app-chrome-back,
.settings-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-chrome-back:hover:not(:disabled),
.settings-icon-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
.theme-toggle-btn {
  font-size: 16px;
  line-height: 1;
}
.login-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.login-btn:hover {
  background: var(--accent);
  color: var(--bg-panel);
}
.avatar-menu .login-btn:hover {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.app-chrome-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.app-chrome-drag {
  min-width: 24px;
  flex: 1 1 auto;
  align-self: stretch;
}
.app-chrome-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app-chrome-file-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.app-chrome-file-actions:not(:empty) + .app-chrome-actions {
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.chrome-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chrome-action:hover:not(:disabled) {
  background: var(--bg-subtle);
}
.chrome-action-secondary {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
}
.chrome-action-secondary:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--text-muted);
}
.chrome-action-primary {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--bg);
}
.chrome-action-primary:hover:not(:disabled) {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.chrome-share-menu .share-menu-popover,
.chrome-present-wrap .present-menu {
  top: calc(100% + 6px);
  right: 0;
}
.zoom-menu { position: relative; display: inline-block; }
.zoom-menu .zoom-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.zoom-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 110px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.zoom-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.zoom-menu-item:hover { background: var(--bg-subtle); }
.zoom-menu-item.active { color: var(--accent-strong); font-weight: 600; }
@media (max-width: 880px) {
  .chrome-action-secondary span { display: none; }
  .chrome-action-secondary { padding: 0 10px; }
}
@media (max-width: 720px) {
  .app-chrome-content { display: none; }
}
.viewer.is-tab-present .viewer-toolbar,
.viewer.is-tab-present .live-artifact-refresh-notice {
  display: none;
}
.viewer.is-tab-present .viewer-body {
  inset: 0;
}
.viewer .present-exit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
}
.viewer .present-exit-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.live-artifact-preview-frame-host {
  width: 100%;
  height: 100%;
  background: var(--bg);
}
.live-artifact-preview-frame-host:-webkit-full-screen {
  background: var(--bg);
}
.live-artifact-preview-frame-host:fullscreen {
  background: var(--bg);
}
.app-project-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-height: 32px;
  overflow: hidden;
}
.app-project-title .title {
  color: var(--text-strong);
  font-size: 13.5px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-project-title .meta {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: 16px;
  flex-wrap: wrap;
}
.topbar-left { display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; }
.topbar-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.topbar .title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .meta { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }

.topbar .brand-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--accent);
  flex-shrink: 0;
  overflow: visible;
}
.topbar .brand-mark .brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.topbar-left .back-btn {
  align-self: center;
  padding: 4px 10px;
  font-size: 12px;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.topbar-left .back-btn:hover { background: var(--bg-subtle); color: var(--text); border-color: var(--border); }

/* -------- Avatar menu (replaces in-topbar agent picker) ------------- */
.avatar-menu { position: relative; }
.avatar-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.avatar-btn:hover:not(:disabled) {
  box-shadow: 0 0 0 3px rgba(194, 83, 45, 0.18);
  border-color: transparent;
}
.avatar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 83, 45, 0.32);
  border-color: transparent;
}
.avatar-btn:active:not(:disabled) { transform: scale(0.96); }
.avatar-btn-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.avatar-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 280px;
  padding: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.avatar-popover-head {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.avatar-popover-head .who { font-weight: 600; font-size: 13px; }
.avatar-popover-head .where { font-size: 11.5px; color: var(--text-muted); }
.avatar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
}
.avatar-item:hover { background: var(--bg-subtle); }
.avatar-item .avatar-item-icon {
  width: 18px; text-align: center; color: var(--text-muted); flex-shrink: 0;
}
.avatar-item .avatar-item-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.avatar-logout-confirm {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--border-soft);
}
.avatar-logout-confirm-btns {
  display: flex;
  gap: 6px;
}
.avatar-logout-confirm-btns .avatar-item.danger {
  color: var(--red);
}
.avatar-logout-confirm-btns .avatar-item.danger:hover {
  background: var(--red-bg);
}
.avatar-section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  padding: 8px 10px 4px;
}
.avatar-model-section {
  padding: 2px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--border-soft);
  margin-top: 4px;
}
.avatar-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.avatar-select-label {
  flex-shrink: 0;
  min-width: 64px;
}
.avatar-select {
  flex: 1 1;
  min-width: 0;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}
.avatar-select:focus { outline: 2px solid var(--accent-soft, var(--border-strong)); }

/* Environment pill — only used in entry view header now */
.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  max-width: 360px;
  min-width: 0;
  font: inherit;
  color: inherit;
}
.env-pill:hover { background: var(--bg-panel); border-color: var(--border-strong); }
.env-pill-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #d97757 0%, #b85a3b 100%);
  flex-shrink: 0;
}
.env-pill-dot[data-mode="api"] {
  background: linear-gradient(135deg, #1c1b1a 0%, #4b4948 100%);
}
.env-pill-label { font-weight: 500; font-size: 12px; }
.env-pill-meta {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* -------- Split / panes -------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 460px 8px minmax(400px, 1fr);
  min-height: 0;
  min-width: 0;
}
.split.is-resizing-chat {
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.split.is-resizing-chat iframe {
  pointer-events: none;
}
.split.split-focus {
  grid-template-columns: minmax(0, 1fr);
}
.split-chat-slot {
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.split-chat-slot[hidden] {
  display: none;
}
.split-chat-slot > .pane {
  flex: 1 1 auto;
  min-width: 0;
}
.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg-panel);
  overflow: hidden;
}
.split-resize-handle {
  width: 8px;
  min-width: 8px;
  height: 100%;
  cursor: col-resize;
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      var(--border) 3px,
      var(--border) 5px,
      transparent 5px
    );
  transition: background 120ms ease;
  touch-action: none;
}
.split-resize-handle:hover,
.split-resize-handle:focus-visible,
.split.is-resizing-chat .split-resize-handle {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 16%, transparent) 0,
      color-mix(in srgb, var(--accent) 16%, transparent) 3px,
      var(--accent) 3px,
      var(--accent) 5px,
      color-mix(in srgb, var(--accent) 16%, transparent) 5px
    );
}
.split-resize-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* -------- Chat sticky header --------------------------------------- */
.chat-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
  height: 44px;
}
.chat-header-tabs { display: inline-flex; gap: 16px; flex: 1 1; }
.chat-header-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.chat-header-tab:hover { color: var(--text); background: transparent; border-color: transparent; }
.chat-header-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.chat-header-actions { display: inline-flex; gap: 4px; align-items: center; }
.chat-header-actions .icon-only {
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-header-actions .icon-only:hover { background: var(--bg-subtle); color: var(--text); }

.chat-log {
  flex: 1 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* -------- Messages -------------------------------------------------- */
.msg {
  padding: 0;
  background: transparent;
  border: none;
  white-space: normal;
  word-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}
.msg .role {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  text-transform: none;
  color: var(--text-strong);
  margin-bottom: 4px;
  letter-spacing: 0;
  font-weight: 600;
}
.msg-time {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chat-day-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  margin: 4px 0 0;
}
.chat-day-separator::before,
.chat-day-separator::after {
  content: '';
  height: 1px;
  background: var(--border);
  flex: 1 1;
}
.msg.user .role::before { content: ''; }
.msg.user .user-text { white-space: pre-wrap; color: var(--text); }
.msg.assistant .prose { margin-top: 4px; }
.msg .artifact-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 11px;
  background: var(--accent);
  color: white;
  border-radius: 4px;
}
.msg.error {
  border: 1px solid var(--red-border);
  background: var(--red-bg);
  color: var(--red);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

/* -------- Composer -------------------------------------------------- */
.composer {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-panel);
}
.composer-shell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  padding: 8px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.composer-shell:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.composer.drag-active .composer-shell {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.composer textarea {
  min-height: 60px;
  border: none;
  background: transparent;
  padding: 4px 4px;
  resize: vertical;
}
.composer textarea:focus { outline: none; box-shadow: none; }
.composer-input-wrap { position: relative; }
.composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}
.composer-row .icon-btn {
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.composer-row .icon-btn:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.composer-spacer { flex: 1 1; }
.composer-import {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.composer-import:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.composer-research {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.composer-research:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.composer-research.on {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.composer-research-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.composer-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 500;
  padding: 4px 14px;
  font-size: 12.5px;
}
.composer-send:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.composer-send.stop { background: var(--text); border-color: var(--text); color: var(--bg); }
.composer-send.stop:hover { background: var(--text-strong); border-color: var(--text-strong); color: var(--bg); }
.composer-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin: 0 8px;
}

/* -------- Staged attachments -------------------------------------- */
.staged-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 0;
}
.staged-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 220px;
  font-size: 11.5px;
  box-shadow: var(--shadow-xs);
}
.staged-chip img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}
.staged-comment {
  border-radius: var(--radius-pill);
  padding: 4px 6px 4px 10px;
}
.user-attachment.staged-comment {
  max-width: 100%;
  max-height: 200px;
  overflow-y: auto;
}
.staged-comment .staged-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.staged-comment .staged-name strong {
  color: var(--accent-strong);
  font-weight: 650;
  flex: 0 0 auto;
}
.staged-comment .staged-name span {
  white-space: normal;
  word-break: break-word;
}
.staged-comment button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-faint);
  font-size: 14px;
  line-height: 1;
}
.staged-comment button:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.staged-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.staged-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
  color: var(--text);
}
.staged-remove {
  background: transparent;
  border: none;
  padding: 0 2px;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  border-radius: 4px;
}
.staged-remove:hover { color: var(--red); background: var(--red-bg); }

.linked-dirs-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.linked-dir-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 220px;
}
.linked-dir-chip svg { flex-shrink: 0; color: var(--text-muted); }
.linked-dir-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-attachments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.user-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 11.5px;
  max-width: 240px;
  color: var(--text);
  cursor: default;
  text-align: left;
  font: inherit;
  font-size: 11.5px;
}
.user-attachment.openable { cursor: pointer; }
.user-attachment.openable:hover {
  background: var(--bg-subtle);
  border-color: var(--accent);
}
.user-attachment img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.user-attachment .staged-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------- Mention popover ------------------------------------------- */
.mention-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 10;
}
.mention-item {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 12px;
  text-align: left;
  gap: 8px;
}
.mention-item:hover { background: var(--bg-subtle); border-color: transparent; }
.mention-item code {
  flex: 1 1;
  font-size: 11px;
  background: transparent;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-meta { color: var(--text-muted); font-size: 10px; flex-shrink: 0; }

/* ===========================================================
   Modal / Settings
   =========================================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in 160ms ease-out;
}
.modal {
  background: var(--bg-elevated);
  -webkit-app-region: no-drag;
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 520px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 1 !important;
  animation: none;
}
.modal h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; font-weight: 600; }
.modal label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.modal .hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.modal .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

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

/* Responsive: Modal full-screen on mobile (r_p1_20) */
@media (max-width: 767px) {
  .modal-backdrop {
    align-items: flex-end;
    justify-content: stretch;
  }

  .modal-backdrop > .modal,
  .modal-backdrop > div,
  .modal-backdrop .modal,
  .recharge-dialog,
  .personal-center,
  [class*="dialog"] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    inset: auto 0 0 0 !important;
    position: relative;
    animation: slide-up 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
  }

  .modal-backdrop .modal-dialog,
  .modal-backdrop > [class*="dialog"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 16px !important;
  }

  .modal-settings {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.modal-settings {
  --modal-padding: 24px;
  width: min(920px, calc(100vw - 48px));
  padding: 0;
  gap: 0;
  max-height: calc(100vh - 64px);
  /* Anchor for the absolutely-positioned `.settings-chrome` strip
     (close button + autosave indicator). Without this the chrome
     would escape to the viewport on long-scrolling sections. */
  position: relative;
}
@media (max-height: 600px) {
  .modal-settings { max-height: 90vh; }
}
.modal-settings .modal-body {
  overflow: hidden;
  flex: 1 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-gap: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.modal-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  padding: var(--modal-padding);
}
.modal-head .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
}
.modal-head h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.modal-head .subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  /* 72ch lets typical one-sentence English subtitles fit on a single
   * line inside the 920px settings modal while still wrapping cleanly
   * on narrow viewports (the modal width clamps to 100vw - 48px) and
   * for the longest locales (German, French). 50ch was forcing even
   * the English subtitle onto two lines. See nexu-io/open-design#743. */
  max-width: 72ch;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px var(--modal-padding, 22px) 12px;
  border-top: 1px solid var(--border);
  margin-top: 0;
  flex-shrink: 0;
}

/* Top-right chrome strip for the Settings dialog. Floats above the
   sidebar/content rhythm so the close affordance and the autosave
   indicator never compete with the title or sidebar nav. The strip
   is a flex row right-anchored to the modal corner; the autosave
   pill comes first so the close button keeps a stable optical
   position and the user's eye returns to the same place after a
   save settles. */
.settings-chrome {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-chrome > * {
  pointer-events: auto;
}

/* Close button. Minimal circular icon button with a hairline ring
   that warms on hover and snaps to the accent on focus-visible.
   Sized to read as a passive corner control rather than a primary
   CTA — the autosave indicator next to it carries any system
   feedback the user might need. */
.settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.settings-close:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--text) 22%, var(--border));
  background: var(--bg-panel);
  transform: scale(1.04);
}
.settings-close:active {
  transform: scale(0.96);
}
.settings-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text);
}
@media (prefers-reduced-motion: reduce) {
  .settings-close { transition: color 80ms linear, border-color 80ms linear; transform: none !important; }
}

/* Autosave status pill. Lives in the chrome strip now (next to the
   close button) instead of a footer. Renders nothing while idle so
   the chrome reads as a single close button until something is
   actually saving; settles to a green check on success and red on
   failure. The pill never takes focus and never blocks input — it
   is a passive system message announced to assistive tech via
   aria-live on the wrapper. */
.settings-autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  border: 1px solid transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}
.settings-autosave.is-idle {
  opacity: 0;
  transform: translateY(-2px);
  /* Collapse the visual weight so the chrome strip is just the
     close button when nothing is happening. */
  padding: 0;
  border-color: transparent;
  background: transparent;
  min-height: 0;
}
.settings-autosave.is-pending,
.settings-autosave.is-saving {
  opacity: 1;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 12%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--text-muted) 18%, transparent);
}
.settings-autosave.is-saved {
  opacity: 1;
  color: var(--green, #1f9d55);
  background: color-mix(in srgb, var(--green, #1f9d55) 14%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--green, #1f9d55) 30%, transparent);
  animation: settingsAutosavePop 220ms ease-out;
}
.settings-autosave.is-error {
  opacity: 1;
  color: var(--red, #d23434);
  background: color-mix(in srgb, var(--red, #d23434) 14%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--red, #d23434) 32%, transparent);
}
@keyframes settingsAutosavePop {
  from { transform: translateY(-2px) scale(0.98); }
  to   { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .settings-autosave { transition: opacity 80ms linear; animation: none !important; }
}

/* Hide the verbose error copy on narrow viewports so the chrome
   strip doesn't crowd the close button. The icon + tooltip carry
   the meaning, and the screen-reader announcement still fires. */
@media (max-width: 720px) {
  .settings-autosave.is-error span,
  .settings-autosave.is-saved span,
  .settings-autosave.is-pending span,
  .settings-autosave.is-saving span {
    display: none;
  }
  .settings-autosave.is-idle { padding: 0; }
}

/* Make sure header copy doesn't crash into the close button on
   narrow viewports. The kicker/title/subtitle should keep their
   normal width but reserve right-side gutter for the chrome. */
.modal-settings .modal-head {
  padding-right: calc(var(--modal-padding) + 56px);
}

/* Section-local Save key button for the Composio API key field. We do
   NOT autosave secrets, so this is the explicit gesture. Styled as a
   primary button to stand out next to the password input + ghost
   Clear, with a tighter vertical rhythm so it sits flush in the
   field-row alongside the input. */
.settings-connectors-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.settings-connectors-save.is-busy {
  opacity: 0.85;
  cursor: progress;
}
.settings-section-connectors .field-row {
  /* Allow the input + Save key + Clear triplet to wrap on narrow widths
     instead of crushing the input. */
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .settings-section-connectors .field-row > input,
  .settings-section-connectors .field-row > .field-input-skeleton-wrap {
    flex: 1 1 100%;
  }
}

/* Two-stage destructive confirmation for clearing the saved Composio
   API key. Step 1 ("confirm") is a soft amber-ish warning rooted in
   the same red palette as other destructive surfaces so it reads as
   "this will undo something" without screaming. Step 2 ("final") leans
   into red with a brief arming animation on the commit button so a
   reflex double-click cannot blow through both stages. The whole panel
   collapses inline beneath the credentials field so the destructive
   action stays visually anchored to the row that started it. */
.settings-connectors-clear.is-arming {
  border-color: var(--red-border);
  color: var(--red);
  background: color-mix(in srgb, var(--red-bg) 65%, transparent);
}
.settings-connectors-clear-confirm {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: start;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--red-border);
  background: color-mix(in srgb, var(--red-bg) 78%, transparent);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  animation: settings-connectors-clear-confirm-in 180ms ease-out;
}
.settings-connectors-clear-confirm.is-final {
  background: var(--red-bg);
  border-color: color-mix(in srgb, var(--red) 55%, var(--red-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--red) 18%, transparent),
    0 8px 24px -16px color-mix(in srgb, var(--red) 80%, transparent);
}
@keyframes settings-connectors-clear-confirm-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.settings-connectors-clear-confirm-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--red-border));
  background: var(--bg-panel);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}
.settings-connectors-clear-confirm.is-final .settings-connectors-clear-confirm-icon {
  background: var(--red);
  color: var(--bg-panel);
  border-color: var(--red);
}
.settings-connectors-clear-confirm-glyph {
  display: inline-block;
  transform: translateY(-0.5px);
}
.settings-connectors-clear-confirm-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.settings-connectors-clear-confirm-copy strong {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.3;
}
.settings-connectors-clear-confirm-copy span {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.settings-connectors-clear-confirm.is-final .settings-connectors-clear-confirm-copy strong {
  color: var(--red);
}
.settings-connectors-clear-confirm-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
}
/* "Continue" — moves to stage 2. Styled as a quiet outlined button
   tinted with the red palette so it reads as "destructive but not
   yet committed". */
.settings-connectors-clear-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--red-border);
  background: var(--bg-panel);
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    border-color 120ms ease-out,
    transform 120ms ease-out;
}
.settings-connectors-clear-step:hover {
  background: color-mix(in srgb, var(--red-bg) 60%, var(--bg-panel));
  border-color: var(--red);
}
.settings-connectors-clear-step:active {
  transform: translateY(1px);
}
/* Final commit button. Solid red with an arming sweep that fills the
   left edge for ~700ms before the click is honored. While "arming",
   the button is visually hot but disabled so an Enter-spam can't get
   ahead of the user's intent; once armed, the label swaps to the
   destructive verb and the click commits. */
.settings-connectors-clear-commit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: var(--red);
  color: var(--bg-panel);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 120ms ease-out,
    box-shadow 160ms ease-out,
    background 160ms ease-out;
}
.settings-connectors-clear-commit:disabled,
.settings-connectors-clear-commit[aria-disabled='true'] {
  cursor: progress;
  background: color-mix(in srgb, var(--red) 70%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--red) 60%, var(--red-border));
}
.settings-connectors-clear-commit.is-armed {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent),
    0 10px 20px -12px color-mix(in srgb, var(--red) 75%, transparent);
}
.settings-connectors-clear-commit.is-armed:hover {
  background: color-mix(in srgb, var(--red) 88%, #000);
}
.settings-connectors-clear-commit.is-armed:active {
  transform: translateY(1px);
}
/* The arming sweep — a translucent fill that races from left to right
   over the disabled window, signaling "almost ready". CSS-only so it
   renders the same in every browser without a second timer. */
.settings-connectors-clear-commit-arm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #fff 28%, transparent) 0%,
    color-mix(in srgb, #fff 12%, transparent) 100%
  );
  transform: translateX(-100%);
  opacity: 0.85;
  animation: settings-connectors-clear-commit-arm 700ms ease-out forwards;
}
.settings-connectors-clear-commit.is-armed .settings-connectors-clear-commit-arm {
  display: none;
}
@keyframes settings-connectors-clear-commit-arm {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}
.settings-connectors-clear-commit-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1;
}
@media (max-width: 540px) {
  .settings-connectors-clear-confirm {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .settings-connectors-clear-confirm-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .settings-connectors-clear-commit {
    min-width: 0;
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .settings-connectors-clear-confirm {
    animation: none;
  }
  .settings-connectors-clear-commit-arm {
    animation: none;
    transform: translateX(0%);
    opacity: 0.4;
  }
}
.settings-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 12px;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.settings-nav-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
.settings-nav-item:hover {
  background: color-mix(in srgb, var(--bg-panel) 72%, transparent);
  color: var(--text);
}
.settings-nav-item.active {
  background: var(--bg-panel);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.settings-nav-item svg {
  justify-self: center;
}
.settings-nav-item span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-item strong {
  color: currentColor;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.settings-nav-item small {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.settings-content {
  min-width: 0;
  min-height: 0;
  padding: 22px var(--modal-padding);
  overflow: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 760px) {
  .modal-settings {
    width: min(560px, calc(100vw - 24px));
  }
  .modal-settings .modal-body {
    grid-template-columns: 1fr;
  }
  .settings-sidebar {
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .settings-nav-item {
    min-width: 150px;
  }
}

/* C-end settings dialog */
.modal-backdrop:has(.c-end-settings) {
  background: rgba(28, 27, 26, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.c-end-settings {
  width: min(960px, calc(100vw - 48px));
  max-height: min(720px, calc(100dvh - 48px));
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  opacity: 1 !important;
  animation: none;
}
.c-end-settings .settings-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  flex-shrink: 0;
}
.c-end-settings .settings-dialog-header h2 {
  margin: 0;
  min-width: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-strong);
}
.c-end-settings .settings-dialog-header .icon-btn {
  flex: 0 0 auto;
}
.c-end-settings .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-gap: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.c-end-settings .settings-sidebar {
  min-width: 0;
  min-height: 0;
  padding: 18px 14px;
  background: #f7f5f1;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.c-end-settings .settings-nav-item {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
}
.c-end-settings .settings-nav-item svg {
  width: 18px;
  height: 18px;
  justify-self: center;
}
.c-end-settings .settings-nav-item span {
  min-width: 0;
}
.c-end-settings .settings-nav-item strong,
.c-end-settings .settings-nav-item small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: keep-all;
}
.c-end-settings .settings-nav-item strong {
  font-size: 14px;
}
.c-end-settings .settings-nav-item small {
  font-size: 12px;
}
.c-end-settings .settings-content {
  min-width: 0;
  min-height: 0;
  padding: 26px 30px;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
}
.c-end-settings .settings-section {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.c-end-settings .settings-section h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-strong);
}
.c-end-settings .settings-section form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-end-settings .settings-section form > .primary {
  align-self: flex-start;
  min-width: 104px;
  margin-top: 2px;
}
.c-end-settings .field {
  gap: 6px;
}
.c-end-settings .field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.c-end-settings .account-actions,
.c-end-settings .account-logout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.c-end-settings .settings-password-form {
  width: 100%;
}
.c-end-settings .confirm-row {
  width: 100%;
  justify-content: flex-start;
}
.c-end-settings .confirm-row .muted {
  flex: 1 1 220px;
  min-width: 0;
}
.c-end-settings .points-actions-row {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .modal-backdrop > .c-end-settings {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .c-end-settings .settings-dialog-header {
    padding: 16px 18px;
  }
  .c-end-settings .modal-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .c-end-settings .settings-sidebar {
    flex-direction: row;
    gap: 8px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
  .c-end-settings .settings-nav-item {
    flex: 0 0 190px;
    width: 190px;
    min-width: 190px;
  }
  .c-end-settings .settings-content {
    padding: 20px 18px 24px;
  }
  .c-end-settings .settings-section {
    max-width: none;
  }
  .c-end-settings .settings-section form > .primary,
  .c-end-settings .account-actions > .ghost,
  .c-end-settings .account-logout > .ghost {
    width: 100%;
  }
  .c-end-settings .confirm-row {
    align-items: stretch;
  }
}

/* Segmented control */
.seg-control {
  display: grid;
  grid-template-columns: repeat(var(--seg-cols, 2), minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  padding: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.seg-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.seg-btn:hover:not(:disabled):not(.active) { background: rgba(255, 255, 255, 0.5); }
.seg-btn.active {
  background: var(--bg-panel);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.seg-btn .seg-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.seg-btn .seg-meta { font-size: 11px; color: var(--text-muted); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.seg-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Secondary protocol selector — pill chips, wraps to multiple rows */
.protocol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
  padding: 0;
  min-width: 0;
}
.protocol-chip {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.protocol-chip:hover:not(.active) {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.protocol-chip.active {
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--accent-tint) 100%);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.settings-section { display: flex; flex-direction: column; gap: 12px; }

/* Data export section */
.data-export-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.export-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.radio-row input[type="radio"] {
  width: auto;
  margin: 0;
}

/* Notice banners */
.notice {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
}
.notice-success {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}
.notice-error {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

/* Confirm row */
.confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Password change form */
.settings-password-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.settings-password-error {
  margin: 0;
}
.settings-password-success {
  margin: 0;
}

/* Password strength indicator */
.password-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.password-strength-bar {
  flex: 1 1;
  height: 4px;
  background: var(--bg-muted);
  border-radius: 2px;
  overflow: hidden;
}
.password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition: width 0.2s ease, background 0.2s ease;
}
.password-strength.strength-weak .password-strength-fill {
  width: 33%;
  background: var(--red);
}
.password-strength.strength-medium .password-strength-fill {
  width: 66%;
  background: var(--amber);
}
.password-strength.strength-strong .password-strength-fill {
  width: 100%;
  background: var(--green);
}
.password-strength-label {
  font-size: 12px;
  min-width: 40px;
}
.password-strength.strength-weak .password-strength-label {
  color: var(--red);
}
.password-strength.strength-medium .password-strength-label {
  color: var(--amber);
}
.password-strength.strength-strong .password-strength-label {
  color: var(--green);
}

/* Danger zone styling */
.danger-zone {
  padding: 16px;
  border: 1px solid var(--red-border);
  border-radius: var(--radius);
  background: var(--red-bg);
}
.danger-zone h4 {
  color: var(--red);
  margin: 0;
}
.warning-text {
  color: var(--red);
  font-weight: 500;
  margin: 0 0 8px;
}

/* Button danger variant */
button.primary.danger {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
button.primary.danger:hover:not(:disabled) {
  background: var(--red);
  filter: brightness(0.9);
}
button.ghost.danger {
  color: var(--red);
  border-color: var(--red-border);
}
button.ghost.danger:hover:not(:disabled) {
  background: var(--red-bg);
  border-color: var(--red);
}
.settings-section-connectors { gap: 16px; }
/* Credentials sit above the catalog now; the divider lives under the field
   so the eye reads "configure key → catalog unlocks below". */
.settings-section-connectors > .settings-section-connectors-credentials {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.settings-section-connectors > .connectors-panel-embedded {
  margin-top: 0;
}
.settings-rescan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  justify-content: center;
}
.settings-rescan-btn.loading {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.settings-rescan-status,
.settings-test-status {
  margin: -4px 0 0;
  padding: 7px 10px;
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  background: var(--green-bg);
  color: var(--green);
  font-size: 12px;
  line-height: 1.4;
}
.settings-rescan-status.error,
.settings-test-status.error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}
.settings-test-status.warn {
  border-color: var(--amber-border, var(--orange-border, var(--green-border)));
  background: var(--amber-bg, var(--orange-bg, var(--green-bg)));
  color: var(--amber, var(--orange, var(--green)));
}
.settings-test-status.running {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.settings-test-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 64px;
  justify-content: center;
}
.settings-test-btn.loading {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.section-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* ============================================================
   Orbit settings section — redesigned layout
   Hero · Automation card · Run receipt · Artifact strip
   ============================================================ */
.orbit-section {
  gap: 16px;
}

/* ---------- 1. Hero / header zone ---------- */
.orbit-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 14px;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(140% 160% at 100% 0%, color-mix(in srgb, var(--accent-tint) 75%, transparent) 0%, transparent 60%),
    var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.orbit-hero-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 32%, transparent);
  flex-shrink: 0;
}
.orbit-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.orbit-hero-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.orbit-hero-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  line-height: 1.15;
}
.orbit-hero-lede {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 52ch;
}
.orbit-hero-lede strong {
  color: var(--text);
  font-weight: 600;
}
.orbit-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.orbit-state-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.orbit-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
}
.orbit-state-pill.orbit-state-active {
  background: color-mix(in srgb, var(--accent-tint) 80%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color: var(--accent-strong);
}
.orbit-state-pill.orbit-state-active .orbit-state-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}

.orbit-run-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-strong) 22%, transparent) inset, var(--shadow-xs);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.orbit-run-cta:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.orbit-run-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.orbit-run-cta:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}
.orbit-run-cta.is-busy {
  background: color-mix(in srgb, var(--accent) 75%, #000);
  border-color: transparent;
}
.orbit-run-cta .icon-spin {
  color: #fff;
}

@media (max-width: 620px) {
  .orbit-hero {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .orbit-hero-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}

/* ---------- 2. Automation card ---------- */
.orbit-automation {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color 140ms ease, background 140ms ease;
}
.orbit-automation.is-on {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-tint) 40%, var(--bg-panel)) 0%, var(--bg-panel) 40%);
}

/* ---------- Locked state ----------
   When no Composio connector is wired up the automation card collapses
   into a passive, gated surface. We desaturate the hue, tighten contrast,
   and overlay a soft diagonal sheen so the card reads as "intentionally
   off" rather than "broken styling". The lock banner above the rows
   names the prerequisite plainly and points back to the Connectors gate
   without competing with it. */
.orbit-automation.is-locked {
  border-color: color-mix(in srgb, var(--text-soft) 22%, var(--border));
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--text-soft) 4%, transparent) 0 6px,
      transparent 6px 14px
    ),
    var(--bg-subtle);
  filter: saturate(0.55);
}
.orbit-automation.is-locked.is-on {
  /* When the user previously had the schedule on but later removed the
     last connector we still show the "on" gradient very faintly — but
     the locked treatment wins so the panel reads as gated. */
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--text-soft) 4%, transparent) 0 6px,
      transparent 6px 14px
    ),
    var(--bg-subtle);
}
.orbit-automation.is-locked .orbit-automation-row {
  /* Block any accidental click-through into the row's whitespace; real
     controls retain their own pointer behavior via :disabled. */
  cursor: not-allowed;
}
.orbit-automation.is-locked .orbit-automation-title,
.orbit-automation.is-locked .orbit-automation-sub {
  color: var(--text-soft);
}
.orbit-automation.is-locked .orbit-time-input,
.orbit-automation.is-locked .orbit-switch,
.orbit-automation.is-locked .orbit-template-select-input,
.orbit-automation.is-locked .orbit-automation-sub-action {
  cursor: not-allowed;
  opacity: 0.6;
}
.orbit-automation.is-locked .orbit-time-input:disabled,
.orbit-automation.is-locked .orbit-template-select-input:disabled {
  /* The native :disabled state already dims; keep our own opacity tuned
     so it matches the surrounding desaturated card. */
  background: color-mix(in srgb, var(--text-soft) 6%, var(--bg-subtle));
}

/* Lock banner — sits above the configuration rows and names the gate
   reason in a single line. Compact, low-contrast accent so it reads as
   metadata rather than a second hero. */
.orbit-automation-lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.orbit-automation-lock-banner svg {
  color: var(--accent-strong);
  flex-shrink: 0;
}
.orbit-automation-lock-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  flex-shrink: 0;
}
.orbit-automation-lock-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .orbit-automation-lock-text { white-space: normal; }
}

.orbit-automation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}
.orbit-automation-schedule-row {
  align-items: start;
}
.orbit-automation-divider {
  height: 1px;
  background: var(--border-soft);
  margin: 0 18px;
}
.orbit-automation-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.orbit-automation-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.orbit-automation-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Custom switch control — rebuilt rather than reusing .toggle-row so the
   Orbit section owns the pattern and can tune track/thumb proportions. */
.orbit-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.orbit-switch:hover { border-color: var(--border-strong); }
.orbit-switch.is-on {
  background: color-mix(in srgb, var(--accent-tint) 70%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color: var(--accent-strong);
}
.orbit-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.orbit-switch:disabled,
.orbit-switch.is-locked {
  cursor: not-allowed;
  opacity: 0.55;
  border-color: var(--border);
  background: transparent;
  color: var(--text-soft);
}
.orbit-switch:disabled .orbit-switch-track,
.orbit-switch.is-locked .orbit-switch-track {
  background: var(--border);
}
.orbit-switch:disabled.is-on .orbit-switch-track,
.orbit-switch.is-locked.is-on .orbit-switch-track {
  background: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.orbit-switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 160ms ease;
}
.orbit-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(28, 27, 26, 0.22);
  transition: transform 180ms cubic-bezier(0.2, 0, 0.2, 1);
}
.orbit-switch.is-on .orbit-switch-track { background: var(--accent); }
.orbit-switch.is-on .orbit-switch-thumb { transform: translateX(14px); }
.orbit-switch-text {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: right;
}

.orbit-automation-schedule-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}
.orbit-time-input {
  width: 140px;
  padding: 6px 10px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  border-radius: var(--radius-sm);
}
.orbit-next-run {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orbit-next-run-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-soft);
}
.orbit-next-run-value {
  color: var(--text);
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.orbit-next-run-value.muted {
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 620px) {
  .orbit-automation-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .orbit-automation-schedule-controls {
    align-items: stretch;
  }
  .orbit-time-input {
    width: 100%;
  }
  .orbit-switch { align-self: flex-start; }
}

/* ---------- 3. Template row (folded into Automation card) ----------
   Previously this section lived in its own paired card. We folded it into
   the automation card as a third row + dedicated preview slot so users
   configure schedule and prompt-steering in one place, and the section
   reads as one cohesive configuration surface instead of two parallel
   panels competing for attention. The class names below still use the
   `orbit-template-` prefix because they continue to describe template
   surface elements — they just live inside the automation card now. */

.orbit-automation.has-template {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.orbit-automation-template-row {
  /* Slightly more vertical breathing room than the switch/schedule rows
     because the right column hosts a wider select control. */
  align-items: start;
  padding-top: 16px;
  padding-bottom: 16px;
}
.orbit-automation-template-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
  width: clamp(220px, 36%, 320px);
}

/* Inline warning variant of the row sub-copy. Used by the Prompt
   template row when the saved skill id is no longer in the registry —
   takes the place of the standard descriptive sub-line and inlines a
   small Reset action that pushes the config back to the default
   (`orbit-general`). The warning lives flush inside the automation
   row so we do not need a separate preview panel for the missing
   state. */
.orbit-automation-sub-warning {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 8px;
  margin-top: 2px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #c47a2c 10%, var(--bg-panel));
  color: #8a5217;
  font-weight: 500;
}
.orbit-automation-sub-warning svg {
  color: #c47a2c;
  flex-shrink: 0;
}
.orbit-automation-sub-warning strong {
  color: #6c3f0f;
  font-weight: 600;
}
.orbit-automation-sub-action {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: auto;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8a5217;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, #c47a2c 32%, var(--border));
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.orbit-automation-sub-action:hover {
  color: #6c3f0f;
  border-color: color-mix(in srgb, #c47a2c 55%, var(--border));
  background: color-mix(in srgb, #c47a2c 8%, var(--bg-panel));
}
.orbit-automation-sub-action:focus-visible {
  outline: 2px solid color-mix(in srgb, #c47a2c 65%, var(--accent));
  outline-offset: 2px;
}

/* Native select wrapper. Originally a labelled grid (label + select);
   the row title now carries the inline label, so the select stretches
   to fill its column. */
.orbit-template-select {
  display: flex;
  flex: 1 1;
  min-width: 0;
}
.orbit-template-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.orbit-template-select-input {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 8px 32px 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.orbit-template-select-input:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--bg-panel);
}
.orbit-template-select-input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.orbit-template-select-input:disabled {
  /* While the skill registry is loading we show a progress cursor; the
     locked variant overrides this back to not-allowed via the parent
     `.orbit-automation.is-locked` rule above. */
  cursor: progress;
  opacity: 0.65;
}
.orbit-template-select-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-soft);
  pointer-events: none;
}

@media (max-width: 620px) {
  /* On narrow viewports the template row should stack: title block on top,
     select control full-width below it. */
  .orbit-automation-template-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .orbit-automation-template-controls {
    width: 100%;
    min-width: 0;
    justify-content: stretch;
  }
}

/* ---------- 4. Run receipt ---------- */
.orbit-receipt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.orbit-receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.orbit-receipt-head-left {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.orbit-receipt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.orbit-receipt-eyebrow svg { color: var(--text-soft); }
.orbit-receipt-timestamp {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-strong);
  letter-spacing: -0.005em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.orbit-receipt-timestamp.muted {
  color: var(--text-muted);
  font-weight: 500;
}
.orbit-trigger-pill {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.orbit-trigger-pill.orbit-trigger-manual {
  background: var(--blue-bg);
  border-color: var(--blue-border);
  color: var(--blue);
}
.orbit-trigger-pill.orbit-trigger-scheduled {
  background: color-mix(in srgb, var(--accent-tint) 80%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  color: var(--accent-strong);
}

.orbit-inline-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
}
.orbit-inline-notice.is-success {
  border-color: var(--green-border);
  background: var(--green-bg);
  color: var(--green);
}
.orbit-inline-notice.is-error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}

/* Proportional run meter: a single bar whose segment widths reflect the
   success / skip / failure ratio. Preferred over 4 equal tiles because it
   communicates "mostly succeeded" or "mostly failed" at a glance. */
.orbit-meter {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
}
.orbit-meter-seg {
  height: 100%;
  transition: width 260ms ease;
}
.orbit-meter-seg.is-succeeded { background: var(--green); }
.orbit-meter-seg.is-skipped { background: var(--border-strong); }
.orbit-meter-seg.is-failed { background: var(--red); }
.orbit-meter-seg.is-empty {
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--bg-subtle) 0 6px,
    var(--bg-muted) 6px 12px
  );
}

.orbit-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orbit-counts .orbit-count {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 12px;
}
.orbit-counts .orbit-count + .orbit-count::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--border-soft);
}
.orbit-count dt {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.orbit-count dd {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.orbit-count.is-succeeded dd { color: var(--green); }
.orbit-count.is-skipped dd { color: var(--text-muted); }
.orbit-count.is-failed dd { color: var(--red); }

@media (max-width: 620px) {
  .orbit-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .orbit-counts .orbit-count + .orbit-count::before { display: none; }
}

/* ---------- 1b. Configuration gate ---------------------------------------
   Surfaces when the user has no connected integrations. We share the
   orbit-themed accent palette of the hero/firstrun panel so the gate
   reads as a first-class part of the panel rather than an inline error
   banner. Layout mirrors the firstrun composition (glyph · copy · action)
   so the section feels rhythmically consistent regardless of which
   empty-state panel is showing. The decorative ring glyph reuses the
   same dashed-orbit motif as the firstrun glyph but anchors a small
   "link" icon at the center to telegraph "wire up a connector". */
.orbit-config-gate {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: var(--radius);
  background:
    radial-gradient(120% 160% at 0% 50%, color-mix(in srgb, var(--accent-tint) 90%, transparent) 0%, transparent 60%),
    var(--bg-panel);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  animation: orbitConfigGateIn 220ms ease-out;
}
.orbit-config-gate::after {
  /* Soft outer ring decoration in the corner — pure visual, mirrors the
     firstrun panel so the two empty states feel like siblings. */
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}
@keyframes orbitConfigGateIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.orbit-config-gate-glyph {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.orbit-config-gate-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, transparent);
}
.orbit-config-gate-ring-outer {
  inset: 0;
  animation: orbitFirstrunSpin 22s linear infinite;
}
.orbit-config-gate-ring-inner {
  inset: 9px;
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  animation: orbitFirstrunSpin 16s linear infinite reverse;
}
.orbit-config-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  color: var(--btn-primary-fg, #fff);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 32%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .orbit-config-gate-ring { animation: none !important; }
}

.orbit-config-gate-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.orbit-config-gate-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.orbit-config-gate-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  line-height: 1.3;
}
.orbit-config-gate-body {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 56ch;
}

.orbit-config-gate-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.orbit-config-gate-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--btn-primary-fg, #fff);
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent);
}
.orbit-config-gate-action:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}
.orbit-config-gate-action:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.orbit-config-gate-action svg {
  transition: transform 160ms ease;
}
.orbit-config-gate-action:hover svg {
  transform: translateX(2px);
}

@media (max-width: 620px) {
  .orbit-config-gate {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .orbit-config-gate-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ---------- 5. Live artifact strip ---------- */
.orbit-artifact-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-column-gap: 14px;
  column-gap: 14px;
  grid-row-gap: 10px;
  row-gap: 10px;
  align-items: center;
  padding: 14px 16px 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-tint) 60%, var(--bg-panel)) 0%, var(--bg-panel) 55%);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.orbit-artifact-strip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
}
.orbit-artifact-strip.is-legacy {
  background: var(--bg-subtle);
  border-color: var(--border);
  border-style: dashed;
}
.orbit-artifact-strip.is-legacy::before { display: none; }

.orbit-artifact-strip-icon {
  grid-row: 1;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  color: var(--accent-strong);
  flex-shrink: 0;
}
.orbit-artifact-strip.is-legacy .orbit-artifact-strip-icon {
  border-color: var(--border);
  color: var(--text-muted);
}
.orbit-artifact-strip-copy {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.orbit-artifact-strip-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.orbit-artifact-strip.is-legacy .orbit-artifact-strip-kicker {
  color: var(--text-muted);
}
.orbit-artifact-strip-title {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orbit-artifact-strip-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.orbit-artifact-strip-actions {
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.orbit-artifact-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.orbit-artifact-ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.orbit-artifact-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-strong) 20%, transparent) inset, var(--shadow-xs);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.orbit-artifact-open:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.orbit-artifact-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.orbit-artifact-peek {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border-soft));
  padding-top: 8px;
}
.orbit-artifact-strip.is-legacy .orbit-artifact-peek {
  border-top-color: var(--border-soft);
}
.orbit-artifact-peek summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.orbit-artifact-peek summary::-webkit-details-marker { display: none; }
.orbit-artifact-peek summary svg {
  transition: transform 160ms ease;
  color: var(--text-soft);
}
.orbit-artifact-peek[open] summary svg { transform: rotate(90deg); }
.orbit-artifact-peek[open] summary { color: var(--text); }
.orbit-artifact-peek pre {
  margin: 8px 0 0;
  max-height: 240px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  font: 11.5px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .orbit-artifact-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .orbit-artifact-strip-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-end;
  }
  .orbit-artifact-peek {
    grid-column: 1 / -1;
  }
}
.settings-field-error {
  color: var(--red);
  font-size: 12px;
  line-height: 1.4;
}

.settings-about-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-about-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.settings-about-list dt {
  font-size: 12px;
  color: var(--text-muted);
}
.settings-about-list dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.media-provider-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.media-provider-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.media-provider-row.pending {
  background: var(--bg-subtle);
  border-style: dashed;
}
.media-provider-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.media-provider-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.media-provider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.media-provider-hint {
  font-size: 11px;
  color: var(--text-muted);
}
.media-provider-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.media-provider-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.media-provider-badge.integrated {
  color: #137a3d;
  background: color-mix(in srgb, #1f9d55 10%, transparent);
  border-color: color-mix(in srgb, #1f9d55 28%, var(--border));
}
.media-provider-badge.unsupported {
  color: var(--text-soft);
  background: var(--bg-subtle);
  border-color: var(--border);
}
.media-provider-badge.on {
  color: #3155c9;
  background: color-mix(in srgb, #4169e1 10%, transparent);
  border-color: color-mix(in srgb, #4169e1 28%, var(--border));
}
.media-provider-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-gap: 6px;
  gap: 6px;
}
.media-provider-secret-field {
  position: relative;
  min-width: 0;
}
.media-provider-secret-field input {
  width: 100%;
  padding-right: 34px;
}
.secret-visibility-button {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  transform: translateY(-50%);
}
.secret-visibility-button:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-subtle);
  box-shadow: none;
}
.secret-visibility-button:disabled {
  color: var(--text-faint);
  cursor: not-allowed;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.section-head > div {
  max-width: 100%;
  min-width: 0;
}
.section-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
.section-head .hint { margin-top: 2px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.field-row { display: flex; gap: 6px; align-items: stretch; }
.field-row input { flex: 1 1; }
.field-row .icon-btn { white-space: nowrap; padding: 6px 12px; }
.settings-language-picker { position: relative; }
.settings-language-button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}
.settings-language-button:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.settings-language-button[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.settings-language-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  color: var(--accent);
  flex-shrink: 0;
}
.settings-language-text,
.settings-language-option > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-language-title,
.settings-language-option-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.settings-language-code,
.settings-language-option-code {
  font-size: 11px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.settings-language-menu {
  position: fixed;
  z-index: 1000;
  max-width: calc(100vw - 24px);
  /* 7 locales × ~58px + menu chrome (padding, gap, border) ≈ 428px;
     --menu-available-h is set by JS to the distance between the trigger
     and whichever viewport edge the menu opens toward, so the menu never
     overflows the viewport regardless of placement direction. The 60vh
     cap keeps the menu from feeling cramped on short viewports. */
  max-height: min(428px, 60vh, var(--menu-available-h, 428px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}
.settings-language-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  color: var(--text);
}
/* Differentiate hover, selected, and keyboard-focus states so the
   currently-selected language is visually distinct even when the
   pointer is hovering a different row. Issue #628. */
.settings-language-option:hover { background: var(--bg-subtle); }
.settings-language-option.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}
.settings-language-option.active:hover { background: var(--accent-soft); }
.settings-language-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.empty-card {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  background: var(--bg-subtle);
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  gap: 8px;
}
.agent-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.agent-card:hover:not(.disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.agent-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-panel) 0%, var(--accent-tint) 100%);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.agent-card.disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--bg-subtle);
}
.agent-card.disabled.agent-card-unavailable {
  opacity: 0.72;
}
.agent-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 6px;
}
.agent-card-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.agent-card-link:hover {
  text-decoration: underline;
}
.agent-install-path-hint {
  margin-top: 10px;
  margin-bottom: 0;
}
.agent-install-guide {
  margin-top: 10px;
}
.agent-install-steps {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.agent-install-steps li + li {
  margin-top: 4px;
}
.agent-card-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1; }
.agent-card-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-card-meta {
  font-size: 11px; color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-card-meta .muted { color: var(--text-soft); font-style: italic; }
.agent-model-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.agent-model-row .field { gap: 4px; }
.agent-model-row .field-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.agent-model-row .hint { margin: 0; font-size: 11.5px; }
.agent-cli-env {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.agent-cli-env-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-cli-env-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.agent-cli-env-head .hint { margin: 0; font-size: 11.5px; }
.agent-cli-env-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}
.status-dot.active {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.agent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.error {
  border-color: var(--red-border);
  background: var(--red-bg);
  color: var(--red);
}

/* ===========================================================
   Activity ticker (legacy — still used in some flows)
   =========================================================== */
.activity {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.activity-header { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.activity-header .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 auto;
}
.activity-header .dot[data-active="true"] {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.activity-title { font-weight: 500; }
.activity-stats {
  margin-left: auto;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  padding: 2px 0;
}
.activity-item .badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  min-width: 56px;
  text-align: center;
}
.activity-item .badge-tool { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue); }
.activity-item .badge-result { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.activity-item .badge-error,
.activity-item .badge-result.badge-error {
  background: var(--red-bg); border-color: var(--red-border); color: var(--red);
}
.activity-item .badge-thinking { background: var(--purple-bg); border-color: var(--purple-border); color: var(--purple); }
.activity-item .badge-status { background: var(--bg-panel); }
.activity-item .badge-text { background: transparent; border-color: var(--border); }
.activity-item .badge-usage { background: var(--bg-panel); color: var(--text-muted); }
.activity-item .detail { flex: 1 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.activity-item .detail.muted { color: var(--text-muted); }
.activity-item .thinking-text { font-style: italic; color: var(--text-muted); }
.activity-waiting { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* ============================================================
   Entry view — left sidebar + right tabs
   ============================================================ */
.entry-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  min-height: 0;
  background: var(--bg);
}

.entry {
  display: grid;
  grid-template-columns: 380px 1fr;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

.entry-side {
  border-right: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
}

.entry-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.entry-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.entry-brand-mark .brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 2px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
.entry-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.entry-brand-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-brand-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--text-strong);
}
.entry-brand-pill {
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.entry-brand-subtitle {
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* New project panel */
.newproj {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}
.newproj-tabs-shell {
  position: relative;
  overflow: hidden;
  padding: 0 24px;
  flex: 0 0 auto;
}
.newproj-tabs {
  display: flex;
  padding: 0 4px;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.newproj-tabs::-webkit-scrollbar { display: none; }
.newproj-tabs-shell::before,
.newproj-tabs-shell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.newproj-tabs-shell::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-panel), transparent);
}
.newproj-tabs-shell::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg-panel), transparent);
}
.newproj-tabs-shell.can-left::before,
.newproj-tabs-shell.can-right::after {
  opacity: 1;
}
.newproj-tabs-shell.can-left {
  padding-left: 40px;
}
.newproj-tabs-shell.can-right {
  padding-right: 40px;
}
.newproj-tabs-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.newproj-tabs-arrow:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.newproj-tabs-arrow svg {
  display: block;
  flex: none;
}
.newproj-tabs-arrow.left { left: 6px; }
.newproj-tabs-arrow.right { right: 6px; }
.newproj-tabs-arrow.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
}
.newproj-tab {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 10px 6px;
  border: none;
  background: transparent;
  font-size: 12px;
  border-radius: 0;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.newproj-tab:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.newproj-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.newproj-body {
  padding: 18px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
}
.newproj-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.newproj-title-text { flex: 1 1 auto; min-width: 0; }
.newproj-title-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-panel));
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.newproj-name { width: 100%; }
.newproj-section { display: flex; flex-direction: column; gap: 6px; }
.newproj-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.newproj-media-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.newproj-media-field,
.newproj-media-options .newproj-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.newproj-model-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.newproj-model-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newproj-provider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.newproj-provider-badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.newproj-provider-badge.configured {
  border: 1px solid color-mix(in srgb, #4169e1 24%, transparent);
  background: color-mix(in srgb, #4169e1 10%, transparent);
  color: #3155c9;
}
.newproj-provider-badge.integrated {
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 78%, var(--text-strong));
}
.newproj-provider-badge.unsupported {
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.newproj-model-grid,
.newproj-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.newproj-option-grid.aspect-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.newproj-option-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}
.newproj-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.newproj-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.newproj-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
}
.newproj-model-card {
  min-height: 74px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.newproj-model-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.newproj-model-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.newproj-option-card {
  min-height: 62px;
  min-width: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.newproj-option-card small {
  color: var(--text-muted);
  font-size: 11px;
}
.aspect-grid .newproj-option-card {
  flex-direction: column;
  gap: 6px;
  padding: 10px 6px;
}
.aspect-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  line-height: 1.15;
  min-width: 0;
  max-width: 100%;
}
.aspect-copy strong {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.aspect-copy small {
  color: var(--text-muted);
  font-size: 11.5px;
}
.aspect-glyph {
  flex: none;
  width: 34px;
  height: 24px;
  border-radius: 4px;
  background: var(--bg-subtle);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
}
.aspect-1-1 { width: 22px; height: 22px; }
.aspect-16-9 { width: 32px; height: 18px; }
.aspect-9-16 { width: 18px; height: 32px; }
.aspect-4-3 { width: 28px; height: 21px; }
.aspect-3-4 { width: 21px; height: 28px; }
@media (max-width: 560px) {
  .newproj-model-grid,
  .newproj-option-grid,
  .newproj-option-grid.aspect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.newproj-skills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.skill-radio {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: flex-start;
  background: var(--bg-panel);
}
.skill-radio:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.skill-radio.active {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.skill-radio input { width: auto; margin-top: 2px; }
.skill-radio-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skill-radio-name { font-weight: 500; font-size: 13px; }
.skill-radio-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.newproj-empty {
  font-size: 12px; color: var(--text-muted);
  font-style: italic; padding: 8px 0;
}
.video-body,
.audio-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-subtle);
  flex: 1 1;
  min-height: 0;
}
.video-body video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  background: #000;
}
.audio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 480px);
  padding: 28px 32px;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.audio-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
  word-break: break-word;
}
.audio-card audio {
  width: 100%;
}
.newproj-create {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  margin-top: 4px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}
.newproj-import {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.newproj-create svg,
.newproj-import svg {
  display: block;
  flex: 0 0 auto;
}
.newproj-open-folder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.newproj-folder-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input, var(--bg));
  color: var(--text);
  box-sizing: border-box;
}
.newproj-folder-input:focus {
  outline: none;
  border-color: var(--accent);
}
.newproj-folder-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.newproj-footer {
  padding: 0 24px 16px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  flex: 0 0 auto;
}

/* -------- Fidelity cards (prototype tab) ---------------------------- */
.fidelity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}
.fidelity-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.fidelity-card:hover { border-color: var(--border-strong); }
.fidelity-card.active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent),
    0 1px 0 rgba(180, 90, 59, 0.04);
}
.fidelity-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 12 / 7;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
}
.fidelity-thumb-wireframe { background: #fbfaf6; }
.fidelity-thumb-high-fidelity { background: var(--bg-panel); }
.fidelity-card.active .fidelity-thumb { border-color: var(--accent-soft); }
.fidelity-label {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* -------- Toggle row (deck "speaker notes", template "animations") -- */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.toggle-row:hover { border-color: var(--border-strong); }
.toggle-row.on { border-color: var(--accent); background: var(--accent-tint); }
.toggle-row-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toggle-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.toggle-row-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.toggle-row-switch {
  flex: none;
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background 160ms ease;
}
.toggle-row-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 27, 26, 0.18);
  transition: transform 160ms cubic-bezier(0.2, 0, 0.2, 1);
}
.toggle-row.on .toggle-row-switch { background: var(--accent); }
.toggle-row.on .toggle-row-switch::after { transform: translateX(14px); }

/* -------- Template picker (template tab) ---------------------------- */
.template-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}
.template-option:hover { border-color: var(--border-strong); }
.template-option.active {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.template-radio {
  flex: none;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  position: relative;
}
.template-radio.active {
  border-color: var(--accent);
  background: var(--bg-panel);
}
.template-radio.active::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--accent);
}
.template-option-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.template-option-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.template-option-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.template-howto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
}
.template-howto-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.template-howto-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* -------- New project · connectors section (live-artifact tab) ----- */
.newproj-connectors { gap: 8px; }
.newproj-connectors-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.newproj-connectors-manage {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.newproj-connectors-manage:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.newproj-connectors-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.newproj-connectors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.newproj-connector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  max-width: 100%;
  min-width: 0;
}
.newproj-connector-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #3bb273;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3bb273 22%, transparent);
  flex: none;
}
.newproj-connector-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.newproj-connector-account {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.newproj-connectors-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.newproj-connectors-empty:hover {
  border-color: var(--accent);
  border-style: solid;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-subtle));
}
.newproj-connectors-empty:active { transform: translateY(1px); }
.newproj-connectors-empty:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.newproj-connectors-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.newproj-connectors-empty:hover .newproj-connectors-empty-icon {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.newproj-connectors-empty-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.newproj-connectors-empty-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.newproj-connectors-empty-body {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.newproj-connectors-empty-cta {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--accent);
}

/* -------- Design system picker (custom popover dropdown) ------------ */
.ds-picker { position: relative; }
.ds-picker-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ds-picker-trigger:hover { border-color: var(--border-strong); }
.ds-picker-trigger.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.ds-picker-meta {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ds-picker-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-extra-pill {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
}
.ds-picker-sub {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform 160ms ease;
}
.ds-picker-trigger.empty .ds-picker-title { color: var(--text-muted); font-weight: 500; }

/* Avatar — square with 2x2 swatch grid (or "none" diagonal slash). */
.ds-avatar {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ds-avatar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.ds-avatar-cell { display: block; }
.ds-avatar-stack {
  position: absolute;
  right: -2px;
  bottom: -2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  background: var(--text-strong);
  color: #fff;
  border-radius: 999px;
  border: 2px solid var(--bg-panel);
}
.ds-avatar-none {
  background: var(--bg-subtle);
  color: var(--text-faint);
}

/* Popover */
.ds-picker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: ds-pop-in 140ms cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes ds-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.ds-picker-search {
  flex: 1 1;
  padding: 6px 10px !important;
  font-size: 12.5px;
  background: var(--bg-panel);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
}
.ds-picker-mode {
  flex: none;
  display: inline-flex;
  padding: 2px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ds-picker-mode-btn {
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 500;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.ds-picker-mode-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}
.ds-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.ds-picker-list-design-systems {
  min-height: 120px;
}
.ds-picker-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.ds-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.ds-picker-item:hover { background: var(--bg-subtle); }
.ds-picker-item.active {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.ds-picker-item-text {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ds-picker-item-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-picker-item-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
}
.ds-picker-item-sub {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selection mark — a circle for single-select, a square for multi.
   In multi mode the active state shows the pick order (1 = primary). */
.ds-picker-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  color: transparent;
}
.ds-picker-mark.radio {
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  position: relative;
}
.ds-picker-mark.radio.active {
  border-color: var(--accent);
}
.ds-picker-mark.radio.active::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.ds-picker-mark.check {
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-panel);
  color: var(--bg-panel);
}
.ds-picker-mark.check.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.ds-picker-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ds-picker-foot-text { flex: 1 1; min-width: 0; }
.ds-picker-foot-text strong { color: var(--text); font-weight: 600; }
.ds-picker-clear {
  flex: none;
  padding: 4px 10px !important;
  font-size: 11px !important;
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.ds-picker-clear:hover { border-color: var(--border-strong) !important; }

.entry-side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 24px 20px;
}
.entry-side-foot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.entry-side-foot .foot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  color: var(--text-muted);
  align-self: flex-start;
  cursor: pointer;
  text-decoration: none;
}
.entry-side-foot-row .foot-pill {
  min-width: 0;
}
.entry-side-foot-row .foot-pill-follow {
  flex: 0 1 auto;
}
.entry-side-foot-row .foot-pill-pet-label,
.entry-side-foot-row .foot-pill-follow-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-side-foot .foot-pill:hover { background: var(--bg-panel); border-color: var(--border-strong); color: var(--text); }
.entry-side-foot .foot-pill .ico { font-size: 12px; opacity: 0.7; }

/* Language switcher pill + popover (entry sidebar foot). */
.lang-menu-wrap {
  position: relative;
  align-self: flex-start;
}
.lang-menu-wrap .lang-pill {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.lang-menu-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 180px;
  width: max-content;
  max-width: min(280px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.lang-menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lang-menu-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lang-menu-item:hover { background: var(--bg-subtle); }
.lang-menu-item.active { background: var(--bg-subtle); }
.lang-menu-item .lang-menu-code {
  color: var(--text-faint);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.lang-menu-item .lang-menu-check {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}

/* Right side */
.entry-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  min-height: 52px;
}
.entry-header-tabs-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.entry-tabs {
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.entry-tabs::-webkit-scrollbar { display: none; }
.entry-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: 14px 11px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  flex: 0 0 auto;
  white-space: nowrap;
}
.entry-tab:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.entry-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.entry-header-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.entry-tab-content {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 32px;
  background: var(--bg);
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tab-panel-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Older browsers ignore row-gap on flex with wrap — explicit row-gap keeps
     the wrapped row visually separated rather than flush against the pill. */
  row-gap: 8px;
}
.tab-panel-toolbar .toolbar-left {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.tab-panel-toolbar .toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.tab-panel-toolbar .toolbar-search {
  position: relative;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 280px;
}
/* Narrow columns (entry tab content sometimes lands at ~570px wide) — keep
   the segmented pill on its own row above the search/view toggle so the
   search input never collapses into a tiny stub squeezed between two pills. */
@media (max-width: 720px) {
  .tab-panel-toolbar { flex-direction: column; align-items: stretch; }
  .tab-panel-toolbar .toolbar-left { justify-content: flex-start; }
  .tab-panel-toolbar .toolbar-right { justify-content: space-between; }
  .tab-panel-toolbar .toolbar-search { max-width: none; }
}
.tab-panel-toolbar .toolbar-search input {
  padding-left: 30px;
  background: var(--bg-panel);
}
.tab-panel-toolbar .toolbar-search input[type='search']::-webkit-search-cancel-button {
  /* Hide the native clear control; we render our own styled button. */
  appearance: none;
  -webkit-appearance: none;
}
.tab-panel-toolbar .toolbar-search input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.tab-panel-toolbar .toolbar-search .toolbar-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.tab-panel-toolbar .toolbar-search .toolbar-search-clear:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.tab-panel-toolbar .toolbar-search .toolbar-search-clear:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
.tab-panel-toolbar .toolbar-search .search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 13px;
  pointer-events: none;
}
.tab-empty {
  padding: 48px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.connector-inline-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, #ff6b6b 45%, var(--line) 55%);
  border-radius: 12px;
  background: color-mix(in oklab, #ff6b6b 10%, var(--panel) 90%);
  color: color-mix(in oklab, #ff6b6b 70%, var(--fg) 30%);
  font-size: 13px;
  line-height: 1.45;
}

.connectors-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
}
.connectors-heading p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.tab-panel-toolbar .toolbar-search.connectors-search {
  flex: 0 1 320px;
  width: min(320px, 100%);
}
.tab-panel-toolbar .toolbar-search.connectors-search input {
  padding-right: 32px;
}
.connectors-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 64px 16px;
  text-align: center;
}
.connectors-empty-title {
  margin: 0;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  max-width: 480px;
  word-break: break-word;
}
.connectors-empty-body {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 480px;
}
.connectors-empty-action {
  margin-top: 8px;
}
.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.connector-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 168px;
  padding: 16px 16px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 180ms ease,
    background 140ms ease;
}
.connector-card:hover:not(.is-locked) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--text) 28%, var(--border));
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.25), var(--shadow-xs);
}
.connector-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--text) 48%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--text) 14%, transparent),
    0 8px 24px -14px rgba(0, 0, 0, 0.25);
}
.connector-card.status-connected {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--green) 5%, var(--bg-panel)) 0%,
    var(--bg-panel) 60%
  );
}
.connector-card.status-disabled { background: var(--bg-subtle); }
.connector-card.status-error {
  border-color: color-mix(in srgb, var(--red) 35%, var(--border));
}
.connector-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.connector-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.connector-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
  /* The title is now a flex row so a connection-status dot can sit
     inline next to the connector name without breaking the title's
     truncation. The name span owns the ellipsis; the dot stays at a
     fixed size on the trailing edge of the row. */
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.connector-card-title-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inline title-anchored connection dot. Sized + offset so it visually
   aligns with the title's cap-height rather than its full line-height,
   and given a soft halo on the connected variant so the live state
   reads as a small "online" pulse next to the connector name. The
   halo collapses to nothing in non-connected variants because today
   the dot is only rendered for `connected` (error/disabled use a
   separate pill in the action column). */
.connector-card-title-dot {
  flex: 0 0 auto;
  /* Optical alignment: pull the dot up by ~1px so it sits on the
     baseline of an uppercase letter rather than the descender line. */
  margin-top: -1px;
}

/* Connector brand mark. Used in two sizes: a compact 28px tile inside
   catalog cards (`size-sm`) and a 44px mark in the detail drawer head
   (`size-lg`). The wrapper also hosts the fallback initials tile so the
   image fades over a stable, themed surface — there is no flash of empty
   space while the network resolves and no broken-icon chrome if the
   request fails. The remote logos come from `logos.composio.dev`, keyed
   by the lowercased toolkit slug stripped of underscores; the URL is
   built in `ConnectorsBrowser.tsx` so the daemon's friendlier ids
   (`google_drive`) still resolve to the right CDN entry (`googledrive`). */
.connector-logo {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: hidden;
  isolation: isolate;
  /* `var(--bg-panel)` already inverts in dark mode, so the logo's
     transparent corners read cleanly on either theme. The remote SVGs
     ship with theme-aware fills (we request `?theme=light|dark` to
     match), but the soft border still gives them a tidy frame. */
  box-shadow: var(--shadow-xs);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.connector-logo.size-lg {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.connector-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Inset the rendered image a hair so brand marks with no built-in
     padding (small monograms, square photos) don't crash into the
     border on the small tile. */
  padding: 4px;
  /* Fade the image in when it lands so a slow connection doesn't pop
     content under the user's eye. The fallback underneath provides
     instant visual presence in the meantime. */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
  z-index: 1;
}
.connector-logo.size-lg .connector-logo-img {
  padding: 6px;
}
.connector-logo.state-loaded .connector-logo-img {
  opacity: 1;
  transform: scale(1);
}
/* Fallback initials tile. Three jobs, in priority order:
   1. While the image is pending, the tile is a *neutral skeleton* —
      no color, no letters showing through. The user shouldn't see a
      bright colored placeholder flash and then morph into a totally
      different brand mark when the SVG lands; that mismatch reads as
      "wrong logo" before it reads as "loading".
   2. Once the image has loaded, the tile is fully hidden. Composio
      SVGs frequently have transparent regions, and even a faint
      colored backdrop bleeds through and tints the brand — exactly
      the visual mixing we want to avoid. Hiding it (not just dimming)
      guarantees the real image owns the slot.
   3. Only when the network actually fails (`state-error`) — or when
      no slug was derivable in the first place (`is-fallback`) — do we
      promote the tile to a quiet brand mark with stable initials.
      Even then it's deliberately *muted*: a single low-saturation
      neutral surface, lighter weight type, and a subtle hue accent
      from a hashed palette so two adjacent fallbacks don't read as
      identical. The intent is "calm placeholder", never "louder than
      the real logos one row up". */
.connector-logo-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: transparent;
  background: var(--bg-subtle);
  text-transform: uppercase;
  z-index: 0;
  /* Default: skeleton mode. Initials are kept in the DOM (so a paint
     of the error state doesn't have to re-flow text) but rendered
     transparent. The only visible thing is the soft `--bg-subtle`
     surface, which sits flush with the wrapper border and reads as a
     quiet placeholder, not a brand. */
  transition:
    color 140ms ease-out,
    background-color 140ms ease-out,
    opacity 120ms ease-out;
}
.connector-logo.size-lg .connector-logo-fallback {
  font-size: 14px;
  letter-spacing: 0.04em;
}
/* Pending: gentle shimmer over the neutral surface so the user can
   tell something is loading, without a colored tile suggesting a
   particular brand. The shimmer only kicks in if the image takes
   long enough to matter — short loads finish before the animation
   even completes one cycle. */
.connector-logo.state-pending .connector-logo-fallback {
  background:
    linear-gradient(
      90deg,
      var(--bg-subtle) 0%,
      color-mix(in srgb, var(--bg-subtle) 60%, var(--bg-panel)) 50%,
      var(--bg-subtle) 100%
    );
  background-size: 200% 100%;
  animation: connector-logo-shimmer 1400ms ease-in-out infinite;
}
@keyframes connector-logo-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
/* Loaded: yank the fallback entirely. `visibility: hidden` keeps it
   out of the paint pipeline so transparent regions in the SVG can't
   composite over a colored backdrop. */
.connector-logo.state-loaded .connector-logo-fallback {
  visibility: hidden;
  opacity: 0;
}
/* Error / no-slug: quiet brand mark. Initials become visible, but in
   a muted neutral palette by default. The hashed palette below adds
   a hint of hue so a row of fallbacks isn't monotone, but every
   variant stays low-saturation and low-contrast against the card
   surface so the real logos always read as the focal point. */
.connector-logo.state-error .connector-logo-fallback,
.connector-logo.is-fallback .connector-logo-fallback {
  color: var(--text-muted);
  background: var(--bg-subtle);
  animation: none;
}
.connector-logo.state-error[data-palette='0'] .connector-logo-fallback,
.connector-logo.is-fallback[data-palette='0'] .connector-logo-fallback {
  background: color-mix(in oklab, var(--accent) 6%, var(--bg-subtle));
  color: color-mix(in oklab, var(--accent) 35%, var(--text-muted));
}
.connector-logo.state-error[data-palette='1'] .connector-logo-fallback,
.connector-logo.is-fallback[data-palette='1'] .connector-logo-fallback {
  background: color-mix(in oklab, #6b8afd 7%, var(--bg-subtle));
  color: color-mix(in oklab, #6b8afd 38%, var(--text-muted));
}
.connector-logo.state-error[data-palette='2'] .connector-logo-fallback,
.connector-logo.is-fallback[data-palette='2'] .connector-logo-fallback {
  background: color-mix(in oklab, #2dbfa8 7%, var(--bg-subtle));
  color: color-mix(in oklab, #2dbfa8 38%, var(--text-muted));
}
.connector-logo.state-error[data-palette='3'] .connector-logo-fallback,
.connector-logo.is-fallback[data-palette='3'] .connector-logo-fallback {
  background: color-mix(in oklab, #d18b3a 7%, var(--bg-subtle));
  color: color-mix(in oklab, #d18b3a 40%, var(--text-muted));
}
.connector-logo.state-error[data-palette='4'] .connector-logo-fallback,
.connector-logo.is-fallback[data-palette='4'] .connector-logo-fallback {
  background: color-mix(in oklab, #c356b3 6%, var(--bg-subtle));
  color: color-mix(in oklab, #c356b3 38%, var(--text-muted));
}
.connector-logo.state-error[data-palette='5'] .connector-logo-fallback,
.connector-logo.is-fallback[data-palette='5'] .connector-logo-fallback {
  background: color-mix(in oklab, #5d6b85 9%, var(--bg-subtle));
  color: color-mix(in oklab, #5d6b85 42%, var(--text-muted));
}
/* The wrapper border is what visually frames the tile. When the real
   image is loaded we keep it; in the fallback states we soften it a
   step so the tile recedes further compared to a card with a real
   logo on the same row. */
.connector-logo.state-error,
.connector-logo.is-fallback {
  border-color: var(--border-soft, var(--border));
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .connector-logo-img {
    transition: none;
    transform: none;
  }
  .connector-logo.state-pending .connector-logo-fallback {
    animation: none;
    background: var(--bg-subtle);
  }
}

/* Embedded catalog (Settings → Connectors). Cards are tighter here so
   the logo shrinks to 24px and sheds a touch of border radius so it
   reads as a quiet badge next to the connector name rather than a
   prominent brand mark. The card-top gap (already 8px in the embedded
   variant) keeps the logo close to the head copy. */
.connectors-panel-embedded .connector-logo.size-sm {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}
.connectors-panel-embedded .connector-logo.size-sm .connector-logo-img {
  padding: 3px;
}
.connectors-panel-embedded .connector-logo.size-sm .connector-logo-fallback {
  font-size: 10px;
}

.connector-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.connector-meta-item {
  white-space: nowrap;
}
.connector-meta-dot {
  color: var(--text-faint);
}
.connector-tools-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transform-origin: left center;
  will-change: transform, opacity;
}
.connector-tools-badge svg {
  opacity: 0.65;
}
.connector-tools-badge.is-ready {
  animation: connector-tools-badge-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.connector-tools-badge.is-ready svg {
  animation: connector-tools-badge-icon-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}
@keyframes connector-tools-badge-in {
  0% {
    opacity: 0;
    transform: translateY(3px) scale(0.92);
    border-color: color-mix(in srgb, var(--border) 40%, transparent);
    background: color-mix(in srgb, var(--bg-subtle) 60%, transparent);
  }
  55% {
    opacity: 1;
    border-color: color-mix(in srgb, var(--accent, var(--text-muted)) 30%, var(--border));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    border-color: var(--border);
    background: var(--bg-subtle);
  }
}
@keyframes connector-tools-badge-icon-in {
  0% {
    opacity: 0;
    transform: rotate(-12deg) scale(0.8);
  }
  100% {
    opacity: 0.65;
    transform: rotate(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .connector-tools-badge.is-ready {
    animation: connector-tools-badge-fade 180ms ease-out both;
  }
  .connector-tools-badge.is-ready svg {
    animation: none;
  }
  @keyframes connector-tools-badge-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
.connector-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.connector-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}
.connector-status.status-connected,
.connector-status-pill.status-connected {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 32%, transparent);
}
.connector-status.status-error,
.connector-status-pill.status-error {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.connector-status.status-disabled,
.connector-status-pill.status-disabled {
  opacity: 0.7;
}
.connector-status.status-pending,
.connector-status-pill.status-pending {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.connector-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.connector-description {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.connector-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
button.connector-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius);
  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease;
}
button.connector-action.is-connect {
  min-width: 92px;
}
button.connector-action.is-disconnect {
  min-width: 106px;
  color: var(--text-muted);
}
button.connector-action.is-disconnect:hover:not(:disabled) {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 35%, var(--border));
}
button.connector-action.is-cancel-authorization {
  min-width: 74px;
  color: var(--text-muted);
}
button.connector-action.is-loading {
  cursor: wait;
}
.connector-authorization-hint {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Connector gate — masks the grid when the Composio API key is missing. */
.connector-grid-wrap {
  position: relative;
}
.connector-grid-wrap.is-masked .connector-grid {
  filter: blur(2px) saturate(0.85);
  opacity: 0.55;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: filter 160ms ease, opacity 160ms ease;
}
/* When the gate is shown, anchor it to the visible first screen of the
   connectors tab instead of centering across the full (potentially long)
   connector list. We lift the tab-content into a flex column, let the
   connectors panel and the masked grid wrap stretch to fill the remaining
   viewport height, and hide overflow so the absolutely-positioned gate
   card remains fixed in the first-screen center. */
.entry-tab-content:has(> .tab-panel.connectors-panel > .connector-grid-wrap.is-masked) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tab-panel.connectors-panel:has(> .connector-grid-wrap.is-masked) {
  flex: 1 1 auto;
  min-height: 0;
}
.connector-grid-wrap.is-masked {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.connector-grid-wrap.is-masked .connector-grid {
  /* Prevent the blurred grid from introducing its own scroll height inside
     the now-clipped wrap — the wrap is our visible viewport for the gate. */
  max-height: 100%;
  overflow: hidden;
}
.connector-card.is-locked {
  cursor: not-allowed;
}

/* Embedded inside Settings → Connectors. The section-head already shows the
   "Connectors" heading + hint, so suppress the inner panel heading and let
   the toolbar collapse to just the search input. The masked gate keeps its
   absolute positioning relative to .connector-grid-wrap (already set), but
   we cap its height inside the modal so the gate stays visible without
   blowing the dialog out vertically. */
.tab-panel.connectors-panel.connectors-panel-embedded {
  gap: 14px;
}
.connectors-panel-embedded .tab-panel-toolbar {
  justify-content: flex-end;
  margin-top: -4px;
}
.connectors-panel-embedded .toolbar-left.connectors-heading {
  display: none;
}
.connectors-panel-embedded .toolbar-right {
  flex: 1 1 auto;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
}
.connectors-panel-embedded .tab-panel-toolbar .toolbar-search.connectors-search {
  flex: 0 1 320px;
  width: min(320px, 100%);
  max-width: 320px;
  min-width: 180px;
}

/* Provider tabs sit in the toolbar's left edge (right of the hidden inner
   heading). Today there is only Composio, but the segmented control is
   built so additional providers slot in without re-styling. */
.connectors-provider-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.connectors-provider-tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 140ms ease,
    color 140ms ease,
    box-shadow 180ms ease;
}
.connectors-provider-tab:hover:not(.is-active) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.connectors-provider-tab.is-active {
  color: var(--text);
  background: var(--bg-panel);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 0 0 1px color-mix(in srgb, var(--text) 12%, var(--border));
}
.connectors-provider-tab:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--text) 14%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.06);
}
.connectors-panel-embedded .connector-grid-wrap.is-masked {
  /* Cap the masked grid's height so the gate's centered card stays in the
     visible portion of the settings dialog without forcing the modal body
     to scroll past it. The grid below is blurred and intentionally clipped. */
  min-height: clamp(320px, 45vh, 420px);
  max-height: clamp(360px, 56vh, 560px);
  overflow: hidden;
  border-radius: var(--radius);
}
.connectors-panel-embedded .connector-grid-wrap.is-masked .connector-grid {
  max-height: 100%;
  overflow: hidden;
}
/* Compact catalog density inside the modal: tighter tracks, no description
   row, action collapsed to an icon-only button anchored top-right. */
.connectors-panel-embedded .connector-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}
.connectors-panel-embedded .connector-card {
  min-height: 0;
  padding: 10px 10px 10px 12px;
  gap: 6px;
}
.connectors-panel-embedded .connector-card-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
/* Two-row meta layout for the embedded catalog. The previous single
   row let long category labels wrap unpredictably, leaving cards in
   a 3-column grid with mismatched heights. Stacking onto its own
   rows fixes the height and gives the async tools-badge a stable
   anchor to animate into without resizing the card. */
.connectors-panel-embedded .connector-meta {
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  font-size: 11px;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
/* Category row: single line with ellipsis. The full label is still
   reachable via the `title` attribute on the span and the card's
   own openDetailsAria, so we never lose information. */
.connectors-panel-embedded .connector-meta-category {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
/* Tools-badge slot. Reserves its own row and a fixed height even
   while the discovery call is in flight (`aria-hidden` is set on the
   span before the badge resolves), so the card doesn't grow when
   the badge animates in. The fixed height matches the embedded
   badge's pill (1px + 1px borders + 10px text + 2px padding × 2 ≈
   18px). */
.connectors-panel-embedded .connector-meta-tools {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  /* Hairline visual placeholder while the discovery request is in
     flight — a 1px-tall faint baseline so the row reads as
     intentionally reserved space rather than an empty gap. The
     placeholder is dropped the moment the badge appears. */
  position: relative;
}
.connectors-panel-embedded .connector-meta-tools[aria-hidden="true"]::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}
/* The dot separator was only meaningful when the meta was a single
   inline row; in the stacked layout it would float orphaned at the
   start of the badge row. Hide it (the embedded card no longer
   renders it in JSX, but keep the rule defensive in case a future
   refactor reintroduces inline separators here). */
.connectors-panel-embedded .connector-meta .connector-meta-dot {
  display: none;
}
.connectors-panel-embedded .connector-tools-badge {
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 999px;
}
/* Anchor the action column to the top now that the meta block can be
   one or two rows tall — center alignment used to make the action
   drift down whenever the badge appeared. Keeping the action top-
   aligned matches the title baseline and stops the eye from
   tracking up and down across cards. */
.connectors-panel-embedded .connector-card-top {
  align-items: flex-start;
  gap: 8px;
}
.connectors-panel-embedded .connector-card-actions {
  /* Nudge the action button down a touch so it optically aligns with
     the title's cap-height instead of its top edge. */
  margin-top: 1px;
}

/* Icon-only connect/disconnect action: a 26px circular control anchored
   at the card's top-right edge. We keep the same `connector-action`
   class so loading/disabled state styling carries over from the
   shared rules above, but the visual treatment is overridden here so
   the catalog grid doesn't end up with a row of high-contrast filled
   squares competing for attention. The default state is a subtle
   ghost — almost recedes into the card — and the action picks up
   accent weight only when the card or the button itself is hovered
   or focused. The whole card is also clickable (it opens the
   details drawer where Connect lives at full size), so this is a
   secondary affordance, not the primary CTA. */
.connectors-panel-embedded .connector-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.connectors-panel-embedded button.connector-action.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  /* Reset the min-width from the non-embedded `.is-connect` /
     `.is-disconnect` pill rules above; in the compact catalog the
     action collapses to a 26px circle and any `min-width` would
     force it back into a wide pill that overlaps the card head
     text. */
  min-width: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 120ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}
/* Soft default fill so the ghost button still has a visible target on
   the lightest card backgrounds. We tint with `--text` rather than a
   solid color so the control reads correctly in both dark and light
   themes without per-theme overrides. */
.connectors-panel-embedded button.connector-action.icon-only {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}
/* When the parent card is hovered, the action gains a touch more weight
   so it telegraphs interactivity without ever flashing to full white.
   This applies whether the user is hovering the card or the button
   directly, so reaching for the action never feels like the button
   moves out from under them. */
.connectors-panel-embedded .connector-card:hover:not(.is-locked) button.connector-action.icon-only:not(:disabled),
.connectors-panel-embedded .connector-card:focus-visible button.connector-action.icon-only:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 9%, transparent);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}
.connectors-panel-embedded button.connector-action.icon-only:hover:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
}
.connectors-panel-embedded button.connector-action.icon-only:active:not(:disabled) {
  transform: scale(0.92);
}
.connectors-panel-embedded button.connector-action.icon-only:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.connectors-panel-embedded button.connector-action.icon-only:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .connectors-panel-embedded button.connector-action.icon-only {
    transition: background 80ms linear, color 80ms linear;
  }
  .connectors-panel-embedded button.connector-action.icon-only:active:not(:disabled) {
    transform: none;
  }
}

/* Connect (the "+" affordance). Refined into an accent-tinted ghost so
   the action reads as inviting rather than competing — the previous
   "fill with var(--text)" rule produced a hard off-white square in
   dark theme that fought every other card. Default state borrows a
   whisper of the accent so the plus is visibly the accent action of
   the card; hover/card-hover both lift the tint up while keeping the
   button transparent enough to feel like part of the card surface,
   not a stamped-on chip. */
.connectors-panel-embedded button.connector-action.is-connect {
  color: color-mix(in srgb, var(--accent) 76%, var(--text-muted));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.connectors-panel-embedded .connector-card:hover:not(.is-locked) button.connector-action.is-connect:not(:disabled),
.connectors-panel-embedded .connector-card:focus-visible button.connector-action.is-connect:not(:disabled) {
  color: var(--accent-strong, var(--accent));
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
.connectors-panel-embedded button.connector-action.is-connect:hover:not(:disabled) {
  color: var(--accent-strong, var(--accent));
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--accent) 56%, transparent);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}
.connectors-panel-embedded button.connector-action.is-connect:active:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Disconnect stays neutral until the user actually points at it, then
   warms to the destructive red so the "remove" intent is unambiguous.
   Slightly de-emphasized at rest compared to Connect — the connected
   row already carries a green status dot to communicate state, so
   this control doesn't need to advertise itself. */
.connectors-panel-embedded button.connector-action.is-disconnect {
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}
.connectors-panel-embedded .connector-card:hover:not(.is-locked) button.connector-action.is-disconnect:not(:disabled),
.connectors-panel-embedded .connector-card:focus-visible button.connector-action.is-disconnect:not(:disabled) {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 9%, transparent);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
}
.connectors-panel-embedded button.connector-action.is-disconnect:hover:not(:disabled) {
  color: var(--red, var(--text));
  background: color-mix(in srgb, var(--red, var(--text)) 14%, transparent);
  border-color: color-mix(in srgb, var(--red, var(--text)) 42%, transparent);
}

/* Connection-status pip. Lives inline next to the connector name in
   the embedded catalog (anchored via `.connector-card-title-dot`),
   and the same dot is reused in the drawer where the rules above
   handle the larger non-embedded variant. The halo is a `box-shadow`
   ring rather than a `border` so the dot's optical size stays at
   7px even with the green pulse around it. */
.connectors-panel-embedded .connector-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-muted);
  flex: 0 0 auto;
}
.connectors-panel-embedded .connector-status-dot.status-connected {
  background: var(--green, #22c55e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #22c55e) 22%, transparent);
}
.connectors-panel-embedded .connector-status-dot.status-error {
  background: var(--red, #ef4444);
}
.connectors-panel-embedded .connector-status-dot.status-disabled {
  background: var(--text-faint);
}
/* Error/disabled pills inside the compact card stay legible but small. */
.connectors-panel-embedded .connector-card .connector-status-pill {
  font-size: 10px;
  padding: 1px 6px;
}

/* On very narrow modals, keep tabs and search on one row while letting the
   search input absorb the squeeze. */
@media (max-width: 540px) {
  .connectors-provider-tabs {
    flex-shrink: 0;
  }
  .connectors-panel-embedded .tab-panel-toolbar .toolbar-search.connectors-search {
    min-width: 0;
  }
}
.connector-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--bg-panel) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 65%),
    color-mix(in srgb, var(--bg) 45%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  animation: connector-gate-fade 220ms ease-out;
  pointer-events: auto;
}
@keyframes connector-gate-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.connector-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 28px 28px 24px;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.18));
}
.connector-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.connector-gate-title {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.connector-gate-body {
  margin: 0;
  max-width: 340px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
/* ------------------------------------------------------------------ */
/* Connector detail drawer                                             */
/* ------------------------------------------------------------------ */
.connector-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, #000 42%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-end;
  animation: connector-drawer-fade 180ms ease;
}
@keyframes connector-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.connector-drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(480px, 92vw);
  height: 100%;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 48px -20px rgba(0, 0, 0, 0.32);
  animation: connector-drawer-slide 240ms cubic-bezier(0.22, 0.9, 0.3, 1);
}
@keyframes connector-drawer-slide {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.connector-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-subtle) 60%, transparent) 0%, transparent 100%);
}
.connector-drawer-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connector-drawer-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.connector-drawer-titles h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.connector-drawer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.connector-drawer-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  color: var(--text-muted);
}
.connector-drawer-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.connector-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.connector-drawer-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.connector-drawer-section-title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
.connector-drawer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.connector-drawer-description {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.connector-drawer-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 2px;
  gap: 2px;
  margin: 0;
  padding: 2px 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  overflow: hidden;
}
.connector-drawer-details > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  grid-gap: 12px;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-panel);
}
.connector-drawer-details > div + div {
  border-top: 1px solid var(--border);
}
.connector-drawer-details dt {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.connector-drawer-details dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  word-break: break-word;
}
.connector-drawer-details-error dd {
  color: var(--red);
}
.connector-drawer-empty {
  margin: 0;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.connector-drawer-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.connector-drawer-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 140ms ease, background 140ms ease;
}
.connector-drawer-tool:hover {
  border-color: color-mix(in srgb, var(--text) 20%, var(--border));
}
.connector-drawer-tool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.connector-drawer-tool-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.connector-drawer-tool-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.connector-drawer-tool-badge.side-read {
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border-color: color-mix(in srgb, var(--green) 28%, transparent);
  color: var(--green);
}
.connector-drawer-tool-badge.side-write {
  background: color-mix(in srgb, var(--amber, #d97706) 10%, transparent);
  border-color: color-mix(in srgb, var(--amber, #d97706) 28%, transparent);
  color: var(--amber, #d97706);
}
.connector-drawer-tool-badge.side-destructive {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border-color: color-mix(in srgb, var(--red) 30%, transparent);
  color: var(--red);
}
.connector-drawer-tool-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.connector-drawer-tool-name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connector-drawer-load-more {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 14px;
}
.connector-drawer-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: var(--bg-panel);
}
.connector-drawer-foot button.connector-action {
  padding: 7px 18px;
  font-size: 13px;
}
@media (max-width: 520px) {
  .connector-drawer-head {
    padding: 16px 16px 14px;
  }
  .connector-drawer-body {
    padding: 16px 16px 20px;
  }
  .connector-drawer-foot {
    padding: 12px 16px 16px;
  }
  .connector-drawer-details > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Recent / Your designs segmented pill */
.subtab-pill {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtab-pill::-webkit-scrollbar { display: none; }
.subtab-pill button {
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.subtab-pill button:hover:not(.active) { background: rgba(255,255,255,0.6); border-color: transparent; color: var(--text); }
.subtab-pill button.active {
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-xs);
}
/* Icon-only variant: any pill button whose sole child is an SVG icon.
   Center the glyph via inline-flex (removes text line-height drift) and
   use padding that matches the text variant's overall height so both
   sub-pills align on the same baseline in the toolbar. */
.subtab-pill button:has(> svg:only-child) {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Designs grid */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.design-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 168px;
}
.design-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.design-card-thumb {
  flex: 1 1;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  color: var(--text-faint);
  font-size: 38px;
  position: relative;
}
.design-card-thumb::before {
  /* Folder-shape icon */
  content: '';
  width: 56px;
  height: 44px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: 4px 6px 6px 6px;
  position: relative;
  box-shadow: var(--shadow-xs);
}
.design-card-thumb::after {
  /* Folder tab notch */
  content: '';
  position: absolute;
  width: 22px;
  height: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-top: -52px;
  margin-left: -26px;
}
.design-card-meta-block {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-panel);
}
.design-card-name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-strong);
}
.design-card-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.design-card-meta .ds {
  color: var(--accent);
}
.design-card-status {
  font-weight: 500;
}
.design-card-status-running {
  color: var(--accent);
}
.design-card-status-awaiting_input {
  color: var(--amber);
}
.design-card-status-queued,
.design-card-status-not_started,
.design-card-status-canceled {
  color: var(--text-muted);
}
.design-card-status-succeeded {
  color: var(--green);
}
.design-card-status-failed {
  color: var(--red);
}
.design-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  background: var(--bg-panel);
  opacity: 0;
  transition: opacity 0.15s;
  border-color: var(--border);
  z-index: 2;
  /* Keep button interactive for keyboard/AT users even while visually hidden. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.design-card:hover .design-card-close,
.design-card:focus-within .design-card-close,
.design-kanban-card:hover .design-card-close,
.design-kanban-card:focus-within .design-card-close,
.design-card-close:focus-visible { opacity: 1; }
.design-card-close:hover { color: var(--text-strong); border-color: var(--border-strong); }
/* Larger comfortable touch target on coarse pointers (tablets/touch laptops).
   On touch the hover reveal never fires, so keep the close button visible. */
@media (hover: none) {
  .design-card .design-card-close,
  .design-kanban-card .design-card-close { opacity: 1; }
}

/* Featured (tutorial) card variant */
.design-card.featured .design-card-thumb {
  background: linear-gradient(180deg, #e8efff 0%, #d8e3ff 100%);
}
.design-card.featured .design-card-thumb::before {
  background: var(--bg-panel);
  border-color: rgba(35, 72, 184, 0.18);
}
.design-card.featured .design-card-thumb::after { display: none; }

.live-artifact-card {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}
.live-artifact-card:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-strong));
}
.live-artifact-thumb {
  background:
    radial-gradient(circle at 32% 28%, rgba(116, 92, 255, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(66, 153, 225, 0.16), rgba(116, 92, 255, 0.12));
}
.live-artifact-thumb::before,
.live-artifact-thumb::after {
  display: none;
}
.live-artifact-thumb-glyph {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: var(--shadow-xs);
  font-size: 18px;
  line-height: 1;
}
.design-card-badges,
.live-artifact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 18px;
}
.live-artifact-badge,
.design-live-count {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
  background: var(--bg-panel);
}
.live-artifact-badge.live {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-panel));
}
.live-artifact-badge.refreshing {
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, 0.22);
  background: rgba(29, 78, 216, 0.08);
}
.live-artifact-badge.refresh-failed {
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.08);
}
.live-artifact-badge.archived {
  color: var(--text-muted);
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.live-artifact-badges.compact {
  display: inline-flex;
  gap: 4px;
  min-height: 0;
  vertical-align: middle;
}
.live-artifact-badges.compact .live-artifact-badge {
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.25;
}
.design-live-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  box-shadow: var(--shadow-xs);
}

/* Grid card keyboard focus (cards carry role="button" on a div). */
.design-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}

/* Kanban View */
.tab-panel.design-kanban-view {
  /* Fill the scrollable parent (.entry-tab-content) so columns can size to
     the available viewport without a fragile 100vh calc. */
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.design-kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  /* Let columns grow to fill the remaining vertical space inside
     .tab-panel.design-kanban-view. */
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 8px;
  /* Hint that horizontal content may overflow on narrow viewports. */
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
}
.design-kanban-col {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  padding: 12px;
  gap: 12px;
  min-height: 0;
  scroll-snap-align: start;
}
.design-kanban-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  padding-left: 2px;
  /* Prevent long status labels from pushing the count chip out of the column. */
  min-width: 0;
}
.design-kanban-header > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.design-kanban-count {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.design-kanban-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  /* Keep the scrollbar gutter from shifting the list when content grows. */
  padding-right: 4px;
  margin-right: -4px;
  flex: 1 1 auto;
  min-height: 0;
}
.design-kanban-empty {
  color: var(--text-faint);
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}
.design-kanban-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: var(--shadow-xs);
}
.design-kanban-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.design-kanban-card:active {
  transform: none;
}
.design-kanban-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-strong);
}
.design-kanban-card::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--text-muted);
}
.design-kanban-card.status-running::before { background: var(--accent); }
.design-kanban-card.status-awaiting_input::before { background: var(--amber); }
.design-kanban-card.status-succeeded::before { background: var(--green); }
.design-kanban-card.status-failed::before { background: var(--red); }
.design-kanban-card.status-not_started::before,
.design-kanban-card.status-queued::before,
.design-kanban-card.status-canceled::before { background: var(--text-muted); }

.design-kanban-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Reserve room for the absolutely-positioned close button. */
  padding-right: 20px;
}
.design-kanban-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.design-kanban-card-meta .ds {
  color: var(--text-strong);
  font-weight: 500;
}

/* Honor user motion preferences for the new hover transform / transitions
   introduced alongside the kanban view. */
@media (prefers-reduced-motion: reduce) {
  .design-card,
  .design-kanban-card {
    transition: none;
  }
  .design-card:hover,
  .design-kanban-card:hover {
    transform: none;
  }
}

/* Examples gallery */
.examples-panel { gap: 32px; }
.example-card {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  align-items: center;
}
.example-preview {
  position: relative;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 320px;
  overflow: hidden;
}
.example-preview iframe {
  width: 100%; height: 100%; border: none; background: white; pointer-events: none;
}
.example-preview-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 12px;
}
.example-meta { display: flex; flex-direction: column; gap: 12px; }
.example-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.example-prompt {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  font-style: italic;
}
.example-cta { align-self: flex-start; padding: 8px 18px; }
.example-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: white;
  flex-shrink: 0;
}

/* Design systems gallery — masonry-style cards with lazy showcase iframes
   serving as thumbnails. The grid mirrors the prompt-templates and example
   gallery surfaces so the three browse tabs feel uniform. */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
.ds-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ds-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.ds-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ds-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.ds-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.ds-card-thumb iframe {
  width: 200%;
  height: 200%;
  border: none;
  display: block;
  background: white;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
}
.ds-card-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-card-thumb-swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}
.ds-card-thumb-swatches > span { display: block; }
.ds-card-thumb-overlay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(15, 15, 18, 0.78);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ds-card:hover .ds-card-thumb-overlay,
.ds-card-thumb:focus-visible .ds-card-thumb-overlay {
  opacity: 1;
}
.ds-card-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  flex: 1 1;
}
.ds-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ds-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1;
  min-width: 0;
}
.ds-card-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
  flex-shrink: 0;
}
.ds-card-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.ds-card-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ds-card-swatches {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  height: 18px;
}
.ds-card-swatches > span {
  display: block;
  width: 14px;
  height: 100%;
}
.ds-card-swatches > span + span {
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}

/* Legacy list classes kept for any consumer outside the tab — the gallery
   itself no longer renders these. Safe to remove once nothing references
   them. */
.ds-list { display: flex; flex-direction: column; gap: 8px; }
.ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ds-row:hover { border-color: var(--border-strong); }
.ds-row.active { background: var(--accent-tint); border-color: var(--accent); }
.ds-row-body { flex: 1 1; min-width: 0; }
.ds-row-title {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-row-default {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 4px;
}
.ds-row-summary { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ds-row-swatches {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  height: 24px;
}
.ds-row-swatch {
  display: block;
  width: 16px;
  height: 100%;
}
.ds-row-swatch + .ds-row-swatch { border-left: 1px solid rgba(0, 0, 0, 0.05); }

@media (max-width: 900px) {
  .entry {
    grid-template-columns: 1fr !important;
    height: 100%;
    min-height: 0;
  }
  .entry-side {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .entry-side-resizer { display: none; }
  .example-card { grid-template-columns: 1fr; }
  .example-preview { height: 240px; }
}

/* ============================================================
   File workspace — tabs + viewer
   ============================================================ */
.workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
  flex: 1 1;
  overflow: hidden;
}
.ws-tabs-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  height: 44px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 4;
}
.ws-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  /* thinner scrollbar to avoid overlap */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.ws-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 220px;
  min-width: 0;
  color: var(--text-muted);
  transition: background 120ms ease, color 120ms ease;
}
.ws-tab.live-artifact-tab {
  max-width: 320px;
}
.ws-tab:hover { background: var(--bg-subtle); color: var(--text); }
.ws-tab.draggable { cursor: -webkit-grab; cursor: grab; }
.ws-tab.dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
  opacity: 0.55;
}
.ws-tab.drag-over-before {
  box-shadow: inset 2px 0 0 var(--accent);
  background: var(--bg-subtle);
  color: var(--text);
}
.ws-tab.drag-over-after {
  box-shadow: inset -2px 0 0 var(--accent);
  background: var(--bg-subtle);
  color: var(--text);
}
.ws-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-tab.active {
  background: var(--bg-subtle);
  color: var(--text);
  font-weight: 500;
}
.ws-tab .tab-icon {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--text-muted);
  width: 14px;
  text-align: center;
}
.ws-tab.active .tab-icon { color: var(--text); }
.ws-tab-label {
  flex: 1 1 auto;
  min-width: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.ws-tab.live-artifact-tab .ws-tab-label {
  max-width: none;
}
.ws-live-artifact-badges {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  max-width: none;
  overflow: visible;
}
.ws-live-artifact-badges .live-artifact-badge:not(.live):not(.refreshing):not(.refresh-failed):not(.archived) {
  display: none;
}
.ws-live-artifact-badges:has(.refreshing) .live-artifact-badge.live {
  display: none;
}
.ws-tab-close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
  color: var(--text-faint);
  border-radius: 4px;
  margin-left: 2px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-tab-close:hover { background: var(--border); color: var(--text); }

.ws-tab.design-files-tab {
  font-weight: 500;
  color: var(--text);
  /* Pin the Design Files entry to the left edge of the horizontally
     scrollable tab strip so the user always has a way back to the file
     list even when many tabs overflow. Without sticky positioning,
     Design Files sits at flex index 0 and scrolls off the left edge
     once the strip is wide enough to require horizontal scrolling.
     Issue #775. */
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  /* Solid panel surface so other tabs that scroll past underneath the
     sticky element do not visibly bleed through. */
  background: var(--bg-panel);
  /* Subtle right-edge shadow signals the visual separation when other
     tabs are scrolled beneath it. */
  box-shadow: 4px 0 6px -4px rgba(0, 0, 0, 0.12);
}
.ws-tab.design-files-tab.active {
  /* Active state should still read as selected; layer the active tint
     over the sticky panel surface. */
  background: var(--bg-subtle);
}

.ws-tabs-actions { display: inline-flex; gap: 4px; align-items: center; }
.ws-focus-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ws-focus-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.ws-focus-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ws-tab-action {
  padding: 4px 12px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.ws-tab-action:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); border-color: transparent; }
.ws-tab-action.share {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
  font-weight: 500;
}
.ws-tab-action.share:hover:not(:disabled) {
  background: #000;
  border-color: #000;
}

.ws-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* -------- Design Files panel (full right pane) ---------------------- */
.df-panel {
  flex: 1 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  min-height: 0;
  background: var(--bg);
}
.df-panel.no-preview { grid-template-columns: minmax(0, 1fr); }
.df-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.df-main:last-child { border-right: none; }
.df-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
}
.df-head .icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.df-head .icon-only:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.df-head .crumbs {
  font-size: 12.5px;
  color: var(--text);
  margin-left: 4px;
  font-weight: 500;
}
.df-head .df-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
}
.df-head .df-actions button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.df-head .df-actions button:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.df-head .df-actions button.danger { color: var(--red); }
.df-head .df-actions button.danger:hover:not(:disabled) { background: var(--red-bg); color: var(--red); }

.df-body {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0 0;
}
.df-group-toggle {
  margin: 0 20px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11.5px;
}
.df-group-toggle > span {
  padding: 0 6px 0 4px;
  color: var(--text-faint);
}
.df-group-toggle button {
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 11.5px;
}
.df-group-toggle button:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.df-group-toggle button.active {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
.df-section { display: flex; flex-direction: column; gap: 0; }
.df-section + .df-section { margin-top: 6px; }
.df-section-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 12px 20px 6px;
}
.df-section-toggle {
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.df-section-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.df-section-toggle span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.df-section-row td {
  padding: 10px 20px 4px;
  border-top: 1px solid var(--border);
}
.df-section-row:first-child td {
  border-top: none;
}
.df-section-count {
  margin-left: 8px;
  color: var(--text-faint);
  font-weight: 500;
  letter-spacing: 0;
}
/* --- file list table --- */
.df-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.df-table thead { border-bottom: 1px solid var(--border); }
.df-th-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.df-th-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.df-th-sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  padding: 12px 20px 6px;
  text-align: left;
  white-space: nowrap;
  transition: color 120ms ease;
}
.df-th-sortable:hover { color: var(--text); }
.df-th-check, .df-cell-check { width: 28px; padding: 10px 0 10px 20px; }
.df-th-icon, .df-cell-icon { width: 36px; padding: 10px 0; }
.df-th-name { width: auto; }
.df-th-kind { width: 110px; }
.df-th-time { width: 100px; }
.df-th-menu, .df-cell-menu { width: 32px; padding: 10px 20px 10px 0; }
.df-sort-arrow { font-size: 10px; }

.df-file-row {
  transition: background 120ms ease;
}
.df-file-row:hover { background: var(--bg-subtle); }
.df-file-row.active:not(.selected) { background: var(--bg-subtle); }
.df-file-row.active.selected { background: var(--blue-bg); }
.df-file-row.active .df-row-name { color: var(--text-strong); }
.df-file-row.selected { background: var(--blue-bg); }

.df-cell-check {
  text-align: center;
  vertical-align: middle;
}
.df-cell-icon {
  text-align: center;
  vertical-align: middle;
}
.df-cell-name {
  padding: 10px 12px 10px 0;
  vertical-align: middle;
}
.df-cell-openable {
  cursor: pointer;
}
.df-row-name-btn {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.df-row-name-btn:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}
.df-row-name-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.df-cell-kind {
  padding: 10px 12px 10px 0;
  vertical-align: middle;
}
.df-cell-time {
  padding: 10px 12px 10px 0;
  vertical-align: middle;
  font-size: 11.5px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.df-cell-menu {
  text-align: center;
  vertical-align: middle;
}
.df-kind-label {
  font-size: 12px;
  color: var(--text-muted);
}

/* --- pagination --- */
.df-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.df-pagination-start {
  justify-content: flex-start;
}
.df-pagination-center {
  justify-content: center;
}
.df-pagination-end {
  justify-content: flex-end;
}
.df-pagination-right {
  margin-left: auto;
}
.df-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.df-pagination select {
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.df-pagination select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.df-page-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.df-page-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text);
}
.df-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.df-page-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.df-page-info {
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 11.5px;
}

.df-row {
  display: grid;
  grid-template-columns: 28px 36px 1fr auto auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background 120ms ease;
}
.df-row-live-artifact {
  grid-template-columns: 36px minmax(0, 1fr) auto;
}
.df-row:hover { background: var(--bg-subtle); }
.df-row.active { background: var(--blue-bg); color: var(--text); }
.df-row.active .df-row-name { color: var(--text-strong); }
.df-row.selected { background: var(--blue-bg); }

.df-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.df-row-check:hover { background: var(--border); color: var(--text); }
.df-row-check[aria-checked="true"] { color: var(--accent-strong); }

.df-select-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.df-select-all {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.df-select-all:hover { background: var(--bg-subtle); color: var(--text); }
.df-row-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 14px;
  position: relative;
}
.df-row-icon[data-kind="folder"] { background: var(--bg-muted); color: var(--text-soft); }
.df-row-icon[data-kind="html"] { background: var(--accent-tint); color: var(--accent-strong); }
.df-row-icon[data-kind="image"] { background: var(--green-bg); color: var(--green); }
.df-row-icon[data-kind="code"] { background: #fff7d8; color: #8c6700; }
.df-row-icon[data-kind="text"] { background: var(--bg-subtle); color: var(--text-muted); }
.df-row-icon[data-kind="sketch"] { background: var(--purple-bg); color: var(--purple); }
.df-row-name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.df-row-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.df-rename-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  padding: 3px 6px;
}
.df-row-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.df-row-time {
  font-size: 11.5px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.df-row-menu {
  background: transparent;
  border: none;
  padding: 4px 6px;
  color: var(--text-muted);
  font-size: 16px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.df-row:hover .df-row-menu { opacity: 1; }
.df-row-menu:focus { opacity: 1; }
.df-row-menu:hover { background: var(--border); color: var(--text); }
.df-section-more {
  margin: 6px 20px 10px;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
}
.df-section-more:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text);
}
.df-row-collapse {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0;
  width: 18px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}
.df-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.df-drop {
  margin: 18px 16px 16px;
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  color: var(--text-muted);
}
.df-drop.dragging {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  color: var(--text);
}
.df-drop .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.df-drop .desc {
  font-size: 12px;
  line-height: 1.5;
  max-width: 56ch;
}

/* Right preview pane in design files */
.df-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
}
.df-preview-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 13px;
  padding: 32px;
}
.df-preview-thumb {
  margin: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  aspect-ratio: 16/10;
  flex-shrink: 0;
  position: relative;
}
.df-preview-thumb iframe,
.df-preview-thumb img,
.df-preview-thumb video {
  width: 100%; height: 100%; border: none; background: white; object-fit: cover; display: block;
}
.df-preview-thumb audio {
  width: calc(100% - 24px);
  position: absolute;
  left: 12px;
  bottom: 12px;
}
.df-preview-meta {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.df-preview-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  word-break: break-word;
}
.df-preview-kind { font-size: 12px; color: var(--text-muted); }
.df-preview-stats { font-size: 11.5px; color: var(--text-muted); }
.df-preview-actions { display: inline-flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.df-preview-actions button {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.df-preview-actions button:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

/* Row context menu */
.df-row-popover {
  position: fixed;
  z-index: 200;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
}
.df-row-popover button {
  background: transparent;
  border: none;
  padding: 7px 10px;
  font-size: 12.5px;
  text-align: left;
  border-radius: 4px;
  color: var(--text);
}
.df-row-popover button:hover { background: var(--bg-subtle); }
.df-row-popover button.danger { color: var(--red); }
.df-row-popover button.danger:hover { background: var(--red-bg); }

/* -------- Viewer ---------------------------------------------------- */
.viewer {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 12.5px;
  color: var(--text-muted);
  gap: 8px;
  height: 44px;
  flex-shrink: 0;
}
.viewer-toolbar-left { display: inline-flex; align-items: center; gap: 8px; }
.viewer-toolbar-actions { display: inline-flex; gap: 2px; align-items: center; }
.viewer-toolbar .icon-only,
.viewer-toolbar-actions .icon-only {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.viewer-toolbar .icon-only:hover:not(:disabled),
.viewer-toolbar-actions .icon-only:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.viewer-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.viewer-action:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text); }
.viewer-action.active {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.viewer-action.primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: white;
}
.viewer-action.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}
/* Primary actions support a subtle in-flight affordance via data-running. Keeps
   layout stable (unlike :disabled-only) so locale text width doesn't jump. */
.viewer-action.primary[data-running='true'] {
  opacity: 0.75;
  cursor: progress;
}
/* Preview-only controls: keep layout stable across modes.
   When inactive, reserve the same horizontal slot but fully disable interaction. */
.viewer-preview-controls {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  transition: opacity 140ms ease;
}
.viewer-preview-controls[data-active='false'] {
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.viewer-zoom-level {
  min-width: 60px;
  justify-content: center;
}
.viewer-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.viewer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.viewer-toggle .switch {
  position: relative;
  width: 28px;
  height: 16px;
  background: var(--bg-muted);
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  transition: background 120ms ease;
}
.viewer-toggle .switch::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px; height: 12px;
  background: var(--bg-panel);
  border-radius: 50%;
  transition: transform 120ms ease;
  box-shadow: var(--shadow-xs);
}
.viewer-toggle.on .switch,
.viewer-toggle.active .switch { background: var(--text); border-color: var(--text); }
.viewer-toggle.on .switch::after,
.viewer-toggle.active .switch::after { transform: translateX(12px); }
.viewer-tabs { display: inline-flex; gap: 2px; }
.viewer-tab {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  white-space: nowrap;
}
.viewer-tab:hover { background: var(--bg-subtle); color: var(--text); }
.viewer-tab.active {
  background: var(--bg-subtle);
  color: var(--text);
  font-weight: 500;
}
.viewer-meta { font-size: 12px; color: var(--text-muted); }
.ghost-link {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ghost-link:hover { background: var(--bg-subtle); color: var(--text); }
.viewer-body {
  flex: 1 1;
  min-height: 0;
  position: relative;
  background: var(--bg);
  overflow: auto;
}
.live-artifact-refresh-notice {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12.5px;
}
.live-artifact-refresh-notice-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.live-artifact-refresh-notice strong {
  color: var(--text);
  font-weight: 600;
}
.live-artifact-refresh-notice .icon-only {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font-size: 16px;
}
.live-artifact-refresh-notice .icon-only:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.live-artifact-refresh-notice.running {
  background: var(--bg-subtle);
}
.live-artifact-refresh-notice.success {
  background: var(--green-bg);
  border-color: var(--green-border);
  color: var(--green);
}
.live-artifact-refresh-notice.error {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}
.live-artifact-refresh-notice.success strong,
.live-artifact-refresh-notice.error strong {
  color: inherit;
}

.live-artifact-code-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.live-artifact-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.live-artifact-code-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.live-artifact-code-copy strong {
  font-size: 13px;
  color: var(--text);
}
.live-artifact-code-copy span {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-artifact-code-tabs {
  flex-shrink: 0;
}
.live-artifact-code-panel pre.viewer-source {
  flex: 1 1 auto;
  min-height: 0;
}

/* ============================================================
   Live artifact — Refresh history panel
   ============================================================ */
.live-artifact-refresh-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 22px 28px;
  color: var(--text);
  background: var(--bg);
  min-height: 100%;
}
.live-artifact-refresh-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.04));
}
.live-artifact-refresh-hero-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.live-artifact-refresh-hero-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.live-artifact-refresh-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.live-artifact-refresh-hero-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.live-artifact-refresh-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-artifact-refresh-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.live-artifact-refresh-value.muted {
  color: var(--text-muted);
  font-weight: 500;
}
.live-artifact-refresh-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Refresh status badges reuse the .live-artifact-badge pill shape with tone mixins */
.live-artifact-badge.refresh-status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.live-artifact-badge.refresh-status.tone-neutral {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--bg-panel);
}
.live-artifact-badge.refresh-status.tone-running {
  color: #1d4ed8;
  border-color: rgba(29, 78, 216, 0.22);
  background: rgba(29, 78, 216, 0.08);
}
.live-artifact-badge.refresh-status.tone-success {
  color: var(--green);
  border-color: var(--green-border);
  background: var(--green-bg);
}
.live-artifact-badge.refresh-status.tone-warning {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 28%, transparent);
  background: var(--amber-bg);
}
.live-artifact-badge.refresh-status.tone-error {
  color: var(--red);
  border-color: var(--red-border);
  background: var(--red-bg);
}

.live-artifact-refresh-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.live-artifact-refresh-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  min-width: 0;
}
.live-artifact-refresh-fact .live-artifact-refresh-value {
  font-size: 13px;
  font-weight: 600;
}

.live-artifact-refresh-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-artifact-refresh-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.live-artifact-refresh-section-header h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-artifact-refresh-hint {
  font-size: 11.5px;
  color: var(--text-muted);
}
.live-artifact-refresh-empty {
  padding: 16px 18px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.live-artifact-refresh-empty em {
  font-style: normal;
  font-weight: 600;
  color: var(--text);
}

.live-artifact-refresh-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  overflow: hidden;
}
.live-artifact-refresh-event {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-column-gap: 12px;
  column-gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  position: relative;
}
.live-artifact-refresh-event:last-child {
  border-bottom: none;
}
.live-artifact-refresh-event-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  justify-self: center;
  background: var(--border-strong);
  box-shadow: 0 0 0 3px var(--bg-panel);
}
.live-artifact-refresh-event.tone-running .live-artifact-refresh-event-dot {
  background: #1d4ed8;
  animation: liveArtifactRefreshPulse 1.5s ease-in-out infinite;
}
.live-artifact-refresh-event.tone-success .live-artifact-refresh-event-dot {
  background: var(--green);
}
.live-artifact-refresh-event.tone-error .live-artifact-refresh-event-dot {
  background: var(--red);
}
@keyframes liveArtifactRefreshPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
.live-artifact-refresh-event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.live-artifact-refresh-event-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.live-artifact-refresh-event-time {
  font-size: 11.5px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.live-artifact-refresh-event-detail {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

.live-artifact-refresh-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  overflow: hidden;
}
.live-artifact-refresh-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 12px;
  column-gap: 12px;
  grid-row-gap: 6px;
  row-gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft, var(--border));
  align-items: center;
}
.live-artifact-refresh-tile:last-child {
  border-bottom: none;
}
.live-artifact-refresh-tile-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.live-artifact-refresh-tile-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-artifact-refresh-tile-meta code {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
}
.live-artifact-refresh-tile-side {
  display: inline-flex;
  justify-self: end;
}
.live-artifact-refresh-tile-error {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1.5;
  word-break: break-word;
}
.live-artifact-refresh-tile-error.neutral {
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-color: var(--border);
}

.live-artifact-refresh-kv {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}
.live-artifact-refresh-kv > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.live-artifact-refresh-kv dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.live-artifact-refresh-kv dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}
.live-artifact-refresh-kv dd code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
}

.live-artifact-refresh-raw {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  overflow: hidden;
}
.live-artifact-refresh-raw > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style: none;
}
.live-artifact-refresh-raw > summary::-webkit-details-marker { display: none; }
.live-artifact-refresh-raw > summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  transition: transform 120ms ease;
  color: var(--text-faint);
}
.live-artifact-refresh-raw[open] > summary::before {
  transform: rotate(90deg);
}
.live-artifact-refresh-raw > summary:hover {
  background: var(--bg-subtle);
}
.live-artifact-refresh-raw-note {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.live-artifact-refresh-raw pre.viewer-source {
  border-top: 1px solid var(--border);
  min-height: 0;
  max-height: 320px;
  overflow: auto;
}

@media (max-width: 640px) {
  .live-artifact-refresh-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .live-artifact-refresh-hero-meta {
    align-items: flex-start;
  }
  .live-artifact-refresh-hero-metric {
    align-items: flex-start;
    text-align: left;
  }
}
.viewer-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
.comment-preview-layer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.comment-frame-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.comment-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.board-pod-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.board-pod-stroke polyline {
  fill: none;
  stroke: rgba(22, 119, 255, 0.95);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(22, 119, 255, 0.28));
}
.comment-target-overlay {
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--comment-overlay-border, #1677ff);
  background: var(--comment-overlay-bg, rgba(22, 119, 255, 0.24));
  box-shadow: 0 0 0 1px var(--comment-overlay-ring, rgba(22, 119, 255, 0.18));
}
.comment-target-overlay.selected {
  border-width: 2px;
}
.comment-target-overlay-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.comment-saved-marker {
  position: absolute;
  pointer-events: none;
}
.comment-saved-outline {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(22, 119, 255, 0.72);
  background: rgba(22, 119, 255, 0.08);
}
.comment-saved-pin {
  position: absolute;
  z-index: 2;
  left: -8px;
  top: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid #0958d9;
  border-radius: var(--radius-pill);
  background: #1677ff;
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
}
.comment-saved-pin:hover {
  background: #0958d9;
  transform: translateY(-1px);
}
.comment-popover {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 4;
  width: min(320px, calc(100% - 28px));
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
}
.comment-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.comment-popover-head div {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.comment-popover-head strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-popover-head span {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-popover-head button.ghost {
  flex: 0 0 auto;
  white-space: nowrap;
}
.board-pod-summary {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.board-pod-summary strong {
  font-size: 12px;
}
.board-pod-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.board-pod-chip {
  padding: 3px 7px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 11px;
}
.board-note-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-bottom: 8px;
}
.board-note-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 12px;
}
.board-note-item span {
  /* The note span sits next to a Remove button inside a fixed-width
     ~300px popover. Without flex: 1 + min-width: 0 + overflow-wrap an
     unbroken long string (URL, hash, base64) refuses to break and
     pushes the popover layout sideways past its 320px boundary.
     Issue #782. */
  flex: 1 1;
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.comment-popover textarea {
  min-height: 78px;
  max-height: 120px;
  resize: vertical;
}
.comment-popover-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.comment-popover-actions > * {
  /* Buttons may carry labels longer than their natural fair-share of the
     320px popover width (Save comment, Send to chat, Sending..., Add note,
     Remove). Without an explicit shrink ceiling and wrap, the row pushes
     past the popover's right edge instead of breaking onto a new line.
     Issue #779. */
  max-width: 100%;
}
.comment-popover-remove {
  color: var(--red);
  background: transparent;
  border-color: transparent;
}
.comment-popover-remove:hover:not(:disabled) {
  background: var(--red-bg);
  border-color: var(--red-border);
}

/* Inspect panel — sibling of the comment popover. Anchored to the
   right side of the preview surface. Width is fixed so layout doesn't
   reflow as the user scrubs slider values; controls reserve space for
   their numeric readouts. */
.inspect-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 296px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-lg);
  font-size: 12px;
}
.inspect-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.inspect-panel-head > button {
  /* Without an explicit shrink-floor, a long selected-component label
     in the title can squeeze the Close button so narrowly that the
     "x" glyph stacks into a vertical layout on some font/zoom
     combinations. Pinning flex-shrink: 0 keeps the close affordance
     on a stable single-line size regardless of label length. Issue
     #785. */
  flex-shrink: 0;
}
.inspect-panel-title {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}
.inspect-panel-title strong {
  /* Long target.label values (deeply-nested component selectors) used
     to spill past the title container and out of the panel because
     this rule had no overflow constraint. Truncate with ellipsis;
     the <strong> carries title={label} so the full string is still
     visible on hover. Issue #780. */
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspect-panel-title code {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MCP Copy button floats above a syntax-highlighted <pre>; .ghost's
   transparent background let the dark code surface bleed through and
   made the affordance effectively invisible. Pin a solid panel
   background here (not inline) so button.ghost:hover:not(:disabled)
   still wins the cascade. Issue #742. */
button.ghost.mcp-copy-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
button.ghost.mcp-copy-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}
.inspect-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inspect-section-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inspect-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}
.inspect-row > label {
  color: var(--text-muted);
  font-size: 11px;
}
.inspect-row input[type='color'] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
}
.inspect-row input[type='text'],
.inspect-row select {
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  font-size: 11px;
  font-family: inherit;
}
.inspect-row input[type='range'] {
  width: 100%;
}
.inspect-row-value {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 11px;
  min-width: 42px;
  text-align: right;
}
.inspect-panel-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.inspect-panel-error {
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--red-border);
  border-radius: 4px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 11px;
}

.inspect-empty-hint-container {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.inspect-empty-hint-container button,
.inspect-empty-hint-container .close-button {
  pointer-events: auto;
}

.inspect-empty-hint code {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg);
  font-size: 11px;
}

.comments-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: auto;
}
.comments-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comments-section h3 {
  margin: 0;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comments-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-faint);
  font-size: 12px;
}
.comment-card {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.comment-card.attached {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
}
.comment-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.comment-card-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.comment-card p {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.comment-card-action {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11.5px;
}
.comment-card-action:hover {
  border-color: var(--accent-soft);
  color: var(--accent-strong);
}
.comment-card-action.danger {
  color: var(--red);
}
.comment-card-action.danger:hover {
  border-color: var(--red-border);
  background: var(--red-bg);
}
.comment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  color: var(--text-faint);
  font-size: 11px;
}
.comment-card-meta span {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-card-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 4px;
  color: var(--text-faint);
}
.comments-footer {
  display: flex;
  justify-content: flex-start;
  padding-top: 2px;
}
.comments-footer .primary {
  padding: 6px 12px;
  font-size: 12px;
}
.comment-history-attachments {
  gap: 6px;
}
.viewer-source {
  margin: 0;
  padding: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: var(--bg-panel);
  min-height: 100%;
}

/* Code viewer with line numbers */
.code-viewer {
  background: var(--bg-panel);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  min-height: 100%;
}
.code-viewer .gutter {
  background: var(--bg);
  color: var(--text-faint);
  text-align: right;
  padding: 16px 12px 16px 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-right: 1px solid var(--border-soft);
  white-space: pre;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.code-viewer .lines {
  padding: 16px 16px 16px 18px;
  white-space: pre;
  overflow-x: auto;
  color: var(--text);
}

.viewer-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
/* Compact horizontal variant for the upload-failure banner: the message
   sits inline next to a dismiss button so the user can clear the stale
   notice without changing tabs. Issue #786. */
.viewer-empty.viewer-empty-dismissible {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: left;
}
.document-preview {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 40px 56px;
  color: var(--text);
}
.document-preview h2 {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1.25;
}
.document-preview section {
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
  margin-top: 18px;
}
.document-preview h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.document-preview p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.markdown-rendered {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 28px 40px;
  color: var(--text);
  line-height: 1.65;
  white-space: normal;
}
.markdown-status {
  margin: 12px auto 0;
  max-width: 900px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-size: 12px;
}
.markdown-status-error {
  border-color: color-mix(in oklab, var(--danger, #d04b4b) 45%, var(--border-soft));
  color: var(--danger, #d04b4b);
}
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  margin: 20px 0 10px;
  line-height: 1.25;
}
.markdown-rendered p { margin: 10px 0; }
.markdown-rendered ul,
.markdown-rendered ol {
  margin: 10px 0;
  padding-left: 24px;
}
.markdown-rendered blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-panel);
}
.markdown-code-block {
  position: relative;
}
.markdown-code-copy {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-panel) 92%, black 8%);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}
.markdown-code-block:hover .markdown-code-copy,
.markdown-code-block:focus-within .markdown-code-copy {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .markdown-code-copy {
    opacity: 1;
    transform: translateY(0);
  }
}
.markdown-code-copy:hover,
.markdown-code-copy:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg-elevated, var(--bg));
}
.markdown-code-toast {
  position: absolute;
  top: 18px;
  right: 82px;
  z-index: 1;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 18%, var(--bg-panel));
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 7px 10px;
  box-shadow: 0 10px 26px color-mix(in oklab, var(--accent) 18%, transparent);
}
.markdown-rendered pre {
  margin: 12px 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 40px 12px 12px;
  overflow: auto;
}
.markdown-rendered code {
  font-family: var(--mono);
  font-size: 12px;
}
.markdown-rendered a { color: var(--accent); }
.image-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.image-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Sketch editor */
.sketch-editor {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.sketch-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  flex-wrap: wrap;
}
.sketch-tool {
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  min-width: 32px;
}
.sketch-tool:hover { background: var(--bg-subtle); }
.sketch-tool.active { background: var(--accent); color: white; border-color: var(--accent); }
.sketch-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.sketch-color { width: 32px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.sketch-size { width: 80px; background: transparent; border: none; }
.sketch-spacer { flex: 1 1; }
.sketch-canvas-wrap { flex: 1 1; min-height: 0; position: relative; background: var(--bg); }
.sketch-canvas-wrap canvas { display: block; cursor: crosshair; }

/* ===========================================================
   Streaming chat: assistant message header, prose, thinking,
   tool cards, status pills, grouped action card.
   =========================================================== */
.chat-empty-wrap {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 8px;
  min-height: 100%;
}
.chat-empty {
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  max-width: 44ch;
}
.chat-empty-title { font-weight: 600; color: var(--text-strong); font-size: 15px; }
.chat-empty-hint { line-height: 1.6; }

.chat-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}

.chat-example {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  color: var(--text);
  font: inherit;
  overflow: hidden;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
  opacity: 0;
  animation: chat-example-in 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.chat-example::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--accent-tint) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.chat-example:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  background: var(--bg-panel);
}
.chat-example:hover::before {
  opacity: 1;
}
.chat-example:active {
  transform: translateY(0);
}
.chat-example:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat-example-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}
.chat-example-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1;
}
.chat-example-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-example-title {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13.5px;
}
.chat-example-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  line-height: 1.5;
  white-space: nowrap;
}
.chat-example-prompt {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-example-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 13px;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.chat-example:hover .chat-example-cta {
  background: var(--accent);
  color: #fff;
  transform: translateX(2px);
}

@keyframes chat-example-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.assistant-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.assistant-header .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.assistant-header .dot[data-active="true"] {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.assistant-label { font-weight: 600; color: var(--text-strong); font-size: 12.5px; }
.assistant-stats { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-left: auto; }

.assistant-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.prose-block { line-height: 1.6; color: var(--text); }
.prose-block .md-p { margin: 0; }
.prose-block .md-p + .md-p { margin-top: 8px; }
.prose-block .md-h { margin: 10px 0 4px; line-height: 1.3; font-weight: 600; }
.prose-block .md-h1 { font-size: 18px; }
.prose-block .md-h2 { font-size: 16px; }
.prose-block .md-h3 { font-size: 14px; }
.prose-block .md-h4 { font-size: 13px; }
.prose-block .md-ul, .prose-block .md-ol { margin: 4px 0; padding-left: 20px; }
.prose-block .md-ul li, .prose-block .md-ol li { margin: 2px 0; }
.prose-block .md-inline-code {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 0.92em;
}
.prose-block .md-code {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 6px 0;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
}
.prose-block .md-code code { font-family: var(--mono); }
.prose-block .md-link {
  color: var(--accent);
  text-decoration: underline;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.prose-block .md-link-bare {
  /* Long bare URLs (OAuth flows etc.) need to wrap mid-string so they
     don't escape the chat column. break-word is enough for most agents,
     but `anywhere` covers query strings with no spaces. */
  word-break: break-all;
  overflow-wrap: anywhere;
}
.prose-block .md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}
.op-waiting {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* Thinking blocks */
.thinking-block {
  background: rgba(108, 58, 166, 0.04);
  border: 1px solid rgba(108, 58, 166, 0.16);
  border-radius: var(--radius-sm);
}
.thinking-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 12px;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.thinking-toggle:hover { background: rgba(108, 58, 166, 0.05); border-color: transparent; }
.thinking-icon { color: var(--purple); }
.thinking-label { font-weight: 500; }
.thinking-preview {
  flex: 1 1;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thinking-chev { color: var(--text-muted); font-size: 10px; }
.thinking-body {
  margin: 0;
  padding: 0 14px 12px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Status pills */
.status-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  color: var(--text-muted);
}
.status-label { letter-spacing: 0.02em; }
.status-detail { color: var(--text); }

/* Grouped tool / action card — the collapsible pill from screenshot 9 */
.action-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
}
.action-card-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius);
}
.action-card-toggle:hover { background: var(--bg-subtle); border-color: transparent; }
.action-card-toggle .ico {
  width: 20px; height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--mono);
  flex-shrink: 0;
}
.action-card-toggle .summary { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-card-toggle .summary strong { font-weight: 500; }
.action-card-toggle .chev { color: var(--text-faint); font-size: 10px; flex-shrink: 0; }
.action-card-toggle.running .ico { animation: pulse 1.6s ease-in-out infinite; background: var(--purple-bg); color: var(--purple); }
.action-card-body {
  padding: 0 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-soft);
}
.action-card-body > .op-card { border-color: transparent; box-shadow: none; padding: 4px 0; }
.action-card-body > .op-card .op-card-head { padding: 6px 0; }

/* Tool / operation cards — single, ungrouped */
.op-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  min-width: 0;
  max-width: 100%;
}
.op-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.op-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--bg-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--mono);
  flex-shrink: 0;
}
.op-icon-write { background: var(--green-bg); color: var(--green); }
.op-icon-edit  { background: var(--amber-bg); color: var(--amber); }
.op-icon-read  { background: var(--blue-bg); color: var(--blue); }
.op-title { font-weight: 500; }
.op-meta { color: var(--text-muted); font-size: 11.5px; }
.op-desc { font-style: italic; }
.op-path {
  background: var(--bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(220px, 100%);
}
.op-status {
  margin-left: auto;
  font-size: 10.5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.op-status-running {
  border-color: var(--purple-border);
  background: var(--purple-bg);
  color: var(--purple);
  animation: pulse 1.6s ease-in-out infinite;
}
.op-status-ok { border-color: var(--green-border); background: var(--green-bg); color: var(--green); }
.op-status-error { border-color: var(--red-border); background: var(--red-bg); color: var(--red); }
.op-toggle {
  font-size: 10.5px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
}
.op-open {
  font-size: 10.5px;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.op-open:hover {
  background: var(--bg-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.produced-files {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.produced-files-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.produced-files-list { display: flex; flex-direction: column; gap: 4px; }
.produced-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  font-size: 12px;
}
.produced-file-icon { width: 22px; text-align: center; color: var(--text-muted); }
.produced-file-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
}
.produced-file-size {
  font-size: 10.5px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.produced-file-actions { display: flex; gap: 6px; }
.produced-file-actions .ghost,
.produced-file-actions .ghost-link {
  font-size: 11px;
  padding: 3px 9px;
}

.op-bash .op-command,
.op-bash .op-output {
  margin: 0;
  padding: 8px 12px;
  background: #1c1b1a;
  color: #f0eee9;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
}
.op-bash .op-output { background: #2a2926; }

.op-todo .todo-list {
  list-style: none;
  margin: 0;
  padding: 6px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
}
.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 8px;
  line-height: 1.45;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.todo-check {
  width: 16px;
  flex-shrink: 0;
  color: var(--text-soft);
  font-family: var(--mono);
  text-align: center;
  line-height: 1.45;
}
.todo-text { color: var(--text); }

/* Pending — quietly waiting */
.todo-pending .todo-check { color: var(--text-faint); }
.todo-pending .todo-text { color: var(--text-muted); }

/* In progress — the only row that should pop */
.todo-in_progress {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-panel));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.todo-in_progress .todo-check { color: var(--accent); }
.todo-in_progress .todo-text { color: var(--text-strong); font-weight: 600; }

/* Completed — settled, but still readable */
.todo-completed .todo-check { color: var(--green); }
.todo-completed .todo-text {
  text-decoration: line-through;
  -webkit-text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent);
          text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent);
  color: var(--text-muted);
}

/* Composer extras */
.composer.drag-active {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

/* Present / Share menus */
.present-wrap { position: relative; display: inline-block; }
.present-trigger .caret {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.7;
}
.present-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 168px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.present-menu button {
  background: transparent;
  border: none;
  padding: 8px 10px;
  font-size: 12px;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.present-menu button:hover { background: var(--bg-subtle); border-color: transparent; }
.present-icon {
  display: inline-flex;
  width: 14px;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}

.share-menu { position: relative; display: inline-block; }
.share-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 240px;
  padding: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.share-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
}
.share-menu-item:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: transparent;
}
.share-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.share-menu-icon { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; }
.share-menu-divider { height: 1px; background: var(--border); margin: 4px 6px; }

.button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.button-like:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.deploy-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}
/* Add a few extra pixels above the deploy dialog's primary action so
   it does not crowd the divider. The shared .modal-foot uses 12px
   vertical padding which is fine for shorter dialogs but reads as
   cramped here because the deploy form ends in dense token / domain
   config rows that push content right up to the border. Scoped to the
   deploy dialog only (the template-save dialog also carries the
   .deploy-modal class on its root, which is why we key off the
   purpose-specific .deploy-flow-modal hook instead). 16px matches the
   bump proposed for the global rule in #957 so the rhythm stays close
   to the rest of the app. Issue #913. */
.deploy-flow-modal .modal-foot {
  padding-top: 16px;
}
.deploy-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}
.deploy-provider-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.field-label-note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: min(420px, 70%);
  text-align: right;
}
.field-label-note .hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}
.field-label-row a:not(.field-label-link) {
  color: var(--accent);
  font-size: 13px;
  white-space: nowrap;
}
.field-label-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.field-label-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease;
}
.field-label-link:hover {
  color: var(--accent);
}
.field-label-link svg {
  opacity: 0.75;
  transition: transform 120ms ease, opacity 120ms ease;
}
.field-label-link:hover svg {
  opacity: 1;
  transform: translate(1px, -1px);
}
.field-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  color: #137a3d;
  background: color-mix(in srgb, #1f9d55 10%, transparent);
  border: 1px solid color-mix(in srgb, #1f9d55 28%, var(--border));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
/* ---------- Composio API key skeleton ----------
   The Composio config is daemon-backed, so on first paint after a
   restart there is a window where the section renders empty even
   though a saved key exists. Rather than show a misleading "no key
   saved" state, we overlay a skeleton on the input + chip + buttons
   so the user understands the field is still resolving.
   We intentionally keep the real input mounted underneath the shimmer
   so focus, autofill, and accessibility nodes are not torn down on
   resolve — the parent label gets aria-busy and the disabled flags
   on the buttons are the structural safety net. */
.field-status-badge-skeleton {
  /* Same footprint as the saved-state chip so the row geometry
     doesn't shift when hydration completes. The width is a
     calibrated guess for a "Saved · ••••XXXX" string; close enough
     that the swap-in feels stable without depending on the actual
     tail length. */
  width: 86px;
  height: 18px;
  border: 1px solid var(--border);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--text-soft) 8%, var(--bg-subtle)) 0%,
      color-mix(in srgb, var(--text-soft) 18%, var(--bg-subtle)) 50%,
      color-mix(in srgb, var(--text-soft) 8%, var(--bg-subtle)) 100%
    );
  background-size: 200% 100%;
  animation: settingsSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-pill);
  padding: 0;
  color: transparent;
}

.field-input-skeleton-wrap {
  position: relative;
  display: flex;
  flex: 1 1;
  min-width: 0;
}
.field-input-skeleton-wrap > input {
  flex: 1 1;
  min-width: 0;
}
.field-input-skeleton-shimmer {
  position: absolute;
  inset: 1px;
  border-radius: var(--radius);
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--text-soft) 14%, transparent) 50%,
      transparent 100%
    );
  background-size: 220% 100%;
  animation: settingsSkeletonShimmer 1.6s ease-in-out infinite;
}

/* The whole credentials field gets a softened, "we're checking" feel
   while loading: muted label, slightly desaturated input chrome.
   Matches the broader Settings shimmer language. */
.settings-section-connectors-credentials.is-loading .field-label {
  color: var(--text-muted);
}
.settings-section-connectors-credentials.is-loading input:disabled {
  cursor: progress;
  background: color-mix(in srgb, var(--text-soft) 4%, var(--bg-subtle));
  /* Preserve readable placeholder color even when disabled — the
     placeholder doubles as the "Checking for a saved key…" cue. */
  color: var(--text-muted);
  -webkit-text-fill-color: var(--text-muted);
}
.settings-section-connectors-credentials.is-loading input:disabled::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Inline status hint variant — the help line below the input becomes
   a small spinner + status string while loading. Sits in the same
   slot as the regular hint so layout doesn't jump. */
.field-hint-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.field-hint-loading svg {
  color: var(--accent-strong);
  flex-shrink: 0;
}

@keyframes settingsSkeletonShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .field-status-badge-skeleton,
  .field-input-skeleton-shimmer {
    animation: none;
  }
  .field-input-skeleton-shimmer {
    background: color-mix(in srgb, var(--text-soft) 8%, transparent);
  }
}
.deploy-form input,
.deploy-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  background: var(--bg-panel);
  color: var(--text);
  font: inherit;
}
.deploy-config-actions {
  display: flex;
  justify-content: flex-end;
}
.deploy-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.cloudflare-domain-grid {
  grid-template-columns: minmax(180px, 0.85fr) minmax(220px, 1.15fr);
}
.deploy-field-grid.single-field {
  grid-template-columns: minmax(0, 1fr);
}
.deploy-field-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.deploy-error {
  margin: 0;
  color: var(--red);
}
.deploy-result-block {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-xs);
}
.deploy-result-block.ready {
  border-color: color-mix(in srgb, var(--green) 26%, var(--border));
}
.deploy-result-block.delayed {
  border-color: color-mix(in srgb, #b7791f 34%, var(--border));
}
.deploy-result-block.protected,
.deploy-result-block.failed {
  border-color: color-mix(in srgb, #c96442 38%, var(--border));
}
.deploy-result-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
  background: color-mix(in srgb, var(--bg-subtle) 64%, var(--bg-panel));
}
.deploy-result-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.deploy-result-link-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.deploy-result-badge,
.deploy-result-link-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.deploy-result-badge.ready,
.deploy-result-link-state.ready {
  color: #137a3d;
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--border));
}
.deploy-result-badge.delayed,
.deploy-result-link-state.delayed {
  color: #9a5b12;
  background: color-mix(in srgb, #b7791f 14%, transparent);
  border: 1px solid color-mix(in srgb, #b7791f 28%, var(--border));
}
.deploy-result-badge.protected,
.deploy-result-badge.failed,
.deploy-result-link-state.protected,
.deploy-result-link-state.failed {
  color: #a34828;
  background: color-mix(in srgb, #c96442 14%, transparent);
  border: 1px solid color-mix(in srgb, #c96442 30%, var(--border));
}
.deploy-result-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.deploy-result-message {
  margin: 0;
  color: var(--text-muted);
}
.deploy-result-links {
  display: grid;
  border-top: 1px solid var(--border);
}
.deploy-result-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 12px 16px;
  gap: 12px 16px;
  padding: 14px 16px;
  background: var(--bg-panel);
}
.deploy-result-link + .deploy-result-link {
  border-top: 1px solid var(--border);
}
.deploy-result-link-main {
  display: grid;
  min-width: 0;
  grid-gap: 6px;
  gap: 6px;
}
.deploy-result-link-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.deploy-result-link-message {
  margin: 0;
  color: var(--text-muted);
}
.deploy-result-url {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.deploy-result-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.deploy-result-actions .viewer-action,
.deploy-result-actions .ghost-link {
  min-height: 28px;
  border: 0;
  background: transparent;
}
.deploy-result-actions .viewer-action:hover:not(:disabled),
.deploy-result-actions .ghost-link:hover {
  background: var(--bg-panel);
}
@media (max-width: 640px) {
  .deploy-form .field-label-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .deploy-form .field-label-note {
    align-items: flex-start;
    max-width: none;
    text-align: left;
  }
  .deploy-field-grid,
  .cloudflare-domain-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .deploy-result-link {
    grid-template-columns: minmax(0, 1fr);
  }
  .deploy-result-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: -moz-fit-content;
    width: fit-content;
  }
}
.ghost-link.disabled,
.ghost-link[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

.present-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: black;
  display: flex;
}
.present-overlay iframe {
  flex: 1 1;
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}
.present-exit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1001;
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.present-exit:hover { background: white; }

/* Picker (legacy in some surfaces) */
.picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.picker-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.picker select {
  border: none;
  background: transparent;
  padding: 4px 6px;
  width: auto;
  min-width: 120px;
  box-shadow: none;
}
.picker select:focus { outline: none; box-shadow: none; }
.picker.agent-picker select { min-width: 140px; }
.picker.agent-picker .icon-btn {
  padding: 2px 8px;
  background: transparent;
  border: none;
}

/* Preview pane (legacy single-iframe path; kept for fallbacks) */
.preview {
  display: flex;
  flex-direction: column;
  background: var(--bg-subtle);
  min-height: 0;
}
.preview-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}
.preview-title {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.preview-actions { display: flex; gap: 8px; align-items: center; }
.preview-actions .muted { font-size: 11px; }
.preview-actions button { padding: 4px 10px; font-size: 12px; }
.preview-body { flex: 1 1; min-height: 0; position: relative; }
.preview-body iframe {
  width: 100%; height: 100%; border: none; background: white;
}
.preview-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: var(--text-muted);
  padding: 24px;
  text-align: center;
  font-size: 13px;
}

/* ============================================================
   Merged from main — persistence-era additions: editable project
   title, conversations dropdown, examples filters + preview modal,
   question form, design-system modal, system reminder collapse,
   operations todo card.
   ============================================================ */

/* Editable project title (inline rename in topbar) */
.topbar-title .title.editable,
.app-project-title .title.editable {
  outline: none;
  border-radius: 4px;
  padding: 1px 4px;
  margin: -1px -4px;
}
.topbar-title .title.editable:focus,
.app-project-title .title.editable:focus {
  background: var(--bg-subtle);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Conversations dropdown — pill in the project topbar */
.conv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  font: inherit;
  font-size: 12px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  max-width: 220px;
}
.conv-pill:hover { background: var(--bg-subtle); }
.conv-pill.open { background: var(--bg-subtle); border-color: var(--accent); }
.conv-pill-icon { font-size: 13px; line-height: 1; }
.conv-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 10px;
}
.conv-menu {
  position: fixed;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 200;
  padding: 8px;
}
.conv-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.conv-add-btn { padding: 2px 8px; font-size: 11px; }
.conv-menu-empty {
  padding: 16px 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}
.conv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.conv-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-radius: 6px;
}
.conv-item.active { background: var(--bg-subtle); }
.conv-item-button {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
}
.conv-item-button:hover { background: var(--bg-subtle); }
.conv-item-name {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-item-meta {
  font-size: 10px;
  color: var(--text-muted);
}
.conv-item-del {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  width: 24px;
  cursor: pointer;
  border-radius: 6px;
}
.conv-item-del:hover { background: var(--bg-subtle); color: var(--text); }
.conv-rename-input {
  flex: 1 1;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-panel);
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}

/* Collapsible system-reminder block in chat */
.system-reminder-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 6px 0;
}
.system-reminder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 12px;
  color: var(--text-muted);
}
.system-reminder-toggle:hover { background: rgba(0, 0, 0, 0.03); }
.system-reminder-icon { color: var(--text-muted); }
.system-reminder-label { font-weight: 500; color: var(--text); }
.system-reminder-preview {
  flex: 1 1;
  color: var(--text-muted);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-reminder-chev { color: var(--text-muted); font-size: 10px; }
.system-reminder-body {
  margin: 0;
  padding: 0 12px 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Waiting-on-input pill (richer than the simple italic version above). */
.op-waiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  font-size: 12px;
  color: var(--text-muted);
  font-style: normal;
}
.op-waiting-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}
.op-waiting-label {
  font-weight: 500;
  color: var(--text);
}
.op-waiting-detail {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--bg-panel);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--text-muted);
}
.op-waiting-hint {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--text-soft);
  font-style: italic;
}

/* op-todo card variant (the .op-todo .todo-list rule already exists above) */
.op-todo {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 60%);
}
.op-todo .op-card-head {
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 70%, transparent);
  background: transparent;
}
.op-todo .op-icon {
  background: var(--accent-soft);
  color: var(--accent);
}
.op-todo .op-title {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-strong);
}
.op-todo .op-meta {
  margin-left: auto;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-strong);
}

/* Question form — interactive form a planning agent can post into chat */
.question-form {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.question-form-locked {
  background: var(--bg-subtle);
  box-shadow: none;
  opacity: 0.92;
}
.question-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--accent-tint) 0%, var(--bg-panel) 100%);
}
.question-form-locked .question-form-head {
  background: var(--bg-subtle);
}
.question-form-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.question-form-titles {
  flex: 1 1;
  min-width: 0;
}
.question-form-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.question-form-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.question-form-pill {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.question-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.qf-field { display: flex; flex-direction: column; gap: 6px; }
.qf-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}
.qf-required { color: var(--accent); }
.qf-help { font-size: 11px; color: var(--text-muted); margin-top: -2px; }
.qf-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.qf-chip input { width: auto; margin: 0; display: none; }
.qf-chip:hover { border-color: var(--border-strong); }
.qf-chip-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.qf-chip-disabled:hover { border-color: var(--border); }
.qf-chip-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 500;
}
.question-form-locked .qf-chip { cursor: not-allowed; }
.qf-input,
.qf-select,
.qf-textarea {
  font-size: 13px;
}
.question-form-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.qf-hint,
.qf-locked-note {
  flex: 1 1;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.qf-skip-btn {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.qf-skip-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.qf-save-pref-btn {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.qf-save-pref-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.qf-save-success {
  font-size: 12px;
  color: #22c55e;
  margin-left: 8px;
  animation: fadeInOut 2s ease forwards;
}
@keyframes fadeInOut {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* Direction-cards picker — used by the second discovery form when the user
   selects "Pick a direction for me". Each card carries a palette swatch
   row, a serif/sans type sample, a mood blurb, and a real-world refs
   line so the user can scan visually instead of squinting at radio labels. */
.qf-direction-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 4px;
}
.qf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    transform 0.06s ease;
}
.qf-card input { display: none; }
.qf-card:hover { border-color: var(--border-strong); }
.qf-card:active { transform: translateY(1px); }
.qf-card-on {
  border-color: var(--accent, #c96442);
  background: color-mix(in oklch, var(--accent, #c96442) 4%, var(--bg));
  box-shadow: 0 0 0 1px var(--accent, #c96442) inset;
}
.qf-card-disabled { cursor: not-allowed; opacity: 0.6; }
.qf-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qf-card-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  line-height: 1.3;
}
.qf-card-pill {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--accent, #c96442);
  color: #fff;
  border-radius: 999px;
  flex-shrink: 0;
}
.qf-card-swatches {
  display: flex;
  gap: 4px;
  height: 18px;
}
.qf-card-swatch {
  flex: 1 1;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  min-width: 0;
}
.qf-card-types {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.qf-card-type-display {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  flex-shrink: 0;
}
.qf-card-type-body {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qf-card-mood {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
}
.qf-card-refs {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.qf-card-refs-label {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Design-system preview modal */
.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(28, 27, 26, 0.42);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  -webkit-app-region: no-drag;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 32px;
}
.ds-modal {
  width: 100%;
  max-width: 1320px;
  background: var(--bg);
  -webkit-app-region: no-drag;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.ds-modal-fullscreen {
  max-width: none;
  border-radius: 0;
}
.ds-modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  grid-gap: 16px;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.ds-modal-title-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-modal-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}
.ds-modal-tabs {
  display: inline-flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.ds-modal-tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}
.ds-modal-tab:hover { color: var(--text); }
.ds-modal-tab.active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.ds-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.ds-modal-stage {
  flex: 1 1;
  min-height: 0;
  background: white;
  position: relative;
  display: flex;
  align-items: stretch;
}
.ds-modal-stage-iframe {
  flex: 1 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: white;
}
.ds-modal-stage-iframe-scaler {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background: white;
  /* Prevent the GPU layer from blurring the scaled iframe on Retina. */
  will-change: transform;
}
.ds-modal-stage-iframe-scaler iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: white;
}
.ds-modal-stage.has-sidebar .ds-modal-stage-iframe {
  flex: 1 1 60%;
}
.ds-modal-sidebar {
  position: relative;
  flex: 1 1 40%;
  min-width: 320px;
  max-width: 560px;
  border-left: 1px solid var(--border);
  background: var(--bg-panel);
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.ds-modal-stage-handle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 56px;
  transform: translateY(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: color 120ms ease, background 120ms ease;
}
.ds-modal-stage-handle:hover { color: var(--text); background: var(--bg-subtle); }
.ds-modal-stage-handle.is-expand {
  right: 0;
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.ds-modal-stage-handle.is-collapse {
  left: 0;
  border-left: none;
  border-radius: 0 8px 8px 0;
}
.ds-modal-fullscreen .ds-modal-stage:-webkit-full-screen .ds-modal-stage-iframe-scaler, .ds-modal-stage:-webkit-full-screen .ds-modal-stage-iframe-scaler {
  height: 100vh;
}
.ds-modal-fullscreen .ds-modal-stage:fullscreen .ds-modal-stage-iframe-scaler,
.ds-modal-stage:fullscreen .ds-modal-stage-iframe-scaler {
  height: 100vh;
}
.ds-modal-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
}
/* Error state extends .ds-modal-empty: stacks a title, body, and Retry
   button instead of a single line, so a fetch failure no longer leaves
   the modal stuck at "Loading…" with disabled toolbar buttons and no
   recovery path. Issue #860. */
.ds-modal-error {
  flex-direction: column;
  gap: 10px;
  padding: 0 24px;
  text-align: center;
}
.ds-modal-error-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.ds-modal-error-body {
  color: var(--text-muted);
  font-size: 13px;
  max-width: 48ch;
  line-height: 1.5;
}
.ds-modal-actions .ghost.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent);
}

/* Device size switcher */
.device-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.device-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  padding: 0;
}
.device-btn:hover:not(.active) {
  background: var(--bg-muted);
  color: var(--text);
}
.device-btn.active {
  background: var(--bg-panel);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Export Dialog */
.export-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 150ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.export-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 400px;
  max-width: 90vw;
  animation: slideUp 200ms ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.export-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.export-dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.export-dialog-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.export-dialog-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.export-dialog-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.export-dialog-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-dialog-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.export-format-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.export-format-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  background: var(--bg-subtle);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 150ms ease;
}

.export-format-btn:hover:not(.active) {
  background: var(--bg-muted);
}

.export-format-btn.active {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.export-format-icon {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}

.export-format-desc {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
}

.export-size-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.export-size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px;
  background: var(--bg-subtle);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 150ms ease;
}

.export-size-btn:hover:not(.active) {
  background: var(--bg-muted);
}

.export-size-btn.active {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.export-size-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.export-size-multiplier {
  font-size: 11px;
  color: var(--text-muted);
}

.export-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 480px) {
  .export-dialog {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
  }

  .export-dialog-backdrop {
    align-items: flex-end;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* Help Center */
.help-center-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 150ms ease;
}

.help-center {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 360px;
  max-width: 90vw;
  animation: slideUp 200ms ease;
}

.help-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.help-center-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.help-center-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.help-center-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.help-center-content {
  padding: 8px;
}

.help-center-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease;
  color: inherit;
  text-decoration: none;
}

.help-center-item:hover {
  background: var(--bg-subtle);
}

.help-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  color: var(--accent);
  flex-shrink: 0;
}

.help-center-item-text {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-center-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.help-center-item-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.help-center-arrow {
  font-size: 20px;
  color: var(--text-faint);
}

/* Help Center Search */
.help-center-search {
  padding: 0 12px 12px;
}
.help-center-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.help-center-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-faint);
  pointer-events: none;
}
.help-center-search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.help-center-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.help-center-search-input::placeholder {
  color: var(--text-faint);
}
.help-center-search-clear {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  padding: 0;
}
.help-center-search-clear:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.help-center-search-results {
  margin: 10px 4px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Help Center Search Results */
.help-center-search-results-list {
  padding: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.help-center-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
}
.help-center-empty p {
  margin: 0 0 8px;
  font-size: 14px;
}
.help-center-empty-hint {
  font-size: 12px;
  color: var(--text-faint);
}

/* Help Center FAQ Items */
.help-center-faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.help-center-faq-item:last-child {
  border-bottom: none;
}
.help-center-faq-question {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 8px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}
.help-center-faq-question:hover {
  background: var(--bg-subtle);
}
.help-center-faq-category {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}
.help-center-faq-question-text {
  flex: 1 1;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  width: 100%;
}
.help-center-faq-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}
.help-center-highlight {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 2px;
}
.help-center-faq-answer {
  padding: 0 8px 12px 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* App Chrome Help Button */
.app-chrome-help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms ease;
  padding: 0;
  margin-right: 8px;
}

.app-chrome-help:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Onboarding Guide */
.onboarding-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: fadeIn 150ms ease;
}

.onboarding-backdrop.closing {
  animation: fadeOut 200ms ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.onboarding-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 440px;
  max-width: 90vw;
  animation: slideUp 200ms ease;
  position: relative;
  overflow: hidden;
}

.onboarding-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bg-subtle);
}

.onboarding-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 300ms ease;
}

.onboarding-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  z-index: 1;
}

.onboarding-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.onboarding-content {
  padding: 48px 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.onboarding-icon {
  color: var(--accent);
  margin-bottom: 16px;
}

.onboarding-step-indicator {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.onboarding-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

.onboarding-description {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
}

.onboarding-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

.onboarding-dot.completed {
  background: var(--accent-soft);
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
}

.onboarding-skip {
  font-size: 13px;
}

.onboarding-nav {
  display: flex;
  gap: 8px;
}

.onboarding-prev,
.onboarding-next {
  min-width: 80px;
}

@media (max-width: 480px) {
  .onboarding-dialog {
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .onboarding-backdrop {
    align-items: flex-end;
  }
}

/* First Recharge Guide */
.first-recharge-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 200ms ease;
}

.first-recharge-backdrop.closing {
  animation: fadeOut 200ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.first-recharge-dialog {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px 36px;
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  animation: slideUp 300ms ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.first-recharge-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
}

.first-recharge-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.first-recharge-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.first-recharge-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-tint);
  border-radius: 50%;
  color: var(--accent);
  margin-bottom: 20px;
}

.first-recharge-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.first-recharge-badge-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.first-recharge-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 12px;
  line-height: 1.3;
}

.first-recharge-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
  max-width: 320px;
}

.first-recharge-balance {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 16px 24px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
  margin-bottom: 24px;
  width: 100%;
}

.first-recharge-balance-label {
  font-size: 13px;
  color: var(--text-muted);
}

.first-recharge-balance-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
}

.first-recharge-balance-unit {
  font-size: 13px;
  color: var(--text-muted);
}

.first-recharge-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.first-recharge-cta {
  width: 100%;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius);
}

.first-recharge-dismiss {
  width: 100%;
  padding: 10px 20px;
  font-size: 13px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 120ms ease;
}

.first-recharge-dismiss:hover {
  color: var(--text);
  background: transparent;
  border-color: transparent;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .first-recharge-dialog {
    width: calc(100vw - 32px);
    padding: 32px 24px 28px;
  }

  .first-recharge-title {
    font-size: 20px;
  }

  .first-recharge-balance-value {
    font-size: 20px;
  }
}

/* Template Card */
.template-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.template-card:hover,
.template-card.is-hovered {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.template-card-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-subtle);
  cursor: pointer;
  overflow: hidden;
}

.template-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms ease, transform 200ms ease;
}

.template-card:hover .template-card-preview img {
  transform: scale(1.05);
}

.template-card-skeleton {
  position: absolute;
  inset: 0;
  background: var(--bg-muted);
  animation: shimmer 1.5s infinite;
}

.template-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
}

.template-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 150ms ease;
}

.template-card-preview-btn {
  padding: 8px 16px;
  background: white;
  color: var(--text);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
}

.template-card-meta {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.template-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-category {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.template-card-use {
  width: 100%;
  justify-content: center;
}

/* Skeleton styles */
.skeleton-shimmer {
  background: linear-gradient(90deg, var(--bg-muted) 0%, var(--bg-subtle) 50%, var(--bg-muted) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.template-card-skeleton-name {
  height: 16px;
  width: 70%;
  border-radius: 4px;
}

.template-card-skeleton-category {
  height: 20px;
  width: 50px;
  border-radius: var(--radius-pill);
}

.template-card-skeleton-btn {
  height: 32px;
  border-radius: var(--radius-sm);
}

/* Template Gallery */
.template-gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.template-gallery-toolbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.template-gallery-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.template-gallery-search input {
  flex: 1 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
  outline: none;
}

.template-gallery-search input::placeholder {
  color: var(--text-faint);
}

.template-gallery-search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.template-gallery-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-gallery-category {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 150ms ease;
}

.template-gallery-category:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.template-gallery-category.active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.template-gallery-count {
  font-size: 11px;
  padding: 1px 5px;
  background: var(--bg-muted);
  border-radius: var(--radius-pill);
}

.template-gallery-category.active .template-gallery-count {
  background: var(--accent-soft);
  color: var(--accent);
}

.template-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.template-gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  color: var(--text-muted);
  text-align: center;
}

.template-gallery-empty p {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 640px) {
  .template-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .template-gallery-category {
    padding: 4px 10px;
    font-size: 12px;
  }
}

/* DESIGN.md side panel — monospace source view with light syntax tints,
   echoing the styles.refero.design "compact" markdown source pane. */
.design-spec-empty {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 12px;
}
.design-spec-pre {
  margin: 0;
  padding: 16px 18px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  /* Wrap long lines instead of forcing the side pane to scroll horizontally —
     DESIGN.md prose can have 200+ char paragraphs that otherwise produce a
     scrollbar inside the modal. `overflow-wrap: anywhere` keeps long
     hyphenated tokens (URLs, file paths) from blowing out the column. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg-panel);
  flex: 1 1;
}
.design-spec-pre code { font: inherit; color: inherit; background: transparent; }
.design-spec-line { display: inline; }
.design-spec-line.is-h1 { color: #2563eb; font-weight: 700; }
.design-spec-line.is-h2 { color: #0891b2; font-weight: 700; }
.design-spec-line.is-h3 { color: #0d9488; font-weight: 600; }
.design-spec-line.is-h4 { color: #16a34a; font-weight: 600; }
.design-spec-line.is-quote { color: #6b7280; font-style: italic; }
.design-spec-line.is-list { color: var(--text); }
.design-spec-line.is-table { color: #7c3aed; }
.design-spec-line.is-fence { color: #dc2626; }
.design-spec-line.is-blank { color: var(--text-muted); }
.md-tk-bold { font-weight: 700; color: var(--text); }
.md-tk-em { font-style: italic; color: var(--text); }
.md-tk-code {
  background: var(--bg-subtle);
  padding: 0 4px;
  border-radius: 3px;
  color: #0f766e;
}
.md-tk-color {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #be185d;
}
.md-tk-color-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
}
@media (max-width: 760px) {
  .ds-modal-backdrop { padding: 0; }
  .ds-modal { border-radius: 0; }
  .ds-modal-header { grid-template-columns: 1fr; gap: 8px; }
  .ds-modal-actions { justify-content: flex-start; flex-wrap: wrap; }
  .ds-modal-stage { flex-direction: column; }
  .ds-modal-stage.has-sidebar .ds-modal-stage-iframe { flex: 1 1 50%; }
  .ds-modal-sidebar {
    border-left: none;
    border-top: 1px solid var(--border);
    flex: 1 1 50%;
    min-width: 0;
    max-width: none;
  }
  /* On stacked layout the side handles (which assume horizontal split)
     would float over content awkwardly — fall back to the header toggle. */
  .ds-modal-stage-handle { display: none; }
}

/* Examples gallery toolbar — filter pills + richer card metadata */
.examples-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.examples-search {
  position: relative;
  width: min(360px, 100%);
}
.examples-search input {
  width: 100%;
  padding: 7px 12px 7px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}
.examples-search input::placeholder { color: var(--text-faint); }
.examples-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.examples-search .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
}
.examples-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.examples-filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 6px;
  font-weight: 500;
}
.filter-pill {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.filter-pill:hover { border-color: var(--border-strong); color: var(--text); }
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.filter-pill-count {
  font-size: 11px;
  opacity: 0.7;
}
.example-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.example-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
/* Tag variants — keep the worktree base .example-tag style; these add
   color-coded variants for mode/platform pills. */
.example-tag.platform-mobile { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }
.example-tag.mode-deck { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-soft); }

/* Example preview hover affordance + click-through overlay */
.example-preview {
  cursor: zoom-in;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.example-preview:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(201, 100, 66, 0.10);
}
.example-preview:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.example-preview-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: white;
  background: rgba(28, 27, 26, 0.78);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.example-preview:hover .example-preview-overlay,
.example-preview:focus-visible .example-preview-overlay { opacity: 1; }

/* ============================================================
   Loading primitives — spinner, skeletons, shimmer
   ============================================================ */
@keyframes icon-spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.icon-spin { animation: icon-spin 0.9s linear infinite; transform-origin: center; }

.loading-spinner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
}
.loading-spinner-label { font-size: 12px; }

.skeleton-block,
.skeleton-shimmer {
  display: inline-block;
  background-color: var(--bg-subtle);
  background-image: linear-gradient(
    90deg,
    var(--bg-subtle) 0%,
    var(--bg-muted) 50%,
    var(--bg-subtle) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-block + .skeleton-block { margin-top: 6px; }

.design-card-skeleton { cursor: default; pointer-events: none; }
.design-card-skeleton .design-card-thumb { background: none; }
.design-card-skeleton .design-card-thumb::before,
.design-card-skeleton .design-card-thumb::after { display: none; }
.design-card-skeleton .design-card-thumb {
  background-image: linear-gradient(
    90deg,
    var(--bg-subtle) 0%,
    var(--bg-muted) 50%,
    var(--bg-subtle) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

.centered-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 12px;
  color: var(--text-muted);
}
.centered-loader-label { font-size: 12.5px; letter-spacing: 0.01em; }

/* ============================================================
   Responsive: EntryView mobile/tablet (r_p1_20)
   ============================================================ */

/* Mobile: single column, hide sidebar */
@media (max-width: 767px) {
  .entry-shell {
    grid-template-rows: auto 1fr;
    height: 100dvh;
    overflow: hidden;
  }

  .entry {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .entry-side {
    display: none;
  }

  .entry-side-resizer {
    display: none;
  }

  .entry-main {
    height: 100%;
  }

  .entry-header {
    padding: 0 16px;
    min-height: 48px;
  }

  .entry-tab-content {
    padding: 16px;
  }
}

/* Tablet: narrower sidebar */
@media (min-width: 768px) and (max-width: 1024px) {
  .entry {
    grid-template-columns: 300px 1fr;
  }

  .entry-side {
    min-width: 260px;
    max-width: 320px;
  }
}

/* ============================================================
   Resizable entry sidebar
   ============================================================ */
.entry {
  /* The sidebar width is driven by an inline style fed from local state,
     with sensible bounds enforced in JS. */
}
.entry-side {
  position: relative;
  min-width: 280px;
  max-width: 560px;
  min-height: 0;
}
.entry-side-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  background: transparent;
  border: 0;
  padding: 0;
  transition: background-color 120ms ease;
}
.entry-side-resizer:hover,
.entry-side-resizer.dragging { background: var(--accent-soft); }
body.entry-resizing { cursor: col-resize; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

/* Branded header — title + research-preview pill on a single line, with
   the "by …" subtitle underneath. */
.entry-brand-title-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* ============================================================
   Composer Import popover (coming-soon menu)
   ============================================================ */
.composer-import-wrap { position: relative; }
.composer-import-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
  animation: pop-in 180ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.composer-import-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: not-allowed;
  font-size: 12.5px;
  text-align: left;
  width: 100%;
}
.composer-import-item:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-import-item-enabled {
  cursor: pointer;
  color: var(--text);
}
.composer-import-item-enabled:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-import-item-label { flex: 1 1; }
.composer-import-item-soon {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
}
.composer-import-item .ico {
  display: inline-flex;
  width: 16px;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

/* ============================================================
   Chat header: conversation history dropdown
   ============================================================ */
.chat-history-wrap { position: relative; display: inline-flex; align-items: center; }
.chat-history-wrap .icon-only { position: relative; }
.chat-history-wrap.open .icon-only { background: var(--bg-subtle); color: var(--text); }
.chat-history-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.chat-history-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 280px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 30;
  overflow: hidden;
  animation: pop-in 180ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.chat-history-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.chat-history-menu-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}
.chat-history-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.chat-history-new:hover { background: var(--bg-muted); color: var(--text); }
.chat-history-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px 6px;
  overflow-y: auto;
}
.chat-history-empty {
  padding: 16px 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}
.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.chat-conv-item:hover { background: var(--bg-subtle); }
.chat-conv-item.active {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  color: var(--text-strong);
}
.chat-conv-item-name {
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv-item-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.chat-conv-item-del {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-faint);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}
.chat-conv-item:hover .chat-conv-item-del { opacity: 1; }
.chat-conv-item-del:hover { background: var(--red-bg); color: var(--red); }

/* ============================================================
   Scroll-to-bottom button (chat)
   ============================================================ */
.chat-log-wrap { position: relative; flex: 1 1; min-height: 0; min-width: 0; display: flex; }
.chat-log-wrap .chat-log { flex: 1 1; }
.chat-jump-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 6;
  animation: pop-in 200ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.chat-jump-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); }

/* ============================================================
   Assistant message footer (bottom-of-message status pill)
   ============================================================ */
.assistant-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  color: var(--text-muted);
  width: -moz-fit-content;
  width: fit-content;
}
.assistant-footer .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
}
.assistant-footer .dot[data-active="true"] {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
.assistant-footer .assistant-label {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 11.5px;
}
.assistant-footer .assistant-stats {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.assistant-footer[data-unfinished="true"] {
  background: var(--amber-bg);
  border-color: color-mix(in srgb, var(--amber) 35%, var(--border));
}
.assistant-footer[data-unfinished="true"] .dot {
  background: var(--amber);
}
.assistant-footer[data-phase="refresh-started"] {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-subtle));
}
.assistant-footer[data-phase="refresh-succeeded"] {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border));
  background: color-mix(in srgb, var(--green) 6%, var(--bg-subtle));
}
.assistant-footer[data-phase="refresh-failed"] {
  border-color: color-mix(in srgb, var(--red) 40%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, var(--bg-subtle));
}

.assistant-footer-stop-btn {
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--red);
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.assistant-footer-stop-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.unfinished-todos {
  margin-top: 10px;
  width: min(520px, 100%);
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--amber) 8%, var(--bg-panel));
  color: var(--text);
}
.unfinished-todos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.unfinished-todos-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
}
.unfinished-todos-continue {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border-strong));
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text-strong);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 9px;
  cursor: pointer;
}
.unfinished-todos-continue:hover {
  background: var(--bg-subtle);
}
.unfinished-todos-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.unfinished-todos-list li + li {
  margin-top: 3px;
}
.unfinished-todos-more {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   Coming-soon disabled affordance for viewer toolbar buttons
   ============================================================ */
.viewer-action[data-coming-soon='true'] {
  position: relative;
  z-index: 5;
  opacity: 0.55;
  cursor: not-allowed;
}
.viewer-action[data-coming-soon='true']:hover { background: var(--bg-subtle); color: var(--text-muted); }
.viewer-action[data-coming-soon='true']::after {
  content: 'Coming soon';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.95);
  color: white;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 10;
  text-transform: uppercase;
  font-weight: 600;
}
.viewer-action[data-coming-soon='true']:hover::after { opacity: 1; }
.viewer-toggle[data-coming-soon='true'] {
  position: relative;
  z-index: 5;
  opacity: 0.55;
  cursor: not-allowed;
}
.viewer-toggle[data-coming-soon='true']:hover { background: var(--bg-subtle); }
.viewer-toggle[data-coming-soon='true']::after {
  content: 'Coming soon';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, 0.95);
  color: white;
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 10;
  text-transform: uppercase;
  font-weight: 600;
}
.viewer-toggle[data-coming-soon='true']:hover::after { opacity: 1; }

/* Polished toolbar button states — coordinate with the global system.
   Hover: subtle bg + soft border so groups look intentional. */
.viewer-action,
.viewer-tab,
.viewer-toggle {
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.viewer-action:hover:not(:disabled):not([data-coming-soon='true']),
.viewer-tab:hover { border-color: var(--border); }
.viewer-tab.active { border-color: var(--border); }

/* ============================================================
   Composer — settings/upload icons consistent sizing + spacing
   ============================================================ */
.composer-row .icon-btn svg { display: block; }
.composer-row .icon-btn.active { background: var(--bg-subtle); color: var(--text); }
.composer-import {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.composer-send svg { display: block; }

/* Make the composer's leading icons share the same hit target. */
.composer-row .composer-icon-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
}

/* ============================================================
   Deck navigation toolbar (prev / counter / next)
   ============================================================ */
.deck-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
  height: 28px;
}
.deck-nav-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 0 6px;
  font-size: 12px;
  color: var(--text-muted);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ============================================================
   Composer rename input style for inline conversation rename.
   ============================================================ */
.chat-conv-rename-input {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  outline: none;
}

/* ============================================================
   Prompt template gallery
   ============================================================ */
.prompt-templates-panel { display: flex; flex-direction: column; gap: 16px; }
.prompt-templates-count {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 12px;
}
.prompt-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.prompt-template-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.prompt-template-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.prompt-template-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  overflow: hidden;
}
.prompt-template-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prompt-template-thumb-fallback {
  color: var(--text-faint);
}
.prompt-template-thumb-play {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.prompt-template-thumb-provider {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prompt-template-thumb-provider.is-hyperframes {
  background: linear-gradient(135deg, #ff5e3a 0%, #f0c14b 100%);
  color: #1a1410;
}
.prompt-template-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 12px;
}
.prompt-template-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.prompt-template-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prompt-template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.prompt-template-category {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-tint);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prompt-template-tag,
.prompt-template-model {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.prompt-template-model {
  font-weight: 500;
}
.prompt-template-source {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 6px;
}
.prompt-templates-footer {
  font-size: 11px;
  color: var(--text-faint);
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  text-align: center;
}
.prompt-template-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 18, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 24px;
}
.prompt-template-modal {
  position: relative;
  background: var(--bg-panel);
  border-radius: 14px;
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  max-height: min(90vh, calc(100dvh - 48px));
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.25);
}
.prompt-template-modal-head {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 56px;
  padding: 18px 66px 0 18px;
  background: var(--bg-panel);
}
.prompt-template-modal-titles { flex: 1 1; min-width: 0; }
.prompt-template-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.prompt-template-modal-titles h2 {
  font-size: 17px;
  margin: 0 0 6px 0;
  color: var(--text);
}
.prompt-template-modal-titles p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}
.prompt-template-modal-tags {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px 0;
}
.prompt-template-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  overflow: auto;
}
.prompt-template-modal-asset {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  max-height: 360px;
}
.prompt-template-modal-asset img,
.prompt-template-modal-asset video {
  max-width: 100%;
  max-height: 360px;
  display: block;
}
.prompt-template-modal-asset-image-trigger {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  max-height: 360px;
  line-height: 0;
}
.prompt-template-modal-asset-image-trigger img {
  transition: transform 200ms ease;
}
.prompt-template-modal-asset-image-trigger:hover img,
.prompt-template-modal-asset-image-trigger:focus-visible img {
  transform: scale(1.02);
}
.prompt-template-modal-asset-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0.78;
  transition: opacity 120ms ease, background 120ms ease;
}
.prompt-template-modal-asset:hover .prompt-template-modal-asset-expand,
.prompt-template-modal-asset-expand:hover,
.prompt-template-modal-asset-expand:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.72);
}
.prompt-template-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(8, 9, 12, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  cursor: zoom-out;
  animation: prompt-template-lightbox-fade 140ms ease-out;
}
@keyframes prompt-template-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.prompt-template-lightbox-media {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
  background: #000;
}
.prompt-template-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 120ms ease, transform 120ms ease;
}
.prompt-template-lightbox-close:hover,
.prompt-template-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.26);
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .prompt-template-lightbox-backdrop { padding: 16px; }
  .prompt-template-lightbox-close { top: 12px; right: 12px; }
}
.prompt-template-modal-prompt {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
}
.prompt-template-modal-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.prompt-template-modal-prompt-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.prompt-template-modal-prompt-body {
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  max-height: 320px;
  overflow: auto;
}
.prompt-template-modal-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-faint);
}
.prompt-template-license {
  padding: 1px 6px;
  background: var(--bg-subtle);
  border-radius: 4px;
  color: var(--text-muted);
}

/* Prompt template picker — reuses the design-system picker shell so the
   trigger / popover already look right. We only restyle the avatar (image
   thumb) and add the editable prompt body block below the trigger. */
.prompt-template-picker .prompt-template-avatar {
  background: var(--bg-subtle);
}
.prompt-template-picker .prompt-template-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prompt-template-picker .prompt-template-avatar.fallback {
  color: var(--text-muted);
}
.prompt-template-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.prompt-template-edit-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prompt-template-edit-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.prompt-template-edit-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.prompt-template-edit-textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  font-family: inherit;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  resize: vertical;
}
.prompt-template-edit-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.prompt-template-edit-empty {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}
.prompt-template-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger, #c0392b);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
}
.prompt-template-error-msg {
  flex: 1 1;
  min-width: 0;
}
.prompt-template-error-retry {
  flex: none;
  font-size: 11.5px !important;
  padding: 4px 10px !important;
}

/* ============================================================
   Pet — Codex-style floating companion + settings cards
   ------------------------------------------------------------
   The overlay anchors to the bottom-right via inline right/bottom
   styles set by PetOverlay. The accent color cascades through the
   `--pet-accent` custom property so every pet variant gets the
   same halo / bubble border / focus ring without a class explosion.
   ============================================================ */
.pet-overlay {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  --pet-accent: var(--accent);
}
.pet-overlay > * { pointer-events: auto; }

.pet-sprite {
  position: relative;
  /* The overlay sprite was 56px which read as a tiny postage stamp
     against a 1280px+ canvas — bumped to 96px so the pet feels like
     a present companion rather than a thumbnail. The image-mode
     children inherit width/height: 100% via .pet-image, so atlas /
     strip / static pets all scale up automatically. */
  width: 96px;
  height: 96px;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  transition: transform 160ms ease;
}
.pet-sprite:hover {
  transform: translateY(-2px);
}
.pet-sprite:active { cursor: -webkit-grabbing; cursor: grabbing; }
.pet-sprite-glyph {
  /* Glyph font-size scales with the sprite box (~0.55 ratio) so
     emoji-only built-ins and the avatar mark stay legible at the
     larger overlay size. */
  font-size: 52px;
  line-height: 1;
  animation: var(--pet-anim, pet-float) 3.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
}
.pet-sprite-shadow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 64px;
  height: 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  filter: blur(4px);
  transform: translateX(-50%);
  animation: pet-shadow 3.4s ease-in-out infinite;
}

@keyframes pet-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pet-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes pet-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(2deg); }
}
@keyframes pet-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes pet-shadow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.18; }
  50% { transform: translateX(-50%) scale(0.85); opacity: 0.12; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-sprite-glyph,
  .pet-sprite-shadow { animation: none !important; }
}

.pet-bubble {
  max-width: 240px;
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--pet-accent);
  border-radius: 12px;
  padding: 10px 12px 8px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  line-height: 1.4;
  position: relative;
  animation: pet-bubble-in 200ms ease-out;
}
.pet-bubble::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-panel);
  border-right: 1px solid var(--pet-accent);
  border-bottom: 1px solid var(--pet-accent);
  transform: rotate(45deg);
}
.pet-bubble-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--pet-accent);
  margin-bottom: 2px;
}
.pet-bubble-line {
  color: var(--text);
}
.pet-bubble-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pet-bubble-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: pointer;
}
.pet-bubble-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

@keyframes pet-bubble-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- Entry sidebar adopt pill ----- */
.pet-pill {
  position: relative;
}
.pet-pill .pet-pill-glyph {
  font-size: 14px;
  line-height: 1;
}
.pet-pill-fresh {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-tint);
}
.pet-pill-fresh:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.pet-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
  margin-left: 2px;
}

/* ----- Settings → Pets ----- */
.pet-wake-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seg-btn.small {
  padding: 4px 10px !important;
  font-size: 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
}
.seg-btn.small.active {
  background: var(--accent-tint);
  color: var(--accent-strong);
  border-color: var(--accent);
}
.seg-btn.small[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Pet source tabs — pill row that splits the panel into three
   exclusive surfaces (built-in / custom / community). Sits flush
   between the section head and the active tab's content so the user
   reads it as "pick a source, then pick a pet inside it". */
.pet-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.pet-tabs .subtab-pill {
  align-self: flex-start;
}
.pet-tabs-hint {
  margin: 0;
}

.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 4px;
}

/* The Community tab stacks the codex grid + hatch panel; flatten
   their default top margins so the spacing reads as one column
   rather than two ad-hoc cards. */
.pet-community {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.pet-community .pet-codex,
.pet-community .pet-hatch {
  margin-top: 0;
}

/* Custom tab dashed wrapper — strip the top margin so it tucks
   directly under the tab pills. */
.pet-tabs + .pet-custom,
.pet-tabs + div + .pet-custom {
  margin-top: 4px;
}

/* Highlight the codex card whose name + image match the user's
   current adoption (community pets land in the custom slot, so we
   piggy-back on the same "active" affordance used by built-ins). */
.pet-codex-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.pet-card {
  --pet-accent: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: border-color 120ms ease, transform 120ms ease;
}
.pet-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.pet-card.active {
  border-color: var(--pet-accent);
  box-shadow: 0 0 0 1px var(--pet-accent) inset;
  background: var(--bg-panel);
}
.pet-card-glyph {
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pet-accent) 14%, transparent);
}
.pet-card-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1;
}
.pet-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
}
.pet-card-flavor {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pet-card-cta,
.pet-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pet-card-badge {
  background: color-mix(in srgb, var(--pet-accent) 16%, transparent);
  border-color: var(--pet-accent);
  color: var(--pet-accent);
}

.pet-custom {
  margin-top: 18px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pet-custom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pet-custom-head h4 {
  margin: 0 0 4px;
  font-size: 13px;
}
.pet-custom-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.pet-custom-sprite {
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 48px;
  /* Lock the sprite to a perfect square inside the flex preview row.
     Without `flex-shrink: 0`, a long pet name or greeting in the
     adjacent bubble shrinks the 48px box horizontally, squashing
     the sprite and breaking the round halo. */
  flex: 0 0 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pet-accent, var(--accent)) 14%, transparent);
}
.pet-custom-bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--text);
  /* Allow the text column to shrink past its intrinsic content width
     so long greetings wrap instead of pushing the sprite. */
  min-width: 0;
}
.pet-custom-bubble strong {
  color: var(--pet-accent, var(--accent));
}
.pet-custom-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.pet-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pet-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.pet-swatch.active {
  border-color: var(--text-strong);
}
.pet-swatch-picker {
  width: 22px;
  height: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: 50%;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* ============================================================
   Pet — discovery surfaces (right rail, welcome teaser, composer)
   ============================================================ */

/* Right-side rail in the entry view. Renders as a third grid column
   (the entry's gridTemplateColumns is set inline to `… 1fr auto`). */
.pet-rail {
  width: 232px;
  border-left: 1px solid var(--border);
  background: var(--bg-panel);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.pet-rail.collapsed {
  width: 36px;
  padding: 18px 4px;
  align-items: center;
}
.pet-rail-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  width: 100%;
}
.pet-rail-toggle:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.pet-rail-toggle-glyph {
  font-size: 18px;
  line-height: 1;
}
.pet-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.pet-rail-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pet-rail-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.pet-rail-title strong {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pet-rail-collapse {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.pet-rail-collapse > svg {
  flex-shrink: 0;
}
.pet-rail-collapse:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text-strong);
}
.pet-rail-collapse:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 100, 66, 0.32);
  border-color: var(--accent);
}
.pet-rail-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}
.pet-rail-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pet-rail-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  border: 1px solid var(--accent);
  cursor: pointer;
}
.pet-rail-fresh {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  border: 1px dashed var(--accent);
}
.pet-rail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pet-rail-item {
  --pet-accent: var(--accent);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.pet-rail-item:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.pet-rail-item.active {
  border-color: var(--pet-accent);
  background: color-mix(in srgb, var(--pet-accent) 8%, transparent);
}
.pet-rail-item.custom {
  border-style: dashed;
  border-color: var(--border-strong);
}
.pet-rail-item.custom.active {
  border-style: solid;
  border-color: var(--pet-accent);
}
.pet-rail-item-glyph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pet-accent) 14%, transparent);
}
.pet-rail-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pet-rail-item-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-rail-item-flavor {
  font-size: 10.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-rail-customize {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.pet-rail-customize:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Hide the rail on small viewports so it does not crowd the main column. */
@media (max-width: 1100px) {
  .pet-rail:not(.collapsed) {
    display: none;
  }
}

/* ----- Welcome dialog teaser ----- */
.welcome-pet-teaser {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  width: 100%;
}
.welcome-pet-teaser:hover {
  filter: brightness(1.02);
}
.welcome-pet-glyph {
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.welcome-pet-copy {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  min-width: 0;
}
.welcome-pet-copy strong {
  font-size: 12.5px;
  color: var(--text-strong);
}
.welcome-pet-copy span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}
.welcome-pet-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--accent-strong);
  font-weight: 600;
  white-space: nowrap;
}

/* ----- Composer pet button + popover ----- */
.composer-pet-wrap {
  position: relative;
  display: inline-flex;
}
.composer-pet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
}
.composer-pet:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-color: var(--border-strong);
}
.composer-pet.adopted {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-tint);
}
.composer-pet-glyph {
  font-size: 14px;
  line-height: 1;
}
.composer-pet-label {
  font-weight: 500;
}
.composer-pet-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer-pet-menu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border-soft);
}
.composer-pet-menu-head strong {
  font-size: 12px;
  color: var(--text-strong);
}
.composer-pet-menu-head span {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: var(--mono);
}
.composer-pet-menu-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
}
.composer-pet-menu-row:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-pet-menu-row.toggle {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.composer-pet-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4px;
  gap: 4px;
}
.composer-pet-menu-pet {
  --pet-accent: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 10.5px;
  color: var(--text-muted);
}
.composer-pet-menu-pet:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.composer-pet-menu-pet.active {
  border-color: var(--pet-accent);
  background: color-mix(in srgb, var(--pet-accent) 12%, transparent);
  color: var(--text);
}
.composer-pet-menu-pet span:first-child {
  font-size: 18px;
  line-height: 1;
}
.composer-pet-menu-row.settings {
  border-top: 1px solid var(--border-soft);
  margin-top: 2px;
  padding-top: 8px;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}

/* ============================================================
   Composer — consolidated Tools popover
   ------------------------------------------------------------
   The leading sliders icon now opens a single tabbed popover
   containing MCP / Import / Pet quick actions plus a shortcut
   to the full Settings dialog. Replaces three standalone row
   buttons that were overflowing in narrow chats.
   ============================================================ */
.composer-tools-wrap {
  position: relative;
  display: inline-flex;
}
.composer-tools-trigger {
  position: relative;
}
.composer-tools-trigger.active {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-tools-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}
.composer-tools-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  z-index: 30;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.composer-tools-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}
.composer-tools-tab {
  flex: 1 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: 11.5px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.composer-tools-tab:hover { color: var(--text); }
.composer-tools-tab.active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.composer-tools-tab-count {
  font-size: 10px;
  background: var(--accent);
  color: white;
  border-radius: 7px;
  padding: 0 4px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
}
.composer-tools-tab-glyph {
  font-size: 13px;
  line-height: 1;
}
.composer-tools-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  max-height: 360px;
  overflow-y: auto;
}
.composer-tools-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.composer-tools-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer-tools-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  width: 100%;
}
.composer-tools-row:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.composer-tools-row-body {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 1 1;
  min-width: 0;
}
.composer-tools-row-body strong {
  font-weight: 500;
  font-size: 12px;
}
.composer-tools-row-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  text-transform: lowercase;
}
.composer-tools-row-action {
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 8px;
  color: var(--text-muted);
}
.composer-tools-row-action:hover { color: var(--text); }
.composer-tools-row-toggle {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.composer-tools-pet {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.composer-tools-pet-head {
  padding: 0 4px 4px;
}
.composer-tools-pet-head .hint {
  font-size: 11px;
  color: var(--text-muted);
}
.composer-tools-pet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 4px;
  gap: 4px;
  padding: 0 2px;
}
.composer-tools-pet-item {
  --pet-accent: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 10.5px;
  cursor: pointer;
}
.composer-tools-pet-item:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.composer-tools-pet-item.active {
  border-color: var(--pet-accent);
  background: color-mix(in srgb, var(--pet-accent) 12%, transparent);
  color: var(--text);
}
.composer-tools-pet-item span:first-child {
  font-size: 18px;
  line-height: 1;
}
.composer-tools-settings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  width: 100%;
}
.composer-tools-settings:hover {
  background: var(--bg-subtle);
}

/* ============================================================
   Pet — uploaded image / spritesheet rendering
   ------------------------------------------------------------
   The face element switches between an emoji glyph and an
   image/spritesheet via the PetSpriteFace component. Static
   images inherit the float animation from .pet-sprite-glyph;
   spritesheets get their own pet-frames keyframes which the
   component drives with an inline `animation: …` string so
   each pet can choose its own (frames, fps) combo.
   ============================================================ */
.pet-image {
  display: inline-block;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  /* Pixel art-friendly upscale so 32×32 sheets stay crisp at 56 px. */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
.pet-image.static {
  /* Single static image — let the parent .pet-sprite-glyph float
     animation drive subtle movement. */
  background-size: contain;
  background-position: center;
}

/* Spritesheet keyframe used by PetSpriteFace inline animation. The
   from/to span 0% → 100%, which CSS resolves against
   (container_width − background_width). With background-size set to
   `${frames * 100}% 100%` each `steps()` tick lands on a frame edge. */
@keyframes pet-frames {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

/* Full-atlas mode: the sprite renders the active row from a Codex
   8x9 grid. background-position-y is set inline to the row offset and
   the keyframe walks frames inside that row. We use a CSS variable
   for the endpoint so a single keyframe block can drive any row's
   `frames`/`cols` combination — `--pet-atlas-end-x` is set per row by
   PetSpriteFace based on `frames / (cols - 1) * 100%`. */
.pet-image.atlas {
  background-repeat: no-repeat;
  /* The sprite element switches rows on the fly; smooth out the
     row transitions so direction changes feel less jarring without
     blurring the per-frame `steps()` cadence. */
  transition: background-position-y 220ms ease;
}
@keyframes pet-atlas-frames {
  from { background-position-x: 0%; }
  to { background-position-x: var(--pet-atlas-end-x, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-image.frames,
  .pet-image.atlas { animation: none !important; background-position-x: 0% !important; }
}

/* PetSettings — upload row, frames/fps grid, error caption */
.pet-image-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}
.pet-image-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.seg-btn.small.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.seg-btn.small.ghost:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border-strong);
}
.pet-image-error {
  color: var(--red) !important;
}
.pet-image-frames {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}
.pet-image-frames .field input {
  width: 100%;
}

/* Make the custom-pet preview / settings sprite respect the rounded
   accent halo used for emoji glyphs even when an image is rendered. */
.pet-custom-sprite {
  overflow: hidden;
}

/* --- Codex hatch-pet atlas import + AI generation panels ------------ */

.pet-atlas-preview {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.pet-atlas-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pet-atlas-head strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.pet-atlas-thumb {
  width: 100%;
  aspect-ratio: 1536 / 1872;
  max-height: 240px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: var(--surface-2, #f6f4ee);
  border-radius: 8px;
  border: 1px solid var(--border);
  image-rendering: pixelated;
}

.pet-atlas-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.pet-atlas-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease;
}

.pet-atlas-row:hover {
  border-color: var(--accent);
}

.pet-atlas-row.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pet-atlas-row[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.pet-atlas-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.pet-atlas-row-meta {
  font-size: 11px;
  color: var(--text-muted);
}

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

/* "Hatch with AI" panel */

.pet-hatch {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.pet-hatch-head h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
}

.pet-hatch-prompt {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text);
  max-height: 200px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.pet-hatch-actions {
  display: flex;
  gap: 8px;
}

.pet-hatch-foot {
  margin: 0;
}

/* "Recently hatched" — Codex pets discovered under ~/.codex/pets/ */

.pet-codex {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.pet-codex-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pet-codex-head h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 600;
}

/* Right-aligned button cluster in the codex head — keeps the
   "Download community pets" + "Refresh" buttons on a single row even
   when the section title wraps. */
.pet-codex-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pet-codex-empty {
  margin: 4px 0 0 0;
}

/* Inline status line shown after a community sync completes. Stays in
   the section flow so the result reads as part of the same control
   group as the trigger button. The error variant tints toward the
   accent without screaming red — sync errors are usually transient
   network blips. */
.pet-codex-sync-status {
  margin: 6px 0 8px 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.pet-codex-sync-status.error {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-subtle));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text-strong);
}

.pet-codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.pet-codex-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.pet-codex-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--surface-2, #f6f4ee);
  background-image: var(--pet-codex-src);
  background-repeat: no-repeat;
  /* Show only the top-left cell of the 8x9 atlas — that is the
     `idle` row, frame 0, and reads as a recognizable still even
     before adoption. */
  background-position: 0 0;
  background-size: 800% 900%;
  image-rendering: pixelated;
}

/* Hover preview — a larger floating overlay that plays through every
   cell of the 8x9 Codex atlas so users can see what animations (idle,
   running, waving, jumping, failed, waiting, …) the pet has before they
   adopt it. The overlay is purely decorative: pointer-events: none
   prevents it from stealing hover from the card, and aria-hidden keeps
   it out of the accessibility tree. */
.pet-codex-thumb-preview {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  width: 128px;
  /* 128 * (208/192) ≈ 138.7 — matches a single atlas cell aspect. */
  height: 139px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: var(--surface-2, #f6f4ee);
  background-image: var(--pet-codex-src);
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: 800% 900%;
  image-rendering: pixelated;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(0.82);
  transform-origin: 50% 100%;
  transition:
    opacity 140ms ease,
    transform 160ms ease;
  z-index: 20;
}

.pet-codex-card:hover .pet-codex-thumb-preview,
.pet-codex-card:focus-within .pet-codex-thumb-preview {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  /* 8 column steps (1 row) in 0.6s → ~13 fps per animation, then the row
     index advances every 0.6s for a full 5.4s sweep through all 9 rows.
     Animating background-position-x + -y as two independent animations
     keeps the nested loop in pure CSS. */
  animation:
    pet-codex-preview-col 0.6s steps(8, jump-none) infinite,
    pet-codex-preview-row 5.4s steps(9, jump-none) infinite;
}

@keyframes pet-codex-preview-col {
  from { background-position-x: 0%; }
  to { background-position-x: 100%; }
}

@keyframes pet-codex-preview-row {
  from { background-position-y: 0%; }
  to { background-position-y: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-codex-card:hover .pet-codex-thumb-preview,
  .pet-codex-card:focus-within .pet-codex-thumb-preview {
    animation: none;
    background-position: 0% 0%;
  }
}

.pet-codex-meta {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.pet-codex-meta strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pet-codex-meta span {
  font-size: 11px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Slash-command popover in the chat composer */

.slash-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 10;
  padding: 6px;
}

.slash-popover-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 6px 6px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.slash-popover-hint {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.slash-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.slash-item:hover,
.slash-item.active {
  background: var(--bg-subtle);
  border-color: var(--border);
}

.slash-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.slash-item-body {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}

.slash-item-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.slash-item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  padding: 0;
}

.slash-item-arg {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.slash-item-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* --- Arabic & Persian Comfort Pass --- */
[dir="rtl"] {
  --sans: "Cairo", "Inter", "Vazirmatn", "Noto Sans Arabic", "Segoe UI Arabic", "Tahoma", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Scope line-height increase to prose and chat to avoid breaking compact UI chrome */
[dir="rtl"] .prose,
[dir="rtl"] .chat-message,
[dir="rtl"] .msg .user-text {
  line-height: 1.7;
}

[dir="rtl"] .avatar-item,
[dir="rtl"] .settings-tab,
[dir="rtl"] .ds-item-name {
  text-align: right;
}

[dir="rtl"] .app-chrome-back svg,
[dir="rtl"] .back-btn svg,
[dir="rtl"] .icon-btn svg[data-lucide="chevron-left"],
[dir="rtl"] .icon-btn svg[data-lucide="chevron-right"],
[dir="rtl"] .icon-btn svg[data-lucide="arrow-left"],
[dir="rtl"] .icon-btn svg[data-lucide="arrow-right"],
[dir="rtl"] .newproj-tabs-arrow svg,
[dir="rtl"] .icon-only svg[data-lucide="chevron-left"],
[dir="rtl"] .icon-only svg[data-lucide="chevron-right"],
[dir="rtl"] .icon-only svg[data-lucide="arrow-left"],
[dir="rtl"] .icon-only svg[data-lucide="arrow-right"],
[dir="rtl"] .pet-rail-collapse svg,
[dir="rtl"] .welcome-pet-teaser svg {
  transform: scaleX(-1);
}

[dir="rtl"] .title,
[dir="rtl"] .meta {
  text-align: right;
}

/* ============================================================
   Quick Switcher (Cmd/Ctrl+P file palette)
   ============================================================ */
.qs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 12, 10, 0.32);
  /* Sits in the modal tier (alongside prompt-template-modal-overlay) so
   * the palette renders above any open context menus or popovers. */
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.qs-palette {
  width: min(560px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}
.qs-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.qs-input::placeholder {
  color: var(--text-faint);
}
.qs-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 0;
}
.qs-empty {
  padding: 20px 16px;
  color: var(--text-muted);
  text-align: center;
  font-size: 13px;
}
.qs-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: baseline;
  padding: 7px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.qs-row-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.qs-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-path {
  color: var(--text-muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.qs-kind {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.qs-row-active .qs-kind {
  color: var(--accent-strong);
}
.qs-footer {
  display: flex;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 11.5px;
  color: var(--text-muted);
}
.qs-footer kbd {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 2px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
}

/* ============================================================
   Global Search (Cmd/Ctrl+K)
   ============================================================ */
.gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 12, 10, 0.32);
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.gs-palette {
  width: min(600px, 92vw);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
}
.gs-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.gs-search-icon {
  font-size: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}
.gs-input {
  flex: 1 1;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.gs-input::placeholder {
  color: var(--text-faint);
}
.gs-result-count {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.gs-list {
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 0;
}
.gs-empty {
  padding: 40px 16px;
  text-align: center;
}
.gs-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.gs-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.gs-empty-hint {
  font-size: 13px;
  color: var(--text-muted);
}
.gs-section {
  margin-bottom: 4px;
}
.gs-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.gs-section-count {
  background: var(--bg-subtle);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
}
.gs-result-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.gs-result-item-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.gs-result-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.gs-result-content {
  flex: 1 1;
  min-width: 0;
}
.gs-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-result-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.gs-result-badge {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: capitalize;
  flex-shrink: 0;
}
.gs-result-type {
  font-size: 10px;
  color: var(--text-faint);
  flex-shrink: 0;
  text-transform: capitalize;
}
.gs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 11.5px;
  color: var(--text-muted);
}
.gs-footer-shortcuts {
  display: flex;
  gap: 12px;
}
.gs-footer-shortcuts span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gs-footer-shortcuts kbd {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 2px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.gs-footer-clear {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11.5px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.gs-footer-clear:hover {
  background: var(--accent-soft);
}

/* Library section (Skills & Design Systems management) */

.library-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.library-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.library-search:focus {
  border-color: var(--accent);
}

.library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.library-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.library-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-group-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.library-group-count {
  font-weight: 400;
  font-size: 11px;
  opacity: 0.6;
}

.library-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-wrap: wrap;
}

.library-card.disabled {
  opacity: 0.45;
}

.library-card-info {
  flex: 1 1;
  min-width: 0;
}

.library-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.library-card-name {
  font-size: 14px;
  font-weight: 600;
}

.library-card-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 500;
}

.library-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.library-card-expand {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  border-radius: 4px;
}

.library-card-expand:hover {
  background: var(--border);
}

.library-ds-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  padding: 12px;
  gap: 8px;
}

.library-ds-card.disabled {
  opacity: 0.45;
}

.library-ds-card-content {
  cursor: pointer;
}

.library-ds-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.library-ds-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 128, 0.2);
}

.library-ds-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.library-ds-summary {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.library-ds-card .toggle-switch {
  align-self: flex-end;
}

.library-preview {
  width: 100%;
  padding: 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.library-preview-body {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  color: var(--text-muted);
}

.library-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 32px 0;
}

/* Library install UI */

.library-toolbar-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.library-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.library-install-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.library-install-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg-primary);
}
.library-install-form .seg-control {
  width: -moz-fit-content;
  width: fit-content;
}

.library-install-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.library-install-row .library-search {
  flex: 1 1;
}

.library-install-submit {
  padding: 5px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.library-install-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.library-install-error {
  color: #e55;
  font-size: 12px;
  margin: 0;
}

.library-source-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.library-source-badge.installed {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.library-uninstall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.library-uninstall-btn:hover {
  background: color-mix(in srgb, #e55 12%, transparent);
  color: #e55;
}

.library-ds-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 6px;
}

.library-ds-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toggle switch */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border);
  border-radius: 20px;
  transition: background-color 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}

.toggle-switch-sm {
  width: 30px;
  height: 17px;
}

.toggle-switch-sm .toggle-slider::before {
  height: 11px;
  width: 11px;
}

.toggle-switch-sm input:checked + .toggle-slider::before {
  transform: translateX(13px);
}
/* Manual edit mode */
.manual-edit-workspace {
  display: grid;
  grid-template-columns: 240px minmax(420px, 1fr) 344px;
  grid-gap: 10px;
  gap: 10px;
  height: 100%;
  min-height: 0;
  padding: 10px;
  background: var(--bg);
}

.manual-edit-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.manual-edit-canvas iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.manual-edit-layers,
.manual-edit-right {
  min-height: 0;
}

.manual-edit-layers,
.manual-edit-modal,
.manual-edit-changes {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.manual-edit-layers {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.manual-edit-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.manual-edit-panel-head h3 {
  margin: 0;
  font-size: 13px;
}

.manual-edit-panel-head span {
  color: var(--text-muted);
  font-size: 11px;
}

.manual-edit-layer-list,
.manual-edit-history-list {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  overflow: auto;
  padding: 10px;
}

.manual-edit-layer-row {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  width: 100%;
  height: auto;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-panel);
}

.manual-edit-layer-row.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-panel));
  box-shadow: inset 3px 0 0 var(--accent);
}

.manual-edit-layer-row strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
}

.manual-edit-layer-row span {
  color: var(--text-muted);
  font-size: 11px;
}

.manual-edit-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manual-edit-modal {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.manual-edit-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px;
  border-bottom: 1px solid var(--border);
}

.manual-edit-modal-head span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.manual-edit-modal-head h3 {
  max-width: 220px;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-edit-modal-head em {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}

.manual-edit-empty {
  margin: 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.manual-edit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 12px 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
}

.manual-edit-meta strong,
.manual-edit-meta span,
.manual-edit-meta code {
  display: block;
}

.manual-edit-meta span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}

.manual-edit-meta code {
  max-width: 120px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manual-edit-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 5px;
  gap: 5px;
  padding: 0 12px 12px;
}

.manual-edit-tabs button {
  min-height: 30px;
  padding: 0 6px;
  font-size: 11px;
  text-transform: capitalize;
}

.manual-edit-tabs button.active {
  color: var(--bg-panel);
  border-color: var(--accent);
  background: var(--accent);
}

.manual-edit-tab-body {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  min-height: 0;
  padding: 0 12px 12px;
  overflow: auto;
}

.manual-edit-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.manual-edit-field span {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.manual-edit-field input,
.manual-edit-field textarea,
.manual-edit-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 9px;
  color: var(--text);
  background: var(--bg-panel);
  font: inherit;
}

.manual-edit-field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.45;
}

.manual-edit-field.compact {
  gap: 4px;
}

.manual-edit-field.compact input,
.manual-edit-field.compact select {
  min-height: 32px;
  padding: 6px 8px;
}

.manual-edit-code {
  min-height: 150px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
  font-size: 11px !important;
  white-space: pre;
}

.manual-edit-code.tall {
  min-height: 260px;
}

.manual-edit-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 9px;
  gap: 9px;
}

.manual-edit-style-grid .wide {
  grid-column: 1 / -1;
}

.manual-edit-error {
  margin: 0 12px 10px;
  padding: 8px 10px;
  border: 1px solid var(--red-border);
  border-radius: 6px;
  color: var(--red);
  background: var(--red-bg);
  font-size: 12px;
}

.manual-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.manual-edit-actions .primary {
  color: var(--bg-panel);
  border-color: var(--accent);
  background: var(--accent);
}

.manual-edit-changes {
  flex: 1 1;
  min-height: 0;
  overflow: hidden;
}

.manual-edit-history-actions {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
}

.manual-edit-history-entry {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
}

.manual-edit-history-entry strong {
  font-size: 12px;
}

.manual-edit-history-entry code {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: 11px;
  white-space: pre-wrap;
}

/* Privacy panel layout. The toggle row stack reuses .toggle-row (the
   iOS-style switch from NewProjectPanel); we only need to space the rows
   apart. The disclosure list inside the consent card is purely a typography
   block — no chrome of its own. */
.settings-privacy-toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-privacy-disclosure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}

.settings-privacy-disclosure > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-privacy-disclosure dt {
  font-size: 13px;
  font-weight: 600;
}

.settings-privacy-disclosure dd {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.privacy-consent-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.privacy-consent-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 38px;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-color: var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.privacy-consent-action:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
}

/* First-run privacy consent banner. Cookie-consent-style: anchored to the
   bottom-right of the viewport, prominent but non-blocking. Reuses the
   same typography + radii + shadow as the rest of the panels. */
.privacy-consent-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* Below modal backdrops; App.tsx hides the banner while Settings is open. */
  z-index: 90;
  width: 380px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

.privacy-consent-banner .privacy-consent-actions {
  pointer-events: auto;
}

.privacy-consent-banner-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.privacy-consent-banner-head .kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.privacy-consent-banner-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.privacy-consent-banner-lead {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.privacy-consent-banner-footer {
  margin: 2px 0 6px;
}

/* ============================================================
   External MCP servers — Settings panel
   ------------------------------------------------------------
   Compact card-per-server layout. Inputs stack vertically inside
   each card so the narrow settings column (~440px after sidebar)
   doesn't crush the inner grid.
   ============================================================ */
.mcp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.mcp-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--bg-subtle);
}
.mcp-picker-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.mcp-picker-head strong { font-size: 12.5px; }
.mcp-picker-grid {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.mcp-picker-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
}
.mcp-picker-item:hover {
  border-color: var(--border-strong);
  background: var(--bg);
}
/* The clickable region of a template card. Split out from the wrapper so a
   sibling homepage `<a>` can sit next to it without nesting interactives. */
.mcp-picker-item-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: inherit;
}
.mcp-picker-item-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  width: 100%;
}
.mcp-picker-transport {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  margin-left: auto;
}
.mcp-picker-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.mcp-picker-example {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 2px;
}
.mcp-picker-example-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  align-self: center;
}
.mcp-picker-example-text {
  font-style: italic;
  color: var(--text);
}
.mcp-picker-homepage {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.mcp-picker-homepage:hover {
  color: var(--accent, var(--text));
  text-decoration: underline;
}

/* ── Picker grouping (added when the catalog crossed ~12 templates) ─── */

/* Sticky-header row inside `.mcp-picker-head` so the close affordance is
   always visible even after the user scrolls into a long category. */
.mcp-picker-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mcp-picker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.mcp-picker-search {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
}
.mcp-picker-search:focus {
  outline: none;
  border-color: var(--border-strong, var(--text-faint));
}

/* Cap the group region so 17+ templates do not push the picker into a
   2000px tall block. The footer (custom-server card) sits OUTSIDE this
   scroll region so it is always reachable. */
.mcp-picker-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}

.mcp-picker-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
}
.mcp-picker-group[open] {
  background: var(--bg);
}
.mcp-picker-group-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style: none;
}
.mcp-picker-group-summary::-webkit-details-marker { display: none; }
.mcp-picker-group-summary::before {
  content: '▸';
  display: inline-block;
  width: 0.9em;
  flex-shrink: 0;
  color: var(--text-faint);
  font-size: 10px;
  transition: transform 120ms ease;
}
.mcp-picker-group[open] > .mcp-picker-group-summary::before {
  transform: rotate(90deg);
}
.mcp-picker-group-summary:hover {
  background: var(--bg-subtle);
}
.mcp-picker-group-summary-title {
  font-weight: 600;
}
.mcp-picker-group-summary-count {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}
.mcp-picker-group-summary-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
  /* Hide the per-group hint on narrow widths so the count + title stay
     readable. The hint is supplementary so dropping it is acceptable. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
@media (max-width: 480px) {
  .mcp-picker-group-summary-hint { display: none; }
}
.mcp-picker-group .mcp-picker-grid {
  padding: 4px 8px 10px;
}

.mcp-picker-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 12px;
}

.mcp-picker-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.mcp-picker-custom {
  /* Visual nudge so the custom-server card reads as a footer affordance,
     not just another template card. */
  border-style: dashed !important;
}

.mcp-error {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger, #d54) 50%, transparent);
  background: color-mix(in srgb, var(--danger, #d54) 10%, transparent);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--danger, #d54);
}

.mcp-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mcp-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mcp-row-disabled { opacity: 0.55; }
/* Template-derived hint shown on saved rows that came from a built-in
   preset (filesystem, github, fetch, higgsfield…). Default-collapsed
   `<details>`; the summary line is the only thing visible until the user
   clicks. Keeps long descriptions out of the way but still discoverable. */
.mcp-row-info {
  border-left: 2px solid var(--border-strong, var(--border));
  background: var(--bg-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mcp-row-info-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 11.5px;
  color: var(--text-muted);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  list-style: none;
}
.mcp-row-info-summary::-webkit-details-marker { display: none; }
.mcp-row-info-summary::before {
  content: '▸';
  display: inline-block;
  width: 0.9em;
  flex-shrink: 0;
  transition: transform 120ms ease;
  color: var(--text-faint);
  font-size: 10px;
}
.mcp-row-info[open] > .mcp-row-info-summary::before {
  transform: rotate(90deg);
}
.mcp-row-info-summary:hover {
  color: var(--text);
}
.mcp-row-info-summary-label {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mcp-row-info-body {
  padding: 0 8px 8px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcp-row-info-desc {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
}
.mcp-row-info-example {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.mcp-row-info-example-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mcp-row-info-example-text {
  font-style: italic;
  color: var(--text);
}
.mcp-row-info-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 11px;
}
.mcp-row-info-link:hover {
  color: var(--accent, var(--text));
  text-decoration: underline;
}
.mcp-row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mcp-row-toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.mcp-row-toggle input { width: auto; }
.mcp-row-label {
  flex: 1 1;
  min-width: 0;
  padding: 5px 8px;
  font-size: 12px;
}
.mcp-row-counter {
  flex-shrink: 0;
  font-size: 11px;
  white-space: nowrap;
}
.mcp-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.mcp-row-actions .icon-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.mcp-row-actions .icon-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
/* The expand/collapse chevron at the end of the row header. Uses a single
   `chevron-down` icon and rotates it 180° when the row is open so the
   element stays visually anchored to the same DOM node. */
.mcp-row-toggle-btn svg {
  transition: transform 120ms ease;
}
.mcp-row-expanded .mcp-row-toggle-btn svg {
  transform: rotate(180deg);
}

/* Read-only "title bar" shown when a row is collapsed. Acts as a click
   target that expands the row, so the user doesn't have to aim for the
   tiny chevron at the end of the row. */
.mcp-row-summary-title {
  flex: 1 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.mcp-row-summary-title:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
}
.mcp-row-summary-name {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}
.mcp-row-summary-transport {
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
}

.mcp-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
}
@media (max-width: 720px) {
  .mcp-row-grid { grid-template-columns: 1fr; }
}
.mcp-row-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mcp-row-field-label {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.mcp-row-field input,
.mcp-row-field select,
.mcp-row-field textarea {
  width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  font-family: var(--mono);
}
.mcp-row-field textarea {
  font-family: var(--mono);
  resize: vertical;
  min-height: 38px;
}
.mcp-row-field-stack { width: 100%; }

.mcp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mcp-foot-spacer { flex: 1 1; }
.mcp-saved-msg { color: var(--success, #6c6); }

/* Per-row OAuth Connect/Disconnect control. Sits between the row header
 * and the field grid so the connection state is the FIRST thing the user
 * sees on a row that needs auth. */
.mcp-oauth-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}
.mcp-oauth-control.connected {
  border-color: color-mix(in srgb, var(--success, #2da44e) 60%, var(--border));
  background: color-mix(in srgb, var(--success, #2da44e) 8%, var(--bg-subtle));
}
.mcp-oauth-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.mcp-oauth-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-faint);
}
.mcp-oauth-dot-ok {
  background: var(--success, #2da44e);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #2da44e) 25%, transparent);
}
.mcp-oauth-dot-pending {
  background: var(--accent);
  animation: mcp-oauth-pulse 1.2s ease-in-out infinite;
}
@keyframes mcp-oauth-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.mcp-oauth-actions {
  display: inline-flex;
  gap: 6px;
}
.mcp-oauth-actions button {
  padding: 5px 12px;
  font-size: 12px;
}
.mcp-oauth-error {
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--danger, #d54) 14%, transparent);
  color: var(--danger, #d54);
  white-space: pre-wrap;
  word-break: break-all;
}
.mcp-oauth-hint {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  font-size: 11.5px;
}
.mcp-oauth-fallback {
  font-size: 11.5px;
  line-height: 1.5;
}
.mcp-oauth-fallback .md-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mcp-oauth-fallback .md-link:hover {
  text-decoration-thickness: 2px;
}

.mcp-json-helper {
	margin-top: 10px;

	border: 1px solid var(--border);
	border-radius: var(--radius);

	background: var(--bg-subtle);

	overflow: hidden;
}

.mcp-json-helper-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;

  border: none;
  border-radius: calc(var(--radius) - 2px);

  background: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;

  transition:
    color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.mcp-json-helper-toggle:hover {
  color: var(--text);
  background: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.mcp-json-helper.is-open .mcp-json-helper-toggle {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--border);
}

.mcp-json-helper.is-open .mcp-json-helper-toggle:hover {
  box-shadow: inset 0 -1px 0 var(--border);
}
.mcp-json-helper-toggle span:first-child {
	text-align: left;
}

.mcp-json-helper-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex-shrink: 0;

	color: var(--text-soft);
}

.mcp-json-helper-example {
	display: flex;
	flex-direction: column;
}

.mcp-json-helper-example-head {
	padding: 10px 12px 0;

	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;

	color: var(--text-soft);
}

.mcp-json-helper-code {
	margin: 0 12px 12px;

	padding: 14px;

	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);

	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--bg) 92%, black) 0%,
			color-mix(in srgb, var(--bg) 86%, black) 100%
		);

	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.7;

	color: var(--text);

	overflow-x: auto;
}

.mcp-json-helper-code code {
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.json-key {
	color: var(--accent);
}

.json-string {
	color: var(--green);
}

.json-punctuation {
	color: var(--text-soft);
}

.mcp-json-helper-conversion {
	display: flex;
	flex-direction: column;
	gap: 10px;

	padding: 12px;

	border-top: 1px solid var(--border);

	background: transparent;
}

.mcp-json-helper-conversion div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mcp-json-helper-conversion strong {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;

	color: var(--text-soft);
}

.mcp-json-helper-conversion code {
	width: -moz-fit-content;
	width: fit-content;
}

.mcp-json-helper-toggle-content {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	min-width: 0;
	flex: 1 1;
}

.mcp-json-helper-eye {
	width: 22px;
	height: 22px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	border-radius: 999px;

	background: var(--accent-tint);

	color: var(--accent);

	flex-shrink: 0;
}

.mcp-json-helper-toggle-text {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;

	color: inherit;

	text-align: left;
}

/* ----- Project actions toolbar (#451) ---------------------------------- */
/* Project-scoped actions live in their own bar between the chrome header
 * and the chat/workspace split. File-scoped actions stay inside
 * FileViewer's share menu. */
.project-actions-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle, var(--bg));
  min-height: 40px;
  flex-wrap: wrap;
}
.project-actions-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12.5px;
  line-height: 1.3;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-strong, var(--text));
  cursor: pointer;
}
.project-actions-button:hover:not(:disabled) {
  background: var(--bg-subtle, var(--bg));
}
.project-actions-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.project-actions-button-primary {
  background: var(--accent);
  color: var(--accent-text, white);
  border-color: var(--accent);
}
.project-actions-button-primary:hover:not(:disabled) {
  filter: brightness(0.95);
  background: var(--accent);
}
.project-actions-button-warning {
  border-color: var(--warning, #d97706);
  color: var(--warning, #d97706);
}
.project-actions-button-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: var(--bg);
}
.project-actions-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: project-actions-spin 0.8s linear infinite;
}
@keyframes project-actions-spin {
  to {
    transform: rotate(360deg);
  }
}
.project-actions-label {
  font-size: 12.5px;
  color: var(--text-strong, var(--text));
}
.project-actions-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.project-actions-button-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project-actions-chip {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
  color: var(--warning, #d97706);
}
.project-actions-disabled-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* ----- Toast (#451) ---------------------------------------------------- */
/* Single transient bottom-center toast for project-scoped actions. */
.od-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  padding: 10px 14px;
  border-radius: var(--radius-sm, 4px);
  background: var(--text-strong, #1f2328);
  color: var(--bg, white);
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  pointer-events: auto;
}
.od-toast-message {
  font-weight: 500;
}
.od-toast-details {
  margin-top: 4px;
  font-size: 11.5px;
  opacity: 0.85;
  font-weight: 400;
}
.od-toast-code {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 4px);
  background: rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.od-toast-dismiss {
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--bg, white);
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.od-toast-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------------- Routines (Settings → Routines) ---------------- */

.routines-section .section-head { align-items: flex-start; }

.routines-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.routines-form { margin-top: 4px; }

.routines-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-subtle);
}
.routines-empty strong { color: var(--text); display: block; margin-bottom: 4px; font-size: 14px; }
.routines-empty p { margin: 0; font-size: 13px; }
.routines-empty em { color: var(--text); font-style: normal; font-weight: 600; }

.routines-field { display: flex; flex-direction: column; gap: 6px; }
.routines-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.routines-field input[type="text"],
.routines-field input[type="time"],
.routines-field input[type="number"],
.routines-field input:not([type]),
.routines-field textarea,
.routines-field select,
.routines-project-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.routines-field input:focus,
.routines-field textarea:focus,
.routines-field select:focus,
.routines-project-select:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(26, 25, 22, 0.08);
}
.routines-field textarea { resize: vertical; min-height: 80px; }

.routines-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.routines-fieldrow { display: flex; gap: 12px; flex-wrap: wrap; }
.routines-fieldrow > .routines-field { flex: 1 1 180px; min-width: 0; }
.routines-fieldrow-2col > .routines-field { flex: 1 1 240px; }

.routines-schedule-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.routines-kind-pills { align-self: flex-start; }

.routines-weekday-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.routines-weekday {
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 120ms ease;
}
.routines-weekday:hover { color: var(--text); border-color: var(--text-soft); }
.routines-weekday.active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.routines-schedule-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.routines-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.routines-fieldset legend {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 6px;
}
.routines-radio {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease;
  align-items: flex-start;
}
.routines-radio:hover { background: var(--bg-subtle); }
.routines-radio input { margin-top: 3px; }
.routines-radio span { display: flex; flex-direction: column; gap: 2px; }
.routines-radio strong { font-size: 14px; color: var(--text); font-weight: 600; }
.routines-radio small { font-size: 12px; color: var(--text-muted); }

.routines-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

/* List of existing routines */
.routines-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.routines-item.is-disabled { opacity: 0.7; }

.routines-item-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.routines-item-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.routines-item-title { display: flex; align-items: center; gap: 8px; }
.routines-item-title strong { font-size: 15px; color: var(--text); font-weight: 600; }
.routines-item-line { font-size: 13px; color: var(--text); }
.routines-item-meta {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.routines-tag {
  font-size: 11px;
  background: var(--bg-muted);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.routines-item-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.routines-item-history {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

.routines-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.routines-history-empty { font-size: 12px; color: var(--text-muted); padding: 6px 0; }
.routines-history-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}
.routines-history-row:hover { background: var(--bg-subtle); }
.routines-history-time { color: var(--text); }
.routines-history-trigger {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.routines-history-link {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}
.routines-history-link:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

.routines-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-muted);
  color: var(--text-muted);
}
.routines-status-running { background: #f3eddc; color: #8a6a1a; }
.routines-status-queued { background: #ece9e2; color: var(--text-muted); }
.routines-status-succeeded { background: #e3efe6; color: #2e7d5b; }
.routines-status-failed { background: #f6dfdc; color: #b3382b; }
.routines-status-canceled { background: #ece9e2; color: var(--text-muted); }

/* ============================================================
   Auth Gate
   ============================================================ */
.auth-gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 9999;
}

.auth-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.auth-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-logo .auth-title {
  margin: 0;
}

.auth-close-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.auth-close-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.auth-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-form h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.auth-field input {
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.auth-error {
  background: #f6dfdc;
  border: 1px solid #f0c4c0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #b3382b;
}

.auth-message {
  text-align: center;
  padding: 16px 0;
}

.auth-message p {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 12px 0;
}

.auth-submit {
  padding: 10px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}

.auth-submit:hover:not(:disabled) {
  opacity: 0.9;
}

.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 2px;
}
.auth-remember input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-privacy-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 4px;
  line-height: 1.4;
}
.auth-privacy-agree input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}
.auth-link-inline {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-link-inline:hover {
  text-decoration: underline;
}

.auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.auth-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link:hover {
  opacity: 0.8;
}

.auth-divider {
  color: var(--border-soft);
}

.auth-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 9999;
}

.auth-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* ---- Password Strength ---- */
.password-strength-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.password-strength-bar {
  flex: 1 1;
  height: 4px;
  background: var(--border-soft);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.password-strength-bar::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 2px;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.password-strength-weak .password-strength-bar {
  background: #fee2e2;
}

.password-strength-weak .password-strength-bar::after {
  width: 33%;
  background: #ef4444;
}

.password-strength-medium .password-strength-bar {
  background: #fef3c7;
}

.password-strength-medium .password-strength-bar::after {
  width: 66%;
  background: #f59e0b;
}

.password-strength-strong .password-strength-bar {
  background: #d1fae5;
}

.password-strength-strong .password-strength-bar::after {
  width: 100%;
  background: #22c55e;
}

.password-strength-label {
  font-size: 12px;
  font-weight: 500;
  min-width: 24px;
}

.password-strength-weak .password-strength-label {
  color: #ef4444;
}

.password-strength-medium .password-strength-label {
  color: #f59e0b;
}

.password-strength-strong .password-strength-label {
  color: #22c55e;
}

/* ---- Admin Panel ---- */
.admin-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.admin-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: auth-spin 0.7s linear infinite;
}
.admin-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg-app);
}
.admin-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.admin-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.admin-login-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
  color: var(--text);
}
.admin-login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 28px;
}
.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-login-form .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.admin-login-form .field-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.admin-login-form .field-input {
  height: 38px;
  font-size: 14px;
}
.admin-login-error {
  font-size: 13px;
  color: var(--red);
  padding: 8px 12px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
}
.admin-login-btn {
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  margin-top: 4px;
}
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-app);
}
.admin-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
}
.admin-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px;
  border-bottom: 1px solid var(--border);
}
.admin-sidebar-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.admin-nav {
  flex: 1 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-nav-item {
  all: unset;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms, color 120ms;
}
.admin-nav-item:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.admin-nav-item.active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.admin-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.admin-nav-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}
.admin-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-user-info {
  flex: 1 1;
  min-width: 0;
}
.admin-user-email {
  display: block;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-role {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}
.admin-logout-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
}
.admin-logout-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.admin-main {
  flex: 1 1;
  min-width: 0;
  overflow: auto;
}
.admin-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 40px;
}
.admin-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.admin-section-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: -12px 0 0;
}
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
.admin-stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.admin-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.admin-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.admin-stat-value-positive { color: var(--green); }
.admin-stat-value-negative { color: var(--red); }
.admin-search-bar {
  display: flex;
  gap: 8px;
}
.admin-search-input {
  height: 36px;
  padding: 0 12px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  width: 240px;
  outline: none;
  transition: border-color 120ms;
}
.admin-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.admin-table-wrap {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.admin-table thead {
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.admin-table th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  white-space: nowrap;
}
.admin-table td {
  padding: 11px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-table tbody tr:hover td {
  background: var(--bg-subtle);
}
.admin-table-empty {
  text-align: center;
  color: var(--text-faint);
  padding: 40px 20px;
}
.admin-td-email { font-family: ui-monospace, monospace; font-size: 12.5px; }
.admin-td-num { font-family: ui-monospace, monospace; font-size: 12.5px; text-align: right; }
.admin-td-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.admin-td-positive { color: var(--green); }
.admin-td-negative { color: var(--red); }
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: default;
  transition: opacity 120ms;
}
.admin-badge-green {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}
.admin-badge-red {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-border);
}
.admin-badge-muted {
  background: var(--bg-muted);
  color: var(--text-muted);
  border-color: var(--border);
  cursor: pointer;
}
.admin-badge-muted:hover { opacity: 0.75; }
.admin-action-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  white-space: nowrap;
}
.admin-action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.admin-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.admin-pagination-info {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-right: auto;
}
.admin-pagination-btn {
  all: unset;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-panel);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.admin-pagination-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--accent);
}
.admin-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.admin-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.admin-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
}
.admin-modal .field {
  margin-bottom: 14px;
}
.admin-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.admin-action-error {
  font-size: 12.5px;
  color: var(--red);
  padding: 7px 10px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.admin-action-success {
  font-size: 12.5px;
  color: var(--green);
  padding: 7px 10px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.admin-notice {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid transparent;
}
.admin-notice-success {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}
.admin-notice-error {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-border);
}
.admin-filter-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-subtle);
  padding: 3px;
  border-radius: var(--radius-sm);
}
.admin-filter-tab {
  all: unset;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.admin-filter-tab.active {
  background: var(--bg-panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.admin-media-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-media-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-media-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}
.admin-media-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.admin-media-card-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.admin-media-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-secret-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.admin-secret-row .field-input {
  flex: 1 1;
}
.admin-secret-toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms;
  font-size: 14px;
}
.admin-secret-toggle:hover {
  background: var(--bg-muted);
}
.admin-connectors-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.admin-connectors-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-subtle);
}
.admin-payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}
@media (max-width: 700px) {
  .admin-payment-grid { grid-template-columns: 1fr; }
}
.admin-payment-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.admin-payment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
.admin-payment-name {
  font-size: 14px;
  font-weight: 600;
}
.admin-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.admin-toggle-label {
  font-size: 12px;
  color: var(--text-muted);
}
.admin-toggle {
  width: 36px;
  height: 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.admin-toggle:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.admin-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.admin-toggle:checked::after {
  transform: translateX(16px);
}
.admin-sub-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--text);
}
.admin-cardkey-create {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.admin-cardkey-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.admin-cardkey-form .field {
  flex: 1 1;
}
.admin-cardkey-result {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-cardkey-result-label {
  font-size: 12px;
  color: var(--text-muted);
}
.admin-cardkey-code {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: var(--bg-panel);
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.admin-cardkey-result-pts {
  font-size: 13px;
  color: #22c55e;
  font-weight: 600;
}
.admin-cardkey-cell-code {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: 3px;
}
.admin-action-btn-danger {
  color: #ef4444 !important;
}
.admin-action-btn-danger:hover {
  background: #ef44441a !important;
  border-color: #ef4444 !important;
}


/* ---- PersonalCenter ---- */
.pc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(860px, 95vw);
  height: min(620px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-shrink: 0;
}
.pc-title {
  font-weight: 600;
  font-size: 15px;
}
.pc-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-close-btn:hover { color: var(--text); background: var(--bg-subtle); }
.pc-body {
  display: flex;
  flex: 1 1;
  overflow: hidden;
}
.pc-nav {
  width: 160px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 2px;
}
.pc-nav-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
  padding-top: 8px;
  margin-top: 8px;
}
.pc-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 13px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  text-align: left;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}
.pc-nav-item:hover { background: var(--bg-muted); color: var(--text); }
.pc-nav-active {
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
  font-weight: 500;
}
.pc-nav-logout { color: var(--text-faint) !important; }
.pc-nav-logout:hover { color: var(--text) !important; }
.pc-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pc-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.pc-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--text);
}
.pc-info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pc-info-label {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.pc-info-value {
  font-size: 13px;
  color: var(--text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
}
.pc-value-accent { color: var(--accent); font-weight: 500; }
.pc-value-positive { color: #22c55e; font-weight: 500; }
.pc-value-negative { color: #ef4444; font-weight: 500; }
.pc-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-code {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  font-family: monospace;
  letter-spacing: 0.05em;
}
.pc-code-lg {
  font-size: 18px;
  padding: 4px 14px;
}
.pc-copy-btn {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.pc-copy-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.pc-summary-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.pc-stat {
  flex: 1 1;
  min-width: 120px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-stat-centered {
  align-items: center;
  text-align: center;
}
.pc-stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
}
.pc-stat-value {
  font-size: 18px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.pc-range-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.pc-range-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}
.pc-range-tab:hover { background: var(--bg-muted); color: var(--text); }
.pc-range-active { background: var(--accent-bg) !important; color: var(--accent) !important; border-color: var(--accent); }
.pc-chart-wrap { margin: 4px 0; }
.pc-empty, .pc-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px;
}
.pc-tx-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 320px;
  overflow-y: auto;
}
.pc-tx-header {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.pc-tx-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  align-items: center;
  font-size: 12.5px;
}
.pc-tx-row:hover { background: var(--bg-muted); }
.pc-tx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.pc-tx-item:hover { background: var(--bg-muted); }
.pc-tx-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pc-tx-desc { font-size: 13px; }
.pc-tx-time { font-size: 11px; color: var(--text-muted); }
.pc-tx-kind {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pc-tx-amount {
  font-size: 13px;
  font-weight: 600;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.tx-amount-positive { color: #22c55e; }
.tx-amount-negative { color: #ef4444; }
.pc-tx-balance { font-size: 12px; color: var(--text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ---------- recharge ---------- */
.pc-recharge-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}
.pc-recharge-tab {
  flex: 1 1;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pc-recharge-tab:hover { background: var(--bg-subtle); color: var(--text); }
.pc-recharge-tab-active {
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 500;
}
.pc-recharge-section-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  margin-top: 16px;
}
.pc-recharge-section-title:first-child { margin-top: 0; }
.pc-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}
.pc-amount-btn {
  padding: 10px 8px;
  font-size: 13px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pc-amount-btn:hover { border-color: var(--accent); color: var(--accent); }
.pc-amount-btn-active {
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.pc-custom-amount { margin-bottom: 12px; }
.pc-custom-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.pc-custom-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pc-custom-input {
  flex: 1 1;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s;
}
.pc-custom-input:focus { border-color: var(--accent); }
.pc-custom-input::-webkit-inner-spin-button,
.pc-custom-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.pc-custom-unit { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.pc-recharge-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.pc-recharge-summary-label { font-size: 13px; color: var(--text-muted); }
.pc-recharge-summary-value { font-size: 15px; font-weight: 700; color: var(--accent); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.pc-payment-methods {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.pc-payment-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
}
.pc-payment-btn:hover { border-color: var(--accent); }
.pc-payment-btn-active {
  border-color: var(--accent) !important;
  background: var(--accent-bg) !important;
}
.pc-payment-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.payment-brand-mark {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}
.payment-brand-mark-sm {
  width: 18px;
  height: 18px;
}
.pc-payment-name { font-size: 13px; font-weight: 500; }
.pc-recharge-submit {
  width: 100%;
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 8px;
}
.pc-recharge-submit:hover:not(:disabled) { opacity: 0.88; }
.pc-recharge-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.pc-recharge-result {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}
.pc-recharge-result-success {
  background: #22c55e1a;
  color: #22c55e;
  border: 1px solid #22c55e33;
}
.pc-recharge-result-error {
  background: #ef44441a;
  color: #ef4444;
  border: 1px solid #ef444433;
}
.pc-card-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.pc-card-input-wrap { margin-bottom: 12px; }
.pc-card-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: monospace;
  letter-spacing: 0.08em;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
.pc-card-input:focus { border-color: var(--accent); }
.pc-card-input::placeholder { font-family: inherit; letter-spacing: 0; color: var(--text-faint); }
.pc-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  text-align: center;
}
.pc-qr-label { font-size: 13px; font-weight: 600; color: var(--text); }
.pc-qr-method {
  font-size: 13px;
  font-weight: 500;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--bg-muted);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}
.pc-qr-wrap {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc-qr-img { width: 180px; height: 180px; display: block; }
.pc-qr-fallback {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-all;
}
.pc-qr-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.pc-qr-hint { font-size: 12px; color: var(--text-muted); }

/* ============================================================================
   ShareDialog — modal dialog for share link creation and management
   ============================================================================ */
.share-dialog {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}
.share-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.share-dialog-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.share-dialog-error {
  padding: 10px 12px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 13px;
}
.share-dialog-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-dialog-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.share-dialog-link-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-dialog-link-input {
  flex: 1 1;
  font-size: 12px;
  font-family: var(--mono);
  padding: 8px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.share-dialog-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
}
.share-dialog-copy-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.share-dialog-copy-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.share-dialog-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.share-dialog-stats span {
  padding: 2px 8px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.share-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.share-dialog-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.share-dialog-fieldset legend {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.share-dialog-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.share-dialog-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.share-dialog-radio:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}
.share-dialog-radio input[type="radio"] {
  width: auto;
  margin: 0;
}
.share-dialog-radio:has(input:checked) {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.share-dialog-custom-expiry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.share-dialog-custom-expiry label {
  font-size: 12px;
  color: var(--text-muted);
}
.share-dialog-custom-expiry input {
  width: 80px;
  font-size: 12px;
}
.share-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-dialog-field label:not(.share-dialog-radio) {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.share-dialog-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.share-dialog-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}
.share-dialog-password-input {
  margin-top: 6px;
}
.share-dialog-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}
.share-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.share-dialog-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}
.share-dialog-create-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.share-dialog-create-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.share-dialog-revoke-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.share-dialog-revoke-btn:hover:not(:disabled) {
  background: var(--red-bg);
  border-color: var(--red-border);
  color: var(--red);
}
.share-dialog-revoke-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.share-dialog-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
.share-dialog-secondary-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
}
.share-dialog-secondary-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================================
   RechargeDialog — modal dialog for point package purchasing
   ============================================================================ */
.recharge-dialog {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
}
.recharge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.recharge-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.recharge-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: -1px;
}
.recharge-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}
.recharge-tab:hover { color: var(--text); }
.recharge-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.recharge-packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  gap: 8px;
}
.recharge-package {
  padding: 12px;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: border-color 0.12s, background 0.12s;
}
.recharge-package:hover { border-color: var(--accent-soft); background: var(--bg-subtle); }
.recharge-package.active { border-color: var(--accent); background: var(--accent-tint); }
.package-points { font-size: 20px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.package-unit { font-size: 11px; color: var(--text-muted); }
.package-bonus { font-size: 11px; color: var(--accent); font-weight: 500; }
.package-price { font-size: 15px; font-weight: 600; color: var(--text-strong); margin-top: 4px; }
.recharge-submit {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.12s;
}
.recharge-submit:hover:not(:disabled) { opacity: 0.88; }
.recharge-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.recharge-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  color: var(--text-muted);
  font-size: 14px;
}
.recharge-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 0;
  color: var(--success, #1f7a3a);
}
.recharge-success p { margin: 0; font-size: 15px; font-weight: 500; }
.recharge-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  text-align: center;
}
.recharge-qr img { width: 180px; height: 180px; display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.recharge-qr p { margin: 0; font-size: 13px; color: var(--text-muted); }
.recharge-qr .muted { font-size: 12px; color: var(--text-faint); }
.recharge-cardkey { display: flex; flex-direction: column; gap: 12px; }
.recharge-cardkey label { display: flex; flex-direction: column; gap: 6px; }
.recharge-cardkey label span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.recharge-cardkey input {
  padding: 10px 14px;
  font-size: 14px;
  font-family: monospace;
  letter-spacing: 0.06em;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s;
}
.recharge-cardkey input:focus { border-color: var(--accent); }
.recharge-cardkey input::placeholder { font-family: inherit; letter-spacing: 0; color: var(--text-faint); }
.recharge-spinner { display: flex; align-items: center; justify-content: center; padding: 48px; }
.recharge-spinner .spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   Share Dialog — modal dialog for share link creation
   ============================================================================ */
.share-dialog {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  animation: pop-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.share-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.share-dialog-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.share-dialog-error {
  padding: 12px;
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: var(--radius);
  color: var(--red);
  font-size: 14px;
}
.share-dialog-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-dialog-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.share-dialog-link-row {
  display: flex;
  gap: 8px;
}
.share-dialog-link-input {
  flex: 1 1;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
  color: var(--text);
  font-family: var(--mono);
}
.share-dialog-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.12s;
  white-space: nowrap;
}
.share-dialog-copy-btn:hover:not(:disabled) { opacity: 0.88; }
.share-dialog-copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.share-dialog-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.share-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.share-dialog-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.share-dialog-fieldset legend {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.share-dialog-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-dialog-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.share-dialog-radio:hover { border-color: var(--accent-soft); }
.share-dialog-radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.share-dialog-radio input { display: none; }
.share-dialog-custom-expiry {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.share-dialog-custom-expiry label { font-size: 13px; color: var(--text-muted); }
.share-dialog-custom-expiry input {
  width: 80px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
}
.share-dialog-custom-expiry input:focus { border-color: var(--accent); outline: none; }
.share-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-dialog-field label:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.share-dialog-field input[type="number"] {
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
}
.share-dialog-field input:focus { border-color: var(--accent); outline: none; }
.share-dialog-field input::placeholder { color: var(--text-faint); }
.share-dialog-hint { font-size: 12px; color: var(--text-faint); }
.share-dialog-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.share-dialog-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.share-dialog-password-input { margin-top: 6px; }
.share-dialog-password-input input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  box-sizing: border-box;
}
.share-dialog-password-input input:focus { border-color: var(--accent); outline: none; }
.share-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.share-dialog-create-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.12s;
}
.share-dialog-create-btn:hover:not(:disabled) { opacity: 0.88; }
.share-dialog-create-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.share-dialog-secondary-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s;
}
.share-dialog-secondary-btn:hover { background: var(--bg-muted); }
.share-dialog-revoke-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
  border-radius: var(--radius);
  cursor: pointer;
  margin-right: auto;
  transition: opacity 0.12s;
}
.share-dialog-revoke-btn:hover:not(:disabled) { opacity: 0.88; }
.share-dialog-revoke-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.share-dialog-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: -1px;
}
.share-dialog-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}
.share-dialog-tab:hover { color: var(--text); }
.share-dialog-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.share-dialog-embed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.share-dialog-embed-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.share-dialog-embed-preview {
  width: 100%;
  background: var(--bg-muted);
  border-radius: var(--radius);
  overflow: hidden;
}
.share-dialog-embed-code-wrapper {
  position: relative;
}
.share-dialog-embed-code {
  width: 100%;
  padding: 12px;
  font-size: 12px;
  font-family: var(--mono);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-muted);
  color: var(--text);
  resize: none;
  line-height: 1.5;
}
.share-dialog-embed-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}
.share-dialog-embed-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ============================================================================
   Shared Page — public page for viewing shared projects
   ============================================================================ */
.shared-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}
.shared-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}
.shared-page-logo a {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  text-decoration: none;
}
.shared-page-nav { display: flex; gap: 12px; }
.shared-page-login-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.12s;
}
.shared-page-login-btn:hover { background: var(--accent-tint); }
.shared-page-loading {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 15px;
}
.shared-page-loading .spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.shared-page-error {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  text-align: center;
}
.shared-page-error h1 { font-size: 20px; color: var(--text-strong); margin: 0; }
.shared-page-error p { font-size: 15px; color: var(--text-muted); margin: 0; }
.shared-page-password-gate {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  text-align: center;
}
.shared-page-password-gate h1 { font-size: 20px; color: var(--text-strong); margin: 0; }
.shared-page-password-gate p { font-size: 15px; color: var(--text-muted); margin: 0; }
.shared-page-password-gate form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 300px;
}
.shared-page-password-gate input {
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--text);
  text-align: center;
}
.shared-page-password-gate input:focus { border-color: var(--accent); outline: none; }
.shared-page-password-gate button[type="submit"] {
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.12s;
}
.shared-page-password-gate button[type="submit"]:hover:not(:disabled) { opacity: 0.88; }
.shared-page-password-gate button[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }
.shared-page-password-error {
  color: var(--red);
  font-size: 14px;
  margin: 0;
}
.shared-page-content {
  flex: 1 1;
  padding: 32px 24px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.shared-page-project { display: flex; flex-direction: column; gap: 24px; }
.shared-page-project h1 { font-size: 24px; font-weight: 700; color: var(--text-strong); margin: 0; }
.shared-page-conversation { display: flex; flex-direction: column; gap: 12px; }
.shared-page-conversation h2 { font-size: 16px; font-weight: 600; color: var(--text-strong); margin: 0; }
.shared-page-messages { display: flex; flex-direction: column; gap: 8px; }
.shared-page-message {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
}
.shared-page-message-user { background: var(--blue-bg); border: 1px solid var(--blue-border); }
.shared-page-message-assistant { background: var(--bg-panel); border: 1px solid var(--border); }
.shared-page-message-role { font-weight: 600; color: var(--text-muted); margin-right: 8px; font-size: 12px; }
.shared-page-message-content { color: var(--text); margin: 0; line-height: 1.5; }
.shared-page-cta {
  padding: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.shared-page-cta p { font-size: 15px; color: var(--text-muted); margin: 0; }
.shared-page-cta-btn {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: opacity 0.12s;
}
.shared-page-cta-btn:hover { opacity: 0.88; }
.shared-page-footer {
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
  border-top: 1px solid var(--border);
}

/* ============================================================================
   Toolbar Share Button
   ============================================================================ */
.toolbar-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.toolbar-btn:hover { color: var(--text); border-color: var(--accent-soft); background: var(--bg-muted); }

/* ============================================================================
   Usage Quota Panel — modal dialog for usage quota display
   ============================================================================ */
.usage-quota-panel {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 0;
  width: 560px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: pop-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
}
.usage-quota-panel .settings-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.usage-quota-panel .settings-dialog-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}
.usage-quota-panel .modal-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.usage-quota-panel .header-actions {
  display: flex;
  gap: 8px;
}
.quota-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
  gap: 12px;
}
.quota-card {
  padding: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quota-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}
.quota-card-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  flex: 1 1;
}
.quota-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quota-badge-exceeded {
  background: var(--red-bg);
  color: var(--red);
}
.quota-badge-warning {
  background: var(--amber-bg);
  color: var(--amber);
}
.quota-card-stats {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
}
.quota-card-used {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.quota-card-separator {
  color: var(--text-muted);
}
.quota-card-total {
  font-size: 14px;
  color: var(--text-muted);
}
.quota-card-remaining {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: 4px;
}
.quota-progress {
  height: 6px;
  background: var(--bg-muted);
  border-radius: 3px;
  overflow: hidden;
}
.quota-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.quota-card-footer {
  font-size: 11px;
  color: var(--text-faint);
}
.quota-upgrade-btn {
  margin-top: 4px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  width: 100%;
}
.quota-upgrade-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.quota-card-exceeded {
  border-color: var(--red-border);
  background: var(--red-bg);
}
.quota-card-warning {
  border-color: var(--amber);
  background: var(--amber-bg);
}
.quota-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.loading-state,
.error-state {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
}
.error-state {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.error-state p {
  color: var(--red);
  margin: 0;
}

/* ============================================================================
   Usage Stats — component for displaying usage statistics
   ============================================================================ */
.usage-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.usage-stats.loading {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
}
.usage-stats-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: -1px;
}
.tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
}
.tab-btn:hover {
  color: var(--text);
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.usage-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 120px;
  padding: 16px 0;
  gap: 16px;
}
.usage-chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1;
}
.usage-chart-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.usage-chart-bar-container {
  width: 32px;
  height: 80px;
  background: var(--bg-muted);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.usage-chart-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: height 0.3s ease;
  min-height: 4px;
}
.usage-chart-bar.exceeded {
  background: var(--red);
}
.usage-chart-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.usage-chart-percentage {
  font-size: 10px;
  color: var(--text-muted);
}
.usage-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  gap: 8px;
}
.usage-summary-item {
  padding: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.usage-summary-item.warning {
  border-color: var(--amber);
  background: var(--amber-bg);
}
.usage-summary-item.exceeded {
  border-color: var(--red-border);
  background: var(--red-bg);
}
.usage-summary-label {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.usage-summary-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.usage-summary-bar {
  height: 4px;
  background: var(--bg-muted);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.usage-summary-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.alltime-summary {
  text-align: center;
  padding: 24px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}
.alltime-total-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.alltime-total-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-strong);
}
.action-breakdown h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}
.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.action-label {
  font-size: 12px;
  color: var(--text);
}
.action-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.usage-stats-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ============================================================================
   Home page (apps/web/app/page.tsx) — minimal first cut
   Uses only existing design tokens; do NOT introduce new colors.
   See 开发需求.ini [home_spec] / [brand_consistency].
   ============================================================================ */
.home-shell {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

/* Auth Modal Styles */
.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.auth-modal {
  background: var(--bg-panel);
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
  animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--bg-muted);
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-modal-close:hover { background: var(--border); color: var(--text); }
.auth-modal-header { text-align: center; margin-bottom: 32px; }
.auth-modal-logo { font-size: 28px; font-weight: 800; color: #ff6107; margin-bottom: 8px; letter-spacing: -0.5px; }
.auth-modal-header h2 { font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 0; }
.auth-modal-form { display: flex; flex-direction: column; gap: 20px; }
.auth-modal-field { display: flex; flex-direction: column; gap: 8px; }
.auth-modal-field label { font-size: 14px; font-weight: 600; color: var(--text); }
.auth-modal-field input {
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  transition: all 0.2s;
}
.auth-modal-field input::placeholder {
  color: var(--text-faint);
}
.auth-modal-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--bg-panel);
}
.auth-modal-privacy { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.auth-modal-privacy input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.auth-modal-privacy a { color: var(--accent); text-decoration: none; font-weight: 500; }
.auth-modal-privacy a:hover { text-decoration: underline; }
.auth-modal-error { background: var(--red-bg); color: var(--red); padding: 12px 16px; border-radius: 10px; font-size: 14px; border: 1px solid var(--red-border); display: flex; align-items: center; gap: 8px; }
.auth-modal-submit {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff; border: none;
  padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(255, 97, 7, 0.3);
}
.auth-modal-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 97, 7, 0.4); }
.auth-modal-submit:active:not(:disabled) { transform: translateY(0); }
.auth-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.auth-modal-switch { text-align: center; font-size: 14px; color: var(--text-muted); padding-top: 8px; }
.auth-modal-switch button { background: none; border: none; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 14px; padding: 0; }
.auth-modal-switch button:hover { text-decoration: underline; }
.password-strength { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.password-strength-bar { height: 4px; border-radius: 2px; transition: all 0.3s; background: var(--accent); }
.password-strength-label { font-size: 12px; color: var(--accent); font-weight: 500; }

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.home-brand {
  font-size: 20px;
  font-weight: 700;
  color: #ff6107;
  text-decoration: none;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-brand img {
  border-radius: 8px;
}

.home-brand-text {
  font-weight: 700;
}
.home-header-actions { display: flex; gap: 12px; align-items: center; }
.home-main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 32px;
  gap: 48px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.home-hero { text-align: center; }
.home-headline {
  font-size: 48px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -1px;
}
.home-subhead {
  font-size: 18px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 auto 32px;
  max-width: 640px;
}
.home-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.home-cta-primary {
  background: var(--accent);
  color: #ffffff;
}
.home-cta-primary:hover {
  background: var(--accent-strong);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 97, 7, 0.35);
  transform: translateY(-1px);
}
.home-cta-secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border);
}
.home-cta-secondary:hover { background: var(--bg-subtle); }
.home-placeholder {
  width: 100%;
  padding: 24px;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.home-placeholder strong { color: var(--text-strong); }
.home-pricing {
  width: 100%;
  padding: 40px 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
}
.home-pricing-inner {
  max-width: 1200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.home-pricing-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  line-height: 1.2;
}
.home-pricing-sub {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.home-pricing-points {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.home-pricing-points li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.home-pricing-bullet {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.home-pricing-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.home-pricing-foot {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.home-pricing-foot-link {
  color: var(--accent);
  text-decoration: none;
}
.home-pricing-foot-link:hover { text-decoration: underline; }
/* Home pricing — package card grid */
.home-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.home-pricing-card {
  position: relative;
  background: var(--bg-muted);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.home-pricing-card:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 4px 16px rgba(255, 97, 7, 0.08);
}
.home-pricing-card-popular {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.home-pricing-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.home-pricing-card-points {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}
.home-pricing-points-num {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1;
}
.home-pricing-points-unit {
  font-size: 13px;
  color: var(--text-muted);
}
.home-pricing-bonus {
  font-size: 11.5px;
  color: var(--accent);
  margin: 0;
  line-height: 1.3;
}
.home-pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 4px;
}
.home-pricing-price-currency {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}
.home-pricing-price-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1;
}
.home-pricing-per-use {
  font-size: 11px;
  color: var(--text-faint);
  margin: 0;
  line-height: 1.3;
}
.home-pricing-cta-btn {
  margin-top: 6px;
  width: 100%;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.12s;
}
.home-pricing-cta-btn:hover { opacity: 0.88; }

/* Skeleton loading for pricing cards */
.home-pricing-card-skeleton {
  pointer-events: none;
}
.home-pricing-skeleton-line {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-elevated) 50%, var(--border) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s infinite;
  height: 14px;
}
.home-pricing-skeleton-short { width: 50%; }
.home-pricing-skeleton-medium { width: 70%; }
.home-pricing-skeleton-tall { width: 80%; height: 22px; }
.home-pricing-skeleton-btn {
  width: 80%;
  height: 30px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-elevated) 50%, var(--border) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s infinite;
  margin-top: 8px;
}
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }

.home-pricing-error {
  padding: 24px;
  text-align: center;
  color: var(--danger, #9c2a25);
  font-size: 14px;
}
.home-pricing-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 720px) {
  .home-pricing { padding: 24px 16px; }
  .home-pricing-title { font-size: 22px; }
  .home-pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .home-header { padding: 12px 16px; }
  .home-main { padding: 32px 16px; gap: 32px; }
  .home-headline { font-size: 32px; }
  .home-subhead { font-size: 15px; }
}

/* HowItWorks */
.home-how { display: flex; flex-direction: column; gap: 12px; }
.home-how-title { font-size: 24px; font-weight: 600; }
.home-how-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 4px; }
.home-how-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; }
.home-how-step { border: 1px solid var(--border); border-radius: 12px; padding: 20px 18px; background: var(--bg-panel); }
.home-how-num { display: inline-block; font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 1px; margin-bottom: 8px; }
.home-how-step-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.home-how-step-body { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 0; }
@media (max-width: 720px) {
  .home-how-grid { grid-template-columns: 1fr; }
  .home-how-title { font-size: 20px; }
}

/* SkillsPreview */
.home-skills { display: flex; flex-direction: column; gap: 12px; }
.home-skills-title { font-size: 24px; font-weight: 600; }
.home-skills-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 4px; }
.home-skills-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; }
.home-skills-card { border: 1px solid var(--border); border-radius: 12px; padding: 18px 16px; background: var(--bg-panel); display: flex; flex-direction: column; gap: 6px; }
.home-skills-mode { display: inline-block; align-self: flex-start; font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 10px; }
.home-skills-name { font-size: 15px; font-weight: 600; margin: 0; }
.home-skills-desc { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }
.home-skills-empty { color: var(--text-muted); font-size: 13px; }
.home-skills-cta { align-self: flex-start; margin-top: 8px; }
@media (max-width: 720px) {
  .home-skills-grid { grid-template-columns: 1fr; }
  .home-skills-title { font-size: 20px; }
}

/* SkillsPreview — search toolbar */
.home-skills-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.home-skills-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.home-skills-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}
.home-skills-search {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.home-skills-search:focus {
  border-color: var(--accent);
}
.home-skills-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-skills-mode-btn {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.home-skills-mode-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.home-skills-mode-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* SkillsPreview — skeleton loading */
.home-skills-loading {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
.home-skills-skeleton {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  height: 90px;
  background: var(--bg-panel);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* SkillsPreview — hover preview popup */
.skill-preview-anchor {
  position: relative;
  z-index: 10;
}
.skill-preview-popup {
  position: absolute;
  top: 0;
  right: calc(100% + 16px);
  width: 320px;
  min-height: 200px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  z-index: 100;
}
.skill-preview-popup--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.skill-preview-popup-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.skill-preview-popup--body {
  padding: 0;
  font-size: 12px;
}
.skill-preview-popup--body iframe {
  width: 100%;
  border: none;
  min-height: 200px;
  height: 320px;
  display: block;
}
.skill-preview-popup--body > * {
  max-height: 360px;
  overflow: auto;
}
.skill-preview-popup--empty {
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* SkillsPreview — "show all" full-screen dialog */
.skill-all-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.skill-all-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}
.skill-all-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.skill-all-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.skill-all-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-muted);
  border-radius: 6px;
  display: flex;
}
.skill-all-close:hover {
  background: var(--bg);
  color: var(--text);
}

@media (max-width: 720px) {
  .home-skills-loading { grid-template-columns: 1fr; }
  .skill-preview-popup { display: none; }
  .skill-all-dialog { padding: 16px; }
}

/* DesignSystemsPreview — home page design system showcase */
.home-ds {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-ds-title-main { font-size: 24px; font-weight: 600; margin: 0; }
.home-ds-sub { color: var(--text-muted); font-size: 14px; margin: 0; }
.home-ds-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-ds-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1;
}
.home-ds-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}
.home-ds-search {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg-panel);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s;
  box-sizing: border-box;
}
.home-ds-search:focus { border-color: var(--accent); }
.home-ds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
}
.home-ds-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.home-ds-card:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 4px 16px rgba(201, 100, 66, 0.08);
  transform: translateY(-1px);
}
.home-ds-thumb {
  height: 80px;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-ds-thumb-placeholder {
  color: var(--text-faint);
}
.home-ds-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
}
.home-ds-swatches > span { display: block; }
.home-ds-meta {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
}
.home-ds-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-ds-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-ds-category {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.home-ds-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-ds-cta { align-self: flex-start; margin-top: 8px; }
.home-ds-empty { color: var(--text-muted); font-size: 13px; }

/* Skeleton */
.home-ds-card-skeleton .home-ds-thumb {
  background: var(--bg-muted);
}
.home-ds-skeleton-line {
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-elevated) 50%, var(--border) 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-shimmer 1.4s infinite;
  height: 12px;
}
.home-ds-skeleton-short { width: 50%; }
.home-ds-skeleton-medium { width: 75%; }

/* Full-screen "show all" dialog */
.home-ds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.home-ds-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
}
.home-ds-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.home-ds-dialog-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.home-ds-dialog-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text-muted);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-ds-dialog-close:hover { background: var(--bg); color: var(--text); }
.home-ds-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.home-ds-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.home-ds-category-btn {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.home-ds-category-btn:hover { border-color: var(--accent); color: var(--accent); }
.home-ds-category-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

@media (max-width: 720px) {
  .home-ds-grid { grid-template-columns: repeat(2, 1fr); }
  .home-ds-dialog { padding: 16px; }
}

/* VideoSection */
.home-video {
  padding: 48px 0;
}
.home-video-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.home-video-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.home-video-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.home-video-player {
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  position: relative;
}
.home-video-el {
  width: 100%;
  height: 100%;
  display: block;
}
.home-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg-panel);
}
.home-video-play-icon {
  color: var(--accent);
  opacity: 0.7;
}
.home-video-placeholder-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.home-video-placeholder-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

/* ShowcaseSection */
.home-showcase {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-showcase-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.home-showcase-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.home-showcase-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
.home-showcase-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.home-showcase-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.home-showcase-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
}
.home-showcase-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-showcase-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg) 100%);
}
.home-showcase-mode-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
}
.home-showcase-card-placeholder-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin: 0;
}
.home-showcase-card-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-showcase-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.home-showcase-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.home-showcase-card-author {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
}
.home-showcase-card-link {
  text-decoration: none;
  color: inherit;
}
.home-showcase-card-placeholder-icon {
  font-size: 2rem;
}
.home-showcase-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.home-showcase-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.home-showcase-cta {
  align-self: flex-start;
  margin-top: 8px;
}

/* ============================================================
   Testimonial Section styles
   ============================================================ */
.testimonial-section {
  padding: 48px 0;
  background: var(--bg-subtle);
}

.testimonial-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.testimonial-header {
  text-align: center;
  margin-bottom: 32px;
}

.testimonial-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 8px 0;
}

.testimonial-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

/* Trusted by / Company logos */
.testimonial-trusted-by {
  margin-bottom: 40px;
  text-align: center;
}

.testimonial-trusted-by-label {
  display: block;
  font-size: 13px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.testimonial-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.testimonial-logo-link {
  text-decoration: none;
  color: inherit;
}

.testimonial-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.2s, filter 0.2s;
}

.testimonial-logo-item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.testimonial-logo-item img {
  height: 28px;
  width: auto;
}

.testimonial-logo-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Testimonial grid */
.testimonial-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  gap: 20px;
}

/* Testimonial card */
.testimonial-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.testimonial-quote-mark {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 48px;
  line-height: 1;
  color: var(--accent-soft);
  font-family: Georgia, serif;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.testimonial-quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
  padding-top: 20px;
}

/* Star rating */
.testimonial-stars {
  display: flex;
  gap: 2px;
}

.testimonial-star {
  flex-shrink: 0;
}

.testimonial-star.empty {
  opacity: 0.3;
}

/* Author section */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-muted);
}

.testimonial-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}

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

.testimonial-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Loading spinner */
.testimonial-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.testimonial-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 900px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .testimonial-section {
    padding: 32px 0;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-logos {
    gap: 20px;
  }

  .testimonial-logo-item {
    padding: 4px 12px;
  }

  .testimonial-logo-item img {
    height: 22px;
  }
}

@media (max-width: 720px) {
  .home-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .home-video-player { aspect-ratio: auto; min-height: 220px; }
}
@media (max-width: 480px) {
  .home-showcase-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ShowcasePage styles
   ============================================================ */
.showcase-page {
  min-height: 100vh;
  background: var(--bg);
}
.showcase-page-header {
  padding: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}
.showcase-page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 0;
  margin-bottom: 16px;
}
.showcase-page-back:hover {
  color: var(--text);
}
.showcase-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px;
  background: linear-gradient(135deg, var(--accent, #c96442) 0%, var(--accent-2, #8b5cf6) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.showcase-page-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.showcase-page-main {
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.showcase-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
}
.showcase-page-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.showcase-page-empty {
  text-align: center;
  padding: 80px 20px;
}
.showcase-page-empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}
.showcase-page-empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.showcase-page-empty-text {
  color: var(--text-muted);
  margin: 0 0 24px;
}
.showcase-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.showcase-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.showcase-card-button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.showcase-card-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg);
}
.showcase-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent, #c96442) 0%, var(--accent-2, #8b5cf6) 100%);
  opacity: 0.8;
}
.showcase-card-placeholder-icon {
  font-size: 3rem;
}
.showcase-card-body {
  padding: 16px;
}
.showcase-card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-card-description {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.showcase-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-faint);
}
.showcase-card-author {
  font-weight: 500;
}

/* ============================================================
   ShowcaseSubmitDialog styles
   ============================================================ */
.showcase-submit-dialog {
  width: 100%;
  max-width: 520px;
}
.showcase-submit-dialog .field-textarea {
  min-height: 100px;
  resize: vertical;
}

/* ============================================================
   Admin showcase review styles
   ============================================================ */
.admin-showcase-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.admin-showcase-image-link {
  font-size: 12px;
  color: var(--accent);
}
.admin-showcase-desc {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-action-group {
  display: flex;
  gap: 8px;
}
.admin-action-btn-success {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}
.admin-action-btn-success:hover {
  background: var(--green);
  color: white;
}


/* FAQ */
.home-faq { display: flex; flex-direction: column; gap: 12px; }
.home-faq-title { font-size: 24px; font-weight: 600; }
.home-faq-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 4px; }
.home-faq-link { color: var(--accent); text-decoration: none; }
.home-faq-link:hover { text-decoration: underline; }
.home-faq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.home-faq-item { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); }
.home-faq-item.is-open { border-color: var(--accent); }
.home-faq-item details { padding: 0; }
.home-faq-q { padding: 14px 18px; cursor: pointer; font-size: 15px; font-weight: 500; list-style: none; }
.home-faq-q::-webkit-details-marker { display: none; }
.home-faq-q::after { content: '+'; float: right; color: var(--text-muted); font-weight: 300; font-size: 18px; }
.home-faq-item.is-open .home-faq-q::after { content: '−'; }
.home-faq-a { padding: 0 18px 14px; color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 720px) {
  .home-faq-title { font-size: 20px; }
}

/* ============================================================
   TemplateGallery — template browsing and preview wall
   ============================================================ */
.template-gallery {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.template-gallery-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-gallery-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}
.template-gallery-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* Toolbar */
.template-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.template-gallery-search-wrap {
  position: relative;
  flex: 1 1;
  min-width: 200px;
  max-width: 400px;
}
.template-gallery-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.template-gallery-search {
  width: 100%;
  padding-left: 34px;
}
.template-gallery-sort {
  flex-shrink: 0;
}
.template-gallery-sort-select {
  width: auto;
  min-width: 120px;
  font-size: 13px;
  padding: 7px 28px 7px 10px;
}

/* Grid */
.template-gallery-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

/* Card */
.template-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.template-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.template-card-thumb {
  aspect-ratio: 16 / 9;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.template-card-thumb-placeholder {
  color: var(--text-faint);
}
.template-card-files {
  width: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-card-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-card-file-icon {
  flex-shrink: 0;
  color: var(--accent);
}
.template-card-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-card-more-files {
  font-size: 11px;
  color: var(--text-faint);
  padding-left: 22px;
}
.template-card-meta {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1;
}
.template-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.template-card-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-card-file-count {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.template-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.template-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.template-card-use-btn {
  flex: 1 1;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 500;
  border-radius: 6px;
}
.template-card-use-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.template-card-preview-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  border-radius: 6px;
}
.template-card-preview-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Skeleton */
.template-card-skeleton .template-card-thumb {
  background: var(--bg-muted);
}
.template-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: var(--bg-muted);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.template-skeleton-medium { width: 60%; }
.template-skeleton-short { width: 40%; }
.template-skeleton-full { width: 100%; }

/* Empty state */
.template-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-faint);
}
.template-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.template-empty-desc {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0;
}

/* Error */
.template-error {
  padding: 24px;
  text-align: center;
  color: var(--red);
  font-size: 14px;
}

/* Modal */
.template-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.template-modal {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.template-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}
.template-modal-close {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
}
.template-modal-close:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}
.template-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.template-modal-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.template-modal-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-modal-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 6px;
}
.template-modal-file svg {
  color: var(--accent);
  flex-shrink: 0;
}
.template-modal-desc-section {
  display: flex;
  flex-direction: column;
}
.template-modal-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.template-modal-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.template-modal-meta-item {
  font-size: 12px;
  color: var(--text-faint);
}
.template-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}
.template-modal-use-btn {
  flex: 1 1;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
}
.template-modal-cancel-btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* Show all dialog */
.template-all-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.template-all-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.template-all-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.template-all-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.template-all-close {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
}
.template-all-close:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
}

.template-gallery-count {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 0;
}

.template-gallery-cta {
  align-self: center;
  margin-top: 8px;
}

@media (max-width: 720px) {
  .template-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .template-all-dialog { padding: 16px; }
}
@media (max-width: 480px) {
  .template-gallery-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Quota / Usage Panel
   ============================================================ */

/* Loading and error states */
.quota-loading,
.quota-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
}

/* Quota overview section */
.quota-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Quota cards grid */
.quota-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

/* Individual quota card */
.quota-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 120ms ease;
}

.quota-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quota-card-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.quota-card-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

/* Progress track */
.quota-progress-track {
  height: 5px;
  background: var(--bg-muted);
  border-radius: 999px;
  overflow: hidden;
}

.quota-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width 300ms ease, background-color 200ms ease;
}

/* Quota color states */
.quota-card.quota-ok .quota-progress-fill { background: var(--green); }
.quota-card.quota-warning .quota-progress-fill { background: var(--amber); }
.quota-card.quota-exhausted .quota-progress-fill { background: var(--red); }
.quota-card.quota-warning { border-color: var(--amber-bg); }
.quota-card.quota-exhausted { border-color: var(--red-border); }

/* Remaining text */
.quota-card-remaining {
  font-size: 11px;
  color: var(--text-soft);
}

/* Reset notice */
.quota-reset-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.quota-reset-icon { font-size: 14px; color: var(--accent); }
.quota-reset-date { margin-left: auto; font-weight: 500; color: var(--text-strong); }

/* Summary section */
.quota-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quota-summary h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.quota-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quota-summary-item {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quota-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
}

.quota-summary-label { font-size: 11px; color: var(--text-muted); }

/* Logs section */
.quota-logs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quota-logs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.quota-logs-header h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.quota-logs-filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quota-filter-select {
  width: auto;
  font-size: 12px;
  padding: 4px 24px 4px 8px;
}

/* Logs table */
.quota-logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.quota-logs-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.quota-logs-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  vertical-align: middle;
}

.quota-logs-table tr:hover td { background: var(--bg-subtle); }
.quota-log-time { color: var(--text-muted); white-space: nowrap; }
.quota-log-cost { font-family: var(--mono); font-weight: 500; color: var(--text-muted); }

/* Status badges */
.quota-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}

.quota-status-badge.success { background: var(--green-bg); color: var(--green); }
.quota-status-badge.failed { background: var(--red-bg); color: var(--red); }

/* Load more */
.quota-logs-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

/* ============================================================
   Points Balance Card (used in CEndSettings PointsSection)
   ============================================================ */

.points-balance-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.points-balance-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.points-balance-value { font-size: 32px; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.points-balance-unit { font-size: 13px; color: var(--text-soft); }

.points-actions-row { display: flex; gap: 8px; }

.points-tx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.points-tx-header h4 { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 0; }

.points-tx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.points-tx-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.points-tx-row:hover { background: var(--bg-subtle); }

.points-tx-amount { font-family: var(--mono); font-weight: 600; min-width: 64px; }
.points-tx-row.is-credit .points-tx-amount { color: var(--green); }
.points-tx-row.is-debit .points-tx-amount { color: var(--red); }
.points-tx-desc { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.points-tx-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* FAQ Page (Full) */
.faq-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* FAQ Header */
.faq-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.faq-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-brand {
  text-decoration: none;
  color: var(--text-strong);
}
.faq-brand-logo {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}
.faq-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s, color 0.15s;
}
.faq-cta-primary {
  background: var(--accent);
  color: #fff;
}
.faq-cta-primary:hover {
  background: var(--accent-hover);
}
.faq-cta-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.faq-cta-secondary:hover {
  background: var(--bg-subtle);
}

/* FAQ Main */
.faq-main {
  flex: 1 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 60px;
  width: 100%;
  box-sizing: border-box;
}

/* FAQ Hero */
.faq-hero {
  text-align: center;
  padding: 60px 0 40px;
}
.faq-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 20px;
}
.faq-hero-title {
  font-size: 36px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 12px;
  font-family: var(--serif);
}
.faq-hero-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 32px;
}

/* FAQ Search */
.faq-search {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.faq-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.faq-search-input {
  width: 100%;
  padding: 14px 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.faq-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.faq-search-input::placeholder {
  color: var(--text-faint);
}
.faq-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.faq-search-clear:hover {
  background: var(--bg-muted);
  color: var(--text);
}
.faq-search-results {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

/* FAQ Content */
.faq-content {
  margin-top: 20px;
}
.faq-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.faq-empty p {
  margin: 0 0 8px;
  font-size: 16px;
}
.faq-empty-hint {
  font-size: 14px;
  color: var(--text-faint);
}

/* FAQ Categories */
.faq-categories {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-category {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  overflow: hidden;
  transition: border-color 0.15s;
}
.faq-category.is-open {
  border-color: var(--accent);
}
.faq-category-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s;
}
.faq-category-header:hover {
  background: var(--bg-subtle);
}
.faq-category-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.faq-category-title {
  flex: 1 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-strong);
}
.faq-category-count {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-muted);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.faq-category-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-category-chevron.is-open {
  transform: rotate(180deg);
}

/* FAQ Category Items */
.faq-category-items {
  border-top: 1px solid var(--border-soft);
}
.faq-item {
  border-bottom: 1px solid var(--border-soft);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s;
}
.faq-item-q:hover {
  background: var(--bg-subtle);
}
.faq-item-q-text {
  flex: 1 1;
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.faq-item-q-icon {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq-item-q-icon.is-open {
  transform: rotate(180deg);
}
.faq-item-a {
  padding: 0 20px 16px 52px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
  animation: faq-fade-in 0.2s ease-out;
}
.faq-item-a p {
  margin: 0;
}

/* FAQ Contact */
.faq-contact {
  text-align: center;
  padding: 60px 20px;
  margin-top: 40px;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.faq-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 20px;
}
.faq-contact-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 12px;
  font-family: var(--serif);
}
.faq-contact-desc {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.faq-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s;
}
.faq-contact-btn:hover {
  background: var(--accent-hover);
}

/* FAQ Footer */
.faq-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  background: var(--bg-panel);
}
.faq-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
}
.faq-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}
.faq-footer-links a:hover {
  color: var(--accent);
}
.faq-footer-brand {
  color: var(--text-faint);
  font-size: 13px;
}

/* FAQ Animations */
@keyframes faq-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FAQ Responsive */
@media (max-width: 720px) {
  .faq-header-inner {
    padding: 12px 16px;
  }
  .faq-main {
    padding: 0 16px 40px;
  }
  .faq-hero {
    padding: 40px 0 30px;
  }
  .faq-hero-title {
    font-size: 28px;
  }
  .faq-hero-subtitle {
    font-size: 14px;
  }
  .faq-category-header {
    padding: 14px 16px;
  }
  .faq-category-title {
    font-size: 15px;
  }
  .faq-item-q {
    padding: 14px 16px;
  }
  .faq-item-q-text {
    font-size: 14px;
  }
  .faq-item-a {
    padding: 0 16px 14px 48px;
    font-size: 13px;
  }
  .faq-contact {
    padding: 40px 16px;
  }
  .faq-contact-title {
    font-size: 20px;
  }
  .faq-footer-links {
    gap: 16px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .faq-header-actions {
    gap: 8px;
  }
  .faq-cta {
    padding: 6px 12px;
    font-size: 13px;
  }
  .faq-hero-icon,
  .faq-contact-icon {
    width: 48px;
    height: 48px;
  }
  .faq-hero-icon svg,
  .faq-contact-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
   Artifact version history panel (r_p0_10)
   ============================================================ */
.artifact-version-history-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg);
  min-height: 200px;
  max-height: 400px;
  overflow-y: auto;
}

.artifact-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

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

.artifact-panel-loading,
.artifact-panel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

.artifact-version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.artifact-version-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.artifact-version-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.artifact-version-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.artifact-version-date {
  font-size: 12px;
  color: var(--text-muted);
}

.artifact-version-comment {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.artifact-version-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.artifact-rollback-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--accent-tint);
  border-radius: 6px;
  font-size: 12px;
  color: var(--accent);
}

.artifact-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.artifact-action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.artifact-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.artifact-action-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.artifact-action-btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.artifact-action-btn.confirm {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.artifact-action-btn.cancel {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.artifact-action-btn.danger {
  color: var(--error, #dc2626);
  border-color: var(--error, #dc2626);
}

.artifact-action-btn.danger:hover {
  background: var(--error-tint, rgba(220, 38, 38, 0.1));
}

/* ============================================================
   Artifact comments panel (r_p0_10)
   ============================================================ */
.artifact-comments-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg);
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

.artifact-comments-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  background: var(--accent-soft, var(--accent-tint));
  color: var(--accent);
}

.artifact-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.artifact-comment-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
}

.artifact-comment-item.resolved {
  opacity: 0.6;
  border-style: dashed;
}

.artifact-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.artifact-comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.artifact-comment-date {
  font-size: 12px;
  color: var(--text-muted);
}

.artifact-comment-badge.resolved {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--success-soft, rgba(34, 197, 94, 0.15));
  color: var(--success, #16a34a);
}

.artifact-comment-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.artifact-comment-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.artifact-comment-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.artifact-comment-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 80px;
}

.artifact-comment-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}

.artifact-comment-input::placeholder {
  color: var(--text-faint);
}

/* ============================================================
   Precision Comment Editing - Element Selection
   ============================================================ */

/* Element Selection Mode */
.artifact-comments-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selection-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.selection-mode-btn:hover:not(:disabled) {
  background: var(--bg-muted);
  color: var(--text);
}

.selection-mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.selection-mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selection-mode-btn svg {
  flex-shrink: 0;
}

/* Element Selection Preview/Hint */
.element-selection-preview,
.element-selection-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.element-selection-preview {
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.element-selection-hint {
  background: var(--blue-bg, rgba(59, 130, 246, 0.1));
  border: 1px dashed var(--blue, #3b82f6);
  color: var(--blue, #3b82f6);
}

.element-selection-label {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Comment Pending Badge */
.comment-pending-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  background: var(--accent);
  color: white;
  margin-right: 6px;
}

/* Artifact Comment - Enhanced States */
.artifact-comment-item {
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.artifact-comment-item.pending {
  border-left-color: var(--accent);
}

.artifact-comment-item.resolved {
  border-left-color: var(--green, #16a34a);
  opacity: 0.7;
}

.artifact-comment-item.resolved {
  background: var(--bg-subtle);
}

.artifact-comment-item.active {
  box-shadow: 0 0 0 2px var(--accent);
}

.artifact-comment-item.ai-responded {
  border-left-color: var(--purple, #7c3aed);
}

.artifact-comment-item.edit-failed {
  border-left-color: var(--red, #dc2626);
}

/* Comment Target (Element) */
.artifact-comment-target {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-subtle);
  border-radius: 4px;
  font-size: 11px;
}

.comment-target-label {
  color: var(--text-muted);
  flex: 1 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AI Response Indicator */
.artifact-comment-ai-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--purple-bg, rgba(124, 58, 237, 0.1));
  border-radius: 4px;
  font-size: 12px;
  color: var(--purple, #7c3aed);
}

.artifact-comment-ai-indicator svg {
  flex-shrink: 0;
  fill: var(--purple, #7c3aed);
}

.ai-indicator-separator {
  color: var(--text-muted);
}

.ai-indicator-resolved {
  color: var(--green, #16a34a);
  font-weight: 500;
}

/* Error State */
.artifact-comment-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--red-bg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--red, #dc2626);
}

/* Comment Badges */
.artifact-comment-badge.pending {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--accent-tint);
  color: var(--accent);
}

.artifact-comment-badge.ai-responded {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--purple-bg, rgba(124, 58, 237, 0.1));
  color: var(--purple, #7c3aed);
}

.artifact-comment-badge.error {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--red-bg);
  color: var(--red, #dc2626);
}

/* Form Actions */
.artifact-comment-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.element-attached-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  background: var(--accent-tint);
  color: var(--accent);
}

.element-attached-hint svg {
  flex-shrink: 0;
}

.artifact-comment-form-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--red-bg);
  border-radius: 6px;
  font-size: 12px;
  color: var(--red, #dc2626);
}

.artifact-comment-form-error button {
  background: transparent;
  border: none;
  color: var(--red, #dc2626);
  cursor: pointer;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

/* Show/Hide Resolved Buttons */
.show-resolved-btn,
.hide-resolved-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
}

.show-resolved-btn:hover,
.hide-resolved-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
  border-style: solid;
}

/* Element Selection Overlay */
html[data-od-selection-mode] body {
  cursor: crosshair !important;
}

html[data-od-selection-mode] [data-od-id],
html[data-od-selection-mode] [data-od-runtime-id] {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  transition: outline 0.1s ease;
}

html[data-od-selection-mode] [data-od-id]:hover,
html[data-od-selection-mode] [data-od-runtime-id]:hover {
  outline: 2px solid var(--accent);
  background: var(--accent-tint);
}

/* Selected element highlight from comment jump */
[data-od-comment-highlight] {
  outline: 3px solid var(--accent) !important;
  outline-offset: 2px;
  animation: comment-highlight-pulse 1s ease-in-out 3;
}

@keyframes comment-highlight-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Small Action Button */
.artifact-action-btn.small {
  padding: 3px 8px;
  font-size: 11px;
}

/* ============================================================
   r_p1_20: Responsive UI (Mobile/Tablet)
   ============================================================ */

/* Mobile-first responsive helpers */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: flex !important; }
  .full-width-mobile { width: 100% !important; }
  .stack-mobile { display: flex; flex-direction: column; }
  .gap-mobile { gap: 12px; }

  /* Modal full-screen on mobile */
  .modal-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    inset: 0 !important;
  }

  /* Bottom sheet style for mobile */
  .bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
  }

  /* Mobile navigation bar */
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Hide on tablet and desktop */
  @media (min-width: 768px) {
    .mobile-nav {
      display: none !important;
    }
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    min-width: 64px;
    min-height: 44px;
    transition: color 0.15s, background-color 0.15s;
  }

  .mobile-nav-item:active {
    background: var(--bg-subtle);
  }

  .mobile-nav-item.active {
    color: var(--accent);
  }

  .mobile-nav-item svg {
    width: 22px;
    height: 22px;
  }

  .mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
  }

  /* EntryView mobile responsive */
  .entry-shell {
    padding-bottom: 72px; /* Space for mobile nav */
  }

  .entry-main {
    min-height: 0;
  }

  .entry-header {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .entry-header::-webkit-scrollbar {
    display: none;
  }

  .entry-tabs {
    gap: 0;
  }

  .entry-tab {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ProjectView mobile responsive */
  .project-shell {
    flex-direction: column;
  }

  .project-chat-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60vh;
    border-radius: 16px 16px 0 0;
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  /* Touch optimizations */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase touch targets for common interactions */
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Scrollable containers on touch devices */
  .scroll-touch {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: flex !important; }
  .two-col-tablet { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; }
  .three-col-tablet { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; }

  /* Tablet-specific entry layout */
  .entry-side {
    min-width: 280px;
  }

  /* Tablet dialogs */
  .modal-dialog {
    max-width: 90vw;
    max-height: 85vh;
  }
}

/* Large touch targets helper */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Responsive spacing utilities */
@media (max-width: 767px) {
  .p-mobile { padding: 16px; }
  .px-mobile { padding-left: 16px; padding-right: 16px; }
  .py-mobile { padding-top: 16px; padding-bottom: 16px; }
  .m-mobile { margin: 16px; }
  .mx-mobile { margin-left: 16px; margin-right: 16px; }
  .my-mobile { margin-top: 16px; margin-bottom: 16px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .p-tablet { padding: 20px; }
  .px-tablet { padding-left: 20px; padding-right: 20px; }
  .py-tablet { padding-top: 20px; padding-bottom: 20px; }
}

/* Responsive font sizes */
@media (max-width: 767px) {
  .text-sm-mobile { font-size: 13px; }
  .text-base-mobile { font-size: 15px; }
  .text-lg-mobile { font-size: 17px; }
}

/* Ensure dialogs have proper z-index stacking on mobile */
@media (max-width: 767px) {
  .modal-backdrop {
    z-index: 200;
  }

  .modal-backdrop .modal-dialog,
  .modal-backdrop > div {
    z-index: 201;
  }

  /* PersonalCenter full-screen on mobile */
  .personal-center {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* RechargeDialog full-screen on mobile */
  .recharge-dialog {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/* Safe area padding for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .mobile-nav {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .entry-shell {
      padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-item,
  button,
  a {
    transition: none;
  }
}

/* ============================================================
   Responsive: ProjectView mobile/tablet (r_p1_20)
   ============================================================ */

/* Mobile: chat panel as bottom sheet */
@media (max-width: 767px) {
  .split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .split-chat-slot {
    position: fixed;
    bottom: 72px;
    left: 0;
    right: 0;
    height: 60vh;
    border-radius: 16px 16px 0 0;
    z-index: 90;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  .split-resize-handle {
    display: none;
  }

  .split-workspace-slot {
    width: 100%;
  }

  .app-project-title {
    max-width: 150px;
    overflow: hidden;
  }

  .app-project-title .title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-project-title .meta {
    display: none;
  }
}

/* ============================================================
   r_p1_20: EntryView & Design Cards mobile responsive
   ============================================================ */

/* Mobile: project cards stack vertically, touch-friendly padding */
@media (max-width: 767px) {
  .design-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .design-card {
    min-height: 100px !important;
    border-radius: 10px !important;
  }

  .design-card-thumb {
    min-height: 60px !important;
  }

  .design-card-meta-block {
    padding: 10px !important;
  }

  .design-card-name {
    font-size: 14px !important;
  }

  .design-card-meta {
    font-size: 11px !important;
  }

  /* Kanban view: hide on mobile, fall back to grid */
  .design-kanban-view {
    display: block !important;
  }

  .design-kanban-view .design-grid {
    display: grid !important;
  }

  .design-kanban-board {
    display: none !important;
  }

  /* EntryView sidebar adjustments */
  .entry-side {
    display: none !important;
  }

  .entry-main {
    width: 100% !important;
  }

  .entry-tab-content {
    padding: 12px !important;
  }

  /* Toolbar search on mobile */
  .toolbar-search input {
    min-height: 36px !important;
    font-size: 13px !important;
  }

  /* Touch-friendly subtab pills */
  .subtab-pill button {
    min-height: 32px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  /* Hide decorative elements on mobile */
  .entry-brand {
    display: none !important;
  }

  .entry-side-foot {
    display: none !important;
  }
}

/* Tablet: 2-column design grid */
@media (min-width: 768px) and (max-width: 1023px) {
  .design-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* ============================================================
   r_p1_20: ProjectView additional mobile fixes
   ============================================================ */

@media (max-width: 767px) {
  /* Chat input touch-friendly sizing */
  .chat-composer-input {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* Send button touch target */
  .chat-send-btn {
    min-width: 48px !important;
    min-height: 48px !important;
  }

  /* Toolbar buttons touch-friendly */
  .project-actions-button {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Avatar menu adjustments */
  .avatar-popover {
    right: 0 !important;
    left: auto !important;
    min-width: 180px !important;
  }

  /* Conversation selector */
  .conversation-item {
    padding: 10px 12px !important;
    min-height: 44px !important;
  }

  /* File workspace adjustments */
  .file-workspace-tabs {
    min-height: 40px !important;
  }

  .file-workspace-tab {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Prevent horizontal overflow */
  .app {
    overflow-x: hidden !important;
  }

  .split {
    overflow-x: hidden !important;
  }
}

/* Tablet: ProjectView layout adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .chat-panel {
    min-width: 300px !important;
  }

  .workspace-panel {
    min-width: 280px !important;
  }
}

/* Tablet: narrower chat panel */
@media (min-width: 768px) and (max-width: 1024px) {
  .split {
    grid-template-columns: 360px 8px minmax(320px, 1fr);
  }
}

/* PWA Install Prompt Styles */
.pwa-install-prompt {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-panel, #ffffff);
  border-top: 1px solid var(--border, #e5e5e5);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pwa-install-prompt-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
}

.pwa-install-prompt-icon svg {
  width: 100%;
  height: 100%;
}

.pwa-install-prompt-content {
  flex: 1 1;
  min-width: 0;
}

.pwa-install-prompt-text {
  font-size: 14px;
  color: var(--text, #1a1a1a);
  line-height: 1.4;
  margin: 0;
}

.pwa-install-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pwa-install-prompt-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  background: #c96442;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.pwa-install-prompt-btn:hover {
  background: #b5573a;
}

.pwa-install-prompt-btn:active {
  background: #a34d33;
}

.pwa-install-prompt-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-secondary, #666666);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.pwa-install-prompt-dismiss:hover {
  background: var(--bg-hover, #f0f0f0);
  color: var(--text, #1a1a1a);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .pwa-install-prompt {
    display: none;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .pwa-install-prompt {
    background: var(--bg-panel, #1a1a1a);
    border-top-color: var(--border, #333333);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }
}

/* ============================================================
   ParameterSuggestionPanel (r_p1_07)
   ============================================================ */
.param-panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.param-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--accent-tint);
  border-bottom: 1px solid var(--border);
}

.param-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.param-panel-title {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}

.param-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.param-panel-close:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.param-panel-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.param-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.param-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.param-control {
  display: flex;
  align-items: center;
}

.param-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.param-slider-track {
  position: relative;
  height: 6px;
  background: var(--bg-muted);
  border-radius: 3px;
  overflow: visible;
}

.param-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 120ms ease;
}

.param-slider-marker {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.param-slider {
  width: 100%;
  height: 20px;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
}

.param-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  -webkit-transition: transform 120ms ease;
  transition: transform 120ms ease;
}

.param-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.param-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border: 2px solid var(--bg-panel);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.param-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.param-current {
  color: var(--text);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.param-suggested {
  color: var(--accent);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.param-color-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.param-color-input {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}

.param-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.param-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

.param-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.param-color-value {
  font-family: var(--mono);
  font-size: 12px;
}

.param-select-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.param-select {
  flex: 1 1;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
}

.param-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.param-panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.param-dismiss-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.param-dismiss-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
  color: var(--text);
}

.param-apply-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.param-apply-btn.primary {
  background: var(--accent);
  color: white;
}

.param-apply-btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* -------- Email Verification Banner (r_p1_03) --------------------- */

.email-verification-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-tint, color-mix(in srgb, var(--accent) 8%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  position: static;
}

.email-verification-banner-icon {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

.email-verification-banner-content {
  flex: 1 1;
  min-width: 0;
}

.email-verification-banner-message {
  margin: 0;
}

.email-verification-banner-error {
  margin: 4px 0 0;
  color: var(--danger, #e53935);
  font-size: 12px;
}

.email-verification-banner-success {
  margin: 4px 0 0;
  color: var(--success, #43a047);
  font-size: 12px;
}

.email-verification-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.email-verification-banner-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.email-verification-banner-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.email-verification-banner-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.email-verification-banner-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.email-verification-banner-btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}

.email-verification-banner-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.email-verification-banner-btn-ghost:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

/* ============================================================
   Artifact Rating (r_p1_14)
   ============================================================ */
.artifact-rating {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg);
  border-radius: 8px;
}

.artifact-rating.compact {
  padding: 12px 14px;
  gap: 10px;
}

.artifact-rating.loading {
  align-items: center;
  justify-content: center;
  min-height: 60px;
  color: var(--text-muted);
  font-size: 13px;
}

.artifact-rating.inline {
  padding: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.artifact-rating .rating-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.artifact-rating .rating-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.artifact-rating .star-row {
  display: flex;
  gap: 4px;
}

.artifact-rating .star-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 150ms ease, transform 100ms ease;
}

.artifact-rating .star-btn:hover {
  color: var(--accent, #f59e0b);
  transform: scale(1.1);
}

.artifact-rating .star-btn.active {
  color: var(--accent, #f59e0b);
}

.artifact-rating .star-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.artifact-rating .rating-value {
  font-size: 12px;
  color: var(--text-muted);
}

.artifact-rating .rating-feedback-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.artifact-rating .rating-feedback {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text);
  resize: vertical;
  min-height: 80px;
}

.artifact-rating .rating-feedback:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(59, 130, 246, 0.15));
}

.artifact-rating .rating-feedback::placeholder {
  color: var(--text-muted);
}

.artifact-rating .rating-actions {
  display: flex;
  justify-content: flex-end;
}

.artifact-rating .rating-submit-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--accent);
  color: white;
  transition: background 150ms ease, opacity 150ms ease;
}

.artifact-rating .rating-submit-btn:hover:not(:disabled) {
  background: var(--accent-strong);
}

.artifact-rating .rating-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.artifact-rating .rating-submitted-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  background: var(--accent-soft, rgba(59, 130, 246, 0.1));
  color: var(--accent);
}

.artifact-rating .rating-submitted-badge svg {
  fill: currentColor;
  stroke: none;
}

.artifact-rating .rating-submitted-feedback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.artifact-rating .rating-submitted-feedback p {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.artifact-rating .rating-edit-btn {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.artifact-rating .rating-edit-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Rating panel in viewer */
.artifact-rating-panel {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* Inline rating in version list */
.version-item-rating-panel {
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
}

.version-action-btn.rate {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

/* Quality Score Panel */
.artifact-quality-panel-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 200ms ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.artifact-quality-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.artifact-quality-panel.loading,
.artifact-quality-panel.error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.quality-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}

.quality-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.quality-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
  text-align: center;
}

.quality-error svg {
  color: var(--error);
}

.quality-retry-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}

.quality-retry-btn:hover {
  background: var(--bg-hover);
}

.quality-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
}

.quality-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.quality-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-close-btn,
.quality-refresh-btn {
  padding: 6px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.quality-close-btn:hover,
.quality-refresh-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.quality-refresh-btn.refreshing svg {
  animation: spin 0.8s linear infinite;
}

.quality-overall-score {
  font-size: 16px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}

.quality-overall-score.high {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.quality-overall-score.medium {
  color: #eab308;
  background: rgba(234, 179, 8, 0.1);
}

.quality-overall-score.low {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.quality-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px;
}

.quality-radar-chart {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.quality-radar-chart.compact {
  max-width: 200px;
  margin: 0 auto;
}

.quality-radar-chart .radar-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
}

.quality-radar-chart .overall-score {
  font-family: system-ui, -apple-system, sans-serif;
}

.quality-radar-chart .dimension-label {
  font-family: system-ui, -apple-system, sans-serif;
}

.quality-radar-chart .score-label.high {
  fill: #22c55e;
}

.quality-radar-chart .score-label.medium {
  fill: #eab308;
}

.quality-radar-chart .score-label.low {
  fill: #ef4444;
}

.quality-breakdown {
  margin-top: 16px;
}

.quality-breakdown-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quality-dimension {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.quality-dim-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: none;
  background: var(--bg-panel);
  cursor: pointer;
  transition: background 150ms ease;
}

.quality-dim-header:not(:disabled):hover {
  background: var(--bg-hover);
}

.quality-dim-header:disabled {
  cursor: default;
}

.quality-dim-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quality-dim-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.quality-dim-indicator.high {
  background: #22c55e;
}

.quality-dim-indicator.medium {
  background: #eab308;
}

.quality-dim-indicator.low {
  background: #ef4444;
}

.quality-dim-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.quality-dim-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-dim-score {
  font-size: 14px;
  font-weight: 600;
}

.quality-dim-score.high {
  color: #22c55e;
}

.quality-dim-score.medium {
  color: #eab308;
}

.quality-dim-score.low {
  color: #ef4444;
}

.quality-dim-chevron {
  color: var(--text-muted);
}

.quality-dim-issues {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bg);
}

.quality-issue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.quality-issue svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #eab308;
}

/* Legend color dots */
.artifact-quality-panel .legend circle.high {
  fill: #22c55e;
}

.artifact-quality-panel .legend circle.medium {
  fill: #eab308;
}

.artifact-quality-panel .legend circle.low {
  fill: #ef4444;
}

/* Media Gallery */
.media-gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.media-gallery-modal {
  background: var(--bg);
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.media-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.media-gallery-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.media-gallery-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.media-gallery-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.media-gallery-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-height: 200px;
}

.media-gallery-loading,
.media-gallery-error,
.media-gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

.media-gallery-error {
  color: var(--text-error);
}

.media-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.media-gallery-item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.media-gallery-item:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.media-gallery-thumbnail {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-subtle);
}

.media-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-gallery-item-info {
  padding: 8px;
}

.media-gallery-item-name {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.media-gallery-preview {
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

.media-gallery-preview-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.media-gallery-preview-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-gallery-preview-image {
  padding: 16px 20px;
  max-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-gallery-preview-image img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 4px;
}

.media-gallery-preview-actions {
  padding: 12px 20px;
  display: flex;
  gap: 12px;
}

.media-gallery-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  cursor: pointer;
  transition: background 150ms ease, opacity 150ms ease;
}

.media-gallery-insert-btn:hover:not(:disabled) {
  background: var(--accent-strong);
}

.media-gallery-insert-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.media-gallery-insert-btn .spinner-small {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.version-action-btn.rate:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Inline rating display */
.inline-rating-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background: var(--accent-soft, rgba(59, 130, 246, 0.1));
  color: var(--accent);
  cursor: pointer;
  transition: background 150ms ease;
}

.inline-rating-display:hover {
  background: var(--accent-soft-strong, rgba(59, 130, 246, 0.2));
}

.inline-rating-display svg {
  fill: currentColor;
  stroke: none;
}

.inline-rating-display .rating-count {
  color: var(--text-muted);
  font-size: 11px;
}

/* ============================================================
   DiffViewer - Before/After Revision Diff (r_p1_08)
   ============================================================ */
.diff-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: diff-fade-in 0.2s ease-out;
}

@keyframes diff-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.diff-viewer {
  width: 95vw;
  max-width: 1400px;
  height: 90vh;
  max-height: 900px;
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: diff-slide-up 0.25s ease-out;
}

@keyframes diff-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  gap: 16px;
}

.diff-header-left,
.diff-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
}

.diff-header-right {
  justify-content: flex-end;
}

.diff-header-center {
  flex: 0 0 auto;
}

.diff-label {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.diff-label-before {
  background: var(--amber-bg, #fff3e0);
  color: var(--amber, #b26200);
}

.diff-label-after {
  background: var(--green-bg, #e8f7ee);
  color: var(--green, #1f7a3a);
}

.diff-version-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-muted);
  padding: 2px 8px;
  border-radius: 4px;
}

.diff-timestamp {
  font-size: 12px;
  color: var(--text-muted);
}

.diff-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diff-stat {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.diff-stat-added {
  background: var(--green-bg);
  color: var(--green);
}

.diff-stat-removed {
  background: var(--red-bg);
  color: var(--red);
}

.diff-stat-modified {
  background: var(--amber-bg);
  color: var(--amber);
}

.diff-stat-no-changes {
  background: var(--bg-muted);
  color: var(--text-muted);
}

.diff-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.diff-view-modes {
  display: flex;
  gap: 4px;
  background: var(--bg-subtle);
  padding: 3px;
  border-radius: 8px;
}

.diff-mode-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.diff-mode-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.diff-mode-btn.active {
  background: var(--bg-panel);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.diff-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.diff-close-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.diff-content {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Side by Side View */
.diff-side-by-side {
  flex: 1 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.diff-pane {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.diff-pane-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.diff-pane-body {
  flex: 1 1;
  overflow: hidden;
  position: relative;
}

.diff-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

.diff-code {
  margin: 0;
  padding: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow: auto;
  height: 100%;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-divider {
  width: 4px;
  background: var(--border);
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
}

.diff-slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 40px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  box-shadow: var(--shadow-md);
}

.diff-slider:hover {
  background: var(--accent-strong);
}

.diff-slider-handle {
  color: white;
}

/* Overlay View */
.diff-overlay {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.diff-overlay-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.diff-overlay-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.diff-overlay-slider {
  flex: 1 1;
  max-width: 200px;
  height: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: var(--bg-muted);
  border-radius: 2px;
  cursor: pointer;
}

.diff-overlay-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.diff-overlay-container {
  flex: 1 1;
  position: relative;
  overflow: hidden;
}

.diff-overlay-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.diff-overlay-left {
  z-index: 1;
}

.diff-overlay-right {
  z-index: 2;
  pointer-events: none;
}

.diff-overlay-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  opacity: 1;
  position: relative;
  z-index: 10;
}

.diff-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 13px;
}

/* Unified View */
.diff-unified {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.diff-unified-header {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.diff-unified-body {
  flex: 1 1;
  overflow: auto;
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}

.diff-line {
  border-bottom: 1px solid var(--border-soft);
}

.diff-line:hover {
  background: var(--bg-subtle);
}

.diff-line-unchanged {
  background: var(--bg);
}

.diff-line-added {
  background: var(--green-bg);
}

.diff-line-removed {
  background: var(--red-bg);
}

.diff-line-modified {
  background: var(--amber-bg);
}

.diff-line-num {
  width: 40px;
  padding: 4px 8px;
  text-align: right;
  color: var(--text-muted);
  font-size: 11px;
  border-right: 1px solid var(--border);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.diff-line-sign {
  width: 24px;
  padding: 4px;
  text-align: center;
  font-weight: 600;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.diff-line-added .diff-line-sign {
  color: var(--green);
}

.diff-line-removed .diff-line-sign {
  color: var(--red);
}

.diff-line-modified .diff-line-sign {
  color: var(--amber);
}

.diff-line-content {
  padding: 4px 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.diff-line-content pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
}

/* Version History Panel - Compare mode */
.version-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.version-compare-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.version-compare-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.version-compare-btn.active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.version-item.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.version-item-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.version-item-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

.version-item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.version-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-panel);
  transition: border-color 0.15s, background-color 0.15s;
}

.version-item.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.version-compare-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  margin-top: 8px;
  border-radius: 8px;
}

.version-compare-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* Version History Panel - Branch Bar */
.version-history-branch-bar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.branch-selector {
  position: relative;
  display: inline-block;
}

.branch-selector-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.branch-selector-btn:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.branch-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
}

.branch-dropdown-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}

.branch-dropdown-items {
  max-height: 240px;
  overflow-y: auto;
}

.branch-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.15s;
  text-align: left;
}

.branch-dropdown-item:hover {
  background: var(--bg-subtle);
}

.branch-dropdown-item.active {
  background: var(--accent-tint);
  color: var(--accent);
}

.branch-dropdown-item.active .branch-name {
  font-weight: 500;
}

.branch-dropdown-item.editing {
  padding: 4px 8px;
}

.branch-dropdown-item.editing input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.branch-name-btn {
  flex: 1 1;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font-size: inherit;
  padding: 0;
}

.branch-name {
  flex: 1 1;
}

.branch-active-indicator {
  margin-left: 8px;
  color: var(--accent);
  font-weight: 600;
}

.branch-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.branch-dropdown-item:hover .branch-actions {
  opacity: 1;
}

.branch-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.branch-action-btn:hover {
  background: var(--bg);
  color: var(--text);
}

.branch-action-btn.delete:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.branch-dropdown-footer {
  padding: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.new-branch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.new-branch-btn:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
}

/* Version item branch badge */
.version-branch-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--accent-tint);
  color: var(--accent);
  margin-left: 6px;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fork button */
.version-action-btn.fork {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
}

.version-action-btn.fork:hover {
  background: var(--accent-tint);
}

/* Fork Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.fork-modal {
  width: 400px;
  max-width: 90vw;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.fork-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

.fork-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.fork-modal-body {
  padding: 20px;
}

.fork-modal-body label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.fork-modal-body input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.fork-modal-body input:focus {
  border-color: var(--accent);
}

.fork-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.modal-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.modal-btn.cancel {
  background: var(--bg);
  color: var(--text);
}

.modal-btn.cancel:hover {
  background: var(--bg-subtle);
}

.modal-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.modal-btn.primary:hover {
  opacity: 0.9;
}

.modal-btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 767px) {
  .diff-viewer {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    max-width: 100vw;
  }

  .diff-header {
    flex-wrap: wrap;
    padding: 12px;
  }

  .diff-header-left,
  .diff-header-right {
    flex: 1 1 100%;
    justify-content: center;
  }

  .diff-header-right {
    justify-content: center;
  }

  .diff-toolbar {
    padding: 8px 12px;
  }

  .diff-view-modes {
    flex-wrap: wrap;
  }

  .diff-mode-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* ============================================================================
   Embed Viewer — minimal iframe embed viewer
   ============================================================================ */
.embed-viewer-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

.embed-viewer-container[data-theme="dark"] {
  --bg: #1a1a1a;
  --text: #ffffff;
  --border: #333333;
  background: #1a1a1a;
}

.embed-viewer-container[data-theme="light"] {
  --bg: #ffffff;
  --text: #1a1a1a;
  --border: #e5e5e5;
  background: #ffffff;
}

.embed-viewer-loading {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 15px;
}

.embed-viewer-loading .spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.embed-viewer-error {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  text-align: center;
}

.embed-viewer-error h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.embed-viewer-error p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
}

.embed-viewer-content {
  flex: 1 1;
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  overflow: auto;
}

.embed-viewer-project {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.embed-viewer-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}

.embed-viewer-conversation {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.embed-viewer-conversation-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
}

.embed-viewer-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.embed-viewer-message {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}

.embed-viewer-message-user {
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
}

.embed-viewer-message-assistant {
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.embed-viewer-message-role {
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 8px;
  font-size: 12px;
}

.embed-viewer-message-content {
  color: var(--text);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.embed-viewer-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px;
  color: var(--text-muted);
  text-align: center;
}

.embed-viewer-placeholder p {
  font-size: 15px;
  margin: 0;
}

.embed-viewer-watermark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-panel);
}

.embed-viewer-watermark a {
  color: var(--accent);
  text-decoration: none;
}

.embed-viewer-watermark a:hover {
  text-decoration: underline;
}

.embed-viewer-fullscreen-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
}

.embed-viewer-fullscreen-btn:hover {
  color: var(--text);
}

/* Share dialog embed theme selector */
.share-dialog-embed-options {
  margin-bottom: 16px;
}

.share-dialog-embed-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-dialog-embed-theme-selector {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-muted);
  border-radius: var(--radius);
  width: -moz-fit-content;
  width: fit-content;
}

.share-dialog-embed-theme-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.share-dialog-embed-theme-btn:hover {
  color: var(--text);
}

.share-dialog-embed-theme-btn.active {
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Recommendation Panel */
.recommendation-panel {
  padding: 16px 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.recommendation-panel--compact {
  padding: 12px 16px;
}

.recommendation-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
}

.recommendation-section {
  margin-bottom: 16px;
}

.recommendation-section:last-child {
  margin-bottom: 0;
}

.recommendation-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.recommendation-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.recommendation-cards::-webkit-scrollbar {
  height: 4px;
}

.recommendation-cards::-webkit-scrollbar-track {
  background: transparent;
}

.recommendation-cards::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.recommendation-card {
  flex: 0 0 220px;
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.recommendation-panel--compact .recommendation-card {
  flex: 0 0 180px;
  padding: 10px;
}

.recommendation-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.recommendation-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  position: relative;
}

.recommendation-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.recommendation-tooltip {
  position: absolute;
  top: -8px;
  right: 0;
  padding: 4px 8px;
  background: var(--bg-invert);
  color: var(--text-invert);
  font-size: 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.recommendation-card-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommendation-card-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

.recommendation-card-swatches {
  display: flex;
  gap: 4px;
}

.recommendation-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.recommendation-use-btn {
  margin-top: auto;
  padding: 6px 12px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.recommendation-use-btn:hover {
  background: var(--accent-hover);
}

.recommendation-use-btn:active {
  transform: scale(0.98);
}

/* Project Organizer */
.project-organizer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.project-search-section {
  position: relative;
}

.project-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.project-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}

.project-search-input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.project-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.project-search-input::placeholder {
  color: var(--text-muted);
}

.project-search-clear {
  position: absolute;
  right: 8px;
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-search-clear:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.project-quick-filters {
  display: flex;
  gap: 6px;
}

.project-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.project-filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.project-filter-btn-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.project-tags-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-tags-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.project-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-tag-chip {
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.project-tag-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.project-tag-chip-active {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.project-folder-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.project-folder-add-btn {
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.project-folder-add-btn:hover {
  background: var(--bg-muted);
  color: var(--accent);
}

.project-folder-create {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.project-folder-create .project-folder-edit-input {
  flex: 1 1;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.project-folder-create .project-folder-edit-input:focus {
  border-color: var(--accent);
}

.project-folder-tree {
  display: flex;
  flex-direction: column;
}

.project-folder-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.project-folder-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s;
}

.project-folder-item:hover {
  background: var(--bg-subtle);
}

.project-folder-item-selected {
  background: var(--accent-tint);
}

.project-folder-item-selected:hover {
  background: var(--accent-soft);
}

.project-folder-toggle {
  padding: 2px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-folder-toggle:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.project-folder-toggle-placeholder {
  width: 18px;
  flex-shrink: 0;
}

.project-folder-name {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  padding: 0;
  min-width: 0;
}

.project-folder-name:hover {
  color: var(--accent);
}

.project-folder-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-folder-edit-input {
  flex: 1 1;
  padding: 2px 6px;
  font-size: 13px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.project-folder-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.project-folder-item:hover .project-folder-actions {
  display: flex;
}

.project-folder-action-btn {
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.project-folder-action-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.project-folder-action-delete:hover {
  background: var(--red-bg);
  color: var(--red);
}

.project-folder-children {
  margin-left: 8px;
}

.project-organizer-results {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}

/* Skill Wizard (r_p1_21) */
.skill-wizard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 26, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  animation: fade-in 160ms ease-out;
}

.skill-wizard-container {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: pop-in 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
  overflow: hidden;
}

.skill-wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-soft);
}

.skill-wizard-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.skill-wizard-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.skill-wizard-close:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.skill-wizard-step-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel);
  overflow-x: auto;
}

.skill-wizard-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all 0.15s;
}

.skill-wizard-step:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-wizard-step-active .step-num {
  background: var(--accent);
  color: #fff;
}

.skill-wizard-step-done .step-num {
  background: var(--accent-tint);
  color: var(--accent);
}

.skill-wizard-step-active .step-label,
.skill-wizard-step-done .step-label {
  color: var(--text);
  font-weight: 500;
}

.skill-wizard-content {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
}

.skill-wizard-step-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skill-wizard-step-panel h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.skill-wizard-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.skill-wizard-field label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.skill-wizard-field input,
.skill-wizard-field select,
.skill-wizard-field textarea {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  color: var(--text);
  outline: none;
  resize: vertical;
}

.skill-wizard-field input:focus,
.skill-wizard-field select:focus,
.skill-wizard-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}

.skill-wizard-field .hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

.skill-wizard-field.half {
  width: 100%;
}

.skill-wizard-param-row {
  display: flex;
  gap: 12px;
}

.skill-wizard-emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.emoji-btn {
  width: 32px;
  height: 32px;
  font-size: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.emoji-btn:hover {
  background: var(--bg-muted);
  border-color: var(--accent);
}

.emoji-btn.selected {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.skill-wizard-tag-input-row {
  display: flex;
  gap: 6px;
}

.skill-wizard-tag-input-row input {
  flex: 1 1;
}

.btn-add-tag {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.btn-add-tag:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.skill-wizard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.skill-wizard-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.skill-wizard-tag button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.skill-wizard-tag button:hover {
  opacity: 1;
}

.skill-wizard-followup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skill-wizard-followup-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.skill-wizard-followup-row input {
  flex: 1 1;
}

.btn-remove {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 8px;
  font-size: 12px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-remove:hover {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red);
}

.skill-wizard-param-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--bg-panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skill-wizard-param-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.btn-remove-sm {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  display: flex;
  align-items: center;
  border-radius: 3px;
  transition: all 0.15s;
}

.btn-remove-sm:hover {
  background: var(--red-bg);
  color: var(--red);
}

.skill-wizard-param-footer {
  display: flex;
  align-items: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

.skill-wizard-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-wizard-option-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.skill-wizard-option-row input {
  flex: 1 1;
}

.skill-wizard-param-add {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}

.skill-wizard-param-add:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.skill-wizard-empty-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px;
  background: var(--bg-panel);
  border-radius: var(--radius-md);
}

.skill-wizard-color-swatches {
  display: flex;
  gap: 8px;
}

.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-swatch.selected {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg-elevated);
}

.skill-wizard-json-preview {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 11px;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  color: var(--text-muted);
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.skill-wizard-error {
  padding: 10px 12px;
  background: var(--red-bg);
  color: var(--red);
  border-radius: var(--radius-sm);
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.skill-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-panel);
}

.skill-wizard-prev {
  padding: 7px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.skill-wizard-prev:hover {
  background: var(--bg-muted);
}

.skill-wizard-next {
  padding: 7px 16px;
  font-size: 13px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.skill-wizard-next:hover {
  opacity: 0.9;
}

.skill-wizard-final-actions {
  display: flex;
  gap: 8px;
}

.skill-wizard-cancel {
  padding: 7px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.skill-wizard-cancel:hover:not(:disabled) {
  background: var(--bg-muted);
}

.skill-wizard-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.skill-wizard-save {
  padding: 7px 16px;
  font-size: 13px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.skill-wizard-save:hover:not(:disabled) {
  opacity: 0.9;
}

.skill-wizard-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .skill-wizard-overlay {
    align-items: flex-end;
  }
  .skill-wizard-container {
    width: 100%;
    max-width: 100%;
    max-height: 95dvh;
    border-radius: 16px 16px 0 0;
    animation: slide-up 220ms cubic-bezier(0.21, 1.02, 0.73, 1);
  }
}



/* ===== Tutorial Library ===== */
.tutorial-library {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.tutorial-header {
  text-align: center;
  margin-bottom: 40px;
}

.tutorial-page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.tutorial-page-subtitle {
  font-size: 16px;
  color: var(--text-muted);
}

.tutorial-loading,
.tutorial-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  color: var(--text-muted);
}

.tutorial-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.tutorial-retry-btn {
  margin-top: 16px;
  padding: 8px 24px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.tutorial-featured {
  margin-bottom: 48px;
}

.tutorial-section-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutorial-count {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

.tutorial-filters {
  margin-bottom: 32px;
}

.tutorial-search {
  position: relative;
  max-width: 400px;
  margin-bottom: 20px;
}

.tutorial-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.tutorial-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.tutorial-search-input:focus {
  border-color: var(--accent);
}

.tutorial-search-input::placeholder {
  color: var(--text-muted);
}

.tutorial-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tutorial-tab {
  padding: 8px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.tutorial-tab:hover {
  border-color: var(--accent);
  color: var(--text);
}

.tutorial-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.tutorial-grid-section {
  margin-bottom: 48px;
}

.tutorial-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}

/* ===== Tutorial Card ===== */
.tutorial-card {
  display: block;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}

.tutorial-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tutorial-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-muted);
  overflow: hidden;
}

.tutorial-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.tutorial-card:hover .tutorial-card-image {
  transform: scale(1.05);
}

.tutorial-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--bg-muted), var(--bg-subtle));
}

.tutorial-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.tutorial-card:hover .tutorial-card-overlay,
.tutorial-card-overlay.visible {
  opacity: 1;
}

.tutorial-play-button {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: transform 0.15s;
}

.tutorial-play-button:hover {
  transform: scale(1.1);
}

.tutorial-play-button svg {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.tutorial-play-button-large {
  width: 64px;
  height: 64px;
}

.tutorial-play-button-large svg {
  width: 32px;
  height: 32px;
}

.tutorial-duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
}

.tutorial-category-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent);
  color: white;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  margin-bottom: 8px;
}

.tutorial-category-small {
  position: absolute;
  top: 8px;
  left: 8px;
  margin-bottom: 0;
}

.tutorial-card-content {
  padding: 16px;
}

.tutorial-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.tutorial-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tutorial-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.tutorial-watch-btn:hover {
  background: var(--accent-hover, #0056b3);
}

/* Featured Tutorial Card */
.tutorial-card-featured {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  max-width: 900px;
  margin: 0 auto;
}

.tutorial-card-featured .tutorial-card-thumb {
  aspect-ratio: 16 / 10;
}

.tutorial-card-featured .tutorial-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}

.tutorial-card-featured .tutorial-card-title {
  font-size: 22px;
  margin-bottom: 12px;
}

.tutorial-card-featured .tutorial-card-desc {
  font-size: 14px;
  -webkit-line-clamp: 3;
}

/* ===== Tutorial Player Page ===== */
.tutorial-player-page {
  min-height: 100vh;
  background: var(--bg);
}

.tutorial-player-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: 24px;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.tutorial-player-main {
  min-width: 0;
}

.tutorial-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tutorial-player-iframe {
  aspect-ratio: 16 / 9;
}

.tutorial-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.tutorial-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tutorial-controls {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tutorial-player.show-controls .tutorial-controls,
.tutorial-player:hover .tutorial-controls {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-controls-top {
  padding: 16px;
}

.tutorial-title-small {
  font-size: 14px;
  color: white;
  font-weight: 500;
}

.tutorial-controls-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.tutorial-control-btn {
  padding: 8px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.tutorial-control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.tutorial-control-btn svg {
  width: 24px;
  height: 24px;
}

.tutorial-play-pause {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

.tutorial-play-pause:hover {
  transform: scale(1.1);
  background: white;
}

.tutorial-play-pause svg {
  width: 28px;
  height: 28px;
}

.tutorial-controls-bottom {
  padding: 16px;
}

.tutorial-progress-container {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin-bottom: 12px;
  cursor: pointer;
}

.tutorial-progress {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.tutorial-progress-filled {
  position: absolute;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.1s linear;
}

.tutorial-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tutorial-controls-left,
.tutorial-controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tutorial-time {
  font-size: 13px;
  color: white;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.tutorial-volume {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutorial-volume-slider {
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  -webkit-appearance: none;
}

.tutorial-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
}

/* Tutorial Info */
.tutorial-info {
  padding: 24px 0;
}

.tutorial-info-header {
  margin-bottom: 16px;
}

.tutorial-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
}

.tutorial-description {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.tutorial-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tutorial-tag {
  padding: 4px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-muted);
}

.tutorial-nav {
  display: flex;
  gap: 12px;
}

.tutorial-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.tutorial-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tutorial Sidebar */
.tutorial-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 24px;
  height: -moz-fit-content;
  height: fit-content;
}

.tutorial-sidebar-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.tutorial-related {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tutorial-related .tutorial-card {
  display: flex;
  flex-direction: row;
}

.tutorial-related .tutorial-card-thumb {
  width: 120px;
  flex-shrink: 0;
  aspect-ratio: 16 / 10;
}

.tutorial-related .tutorial-card-content {
  padding: 12px;
}

.tutorial-related .tutorial-card-title {
  font-size: 14px;
}

.tutorial-related .tutorial-card-desc {
  display: none;
}

.tutorial-no-related {
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

/* Tutorial Player Page Loading/Error */
.tutorial-player-page.tutorial-loading,
.tutorial-player-page.tutorial-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 100px);
}

.tutorial-error-content {
  text-align: center;
}

.tutorial-error-content h2 {
  font-size: 24px;
  color: var(--text);
  margin-bottom: 8px;
}

.tutorial-error-content p {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.tutorial-back-link {
  color: var(--accent);
  text-decoration: none;
}

.tutorial-back-link:hover {
  text-decoration: underline;
}

/* ===== Featured Tutorials Section ===== */
.featured-tutorials {
  padding: 60px 0;
}

.featured-tutorials .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.featured-tutorials .section-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

.featured-tutorials .section-link:hover {
  color: var(--accent-hover, #0056b3);
}

.featured-tutorials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px;
  gap: 24px;
}

.featured-tutorial-skeleton {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.skeleton-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-subtle) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-content {
  padding: 16px;
}

.skeleton-title {
  height: 20px;
  background: var(--bg-muted);
  border-radius: 4px;
  margin-bottom: 8px;
  width: 80%;
}

.skeleton-desc {
  height: 14px;
  background: var(--bg-muted);
  border-radius: 4px;
  width: 60%;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===== Header Nav ===== */
.home-header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.home-nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
}

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

/* ============================================================
   Mobile Navigation (Hamburger Menu)
   ============================================================ */
.home-nav-hamburger {
  display: none;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

.home-nav-hamburger:hover {
  background: var(--bg-subtle);
}

.home-nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  animation: fadeIn 0.2s ease;
}

.home-nav-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 80vw;
  height: 100vh;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 999;
  animation: slideIn 0.2s ease;
  padding: 60px 24px 24px;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.home-nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-nav-mobile-link {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.15s;
  min-height: 44px;
}

.home-nav-mobile-link:hover {
  background: var(--bg-subtle);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Show hamburger on mobile, hide desktop nav on mobile */
@media (max-width: 767px) {
  .home-nav-hamburger {
    display: flex;
  }

  .home-header-nav {
    display: none;
  }

  .home-header-actions {
    display: none;
  }

  .home-header {
    padding: 12px 16px;
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .tutorial-player-container {
    grid-template-columns: 1fr;
  }
  
  .tutorial-sidebar {
    position: static;
  }
  
  .tutorial-related {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .featured-tutorials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tutorial-library {
    padding: 24px 16px;
  }
  
  .tutorial-page-title {
    font-size: 24px;
  }
  
  .tutorial-grid {
    grid-template-columns: 1fr;
  }
  
  .tutorial-card-featured {
    grid-template-columns: 1fr;
  }
  
  .tutorial-card-featured .tutorial-card-thumb {
    aspect-ratio: 16 / 9;
  }
  
  .tutorial-related {
    grid-template-columns: 1fr;
  }
  
  .featured-tutorials-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Notification Bell
   ============================================================ */
.notification-bell-container {
  position: relative;
  display: inline-flex;
}

.notification-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms, color 150ms;
}

.notification-bell:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: var(--red);
  border-radius: var(--radius-pill);
  transform: translate(25%, -25%);
}

.notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 100;
}

.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

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

.notification-dropdown-actions {
  display: flex;
  gap: 8px;
}

.notification-action-btn {
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 150ms;
}

.notification-action-btn:hover {
  background: var(--accent-tint);
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-loading,
.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-muted);
  gap: 12px;
}

.notification-empty p {
  margin: 0;
  font-size: 14px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  position: relative;
  transition: background 150ms;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--bg-subtle);
}

.notification-item-read {
  opacity: 0.7;
}

.notification-item-unread {
  background: var(--accent-tint);
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.notification-type-render_complete {
  color: var(--green);
  background: var(--green-bg);
}

.notification-type-render_failed {
  color: var(--red);
  background: var(--red-bg);
}

.notification-type-points_low {
  color: var(--amber);
  background: var(--amber-bg);
}

.notification-type-system {
  color: var(--blue);
  background: var(--blue-bg);
}

.notification-content {
  flex: 1 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.notification-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.notification-type-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-muted);
}

.notification-body {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 4px;
  line-height: 1.4;
}

.notification-time {
  font-size: 11px;
  color: var(--text-faint);
}

.notification-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 150ms, background 150ms;
  flex-shrink: 0;
}

.notification-item:hover .notification-delete {
  opacity: 1;
}

.notification-delete:hover {
  background: var(--red-bg);
  color: var(--red);
}

.notification-unread-dot {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============================================================
   Notification Panel (Full Page)
   ============================================================ */
.notification-panel {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

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

.notification-panel-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.notification-panel-mark-all-btn,
.notification-panel-settings-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms;
}

.notification-panel-mark-all-btn {
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-soft);
}

.notification-panel-mark-all-btn:hover {
  background: var(--accent-soft);
}

.notification-panel-settings-btn {
  background: var(--bg-subtle);
  color: var(--text);
  border: 1px solid var(--border);
}

.notification-panel-settings-btn:hover {
  background: var(--bg-muted);
}

.notification-panel-filters {
  margin-bottom: 20px;
}

.notification-panel-filter-select {
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.notification-panel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notification-panel-loading,
.notification-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-muted);
  gap: 16px;
}

.notification-panel-empty p {
  margin: 0;
  font-size: 15px;
}

.notification-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 150ms, box-shadow 150ms;
}

.notification-panel-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.notification-panel-item-read {
  opacity: 0.75;
}

.notification-panel-item-unread {
  border-left: 3px solid var(--accent);
}

.notification-panel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.notification-panel-content {
  flex: 1 1;
  min-width: 0;
}

.notification-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

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

.notification-panel-type-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-muted);
  color: var(--text-muted);
}

.notification-panel-body {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}

.notification-panel-time {
  font-size: 12px;
  color: var(--text-faint);
}

.notification-panel-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.notification-panel-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 150ms, color 150ms;
}

.notification-panel-action-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.notification-panel-delete:hover {
  background: var(--red-bg);
  color: var(--red);
}

.notification-panel-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.notification-panel-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.notification-panel-page-btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.notification-panel-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.notification-panel-page-info {
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   Notification Preferences Settings
   ============================================================ */
.notification-prefs-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.toggle-field {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.toggle-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.quiet-hours-row {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.quiet-hours-row .field {
  flex: 1 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .notification-dropdown {
    position: fixed;
    top: 60px;
    left: 16px;
    right: 16px;
    width: auto;
  }

  .notification-panel {
    padding: 16px;
  }

  .notification-panel-item {
    padding: 12px;
    gap: 12px;
  }

  .notification-panel-actions {
    flex-direction: column;
  }
}

/* ==================== Review Panel ==================== */
.review-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.review-panel {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.review-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.review-panel-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.review-panel-close {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.review-panel-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.review-panel-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1;
}

.review-panel-loading,
.review-panel-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

.review-panel-error {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: var(--red);
}

.review-section {
  margin-bottom: 20px;
}

.review-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* Status Badges */
.review-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.review-status-pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.review-status-in-review {
  background: var(--blue-bg);
  color: var(--blue);
}

.review-status-approved {
  background: var(--green-bg);
  color: var(--green);
}

.review-status-rejected {
  background: var(--red-bg);
  color: var(--red);
}

.review-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-status-btn {
  padding: 6px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.review-status-btn:hover {
  background: var(--bg-muted);
  border-color: var(--border-strong);
}

.review-status-btn.active {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.review-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms;
}

.review-create-btn:hover {
  background: var(--accent-hover);
}

/* Like Button */
.review-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: background 150ms, color 150ms, border-color 150ms;
}

.review-like-btn:hover {
  background: var(--bg-muted);
  color: var(--text);
}

.review-like-btn.liked {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: var(--accent);
}

/* Tabs */
.review-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.review-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: color 150ms, border-color 150ms;
}

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

.review-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Comments */
.review-comments-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.review-comments-input textarea {
  resize: vertical;
  min-height: 80px;
}

.review-submit-btn {
  align-self: flex-end;
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms;
}

.review-submit-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.review-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.review-comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-comments-empty,
.review-collaborators-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 14px;
}

.review-comment-item {
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.review-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.review-comment-time {
  font-size: 12px;
  color: var(--text-faint);
}

.review-comment-delete {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.review-comment-delete:hover {
  background: var(--red-bg);
  color: var(--red);
}

.review-comment-text {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Collaborators */
.review-invite-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.review-invite-form input {
  flex: 1 1;
  min-width: 150px;
}

.review-invite-form select {
  width: auto;
}

.review-invite-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms;
}

.review-invite-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.review-invite-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.review-collaborators-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-collaborator-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--radius);
}

.review-collaborator-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-collaborator-name {
  font-size: 14px;
  color: var(--text);
}

.review-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
}

.review-role-owner {
  background: var(--accent-tint);
  color: var(--accent);
}

.review-role-reviewer {
  background: var(--blue-bg);
  color: var(--blue);
}

.review-role-viewer {
  background: var(--bg-muted);
  color: var(--text-muted);
}

.review-collaborator-remove {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.review-collaborator-remove:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* Responsive */
@media (max-width: 640px) {
  .review-panel {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-top: auto;
  }

  .review-panel-overlay {
    align-items: flex-end;
  }

  .review-status-buttons {
    flex-direction: column;
  }

  .review-invite-form {
    flex-direction: column;
  }

  .review-invite-form select {
    width: 100%;
  }
}

/* ============================================================
   首页美化样式
   ============================================================ */

/* 头部固定布局 */
.home-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  gap: 24px;
}

.home-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 12px 32px;
}

.home-header-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

.home-nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
  padding: 4px 0;
}

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

.home-nav-link.active {
  color: var(--text-strong);
  font-weight: 600;
}

/* Hero 区域 */
.home-hero {
  text-align: center;
  padding: 80px 0 40px;
  position: relative;
}

.home-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(201, 100, 66, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.home-hero-badge {
  display: inline-block;
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}

.home-headline {
  font-size: 64px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.1;
  margin: 0 0 24px;
  letter-spacing: -2px;
}

.home-headline .highlight {
  background: linear-gradient(135deg, #c96442 0%, #e88a6f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-subhead {
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 auto 40px;
  max-width: 560px;
}

.home-hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.home-cta-large {
  padding: 16px 32px;
  font-size: 16px;
}

.home-hero-trust {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.home-hero-trust span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 积分说明卡片 */
.home-points-explainer {
  width: 100%;
  padding: 60px 0;
}

.home-points-card {
  background: linear-gradient(135deg, #fff 0%, #fef8f5 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(201, 100, 66, 0.08);
}

.home-points-icon {
  font-size: 56px;
  margin-bottom: 16px;
  display: block;
}

.home-points-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 16px;
}

.home-points-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

.price-large {
  font-size: 56px;
  font-weight: 800;
  background: linear-gradient(135deg, #c96442 0%, #e88a6f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.price-equals {
  font-size: 24px;
  color: var(--text-muted);
}

.home-points-desc {
  color: var(--text-muted);
  margin-bottom: 24px;
  font-size: 15px;
}

/* Partners */
.home-partners {
  width: 100%;
  padding: 8px 0 0;
}

.home-partners-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-partners-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.home-section-kicker {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.home-partners-title {
  color: var(--text-strong);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin: 6px 0 0;
}

.home-partners-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.home-partner-card {
  min-width: 0;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  text-decoration: none;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 16px;
  box-shadow: var(--shadow-xs);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-partner-card:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 12px 28px rgba(255, 97, 7, 0.09);
  transform: translateY(-2px);
}

.home-partner-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.home-partner-logo img {
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  display: block;
}

.home-partner-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.home-partner-copy strong {
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.25;
}

.home-partner-copy span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .home-partners-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-partners-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .home-partners-title {
    font-size: 23px;
  }

  .home-partners-grid {
    grid-template-columns: 1fr;
  }

  .home-partner-card {
    min-height: 86px;
  }
}

/* Footer */
.home-footer {
  background: linear-gradient(180deg, var(--bg) 0%, #fef9f5 100%);
  border-top: 1px solid var(--border);
  margin-top: 80px;
}

.home-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  grid-gap: 48px;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 48px;
}

.home-footer-brand {
  padding-right: 32px;
}

.home-footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.home-footer-logo-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-strong);
  letter-spacing: -0.5px;
}

.home-footer-tagline {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 12px;
}

.home-footer-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

.home-footer-links {
  display: contents;
}

.home-footer-link-group {
  display: flex;
  flex-direction: column;
}

.home-footer-link-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 20px;
}

.home-footer-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

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

.home-footer-bottom {
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

.home-footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.home-footer-copyright {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0;
}

.home-footer-filings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}

.home-footer-filings a {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
  transition: color 0.2s;
}

.home-footer-filings a:hover {
  color: var(--accent);
}

@media (max-width: 960px) {
  .home-footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 48px 24px 32px;
  }

  .home-footer-brand {
    grid-column: span 2;
    padding-right: 0;
  }
}

@media (max-width: 640px) {
  .home-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 20px 24px;
  }

  .home-footer-brand {
    grid-column: span 1;
  }

  .home-footer-bottom-inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 20px;
  }

  .home-footer-filings {
    justify-content: center;
  }
}

/* 移动端菜单 */
.home-nav-hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}

.home-nav-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.home-nav-mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--bg-panel);
  z-index: 100;
  padding: 80px 24px 24px;
}

.home-nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-nav-mobile-link {
  color: var(--text-strong);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 0;
}

.home-nav-mobile-links .home-cta {
  width: 100%;
  text-align: center;
  margin-top: 16px;
}

/* 响应式 */
@media (max-width: 768px) {
  .home-header-nav {
    display: none;
  }

  .home-nav-hamburger {
    display: block;
  }

  .home-header-inner {
    justify-content: space-between;
  }

  .home-headline {
    font-size: 40px;
  }

  .home-subhead {
    font-size: 16px;
  }

  .home-hero-trust {
    flex-direction: column;
    gap: 8px;
  }

  .home-footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .home-points-card {
    padding: 32px 24px;
  }

  .price-large {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .home-header {
    padding: 12px 16px;
  }

  .home-main {
    padding: 40px 16px;
  }

  .home-headline {
    font-size: 32px;
    letter-spacing: -1px;
  }

  .home-hero {
    padding: 40px 0 24px;
  }

  .home-footer-main {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   技能预览模块
   ============================================================ */
.home-skills-section {
  width: 100%;
  padding: 48px 0;
}

.home-skills-header {
  text-align: center;
  margin-bottom: 32px;
}

.home-skills-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0 0 8px;
}

.home-skills-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

.home-skills-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.home-skills-tab {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.home-skills-tab:hover {
  border-color: var(--text-muted);
}

.home-skills-tab.active {
  background: var(--text-strong);
  color: white;
  border-color: var(--text-strong);
}

.home-skills-categories {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.home-skills-category {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.home-skills-category:hover {
  background: var(--bg-muted);
  color: var(--text-strong);
}

.home-skills-category.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.home-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 32px;
}

.home-skill-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}

.home-skill-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.home-skill-preview {
  height: 140px;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-skill-preview-placeholder {
  color: var(--text-faint);
}

.home-skill-info {
  padding: 16px;
}

.home-skill-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  margin: 0 0 4px;
  font-family: var(--mono);
}

.home-skill-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.home-skill-tag {
  display: inline-block;
  padding: 4px 8px;
  background: var(--bg-subtle);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.home-skills-footer {
  text-align: center;
}

.home-skills-more {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.home-skills-more:hover {
  color: var(--accent-strong);
}

/* ============================================================
   常见问题模块
   ============================================================ */
.home-faq-section {
  width: 100%;
  padding: 48px 0;
}

.home-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.home-faq-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
}

.home-faq-more {
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}

.home-faq-more:hover {
  color: var(--text-strong);
}

.home-faq-list {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.home-faq-item {
  border-bottom: 1px solid var(--border);
}

.home-faq-item:last-child {
  border-bottom: none;
}

.home-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: var(--bg-panel);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-strong);
  transition: background 0.2s;
}

.home-faq-question:hover {
  background: var(--bg-subtle);
}

.home-faq-icon {
  color: var(--text-muted);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.home-faq-item.open .home-faq-icon {
  transform: rotate(180deg);
}

.home-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.home-faq-item.open .home-faq-answer {
  max-height: 200px;
}

.home-faq-answer p {
  padding: 0 24px 18px;
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.home-faq-hint {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.home-faq-hint a {
  color: var(--accent);
  text-decoration: none;
}

.home-faq-hint a:hover {
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .home-skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
  
  .home-faq-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .home-skills-grid {
    grid-template-columns: 1fr;
  }
  
  .home-skills-categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 8px;
  }
  
  .home-skills-category {
    flex-shrink: 0;
  }

  /* 移动端定价卡片 */
  .home-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .home-pricing-card {
    padding: 16px 12px;
  }
  
  .home-pricing-points-num {
    font-size: 22px;
  }
  
  .home-pricing-price-amount {
    font-size: 20px;
  }
}

/* 品牌 Logo 样式 */
.home-brand img {
  border-radius: 8px;
  object-fit: contain;
}

/* 技能卡片悬浮效果增强 */
.home-skill-card:hover .home-skill-preview {
  background: linear-gradient(135deg, var(--bg-subtle) 0%, var(--accent-tint) 100%);
}

.home-skill-card:hover .home-skill-preview-placeholder svg {
  color: var(--accent);
  transform: scale(1.1);
  transition: all 0.3s;
}

/* 常见问题展开动画 */
.home-faq-item {
  transition: background 0.2s;
}

.home-faq-item.open {
  background: var(--bg-subtle);
}

/* FAQ 标题添加图标 */
.home-faq-header .home-faq-title::before {
  content: '❓';
  margin-right: 8px;
}

/* 信任承诺样式 */
.home-hero-trust {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--text-muted);
}

.home-hero-trust span {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-subtle);
  padding: 8px 16px;
  border-radius: 20px;
}

/* Section 间距优化 */
.home-main > section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* 视频区域样式优化 */
.home-main > section:nth-child(4) {
  max-width: 100%;
  padding: 0;
}


/* Stage 7 homepage content/sections */
.home-header-inner {
  justify-content: flex-start;
  gap: 28px;
}

.home-header-nav {
  margin-right: auto;
  gap: 10px;
}

.home-header-actions {
  margin-left: auto;
}

.home-nav-link {
  border-radius: 999px;
  font-size: 15px;
  padding: 8px 14px;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.home-nav-link:hover,
.home-nav-link.active {
  background: var(--accent-tint);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}

.home-headline {
  letter-spacing: 0;
}

.home-headline .highlight {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.home-cta-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: transparent;
}

.home-pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-pricing-package-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.home-video-player {
  background: #0d0c0a;
}

.home-video-el {
  background: #0d0c0a;
  object-fit: contain;
}

.home-video-placeholder {
  display: none;
}

.home-showcase {
  gap: 12px;
}

.home-showcase-carousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
}

.home-showcase-viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.home-showcase-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 420ms ease;
}

.home-showcase-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.home-showcase-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  min-height: 360px;
  cursor: default;
}

.home-showcase-card-link {
  color: inherit;
  text-decoration: none;
}

.home-showcase-card-image {
  aspect-ratio: auto;
  min-height: 360px;
}

.home-showcase-card-image img {
  object-fit: cover;
}

.home-showcase-card-body {
  justify-content: center;
  padding: 28px;
}

.home-showcase-card-title {
  font-size: 20px;
}

.home-showcase-card-desc {
  font-size: 14px;
}

.home-showcase-control {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg-panel);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
}

.home-showcase-control span {
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

.home-showcase-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.home-showcase-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: var(--border-strong);
}

.home-showcase-dot.active {
  width: 24px;
  background: var(--accent);
}

.home-skill-preview {
  align-items: stretch;
  background: var(--bg-subtle);
}

.home-skill-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-skills-tabs,
.home-skills-categories,
.home-skills-footer {
  display: none;
}

.home-ds-title-main,
.home-ds-sub {
  text-align: center;
}

.home-ds-sub {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.home-ds-cta {
  align-self: center;
  margin: 22px auto 0;
  min-width: 180px;
}

.home-shell,
.home-main {
  max-width: 100%;
  overflow-x: hidden;
}

.home-how,
.home-video,
.featured-tutorials,
.home-showcase,
.home-skills-section,
.home-ds,
.home-pricing,
.home-partners {
  max-width: 100%;
}

.home-video-player,
.home-video-el {
  max-width: 100%;
}

.home-headline .highlight {
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: var(--accent);
}

.home-cta-primary {
  background: var(--accent);
  border-color: var(--accent);
}

.home-cta-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

@media (max-width: 900px) {
  .home-showcase-carousel {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .home-showcase-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-showcase-card-image {
    min-height: 260px;
    aspect-ratio: 16 / 10;
  }

  .home-pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .home-main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-video-player {
    width: 100%;
    min-width: 0;
  }

  .home-hero-trust span {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .home-header-inner {
    justify-content: space-between;
  }

  .home-header-actions,
  .home-header-nav {
    margin-left: 0;
    margin-right: 0;
  }

  .home-showcase-carousel {
    grid-template-columns: 1fr;
  }

  .home-showcase-control {
    display: none;
  }
}
/* Email link landing pages */
.auth-link-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: #f6f8fb;
  color: #172033;
}

.auth-link-panel {
  width: min(100%, 460px);
  padding: 34px 32px;
  border: 1px solid #e4e9f1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(20, 32, 48, 0.12);
}

.auth-link-brand {
  display: inline-flex;
  margin-bottom: 14px;
  color: #d46b08;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.auth-link-panel h1 {
  margin: 0 0 12px;
  color: #101828;
  font-size: 28px;
  line-height: 1.25;
}

.auth-link-panel p {
  margin: 0 0 22px;
  color: #5f6f86;
  font-size: 15px;
  line-height: 1.75;
}

.auth-link-form {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.auth-link-form label {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: #344054;
  font-size: 14px;
  font-weight: 700;
}

.auth-link-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #ccd6e3;
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
}

.auth-link-action,
.auth-link-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  padding: 0 18px;
  background: #f08a24;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.auth-link-action:disabled {
  opacity: 0.65;
  cursor: wait;
}

.auth-link-secondary {
  margin-top: 8px;
  background: #202733;
}

.auth-link-message {
  margin-top: 16px !important;
}

.auth-link-message-error {
  color: #b42318 !important;
}

.auth-link-message-success {
  color: #067647 !important;
}