/* ============================================
   MOKO DESIGN SYSTEM
   Warm dark theme with amber accent
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('./v5.tokens.css');
@import url('./v5.components.css');

/* ── Legacy variable aliases (compat bridge) ── */
:root {
  --bg-main: var(--moko-color-bg-main);
  --bg-sidebar: var(--moko-color-bg-sidebar);
  --bg-hover: var(--moko-color-bg-hover);
  --bg-active: var(--moko-color-bg-active);
  --bg-surface: var(--moko-color-bg-surface);
  --bg-input: var(--moko-color-bg-input);
  --bg-elevated: var(--moko-color-bg-elevated);

  --border: var(--moko-color-border);
  --border-light: var(--moko-color-border-strong);

  --text: var(--moko-color-text-primary);
  --text-secondary: var(--moko-color-text-secondary);
  --text-muted: var(--moko-color-text-muted);
  --text-placeholder: var(--moko-color-text-placeholder);

  --accent: var(--moko-color-accent);
  --accent-dim: var(--moko-color-accent-dim);
  --accent-hover: var(--moko-color-accent);

  --domain-accent: var(--moko-color-domain);

  --green: var(--moko-color-success);
  --green-dim: var(--moko-color-success-dim);
  --red: var(--moko-color-danger);
  --red-dim: var(--moko-color-danger-dim);
  --blue: var(--moko-color-info);
  --blue-dim: var(--moko-color-info-dim);
  --yellow: var(--moko-color-warning);
  --yellow-dim: var(--moko-color-warning-dim);
  --orange: #f59e0b;
  --orange-dim: rgba(245, 158, 11, 0.12);
  --pink: #e8729a;
  --pink-dim: rgba(232, 114, 154, 0.12);
  --teal: #45c4b0;
  --teal-dim: rgba(69, 196, 176, 0.12);

  --cluster-indigo: var(--moko-color-cluster-indigo);
  --plasma-cyan: var(--moko-color-plasma-cyan);
  --biotech-green: var(--moko-color-biotech-green);
  --pulse-gold: var(--moko-color-pulse-gold);
  --neutrino-pink: var(--moko-color-neutrino-pink);

  --type-viewpoint: var(--moko-color-pulse-gold);
  --type-data: var(--moko-color-plasma-cyan);
  --type-quote: var(--moko-color-cluster-indigo);
  --type-case: var(--moko-color-biotech-green);
  --type-reference: var(--moko-color-cluster-indigo);
  --type-person: var(--moko-color-neutrino-pink);
  --type-book: var(--moko-color-pulse-gold);
  --type-topic: var(--moko-color-plasma-cyan);
  --type-article: var(--moko-color-biotech-green);
  --type-voice: var(--moko-color-neutrino-pink);

  --font-heading: var(--moko-font-heading);
  --font-body: var(--moko-font-body);
  --font-body-zh: var(--moko-font-body-zh);
  --font-mono: var(--moko-font-mono);

  --sidebar-width: var(--moko-sidebar-width);
  --topbar-height: var(--moko-topbar-height);
  --radius-sm: var(--moko-radius-sm);
  --radius-md: var(--moko-radius-md);
  --radius-lg: var(--moko-radius-lg);
  --radius-pill: var(--moko-radius-pill);
  --transition: var(--moko-motion-fast);
}

/* Language-based font switching (UI only, not user-edited content) */
html[data-lang="en"] {
  --moko-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-lang="zh"] {
  --moko-font-body: "PingFang SC", "Heiti SC", "STHeiti", "SimHei", "Noto Sans SC", sans-serif;
  --moko-font-heading: "PingFang SC", "Heiti SC", "STHeiti", "SimHei", sans-serif;
}

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

body {
  font-family: var(--font-body);
  background: var(--bg-main);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
}

/* ── Scientific Design System: Typography Overrides ── */
/* Headings & titles use Space Grotesk */
h1,
h2,
h3,
h4,
h5,
h6,
.modal-header h3,
.auth-logo,
.auth-subtitle,
.topbar-title,
.kp-header-title,
.kp-empty-greeting,
.op-title,
.cfg-detail-title,
.cfg-sc-title {
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}

/* ── Content Heading Scaling (-40%) ── */
.node-content h1,
.def-editor h1,
.prop-value h1 {
  font-size: 1.35em;
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.node-content h2,
.def-editor h2,
.prop-value h2 {
  font-size: 1.15em;
  font-weight: 600;
  margin-top: 0.8em;
  margin-bottom: 0.4em;
}

.node-content h3,
.def-editor h3,
.prop-value h3 {
  font-size: 1.05em;
  font-weight: 600;
  margin-top: 0.6em;
  margin-bottom: 0.3em;
}

/* System chrome labels use JetBrains Mono uppercase */
.auth-field label,
.nav-section-title,
.cfg-sc-sub,
.kp-mode-btn,
.kp-hint-card span,
.kp-empty-tip,
.gs-hint,
.qc-kind-btn,
.op-title,
.rc-detail-btn,
.btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

/* ── App Shell ── */
.app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  background: #212121;
  position: relative;
}

/* ── Side Navigation Bar (horizontal buttons at top) ── */
.side-nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: none;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}

.snav-btn {
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  flex-shrink: 0;
  position: relative;
}

/* Use the fixed floating toggle as the single collapse/expand control */
.snav-collapse-btn {
  display: none;
}

.snav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.snav-btn.active {
  background: transparent;
  color: var(--accent);
}

.snav-btn.active:hover {
  background: rgba(255, 255, 255, 0.08);
}

.snav-separator {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
  flex-shrink: 0;
}

/* ═══ Fixed Top-Left Nav Buttons (DOMAINS / OBJECTS / TIMELINE) ═══ */
.top-nav-triggers {
  position: fixed;
  top: 6px;
  left: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hide the AI toggle in top-nav when sidebar is open (to avoid double icon) */
.side-panel:not(.collapsed)~.main-area~.top-nav-triggers .top-nav-btn-ai,
.side-panel:not(.collapsed)~.top-nav-triggers .top-nav-btn-ai {
  display: none;
}

.top-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.top-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.top-nav-btn.active {
  background: rgba(212, 244, 65, 0.08);
  color: var(--accent);
}

.top-nav-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 6px;
  flex-shrink: 0;
}

.top-nav-library-btn {
  width: 32px;
  height: 28px;
}

/* Compact controls that stay in the fixed top nav bar */
.top-mode-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.top-mode-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.top-mode-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.top-mode-btn.active {
  color: var(--accent);
  border-color: rgba(212, 244, 65, 0.25);
  background: rgba(212, 244, 65, 0.06);
}

.top-mode-toggle-subtle {
  margin-left: 2px;
}

.top-mode-btn-subtle {
  opacity: 0.66;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 3px 8px;
}

.top-mode-btn-subtle:hover {
  opacity: 1;
  color: var(--text-secondary);
}

/* ═══ Floating Dropdown Popup (appears below top nav buttons) ═══ */
.float-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.25);
  display: none;
}

.float-dropdown-backdrop.is-open {
  display: block;
}

.float-dropdown-popup {
  position: fixed;
  top: 48px;
  left: 12px;
  width: 300px;
  height: calc(100vh * 0.75 - 45px);
  min-width: 160px;
  min-height: 200px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  z-index: 99;
  background: var(--moko-tier-bg, rgba(26, 26, 30, 0.92));
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  border: 1px solid var(--moko-tier-border, rgba(255, 255, 255, 0.09));
  border-radius: var(--moko-tier-radius, 14px);
  box-shadow: var(--moko-tier-shadow, 0 18px 42px rgba(0, 0, 0, 0.45));
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: floatDropdownIn 0.18s ease-out;
}

.float-dropdown-popup.is-open {
  display: flex;
}

/* ── Notch arrow pointing to trigger button ── */
.float-dropdown-popup::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--notch-left, 14px);
  width: 12px;
  height: 12px;
  background: var(--moko-tier-bg, rgba(26, 26, 30, 0.92));
  border-left: 1px solid var(--moko-tier-border, rgba(255, 255, 255, 0.09));
  border-top: 1px solid var(--moko-tier-border, rgba(255, 255, 255, 0.09));
  transform: rotate(45deg);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 1;
}

/* Search bar inside float popup — consistent with sidebar */
.float-dropdown-popup .side-panel-search input {
  background: rgba(255, 255, 255, 0.04);
}

@keyframes floatDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

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

/* Hide notch arrow when panel is positioned differently (e.g. timeline) */
.float-dropdown-popup.no-notch::before {
  display: none;
}

/* Active state for top-right bar buttons */
.trb-btn.active {
  background: rgba(212, 244, 65, 0.08);
  color: var(--accent);
  border-color: rgba(212, 244, 65, 0.2);
}

.float-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.float-dropdown-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
}

.float-dropdown-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.12s;
}

.float-dropdown-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}

.float-dropdown-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.float-menu-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.float-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.35;
  transition: background 0.12s, color 0.12s;
}

.float-menu-row:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
}

.float-menu-row.is-active {
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.95);
}

.float-menu-row.is-action {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.84);
}

.float-menu-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.58);
  flex-shrink: 0;
}

.float-menu-icon svg {
  width: 14px;
  height: 14px;
}

.float-menu-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.float-menu-check {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ADE80;
  flex-shrink: 0;
}

.float-menu-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 6px 2px 4px;
}

/* ── Resize handles ── */
.float-dropdown-resize {
  position: absolute;
  z-index: 2;
}

.float-dropdown-resize-e {
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
}

.float-dropdown-resize-s {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  cursor: ns-resize;
}

.float-dropdown-resize-se {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
}

.float-dropdown-resize:hover {
  background: rgba(212, 244, 65, 0.15);
}

@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

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

/* ── Top Right Bar (Search + 我的) ── */
.top-right-bar {
  position: fixed;
  top: 6px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 6px;
}

.moko-canvas-workspace-bar {
  --moko-ws-topbar-gray: rgba(36, 36, 40, 0.96);
  display: none;
  align-items: center;
  gap: 12px;
  margin-right: 16px;
  padding: 0 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
  background: var(--moko-ws-topbar-gray);
}

.moko-canvas-workspace-bar.is-visible {
  display: flex;
}

.moko-canvas-workspace-label {
  font-size: 9px;
  letter-spacing: 1px;
}

.moko-ws-select {
  min-width: 140px;
  max-width: 220px;
  width: auto;
  font-weight: 500;
}

.moko-ws-picker {
  position: relative;
}

.moko-ws-picker-trigger {
  min-width: 188px;
  max-width: 280px;
  height: 28px;
  padding: 0 10px 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--moko-ws-topbar-gray);
  color: rgba(244, 248, 255, 0.96);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.moko-ws-picker-trigger:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 10px rgba(0, 0, 0, 0.2);
}

.moko-ws-picker-trigger-main {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.moko-ws-picker-trigger-icon {
  width: 14px;
  height: 14px;
  color: rgba(220, 231, 249, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.moko-ws-picker-trigger-icon .type-svg-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-ws-picker-trigger-icon .type-svg-icon svg,
.moko-ws-picker-trigger-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.moko-ws-picker-trigger-text {
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 560;
}

.moko-ws-picker-trigger-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(220, 231, 249, 0.86);
}

.moko-ws-picker-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 312px;
  max-height: min(66vh, 520px);
  overflow: auto;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 8px 9px;
  border-radius: var(--moko-tier-radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--moko-ws-topbar-gray);
  backdrop-filter: blur(18px) saturate(1);
  -webkit-backdrop-filter: blur(18px) saturate(1);
  box-shadow: var(--moko-tier-shadow);
  z-index: 1000010;
}

.moko-ws-picker-menu.is-open {
  display: flex;
}

.moko-ws-picker-menu::-webkit-scrollbar {
  width: 8px;
}

.moko-ws-picker-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.moko-ws-picker-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 4px;
}

.moko-ws-picker-section + .moko-ws-picker-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
  margin-top: 2px;
}

.moko-ws-picker-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(194, 204, 220, 0.72);
  text-transform: uppercase;
}

.moko-ws-picker-section-count {
  font-size: 9px;
  font-weight: 640;
  color: rgba(223, 233, 248, 0.7);
}

.moko-ws-picker-section-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moko-ws-picker-empty {
  padding: 12px 10px;
  font-size: 11px;
  color: rgba(202, 210, 224, 0.72);
}

.moko-ws-picker-item {
  position: relative;
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(244, 248, 255, 0.92);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  border-radius: 8px;
  padding: 0 9px 0 12px;
  cursor: pointer;
}

.moko-ws-picker-item::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 7px;
  width: 3px;
  height: calc(100% - 14px);
  border-radius: 999px;
  background: transparent;
}

.moko-ws-picker-item:hover {
  background: rgba(255, 255, 255, 0.065);
}

.moko-ws-picker-item.is-active {
  background: rgba(212, 244, 65, 0.14);
  color: rgba(249, 253, 220, 0.98);
}

.moko-ws-picker-item-main {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.moko-ws-picker-item-icon {
  width: 13px;
  height: 13px;
  color: rgba(220, 231, 249, 0.88);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.moko-ws-picker-item-icon .type-svg-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-ws-picker-item-icon .type-svg-icon svg,
.moko-ws-picker-item-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.moko-ws-picker-item.is-active::before {
  background: rgba(212, 244, 65, 1);
  box-shadow: 0 0 10px rgba(212, 244, 65, 0.5);
}

.moko-ws-picker-item-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 560;
}

.moko-ws-picker-item-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.moko-ws-picker-item-group {
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 1px 7px;
  color: rgba(210, 219, 234, 0.86);
}

.moko-ws-picker-item-featured {
  font-size: 10px;
  color: rgba(212, 244, 65, 0.95);
}

.moko-ws-item-context-menu {
  position: fixed;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(17, 19, 24, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
  z-index: 1000015;
}

.moko-ws-item-context-entry {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(237, 243, 255, 0.92);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
  text-align: left;
}

.moko-ws-item-context-entry:hover {
  background: rgba(212, 244, 65, 0.14);
}

.moko-ws-item-context-entry svg {
  flex: 0 0 auto;
  opacity: 0.92;
}

.moko-ws-item-context-entry span {
  font-size: 12px;
  font-weight: 600;
}

.moko-ws-item-context-entry.is-danger {
  color: rgba(255, 156, 156, 0.96);
}

.moko-ws-item-context-entry.is-danger:hover {
  background: rgba(255, 85, 85, 0.16);
}

.moko-ws-domain-bind-popover {
  position: fixed;
  width: min(320px, 42vw);
  min-width: 240px;
  max-height: min(62vh, 420px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 18, 24, 0.98);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.44);
  z-index: 1000016;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.moko-ws-domain-bind-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(223, 235, 255, 0.78);
  padding: 2px 4px 0;
}

.moko-ws-domain-bind-search-wrap {
  display: flex;
  align-items: center;
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}

.moko-ws-domain-bind-search-wrap:focus-within {
  border-color: rgba(212, 244, 65, 0.72);
  box-shadow: 0 0 0 2px rgba(212, 244, 65, 0.16);
}

.moko-ws-domain-bind-search {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(248, 251, 255, 0.96);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  font-family: inherit;
}

.moko-ws-domain-bind-search::placeholder {
  color: rgba(208, 218, 233, 0.46);
}

.moko-ws-domain-bind-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(48vh, 330px);
  overflow: auto;
  padding-right: 2px;
}

.moko-ws-domain-bind-item {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(237, 243, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}

.moko-ws-domain-bind-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.moko-ws-domain-bind-item.is-selected {
  background: rgba(212, 244, 65, 0.16);
}

.moko-ws-domain-bind-item-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.moko-ws-domain-bind-item-meta {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(198, 210, 228, 0.66);
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-ws-domain-bind-empty {
  min-height: 36px;
  border-radius: 8px;
  color: rgba(201, 213, 232, 0.58);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.moko-ws-icon-bind-popover {
  width: min(340px, 46vw);
}

.moko-ws-icon-choice-title {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.moko-ws-icon-choice-icon {
  width: 14px;
  height: 14px;
  color: rgba(225, 236, 252, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.moko-ws-icon-choice-icon .type-svg-icon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-ws-icon-choice-icon .type-svg-icon svg,
.moko-ws-icon-choice-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.moko-ws-icon-choice-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-ws-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000012;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 28px 22px;
  background: rgba(7, 8, 12, 0.78);
  backdrop-filter: blur(7px) saturate(1.1);
}

.moko-ws-gallery-shell {
  width: min(1480px, 100%);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 18, 22, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.moko-ws-gallery-head {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.moko-ws-gallery-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(244, 248, 255, 0.95);
}

.moko-ws-gallery-close {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(230, 239, 255, 0.8);
  background: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

.moko-ws-gallery-close svg {
  display: block;
}

.moko-ws-gallery-close:hover {
  color: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.3);
}

.moko-ws-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.moko-ws-gallery-search {
  flex: 1 1 auto;
  min-width: 180px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 249, 255, 0.95);
  padding: 0 12px;
  font-size: 12px;
}

.moko-ws-gallery-search:focus {
  outline: none;
  border-color: rgba(212, 244, 65, 0.72);
  box-shadow: 0 0 0 2px rgba(212, 244, 65, 0.16);
}

.moko-ws-gallery-group-filter {
  width: 176px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(245, 249, 255, 0.95);
  padding: 0 10px;
}

.moko-ws-gallery-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.moko-ws-gallery-body::-webkit-scrollbar {
  width: 10px;
}

.moko-ws-gallery-body::-webkit-scrollbar-thumb {
  background: rgba(212, 244, 65, 0.24);
  border-radius: 999px;
}

.moko-ws-gallery-section {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.moko-ws-gallery-section-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(212, 219, 233, 0.84);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.moko-ws-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.moko-ws-gallery-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.moko-ws-gallery-card:hover {
  border-color: rgba(212, 244, 65, 0.58);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.22);
}

.moko-ws-gallery-card.is-active {
  border-color: rgba(212, 244, 65, 0.92);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.4), 0 0 16px rgba(212, 244, 65, 0.2);
}

.moko-ws-gallery-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #13161a, #0d1014);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.moko-ws-gallery-card-thumb.is-empty {
  background-image: radial-gradient(circle at 50% 45%, rgba(212, 244, 65, 0.14) 0 22%, rgba(212, 244, 65, 0.02) 56%, transparent 72%);
}

.moko-ws-gallery-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moko-ws-gallery-card-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 680;
  color: rgba(245, 249, 255, 0.95);
  min-width: 0;
}

.moko-ws-gallery-card-title-icon {
  width: 13px;
  height: 13px;
  color: rgba(220, 231, 249, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.moko-ws-gallery-card-title-icon .type-svg-icon {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-ws-gallery-card-title-icon .type-svg-icon svg,
.moko-ws-gallery-card-title-icon svg {
  width: 13px;
  height: 13px;
  display: block;
}

.moko-ws-gallery-card-title-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-ws-gallery-card-sub {
  font-size: 11px;
  color: rgba(188, 198, 214, 0.76);
}

.moko-ws-gallery-card-featured {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(212, 244, 65, 0.7);
  background: rgba(212, 244, 65, 0.16);
  color: rgba(246, 251, 218, 0.98);
}

.moko-ws-gallery-empty {
  min-height: 120px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(202, 211, 226, 0.72);
}

.moko-ws-divider {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

.moko-ws-icon-btn {
  width: 24px;
  height: 24px;
  min-height: 24px;
  border-radius: 6px;
}

.moko-ws-icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.moko-ws-panel-dock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.moko-ws-panel-dock.is-collapsed {
  opacity: 0.7;
}

.moko-ws-panel-label {
  font-size: 9px;
  letter-spacing: 0.8px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  margin-right: 2px;
}

.moko-ws-panel-btn {
  width: 22px;
  height: 22px;
  min-height: 22px;
  border-radius: 6px;
}

.moko-ws-panel-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.moko-ws-panel-btn.is-active {
  background: rgba(212, 244, 65, 0.16);
  border-color: rgba(212, 244, 65, 0.5);
  color: rgba(245, 255, 210, 0.98);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.24);
}

.moko-ws-domain-hub {
  position: relative;
}

.moko-ws-domain-hub-btn {
  height: 24px;
  min-height: 24px;
  border-radius: 7px;
  padding: 0 9px;
  gap: 4px;
  font-size: 11px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}

.moko-ws-domain-hub-btn:hover,
.moko-ws-domain-hub.is-open .moko-ws-domain-hub-btn {
  background: rgba(212, 244, 65, 0.14);
  border-color: rgba(212, 244, 65, 0.48);
  color: rgba(245, 255, 210, 0.98);
}

.moko-ws-domain-hub-btn svg {
  flex: 0 0 auto;
}

.moko-ws-domain-hub-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  max-width: min(280px, calc(100vw - 24px));
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(17, 21, 30, 0.96), rgba(11, 14, 20, 0.94));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  z-index: 60;
}

.moko-ws-domain-hub.is-open .moko-ws-domain-hub-menu {
  display: flex;
}

.moko-ws-domain-hub.is-pinned .moko-ws-domain-hub-menu {
  position: fixed;
  right: auto;
  top: 76px;
  left: calc(100vw - 296px);
  z-index: 1000008;
}

.moko-ws-domain-hub-menu.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.moko-ws-domain-hub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: default;
}

.moko-ws-domain-hub.is-pinned .moko-ws-domain-hub-head {
  cursor: grab;
}

.moko-ws-domain-hub-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.moko-ws-domain-hub-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
}

.moko-ws-domain-hub-mini {
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
}

.moko-ws-domain-hub-mini.is-active {
  border-color: rgba(212, 244, 65, 0.5);
  background: rgba(212, 244, 65, 0.16);
  color: rgba(245, 255, 210, 0.98);
}

.moko-ws-domain-hub-domain {
  font-size: 13px;
  font-weight: 700;
  color: rgba(245, 255, 210, 0.98);
  line-height: 1.25;
}

.moko-ws-domain-hub-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.4;
}

.moko-ws-domain-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.moko-ws-domain-hub-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 8px;
}

.moko-ws-domain-hub-item span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.moko-ws-domain-hub-item strong {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95);
}

.moko-ws-domain-hub-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.moko-ws-domain-hub-action {
  height: 24px;
  min-height: 24px;
  border-radius: 7px;
  padding: 0 8px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
}

.moko-ws-domain-hub-action:hover:not([disabled]) {
  border-color: rgba(212, 244, 65, 0.52);
  background: rgba(212, 244, 65, 0.14);
  color: rgba(245, 255, 210, 0.98);
}

.moko-ws-domain-hub-action[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.moko-canvas-tool-panel {
  position: fixed;
  left: -9999px;
  top: -9999px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  background: rgba(42, 42, 44, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  z-index: 1000010;
}

.moko-canvas-tool-panel.is-visible {
  display: flex;
}

.moko-canvas-tool-btn {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 0;
  font-size: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.92);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
}

.moko-canvas-tool-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.moko-canvas-tool-btn svg,
.moko-canvas-tool-btn .moko-canvas-tool-icon-svg {
  display: block;
  margin: 0 auto;
  flex: 0 0 auto;
  pointer-events: none;
}

.moko-canvas-tool-btn.is-active {
  background: rgba(212, 244, 65, 0.18);
  border-color: rgba(212, 244, 65, 0.62);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.25), 0 0 14px rgba(212, 244, 65, 0.25);
  color: rgba(245, 255, 210, 0.98);
}

.moko-canvas-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  background: #0a0c10;
}

.moko-canvas-hidden,
.moko-main-hidden,
.moko-workspace-hidden,
.moko-topbar-hidden,
.moko-chrome-hidden {
  display: none !important;
}

.moko-canvas-tool-icon-svg {
  display: block;
  overflow: visible;
  margin: 0 auto;
}

.moko-pen-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000015;
  pointer-events: none;
  display: none;
}

.moko-pen-preview-overlay.is-visible {
  display: block;
}

.moko-pen-preview-overlay-svg {
  overflow: visible;
}

.moko-canvas-left-rail {
  position: fixed;
  left: 0;
  top: 40px;
  width: min(420px, 38vw);
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 10px 12px;
  border-radius: 0;
  border: none;
  background: rgba(23, 23, 24, 0.94);
  box-shadow: 14px 0 30px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(12px) saturate(78%);
  backdrop-filter: blur(12px) saturate(78%);
  z-index: 24;
  overflow: visible;
  transform: translateX(0);
  transition: transform 180ms ease;
}

.moko-canvas-left-rail.is-resizing {
  transition: none;
  user-select: none;
}

.moko-canvas-left-rail.is-collapsed {
  transform: translateX(-100%);
}

.moko-canvas-left-rail.is-collapsed .moko-canvas-left-rail-resize-handle {
  pointer-events: none;
  opacity: 0;
}

.moko-canvas-left-rail.is-collapsed .moko-canvas-left-rail-scroll {
  opacity: 0;
  pointer-events: none;
}

.moko-canvas-left-rail-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
}

.moko-canvas-left-rail-resize-handle::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease;
}

.moko-canvas-left-rail:hover .moko-canvas-left-rail-resize-handle::after,
.moko-canvas-left-rail.is-resizing .moko-canvas-left-rail-resize-handle::after {
  opacity: 1;
  background: rgba(212, 244, 65, 0.62);
}

.moko-canvas-left-rail-toggle {
  position: absolute;
  right: -20px;
  top: 10px;
  width: 20px;
  height: 44px;
  border-radius: 0 10px 10px 0;
  border: none;
  background: rgba(34, 34, 35, 0.96);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
  backdrop-filter: blur(8px) saturate(112%);
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  padding: 0;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.28);
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.moko-canvas-left-rail-toggle:hover {
  background: rgba(45, 45, 47, 0.98);
  color: rgba(244, 255, 200, 0.98);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.34);
}

.moko-canvas-left-rail.is-collapsed .moko-canvas-left-rail-toggle {
  right: -40px;
}

.moko-canvas-left-rail-toggle svg {
  display: block;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.moko-canvas-left-rail-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moko-canvas-left-rail-tool {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(226, 232, 240, 0.78);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.moko-canvas-left-rail-tool:hover {
  border-color: rgba(212, 244, 65, 0.58);
  color: rgba(245, 255, 210, 0.96);
}

.moko-canvas-left-rail-tool.is-active {
  border-color: rgba(212, 244, 65, 0.62);
  background: rgba(163, 230, 53, 0.16);
  color: rgba(236, 255, 196, 0.98);
}

.moko-canvas-left-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}

.moko-canvas-left-rail-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.moko-canvas-left-rail-scroll.is-scrolling {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}

.moko-canvas-left-rail-scroll.is-scrolling::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.moko-canvas-left-rail-scroll.is-scrolling::-webkit-scrollbar-track {
  background: transparent;
}

.moko-canvas-left-rail-scroll.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.moko-canvas-left-rail-scroll.is-scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.moko-canvas-left-rail-slot {
  display: block;
  padding: 8px 0;
}

.moko-canvas-left-rail-slot + .moko-canvas-left-rail-slot {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.moko-canvas-left-rail-slot.is-hidden {
  display: none;
}

.moko-canvas-left-rail .moko-system-loop-panel,
.moko-canvas-left-rail .moko-canvas-orbit-dock {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  max-height: none;
  z-index: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.moko-canvas-left-rail .moko-system-loop-panel {
  padding: 4px 0;
}

.moko-canvas-left-rail .moko-canvas-orbit-dock {
  padding: 4px 0;
}

.moko-canvas-left-rail .moko-inspector-orbit-panel-wrap,
.moko-canvas-left-rail .moko-orbit-panel-viewer,
.moko-canvas-left-rail .moko-canvas-orbit-dock .moko-inspector-orbit-panel-wrap,
.moko-canvas-left-rail .moko-canvas-orbit-dock .moko-orbit-panel-viewer {
  border: none;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  margin: 0;
}

.moko-canvas-left-rail .moko-inspector-orbit-panel {
  background: transparent;
}

.moko-canvas-layer-panel {
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 4px 0 2px;
  color: rgba(226, 229, 236, 0.94);
}

.moko-canvas-left-rail .moko-canvas-layer-panel {
  padding: 2px 0;
}

.moko-canvas-layer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.moko-canvas-layer-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: rgba(238, 240, 247, 0.95);
}

.moko-canvas-layer-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.moko-canvas-layer-head-ghost {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: rgba(184, 190, 205, 0.68);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-canvas-layer-toggle {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.02);
  color: rgba(208, 214, 226, 0.82);
  font-size: 10px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-canvas-layer-toggle:hover {
  background: rgba(122, 146, 230, 0.14);
  color: rgba(230, 236, 250, 0.96);
}

.moko-canvas-layer-summary {
  font-size: 12px;
  color: rgba(154, 161, 176, 0.7);
  margin-bottom: 6px;
}

.moko-canvas-layer-tree {
  max-height: 320px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.moko-canvas-layer-tree::-webkit-scrollbar {
  width: 6px;
}

.moko-canvas-layer-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.moko-canvas-layer-tree::-webkit-scrollbar-track {
  background: transparent;
}

.moko-canvas-layer-edge-title {
  margin-top: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(168, 174, 190, 0.8);
  text-transform: uppercase;
}

.moko-canvas-layer-edge-tree {
  max-height: 220px;
}

.moko-canvas-layer-row {
  width: 100%;
  min-height: 24px;
  padding: 0 8px 0 4px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(212, 218, 233, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}

.moko-canvas-layer-row:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 242, 252, 0.96);
}

.moko-canvas-layer-row.is-active {
  background: rgba(99, 122, 214, 0.72);
  color: #ffffff;
}

.moko-canvas-layer-edge-row {
  opacity: 0.96;
}

.moko-canvas-layer-row-main {
  min-width: 0;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.moko-canvas-layer-disclosure {
  width: 14px;
  height: 14px;
  border: none;
  background: transparent;
  color: rgba(162, 170, 188, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  flex: 0 0 14px;
}

.moko-canvas-layer-disclosure:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(225, 231, 245, 0.94);
}

.moko-canvas-layer-disclosure:disabled {
  cursor: default;
  opacity: 0.2;
}

.moko-canvas-layer-disclosure-placeholder {
  pointer-events: none;
}

.moko-canvas-layer-row-icon {
  width: 14px;
  height: 14px;
  color: rgba(177, 184, 201, 0.84);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
}

.moko-canvas-layer-row.is-active .moko-canvas-layer-row-icon,
.moko-canvas-layer-row.is-active .moko-canvas-layer-disclosure {
  color: rgba(242, 246, 255, 0.96);
}

.moko-canvas-layer-row-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.moko-canvas-layer-row-type {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(150, 158, 176, 0.74);
  text-transform: lowercase;
}

.moko-canvas-layer-empty {
  border: none;
  border-radius: 6px;
  padding: 8px 4px;
  font-size: 11px;
  color: rgba(160, 168, 186, 0.68);
}

.moko-system-loop-panel {
  position: fixed;
  left: 12px;
  top: 112px;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 132px);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 3201;
  background: rgba(42, 42, 44, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  padding: 10px;
  color: #fff;
}

.moko-system-loop-panel.is-collapsed {
  overflow: hidden;
}

.moko-system-loop-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.moko-system-loop-panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0;
}

.moko-system-loop-panel-toggle {
  height: 24px;
  min-width: 62px;
  padding: 0 8px;
  border-radius: 7px;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  cursor: pointer;
}

.moko-system-loop-panel-toggle:hover {
  background: rgba(212, 244, 65, 0.14);
  color: #d4f441;
}

.moko-system-loop-panel-collapsed-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: 2px;
}

.moko-system-loop-panel-info {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 8px;
}

.moko-system-loop-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.moko-system-loop-filter-btn {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}

.moko-system-loop-filter-btn.is-active {
  border-color: rgba(var(--loop-rgb, 156, 163, 175), 0.56);
  background: rgba(var(--loop-rgb, 156, 163, 175), 0.18);
  color: var(--loop-color, #9ca3af);
}

.moko-system-loop-filter-btn.is-empty {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.46);
  opacity: 0.66;
}

.moko-system-loop-discovery-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 4px 0 8px;
}

.moko-system-loop-discovery-btn,
.moko-system-loop-member-btn {
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.86);
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}

.moko-system-loop-discovery-btn:disabled,
.moko-system-loop-member-btn:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.42);
  cursor: default;
}

.moko-system-loop-focus-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.moko-system-loop-focus-text {
  min-width: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-system-loop-mini-btn {
  height: 22px;
  padding: 0 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}

.moko-system-loop-mini-btn.is-accent {
  border-color: rgba(212, 244, 65, 0.44);
  background: rgba(212, 244, 65, 0.14);
  color: #d4f441;
}

.moko-system-loop-mini-btn:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 255, 255, 0.42);
  cursor: default;
}

.moko-system-loop-clear-focus-btn {
  width: 100%;
  height: 30px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
}

.moko-system-loop-member-box {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(212, 244, 65, 0.22);
  background: rgba(212, 244, 65, 0.07);
}

.moko-system-loop-member-title {
  margin-bottom: 6px;
  font-size: 10px;
  color: rgba(245, 247, 241, 0.78);
}

.moko-system-loop-member-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.moko-system-loop-member-btn {
  height: 26px;
  border-radius: 7px;
  border-color: rgba(212, 244, 65, 0.36);
  color: #d4f441;
}

.moko-system-loop-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  margin-bottom: 0;
  cursor: pointer;
}

.moko-system-loop-row.is-active {
  border-bottom-color: rgba(212, 244, 65, 0.45);
  background: linear-gradient(90deg, rgba(212, 244, 65, 0.2), rgba(212, 244, 65, 0.04));
}

.moko-system-loop-row-left {
  min-width: 0;
}

.moko-system-loop-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.moko-system-loop-code-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 25px;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid rgba(var(--loop-rgb, 156, 163, 175), 0.5);
  background: rgba(var(--loop-rgb, 156, 163, 175), 0.14);
  color: var(--loop-color, #9ca3af);
  font-size: 9px;
  font-weight: 700;
}

.moko-system-loop-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-system-loop-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.moko-system-loop-type-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(var(--loop-rgb, 156, 163, 175), 0.48);
  background: rgba(var(--loop-rgb, 156, 163, 175), 0.14);
  color: var(--loop-color, #9ca3af);
}

.moko-system-loop-sub {
  font-size: 10px;
  opacity: 0.66;
}

.moko-system-loop-row-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

.moko-system-loop-row-btn.is-danger {
  border-color: rgba(239, 68, 68, 0.44);
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
}

.moko-system-loop-confirmed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.moko-system-loop-confirmed-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.moko-system-loop-confirmed-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.48);
}

.moko-system-loop-empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
  padding: 8px 2px;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.moko-system-loop-candidate-wrap {
  margin: 8px 0;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
}

.moko-system-loop-candidate-wrap.is-collapsed {
  margin-bottom: 4px;
}

.moko-system-loop-candidate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.moko-system-loop-candidate-title {
  font-size: 11px;
  font-weight: 700;
  color: #d4f441;
}

.moko-system-loop-candidate-head-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moko-system-loop-candidate-toggle {
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  border: none;
  background: rgba(212, 244, 65, 0.1);
  color: #d4f441;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.moko-system-loop-candidate-toggle:hover {
  background: rgba(212, 244, 65, 0.18);
}

.moko-system-loop-candidate-note {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.58);
}

.moko-system-loop-candidate-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 8px 2px;
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(212, 244, 65, 0.12), rgba(212, 244, 65, 0.02));
}

.moko-system-loop-candidate-left {
  min-width: 0;
}

.moko-system-loop-candidate-name {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-system-loop-candidate-sub {
  margin-top: 3px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.moko-system-loop-discovery-empty {
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.14);
}

.moko-system-loop-discovery-empty-title {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.moko-system-loop-discovery-empty-body {
  font-size: 10px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.moko-system-loop-discovery-empty-hint {
  margin-top: 6px;
  font-size: 10px;
  color: rgba(212, 244, 65, 0.82);
}

.moko-system-loop-zone-status {
  margin-top: 8px;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(0, 0, 0, 0.18);
}

.moko-system-loop-zone-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.moko-system-loop-zone-status-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}

.moko-system-loop-zone-status-coverage {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(212, 244, 65, 0.38);
  background: rgba(212, 244, 65, 0.1);
  color: #d4f441;
  font-size: 10px;
  font-weight: 700;
}

.moko-system-loop-zone-status-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.moko-system-loop-zone-status-metric {
  min-width: 0;
  padding: 6px 7px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

.moko-system-loop-zone-status-metric-value {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.94);
}

.moko-system-loop-zone-status-metric-label {
  margin-top: 3px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-system-loop-zone-status-progress {
  height: 5px;
  margin-bottom: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.moko-system-loop-zone-status-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4f441, #06b6d4);
}

.moko-system-loop-zone-status-empty {
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.56);
}

.moko-system-loop-zone-status-rows {
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}

.moko-system-loop-zone-status-row {
  --zone-border: rgba(148, 163, 184, 0.28);
  --zone-bg: rgba(148, 163, 184, 0.1);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 7px;
  border: 1px solid var(--zone-border);
  background: var(--zone-bg);
}

.moko-system-loop-zone-status-row-text {
  min-width: 0;
}

.moko-system-loop-zone-status-row-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-system-loop-zone-status-row-note {
  margin-top: 2px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-system-loop-zone-status-pill {
  --zone-border: rgba(148, 163, 184, 0.28);
  --zone-color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 48px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--zone-border);
  color: var(--zone-color);
  background: rgba(0, 0, 0, 0.16);
  font-size: 9px;
  font-weight: 700;
}

.moko-system-loop-zone-status-hint {
  margin: 2px 0 8px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.54);
}

.moko-system-loop-zone-status-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.moko-system-loop-zone-status-btn {
  height: 28px;
  border-radius: 7px;
  border-color: rgba(212, 244, 65, 0.42);
  background: rgba(212, 244, 65, 0.11);
  color: #d4f441;
  font-size: 10px;
}

.moko-system-loop-zone-status-btn:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.14);
  color: rgba(255, 255, 255, 0.44);
}

.moko-system-loop-inspector-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.moko-system-loop-inspector-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.moko-system-loop-inspector-type-badge {
  --loop-badge-border: 1px solid rgba(212, 244, 65, 0.5);
  --loop-badge-bg: rgba(212, 244, 65, 0.14);
  --loop-badge-color: #d4f441;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.03em;
  border: var(--loop-badge-border);
  background: var(--loop-badge-bg);
  color: var(--loop-badge-color);
}

.moko-system-loop-inspector-info {
  margin-bottom: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  white-space: pre-wrap;
}

.moko-system-loop-inspector-label {
  margin: 8px 0 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.moko-system-loop-inspector-input,
.moko-system-loop-inspector-select {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(30, 30, 32, 0.96);
  color: #fff;
  padding: 0 10px;
}

.moko-system-loop-inspector-textarea {
  --field-min-height: 78px;
  width: 100%;
  min-height: var(--field-min-height);
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(30, 30, 32, 0.96);
  color: #fff;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
}

.moko-system-loop-inspector-quality-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.moko-system-loop-inspector-quality-value {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.92);
}

.moko-system-loop-inspector-slider {
  width: 100%;
  accent-color: var(--accent, #d4f441);
}

.moko-system-loop-inspector-stats {
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
  font-size: 11px;
  line-height: 1.6;
}

.moko-system-loop-inspector-stats-row + .moko-system-loop-inspector-stats-row {
  margin-top: 2px;
}

.moko-system-loop-inspector-diagnosis {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 244, 65, 0.24);
  background: rgba(212, 244, 65, 0.08);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(245, 247, 241, 0.95);
}

.moko-system-loop-inspector-diagnosis-title {
  margin-bottom: 4px;
  font-weight: 700;
  color: #d4f441;
}

.moko-system-loop-inspector-diagnosis-analogy {
  opacity: 0.9;
}

.moko-system-loop-inspector-diagnosis-type-line {
  margin-top: 6px;
  opacity: 0.96;
}

.moko-system-loop-inspector-diagnosis-strong {
  font-weight: 700;
}

.moko-system-loop-inspector-diagnosis-reason {
  margin-top: 2px;
  opacity: 0.86;
}

.moko-system-loop-inspector-diagnosis-apply {
  --diag-apply-border: 1px solid rgba(212, 244, 65, 0.44);
  --diag-apply-bg: rgba(212, 244, 65, 0.14);
  --diag-apply-color: #d4f441;
  margin-top: 7px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: var(--diag-apply-border);
  background: var(--diag-apply-bg);
  color: var(--diag-apply-color);
  font-size: 10px;
  cursor: pointer;
  font-family: inherit;
}

.moko-system-loop-inspector-diagnosis-suggestions {
  margin: 6px 0 0;
  padding-left: 16px;
  opacity: 0.95;
}

.moko-system-loop-inspector-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.moko-system-loop-inspector-action-btn {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 11px;
}

.moko-system-loop-inspector-action-btn.is-accent {
  border-color: rgba(212, 244, 65, 0.5);
  background: rgba(212, 244, 65, 0.14);
  color: #d4f441;
}

.moko-system-loop-inspector-action-btn:disabled {
  cursor: default;
  opacity: 0.62;
}

.moko-unified-prop-panel {
  position: fixed;
  top: 42px;
  right: 0;
  width: 312px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 42px);
  overflow: auto;
  z-index: 1000004;
  padding: 0 0 20px;
  color: #fff;
  font-family: inherit;
  background: rgba(43, 43, 43, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: -8px 0 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  scrollbar-width: thin;
  scrollbar-color: rgba(162, 162, 162, 0.45) transparent;
}

.moko-unified-prop-panel::-webkit-scrollbar {
  width: 8px;
}

.moko-unified-prop-panel::-webkit-scrollbar-thumb {
  background: rgba(162, 162, 162, 0.45);
  border-radius: 999px;
}

.moko-unified-prop-panel::-webkit-scrollbar-track {
  background: transparent;
}

.moko-unified-inspector-title {
  margin: 0;
  padding: 14px 16px 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(249, 249, 249, 0.96);
}

.moko-unified-inspector-info {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 12px;
  color: rgba(215, 215, 215, 0.76);
}

.moko-unified-inspector-section-title {
  margin: 10px 0 8px;
  padding: 10px 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(242, 242, 242, 0.9);
  text-transform: none;
}

.moko-unified-inspector-model3d-box {
  margin: 0 16px 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 22, 22, 0.46);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  white-space: pre-line;
}

.moko-unified-inspector-label {
  margin: 8px 16px 6px;
  font-size: 11px;
  color: rgba(205, 205, 205, 0.84);
  letter-spacing: 0.01em;
}

.moko-unified-inspector-input,
.moko-unified-inspector-select {
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(59, 59, 59, 0.98);
  color: rgba(248, 248, 248, 0.96);
  padding: 0 10px;
  font-size: 12px;
  outline: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.moko-unified-inspector-input:focus,
.moko-unified-inspector-select:focus {
  border-color: rgba(140, 184, 255, 0.92);
  background: rgba(63, 63, 63, 1);
}

.moko-unified-inspector-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(229,229,229,0.85)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

.moko-unified-inspector-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 16px 6px;
}

.moko-unified-inspector-inline-value {
  font-size: 12px;
  color: rgba(246, 246, 246, 0.95);
}

.moko-unified-inspector-inline-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(59, 59, 59, 0.62);
}

.moko-unified-inspector-inline-color-swatch {
  --moko-inline-swatch-color: #9ca3af;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: var(--moko-inline-swatch-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  flex: 0 0 auto;
}

.moko-unified-inspector-inline-color-swatch.is-mixed {
  background: repeating-linear-gradient(
    135deg,
    rgba(148, 163, 184, 0.95) 0 2px,
    rgba(255, 255, 255, 0.24) 2px 4px
  );
}

.moko-unified-inspector-inline-color-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(232, 232, 232, 0.88);
}

.moko-unified-inspector-slider {
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  accent-color: var(--accent, #d4f441);
  cursor: pointer;
}

.moko-unified-inspector-swatch-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px 10px;
}

.moko-unified-inspector-swatch {
  --swatch-color: #9ca3af;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: var(--swatch-color);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 120ms ease, border-color 120ms ease;
}

.moko-unified-inspector-swatch:hover {
  transform: translateY(-1px);
}

.moko-unified-inspector-swatch.is-transparent {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.9) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, rgba(0, 0, 0, 0) 75%);
  background-size: 8px 8px;
  background-color: rgba(52, 52, 52, 0.96);
  box-shadow: none;
}

.moko-unified-inspector-swatch.is-active {
  border-color: rgba(140, 184, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(140, 184, 255, 0.35);
}

.moko-unified-inspector-btn-row {
  display: flex;
  gap: 8px;
  margin: 0 16px 10px;
}

.moko-unified-inspector-chip-btn {
  flex: 1;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(56, 56, 56, 0.98);
  color: rgba(246, 246, 246, 0.95);
  cursor: pointer;
  font-size: 12px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.moko-unified-inspector-chip-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(63, 63, 63, 1);
}

.moko-unified-inspector-chip-btn.is-active {
  border-color: rgba(140, 184, 255, 0.95);
  background: rgba(140, 184, 255, 0.18);
  color: rgba(220, 236, 255, 0.98);
}

.moko-inspector-orbit-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 16px 8px;
}

.moko-inspector-orbit-controls .moko-unified-inspector-btn-row {
  flex: 1;
  margin: 0;
}

.moko-inspector-orbit-filter {
  width: 128px;
  max-width: 42%;
}

.moko-inspector-orbit-panel-wrap {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #0f141d;
  margin: 0 16px 8px;
}

.moko-inspector-orbit-panel {
  width: 100%;
  height: 188px;
  min-height: 170px;
}

.moko-inspector-orbit-fallback-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: auto;
}

.moko-inspector-orbit-status {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 7;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(15, 20, 29, 0.72);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
}

.moko-inspector-orbit-status[data-state="loading"] {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.4);
}

.moko-inspector-orbit-status[data-state="error"] {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.4);
}

.moko-inspector-orbit-stats {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 16px 4px;
}

.moko-inspector-orbit-selection {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.56);
  margin: 0 16px 8px;
}

.moko-inspector-orbit-actions {
  display: flex;
  gap: 8px;
  margin: 0 16px 10px;
}

.moko-canvas-orbit-dock {
  position: fixed;
  left: 18px;
  top: 320px;
  width: 320px;
  max-height: min(72vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(42, 42, 44, 0.96);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  z-index: 3200;
  display: none;
  pointer-events: auto;
}

.moko-canvas-orbit-dock.is-visible {
  display: block;
}

.moko-canvas-orbit-dock.is-collapsed .moko-canvas-orbit-dock-body {
  display: none;
}

.moko-canvas-orbit-dock.is-collapsed {
  overflow: hidden;
}

.moko-canvas-orbit-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.moko-canvas-orbit-dock-title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.94);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-canvas-orbit-dock-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(15, 23, 42, 0.42);
  color: rgba(226, 232, 240, 0.88);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.moko-canvas-orbit-dock-close:hover {
  background: rgba(212, 244, 65, 0.16);
  color: rgba(233, 255, 189, 0.98);
}

.moko-canvas-orbit-dock-note {
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.58);
}

.moko-canvas-orbit-dock-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.moko-inspector-orbit-overlay-controls {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 6;
  pointer-events: auto;
}

.moko-inspector-orbit-mini-depth-btn {
  height: 22px;
  min-width: 42px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(212, 244, 65, 0.56);
  background: rgba(20, 20, 22, 0.72);
  color: rgba(230, 255, 190, 0.95);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.moko-inspector-orbit-mini-depth-btn:hover {
  border-color: rgba(212, 244, 65, 0.86);
  background: rgba(163, 230, 53, 0.18);
}

.moko-canvas-orbit-dock .moko-inspector-orbit-panel {
  height: clamp(320px, 40vh, 460px);
  min-height: 300px;
}

.moko-canvas-orbit-dock .moko-inspector-orbit-actions {
  margin-top: 0;
}

.moko-canvas-orbit-dock .moko-orbit-panel-viewer,
.moko-canvas-orbit-dock .moko-inspector-orbit-panel-wrap {
  background:
    radial-gradient(circle at 24% 20%, rgba(56, 189, 248, 0.12), transparent 42%),
    radial-gradient(circle at 80% 76%, rgba(168, 85, 247, 0.1), transparent 44%),
    #0a0a0a;
  border-color: rgba(255, 255, 255, 0.14);
}

.moko-unified-inspector-feedback-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 0 16px 8px;
}

.moko-unified-inspector-check-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(58, 58, 58, 0.98);
  cursor: pointer;
}

.moko-unified-inspector-check-input {
  accent-color: var(--accent, #d4f441);
}

.moko-unified-inspector-check-text {
  font-size: 12px;
  color: rgba(246, 246, 246, 0.92);
}

.moko-unified-inspector-select.is-disabled {
  opacity: 0.52;
}

.moko-unified-inspector-delete-btn {
  width: calc(100% - 32px);
  height: 32px;
  margin: 10px 16px 0;
  border-radius: 6px;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-size: 12px;
}

.moko-node-prop-panel {
  position: fixed;
  top: 42px;
  right: 0;
  width: 312px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 42px);
  overflow: auto;
  z-index: 1000004;
  padding: 0 0 20px;
  color: #fff;
  font-family: inherit;
  background: rgba(43, 43, 43, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: -8px 0 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.moko-node-prop-panel--figma {
  background: rgba(45, 45, 47, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 24px rgba(0, 0, 0, 0.32);
}

.moko-node-prop-title {
  margin: 0;
  padding: 14px 16px 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.moko-node-prop-desc {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 12px;
  color: rgba(215, 215, 215, 0.76);
}

.moko-node-prop-label {
  margin: 8px 16px 6px;
  font-size: 11px;
  color: rgba(205, 205, 205, 0.84);
}

.moko-node-prop-input,
.moko-node-prop-select {
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(59, 59, 59, 0.98);
  color: rgba(248, 248, 248, 0.96);
  padding: 0 10px;
  outline: none;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.moko-node-prop-input:focus,
.moko-node-prop-select:focus {
  border-color: rgba(140, 184, 255, 0.92);
  background: rgba(63, 63, 63, 1);
}

.moko-node-prop-slider {
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  accent-color: var(--accent, #d4f441);
}

.moko-node-prop-note {
  margin: 0 16px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.56);
}

.moko-node-prop-swatch-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px 10px;
}

.moko-node-prop-swatch {
  --swatch-color: #9ca3af;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: var(--swatch-color);
  cursor: pointer;
  padding: 0;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.moko-node-prop-swatch.is-transparent {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.9) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 75%, rgba(0, 0, 0, 0) 75%);
  background-size: 8px 8px;
  background-color: rgba(30, 30, 32, 0.96);
  box-shadow: none;
}

.moko-node-prop-swatch.is-active {
  border-color: rgba(140, 184, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(140, 184, 255, 0.35);
  transform: translateY(-1px);
}

.moko-node-prop-chip-row {
  display: flex;
  gap: 8px;
  margin: 0 16px 10px;
}

.moko-node-prop-chip {
  flex: 1;
  height: 30px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(56, 56, 56, 0.98);
  color: rgba(246, 246, 246, 0.95);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.moko-node-prop-chip.is-active {
  border-color: rgba(140, 184, 255, 0.95);
  background: rgba(140, 184, 255, 0.18);
  color: rgba(220, 236, 255, 0.98);
}

.moko-node-prop-summary {
  margin: 0 16px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.54);
}

.moko-node-prop-section {
  margin: 0;
  padding: 8px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.moko-node-prop-section-title {
  margin: 0 16px 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.moko-node-prop-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px 8px;
}

.moko-node-prop-grid-cell {
  min-height: 32px;
}

.moko-node-prop-grid-cell-key {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.58);
}

.moko-node-prop-grid-cell--hint {
  display: flex;
  align-items: flex-end;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.35;
  padding-bottom: 4px;
}

.moko-node-prop-input--compact {
  width: 100%;
  margin: 0;
}

.moko-node-prop-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 16px;
}

.moko-node-prop-btn-close {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(56, 56, 56, 0.98);
  color: rgba(246, 246, 246, 0.95);
}

.moko-node-prop-btn-save {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  color: #0a0c10;
  font-weight: 700;
}

.moko-inline-modal-overlay {
  --inline-modal-z: 1000004;
  position: fixed;
  inset: 0;
  z-index: var(--inline-modal-z);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

.moko-inline-modal-panel {
  --inline-modal-width: 360px;
  width: var(--inline-modal-width);
  max-width: calc(100vw - 24px);
  padding: 14px;
  color: #fff;
  font-family: inherit;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(42, 42, 44, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.moko-inline-modal-title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}

.moko-inline-modal-label {
  margin-bottom: 6px;
  font-size: 11px;
  opacity: 0.72;
}

.moko-inline-modal-input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(30, 30, 32, 0.96);
  color: #fff;
  padding: 0 10px;
}

.moko-inline-modal-select {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(30, 30, 32, 0.96);
  color: #fff;
  padding: 0 10px;
}

.moko-dark-select {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}

.moko-dark-select option {
  background-color: #2a2a2d;
  color: #f3f4f6;
}

.moko-dark-select option:checked,
.moko-dark-select option:hover {
  background: rgba(212, 244, 65, 0.96) !important;
  color: #101414 !important;
}

.moko-inline-modal-input.moko-inline-modal-input--lg-gap {
  margin-bottom: 12px;
}

.moko-inline-modal-input.moko-inline-modal-input--md-gap {
  margin-bottom: 10px;
}

.moko-inline-modal-input.moko-inline-modal-input--sm-gap {
  margin-bottom: 8px;
}

.moko-inline-modal-select.moko-inline-modal-input--lg-gap {
  margin-bottom: 12px;
}

.moko-inline-modal-select.moko-inline-modal-input--md-gap {
  margin-bottom: 10px;
}

.moko-inline-modal-select.moko-inline-modal-input--sm-gap {
  margin-bottom: 8px;
}

.moko-inline-modal-input.is-error {
  border-color: #ef4444;
}

.moko-inline-modal-select.is-disabled {
  opacity: 0.52;
}

.moko-inline-modal-hint {
  margin-bottom: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.moko-inline-modal-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.moko-inline-modal-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.moko-inline-modal-material-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.moko-inline-modal-material-input {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

.moko-inline-modal-hotspot-order-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 10px;
}

.moko-inline-modal-hotspot-order-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
}

.moko-inline-modal-upload-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.moko-inline-modal-material-btn {
  flex-shrink: 0;
}

.moko-inline-modal-upload-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
}

.moko-inline-modal-file {
  display: none;
}

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

.moko-inline-modal-cancel {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #d1d5db;
}

.moko-inline-modal-confirm {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  color: #0a0c10;
  font-weight: 600;
}

.moko-edge-relation-panel {
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.moko-edge-relation-title {
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.75;
}

.moko-edge-relation-pair {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-edge-relation-label {
  margin-bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.moko-edge-relation-label--top {
  margin-top: 10px;
}

.moko-edge-relation-feedback-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.moko-edge-relation-feedback-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(30, 30, 32, 0.96);
  cursor: pointer;
}

.moko-edge-relation-feedback-check-input {
  accent-color: var(--accent, #d4f441);
}

.moko-edge-relation-feedback-check-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.88);
}

.moko-edge-relation-score {
  margin: 10px 0 8px;
}

.moko-edge-relation-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.moko-edge-relation-score-head--top {
  margin-top: 10px;
}

.moko-edge-relation-score-value {
  color: rgba(255, 255, 255, 0.88);
}

.moko-edge-relation-score-slider {
  width: 100%;
  accent-color: var(--accent, #d4f441);
  cursor: ew-resize;
}

.moko-edge-relation-score-slider--tight {
  margin-bottom: 2px;
}

.moko-edge-relation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.moko-edge-relation-select-tight {
  margin-bottom: 2px;
}

.moko-edge-relation-hint {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.moko-edge-relation-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}

.moko-edge-relation-actions-left,
.moko-edge-relation-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.moko-edge-relation-delete {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

.moko-thinking-modal-panel {
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.moko-thinking-modal-fields {
  display: grid;
  gap: 8px;
}

.moko-thinking-modal-field-label {
  margin-bottom: 4px;
  font-size: 11px;
  opacity: 0.72;
}

.moko-thinking-modal-hint {
  margin-top: 8px;
  margin-bottom: 0;
}

.moko-thinking-modal-actions {
  margin-top: 12px;
}

.moko-canvas-confirm-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.moko-canvas-confirm-title.is-tight {
  margin-bottom: 6px;
}

.moko-canvas-confirm-message {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.moko-canvas-confirm-summary {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.moko-canvas-confirm-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

.moko-canvas-confirm-list {
  margin-top: 10px;
  max-height: 180px;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.16);
}

.moko-canvas-confirm-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.moko-canvas-confirm-list-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-canvas-confirm-badge {
  --badge-rgb: 255, 255, 255;
  --badge-color: #fff;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 9px;
  border: 1px solid rgba(var(--badge-rgb), 0.5);
  background: rgba(var(--badge-rgb), 0.14);
  color: var(--badge-color);
}

.moko-canvas-confirm-more {
  padding: 6px 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.moko-canvas-confirm-actions {
  margin-top: 14px;
}

.moko-canvas-confirm-cancel {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
}

.moko-canvas-confirm-confirm {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border-color: rgba(212, 244, 65, 0.44);
  background: rgba(212, 244, 65, 0.14);
  color: #d4f441;
}

.moko-canvas-confirm-confirm.is-danger {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
}

.moko-canvas-input-message {
  margin-bottom: 10px;
  line-height: 1.55;
}

.moko-canvas-input-field {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.2);
  font-size: 13px;
  outline: none;
}

.moko-system-loop-create-type-wrap {
  margin-top: 10px;
}

.moko-system-loop-create-type-label {
  margin-bottom: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.moko-system-loop-guard-menu {
  position: fixed;
  z-index: 1000013;
  min-width: 152px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(36, 36, 38, 0.98);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
  color: #fff;
}

.moko-system-loop-guard-item {
  width: 100%;
  height: 26px;
  text-align: left;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

.moko-system-loop-guard-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.moko-system-loop-guard-item.is-active {
  color: #d4f441;
}

.moko-system-loop-guard-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 2px;
}

.moko-system-loop-boundary-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000004;
  pointer-events: none;
  display: none;
  max-width: 280px;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid rgba(212, 244, 65, 0.34);
  background: rgba(20, 20, 22, 0.94);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
  color: #d4f441;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}

.moko-system-loop-boundary-tooltip.is-visible {
  display: block;
}

.moko-system-loop-focus-halo {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 14;
  border: 1.5px dashed rgba(212, 244, 65, 0.92);
  border-radius: 18px;
  background: rgba(212, 244, 65, 0.035);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.22), 0 0 24px rgba(212, 244, 65, 0.14), inset 0 0 24px rgba(212, 244, 65, 0.06);
}

.moko-system-loop-focus-halo.is-visible {
  display: block;
}

.moko-system-loop-focus-halo-label {
  position: absolute;
  left: 10px;
  top: -28px;
  height: 22px;
  max-width: 260px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(212, 244, 65, 0.42);
  background: rgba(38, 40, 36, 0.9);
  color: #d4f441;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-system-loop-candidate-preview {
  --loop-rgb: 212, 244, 65;
  --loop-color: #d4f441;
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 15;
  border: 1.5px dashed rgba(var(--loop-rgb), 0.72);
  border-radius: 18px;
  background: rgba(var(--loop-rgb), 0.025);
  box-shadow: 0 0 0 1px rgba(var(--loop-rgb), 0.18), 0 0 20px rgba(var(--loop-rgb), 0.12), inset 0 0 20px rgba(var(--loop-rgb), 0.05);
}

.moko-system-loop-candidate-preview.is-visible {
  display: none !important;
}

.moko-system-loop-candidate-preview-label {
  position: absolute;
  left: 10px;
  top: -28px;
  height: 22px;
  max-width: 280px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid rgba(var(--loop-rgb), 0.34);
  background: rgba(38, 40, 36, 0.88);
  color: var(--loop-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moko-ai-draft-inspector {
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 244, 65, 0.22);
  background: rgba(212, 244, 65, 0.08);
}

.moko-ai-draft-inspector-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.moko-ai-draft-inspector-title {
  font-size: 12px;
  color: #d4f441;
}

.moko-ai-draft-inspector-status {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.58);
}

.moko-ai-draft-inspector-subtitle {
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.moko-ai-draft-inspector-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.moko-ai-draft-inspector-badge {
  font-size: 10px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.86);
}

.moko-ai-draft-inspector-block {
  margin-top: 9px;
}

.moko-ai-draft-inspector-heading {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.moko-ai-draft-inspector-row {
  margin-top: 5px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.moko-ai-draft-inspector-row.has-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.moko-ai-draft-inspector-text {
  min-width: 0;
}

.moko-ai-draft-inspector-primary {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.moko-ai-draft-inspector-secondary {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.58);
}

.moko-ai-draft-inspector-action {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border-color: rgba(212, 244, 65, 0.38);
  background: rgba(212, 244, 65, 0.12);
  color: #d4f441;
  font-size: 10px;
}

.x6-widget-dnd {
  z-index: 30000 !important;
}

.moko-floating-palette {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 320px;
  margin: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  max-height: 480px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(18, 18, 24, 0.95);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease-out;
  opacity: 0;
  pointer-events: none;
}

.moko-floating-palette.is-open {
  opacity: 1;
  pointer-events: auto;
}

.moko-floating-palette-search {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.moko-floating-palette-input-wrap {
  width: 100%;
  position: relative;
}

.moko-floating-palette-search-icon {
  position: absolute;
  left: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.moko-floating-palette-input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.moko-floating-palette-create-bar {
  display: none;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.moko-floating-palette-create-bar.is-visible {
  display: block;
}

.moko-floating-palette-create-btn {
  width: 100%;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(var(--accent-rgb, 212, 244, 65), 0.3);
  background: rgba(var(--accent-rgb, 212, 244, 65), 0.08);
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.2s;
}

.moko-floating-palette-create-btn:hover {
  background: rgba(var(--accent-rgb, 212, 244, 65), 0.14);
  border-color: rgba(var(--accent-rgb, 212, 244, 65), 0.44);
}

.moko-floating-palette-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.moko-floating-palette-foot {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.moko-floating-palette-kbd {
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.moko-floating-palette-status {
  --status-color: rgba(255, 255, 255, 0.3);
  padding: 20px;
  color: var(--status-color);
  font-size: 12px;
}

.moko-floating-palette-section-title {
  padding: 4px 16px 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  font-family: var(--font-mono);
}

.moko-palette-item {
  margin: 0 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: grab;
  border-left: 2px solid var(--palette-border-left, rgba(255, 255, 255, 0.28));
  border: 1px solid var(--palette-border, rgba(255, 255, 255, 0.16));
  background: linear-gradient(135deg, var(--palette-bg-tint, rgba(255, 255, 255, 0.12)) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow: 0 0 14px var(--palette-shadow, rgba(255, 255, 255, 0.12));
}

.moko-palette-item:active {
  cursor: grabbing;
}

.moko-palette-item-icon {
  width: 32px;
  height: 32px;
  margin-top: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--palette-icon-color, #fff);
  background: linear-gradient(145deg, var(--palette-icon-bg, rgba(255, 255, 255, 0.28)) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid var(--palette-icon-border, rgba(255, 255, 255, 0.24));
  box-shadow: 0 0 10px var(--palette-icon-shadow, rgba(255, 255, 255, 0.18));
}

.moko-palette-item-body {
  pointer-events: none;
}

.moko-canvas-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.moko-canvas-modal {
  width: 400px;
  max-width: 95vw;
  padding: 28px 32px;
}

.moko-canvas-modal.moko-canvas-modal--ai {
  width: 420px;
  max-width: 90vw;
}

.moko-canvas-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.moko-canvas-modal-field {
  margin-top: 6px;
}

.moko-canvas-modal-field-name {
  margin-bottom: 16px;
}

.moko-canvas-modal-field-command {
  margin-bottom: 20px;
}

.moko-canvas-modal-domain-wrap {
  position: relative;
  margin: 6px 0 24px;
}

.moko-domain-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.moko-domain-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: var(--moko-focus-ring);
}

.moko-domain-selected-icon {
  padding-left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
}

.moko-domain-selected-icon.is-selected {
  opacity: 1;
}

.moko-domain-search-input {
  flex: 1;
  padding: 12px 14px 12px 10px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}

.moko-domain-toggle {
  padding: 0 12px;
  cursor: pointer;
  opacity: 0.5;
}

.moko-domain-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #1a1a1e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10001;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.moko-domain-dropdown.is-open {
  display: block;
}

.moko-domain-item {
  padding: 10px 14px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.moko-domain-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.moko-domain-item.moko-domain-item-empty {
  color: rgba(255, 255, 255, 0.5);
}

.moko-domain-item.moko-domain-item--center {
  justify-content: center;
}

.moko-domain-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

.moko-domain-item-icon.moko-domain-item-icon--muted {
  opacity: 0.5;
}

.moko-text-style-panel {
  min-width: 220px;
  padding: 10px;
}

.moko-text-style-title {
  margin-bottom: 8px;
}

.moko-text-style-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.moko-text-style-range {
  flex: 1;
  accent-color: var(--accent, #d4f441);
  cursor: ew-resize;
}

.moko-text-style-value {
  width: 44px;
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
}

.moko-text-style-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.moko-inline-text-editor {
  position: fixed;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #f3f4f6;
  font-weight: 500;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-wrap;
  overflow: hidden;
  outline: none;
  caret-color: #f3f4f6;
  z-index: 1000030;
  box-sizing: border-box;
}

.moko-html-node-card {
  --moko-card-opacity: 1;
  --moko-card-alpha: 0.82;
  --moko-card-alpha-mid: 0.8;
  --moko-card-alpha-end: 0.84;
  --moko-card-border-width: 1.15px;
  --moko-card-border-color: rgba(255, 255, 255, 0.48);
  --moko-card-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  --moko-card-global-glow-a: rgba(255, 255, 255, 0.18);
  --moko-card-global-glow-b: rgba(255, 255, 255, 0.1);
  --moko-card-left-glow-a: rgba(255, 255, 255, 0.2);
  --moko-card-left-glow-b: rgba(255, 255, 255, 0.12);
  --moko-card-icon-bg: rgba(255, 255, 255, 0.32);
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: stretch;
  padding: 8px 12px;
  box-sizing: border-box;
  gap: 10px;
  color: #fff;
  cursor: pointer;
  pointer-events: none;
  opacity: var(--moko-card-opacity);
  border-radius: 11px;
  background: linear-gradient(135deg,
      rgba(72, 72, 76, var(--moko-card-alpha)) 0%,
      rgba(52, 52, 56, var(--moko-card-alpha-mid)) 38%,
      rgba(36, 36, 38, var(--moko-card-alpha-end)) 100%);
  border: var(--moko-card-border-width) solid var(--moko-card-border-color);
  box-shadow: var(--moko-card-shadow);
}

.moko-html-node-card-global-glow {
  position: absolute;
  left: -8px;
  top: -8px;
  right: -8px;
  bottom: -8px;
  z-index: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
      var(--moko-card-global-glow-a) 0%,
      var(--moko-card-global-glow-b) 52%,
      rgba(0, 0, 0, 0) 78%);
  filter: blur(8px);
}

.moko-html-node-card-left-glow {
  position: absolute;
  left: -10px;
  top: 50%;
  width: 82px;
  height: 82px;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%,
      var(--moko-card-left-glow-a) 0%,
      var(--moko-card-left-glow-b) 45%,
      rgba(0, 0, 0, 0) 76%);
  filter: blur(6px);
}

.moko-html-node-card.is-dimmed .moko-html-node-card-global-glow,
.moko-html-node-card.is-dimmed .moko-html-node-card-left-glow {
  opacity: 0.15;
}

.moko-html-node-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 2px;
  box-sizing: border-box;
  pointer-events: auto;
}

.moko-html-node-card-icon {
  width: 36px;
  height: 36px;
  margin-left: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  box-shadow: none;
  background: linear-gradient(145deg, var(--moko-card-icon-bg) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: var(--moko-card-border-width) solid var(--moko-card-border-color);
}

.moko-html-node-card-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.moko-html-node-card.has-subtitle .moko-html-node-card-text {
  gap: 2px;
}

.moko-html-node-card-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.16;
}

.moko-html-node-card-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.08;
  opacity: 0.68;
  letter-spacing: 0.02em;
}

.moko-node-dimension-badge {
  position: absolute;
  right: 7px;
  top: -9px;
  z-index: 3;
  height: 18px;
  max-width: 96px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 7px;
  border-radius: 9px;
  border: 1px solid rgba(212, 244, 65, 0.56);
  background: rgba(28, 31, 24, 0.96);
  color: #d4f441;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.moko-link-node-wrap {
  --moko-link-node-opacity: 1;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  pointer-events: auto;
  opacity: var(--moko-link-node-opacity);
}

.moko-link-node-frame {
  --moko-link-border-width: 1.5px;
  --moko-link-border-color: rgba(255, 255, 255, 0.84);
  --moko-link-fill: rgba(42, 42, 44, 0.96);
  --moko-link-frame-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: auto;
  box-sizing: border-box;
  border-radius: 12px;
  border: var(--moko-link-border-width) solid var(--moko-link-border-color);
  background: linear-gradient(160deg, var(--moko-link-fill) 0%, rgba(52, 52, 56, 0.96) 52%, rgba(34, 34, 36, 0.98) 100%);
  box-shadow: var(--moko-link-frame-shadow);
}

.moko-link-node-frame.is-empty {
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.moko-link-node-iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  background: #1b1b1d;
  pointer-events: none;
}

.moko-link-node-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.78);
  color: rgba(226, 232, 240, 0.92);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
}

.moko-link-node-loading.is-hidden {
  display: none;
}

.moko-link-node-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  background: rgba(13, 18, 28, 0.8);
  color: rgba(226, 232, 240, 0.9);
  z-index: 4;
}

.moko-link-node-fallback.is-visible {
  display: flex;
}

.moko-link-node-fallback-text {
  font-size: 12px;
  line-height: 1.45;
}

.moko-link-node-fallback-btn {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.84);
  color: rgba(226, 232, 240, 0.94);
  font-size: 12px;
  cursor: pointer;
}

.moko-link-node-fallback-btn:hover {
  border-color: rgba(212, 244, 65, 0.72);
  color: rgba(244, 255, 200, 0.98);
}

.moko-link-node-fallback-btn.is-secondary {
  border-color: rgba(96, 165, 250, 0.52);
  color: rgba(191, 219, 254, 0.96);
}

.moko-link-node-fallback-btn.is-secondary:hover {
  border-color: rgba(59, 130, 246, 0.78);
  color: rgba(219, 234, 254, 0.98);
}

.moko-link-node-remove {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(9, 14, 24, 0.82);
  color: rgba(226, 232, 240, 0.92);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.moko-link-node-remove:hover {
  border-color: rgba(248, 113, 113, 0.78);
  color: rgba(254, 202, 202, 0.98);
  background: rgba(69, 10, 10, 0.82);
}

.moko-link-node-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(252, 165, 165, 0.92);
  background: rgba(127, 29, 29, 0.2);
}

.moko-link-node-title {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  max-width: calc(100% - 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  cursor: text;
}

.moko-model3d-node {
  --moko-model3d-opacity: 1;
  --moko-model3d-border-width: 1px;
  --moko-model3d-border-color: rgba(148, 163, 184, 0.32);
  --moko-model3d-bg: transparent;
  --moko-model3d-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  border: var(--moko-model3d-border-width) solid var(--moko-model3d-border-color);
  background: transparent;
  overflow: hidden;
  opacity: var(--moko-model3d-opacity);
  box-shadow: var(--moko-model3d-shadow);
  display: flex;
  flex-direction: column;
}

.moko-model3d-node-header {
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.2);
  user-select: none;
}

.moko-model3d-node-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-model3d-node-format {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(203, 213, 225, 0.84);
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(71, 85, 105, 0.2);
}

.moko-model3d-node-viewer {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  background: transparent;
  overflow: hidden;
}

.moko-model3d-node-model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

.moko-model3d-node-three-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.moko-model3d-node-three-canvas-el {
  width: 100%;
  height: 100%;
  display: block;
}

.moko-model3d-node.is-sleeping .moko-model3d-node-model-viewer,
.moko-model3d-node.is-sleeping .moko-model3d-node-three-canvas,
.moko-model3d-node.is-sleeping .moko-model3d-node-status {
  display: none;
}

.moko-model3d-node-sleep-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: calc(100% - 24px);
  padding: 6px 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: rgba(226, 232, 240, 0.95);
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  z-index: 6;
}

.moko-model3d-node.is-sleeping .moko-model3d-node-sleep-hint {
  display: inline-flex;
}

.moko-model3d-node-hotspots {
  position: absolute;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 4;
  pointer-events: auto;
}

.moko-model3d-node-hotspot-chip {
  border: 1px solid rgba(125, 211, 252, 0.46);
  border-radius: 999px;
  background: rgba(8, 47, 73, 0.64);
  color: rgba(224, 242, 254, 0.95);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  height: 20px;
  max-width: 120px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.moko-model3d-node-hotspot-chip:hover {
  border-color: rgba(56, 189, 248, 0.86);
  background: rgba(2, 132, 199, 0.3);
}

.moko-model3d-node-hotspot-chip.is-active {
  border-color: rgba(34, 197, 94, 0.88);
  background: rgba(22, 101, 52, 0.46);
  color: rgba(220, 252, 231, 0.98);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.28), 0 0 10px rgba(34, 197, 94, 0.26);
}

.moko-model3d-node-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.78);
  color: rgba(226, 232, 240, 0.92);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  z-index: 5;
}

.moko-model3d-node-status.is-hidden {
  display: none;
}

.moko-model3d-node-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
  box-sizing: border-box;
  color: rgba(226, 232, 240, 0.78);
  font-size: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.18), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(168, 85, 247, 0.16), transparent 45%);
}

.moko-orbit-panel-node {
  background: transparent;
}

.moko-orbit-panel-head {
  height: 30px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.2);
  user-select: none;
}

.moko-orbit-panel-title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moko-orbit-panel-depth-row {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.moko-orbit-panel-depth-btn {
  min-width: 28px;
  height: 20px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.42);
  color: rgba(203, 213, 225, 0.92);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
}

.moko-orbit-panel-depth-btn:hover {
  border-color: rgba(148, 163, 184, 0.72);
  background: rgba(51, 65, 85, 0.56);
}

.moko-orbit-panel-depth-btn.is-active {
  border-color: rgba(212, 244, 65, 0.88);
  background: rgba(163, 230, 53, 0.2);
  color: rgba(230, 255, 190, 0.98);
}

.moko-orbit-panel-viewer {
  background:
    radial-gradient(circle at 24% 20%, rgba(56, 189, 248, 0.12), transparent 42%),
    radial-gradient(circle at 80% 76%, rgba(168, 85, 247, 0.1), transparent 44%),
    #0c1424;
}

.moko-orbit-panel-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.moko-orbit-panel-status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.8);
  color: rgba(226, 232, 240, 0.92);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
}

.moko-orbit-panel-status[data-state="ready"] {
  display: none;
}

.moko-orbit-panel-meta {
  position: absolute;
  left: 8px;
  bottom: 8px;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.65);
  color: rgba(203, 213, 225, 0.9);
  font-size: 10px;
  line-height: 1.2;
  pointer-events: none;
  z-index: 2;
}

/* Figma-like multi-select visual for 2D canvas */
.x6-widget-rubberband {
  background-color: rgba(212, 244, 65, 0.035) !important;
  border: 1px solid rgba(212, 244, 65, 0.42) !important;
}

.x6-widget-selection-box {
  border: 1px solid rgba(212, 244, 65, 0.52) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.12), 0 0 10px rgba(212, 244, 65, 0.1) !important;
  pointer-events: none !important;
}

.x6-widget-selection-inner {
  background: transparent !important;
  border-radius: 6px !important;
  pointer-events: none !important;
}

.moko-multi-select-bounds {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 25;
  border: 1.6px solid rgba(212, 244, 65, 0.95);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.25), 0 0 14px rgba(155, 234, 77, 0.22);
}

.moko-multi-select-bounds.is-visible {
  display: block;
}

.moko-multi-select-bounds .moko-multi-select-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1b1b1b;
  border: 1.6px solid rgba(212, 244, 65, 0.96);
  box-shadow: 0 0 8px rgba(155, 234, 77, 0.45);
  pointer-events: auto;
}

.moko-multi-select-bounds .moko-multi-select-handle.tl {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}

.moko-multi-select-bounds .moko-multi-select-handle.tr {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}

.moko-multi-select-bounds .moko-multi-select-handle.bl {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}

.moko-multi-select-bounds .moko-multi-select-handle.br {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

.moko-multi-select-bounds .moko-multi-select-handle.top,
.moko-multi-select-bounds .moko-multi-select-handle.bottom {
  left: 50%;
  width: 10px;
  height: 6px;
  margin-left: -5px;
  border-radius: 3px;
  cursor: ns-resize;
}

.moko-multi-select-bounds .moko-multi-select-handle.top {
  top: -4px;
}

.moko-multi-select-bounds .moko-multi-select-handle.bottom {
  bottom: -4px;
}

.moko-multi-select-bounds .moko-multi-select-handle.left,
.moko-multi-select-bounds .moko-multi-select-handle.right {
  top: 50%;
  width: 6px;
  height: 10px;
  margin-top: -5px;
  border-radius: 3px;
  cursor: ew-resize;
}

.moko-multi-select-bounds .moko-multi-select-handle.left {
  left: -4px;
}

.moko-multi-select-bounds .moko-multi-select-handle.right {
  right: -4px;
}

/* Dense-canvas drag optimization: keep flow lines animated during pan/zoom for visual continuity */

#graph2DContainer.moko-canvas-motion-lite .x6-edge-label,
#graph2DContainer.moko-canvas-motion-lite .moko-system-loop-focus-halo,
#graph2DContainer.moko-canvas-motion-lite .moko-system-loop-candidate-preview,
#graph2DContainer.moko-canvas-motion-lite .moko-multi-select-bounds {
  opacity: 0 !important;
  pointer-events: none !important;
}

#graph2DContainer.moko-canvas-motion-lite .x6-node *,
#graph2DContainer.moko-canvas-motion-lite .x6-edge * {
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

#graph2DContainer.moko-canvas-motion-lite .x6-graph-grid {
  opacity: 0.45;
}

#graph2DContainer.moko-canvas-motion-lite .x6-graph-background {
  /* Keep base canvas floor stable while panning; only lighten grid layer. */
  opacity: 1 !important;
  background-color: #1B1B1B !important;
}

/* Normalize transform resize handles: avoid opaque square artifact */
.x6-widget-transform .x6-widget-transform-resizer,
.x6-widget-transform .x6-widget-transform-resize,
.x6-widget-transform .x6-widget-transform-handler,
.x6-widget-transform [class*="resizer"] {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(212, 244, 65, 0.9) !important;
  background: rgba(44, 44, 46, 0.92) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) !important;
}

.moko-2d-context-menu {
  position: fixed;
  width: min(304px, calc(100vw - 16px));
  min-width: 248px;
  max-width: 304px;
  padding: 6px;
  z-index: 1000020;
  border-radius: var(--moko-tier-radius);
  border: 1px solid var(--moko-tier-border);
  background: var(--moko-tier-bg);
  box-shadow: var(--moko-tier-shadow);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.moko-2d-context-menu-header {
  margin-bottom: 4px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.01em;
}

.moko-2d-context-menu-item {
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.moko-2d-context-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.moko-2d-context-menu-item:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.moko-2d-context-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.08);
}

.moko-2d-context-menu-item-left {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  flex: 1 1 auto;
}

.moko-2d-context-menu-item-icon {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.66);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.moko-2d-context-menu-item-text {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}

.moko-2d-context-menu-item-zh {
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  line-height: 1.3;
}

.moko-2d-context-menu-item-en {
  display: none;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  letter-spacing: 0.01em;
}

.moko-2d-context-menu-item-hint {
  flex: 0 1 42%;
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.moko-canvas-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.moko-canvas-modal-actions .moko-btn {
  min-width: 88px;
}

.trb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
}

.trb-btn:hover {
  background: rgba(40, 40, 46, 0.95);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── "我的" 系列面板统一基线 ── */
:root {
  --moko-tier-bg: rgba(12, 12, 13, 0.97);
  --moko-tier-border: rgba(255, 255, 255, 0.08);
  --moko-tier-shadow: 0 20px 44px rgba(0, 0, 0, 0.68);
  --moko-tier-backdrop: blur(24px) saturate(1);
  --moko-tier-radius: 14px;
  --moko-tier-row-gap: 12px;
  --moko-tier-row-px: 16px;
  --moko-tier-label-size: 14px;
  --moko-tier-icon-size: 18px;
  --my-panel-right: 16px;
  --my-panel-width: calc(304px * 2 / 3);
  --my-panel-gap: 8px;
  --my-panel-stack-right: calc(var(--my-panel-right) + var(--my-panel-width) + var(--my-panel-gap));
}

.my-panel-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.3);
  display: none;
}

.my-panel-backdrop.is-open {
  display: block;
}

.my-panel {
  position: fixed;
  top: 44px;
  right: var(--my-panel-right);
  width: var(--my-panel-width);
  max-width: calc(100vw - 24px);
  max-height: 78vh;
  z-index: 91;
  background: var(--moko-tier-bg);
  backdrop-filter: var(--moko-tier-backdrop);
  -webkit-backdrop-filter: var(--moko-tier-backdrop);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  box-shadow: var(--moko-tier-shadow);
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: fadeInDropdown 0.15s ease-out;
}

.my-panel.is-open {
  display: flex;
}

.my-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  letter-spacing: 0.01em;
}

.my-panel-body {
  overflow-y: auto;
  flex: 1;
}

/* ── My Menu ── */
.my-menu {
  padding: 6px 0;
}

/* 一级「我的」面板：图标/字体缩小 1/4（仅作用于根面板） */
.my-menu.my-menu--root {
  --my-root-scale: 0.75;
  --my-root-icon-size: calc(var(--moko-tier-icon-size) * var(--my-root-scale));
  --my-root-label-size: calc(var(--moko-tier-label-size) * var(--my-root-scale));
  --my-root-arrow-size: 11px;
}

.my-menu-section {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.my-menu-section:last-of-type {
  border-bottom: none;
}

.my-menu-item {
  display: flex;
  align-items: center;
  gap: var(--moko-tier-row-gap);
  padding: 10px var(--moko-tier-row-px);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  min-height: 40px;
}

.my-menu-item:hover {
  background: rgba(255, 255, 255, 0.065);
}

.my-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--moko-tier-icon-size);
  height: var(--moko-tier-icon-size);
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.58);
}

.my-menu-icon svg {
  width: var(--moko-tier-icon-size);
  height: var(--moko-tier-icon-size);
}

.my-menu.my-menu--root .my-menu-icon {
  width: var(--my-root-icon-size);
  height: var(--my-root-icon-size);
}

.my-menu.my-menu--root .my-menu-icon svg {
  width: var(--my-root-icon-size);
  height: var(--my-root-icon-size);
}

.my-menu-icon.is-accent-lime {
  color: #D4F441;
}

.my-menu-icon.is-accent-cyan {
  color: #06B6D4;
}

.my-menu-label {
  flex: 1;
  font-size: var(--moko-tier-label-size);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.87);
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.my-menu.my-menu--root .my-menu-label {
  font-size: var(--my-root-label-size);
}

.my-menu-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.34);
  flex-shrink: 0;
}

.my-menu.my-menu--root .my-menu-arrow {
  width: var(--my-root-arrow-size);
  height: var(--my-root-arrow-size);
}

.my-menu.my-menu--root .my-menu-arrow svg {
  width: calc(var(--my-root-arrow-size) - 2px);
  height: calc(var(--my-root-arrow-size) - 2px);
}

.my-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.015);
}

.my-menu-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(212, 244, 65, 0.15);
  color: #D4F441;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.my-menu.my-menu--root .my-menu-user-avatar {
  width: calc(30px * 0.75);
  height: calc(30px * 0.75);
  font-size: 9px;
}

.my-menu-user-info {
  flex: 1;
  min-width: 0;
}

.my-menu-user-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.25;
}

.my-menu.my-menu--root .my-menu-user-name {
  font-size: calc(14px * 0.75);
}

.my-menu-user-email {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-menu.my-menu--root .my-menu-user-email {
  font-size: 9px;
}

/* ── 二级弹层：快捷键 / 全部标签 ── */
.shortcuts-panel {
  display: none;
  position: fixed;
  top: 44px;
  right: var(--my-panel-stack-right);
  width: 304px;
  max-width: calc(100vw - 24px);
  max-height: 78vh;
  overflow-y: auto;
  z-index: 92;
  background: var(--moko-tier-bg);
  backdrop-filter: var(--moko-tier-backdrop);
  -webkit-backdrop-filter: var(--moko-tier-backdrop);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  box-shadow: var(--moko-tier-shadow);
  padding: 0;
  animation: fadeInDropdown 0.15s ease-out;
}

.shortcuts-panel.is-open {
  display: block;
}

.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sc-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc-close:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
}

.sc-section {
  padding: 8px 0 4px;
}

.sc-section-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 2px var(--moko-tier-row-px) 6px;
}

.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--moko-tier-row-px);
  gap: 10px;
  min-height: 38px;
}

.sc-row:hover {
  background: rgba(255, 255, 255, 0.065);
}

.sc-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sc-keys {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.sc-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  font-family: -apple-system, system-ui, sans-serif;
}

.all-tags-panel {
  display: none;
  position: fixed;
  top: 44px;
  right: var(--my-panel-stack-right);
  width: 304px;
  max-width: calc(100vw - 24px);
  max-height: 78vh;
  overflow-y: auto;
  z-index: 92;
  background: var(--moko-tier-bg);
  backdrop-filter: var(--moko-tier-backdrop);
  -webkit-backdrop-filter: var(--moko-tier-backdrop);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  box-shadow: var(--moko-tier-shadow);
  padding: 0;
  animation: fadeInDropdown 0.15s ease-out;
}

.all-tags-panel.is-open {
  display: block;
}

.atp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.atp-list {
  padding: 6px 0;
}

.atp-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px var(--moko-tier-row-px);
  cursor: pointer;
  transition: background 0.12s;
  min-height: 38px;
}

.atp-item:hover {
  background: rgba(255, 255, 255, 0.065);
}

.atp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.atp-leading-icon {
  width: var(--moko-tier-icon-size);
  height: var(--moko-tier-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.56);
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.atp-label {
  flex: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atp-count {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  flex-shrink: 0;
}

.atp-arrow {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.34);
  flex-shrink: 0;
}

.atp-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
  text-align: center;
}

.atp-footer {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.atp-new-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.atp-new-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

.atp-section-title {
  padding: 10px var(--moko-tier-row-px) 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.44);
}

.atp-back-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.46);
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.atp-back-btn:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
}

.my-subpanel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.my-subpanel-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
}

.my-subpanel-back {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.my-subpanel-back:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.08);
}

.my-account-panel {
  width: 304px;
  max-height: 80vh;
  padding: 0;
}

.my-account-body {
  padding: 12px 14px;
  overflow-y: auto;
  max-height: calc(80vh - 46px);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.my-account-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.my-account-upload-btn {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.my-account-block {
  margin-bottom: 13px;
}

.my-account-block:last-child {
  margin-bottom: 0;
}

.my-account-section-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
  margin-bottom: 7px;
}

.my-account-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.my-account-input:focus {
  border-color: rgba(212, 244, 65, 0.45);
}

.my-account-input+.my-account-input {
  margin-top: 7px;
}

.my-account-actions {
  margin-top: 7px;
}

.my-account-action-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(212, 244, 65, 0.13);
  color: #D4F441;
  border: 1px solid rgba(212, 244, 65, 0.3);
  cursor: pointer;
  font-family: inherit;
}

.my-account-msg {
  font-size: 11px;
  margin-left: 7px;
  display: none;
}

.my-account-divider {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.my-account-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.my-account-share-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.my-account-share-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 3px;
  line-height: 1.4;
}

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

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

.my-account-switch-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: .2s;
}

.my-account-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  transition: .2s;
}

@media (max-width: 1180px) {
  .shortcuts-panel,
  .all-tags-panel,
  .floating-mem-panel {
    right: 16px;
    top: 52px;
    max-height: calc(100vh - 70px);
  }
}

/* ── Chat Message Tag Pills ── */
.kp-msg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.kp-msg-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.2);
  border-radius: 4px;
  font-size: 10px;
  color: #4ade80;
  cursor: default;
}

.kp-msg-tag-pill .tag-x {
  cursor: pointer;
  opacity: 0.5;
  font-size: 9px;
}

.kp-msg-tag-pill .tag-x:hover {
  opacity: 1;
}

.kp-msg-tag-input {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 10px;
  padding: 1px 6px;
  width: 70px;
  outline: none;
}

.kp-msg-tag-input:focus {
  border-color: rgba(74, 222, 128, 0.4);
}

/* ── Side Panel (frosted glass, resizable, overlays graph) ── */
.side-panel {
  position: fixed;
  top: 40px;
  left: 0;
  bottom: 0;
  width: 320px;
  min-width: 220px;
  max-width: 50vw;
  overflow: hidden;
  background: #212121;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  z-index: 30;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  contain: layout paint;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.side-panel.collapsed {
  transform: translate3d(-100%, 0, 0);
  border-right: none;
  opacity: 0;
  pointer-events: none;
}

/* Sidebar toggle button (floating, matches snav-btn exactly) */
.side-panel-toggle {
  position: fixed;
  top: 6px;
  left: 8px;
  width: 32px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  transition: all 0.15s;
}

.side-panel-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.side-panel-toggle.visible {
  display: flex;
}

/* Fixed timeline toggle on top bar (next to sidebar toggle) */
.timeline-panel-toggle {
  position: fixed;
  top: 6px;
  left: 46px;
  width: 32px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
  transition: all 0.15s;
}

.timeline-panel-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.timeline-panel-toggle.active {
  background: rgba(212, 244, 65, 0.08);
  color: var(--accent);
}

/* Drag resize handle on right edge */
.side-panel-resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  z-index: 50;
  transition: background 0.15s;
}

.side-panel-resize:hover,
.side-panel-resize.dragging {
  background: var(--accent);
}

.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  flex-shrink: 0;
}

.sp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.sp-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.sp-close:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.side-panel-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 0 0;
  flex-shrink: 0;
}

.sp-search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: flex;
  flex-shrink: 0;
  transition: color 0.3s;
  z-index: 1;
  pointer-events: none;
}

.side-panel-search input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 8px 8px 8px 32px;
  font-size: 12px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.3s;
}

.side-panel-search input:focus {
  border-color: transparent;
}

.side-panel-search input::placeholder {
  color: var(--text-muted);
}

/* Animated underline */
.sp-search-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.side-panel-search input:focus~.sp-search-underline {
  transform: scaleX(1);
}

/* Animated highlight background */
.sp-search-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: rgba(212, 244, 65, 0.04);
  transition: width 0.3s ease;
  pointer-events: none;
}

.side-panel-search input:focus~.sp-search-highlight {
  width: 100%;
}

/* Icon color on focus */
.side-panel-search input:focus~.sp-search-icon {
  color: var(--accent);
}

/* ── Search Suggestions Dropdown ── */
.sp-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(36, 36, 40, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0;
  z-index: 50;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sp-suggest-item {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 80ms;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-suggest-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.side-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #212121;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Search Recents ── */
.sr-section-label {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 0 6px;
  margin-top: 2px;
}

.sr-section-label:first-child {
  padding-top: 2px;
  margin-top: 0;
}

.sr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
}

.sr-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sr-icon {
  font-size: 12px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.6;
  color: var(--text-muted);
}

.sr-icon svg {
  width: 14px;
  height: 14px;
}

.sr-icon .type-svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-icon .type-svg-icon svg {
  width: 14px;
  height: 14px;
}

.sr-title {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-item:hover .sr-title {
  color: var(--text);
}

.sr-type {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}

/* ── Domain List Items ── */
.dl-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12.5px;
  transition: background 0.12s, color 0.12s;
  border-left: 2px solid transparent;
}

.dl-right-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.dl-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.dl-item.active {
  background: var(--bg-active);
  color: var(--text);
  border-left-color: var(--accent);
}

/* Chevron for collapsible */
.dl-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: transform 0.15s, color 0.15s;
  border-radius: 3px;
}

.dl-chev:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.dl-chev.open {
  transform: rotate(90deg);
}

.dl-chev-placeholder {
  width: 16px;
  flex-shrink: 0;
}

.dl-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dl-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  min-width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* + button to create sub-domain (visible on hover) */
.dl-add {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
}

.dl-item:hover .dl-add {
  display: inline-flex;
}

.dl-item:hover .dl-count {
  display: none;
}

.dl-add:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

/* Top-level create button */
.dl-create-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dl-create-top:hover {
  color: var(--accent);
  background: var(--bg-hover);
}

/* Sticky search for domain panel */
#domainPanelSearch {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(8px);
}

/* ═══ Top-left Navigation Menu ═══ */
.nav-menu-trigger {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(25, 25, 25, 0.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.nav-menu-trigger:hover {
  background: rgba(40, 40, 40, 0.90);
  color: var(--text-primary);
}

.nav-menu-trigger.active {
  background: rgba(40, 40, 40, 0.95);
  color: var(--text-primary);
}

.nav-menu-chevron {
  font-size: 10px;
  transition: transform 0.2s;
}

.nav-menu-trigger.active .nav-menu-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: fixed;
  top: 42px;
  left: 8px;
  width: 280px;
  max-height: 70vh;
  background: rgba(55, 55, 55, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  z-index: 99;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: navDropIn 0.15s ease-out;
}

@keyframes navDropIn {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }

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

.nav-dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.nav-dropdown-search .search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.nav-dropdown-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.nav-dropdown-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  max-height: calc(70vh - 50px);
}

.nav-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: transparent;
}

/* Sidebar styles kept for nav content rendering */

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px 4px;
  flex-shrink: 0;
}

.sidebar-nav-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.sidebar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.sidebar-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.sidebar-nav-btn:disabled:hover {
  background: none;
}

.sidebar-header .logo {
  font-size: 14px;
  color: var(--accent);
}

/* Search */
.sidebar-search {
  position: relative;
  padding: 0 10px 6px;
}

.sidebar-search input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 10px 6px 30px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  transition: border var(--transition);
}

.sidebar-search input:focus {
  border-color: var(--border-light);
}

.sidebar-search .search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 11px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 2px 6px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.nav-section {
  margin-bottom: 2px;
  padding-bottom: 2px;
}

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

/* Quick nav at top has no divider */
.nav-quick+.nav-section {
  border-top: none;
}

.nav-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 8px 3px;
  user-select: none;
}

.nav-section-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-section-toggle:hover {
  color: var(--text-secondary);
}

.dt-section-chev {
  display: inline-flex;
  align-items: center;
  color: var(--text-faint);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12.5px;
  transition: all var(--transition);
  user-select: none;
}

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

.nav-item.active {
  background: var(--bg-active);
  color: var(--text);
}

/* SVG icon container */
.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.nav-icon svg {
  width: 15px;
  height: 15px;
}

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

.nav-item.active .nav-icon {
  color: inherit;
}

/* Create button green accent */
.nav-create {
  color: var(--text-secondary);
}

.nav-create .nav-icon-green {
  color: var(--green);
}

/* Type SVG icons (in content areas) */
.type-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.type-svg-icon svg {
  width: 15px;
  height: 15px;
}

/* Object type icon with emoji fallback */
.nav-item .icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Right-side actions (count + dots), hidden until hover */
.nav-item .nav-right {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.nav-item:hover .nav-right {
  display: flex;
}

.nav-item .count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  min-width: 16px;
  text-align: center;
}

/* Three-dot context menu trigger */
.nav-item .nav-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
}

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

/* Sidebar Context Menu */
.sidebar-ctx-menu {
  position: fixed;
  z-index: 4000;
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  animation: ctxMenuIn 0.12s ease-out;
}

@keyframes ctxMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }

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

.sidebar-ctx-menu .ctx-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-ctx-menu .ctx-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.sidebar-ctx-menu .ctx-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-ctx-menu .ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.sidebar-ctx-menu .ctx-item.ctx-danger {
  color: #EC4899;
}

.sidebar-ctx-menu .ctx-item.ctx-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #EC4899;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--border);
}

.sidebar-footer .btn {
  width: 100%;
  justify-content: center;
}

/* ── Main Area (full screen) ── */
.main-area {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
  overflow: hidden;
  z-index: 10;
  margin: 40px 0.5px 6px 0;
  border-radius: 12px;
  transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Workspace View (object/list editor, toggles with graph) ── */
.workspace-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1A1A1A;
  z-index: 5;
}

.workspace-view .chrome-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  flex-shrink: 0;
  user-select: none;
  border-bottom: 1px solid var(--border);
}

.workspace-view .chrome-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.workspace-view .chrome-nav-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.workspace-view .chrome-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.workspace-view .chrome-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

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

/* ── Chrome Bar (sidebar toggle + nav + tabs) ── */
.chromebar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  flex-shrink: 0;
  user-select: none;
  -webkit-app-region: drag;
  position: relative;
  z-index: 12;
}

.chromebar * {
  -webkit-app-region: no-drag;
}

.chrome-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}

.chrome-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.chrome-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.chrome-btn:disabled:hover {
  background: none;
}

.chrome-new-tab {
  margin-left: 2px;
}

/* ── Chrome Tabs ── */
.chrome-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: 4px;
}

.chrome-tabs::-webkit-scrollbar {
  display: none;
}

.chrome-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition), color var(--transition);
  border: none;
  flex-shrink: 0;
}

.chrome-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
}

.chrome-tab.active {
  background: var(--bg-main);
  color: var(--text);
}

.chrome-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.chrome-tab-close {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 100ms ease, background 100ms ease;
  flex-shrink: 0;
}

.chrome-tab:hover .chrome-tab-close,
.chrome-tab.active .chrome-tab-close {
  opacity: 0.5;
}

.chrome-tab-close:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1);
}

/* ── Main Area (independent card panel) ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  isolation: isolate;
  position: relative;
  z-index: 11;
}

/* Topbar / Breadcrumb */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.topbar-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-link {
  cursor: pointer;
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--transition);
}

.breadcrumb-link:hover {
  opacity: 1;
}

.breadcrumb-sep {
  color: var(--text-muted);
  margin: 0 2px;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.topbar-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.topbar-action-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.topbar-action-btn--icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
}

/* ── Workspace ── */
.workspace {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}

.workspace::-webkit-scrollbar {
  width: 5px;
}

.workspace::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ── Object Dashboard (Tana Library View) ── */
.dashboard {
  padding: 32px 40px;
  width: 100%;
  box-sizing: border-box;
  will-change: transform;
}

.dashboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.dashboard-header .type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-header .type-icon svg {
  width: 24px;
  height: 24px;
}

.dashboard-header h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.dashboard-header .obj-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* View switcher */
.view-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.view-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-btn svg {
  width: 13px;
  height: 13px;
}

.view-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.view-btn.active {
  color: var(--text);
  background: var(--bg-active);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

/* Object Card (Tana-style) */
/* Filter / Sort / Group toolbar */
.fsg-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 6px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

.fsg-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.fsg-item svg {
  width: 13px;
  height: 13px;
  opacity: 0.5;
}

.fsg-item select,
.fsg-item input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 6px;
  outline: none;
}

.fsg-item input {
  width: 80px;
}

.fsg-dir-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  transition: all var(--transition);
}

.fsg-dir-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Clear / deselect button for filter/sort/group */
.fsg-clear-btn {
  background: none;
  border: none;
  color: var(--text-placeholder);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 3px;
  transition: all 0.15s;
}

.fsg-clear-btn:hover {
  color: #EC4899;
  background: rgba(248, 113, 113, 0.12);
}

.fsg-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.fsg-group-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.obj-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition);
  overflow: hidden;
}

/* Card cover image */
.card-cover {
  margin: -14px -14px 10px -14px;
  height: 120px;
  overflow: hidden;
  background: var(--bg-input);
}

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.obj-card:hover {
  border-color: var(--border-light);
  background: var(--bg-elevated);
}

.obj-card .card-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.obj-card .card-type .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.obj-card .card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.obj-card .card-preview {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.obj-card .card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.obj-card .card-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
}

/* List View */
.list-view .list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.list-view .list-item:hover {
  background: var(--bg-hover);
}

.list-view .list-item .bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.list-view .list-item .li-title {
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-view .list-item .li-meta {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* List view body with secondary info */
.list-view .list-item .li-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.list-view .list-item .li-body .li-title {
  white-space: nowrap;
}

.list-view .list-item .li-secondary {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

/* Sidebar: compact object items under types */
.nav-item.nav-item-sm {
  padding: 2px 8px;
  font-size: 12px;
  gap: 6px;
  color: var(--text-primary);
}

.nav-item.nav-item-sm:hover {
  color: #fff;
}

.bullet-sm {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-obj-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
}

.sb-type-objects {
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  margin-left: 16px;
}

/* Type chevron in sidebar */
.nav-type-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.nav-type-chev:hover {
  color: var(--text-secondary);
}

/* ── Object Page (Capacities/Tana full-page editor) ── */
.object-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 40px 40px;
}

/* ── 5-Layer Entity Panel ── */
.entity-layer {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
}

.entity-layer:hover {
  border-color: var(--border-light);
}

.layer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.layer-header:hover {
  background: var(--bg-hover);
}

.layer-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.layer-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 1;
}

.layer-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.entity-layer.collapsed .layer-chevron {
  transform: rotate(-90deg);
}

.entity-layer.collapsed .layer-body {
  display: none;
}

.layer-body {
  padding: 4px 12px 12px;
}

.layer-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.layer-action-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.layer-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* Connection pills in L2 */
.conn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  transition: all 0.15s;
}

.conn-pill:hover {
  border-color: var(--conn-color, var(--border-light));
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.conn-rel-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
}

.relation-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Type badge */
.object-page .type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  cursor: default;
}

/* Title */
.object-page .page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  border: none;
  background: none;
  color: var(--text);
  width: 100%;
  outline: none;
  padding: 0;
  margin-bottom: 2px;
  resize: none;
  overflow: hidden;
}

.object-page .page-title::placeholder {
  color: var(--text-placeholder);
}

.object-page .page-title:empty::before {
  content: 'Untitled';
  color: var(--text-placeholder);
  pointer-events: none;
}

/* ── Property Rows (Node-style, Capacities-like) ── */
.prop-section {
  margin-bottom: 20px;
  padding-top: 8px;
}

.prop-row {
  display: flex;
  align-items: flex-start;
  min-height: 30px;
  padding: 4px 8px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
  position: relative;
}

.prop-row:hover {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.prop-label {
  width: auto;
  min-width: 110px;
  max-width: 140px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text);
  padding: 4px 0 4px 4px;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.prop-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.65;
}

.prop-field-icon svg {
  width: 14px;
  height: 14px;
}

.prop-bullet {
  color: var(--text-muted);
  font-size: 10px;
  padding: 5px 8px 0 0;
  flex-shrink: 0;
  line-height: 1;
}

.prop-value {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  padding: 3px 0px;
  /* removed horizontal padding to eliminate 'box' look */
  border-radius: var(--radius-sm);
  cursor: text;
  min-height: 26px;
  line-height: 1.5;
  outline: none;
}

.prop-value:empty::before {
  content: attr(data-placeholder);
  color: var(--text-placeholder);
}

.prop-value:focus {
  outline: none;
  background: transparent;
  /* removed bg-input */
}

/* Tag pills in property row */
.tag-list {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 0;
}

.tag-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tag-pill .remove {
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  transition: opacity var(--transition);
}

.tag-pill:hover .remove {
  opacity: 1;
}

.tag-input {
  border: none;
  background: none;
  color: var(--text);
  font-size: 11px;
  outline: none;
  width: 70px;
  padding: 2px 4px;
}

/* ── Domain Tags ── */
.domain-tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}

.domain-tag-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--transition);
}

.domain-tag-pill .dt-icon {
  font-size: 10px;
}

.domain-tag-pill .dt-remove {
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  margin-left: 2px;
  transition: opacity var(--transition);
}

.domain-tag-pill:hover .dt-remove {
  opacity: 1;
}

.domain-add-btn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-input);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.domain-add-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.domain-loading {
  font-size: 11px;
  color: var(--text-faint);
  padding: 2px 8px;
}

/* ── Coordinates ── */
.coord-domain-group {
  margin: 4px 0 8px 0;
  padding: 0;
}

.radar-chart-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.radar-chart {
  overflow: visible;
}

.coord-domain-header {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coord-icon {
  font-size: 12px;
}

.coord-row {
  padding: 1px 0;
}

.coord-label {
  font-size: 12px !important;
}

.coord-select {
  width: 100%;
  max-width: 200px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.coord-select:hover {
  border-color: var(--accent);
}

.coord-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Domain Add Popup ── */
.domain-add-popup {
  position: fixed;
  z-index: 9999;
  width: 260px;
  max-height: 320px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dap-title {
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px 6px;
  color: var(--text-muted);
}

.dap-search {
  margin: 0 10px 6px;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

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

.dap-list {
  overflow-y: auto;
  max-height: 200px;
  padding: 0 4px;
}

.dap-item {
  padding: 7px 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background var(--transition);
}

.dap-item:hover {
  background: var(--bg-hover);
}

.dap-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dap-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-faint);
}

.dap-empty {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

.dap-create {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background var(--transition);
}

.dap-create:hover {
  background: var(--accent-dim);
}

/* ── Domain Management Modal ── */
.dm-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--bg-input);
  font-size: 13px;
}

.dm-item:hover {
  background: var(--bg-hover);
}

.dm-label {
  font-weight: 500;
  flex: 1;
}

.dm-meta {
  font-size: 11px;
  color: var(--text-faint);
}

.tag-input::placeholder {
  color: var(--text-placeholder);
}

/* ── Content Editor (Tana node-style) ── */
.detail-content-area {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

/* Hierarchical Node Editor */
.node-editor {
  min-height: 200px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}

.node-editor:empty::before {
  content: '输入 / 开始编辑节点...';
  color: var(--text-placeholder);
  display: block;
  padding: 4px 0;
}

.node-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  border-radius: var(--radius-sm);
  margin: 1px 0;
}

/* Collapse/expand toggle button — sits to the LEFT of bullet
   with half-icon (8px) gap, vertically centered with text */
.node-toggle {
  position: absolute;
  left: 0px;
  top: 6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-faint);
  border-radius: 50%;
  transition: all 0.15s ease;
  opacity: 0;
  z-index: 2;
}

/* Per-depth toggle positions: left = depth * 24px */
.node-line[data-depth="1"]>.node-toggle {
  left: 24px;
}

.node-line[data-depth="2"]>.node-toggle {
  left: 48px;
}

.node-line[data-depth="3"]>.node-toggle {
  left: 72px;
}

.node-line[data-depth="4"]>.node-toggle {
  left: 96px;
}

.node-line[data-depth="5"]>.node-toggle {
  left: 120px;
}

.node-line:hover>.node-toggle,
.node-toggle:hover {
  opacity: 1;
}

.node-toggle:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

.node-toggle svg {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.node-toggle.expanded svg {
  transform: rotate(90deg);
}

/* Hidden children when parent is collapsed */
.node-line.child-hidden {
  display: none !important;
}

/* Collapsed parent — no longer needs ::after hide since guide lines 
   are drawn by child ::before pseudo-elements exclusively */

.node-line:hover {
  background: transparent;
}

.node-bullet {
  flex-shrink: 0;
  width: 20px;
  font-size: inherit;
  /* font-size must inherit so 1lh resolves to parent's line-height, not bullet's own 8px */
  height: 1lh;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  margin-top: 2px;
  /* Match .node-content padding-top; margin doesn't shift the flex center like padding does */
}

/* ── Node drag-and-drop reorder ── */
.node-line.nd-dragging {
  opacity: 0.35;
}

.node-line.nd-drop-above {
  box-shadow: 0 -2px 0 0 var(--accent);
}

.node-line.nd-drop-below {
  box-shadow: 0 2px 0 0 var(--accent);
}

.node-bullet:active {
  cursor: grabbing;
}

.node-bullet::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.node-line[data-depth="0"] .node-bullet::before {
  background: var(--text-secondary);
}

/* Parent node vertical guide — dynamically stretches from bullet down to bottom boundary 
   to bridge gaps caused by multiline text or node notes */
.node-line.has-children::after {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 0px;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.node-line.child-hidden::after {
  display: none !important;
}

.node-line[data-depth="0"].has-children::after {
  left: 19px;
}

.node-line[data-depth="1"].has-children::after {
  left: 54px;
}

.node-line[data-depth="2"].has-children::after {
  left: 89px;
}

.node-line[data-depth="3"].has-children::after {
  left: 124px;
}

.node-line[data-depth="4"].has-children::after {
  left: 159px;
}

.node-line[data-depth="5"].has-children::after {
  left: 194px;
}

.node-line[data-depth="6"].has-children::after {
  left: 229px;
}

.node-line[data-depth="7"].has-children::after {
  left: 264px;
}

.node-line[data-depth="8"].has-children::after {
  left: 299px;
}

.node-line[data-depth="9"].has-children::after {
  left: 334px;
}

.node-line[data-depth="10"].has-children::after {
  left: 369px;
}

.node-line[data-depth="11"].has-children::after {
  left: 404px;
}

.node-line[data-depth="12"].has-children::after {
  left: 439px;
}

.node-content {
  flex: 1;
  min-width: 0;
  outline: none;
  padding: 2px 4px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.node-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-placeholder);
}

.node-content:focus {
  outline: none;
}

/* Depth indentation */
.node-line[data-depth="0"] {
  padding-left: 9px;
}

.node-line[data-depth="1"] {
  padding-left: 44px;
}

.node-line[data-depth="2"] {
  padding-left: 79px;
}

.node-line[data-depth="3"] {
  padding-left: 114px;
}

.node-line[data-depth="4"] {
  padding-left: 149px;
}

.node-line[data-depth="5"] {
  padding-left: 184px;
}

.node-line[data-depth="6"] {
  padding-left: 219px;
}

.node-line[data-depth="7"] {
  padding-left: 254px;
}

.node-line[data-depth="8"] {
  padding-left: 289px;
}

.node-line[data-depth="9"] {
  padding-left: 324px;
}

.node-line[data-depth="10"] {
  padding-left: 359px;
}

.node-line[data-depth="11"] {
  padding-left: 394px;
}

.node-line[data-depth="12"] {
  padding-left: 429px;
}

/* Bold heading nodes (larger bullets) */
.node-content b,
.node-content strong {
  font-weight: 600;
  color: var(--text);
}

/* Tana-style cascading vertical guide lines — one line per ancestor level
   Base offset = 19px (9px base padding + 10px bullet center) 
   Interval = 35px */
.node-line[data-depth="1"]::before,
.node-line[data-depth="2"]::before,
.node-line[data-depth="3"]::before,
.node-line[data-depth="4"]::before,
.node-line[data-depth="5"]::before,
.node-line[data-depth="6"]::before,
.node-line[data-depth="7"]::before,
.node-line[data-depth="8"]::before,
.node-line[data-depth="9"]::before,
.node-line[data-depth="10"]::before,
.node-line[data-depth="11"]::before,
.node-line[data-depth="12"]::before {
  content: '';
  position: absolute;
  left: 19px;
  top: -1px;
  bottom: 0px;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

/* depth 2+: add ancestor lines via box-shadow */
.node-line[data-depth="2"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="3"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="4"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="5"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="6"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="7"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06), 210px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="8"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06), 210px 0 0 rgba(255, 255, 255, 0.06), 245px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="9"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06), 210px 0 0 rgba(255, 255, 255, 0.06), 245px 0 0 rgba(255, 255, 255, 0.06), 280px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="10"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06), 210px 0 0 rgba(255, 255, 255, 0.06), 245px 0 0 rgba(255, 255, 255, 0.06), 280px 0 0 rgba(255, 255, 255, 0.06), 315px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="11"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06), 210px 0 0 rgba(255, 255, 255, 0.06), 245px 0 0 rgba(255, 255, 255, 0.06), 280px 0 0 rgba(255, 255, 255, 0.06), 315px 0 0 rgba(255, 255, 255, 0.06), 350px 0 0 rgba(255, 255, 255, 0.06);
}

.node-line[data-depth="12"]::before {
  box-shadow: 35px 0 0 rgba(255, 255, 255, 0.06), 70px 0 0 rgba(255, 255, 255, 0.06), 105px 0 0 rgba(255, 255, 255, 0.06), 140px 0 0 rgba(255, 255, 255, 0.06), 175px 0 0 rgba(255, 255, 255, 0.06), 210px 0 0 rgba(255, 255, 255, 0.06), 245px 0 0 rgba(255, 255, 255, 0.06), 280px 0 0 rgba(255, 255, 255, 0.06), 315px 0 0 rgba(255, 255, 255, 0.06), 350px 0 0 rgba(255, 255, 255, 0.06), 385px 0 0 rgba(255, 255, 255, 0.06);
}

/* Multi-select highlight */
.node-line.node-selected {
  background: rgba(99, 155, 255, 0.10);
  border-left: 2px solid rgba(99, 155, 255, 0.6);
  border-radius: 0;
}

.node-line.node-selected .node-bullet::before {
  background: rgba(99, 155, 255, 0.8);
}

/* ── Selection Toolbar ── */
.selection-toolbar {
  position: fixed;
  display: none;
  align-items: center;
  gap: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 1100;
  user-select: none;
  animation: selToolbarIn 0.12s ease;
}

@keyframes selToolbarIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

.selection-toolbar.show {
  display: flex;
}

.sel-btn {
  background: transparent;
  border: none;
  color: #b0b0b0;
  min-width: 32px;
  height: 30px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.12s ease;
  padding: 0 6px;
  white-space: nowrap;
  gap: 4px;
}

.sel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e8e8e8;
}

.sel-btn.active {
  color: #D4F441;
  background: rgba(212, 244, 65, 0.12);
}

.sel-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sel-divider {
  width: 1px;
  height: 20px;
  background: #3a3a3a;
  margin: 0 3px;
  flex-shrink: 0;
}

.sel-btn-text {
  font-size: 12px;
  letter-spacing: 0.2px;
}

/* ── Inline Formatting Styles ── */
.node-content code {
  background: rgba(212, 244, 65, 0.12);
  color: #D4F441;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.88em;
}

.node-content mark {
  background: rgba(251, 191, 36, 0.25);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}

/* Slash command menu */
.slash-menu {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
}

.slash-menu.show {
  display: block;
}

.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all var(--transition);
}

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

.slash-menu-item .cmd-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

/* @ mention search */
.mention-popup {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 4px;
  min-width: 240px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  display: none;
}

.mention-popup.show {
  display: block;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition);
}

.mention-item:hover {
  background: var(--bg-active);
}

.mention-item .m-icon {
  font-size: 12px;
}

.mention-item .m-title {
  flex: 1;
  color: var(--text);
}

.mention-item .m-type {
  font-size: 10px;
  color: var(--text-muted);
}

/* Inline object reference pill */
.obj-ref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-active);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
}

.obj-ref:hover {
  background: var(--accent-dim);
}

/* ── Connected Content (bottom section) ── */
.connections-section {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.connections-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.conn-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.conn-item:hover {
  background: var(--bg-hover);
}

.conn-item .c-icon {
  font-size: 13px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.conn-item .c-title {
  flex: 1;
  font-size: 12.5px;
  color: var(--text);
}

.conn-item .c-relation {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.conn-item .c-remove {
  opacity: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  transition: opacity var(--transition);
}

.conn-item:hover .c-remove {
  opacity: 1;
}

/* ── Connection Description Chips ── */
.conn-desc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.conn-desc-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.conn-desc-chip:hover {
  background: rgba(212, 244, 65, 0.08);
  border-color: rgba(212, 244, 65, 0.3);
  color: var(--text);
}

.conn-desc-chip.active {
  background: rgba(212, 244, 65, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

/* ── Writing Mode (Article sections) ── */
.writing-mode {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}

.writing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.writing-header h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.section-card:hover {
  border-color: var(--border-light);
}

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.section-head .sec-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  width: 20px;
}

.section-head .sec-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
}

.section-head .sec-type {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.section-head .sec-status {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.sec-status.done {
  background: var(--green-dim);
  color: var(--green);
}

.sec-status.pending {
  background: var(--bg-input);
  color: var(--text-muted);
}

.section-body {
  padding: 12px 14px;
}

.section-body textarea {
  width: 100%;
  min-height: 100px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.75;
  resize: vertical;
  outline: none;
  font-family: inherit;
}

.section-placeholder {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ── Preview ── */
.preview-mode {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px;
}

.preview-mode h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  line-height: 1.3;
}

.preview-mode .para {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.preview-mode .divider {
  text-align: center;
  color: var(--text-muted);
  margin: 16px 0;
  font-size: 12px;
  letter-spacing: 4px;
}

/* ── Empty State ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  color: var(--text-muted);
  gap: 12px;
}

.empty-state .es-icon {
  font-size: 36px;
  opacity: 0.3;
}

.empty-state .es-text {
  font-size: 13px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.btn:hover {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-light);
}

.btn-primary {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}

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

.btn-sm {
  padding: 3px 8px;
  font-size: 11px;
}

.btn-danger {
  color: var(--red);
}

.btn-danger:hover {
  background: var(--red-dim);
  border-color: var(--red);
}

/* ── Modal (Tana-style) ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  /* 明显变黑，无需模糊 */
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: rgba(8, 8, 12, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
}

.modal-overlay.show {
  display: flex;
}

.modal-overlay.is-open {
  display: flex;
}

.sys-confirm-overlay {
  z-index: 9999;
}

.sys-confirm-modal {
  width: 380px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  align-items: center;
  background: rgba(12, 12, 16, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
}

.sys-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.sys-confirm-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.sys-confirm-message {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.6;
}

.sys-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

.sys-confirm-actions .moko-btn {
  flex: 1;
}

.modal {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  width: 440px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

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

.modal-header h3 {
  font-size: 14px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 24px;
  padding: 0 4px;
  line-height: 1;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

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

.bulk-type-modal.moko-modal {
  width: 400px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bulk-prop-modal.moko-modal {
  width: 500px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bulk-type-modal .bulk-modal-header,
.bulk-prop-modal .bulk-modal-header {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
}

.bulk-modal-title {
  font-size: 16px !important;
  font-weight: 600;
  margin: 0;
}

.bulk-prop-field {
  display: flex;
  flex-direction: column;
}

.bulk-type-select {
  margin-top: 8px;
}

.bulk-prop-select {
  margin-top: 8px;
  margin-bottom: 16px;
}

.bulk-prop-input-container {
  margin-top: 4px;
}

.bulk-prop-input-multi {
  min-height: 120px;
  height: 120px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.bulk-prop-input-multi option {
  padding: 4px 6px;
}

.bulk-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

/* ── Domain Picker Modal (for 课题 creation) ── */
.dp-modal {
  max-width: 440px;
  max-height: 80vh;
}

.dp-modal.moko-modal {
  padding: 0;
}

.dp-helper-text {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.dp-search-input {
  margin-bottom: 8px;
}

.dp-list {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.dp-item {
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
}

.dp-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.dp-label {
  pointer-events: none;
}

.modal-body {
  padding: 16px 20px;
}

.modal-body label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 12px;
}

.modal-body label:first-child {
  margin-top: 0;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border var(--transition);
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  border-color: var(--accent);
}

.batch-img-modal.moko-modal {
  width: 560px;
  max-width: 90vw;
  padding: 0;
}

.batch-img-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.batch-img-dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.batch-img-dropzone.dragover {
  border-color: #34d399;
  background: rgba(52, 211, 153, 0.06);
}

.batch-img-drop-icon {
  margin-bottom: 12px;
  stroke: rgba(255, 255, 255, 0.25);
}

.batch-img-drop-title {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 4px;
}

.batch-img-drop-subtitle {
  color: var(--text-muted);
  font-size: 11px;
}

.batch-img-file-input {
  display: none;
}

.batch-img-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.batch-img-status {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.batch-img-status.is-info {
  color: var(--text-muted);
}

.batch-img-status.is-success {
  color: var(--green);
}

.batch-img-status.is-error {
  color: var(--red);
}

.batch-img-status.is-loading {
  color: var(--accent);
}

.batch-img-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.batch-img-submit-btn {
  min-width: 98px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.batch-img-thumb {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
  position: relative;
}

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

.modal-body textarea {
  min-height: 80px;
  resize: vertical;
}

.modal-body select {
  cursor: pointer;
}

/* Custom Type Dropdown */
.type-dropdown {
  position: relative;
}

.type-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border var(--transition);
}

.type-dropdown-trigger:hover {
  border-color: var(--text-muted);
}

.type-dd-icon {
  display: flex;
  align-items: center;
}

.type-dd-arrow {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transform: rotate(-90deg);
  transition: transform 0.15s;
}

.type-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--moko-tier-bg);
  border: 1px solid var(--moko-tier-border);
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 200;
  padding: 6px;
  box-shadow: var(--moko-tier-shadow);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.type-dropdown-list.is-open {
  display: block;
}

.type-dd-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.12s, color 0.12s;
}

.type-dd-option:hover {
  background: rgba(255, 255, 255, 0.07);
}

.type-dd-option.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.type-dd-option .type-svg-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#connPropositionFields {
  display: none;
  margin-top: 8px;
}

#connPropositionFields.is-open {
  display: block;
}

#connSearchResults {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--moko-tier-bg);
  border: 1px solid var(--moko-tier-border);
  border-radius: 10px;
  box-shadow: var(--moko-tier-shadow);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

#connSearchResults.is-open {
  display: block;
}

#connSearchResults .conn-item {
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  margin: 4px;
  min-height: 34px;
}

#connSearchResults .conn-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

#connSearchResults .conn-item .c-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
}

#connSearchResults .conn-item .c-relation {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
}

.conn-search-results-empty {
  padding: 12px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  text-align: center;
}

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

/* ── Toast ── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast {
  padding: 8px 14px;
  border-radius: 0;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text);
  animation: toast-in 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.toast.success {
  border-color: rgba(255, 255, 255, 0.15);
}

.toast.error {
  border-color: rgba(255, 255, 255, 0.15);
}

.toast.info {
  border-color: rgba(255, 255, 255, 0.15);
}

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

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

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

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

/* ── Selection state ── */
::selection {
  background: var(--accent-dim);
  color: var(--text);
}

/* ── Scrollbar global (auto-hide, only show on scroll) ── */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Show scrollbar thumb only when container is hovered or scrolling */
*:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

*:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ── Article outline in editor ── */
.outline-section {
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.outline-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.outline-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  transition: background var(--transition);
}

.outline-item:hover {
  background: var(--bg-hover);
}

.outline-item .oi-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  width: 18px;
}

.outline-item .oi-title {
  flex: 1;
}

.outline-item .oi-type {
  font-size: 10px;
  color: var(--text-muted);
}

.outline-item .oi-status {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
}

/* ============================================
   SUPERTAG SYSTEM STYLES
   ============================================ */

/* ── SuperTag Pills (multi-tag badges on object page) ── */
.supertag-pills {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.meta-kind-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding: 3px 0;
  margin-right: 2px;
  opacity: 0.7;
}

.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: default;
  transition: all var(--transition);
}

.st-pill .st-remove {
  cursor: pointer;
  opacity: 0;
  font-size: 10px;
  margin-left: 2px;
  transition: opacity var(--transition);
}

.st-pill:hover .st-remove {
  opacity: 1;
}

.st-add-btn {
  background: none;
  border: 1px dashed var(--border-light);
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
}

.st-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ── Research Topic Progress Bar (课题进度) ── */
.rt-progress-wrap {
  padding: 4px 8px 8px;
}

.rt-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.rt-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.3s ease;
}

.rt-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.rt-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s ease;
}

.rt-status-badge:hover {
  filter: brightness(1.2);
  transform: scale(1.02);
}

.rt-progress-pct {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Field Type Hints ── */
.field-type-hint {
  font-size: 9px;
  color: var(--text-placeholder);
  margin-left: 4px;
}

.inherited-badge {
  font-size: 9px;
  color: var(--teal);
  margin-left: 2px;
  opacity: 0.7;
}

/* ── Typed Field Inputs ── */
.prop-input {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: background var(--transition);
  width: auto;
}

.prop-input:focus {
  background: var(--bg-input);
}

.num-input {
  width: 100px;
}

.date-input {
  width: 160px;
  color-scheme: dark;
}

.opt-select {
  cursor: pointer;
  min-width: 120px;
}

/* Multi-select chips */
.multi-select-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ms-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: all var(--transition);
}

.ms-chip:hover {
  border-color: var(--text-secondary);
}

.ms-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #111;
}

/* Relation dropdown */
.relation-field {
  position: relative;
}

.relation-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.rel-option {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
}

.rel-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.rel-option.disabled {
  color: var(--text-muted);
  cursor: default;
}

/* URL / Image / PDF fields */
.url-field,
.image-field,
.pdf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.url-preview,
.pdf-link {
  display: inline;
  align-items: center;
  gap: 4px;
  font-size: inherit;
  color: var(--accent);
  text-decoration: none;
}

.url-preview:hover,
.pdf-link:hover {
  text-decoration: underline;
}

.field-img-preview {
  max-width: 200px;
  max-height: 120px;
  border-radius: var(--radius);
  margin-top: 4px;
  object-fit: cover;
}

/* Create Tag Modal form inputs */
#createTagModal .modal-body label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#createTagModal .modal-body label:first-child {
  margin-top: 0;
}

#createTagModal .modal-body input:not([type="hidden"]) {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

#createTagModal .modal-body input:focus {
  border-color: var(--accent);
}

.check-field {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  cursor: pointer;
}

.check-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.option-badge {
  font-size: 11px;
  padding: 1px 6px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: var(--radius-pill);
}

.empty-cell {
  color: var(--text-placeholder);
}

/* ── Table View ── */
.table-view {
  overflow-x: auto;
}

.table-view table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.table-view th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.table-view th .ft-badge {
  font-size: 9px;
  color: var(--text-placeholder);
  margin-left: 4px;
  font-weight: 400;
}

.table-view td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-view tr:hover {
  background: var(--bg-hover);
}

/* ── AI Column Batch Fill Button ── */
.ai-col-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-placeholder);
  cursor: pointer;
  padding: 2px 4px;
  margin-left: 4px;
  border-radius: 4px;
  vertical-align: middle;
  transition: all 0.2s;
  font-size: 11px;
  line-height: 1;
}

.ai-col-btn:hover {
  color: #7C3AED;
  background: rgba(192, 132, 252, 0.12);
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.25);
}

.ai-col-btn:active {
  transform: scale(0.92);
}

.ai-col-btn.ai-col-loading {
  color: #7C3AED;
  pointer-events: none;
  font-size: 11px;
  white-space: nowrap;
}

.ai-col-btn.ai-col-loading .ai-fill-spin {
  display: inline-flex;
}

/* Active column header highlight during batch fill */
th.ai-col-active {
  background: rgba(192, 132, 252, 0.08) !important;
  border-bottom-color: rgba(192, 132, 252, 0.3) !important;
}

/* Row being processed */
.table-view tr.ai-row-filling {
  background: rgba(192, 132, 252, 0.06);
}

/* Cell being filled */
.table-view td.ai-cell-filling {
  position: relative;
  color: transparent;
}

.table-view td.ai-cell-filling::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7C3AED;
  animation: ai-cell-pulse 0.8s ease infinite;
}

@keyframes ai-cell-pulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* Cell just filled */
.table-view td.ai-cell-done {
  animation: ai-cell-flash 0.5s ease;
}

@keyframes ai-cell-flash {
  0% {
    background: rgba(74, 222, 128, 0.2);
  }

  100% {
    background: transparent;
  }
}

/* Cell error */
.table-view td.ai-cell-error {
  background: rgba(248, 113, 113, 0.1);
}

.td-title {
  font-weight: 500;
}

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

/* ── SuperTag Config Panel ── */
.config-panel {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 40px 80px;
}

.config-group {
  margin-bottom: 28px;
}

.config-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-left: 4px;
}

.config-tag-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color var(--transition);
}

.config-tag-card:hover {
  border-color: var(--border-light);
}

.ct-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}

.ct-header:hover {
  background: var(--bg-hover);
}

.ct-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.ct-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}

.ct-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.ct-extends {
  font-size: 10px;
  color: var(--teal);
  background: var(--teal-dim);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.ct-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--transition);
}

.ct-body {
  padding: 14px;
  border-top: 1px solid var(--border);
}

.ct-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.ct-meta label {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ct-meta input,
.ct-meta select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
  min-width: 80px;
}

.ct-meta input:focus,
.ct-meta select:focus {
  border-color: var(--accent);
}

.ct-fields-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-fields {
  margin-bottom: 12px;
}

.cf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.cf-row.inherited {
  opacity: 0.6;
}

.cf-name {
  min-width: 80px;
  color: var(--text);
}

.cf-name-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  width: 100px;
  font-family: inherit;
}

.cf-name-input:focus {
  border-color: var(--accent);
}

.cf-type,
.cf-inherited {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.cf-inherited {
  color: var(--teal);
  background: var(--teal-dim);
}

.cf-type-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--text);
  font-size: 11px;
  outline: none;
  cursor: pointer;
}

.cf-options-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--text);
  font-size: 11px;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}

.cf-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: all var(--transition);
}

.cf-row:hover .cf-del {
  opacity: 1;
}

.cf-del:hover {
  color: var(--red);
  background: var(--red-dim);
}

.cf-empty {
  font-size: 11px;
  color: var(--text-placeholder);
  padding: 4px;
}

.ct-danger {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Tag Popup (add supertag overlay) ── */
.tag-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-popup {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 8px;
  min-width: 220px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.tag-popup-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 8px 8px;
}

.tag-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.tag-popup-item:hover {
  background: var(--bg-active);
  color: var(--text);
}

/* ── Extra button sizes ── */
.btn-xs {
  padding: 2px 6px;
  font-size: 10px;
}

/* ── Create Field Row ── */
.create-field-row {
  margin-bottom: 8px;
}

.create-field-row label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.create-field-row .ft-hint {
  font-size: 9px;
  color: var(--text-placeholder);
  font-weight: 400;
  margin-left: 3px;
}

.create-field-row input,
.create-field-row select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.create-field-row input:focus,
.create-field-row select:focus {
  border-color: var(--accent);
}

/* ── Ref field (supertag reference) ── */
.ref-field {
  border-left: 2px solid var(--accent);
  padding-left: 10px !important;
}

/* ═══════════════════════════════════════
   INLINE POPUPS (# tag + @ mention)
   ═══════════════════════════════════════ */
.inline-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  min-width: 304px;
  max-width: 420px;
  max-height: 420px;
  overflow: hidden;
  background: var(--moko-tier-bg);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  box-shadow: var(--moko-tier-shadow);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  flex-direction: column;
}

.inline-popup.is-open {
  display: flex;
}

/* ── Search input header ── */
.inline-popup-search {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.inline-popup-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  outline: none;
  box-sizing: border-box;
}

.inline-popup-search input::placeholder {
  color: var(--text-muted);
}

.inline-popup-search input:focus {
  border-color: var(--accent);
}

.inline-popup-list {
  padding: 6px 6px 8px;
  overflow-y: auto;
  flex: 1;
}

.inline-popup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s, color .12s;
  color: rgba(255, 255, 255, 0.84);
  min-height: 36px;
}

.inline-popup-item:hover,
.inline-popup-item.selected {
  background: rgba(255, 255, 255, 0.08);
}

.inline-popup-item.create-item {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 4px;
  padding-top: 10px;
  color: #D4F441;
}

.ipi-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

.ipi-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ipi-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}

.ipi-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.52);
  font-weight: 600;
  white-space: nowrap;
  line-height: 16px;
}

.inline-popup-group {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.48);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 8px 10px 4px;
}

.inline-popup-empty {
  padding: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  line-height: 1.55;
}

/* ── Inline rendered elements ── */
.inline-tag {
  display: inline;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  cursor: default;
  vertical-align: baseline;
  margin: 0 1px;
}

.inline-ref {
  display: inline;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  padding: 0 1px;
  vertical-align: baseline;
  line-height: inherit;
  transition: opacity .15s;
}

.inline-ref:hover {
  opacity: .8;
}

/* ── Object Embed Block (card / full) ── */
.obj-embed {
  position: relative;
  border-radius: var(--radius-lg);
  margin: 4px 0;
  transition: all 0.2s ease;
}

.obj-embed .node-bullet {
  display: none;
}

.obj-embed .node-content {
  padding-left: 0 !important;
}

/* ── Card mode ── */
.obj-embed.mode-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 10px 14px;
}

.obj-embed.mode-card:hover {
  border-color: var(--border-light);
}

.obj-embed-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.obj-embed-card-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.obj-embed-card-body {
  flex: 1;
  min-width: 0;
}

.obj-embed-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.obj-embed-card-type {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.8;
}

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

/* ── Full embed mode ── */
.obj-embed.mode-full {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.obj-embed-full-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.obj-embed-full-header:hover {
  background: rgba(255, 255, 255, 0.02);
}

.obj-embed-full-icon {
  font-size: 18px;
  margin-top: 2px;
}

.obj-embed-full-header-text {
  flex: 1;
  min-width: 0;
}

.obj-embed-full-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.obj-embed-full-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.obj-embed-full-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
}

.obj-embed-full-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0.7;
}

.obj-embed-full-props {
  padding: 2px 0;
}

/* ── Tana-style Full Object Embed ── */
.embed-object-page {
  padding: 16px 18px;
}

.embed-supertag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.embed-supertag-pills .st-pill {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.embed-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 0;
  cursor: pointer;
  line-height: 1.3;
}

.embed-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 3px;
}

.embed-subtitle {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 0 0 6px;
  opacity: 0.75;
}

.embed-definition {
  margin: 8px 0;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--border-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.embed-def-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 5px;
  font-weight: 600;
}

.embed-def-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.embed-props-section {
  margin: 4px 0;
}

.embed-prop-row {
  display: flex;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.embed-prop-row:last-child {
  border-bottom: none;
}

.embed-prop-label {
  min-width: 110px;
  max-width: 140px;
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 2px;
}

.embed-prop-value {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.embed-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.embed-tag-list .tag-pill {
  font-size: 11px;
  padding: 1px 8px;
  cursor: default;
}

.embed-tag-list .tag-pill .remove {
  display: none;
}

/* Embedded content area (outliner) */
.embed-content-area {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.embed-node-editor {
  font-size: 13px;
  line-height: 1.6;
}

.embed-node-editor .node-line {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 0;
}

.embed-node-editor .node-content {
  flex: 1;
  min-width: 0;
  color: var(--text);
}

.embed-node-editor .node-bullet {
  flex-shrink: 0;
}

.embed-node-editor .node-note {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 20px;
  font-style: italic;
  opacity: 0.8;
}

/* Backlinks in embed */
.embed-backlinks {
  margin-top: 6px;
}

.embed-backlinks-title {
  font-size: 11px;
  color: var(--text-faint);
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.embed-backlinks-count {
  background: var(--bg-input);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
}

.embed-backlinks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}

.embed-backlink-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--bg-input);
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.embed-backlink-item:hover {
  background: var(--surface-2);
}

.embed-backlink-title {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.embed-backlink-rel {
  font-size: 10px;
  color: var(--text-faint);
  opacity: 0.7;
}

.embed-backlink-more {
  font-size: 11px;
  color: var(--text-faint);
  padding: 3px 10px;
}

/* ── Tana-style Collapsible Reference Node ── */
.ref-node-line {
  display: flex;
  flex-direction: column;
  position: relative;
}

.ref-node-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: default;
  min-height: 26px;
}

.ref-node-chevron {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s, transform 0.15s;
  flex-shrink: 0;
  user-select: none;
}

.ref-node-chevron svg {
  transition: transform 0.15s ease;
}

.ref-node-chevron:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.ref-node-chevron.expanded svg {
  transform: rotate(90deg);
}

.ref-node-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ref-node-icon svg {
  width: 14px;
  height: 14px;
}

.ref-node-title {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.12s;
}

.ref-node-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.ref-node-delete {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  cursor: pointer;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}

.ref-node-delete svg {
  width: 12px;
  height: 12px;
}

.ref-node-line:hover .ref-node-delete {
  opacity: 0.6;
}

.ref-node-delete:hover {
  opacity: 1 !important;
  color: #f55;
  background: rgba(255, 80, 80, 0.1);
}

/* ── Type Pill Badge (药丸) ── */
.ref-node-type-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 99px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Subtitle / Definition Note ── */
.ref-node-subtitle {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.4;
  padding: 0 0 2px 38px;
  /* aligned under the title: chevron(16)+gap(6)+icon(16)=38 */
  max-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ref-node-subtitle:empty {
  display: none;
}

/* ── Reference Sub-Nodes (expanded content) ── */
.ref-node-children {
  padding-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  margin-left: 8px;
}

.ref-node-loading {
  font-size: 12px;
  color: var(--text-faint);
  padding: 6px 0;
  font-style: italic;
}

.ref-sub-node {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
}

.ref-sub-bullet {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
  color: var(--text-faint);
  font-size: 10px;
  margin-top: 4px;
}

.ref-sub-content {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  word-break: break-word;
}

.ref-sub-def {
  padding: 4px 0;
  margin-bottom: 4px;
}

.ref-sub-def .ref-sub-content {
  color: var(--text-secondary);
  font-style: italic;
  opacity: 0.85;
}

.ref-sub-field {
  padding: 2px 0;
}

.ref-sub-field-editor {
  flex: 1;
  min-width: 0;
}

.ref-sub-field-editor .prop-value {
  padding: 1px 4px;
  min-height: 20px;
}

.ref-sub-field-editor .relation-field {
  padding: 0;
}

.ref-prop-row {
  align-items: flex-start;
}

/* Ref-node outliner editor */
.ref-node-editor {
  padding: 4px 0 4px 8px;
  min-height: 28px;
}

.ref-node-editor .node-line {
  font-size: 13px;
}



.ref-sub-label {
  min-width: 80px;
  max-width: 120px;
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
  padding-top: 1px;
}

.ref-sub-value {
  flex: 1;
  min-width: 0;
  color: var(--text);
  word-break: break-word;
}

.ref-sub-content-line {
  color: var(--text-secondary);
}

.ref-sub-content-line .ref-sub-content .inline-ref {
  cursor: pointer;
}

/* ── Editable reference node fields ── */
.ref-editable {
  outline: none;
  border-radius: 3px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background 0.12s, box-shadow 0.12s;
  cursor: text;
  min-width: 40px;
}

.ref-editable:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ref-editable:focus {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ref-editable:empty:before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  opacity: 0.5;
  pointer-events: none;
}

/* Content editor area */
.ref-sub-content-area {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.ref-sub-editor {
  outline: none;
  padding: 4px 6px;
  min-height: 24px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  border-radius: 4px;
  transition: background 0.12s;
}

.ref-sub-editor:hover {
  background: rgba(255, 255, 255, 0.03);
}

.ref-sub-editor:focus {
  background: rgba(255, 255, 255, 0.05);
}

.ref-sub-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  opacity: 0.5;
  pointer-events: none;
}

.ref-sub-editor .node-line {
  padding: 1px 0;
}


/* Full embed left border accent */
.obj-embed.mode-full {
  border-left: 3px solid;
  border-left-color: var(--accent, var(--border-light));
}

.obj-embed-prop-row {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}

.obj-embed-prop-row:last-child {
  border-bottom: none;
}

.obj-embed-prop-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.obj-embed-prop-icon {
  width: 18px;
  font-size: 12px;
  color: var(--text-faint);
  flex-shrink: 0;
}

.obj-embed-prop-label {
  min-width: 100px;
  max-width: 130px;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: normal;
}

.obj-embed-prop-value {
  flex: 1;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: background 0.15s;
  white-space: pre-wrap;
  word-break: break-word;
}

.obj-embed-prop-value:hover {
  background: rgba(255, 255, 255, 0.04);
}

.obj-embed-prop-value:focus {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.obj-embed-prop-value:empty::before {
  content: 'Empty';
  color: var(--text-faint);
  pointer-events: none;
  font-style: italic;
  opacity: 0.5;
}

/* Embedded object content body */
.obj-embed-content {
  padding: 8px 14px 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-height: 300px;
  overflow-y: auto;
}

.obj-embed-content .node-line {
  margin: 0;
  padding: 1px 0;
}

.obj-embed-content .node-content {
  font-size: 13px;
  color: var(--text-secondary);
}

.obj-embed-content .inline-ref {
  color: var(--accent);
  cursor: pointer;
}

/* ── View switch menu ── */
.obj-embed-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}

.obj-embed:hover .obj-embed-menu-btn,
.node-line:hover>.obj-embed-menu-btn {
  opacity: 1;
}

.obj-embed-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.obj-embed-dropdown {
  position: absolute;
  top: 30px;
  right: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
  min-width: 140px;
}

.obj-embed-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.obj-embed-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.obj-embed-dropdown-item.active {
  color: var(--accent);
}

.obj-embed-dropdown-item.obj-embed-delete {
  color: #f55;
}

.obj-embed-dropdown-item.obj-embed-delete:hover {
  background: rgba(255, 80, 80, 0.1);
  color: #f44;
}


/* ═══════════════════════════════════════
   SLASH COMMAND MENU
   ═══════════════════════════════════════ */
.slash-menu {
  position: fixed;
  z-index: 5000;
  min-width: 240px;
  max-width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  display: block;
  animation: slashMenuIn 0.12s ease-out;
}

@keyframes slashMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }

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

.slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  transition: background .1s, color .1s;
}

.slash-item:hover,
.slash-item.selected {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.slash-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  line-height: 0;
}

.slash-icon svg {
  display: block;
}

.slash-label {
  flex: 1;
}

.slash-shortcut {
  font-size: 11px;
  color: var(--text-faint);
  opacity: 0.5;
}

/* ═══════════════════════════════════════
   NODE CONTENT ENHANCEMENTS
   ═══════════════════════════════════════ */
/* Image wrapper with resize handle */
.node-image-wrapper {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 6px 0 2px;
  border-radius: var(--radius);
  overflow: visible;
  cursor: default;
}

.node-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: contain;
  image-rendering: high-quality;
  -webkit-image-rendering: -webkit-optimize-contrast;
}

.node-image-resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  background: transparent;
  border-radius: 3px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
}

.node-image-resize-handle:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.node-image-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, color .15s;
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.node-image-delete:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.6);
}

.node-image-wrapper:hover .node-image-resize-handle,
.node-image-wrapper:hover .node-image-delete {
  opacity: 1;
}

/* Code block inside nodes — Notion style */

.code-line>.node-bullet {
  opacity: 1;
  align-self: flex-start;
  margin-top: 6px;
}

/* Align toggle specifically for the lowered code block bullet */
.code-line>.node-toggle {
  top: 10px;
  opacity: 1;
}

/* Collapsing a code block hides its body and preview */
.node-line.code-line.collapsed>.code-block-container>.code-block-body,
.node-line.code-line.collapsed>.code-block-container>.mermaid-preview-container {
  display: none !important;
}

/* Container */
.code-block-container {
  flex: 1;
  min-width: 0;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: visible;
  /* crucial for the language dropdown to escape container boundaries */
  margin: 2px 0 4px 0;
}

/* Header row: language dropdown + copy button */
.code-block-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Custom language dropdown */
.code-lang-dropdown {
  position: relative;
}

.code-lang-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.code-lang-trigger:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}

.code-lang-arrow {
  opacity: 0.5;
  transition: transform 0.15s;
}

/* Options panel — fixed height, scrollable */
.code-lang-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: rgba(24, 24, 28, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
  /* subtle inner glow instead of robust border */
  max-height: 240px;
  min-width: 140px;
  overflow-y: auto;
  padding: 4px;
}

.code-lang-options.open {
  display: block;
}

/* Scrollbar styling */
.code-lang-options::-webkit-scrollbar {
  width: 5px;
}

.code-lang-options::-webkit-scrollbar-track {
  background: transparent;
}

.code-lang-options::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.code-lang-options::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Individual option */
.code-lang-option {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.code-lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.code-lang-option.active {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
}

/* Copy & Preview buttons */
.code-copy-btn,
.code-preview-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
  margin-left: 0;
}

.code-preview-btn {
  margin-left: auto;
}

.code-copy-btn:hover,
.code-preview-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.code-preview-btn.active {
  color: #4caf50;
  background: rgba(76, 175, 80, 0.15);
}

.mermaid-preview-container {
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  min-height: 40px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.mermaid-preview-container svg {
  max-width: 100%;
  height: auto;
}

/* Code body (the editable area) */
.node-code-block {
  display: block;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #d4d4d4;
  background: transparent;
  border: none;
  border-radius: 0 0 6px 6px;
  padding: 12px 16px;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  tab-size: 2;
  min-height: 40px;
  outline: none;
}

.node-code-block:empty::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.2);
}

.node-code-block:focus {
  outline: none;
}

/* Legacy wrapper (keep for backward compat) */
.node-code-wrapper {
  margin: 6px 0 2px;
}

.mermaid-preview {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 4px;
  overflow-x: auto;
  text-align: center;
}

.mermaid-preview svg {
  max-width: 100%;
  height: auto;
}

/* Checkbox lines */
.checkbox-line .node-bullet {
  /* Show the bullet container (for the checkbox), but remove the default dot */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
}

.checkbox-line .node-bullet::before,
.checkbox-line .node-bullet::after {
  display: none;
}

/* Custom checkbox — hide native, draw custom box */
.node-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0 6px 0 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: #3a3a3f;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.node-checkbox:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: #444449;
}

/* Checked state — green with white checkmark */
.node-checkbox:checked {
  background: #4caf50;
  border-color: #4caf50;
}

.node-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Checkbox line — checked state: strikethrough + dim */
.checkbox-line.checked .node-content {
  text-decoration: line-through;
  text-decoration-color: var(--text-faint);
  opacity: 0.5;
}

.checkbox-line.checked .node-bullet .node-checkbox {
  background: #4caf50;
  border-color: #4caf50;
}

/* Heading style for node-content */
.node-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Node note / description */
.node-note {
  display: block;
  width: calc(100% - 24px);
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  border-left: none;
  padding: 1px 0 1px 0;
  margin: -5px 0 2px 24px;
  min-height: 16px;
  outline: none;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.node-note:hover,
.node-note:focus {
  opacity: 1;
}

.node-note:empty::before {
  content: 'Add description';
  color: var(--text-faint);
  pointer-events: none;
}

/* Heading + note combo */
.node-heading~.node-note {
  margin-left: 24px;
  font-size: 13px;
}

/* Title note (below page title) */

/* 《》 brackets for media-type titles */
.bracket-title::before {
  content: '《 ';
  color: var(--text-primary, #fff);
}

.bracket-title::after {
  content: ' 》';
  color: var(--text-primary, #fff);
}

.title-note {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
  padding: 0;
  margin: 0;
  min-height: 20px;
  outline: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.title-note:hover,
.title-note:focus {
  opacity: 1;
}

.title-note:empty::before {
  content: 'Add description';
  color: var(--text-faint);
  pointer-events: none;
}

/* L3 Definition Section */
.definition-section {
  margin: 4px 0;
}

.def-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}

.def-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.def-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.def-chevron {
  font-size: 10px;
  color: var(--text-faint);
  margin-left: auto;
}

.def-ai-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.5;
  transition: background 0.15s, opacity 0.15s;
}

.def-ai-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}

.def-body {
  padding: 0 10px 10px;
}

.def-editor {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 4px;
  outline: none;
  min-height: 36px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.def-editor:hover {
  background: rgba(255, 255, 255, 0.02);
}

.def-editor:focus {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

.def-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}

/* ── Entity Profile Card Section ── */
.entity-profile-section {
  margin: 12px 0 8px;
  overflow: visible;
}

.entity-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.entity-profile-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.entity-profile-ai-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(244, 114, 182, 0.12);
  border: 1px solid rgba(244, 114, 182, 0.3);
  color: #f472b6;
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.entity-profile-ai-btn:hover {
  background: rgba(244, 114, 182, 0.22);
  color: #f9a8d4;
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.2);
}

.entity-profile-ai-btn:disabled {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
}

.entity-profile-ai-btn svg {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.entity-profile-card {
  display: flex;
  gap: 14px;
  padding: 12px;
  margin: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.entity-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

.entity-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.entity-info-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}

.entity-info-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 1px 0;
  min-width: 0;
}

.entity-info-row.full-width {
  grid-column: 1 / -1;
}

.entity-info-key {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.entity-info-val {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-info-val.entity-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Milestones Timeline */
.entity-milestones {
  padding: 6px 12px 12px;
}

.entity-milestones-label {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.entity-milestone-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding-bottom: 4px;
}

.entity-milestone-track::-webkit-scrollbar {
  height: 2px;
}

.entity-milestone-track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.entity-milestone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}

.entity-milestone-dot-row {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.entity-milestone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.entity-milestone-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  transform: translateY(-50%);
}

.entity-milestone-item:last-child .entity-milestone-line {
  display: none;
}

.entity-milestone-year {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

.entity-milestone-text {
  font-size: 9px;
  color: var(--text-faint);
  text-align: center;
  max-width: 100%;
  line-height: 1.3;
  margin-top: 1px;
  padding: 0 2px;
  word-break: break-all;
}

.entity-profile-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 9px;
  font-style: italic;
}


.mechanism-diagram-section {
  margin: 12px 0 8px;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
}

.mech-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mech-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.mech-add-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  transition: all 0.15s;
}

.mech-add-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

.mech-ai-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #a78bfa;
  font-size: 8px;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.mech-ai-btn:hover {
  background: rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
}

.mech-ai-btn:disabled {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

.mech-ai-btn svg {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.mech-canvas-wrap {
  position: relative;
  min-height: 150px;
  overflow: visible;
}

.mech-canvas-wrap canvas {
  display: block;
  cursor: grab;
}

.mech-canvas-wrap canvas:active {
  cursor: grabbing;
}

.mech-resize-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 2;
}

.mech-resize-bar:hover {
  background: rgba(139, 92, 246, 0.15);
}

/* Node context toolbar — gray borderless floating */
.mech-node-toolbar {
  position: absolute;
  display: flex;
  gap: 1px;
  background: rgba(40, 40, 50, 0.92);
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px;
  z-index: 10;
  backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -100%);
  pointer-events: auto;
}

.mech-node-toolbar .tb-btn {
  position: relative;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: all 0.12s;
}

.mech-node-toolbar .tb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.mech-node-toolbar .tb-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.mech-node-toolbar .tb-btn svg {
  width: 14px;
  height: 14px;
}

/* Submenu dropdown — gray borderless floating */
.mech-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  background: rgba(40, 40, 50, 0.95);
  border: none;
  border-radius: 8px;
  padding: 8px;
  min-width: 220px;
  max-height: 280px;
  overflow: auto;
  z-index: 11;
  backdrop-filter: blur(16px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.mech-submenu input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  outline: none;
  margin-bottom: 6px;
}

.mech-submenu input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.mech-submenu .sub-item {
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  transition: background 0.1s;
}

.mech-submenu .sub-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mech-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 9px;
  font-style: italic;
}

/* Mechanism text description */
.mech-text-desc {
  padding: 0 12px 8px;
}

.mech-desc-title {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.mech-desc-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: decimal;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.55);
}

.mech-desc-list li {
  padding: 1px 0;
}

.mech-desc-rel {
  display: inline-block;
  background: rgba(139, 92, 246, 0.12);
  color: rgba(167, 139, 250, 0.8);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}

.mech-desc-obj {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Add Step Dropdown Panel ── */
.mech-add-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  width: 280px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.mech-add-dropdown.open {
  opacity: 1;
  transform: translateY(4px);
  pointer-events: auto;
}

.mech-add-dropdown-inner {
  background: rgba(38, 38, 48, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mech-add-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
}

.mech-add-search-row input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-family: inherit;
}

.mech-add-search-row input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.mech-add-results {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mech-add-results::-webkit-scrollbar {
  width: 3px;
}

.mech-add-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.mech-add-relation-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}

.mech-add-relation-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  white-space: nowrap;
}

.mech-add-relation-row input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 4px;
  outline: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  padding: 4px 6px;
  font-family: inherit;
}

.mech-add-relation-row input:focus {
  background: rgba(255, 255, 255, 0.08);
}

/* Position selector */
.mech-add-position-section {
  padding: 4px 4px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}

.mech-add-section-label {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  display: block;
  margin-bottom: 4px;
}

.mech-pos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 68px;
  overflow-y: auto;
}

.mech-pos-row::-webkit-scrollbar {
  width: 2px;
}

.mech-pos-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.mech-pos-pill {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  padding: 3px 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  font-family: inherit;
}

.mech-pos-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}

.mech-pos-pill--active {
  background: rgba(100, 220, 140, 0.15);
  color: rgba(100, 220, 140, 0.9);
}

.mech-pos-pill--active:hover {
  background: rgba(100, 220, 140, 0.22);
}

.mech-pos-pill--head {
  color: rgba(255, 200, 100, 0.6);
}

.mech-search-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.1s;
}

.mech-search-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mech-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mech-type-tag {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  white-space: nowrap;
  min-width: 28px;
}

.mech-item-title {
  color: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Object Image Section */
.obj-image-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 8px;
}

.obj-image {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: width 0.2s, height 0.2s;
}

.obj-image.expanded {
  width: 320px;
  height: 320px;
}

.obj-image-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.obj-image-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.obj-image-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* AI field button right-aligned in prop-row */
.prop-ai-right {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.prop-row:hover .prop-ai-right {
  opacity: 1;
}

/* Image wrap with delete button */
.obj-image-wrap {
  position: relative;
  display: inline-block;
}

.obj-image-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.65);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.obj-image-wrap:hover .obj-image-delete {
  opacity: 1;
}

.obj-image-delete:hover {
  background: rgba(220, 50, 50, 0.85);
}

/* Image crop modal */
.image-crop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.image-crop-canvas {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: crosshair;
}

.image-crop-actions {
  display: flex;
  gap: 12px;
}

.image-crop-actions button {
  padding: 8px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.crop-confirm {
  background: var(--accent);
  color: #000;
  font-weight: 600;
}

.crop-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Config textarea */
.cfg-textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  font-size: 12px;
  font-family: inherit;
  line-height: 1.4;
}

/* Reference section */
.ref-item {
  align-items: flex-start !important;
}

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

.ref-snippet {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.ref-loading {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 400;
  animation: refPulse 1.2s infinite;
}

@keyframes refPulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* Divider */
.node-divider {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

/* Divider line hides the bullet */
.node-line:has(.node-divider)>.node-bullet {
  visibility: hidden;
}

/* Drag-over highlight */
.node-content.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════
   CONFIG PANEL (Tana-style split layout)
   ═══════════════════════════════════════ */
/* ═══ Config Panel — Tana Schema Style ═══ */

/* Schema overview page */
.cfg-schema-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 32px 60px;
  overflow-y: auto;
  height: 100%;
}

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

.cfg-schema-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfg-schema-title svg {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

.cfg-schema-desc {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 24px;
}

/* Breadcrumb */
.cfg-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cfg-bc-link {
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.12s;
  display: inline-flex;
  align-items: center;
}

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

.cfg-bc-link svg {
  width: 14px;
  height: 14px;
}

.cfg-bc-sep {
  opacity: 0.4;
  font-size: 12px;
}

.cfg-bc-current {
  color: var(--text);
}

/* Type grid (schema overview) */
.cfg-group-section {
  margin-bottom: 20px;
}

.cfg-type-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cfg-type-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
  font-size: 14px;
}

.cfg-type-card:hover {
  background: var(--surface-2);
}

.cfg-tc-icon {
  display: flex;
  align-items: center;
}

.cfg-tc-icon .type-svg-icon svg {
  width: 18px;
  height: 18px;
}

.cfg-tc-name {
  flex: 1;
  color: var(--text);
}

.cfg-tc-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}

/* ── Detail page (single column Tana-style) ── */
.cfg-detail-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 32px 60px;
  overflow-y: auto;
  height: 100%;
}

.cfg-detail-icon {
  margin: 8px 0 12px;
}

.cfg-detail-icon .type-svg-icon svg {
  width: 48px;
  height: 48px;
  opacity: 0.7;
}

.cfg-detail-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cfg-hash {
  font-size: 24px;
  font-weight: 700;
}

.cfg-title-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  width: 100%;
  padding: 0;
}

.cfg-detail-desc {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 16px;
  padding: 2px 0;
  min-height: 20px;
  outline: none;
  cursor: text;
}

.cfg-detail-desc:empty::before {
  content: attr(data-placeholder);
  color: var(--text-placeholder);
}

/* Color palette (inline dots) */
.cfg-color-row {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  align-items: center;
}

.cp-dot-new {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cp-dot-new:hover {
  transform: scale(1.15);
}

.cp-dot-new.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.cp-dot-new svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

/* ── Collapsible Section Card ── */
.cfg-section-card {
  background: rgba(30, 30, 34, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}

.cfg-sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.12s;
}

.cfg-sc-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.cfg-sc-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cfg-sc-icon {
  display: flex;
  color: var(--text-muted);
}

.cfg-sc-icon svg {
  width: 18px;
  height: 18px;
}

.cfg-sc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.cfg-sc-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cfg-sc-chevron {
  display: flex;
  color: var(--text-muted);
}

.cfg-sc-chevron svg {
  width: 16px;
  height: 16px;
}

.cfg-sc-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
}

/* Config rows (inside section body) */
.cfg-row-new {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cfg-row-new:last-child {
  border-bottom: none;
}

.cfg-row-new>label {
  width: 100px;
  min-width: 100px;
  font-size: 13px;
  color: var(--text-muted);
  padding-top: 6px;
  flex-shrink: 0;
}

/* Content template sub-header */
.cfg-ct-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 8px;
}

.cfg-ct-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.cfg-ct-tag-pill {
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.cfg-ct-extend {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

.cfg-ct-extend:hover {
  color: var(--text);
}

/* Field card (bordered area) */
.cfg-field-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 0;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.cfg-field-card-empty {
  padding: 12px 0;
}

/* ── Tana-style field row: icon | name | • | Default value | □ ── */
.cfg-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.08s;
  font-size: 14px;
}

.cfg-field-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cfg-field-row.inherited {
  opacity: 0.6;
}

.cfr-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cfr-icon .ft-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.cfr-icon .ft-icon svg {
  width: 14px;
  height: 14px;
}

.cfr-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.cfr-dot {
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.cfr-default {
  flex: 1;
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfr-ai {
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 14px;
  flex-shrink: 0;
}

/* Checkbox toggle (Tana-style square) */
.cfr-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.cfr-checkbox input {
  display: none;
}

.cfr-check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  transition: all 0.12s;
}

.cfr-checkbox input:checked+.cfr-check-box {
  background: var(--accent);
  border-color: var(--accent);
}

/* Empty bullet placeholder */
.cfg-field-empty-bullet {
  padding: 6px 16px;
}

.cfg-bullet {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 14px;
}

/* Field actions row */
.cfg-field-actions-row {
  display: flex;
  gap: 20px;
  padding: 8px 0 12px;
}

.cfg-field-add-link {
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s;
}

.cfg-field-add-link:hover {
  color: var(--text);
}

.cfg-chevron-sm {
  font-size: 11px;
  opacity: 0.6;
}

/* Optional fields section */
.cfg-optional-section {
  margin-top: 24px;
}

.cfg-opt-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.cfg-opt-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Show checkbox toggle */
.cfg-show-checkbox {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

/* Content template header right alignment */
.cfg-ct-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfg-ct-extend-btn {
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s;
}

.cfg-ct-extend-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}

/* ── Save button bar (bottom of detail page) ── */
.cfg-save-bar {
  margin: 24px 0 0;
  padding: 16px 0;
  display: flex;
  justify-content: flex-end;
}

.cfg-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  background: var(--accent, #D4F441);
  border: none;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.3px;
}

.cfg-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 244, 65, 0.3);
}

.cfg-save-btn:active {
  transform: translateY(0);
}

.cfg-save-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.cfg-save-btn svg {
  width: 15px;
  height: 15px;
}

/* Dirty state: unsaved changes indicator */
.cfg-save-btn.cfg-save-dirty {
  animation: cfg-save-pulse 2s ease-in-out infinite;
}

.cfg-save-dot {
  color: #F59E0B;
  font-size: 8px;
  vertical-align: middle;
  animation: cfg-dot-blink 1.2s ease-in-out infinite;
}

@keyframes cfg-save-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 244, 65, 0.2);
  }

  50% {
    box-shadow: 0 0 12px 4px rgba(212, 244, 65, 0.25);
  }
}

@keyframes cfg-dot-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Success state: saved confirmation */
.cfg-save-btn.cfg-save-success {
  background: #4ADE80;
  animation: none;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

/* Danger zone */
.cfg-danger-zone {
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Resizer handle between sidebar and detail ── */
.cfg-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}

.cfg-resizer:hover,
.cfg-resizer:active {
  background: var(--accent);
}

/* ── Split layout: sidebar + detail ── */
.config-split {
  display: flex;
  height: 100%;
  gap: 0;
  position: relative;
}

/* Left: tag list sidebar */
.cfg-list {
  width: 240px;
  min-width: 240px;
  border-right: 1px solid var(--border);
  padding: 12px 0;
  overflow-y: auto;
}

.cfg-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 14px 16px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

.cfg-group-label:hover {
  color: var(--text-secondary);
}

.cfg-group-chevron {
  font-size: 10px;
  transition: transform .2s;
  color: var(--text-muted);
}

.cfg-tag-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
  border-left: 3px solid transparent;
}

.cfg-tag-item:hover {
  background: var(--surface-2);
}

.cfg-tag-item.active {
  background: var(--surface-2);
  border-left-color: var(--accent);
}

.cfg-tag-item.create {
  color: var(--accent);
  margin-top: 8px;
}

.cfg-tag-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

/* Right: detail panel */
.cfg-detail {
  flex: 1;
  padding: 0;
  overflow-y: auto;
}

.cfg-empty {
  color: var(--text-muted);
  text-align: center;
  margin-top: 80px;
  font-size: 14px;
}

.cfg-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.cfg-big-icon {
  font-size: 32px;
  display: flex;
  align-items: center;
}

.cfg-big-icon .type-svg-icon svg {
  width: 32px;
  height: 32px;
}

/* Icon Picker Trigger */
.icon-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-input);
  transition: all var(--transition);
}

.icon-picker-trigger:hover {
  border-color: var(--text-muted);
}

.icon-picker-trigger svg {
  width: 14px;
  height: 14px;
}

.icon-picker-label {
  opacity: 0.6;
  font-size: 11px;
}

/* Icon Picker Item (used in both modal and inline) */
.icon-picker-item {
  width: 56px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.icon-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.icon-picker-item.selected {
  background: var(--accent);
  color: #111;
}

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

.icon-picker-item .ip-label {
  font-size: 9px;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 52px;
  text-align: center;
}

.icon-picker-item:hover .ip-label {
  opacity: 0.8;
}

.icon-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
  line-height: 1.55;
}

/* Icon Picker Modal Overlay */
.icon-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  /* No background, no blur — just a transparent click-away layer */
  background: transparent;
  display: none;
}

.icon-picker-overlay.is-open {
  display: block;
}

.icon-picker-modal {
  position: absolute;
  width: 360px;
  max-height: 380px;
  background: var(--moko-tier-bg);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--moko-tier-shadow);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.icon-picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
}

.icon-picker-search {
  margin: 10px 12px 8px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  outline: none;
}

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

.icon-picker-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 56px);
  gap: 4px;
  padding: 8px 12px 14px;
  overflow-y: auto;
  flex: 1;
  justify-content: center;
}

/* Field Type Icons (clean badges — shared base) */
.ft-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  opacity: 0.7;
  flex-shrink: 0;
}

.ft-icon svg {
  width: 14px;
  height: 14px;
}

.cff-icon {
  display: inline-flex;
  align-items: center;
  width: 20px;
}

/* Sidebar Resizer */
.sidebar-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  z-index: 10;
  transition: background 0.15s;
}

.sidebar-resizer:hover,
.sidebar-resizer:active {
  background: var(--accent);
}

/* Global Search Overlay (Spotlight) — Tana style */
.global-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: none;
}

.global-search-overlay.is-open {
  display: flex;
}

.global-search-box {
  width: 620px;
  max-height: 520px;
  background: var(--moko-tier-bg);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  overflow: hidden;
  box-shadow: var(--moko-tier-shadow);
  display: flex;
  flex-direction: column;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.global-search-box.is-narrow {
  width: 420px;
}

.gs-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gs-search-icon {
  color: var(--text-muted);
  display: flex;
  flex-shrink: 0;
}

.gs-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
}

.gs-kbd {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  font-family: -apple-system, sans-serif;
}

.gs-results {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.gs-hint {
  padding: 22px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Search Result Item (Tana multi-line) ── */
.gs-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 80ms;
  border-left: 3px solid transparent;
}

.gs-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.gs-item.gs-selected {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: #D4F441;
}

.gs-icon {
  display: flex;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 13px;
}

.gs-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.gs-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.gs-snippet {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.56);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.gs-snippet mark {
  background: rgba(212, 199, 68, 0.35);
  color: #D4F441;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Type Badge (plain text, no pill) ── */
.gs-type-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--badge-color, #888);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ── Match Field Indicator (plain text) ── */
.gs-match-indicator {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--mi-color, #888);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ── Title Match Highlight ── */
.gs-title mark {
  background: rgba(212, 199, 68, 0.35);
  color: #D4F441;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Section Label ── */
.gs-section-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.46);
  text-transform: none;
  letter-spacing: 0.01em;
  padding: 10px 14px 4px;
}

/* ── Quick Create Actions ── */
.gs-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0;
}

.gs-action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  transition: background 80ms;
}

.gs-action-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.88);
}

.gs-action-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--accent);
}

.gs-action-icon svg {
  width: 14px;
  height: 14px;
}

/* ── Keyboard Hints Footer ── */
.gs-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  color: rgba(140, 150, 180, 0.5);
  flex-shrink: 0;
}

.gs-footer-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gs-footer-key kbd {
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  font-family: -apple-system, sans-serif;
  color: rgba(200, 210, 230, 0.6);
}

.cfg-tag-name {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.cfg-extends {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Multi-inherit checkboxes */
/* ── Inherit: search-to-add ── */
.cfg-inherit-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cfg-inherit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cfg-inherit-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--pill-color, #888) 18%, transparent);
  color: var(--pill-color, #888);
  white-space: nowrap;
}

.cfg-inherit-pill-x {
  cursor: pointer;
  opacity: 0.5;
  margin-left: 2px;
  font-size: 14px;
  line-height: 1;
}

.cfg-inherit-pill-x:hover {
  opacity: 1;
}

.cfg-inherit-input-wrap {
  position: relative;
}

.cfg-inherit-input {
  width: 100%;
  font-size: 13px;
}

.cfg-inherit-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(10, 10, 14, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-radius: var(--radius-md);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  margin-top: 4px;
  padding: 4px;
}

.cfg-inherit-dd-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 80ms;
}

.cfg-inherit-dd-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.cfg-inherit-dd-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.cfg-section {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.cfg-section.danger {
  background: transparent;
  border-color: #EC489933;
  text-align: right;
}

.cfg-section-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.cfg-section-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cfg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cfg-row>label {
  width: 60px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.cfg-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
}

.cfg-input.sm {
  max-width: 80px;
}

.cfg-input:focus {
  border-color: var(--accent);
  outline: none;
}

.cfg-input.ai-inst {
  min-height: 48px;
  resize: vertical;
  font-size: 12px;
}

/* Color palette */
.color-palette {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cp-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
}

.cp-dot:hover {
  transform: scale(1.15);
}

.cp-dot.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent);
}

/* Field rows in config */
.cfg-field {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
}

.cfg-field.inherited {
  opacity: .65;
}

.cfg-field-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}

.cfg-field-header:hover {
  background: var(--surface-2);
}

.cff-icon {
  font-size: 14px;
}

.cff-name {
  flex: 1;
  font-weight: 500;
}

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

.cff-req {
  font-size: 9px;
  background: #EC489933;
  color: #EC4899;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

.cff-inherited {
  font-size: 9px;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: var(--radius-pill);
}

.cff-arrow {
  color: var(--text-muted);
  font-size: 10px;
  transition: transform .15s;
}

.cfg-field-body {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.cfg-field-actions {
  margin-top: 8px;
  text-align: right;
}

.cfg-inherit-badge {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0 8px;
  font-weight: 600;
}

.cfg-add-field {
  padding: 10px;
  text-align: center;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
  transition: background .12s;
}

.cfg-add-field:hover {
  background: var(--surface-2);
}

.cfg-ai-gen-btn {
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  padding: 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
}

.cfg-ai-gen-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Toggle switch */
.cfg-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.cfg-toggle input {
  display: none;
}

.toggle-track {
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  position: relative;
  transition: background .2s;
}

.toggle-track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .2s, background .2s;
}

.cfg-toggle input:checked+.toggle-track {
  background: var(--accent);
}

.cfg-toggle input:checked+.toggle-track::after {
  transform: translateX(16px);
  background: #fff;
}

/* Button helpers */
.btn-ghost {
  background: transparent !important;
  border: none;
}

.btn-ghost:hover {
  opacity: .8;
}

.btn-danger {
  background: transparent !important;
  color: var(--text-muted) !important;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--red) !important;
}

/* ══════════════════════════════════════════
   GRAPH PANEL (right sidebar)
   ══════════════════════════════════════════ */

/* DEPRECATED: old graph panel replaced by unified Research Canvas */
.graph-panel {
  display: none !important;
  width: 340px;
  flex-shrink: 0;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  margin-left: 6px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
  isolation: isolate;
  transform: translateZ(0);
}

.graph-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  transition: background 0.15s;
}

.graph-resizer:hover,
.graph-resizer:active {
  background: var(--accent);
}

.graph-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.graph-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(140, 150, 180, 0.7);
  flex-shrink: 0;
}

.graph-header-icon {
  display: flex;
  color: var(--text-muted);
}

#graphCanvas {
  flex: 1;
  width: 100%;
  cursor: crosshair;
}

#graphCanvas:active {
  cursor: grabbing;
}

/* ── Graph Cards Container ── */
.graph-cards-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  gap: 6px;
  display: flex;
  flex-direction: column;
}

.graph-cards-container::-webkit-scrollbar {
  width: 4px;
}

.graph-cards-container::-webkit-scrollbar-track {
  background: transparent;
}

.graph-cards-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.graph-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.2s, flex 0.3s ease;
  display: flex;
  flex-direction: column;
}

.graph-card:hover {
  border-color: rgba(255, 255, 255, 0.10);
}

/* Fullscreen: card fills entire container viewport, other cards pushed below scroll */
.graph-card.gc-full {
  min-height: 100%;
  flex-shrink: 0;
}

.graph-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  flex-shrink: 0;
}

.graph-card-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.gc-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.gc-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.graph-card.gc-mini .gc-title,
.graph-card.gc-full .gc-title {
  color: var(--text);
}

.gc-badge {
  font-size: 9px;
  color: var(--text-faint);
}

/* ── Mode toggle buttons ── */
.gc-mode-btns {
  display: flex;
  gap: 2px;
  margin-left: auto;
  align-items: center;
}

.gc-mode-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-faint);
  transition: all 0.15s;
  background: none;
  border: none;
  padding: 0;
}

.gc-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.gc-mode-btn.active {
  color: var(--accent);
}

.gc-chevron {
  display: flex;
  color: var(--text-faint);
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.graph-card.gc-mini .gc-chevron,
.graph-card.gc-full .gc-chevron {
  transform: rotate(180deg);
}

/* ── Card body: visible in mini & full modes ── */
.graph-card-body {
  display: none;
  flex-direction: column;
  min-height: 0;
}

.graph-card.gc-mini .graph-card-body,
.graph-card.gc-full .graph-card-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Canvas wrapper ── */
.gc-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 0;
}

/* Mini mode: compact fixed height */
.graph-card.gc-mini .gc-canvas-wrap {
  height: 220px;
  flex: none;
}

/* Full mode: fill remaining space */
.graph-card.gc-full .gc-canvas-wrap {
  flex: 1;
  height: auto;
}

.gc-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.gc-canvas-wrap canvas:active {
  cursor: grabbing;
}

/* Override old #graphCanvas flex behavior inside card */
#gc-network #graphCanvas {
  flex: unset;
}

.gc-empty-hint {
  padding: 24px 16px;
  text-align: center;
  font-size: 11px;
  color: var(--text-faint);
  font-style: italic;
}

/* ── Knowledge Space: Mode Bar ── */
.space-mode-bar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
  align-items: center;
}

.space-layout-tabs {
  display: flex;
  gap: 2px;
}

.space-layout-btn {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.5;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  gap: 3px;
}

.space-layout-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.8;
}

.space-layout-btn.active {
  background: var(--accent-dim);
  border-color: rgba(110, 90, 255, 0.3);
  opacity: 1;
  color: var(--text);
  box-shadow: 0 0 6px rgba(110, 90, 255, 0.3);
  font-weight: 600;
}

.space-tool-btns {
  display: flex;
  gap: 2px;
}

.space-tool-btn {
  width: 26px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.4;
  padding: 0;
}

.space-tool-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.7;
}

.space-tool-btn.active {
  background: rgba(110, 200, 160, 0.15);
  border-color: rgba(110, 200, 160, 0.3);
  opacity: 1;
  color: rgba(110, 200, 160, 1);
  box-shadow: 0 0 6px rgba(110, 200, 160, 0.2);
}

.space-bar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 3px;
  flex-shrink: 0;
}

.space-lens-btns {
  display: flex;
  gap: 2px;
}

.space-lens-btn {
  width: 24px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.35;
  padding: 0;
}

.space-lens-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.7;
}

.space-lens-btn.active {
  background: var(--accent-dim);
  border-color: rgba(110, 90, 255, 0.3);
  opacity: 1;
  box-shadow: 0 0 6px rgba(110, 90, 255, 0.3);
}

.space-depth-selector {
  display: flex;
  align-items: center;
  gap: 1px;
  color: var(--text-muted);
}

.space-depth-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0.35;
  padding: 0;
}

.space-depth-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.7;
}

.space-depth-btn.active {
  background: rgba(110, 200, 160, 0.2);
  border-color: rgba(110, 200, 160, 0.3);
  color: rgba(110, 200, 160, 1);
  opacity: 1;
}

/* ── Axis Picker Popup ── */
.space-axis-picker {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28, 28, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.space-axis-picker-title {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 4px;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.space-axis-picker-item {
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.space-axis-picker-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.space-axis-picker-item .axis-type-badge {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0.6;
}

.space-axis-picker-item .axis-type-badge.date {
  background: rgba(255, 150, 50, 0.2);
  color: #fa3;
}

.space-axis-picker-item .axis-type-badge.number {
  background: rgba(80, 180, 255, 0.2);
  color: #5bf;
}

.space-axis-picker-item .axis-type-badge.category {
  background: rgba(180, 120, 255, 0.2);
  color: #b8f;
}

/* ── Active Axes Strip ── */
.space-active-axes {
  display: flex;
  gap: 4px;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-wrap: wrap;
}

.space-axis-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.space-axis-tag .axis-dir {
  font-weight: 700;
  opacity: 0.7;
}

.space-axis-tag .axis-name {
  opacity: 0.9;
}

.space-axis-tag .axis-remove {
  cursor: pointer;
  opacity: 0.4;
  font-size: 10px;
  margin-left: 2px;
}

.space-axis-tag .axis-remove:hover {
  opacity: 1;
}

.space-axis-tag.x {
  color: rgba(255, 80, 80, 0.9);
  border-color: rgba(255, 80, 80, 0.2);
}

.space-axis-tag.y {
  color: rgba(80, 220, 120, 0.9);
  border-color: rgba(80, 220, 120, 0.2);
}

.space-axis-tag.z {
  color: rgba(80, 150, 255, 0.9);
  border-color: rgba(80, 150, 255, 0.2);
}

/* ── Knowledge Space: Axis Selector ── */
.space-axis-bar {
  display: flex;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  align-items: center;
  flex-shrink: 0;
}

.space-axis-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.space-axis-item label {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  min-width: 12px;
  text-align: center;
}

.space-axis-item select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 10px;
  max-width: 140px;
  cursor: pointer;
  outline: none;
}

.space-axis-item select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.space-axis-item select:focus {
  border-color: var(--accent);
}

/* Trend view dimension selectors */
.gc-trend-controls {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gc-trend-axis {
  display: flex;
  align-items: center;
  gap: 4px;
}

.gc-trend-axis label {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  min-width: 12px;
  text-align: center;
}

.gc-trend-axis select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  max-width: 120px;
}

/* ── 2D/3D Toggle ── */
.graph-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 4px;
}

.graph-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
}

.graph-mode-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.graph-mode-toggle.active-3d {
  background: rgba(110, 90, 255, 0.15);
  border-color: rgba(110, 90, 255, 0.4);
}

/* ── 3D Container ── */
#graph3dContainer {
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

#graph3dContainer canvas {
  display: block;
}

.graph-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  background: rgba(12, 14, 20, 0.8);
}

.graph-legend {
  text-align: right;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(140, 150, 180, 0.5);
}

/* Topbar graph toggle button */
.topbar-graph-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.topbar-graph-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.topbar-graph-btn.active {
  color: var(--accent);
  background: var(--accent-dim);
}

.graph-btn-label {
  font-size: 11px;
}

/* ── Graph Depth Selector ── */
.graph-depth-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}

.depth-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(140, 150, 180, 0.5);
}

.depth-buttons {
  display: flex;
  gap: 2px;
}

.depth-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(140, 150, 180, 0.5);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.depth-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(200, 210, 230, 0.8);
}

.depth-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

/* ── Dimension Controls ── */
.dim-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.dim-toggle-btn {
  font-size: 12px !important;
  width: 24px !important;
  height: 22px !important;
}

.dim-toggle-btn.active {
  background: rgba(176, 124, 232, 0.18);
  color: #7C3AED;
}

.dim-axis-panel {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dim-axis-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dim-axis-label {
  font-size: 9px;
  font-weight: 600;
  color: rgba(176, 124, 232, 0.6);
  width: 10px;
  text-align: right;
}

.dim-axis-select {
  font-size: 9px;
  padding: 2px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(200, 210, 230, 0.7);
  outline: none;
  min-width: 50px;
  max-width: 80px;
  cursor: pointer;
}

.dim-axis-select:hover {
  border-color: rgba(176, 124, 232, 0.3);
}

.dim-axis-select:focus {
  border-color: rgba(176, 124, 232, 0.5);
}

/* ── Today View ── */
/* ============================================
   TIMELINE VIEW
   ============================================ */
.tl-view {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.tl-sidebar {
  width: 220px;
  min-width: 220px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.tl-cal {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.tl-sidebar-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.tl-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

.tl-stat-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: 'SF Mono', 'Menlo', monospace;
}

/* Main Area */
.tl-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Controls Bar */
.tl-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 16px;
  flex-shrink: 0;
}

.tl-controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.tl-range-select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}

.tl-range-select:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tl-type-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}

.tl-type-chips::-webkit-scrollbar {
  display: none;
}

.tl-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms;
  flex-shrink: 0;
}

.tl-type-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.tl-type-chip.active {
  color: var(--text);
}

.tl-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tl-chip-count {
  color: var(--text-muted);
  font-size: 10px;
}

/* Zoom Toggle */
.tl-zoom-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.tl-zoom-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 150ms;
}

.tl-zoom-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.tl-zoom-btn.active {
  background: var(--accent);
  color: #111;
}

/* Timeline Content */
.tl-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 24px 48px;
}

/* Vertical Track */
.tl-track {
  position: relative;
  padding-left: 28px;
}

.tl-track::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 0.5px;
}

/* Date Headers */
.tl-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
  position: relative;
}

.tl-date-dot {
  position: absolute;
  left: -23px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  z-index: 1;
}

.tl-date-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}

.tl-date-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.tl-date-count {
  font-size: 10px;
  color: var(--text-faint, rgba(255, 255, 255, 0.3));
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  margin-left: auto;
}

/* Event Items — clean info display (no card box) */
.tl-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
  transition: background 120ms;
  border-radius: var(--radius-sm);
}

.tl-event:hover {
  background: rgba(255, 255, 255, 0.03);
}

.tl-event.tl-selected {
  background: rgba(255, 255, 255, 0.06);
}

.tl-event-dot {
  position: absolute;
  left: -22px;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  z-index: 1;
  flex-shrink: 0;
}

.tl-event-dot.green {
  background: #4ade80;
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.2);
}

.tl-event-dot.blue {
  background: #06B6D4;
  box-shadow: 0 0 4px rgba(96, 165, 250, 0.2);
}

.tl-event-body {
  flex: 1;
  min-width: 0;
}

.tl-event-card {
  flex: 1;
  background: none;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 2px 0;
  transition: none;
}

.tl-event:hover .tl-event-card {
  background: none;
  border-color: transparent;
  transform: none;
}

.tl-event-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-event-time {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Menlo', monospace;
  flex-shrink: 0;
}

.tl-event-icon {
  flex-shrink: 0;
  font-size: 12px;
}

.tl-event-icon svg {
  width: 12px;
  height: 12px;
}

.tl-event-title {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tl-event-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.tl-event-type {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.tl-event-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  color: var(--text-faint, rgba(255, 255, 255, 0.3));
}

.badge-created {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.badge-updated {
  background: rgba(96, 165, 250, 0.15);
  color: #06B6D4;
}

/* Week Mode Cards */
.tl-week-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  position: relative;
  cursor: pointer;
}

.tl-week-dot {
  position: absolute;
  left: -22px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 1;
}

.tl-week-body {
  flex: 1;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: all 150ms;
}

.tl-week-card:hover .tl-week-body {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

.tl-week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.tl-week-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.tl-week-total {
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.tl-week-counts {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

.tl-week-created {
  font-size: 12px;
  color: #4ade80;
}

.tl-week-updated {
  font-size: 12px;
  color: #06B6D4;
}

.tl-week-types {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tl-week-type-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Month Mode (Heatmap) */
.tl-month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  padding: 8px 0;
}

.tl-month-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 150ms;
  gap: 2px;
  border: 1px solid transparent;
}

.tl-month-cell:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.tl-month-cell.level-1 {
  background: rgba(74, 222, 128, 0.08);
}

.tl-month-cell.level-2 {
  background: rgba(74, 222, 128, 0.18);
}

.tl-month-cell.level-3 {
  background: rgba(74, 222, 128, 0.3);
}

.tl-month-cell.level-4 {
  background: rgba(74, 222, 128, 0.45);
}

.tl-month-cell.today {
  border: 2px solid var(--accent);
}

.tl-month-day {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.tl-month-count {
  font-size: 10px;
  color: var(--text-muted);
}

.tl-month-summary {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  justify-content: center;
}

.tl-month-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.tl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tl-dot.green {
  background: #4ade80;
}

.tl-dot.blue {
  background: #06B6D4;
}

/* Load More */
.tl-load-more {
  text-align: center;
  padding: 16px;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background 150ms;
}

.tl-load-more:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Empty State */
.tl-empty {
  text-align: center;
  padding: 60px 0;
}

.tl-empty-icon {
  font-size: 42px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.tl-empty-text {
  font-size: 14px;
  color: var(--text-muted);
}

/* Calendar Grid (used in Timeline sidebar) */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
}

.cal-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cal-nav {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
}

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

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day-header {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms;
  position: relative;
  gap: 2px;
}

.cal-cell.empty {
  cursor: default;
}

.cal-cell:not(.empty):hover {
  background: rgba(255, 255, 255, 0.06);
}

.cal-day-num {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 400;
}

.cal-cell.today .cal-day-num {
  color: var(--accent);
  font-weight: 600;
}

.cal-cell.selected {
  background: var(--accent);
}

.cal-cell.selected .cal-day-num {
  color: #111;
  font-weight: 600;
}

.cal-cell.selected.today {
  background: var(--accent);
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.cal-cell.selected .cal-dot {
  background: rgba(255, 255, 255, 0.7);
}

/* ============================================
   DOCKED TIMELINE PANEL (right of AI sidebar)
   ============================================ */
.timeline-docked-panel {
  position: fixed;
  top: 40px;
  bottom: 0;
  width: 340px;
  background: #212121;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 100;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-docked-panel.open {
  opacity: 1;
  transform: translateX(0);
}

.tl-docked-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: none;
  flex-shrink: 0;
}

.tl-docked-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.tl-docked-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 150ms;
}

.tl-docked-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.tl-docked-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tl-docked-resizer {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
}

.tl-docked-resizer:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   SIDEBAR TIMELINE PANEL — Vertical Ruler
   ============================================ */
.tl-side-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ── Controls Bar (year input + scale buttons) ── */
.tl-controls-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  flex-shrink: 0;
  border-bottom: none;
}

.tl-year-search {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.tl-year-search input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 11px;
  outline: none;
  transition: border-color 200ms, box-shadow 200ms;
  font-family: 'SF Mono', 'Menlo', monospace;
}

.tl-year-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(212, 244, 65, 0.15);
}

.tl-year-search input::placeholder {
  color: var(--text-faint);
  opacity: 0.5;
}

.tl-year-go {
  display: none;
}

.tl-year-go:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.tl-scale-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.tl-scale-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-faint);
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 9px;
  cursor: pointer;
  transition: all 150ms;
  white-space: nowrap;
}

.tl-scale-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.tl-scale-btn.active {
  background: rgba(212, 244, 65, 0.12);
  border-color: rgba(212, 244, 65, 0.3);
  color: var(--accent);
  font-weight: 600;
}

/* ── Unified Scroll Container (single scrollable area) ── */
.tl-unified-scroll {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* ── List section ── */
.tl-side-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.tl-ruler-info {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px 10px 4px;
  font-size: 9px;
  color: var(--text-faint);
  font-family: 'SF Mono', 'Menlo', monospace;
  flex-shrink: 0;
}

.tl-ruler-range {
  opacity: 0.8;
}

.tl-ruler-zoom-level {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 8px;
  letter-spacing: 0.03em;
}

.tl-ruler-hint {
  opacity: 0.5;
  margin-left: auto;
  font-size: 8px;
}

.tl-side-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.tl-side-count {
  font-size: 10px;
  color: var(--text-faint);
  font-family: 'SF Mono', 'Menlo', monospace;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 7px;
  border-radius: var(--radius-lg);
}

.tl-side-filters {
  padding: 6px 16px 12px;
  flex-shrink: 0;
}

.tl-side-range {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.tl-side-range input {
  width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 11px;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.tl-side-range input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 139, 92, 246), 0.15);
}

.tl-side-range-sep {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
}

.tl-side-range-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 150ms;
}

.tl-side-range-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.tl-side-reset {
  font-size: 13px;
  line-height: 1;
  padding: 4px 7px;
}

/* ── Type Filter Chips ── */
.tl-side-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 4px 10px;
}

.tl-side-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 150ms;
  font-weight: 500;
}

.tl-side-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.tl-side-chip.active {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.tl-side-chip-n {
  font-size: 9px;
  opacity: 0.5;
  font-weight: 400;
}

/* ── Scrollable Timeline List with inline ruler ── */
/* ── Timeline Scroll Wrapper (ruler + events side-by-side) ── */
.tl-side-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.tl-list-inner {
  display: flex;
  min-height: 100%;
}

/* ── Vertical Ruler Track (left column) ── */
.tl-ruler-track {
  width: 40px;
  flex-shrink: 0;
  position: relative;
  user-select: none;
}

/* Vertical spine line */
.tl-ruler-track::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* ── Ruler Tick (each row in the ruler column) ── */
.tl-rtick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}

/* Minor tick: short horizontal line */
.tl-rtick::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* Major tick: longer line + amber label */
.tl-rtick.major::before {
  width: 10px;
  height: 1px;
  background: rgba(212, 175, 55, 0.5);
}

/* Super-major tick (century boundaries etc.) */
.tl-rtick.super::before {
  width: 14px;
  height: 1.5px;
  background: rgba(212, 175, 55, 0.7);
}

.tl-rtick-label {
  font-size: 8px;
  font-family: 'SF Mono', 'Menlo', monospace;
  color: rgba(200, 200, 210, 0.7);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  text-align: right;
}

.tl-rtick.super .tl-rtick-label {
  font-size: 9px;
  color: rgba(200, 200, 210, 0.9);
  font-weight: 600;
}

/* Arrow marker for major ticks */
.tl-rtick-arrow {
  position: absolute;
  right: -3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
  color: rgba(212, 175, 55, 0.6);
  line-height: 1;
}

/* ── Events Column (right side) ── */
.tl-events-col {
  flex: 1;
  min-width: 0;
  padding: 0 6px 16px 8px;
}

/* ── Year Group ── */
.tl-side-year {
  position: relative;
  margin-bottom: 0;
}

.tl-side-year.tl-year-selected {
  /* Highlight is handled on items, no tick needed */
}

/* ── Year Header ── */
.tl-side-year-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 10px 6px 5px 10px;
  position: sticky;
  top: 0;
  background: #212121;
  z-index: 2;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tl-side-year-count {
  font-size: 9px;
  color: var(--text-faint);
  margin-left: 2px;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 5px;
  border-radius: 8px;
}

/* ── Individual Timeline Item ── */
.tl-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  position: relative;
}



.tl-side-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Selected item — yellow tick */
.tl-side-selected {
  background: rgba(250, 204, 21, 0.08) !important;
  outline: 1px solid rgba(250, 204, 21, 0.2);
}

.tl-side-selected::before {
  background: #F59E0B !important;
  height: 2px !important;
  left: -17px !important;
  width: 16px !important;
}

/* ── Item icon ── */
.tl-side-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.tl-side-icon svg {
  width: 12px;
  height: 12px;
}

/* ── Item name ── */
.tl-side-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 450;
}

/* ── Item date ── */
.tl-side-date {
  font-size: 9px;
  color: var(--text-faint);
  flex-shrink: 0;
  font-family: 'SF Mono', 'Menlo', monospace;
  opacity: 0.7;
}

.tl-side-item:hover .tl-side-date {
  opacity: 1;
}

/* ── Load More ── */
.tl-side-loadmore {
  text-align: center;
  padding: 12px;
  color: var(--accent);
  font-size: 11px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-left: 24px;
  transition: all 150ms;
}

.tl-side-loadmore:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Empty / Loading ── */
.tl-side-loading,
.tl-side-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 24px;
}

/* ============================================
   IMPORT MODAL
   ============================================ */
.import-modal {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 720px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

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

.import-header h2 {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.import-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.import-loading,
.import-error {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
}

.import-error {
  color: #EC4899;
}

.import-vault-path {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.import-vault-path svg {
  width: 12px;
  height: 12px;
}

/* Type Picker Grid */
.import-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.import-type-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
}

.import-type-card:hover:not(.disabled) {
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.import-type-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.itc-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

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

.itc-map {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Import Toolbar */
.import-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.import-tb-title {
  font-size: 13px;
  font-weight: 600;
  margin-right: auto;
}

.import-search {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  width: 120px;
  outline: none;
}

/* Import Table */
.import-table-wrap {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  text-align: left;
  padding: 6px 8px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.import-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.04));
}

.import-table tbody tr:hover {
  background: var(--bg-hover);
}

.import-title {
  font-weight: 500;
}

.import-preview {
  color: var(--text-muted);
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-props {
  text-align: center;
  color: var(--text-faint);
}

.import-check {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
}

/* Import Result */
.import-result {
  text-align: center;
  padding: 40px 20px;
}

.import-result-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.import-result-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.import-result-stats {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 13px;
}

.irs-imported {
  color: #4ade80;
}

.irs-skipped {
  color: var(--text-muted);
}

/* ── Type Change Popup ── */
.type-change-popup {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  background: rgba(30, 30, 34, 0.50);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
  animation: fadeInPopup 0.15s ease-out;
}

.type-change-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2px;
  padding-top: 2px;
  flex-shrink: 0;
}

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

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

.type-change-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 8px 6px;
}

.type-change-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 6px;
}

.type-change-search input {
  flex: 1;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  transition: border-color 0.15s;
}

.type-change-search input:focus {
  border-color: var(--accent);
}

.type-change-search input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

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

.type-change-list {
  flex: 1;
  min-height: 0;
  max-height: 280px;
  overflow-y: auto;
}

.type-change-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.12s;
}

.type-change-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.type-change-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.type-change-item .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.type-change-no-match {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 10px;
  text-align: center;
}

.type-change-search-hint {
  display: none;
}

/* ── Custom Field Type Dropdown ── */
.cfg-field-type-dropdown {
  position: relative;
}

.cfg-field-type-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: left;
  transition: border-color 0.15s;
}

.cfg-field-type-btn:hover {
  border-color: var(--accent);
}

.cfg-field-type-btn .ft-icon {
  display: flex;
  align-items: center;
}

.cff-arrow-sm {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.5;
}

.cfg-ft-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: rgba(10, 10, 14, 0.50);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 200;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  animation: fadeInPopup 0.12s ease-out;
}

.cfg-ft-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.cfg-ft-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.cfg-ft-option.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.cfg-ft-option .ft-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Enhanced Relation Picker Options ── */
.rel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  font-size: 13px;
  color: var(--text-secondary);
}

.rel-option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.rel-option.disabled {
  cursor: default;
  opacity: 0.4;
}

.rel-option-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.rel-option-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rel-option-type {
  font-size: 11px;
  opacity: 0.45;
  flex-shrink: 0;
}

.rel-option-create {
  border-top: 1px solid var(--border-color);
  margin-top: 2px;
  padding-top: 8px;
}

.rel-option-create .rel-option-title {
  color: #4ade80;
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   TABLE EDITOR — Notion-like inline database
   ═══════════════════════════════════════════ */
.table-editor {
  margin: 16px 0;
}

.te-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.te-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.te-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-primary);
  table-layout: auto;
}

/* Header */
.te-th {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0;
  font-weight: 500;
  text-align: left;
  min-width: 140px;
  position: relative;
}

.te-th-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
}

.te-th-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.te-th-name {
  flex: 1;
  outline: none;
  cursor: text;
  border-radius: 3px;
  padding: 1px 3px;
  transition: background 0.12s;
}

.te-th-name:focus {
  background: rgba(255, 255, 255, 0.08);
}

.te-th-menu {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.12s;
}

.te-th:hover .te-th-menu {
  opacity: 1;
}

.te-th-menu:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Row number column */
.te-row-num {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  position: relative;
  padding: 0 4px;
}

thead .te-row-num {
  border-bottom: 2px solid var(--border-color);
}

.te-rn {
  display: block;
}

.te-row-del {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(248, 113, 113, 0.1);
  border: none;
  color: #EC4899;
  cursor: pointer;
  font-size: 11px;
  align-items: center;
  justify-content: center;
}

.te-row:hover .te-row-del {
  display: flex;
}

.te-row:hover .te-rn {
  display: none;
}

/* Data cells */
.te-cell {
  border-bottom: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  padding: 0;
  vertical-align: middle;
}

.te-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 7px 8px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}

.te-input:focus {
  background: rgba(99, 102, 241, 0.06);
}

.te-number {
  font-variant-numeric: tabular-nums;
}

.te-date {
  color-scheme: dark;
}

.te-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 8px center;
  padding-right: 24px;
}

.te-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  cursor: pointer;
}

.te-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.te-pad {
  border: none;
  width: 0;
}

/* Add column / row */
.te-add-col {
  min-width: 44px;
  width: 44px;
  text-align: center;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.12s;
  padding: 7px 0;
}

.te-add-col:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

.te-add-icon {
  display: inline-flex;
  align-items: center;
}

.te-add-row {
  text-align: left;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  transition: color 0.12s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.te-add-row:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

/* Column context menu */
.te-col-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  min-width: 180px;
  animation: fadeInPopup 0.12s ease-out;
}

.te-menu-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 4px 8px 2px;
  margin-top: 2px;
}

.te-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.te-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.te-menu-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.te-menu-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.te-menu-danger {
  color: #EC4899;
}

.te-menu-danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

.te-menu-sep {
  height: 1px;
  background: var(--border-color);
  margin: 4px 0;
}

.te-menu-input {
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  outline: none;
}

.te-menu-input:focus {
  border-color: var(--accent);
}

/* ═══════════════════════════════════════════
   CUSTOM DARK DATE PICKER
   ═══════════════════════════════════════════ */

/* Trigger button */
.dark-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 8px;
  min-height: 26px;
}

.dark-date-display {
  flex: 1;
  font-size: 13px;
}

.dark-date-placeholder {
  color: var(--text-placeholder);
}

.dark-date-icon {
  display: flex;
  align-items: center;
  opacity: 0.4;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.dark-date-trigger:hover .dark-date-icon {
  opacity: 0.9;
}

/* Calendar popup */
.dark-dp {
  background: var(--bg-elevated, #161618);
  border: 1px solid var(--border-light, #333);
  border-radius: 12px;
  padding: 12px;
  width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  font-family: inherit;
  user-select: none;
}

.dark-dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

.dark-dp-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #e8e8e8);
}

.dark-dp-nav {
  display: flex;
  gap: 4px;
}

.dark-dp-btn {
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, #161618);
  color: var(--text-secondary, #a0a0a0);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.dark-dp-btn:hover {
  background: var(--bg-active, rgba(255, 255, 255, 0.08));
  color: var(--text, #e8e8e8);
}

.dark-dp-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.dark-dp-day-name {
  font-size: 11px;
  color: var(--text-muted, #666);
  padding: 4px 0;
  font-weight: 500;
}

.dark-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dark-dp-cell {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary, #a0a0a0);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.dark-dp-cell:hover {
  background: var(--accent-dim, rgba(212, 244, 65, 0.15));
  color: var(--text, #e8e8e8);
}

.dark-dp-empty {
  cursor: default;
}

.dark-dp-today {
  color: var(--accent, #D4F441);
  font-weight: 700;
  position: relative;
}

.dark-dp-today::after {
  content: '';
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #D4F441);
}

.dark-dp-selected {
  background: var(--accent, #D4F441) !important;
  color: #fff !important;
  font-weight: 600;
}

.dark-dp-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #161618);
}

.dark-dp-clear,
.dark-dp-today-btn {
  width: auto;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.dark-dp-today-btn {
  color: var(--accent, #D4F441);
}

.dark-dp-today-btn:hover {
  background: var(--accent-dim, rgba(212, 244, 65, 0.15));
}

/* Hide native date inputs if any remain */
input[type="date"] {
  color-scheme: dark;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  cursor: pointer;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field {
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════
   TABLE INSERT / REMOVE BUTTONS
   ═══════════════════════════════════════════ */
.te-insert-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  margin: 12px 0;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--radius);
  border: 1px dashed var(--border-color);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.te-insert-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.04);
}

.te-remove-btn {
  display: inline-block;
  padding: 4px 10px;
  margin: 6px 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}

.te-remove-btn:hover {
  color: #EC4899;
  background: rgba(248, 113, 113, 0.08);
}

/* ═══════════════════════════════════════════
   SIDEBAR NEW TYPE BUTTON
   ═══════════════════════════════════════════ */
.nav-add-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: var(--radius-sm);
  margin-left: 6px;
  vertical-align: middle;
  transition: all 0.12s;
}

.nav-add-type:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

.nav-add-type svg {
  width: 11px;
  height: 11px;
}

/* ═══════════════════════════════════════════
   NEW TYPE DIALOG
   ═══════════════════════════════════════════ */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.nt-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.nt-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.12s, transform 0.12s;
}

.nt-color-swatch:hover {
  transform: scale(1.15);
}

.nt-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════
   INLINE TABLE (inside node content)
   ═══════════════════════════════════════════ */
.node-inline-table {
  margin: 8px 0 4px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  outline: none;
  transition: border-color 0.15s;
}

.node-inline-table:focus {
  outline: none;
}

.node-inline-table.it-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

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

.inline-table th,
.inline-table td {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  min-width: 60px;
  vertical-align: top;
  outline: none;
}

.inline-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inline-table td {
  color: var(--text-primary);
}

.inline-table td:focus,
.inline-table th:focus {
  background: rgba(99, 102, 241, 0.06);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.it-col-add {
  width: 28px !important;
  min-width: 28px !important;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 400;
  transition: color 0.12s, background 0.12s;
  user-select: none;
}

.it-col-add:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.08);
}

.it-row-del {
  width: 28px !important;
  min-width: 28px !important;
  text-align: center;
  cursor: pointer;
  color: transparent;
  font-size: 14px;
  transition: color 0.12s;
  user-select: none;
  border: none !important;
}

tr:hover .it-row-del {
  color: var(--text-muted);
}

.it-row-del:hover {
  color: #EC4899 !important;
}

.it-toolbar {
  display: flex;
  gap: 8px;
  padding: 4px 8px;
  border-top: 1px solid var(--border-color);
}

.it-btn {
  font-size: 11px;
  padding: 3px 8px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  user-select: none;
}

.it-btn:hover {
  color: var(--accent);
  background: rgba(99, 102, 241, 0.06);
}

.it-btn-danger:hover {
  color: #EC4899;
  background: rgba(248, 113, 113, 0.06);
}

/* ============================================ */
/*  MANUSCRIPT MODAL                            */
/* ============================================ */
.ms-modal {
  width: min(1100px, 96vw);
  height: min(700px, 88vh);
  background: rgba(28, 28, 35, 0.92);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Manuscript-specific overlay: heavier frosted glass */
#msOverlay {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

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

.ms-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.ms-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.ms-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.ms-left textarea {
  flex: 1;
  padding: 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.7;
  resize: none;
  font-family: inherit;
}

.ms-left textarea:focus {
  outline: none;
}

.ms-left textarea::placeholder {
  color: var(--text-muted);
}

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

.ms-right {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.ms-empty,
.ms-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* Summary */
.ms-summary {
  padding: 10px 14px;
  background: var(--accent-bg);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
}

/* Toolbar */
.ms-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 2px;
}

.ms-select-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Cards */
.ms-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.ms-card {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}

.ms-card:hover {
  border-color: var(--accent);
}

.ms-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ms-card-icon {
  font-size: 14px;
  display: flex;
}

.ms-card-type {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ms-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  margin-left: auto;
}

.ms-badge-new {
  background: rgba(34, 197, 94, 0.28);
  color: #ffffff;
}

.ms-badge-exists {
  background: rgba(156, 163, 175, 0.15);
  color: #78716C;
}

.ms-badge-dup {
  background: rgba(251, 191, 36, 0.15);
  color: #F59E0B;
}

.ms-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ms-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Connections */
.ms-conn-section {
  margin-bottom: 16px;
}

.ms-conn-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ms-conn-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ms-conn-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 5px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.ms-conn-from,
.ms-conn-to {
  color: var(--text-primary);
  font-weight: 500;
}

.ms-conn-arrow {
  color: var(--text-muted);
  white-space: nowrap;
}

.ms-conn-arrow em {
  color: var(--accent);
  font-style: normal;
}

/* Import actions */
.ms-import-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.ms-save-raw {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}

/* Spinner for parse loading */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* Duplicate confirmation */
.ms-card-dup {
  border-color: rgba(251, 191, 36, 0.4);
}

.ms-card-resolved {
  opacity: 0.7;
}

.ms-dup-panel {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--radius-sm);
}

.ms-dup-panel.is-open {
  display: block;
}

.ms-dup-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ms-dup-existing {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  border: 1px solid var(--border);
}

.ms-dup-existing-icon {
  display: flex;
  align-items: center;
}

.ms-dup-existing-icon svg {
  width: 14px;
  height: 14px;
}

.ms-dup-existing-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.ms-dup-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ms-dup-btn-use {
  background: rgba(156, 163, 175, 0.15) !important;
  color: #78716C !important;
  border: 1px solid rgba(156, 163, 175, 0.3) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.ms-dup-btn-use:hover {
  background: rgba(156, 163, 175, 0.25) !important;
}

.ms-dup-btn-new {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #D4F441 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.ms-dup-btn-new:hover {
  background: rgba(34, 197, 94, 0.25) !important;
}

/* Icon sizing in cards */
.ms-card-icon svg {
  width: 14px;
  height: 14px;
}

/* SVG checkbox */
.ms-chk,
.ms-select-all>span,
.ms-save-raw>span {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  vertical-align: middle;
}

.ms-svg-check {
  display: block;
}

.ms-select-all,
.ms-save-raw {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Unknown type */
.ms-card-unknown {
  border-color: rgba(239, 68, 68, 0.4);
}

.ms-badge-unknown {
  background: rgba(239, 68, 68, 0.15);
  color: #EC4899;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.ms-unknown-panel {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
}

.ms-unknown-panel.is-open {
  display: block;
}

.ms-unknown-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.ms-unknown-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ms-unknown-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ms-unknown-opt-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ms-type-select {
  flex: 1;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
}

.ms-type-select:focus {
  border-color: var(--accent);
}

.ms-unknown-divider {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
}

.ms-unknown-btn-create {
  background: rgba(212, 244, 65, 0.15) !important;
  color: #D4F441 !important;
  border: 1px solid rgba(212, 244, 65, 0.3) !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ms-unknown-btn-create:hover {
  background: rgba(212, 244, 65, 0.25) !important;
}

/* ── Quick Create Object Modal ── */
.qc-modal {
  width: min(480px, 92vw);
  background: rgba(28, 28, 35, 0.95);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  animation: modalSlideIn 0.2s ease;
}

.qc-modal.moko-modal {
  padding: 0;
}

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

.qc-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.qc-header h3 svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.qc-body {
  padding: 16px 20px;
}

/* ── Kind / Strength Selector Button Group (M1) ── */
.qc-kind-group {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.qc-kind-label,
.qc-title-label {
  margin-top: 12px;
}

.qc-kind-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.qc-kind-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border-color: rgba(255, 255, 255, 0.18);
}

.qc-kind-btn.active {
  background: rgba(212, 244, 65, 0.12);
  border-color: rgba(212, 244, 65, 0.35);
  color: #D4F441;
}

/* ── M2: Profile Panel (L3 属性层) ── */
.profile-panel {
  margin: 8px 0;
  padding: 0 8px;
}

.profile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.profile-panel-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.profile-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-panel-title .chevron {
  transition: transform 0.2s;
  font-size: 10px;
  color: var(--text-muted);
}

.profile-panel-title .chevron.collapsed {
  transform: rotate(-90deg);
}

.profile-dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}

.profile-dim-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.profile-dim-label {
  width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dim-value {
  flex: 1;
  min-width: 0;
}

.profile-dim-value input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  color: var(--text-primary);
  transition: border-color 0.15s;
}

.profile-dim-value input:hover {
  border-color: rgba(255, 255, 255, 0.10);
}

.profile-dim-value input:focus {
  border-color: rgba(212, 244, 65, 0.35);
  outline: none;
  background: rgba(255, 255, 255, 0.03);
}

.profile-scale-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.profile-scale-btn {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-scale-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
}

.profile-scale-btn.active {
  background: rgba(212, 244, 65, 0.10);
  border-color: rgba(212, 244, 65, 0.30);
  color: #D4F441;
}

.profile-empty-hint {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.profile-add-dim-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.profile-add-dim-btn:hover {
  border-color: rgba(212, 244, 65, 0.30);
  color: #D4F441;
  background: rgba(212, 244, 65, 0.05);
}

/* ── Dynamics Timeline (AI 研究动态) ── */
.dynamics-panel {
  margin: 16px 0 8px;
  padding: 0 8px;
}

.dynamics-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.dynamics-panel-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.dynamics-panel-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.dynamics-count {
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 7px;
  border-radius: 8px;
}

.dynamics-timeline {
  position: relative;
  padding: 4px 0 8px 22px;
}

.dynamics-item {
  position: relative;
  padding: 8px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.dynamics-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dynamics-dot {
  position: absolute;
  left: -16px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #06B6D4);
  border: 2px solid var(--bg-card, #141416);
  z-index: 1;
}

.dynamics-line {
  position: absolute;
  left: -13px;
  top: 22px;
  bottom: -4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.dynamics-item:last-child .dynamics-line {
  display: none;
}

.dynamics-date {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.dynamics-topic {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}

.dynamics-phase {
  font-size: 10px;
  color: var(--accent, #06B6D4);
  margin-top: 2px;
  opacity: 0.8;
}

/* ── M2: Process Timeline (L4 动态层) ── */
.process-panel {
  margin: 16px 0 8px;
  padding: 0 8px;
}

.process-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 6px;
  cursor: pointer;
  user-select: none;
}

.process-panel-header:hover {
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.process-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.process-card {
  margin: 6px 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: border-color 0.15s;
}

.process-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

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

.process-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.process-card-name .cyclic-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.12);
  color: #06b6d4;
  font-weight: 500;
}

.process-card-actions {
  display: flex;
  gap: 4px;
}

.process-card-actions button {
  padding: 2px 6px;
  font-size: 11px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.process-card-actions button:hover {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
}

.process-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 4px;
  overflow-x: auto;
  position: relative;
}

.process-state-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
}

.process-state-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(212, 244, 65, 0.40);
  background: rgba(212, 244, 65, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #D4F441;
  cursor: pointer;
  transition: all 0.15s;
}

.process-state-circle:hover {
  border-color: #D4F441;
  background: rgba(212, 244, 65, 0.15);
  transform: scale(1.1);
}

.process-state-circle.form-type {
  border-radius: var(--radius-sm);
  border-color: rgba(168, 85, 247, 0.40);
  background: rgba(168, 85, 247, 0.08);
  color: #7C3AED;
}

.process-state-circle.form-type:hover {
  border-color: #7C3AED;
  background: rgba(168, 85, 247, 0.15);
}

.process-state-label {
  font-size: 10px;
  color: var(--text-muted);
  max-width: 60px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  flex-shrink: 0;
}

.process-arrow-line {
  width: 40px;
  height: 0;
  border-top: 1.5px solid rgba(255, 255, 255, 0.15);
  position: relative;
}

.process-arrow-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -4px;
  border: 4px solid transparent;
  border-left-color: rgba(255, 255, 255, 0.25);
}

.process-arrow-trigger {
  font-size: 9px;
  color: var(--text-muted);
  max-width: 50px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

/* ── Unified L-Section Styles (DEFINITION / DYNAMICS / CATEGORY) ── */

/* 5-Layer Completeness Indicator */
.layer-completeness {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  margin: 0 0 4px;
}

.layer-completeness-label {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: 0.3px;
  margin-right: 4px;
  text-transform: uppercase;
}

.lc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s;
  cursor: default;
  position: relative;
}

.lc-dot.done {
  background: rgba(52, 211, 153, 0.3);
  border-color: #D4F441;
}

.lc-dot.missing {
  cursor: pointer;
}

.lc-dot.missing:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.3);
}

.lc-score {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}

.process-panel-title .chevron,
.def-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
  color: var(--text-muted);
}

.process-panel-title .chevron.collapsed,
.def-chevron.collapsed {
  transform: rotate(-90deg);
}

/* Section divider between L-sections */
.process-panel+.process-panel,
.definition-section+.process-panel,
.process-panel:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* DYNAMICS Timeline */
.dynamics-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 4px;
  overflow-x: auto;
}

.dynamics-timeline::-webkit-scrollbar {
  height: 3px;
}

.dynamics-timeline::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.dyn-state-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  flex-shrink: 0;
}

.dyn-state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: var(--bg-main);
  transition: all 0.2s;
}

.dyn-state-dot.initial {
  border-color: #D4F441;
  background: rgba(52, 211, 153, 0.2);
}

.dyn-state-dot.terminal {
  border-color: #EC4899;
  background: rgba(248, 113, 113, 0.2);
}

.dyn-state-dot.functional {
  border-color: #06B6D4;
  background: rgba(96, 165, 250, 0.15);
}

.dyn-state-name {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dyn-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 30px;
  flex-shrink: 0;
  position: relative;
}

.dyn-arrow-line {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
}

.dyn-arrow-line::after {
  content: '›';
  position: absolute;
  right: -2px;
  top: -7px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
}

.dyn-arrow-trigger {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 2px;
  text-align: center;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state with AI trigger */
.process-empty-hint {
  padding: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

.l-section-ai-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.l-section-ai-trigger:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.process-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
}

.process-add-btn:hover {
  border-color: rgba(212, 244, 65, 0.30);
  color: #D4F441;
  background: rgba(212, 244, 65, 0.05);
}

/* Process create/edit modal overlay */
.process-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-modal {
  background: var(--bg-card, #141416);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  min-width: 340px;
  max-width: 420px;
}

.process-modal h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.process-modal label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  margin-top: 10px;
}

.process-modal input[type="text"],
.process-modal textarea,
.process-modal select {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.process-modal input:focus,
.process-modal textarea:focus,
.process-modal select:focus {
  outline: none;
  border-color: rgba(212, 244, 65, 0.35);
}

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

.process-modal-actions .btn-cancel {
  padding: 5px 14px;
  font-size: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.process-modal-actions .btn-save {
  padding: 5px 14px;
  font-size: 12px;
  background: rgba(212, 244, 65, 0.15);
  border: 1px solid rgba(212, 244, 65, 0.30);
  border-radius: var(--radius-sm);
  color: #D4F441;
  cursor: pointer;
  font-weight: 600;
}

.process-modal-actions .btn-save:hover {
  background: rgba(212, 244, 65, 0.25);
}

/* ── Sidebar group toggle ── */
.nav-group-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-group-toggle:hover {
  color: var(--text);
}

/* ── Quick Create grouped layout ── */
.qc-group-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 10px 0 4px;
  padding: 0 2px;
  letter-spacing: 0.03em;
}

.qc-group-label:first-child {
  margin-top: 0;
}

.qc-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.qc-type-grid {
  max-height: 340px;
  overflow-y: auto;
}


.qc-type-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  background: rgba(255, 255, 255, 0.03);
}

.qc-type-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.qc-type-item.selected {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.12);
  color: var(--text);
}

.qc-type-item .type-svg-icon {
  flex-shrink: 0;
}

.qc-title-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 8px;
  margin-top: 6px;
}

.qc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.qc-new-type-link {
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.qc-new-type-link:hover {
  color: var(--purple);
}

.qc-create-btn {
  min-width: 80px;
}

.qc-create-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================ */
/*  DOMAIN RESEARCH MODAL                       */
/* ============================================ */
#researchOverlay {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.rs-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 12px 0 8px;
}

.rs-group {
  margin-bottom: 8px;
}

.rs-group-header {
  font-size: 12px;
  padding: 4px 0;
  margin-bottom: 4px;
}

.rs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  margin-bottom: 4px;
  transition: border-color 0.12s;
}

.rs-item:hover {
  border-color: var(--accent);
}

.rs-item-body {
  flex: 1;
  min-width: 0;
}

.rs-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rs-item-brief {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-conn-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rs-conn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}

.rs-detail-card {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.rs-detail-card:hover {
  border-color: var(--accent);
}

.rs-detail-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rs-detail-type {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 500;
}

.rs-detail-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.rs-detail-content {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-line;
}

/* ============================================
   KNOWLEDGE PANEL (right sidebar)
   ============================================ */

.kp-panel {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  background: var(--bg-main);
  border-radius: var(--radius-lg);
  margin-left: 6px;
  overflow: hidden;
  position: relative;
  z-index: 15;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}

.kp-resizer {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  flex-shrink: 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  transition: background 0.15s;
}

.kp-resizer:hover,
.kp-resizer:active {
  background: var(--accent);
}

.kp-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
}

.kp-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: none;
  flex-shrink: 0;
}

/* Contextual panel button (icon + label) */
.kp-ctx-panel-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.15s;
}

.kp-ctx-panel-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.kp-ctx-panel-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.kp-ctx-panel-label {
  white-space: nowrap;
}

.kp-header-icon {
  font-size: 14px;
}

/* ── History Toggle Button ── */
.kp-history-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.kp-history-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.kp-header-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Lens segmented control ── */
.kp-mode-toggle {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 1px;
  flex-shrink: 0;
}

.kp-mode-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

.kp-mode-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.kp-mode-btn.active {
  background: rgba(212, 244, 65, 0.2);
  color: #D4F441;
}

/* ── Prompt Suggestion Chips ── */
.kp-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 4px;
  flex-shrink: 0;
}

.kp-prompt-chip {
  background: rgba(212, 244, 65, 0.08);
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 11px;
  color: #D4F441;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.kp-prompt-chip:hover {
  background: rgba(212, 244, 65, 0.18);
  border-color: rgba(212, 244, 65, 0.4);
  color: #D4F441;
}

/* ── Mermaid Diagram Blocks in AI Chat ── */
.kp-mermaid-block {
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.kp-mermaid-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-mermaid-toggle {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.kp-mermaid-toggle:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
}

.kp-mermaid-toggle.active {
  color: #D4F441;
  background: rgba(212, 244, 65, 0.12);
}

.kp-mermaid-diagram {
  padding: 16px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.kp-mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}

.kp-mermaid-code {
  padding: 0;
}

.kp-mermaid-code pre {
  margin: 0;
  padding: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-secondary);
  overflow-x: auto;
  background: transparent;
}

/* ── AI Panel Breathing Glow Effect ── */
@keyframes kpBreathingGlow {
  0% {
    box-shadow: inset 0 0 0 1px rgba(212, 244, 65, 0.0), 0 0 8px rgba(212, 244, 65, 0.0);
  }

  50% {
    box-shadow: inset 0 0 0 1px rgba(212, 244, 65, 0.25), 0 0 18px rgba(212, 244, 65, 0.10);
  }

  100% {
    box-shadow: inset 0 0 0 1px rgba(212, 244, 65, 0.0), 0 0 8px rgba(212, 244, 65, 0.0);
  }
}

.kp-panel.kp-researching {
  animation: kpBreathingGlow 3s ease-in-out infinite;
}

/* ── History Panel ── */
.kp-history {
  position: absolute;
  top: var(--topbar-height);
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 100%;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: none;
  border-right: none;
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: kpHistorySlideIn 0.15s ease-out;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

/* Drag resize handle on right edge */
.kp-history-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  z-index: 101;
  transition: background 0.15s;
}

.kp-history-resizer:hover,
.kp-history-resizer.active {
  background: var(--accent, #D4F441);
}

@keyframes kpHistorySlideIn {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }

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

.kp-history-header {
  padding: 8px 16px 6px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kp-hi-search {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  outline: none;
}

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

.kp-hi-search::placeholder {
  color: var(--text-faint);
}

.kp-history-new {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kp-history-new:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--text-muted);
}

.kp-history-search {
  padding: 0 12px 8px;
  flex-shrink: 0;
}

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

.kp-history-search input:focus {
  border-color: var(--accent);
}

.kp-history-search input::placeholder {
  color: var(--text-faint);
}

.kp-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 12px;
  /* Fix Mac scrolling render gaps inside backdrop-filter parents */
  transform: translateZ(0);
  will-change: transform, scroll-position;
}

.kp-history-group {
  margin-bottom: 4px;
}

.kp-history-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 6px 4px;
  letter-spacing: 0.05em;
}

/* ── History Item (flex row) ── */
.kp-history-item {
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}

.kp-history-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.kp-history-item.active {
  background: rgba(212, 244, 65, 0.15);
}

.kp-hi-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kp-hi-text {
  flex: 1;
  min-width: 0;
}

.kp-history-item-title {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-history-item.active .kp-history-item-title {
  color: var(--text);
  font-weight: 500;
}

.kp-history-item-meta {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Star badge */
.kp-hi-star {
  color: #F59E0B;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Three-dot button */
.kp-hi-dots {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kp-history-item:hover .kp-hi-dots {
  opacity: 1;
}

.kp-hi-dots:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ── Context Menu ── */
.kp-hi-menu {
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 4px 0;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: kpHiMenuIn 0.1s ease-out;
}

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

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

.kp-hi-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
  transition: background 0.1s;
}

.kp-hi-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.kp-hi-menu-item svg {
  flex-shrink: 0;
}

.kp-hi-menu-arrow {
  margin-left: auto;
  opacity: 0.5;
  display: flex;
}

.kp-hi-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 4px 0;
}

.kp-hi-menu-danger {
  color: #EC4899;
}

.kp-hi-menu-danger:hover {
  background: rgba(232, 93, 93, 0.1);
  color: #f06;
}

/* ── Domain Sub-Panel ── */
.kp-hi-domain-sub {
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 0;
  min-width: 200px;
  max-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  animation: kpHiMenuIn 0.12s ease-out;
  overflow: hidden;
}

.kp-dom-l1,
.kp-dom-l2,
.kp-dom-l3 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #ccc;
  transition: background 0.1s;
}

.kp-dom-l1:hover,
.kp-dom-l2:hover,
.kp-dom-l3:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.kp-dom-l1.active,
.kp-dom-l2.active,
.kp-dom-l3.active {
  background: rgba(212, 244, 65, 0.1);
  color: var(--accent, #D4F441);
}

.kp-dom-l1 {
  font-weight: 600;
}

.kp-dom-l2 {
  padding-left: 22px;
  font-size: 11.5px;
}

.kp-dom-l3 {
  padding-left: 36px;
  font-size: 11px;
  color: #aaa;
}

.kp-domain-children {
  border-left: 1px solid #444;
  margin-left: 14px;
}

.kp-domain-expand {
  transition: transform 0.1s;
}

/* ── Categorize Modal ── */
.kp-hi-cat-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}

.kp-hi-cat-box {
  background: #141416;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.kp-hi-cat-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.kp-hi-cat-search {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text);
  outline: none;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.kp-hi-cat-search:focus {
  border-color: var(--accent);
}

.kp-hi-cat-search::placeholder {
  color: var(--text-faint);
}

.kp-hi-cat-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
}

.kp-hi-cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: background 0.1s;
}

.kp-hi-cat-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.kp-hi-cat-item.kp-hi-cat-active {
  background: rgba(212, 244, 65, 0.15);
  color: var(--text);
  font-weight: 500;
}

.kp-hi-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kp-hi-cat-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
}

.kp-hi-cat-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.kp-history-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-faint);
  font-size: 12px;
}

/* Keep old select hidden for backward compat */
.kp-session-select select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  max-width: 140px;
  cursor: pointer;
}

.kp-session-select select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Phase Progress ── */
.kp-progress {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  gap: 0;
  border-bottom: none;
  flex-shrink: 0;
  min-height: 24px;
}

.kp-progress-step {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.kp-progress-step.active {
  color: var(--accent);
  font-weight: 600;
}

.kp-progress-step.completed {
  color: var(--accent);
}

.kp-progress-line {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 4px;
  min-width: 8px;
}

.kp-progress-line.completed {
  background: var(--accent);
}

.kp-progress-line.active {
  background: var(--accent);
}

.kp-progress-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

.kp-progress-dot.active {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(212, 244, 65, 0.4);
}

.kp-progress-dot.completed {
  background: var(--accent);
  box-shadow: 0 0 4px rgba(212, 244, 65, 0.3);
}

/* ── Object Panel Research Progress ── */
.op-research-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 6px 0 8px;
  padding: 4px 0;
  cursor: pointer;
}

.op-rp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.op-rp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.op-rp-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(212, 244, 65, 0.4);
}

.op-rp-dot.done {
  background: rgba(212, 244, 65, 0.2);
  border-color: var(--accent);
}

.op-rp-dot.done svg {
  stroke: var(--accent);
}

.op-rp-title {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s;
}

.op-rp-step.active .op-rp-title {
  color: var(--accent);
  font-weight: 600;
}

.op-rp-step.done .op-rp-title {
  color: rgba(212, 244, 65, 0.6);
}

.op-rp-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  min-width: 6px;
  margin-top: 3px;
}

.op-rp-line.active,
.op-rp-line.done {
  background: var(--accent);
  opacity: 0.4;
}

/* ── Chat ── */
.kp-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Fix Mac scrolling render gaps inside backdrop-filter parents */
  transform: translateZ(0);
  will-change: transform, scroll-position;
}

.kp-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kp-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  line-height: 1.6;
  animation: kpSlideIn 0.25s ease;
}

@keyframes kpSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.kp-msg.user {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-bottom-right-radius: 3px;
  width: fit-content;
  max-width: 88%;
  text-align: right;
}

.kp-msg.assistant {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  border-bottom-left-radius: 3px;
  padding-left: 18px;
  padding-right: 18px;
  max-width: 100%;
}

.kp-msg mark {
  background: rgba(251, 191, 36, 0.25);
  color: inherit;
  padding: 1px 2px;
  border-radius: 2px;
}

.kp-msg.system {
  align-self: center;
  background: var(--green-dim);
  border: 1px solid rgba(74, 222, 128, 0.15);
  color: var(--green);
  font-size: 11px;
  text-align: center;
  max-width: 300px;
}

/* Markdown in messages */
.kp-msg p {
  margin-bottom: 6px;
}

.kp-msg p:last-child {
  margin-bottom: 0;
}

.kp-msg strong {
  color: var(--text);
  font-weight: 600;
}

.kp-msg em {
  color: var(--accent);
  font-style: normal;
}

.kp-msg code {
  background: var(--bg-input);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
}

.kp-msg ul,
.kp-msg ol {
  padding-left: 16px;
  margin-bottom: 6px;
}

.kp-msg li {
  margin-bottom: 2px;
}

.kp-msg h3,
.kp-msg h4 {
  margin: 8px 0 4px;
  color: var(--accent);
  font-size: 12px;
}

/* Typing indicator */
.kp-typing {
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 3px;
}

.kp-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: kpBounce 1.4s infinite;
}

.kp-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.kp-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes kpBounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* ── Search bar ── */
.kp-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.kp-search-bar .kp-search-input {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  flex: 1;
  font-family: inherit;
}

.kp-search-bar .kp-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.kp-search-bar .kp-search-input::placeholder {
  color: var(--text-muted);
}

.kp-search-bar button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}

.kp-search-bar button:hover {
  color: var(--text);
}

.kp-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.kp-search-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  font-family: inherit;
  min-width: 0;
}

.kp-search-input:focus {
  outline: none;
  border-color: var(--accent);
}

.kp-search-input::placeholder {
  color: var(--text-placeholder);
}

.kp-search-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 48px;
  text-align: center;
}

.kp-search-nav {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.kp-search-nav:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.kp-search-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  transition: color 0.15s;
}

.kp-search-close:hover {
  color: var(--text);
}

/* Search highlight */
mark.kp-search-hl {
  background: rgba(255, 200, 50, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.kp-msg.kp-search-current mark.kp-search-hl {
  background: rgba(255, 200, 50, 0.65);
}

.kp-msg.kp-search-current {
  outline: 1px solid rgba(255, 200, 50, 0.3);
  outline-offset: -1px;
  border-radius: var(--radius-sm);
}

/* ── Chat Empty State ── */
.kp-domain-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 60px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.kp-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.kp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
  gap: 16px;
}

.kp-empty-greeting {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.kp-empty-hints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.kp-hint-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.kp-hint-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
  color: var(--text);
  transform: translateY(-1px);
}

.kp-hint-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
}

.kp-empty-tip {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Document Upload Choice Card ── */
.kp-doc-choice-card {
  margin: 12px 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.kp-doc-choice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-muted);
}

.kp-doc-choice-header svg {
  color: #4ADE80;
  flex-shrink: 0;
}

.kp-doc-choice-filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-doc-choice-meta {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.kp-doc-choice-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.kp-doc-choice-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kp-doc-choice-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.kp-doc-choice-btn:hover {
  background: rgba(212, 244, 65, 0.06);
  border-color: rgba(212, 244, 65, 0.2);
  transform: translateX(2px);
}

.kp-doc-choice-btn svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: rgba(212, 244, 65, 0.7);
}

.kp-doc-choice-btn div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kp-doc-choice-btn strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.kp-doc-choice-btn span {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── AI Batch Create Objects Button ── */
.ai-batch-create-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
}

.ai-batch-create-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(212, 244, 65, 0.08);
  border: 1px solid rgba(212, 244, 65, 0.15);
  border-radius: 6px;
  color: rgba(212, 244, 65, 0.8);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.ai-batch-create-btn:hover {
  background: rgba(212, 244, 65, 0.15);
  border-color: rgba(212, 244, 65, 0.3);
  color: #D4F441;
}

.ai-batch-create-btn svg {
  flex-shrink: 0;
}

/* ── Input ── */
.kp-input-area {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.kp-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 0;
}

/* ── Attach / image upload button ── */
.kp-attach-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.kp-attach-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: var(--accent);
}

/* ── Plus (+) button and popup menu ── */
.kp-plus-btn {
  width: 35px;
  height: 35px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.kp-plus-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.kp-plus-menu {
  position: absolute;
  bottom: 40px;
  left: 0;
  min-width: 188px;
  background: rgba(25, 25, 30, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 100;
  max-height: min(70vh, 420px);
  overflow-y: auto;
}

.kp-plus-section-label {
  padding: 6px 10px 4px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

.kp-plus-separator {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px;
}

.kp-plus-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s, color 0.1s;
  text-align: left;
  font-family: inherit;
  line-height: 1.35;
}

.kp-plus-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.kp-plus-item.active {
  background: rgba(212, 244, 65, 0.1);
  color: var(--accent);
}

.kp-plus-item svg {
  flex: 0 0 auto;
}

.kp-plus-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Dark send button variant ── */
.kp-send.kp-send-dark {
  background: transparent;
  border: none;
  color: var(--text-muted);
}

.kp-send.kp-send-dark:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
}

/* ── Image preview strip ── */
.kp-img-preview {
  display: flex;
  gap: 6px;
  padding: 4px 0;
  overflow-x: auto;
  flex-shrink: 0;
}

.kp-img-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.kp-img-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.kp-img-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(220, 50, 50, 0.85);
  backdrop-filter: blur(4px);
  color: #fff;
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}

.kp-img-remove:hover {
  transform: scale(1.15);
}

/* ── Inline images in messages ── */
.kp-msg-images {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.kp-msg-img {
  max-width: 120px;
  max-height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}

.kp-msg-img:hover {
  opacity: 0.85;
  transform: scale(1.03);
}

/* ── Input with animated bottom border ── */
.kp-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.kp-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  color: var(--text);
  font-size: 12px;
  padding: 7px 4px;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  font-family: inherit;
  line-height: 1.5;
  transition: background 0.2s;
}

.kp-input:hover {
  background: rgba(212, 244, 65, 0.04);
}

.kp-input:focus {
  outline: none;
}

.kp-input::placeholder {
  color: var(--text-placeholder);
}

.kp-input-border {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.3s ease;
  pointer-events: none;
}

.kp-input:focus~.kp-input-border {
  width: 100%;
}

.kp-send {
  width: 35px;
  height: 35px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.kp-send:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.kp-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.kp-finalize {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.kp-finalize:hover {
  opacity: 0.85;
}

.kp-finalize:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── New Session Prompt ── */
.kp-new-prompt {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
}

.kp-domain-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 8px;
  width: 100%;
  z-index: 2;
}

.kp-domain-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  overflow-y: visible;
  overflow-x: hidden;
  width: 100%;
  padding-top: 4px;
}

.kp-new-prompt input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 40px 8px 12px;
  text-align: left;
}

.kp-new-prompt input:focus {
  outline: none;
  border-color: var(--accent);
}

.kp-domain-input-wrap {
  position: relative;
  width: 100%;
  max-width: 288px;
}

.kp-domain-search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.kp-domain-search-btn:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
}

.kp-new-start {
  padding: 6px 20px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.kp-new-start:hover {
  opacity: 0.9;
}

/* ── Domain chips multi-select ── */
.kp-domain-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 320px;
  margin-bottom: 8px;
}

.kp-domain-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.kp-domain-chip:hover {
  color: var(--text);
  border-color: var(--accent);
  background: transparent;
}

.kp-domain-chip.selected {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

/* ── Import button in system messages ── */
.kp-import-btn {
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--green-dim);
  border: 1px solid rgba(74, 222, 128, 0.2);
  color: var(--green);
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
}

.kp-import-btn:hover {
  background: rgba(74, 222, 128, 0.2);
}

/* ── Thinking Indicator ── */
.kp-thinking {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 12px;
  color: var(--accent);
  width: 100%;
}

.kp-moko-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}

.kp-moko-loader-bar {
  width: 3px;
  height: 14px;
  border-radius: 3px;
  background-color: var(--accent);
  animation: kpMokoLoading 1s ease-in-out infinite;
}

.kp-moko-loader-bar:nth-child(1) {
  animation-delay: 0s;
}

.kp-moko-loader-bar:nth-child(2) {
  animation-delay: 0.15s;
}

.kp-moko-loader-bar:nth-child(3) {
  animation-delay: 0.3s;
}

.kp-moko-loader-bar:nth-child(4) {
  animation-delay: 0.45s;
}

@keyframes kpMokoLoading {
  0% {
    transform: scaleY(1);
  }

  20% {
    transform: scaleY(2.5);
  }

  40% {
    transform: scaleY(1);
  }
}

/* ── Inline Thinking Indicator (replaces boxed loader) ── */
.kp-think-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0 12px;
  background: rgba(212, 244, 65, 0.06);
  border: 1px solid rgba(212, 244, 65, 0.15);
  border-radius: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.kp-think-bar {
  width: 2.5px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
  animation: kpThinkPulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes kpThinkPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.6);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.kp-think-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.kp-think-timer {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.kp-think-reasoning {
  padding: 8px 12px;
  border-left: 2px solid rgba(212, 244, 65, 0.15);
  margin: 8px 12px 0;
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 244, 65, 0.2) transparent;
}

.kp-think-reasoning:empty {
  display: none;
}

/* ── Stop Button State ── */
.kp-send.kp-send-stop {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  animation: kpStopPulse 1.5s ease-in-out infinite;
}

.kp-send.kp-send-stop:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.4);
}

@keyframes kpStopPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
  }

  50% {
    box-shadow: 0 0 8px 2px rgba(248, 113, 113, 0.15);
  }
}

/* ── Thinking Progress Steps ── */
.kp-think-steps {
  margin: 6px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kp-think-steps:empty {
  display: none;
}

.kp-think-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  animation: kpStepIn 0.3s ease-out;
  padding: 2px 0;
}

.kp-think-step:last-child {
  color: rgba(212, 244, 65, 0.7);
}

.kp-step-icon {
  font-size: 11px;
  flex-shrink: 0;
}

.kp-step-label {
  letter-spacing: 0.02em;
}

@keyframes kpStepIn {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

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

/* ── AI Message Text Selection Toolbar ── */
.kp-sel-toolbar {
  position: fixed;
  z-index: 10000;
  background: var(--bg-card, #1e1e24);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  /* Removed overflow: hidden so absolute hover menus can pop out */
}

.kp-st-main {
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
}

.kp-st-submenu {
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.kp-st-submenu:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.kp-st-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
}

.kp-st-hover-group {
  position: relative;
  display: flex;
}

.kp-st-hover-group:hover .kp-st-hover-menu {
  display: flex;
}

.kp-st-hover-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface, #1e1e24);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10001;
}

.kp-st-hover-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 4px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1) transparent transparent transparent;
}

.kp-st-btn {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kp-st-format {
  width: 24px;
  padding: 4px 0;
}

.kp-st-icon-btn {
  padding: 4px 6px;
  color: var(--text);
}

.kp-st-icon-btn:hover {
  color: #fff;
}

.kp-st-text-btn {
  color: var(--text);
}

.kp-st-text-btn:hover {
  color: #fff;
}

.kp-st-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.kp-st-hl-btn {
  position: relative;
}

.kp-st-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(0, 0, 0, 0.3);
}

.kp-st-sub-title {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 4px 0 8px;
}

.kp-highlight {
  background: rgba(212, 244, 65, 0.2);
  border-bottom: 2px solid var(--accent);
  padding: 0 2px;
  border-radius: 2px;
  color: #fff;
}

/* ── Semantic Highlight Type Grid ── */
.kp-st-hl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 8px !important;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 280px;
}

.kp-st-hl-type-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.kp-st-hl-type-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

/* ── Highlight Context Menu ── */
.hl-context-menu {
  background: var(--bg-card, #1e1e24);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  animation: hlMenuIn 0.15s ease-out;
}

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

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

.hl-ctx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}

.hl-ctx-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.hl-ctx-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.hl-ctx-btn svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.hl-ctx-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.hl-ctx-danger:hover svg {
  color: #f87171;
}

/* ── Semantic Highlight Mark Tags ── */
mark.semantic-hl {
  border-radius: 2px;
  padding: 0 2px;
  cursor: pointer;
  transition: filter 0.15s;
}

mark.semantic-hl:hover {
  filter: brightness(1.3);
}

.kp-think-reasoning::-webkit-scrollbar {
  width: 4px;
}

.kp-think-reasoning::-webkit-scrollbar-thumb {
  background: rgba(212, 244, 65, 0.2);
  border-radius: 2px;
}

/* ── Streaming Content Display ── */
.kp-stream-content {
  margin-top: 12px;
  padding: 0 12px 8px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.7;
}

.kp-stream-content h3,
.kp-stream-content h4 {
  margin: 12px 0 6px;
}

.kp-stream-content .kp-table-wrap {
  margin: 8px 0;
  overflow-x: auto;
}

.kp-stream-content .kp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.kp-stream-content .kp-table th,
.kp-stream-content .kp-table td {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.kp-stream-content .kp-table th {
  background: rgba(212, 244, 65, 0.08);
  color: var(--accent);
  font-weight: 600;
}

/* ── AI Response Navigation List ── */
.kp-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.kp-nav-list::-webkit-scrollbar {
  display: none;
}

.kp-nav-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}

.kp-nav-pill:hover {
  background: rgba(212, 244, 65, 0.1);
  color: var(--accent);
  border-color: rgba(212, 244, 65, 0.3);
}

@keyframes highlightMsg {
  0% {
    background: rgba(212, 244, 65, 0.15);
  }

  100% {
    background: transparent;
  }
}

.kp-thinking-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(212, 244, 65, 0.2), rgba(168, 85, 247, 0.2));
  border: 1px solid rgba(212, 244, 65, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: kpAvatarPulse 2s ease-in-out infinite;
}

.kp-thinking-avatar svg {
  stroke: var(--accent);
}

@keyframes kpAvatarPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(212, 244, 65, 0.15);
  }

  50% {
    box-shadow: 0 0 8px 3px rgba(212, 244, 65, 0.2);
  }
}

.kp-thinking-timer {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: right;
  letter-spacing: 0.5px;
}

.kp-thinking-icon {
  display: flex;
  animation: kpThinkSpin 2s linear infinite;
}

.kp-thinking-icon svg {
  stroke: var(--accent);
}

.kp-thinking-text {
  font-weight: 500;
  letter-spacing: 0.5px;
}

.kp-thinking-dots {
  display: flex;
  gap: 0;
}

.kp-thinking-dots span {
  animation: kpDotBlink 1.4s infinite;
  font-weight: bold;
}

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

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

@keyframes kpThinkSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes kpDotBlink {

  0%,
  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ── Thinking Summary (collapsible in AI message) ── */
.kp-thinking-summary {
  margin-bottom: 8px;
}

.kp-thinking-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(212, 244, 65, 0.06);
  border: 1px solid rgba(212, 244, 65, 0.12);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: rgba(212, 244, 65, 0.7);
  cursor: pointer;
  transition: all 0.15s;
  width: fit-content;
}

.kp-thinking-toggle:hover {
  background: rgba(212, 244, 65, 0.12);
  color: rgba(212, 244, 65, 0.9);
}

.kp-thinking-toggle svg {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.kp-thinking-toggle.open svg {
  transform: rotate(90deg);
}

.kp-thinking-content {
  display: none;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(212, 244, 65, 0.04);
  border-left: 2px solid rgba(212, 244, 65, 0.2);
  border-radius: 0 6px 6px 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.kp-thinking-content.open {
  display: block;
}

/* ── AI Choice Options ── */
.kp-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.kp-choice-btn {
  background: rgba(212, 244, 65, 0.06);
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.kp-choice-btn:hover {
  background: rgba(212, 244, 65, 0.15);
  border-color: rgba(212, 244, 65, 0.4);
  color: var(--text);
}

.kp-choice-btn svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.kp-lens-status {
  margin: 4px 12px 6px;
  padding: 6px 8px;
  border: 1px solid rgba(212, 244, 65, 0.14);
  border-radius: 6px;
  color: rgba(212, 244, 65, 0.78);
  background: rgba(212, 244, 65, 0.05);
  font-size: 11px;
  line-height: 1.4;
}

.kp-diagnosis-scope-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 8px;
  margin: 0 12px 8px;
  padding: 7px 8px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.045);
}

.kp-diagnosis-scope-control>span {
  color: rgba(191, 219, 254, 0.92);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.kp-diagnosis-scope-control>em {
  grid-column: 2;
  min-width: 0;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-diagnosis-scope-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}

.kp-diagnosis-scope-btn {
  min-height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-muted);
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1.3;
  cursor: pointer;
}

.kp-diagnosis-scope-btn:hover {
  border-color: rgba(96, 165, 250, 0.28);
  color: rgba(191, 219, 254, 0.94);
}

.kp-diagnosis-scope-btn.active {
  border-color: rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.14);
  color: rgba(219, 234, 254, 0.96);
}

.kp-diagnosis-scope-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.kp-diagnosis-scope-select {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  max-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-secondary);
  padding: 4px 7px;
  font-size: 11px;
  line-height: 1.35;
}

.kp-draft-panel {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(212, 244, 65, 0.16);
  border-radius: 8px;
  background: rgba(212, 244, 65, 0.045);
}

.kp-draft-panel.empty {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

.kp-draft-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.kp-draft-head span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.kp-draft-head em {
  color: var(--text-faint);
  font-style: normal;
  font-size: 10px;
}

.kp-draft-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
}

.kp-draft-notice>div {
  min-width: 0;
}

.kp-draft-notice strong {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.kp-draft-notice span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.kp-draft-notice button {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
}

.kp-draft-notice button:hover {
  color: var(--accent);
  border-color: rgba(212, 244, 65, 0.28);
}

.kp-draft-notice.info {
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(96, 165, 250, 0.055);
}

.kp-draft-notice.warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.06);
}

.kp-draft-notice.error {
  border-color: rgba(248, 113, 113, 0.26);
  background: rgba(248, 113, 113, 0.065);
}

.kp-draft-notice.success {
  border-color: rgba(74, 222, 128, 0.22);
  background: rgba(74, 222, 128, 0.055);
}

.kp-diagnosis-panel {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.055);
}

.kp-diagnosis-panel summary {
  cursor: pointer;
  color: var(--text-secondary);
  list-style-position: outside;
}

.kp-diagnosis-panel summary span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  vertical-align: top;
}

.kp-diagnosis-panel summary strong {
  font-size: 11px;
  line-height: 1.35;
}

.kp-diagnosis-panel summary em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
}

.kp-diagnosis-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.kp-diagnosis-counts span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text-muted);
  padding: 5px 6px;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.kp-diagnosis-counts strong {
  display: block;
  color: rgba(191, 219, 254, 0.96);
  font-size: 13px;
  line-height: 1.2;
}

.kp-diagnosis-issues {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.kp-diagnosis-issue {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.kp-diagnosis-issue>div {
  min-width: 0;
}

.kp-diagnosis-issue strong {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
}

.kp-diagnosis-issue p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.kp-diagnosis-issue code {
  max-width: 88px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text-muted);
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

.kp-diagnosis-issue-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.kp-diagnosis-repair-btn {
  max-width: 92px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  border-radius: 5px;
  background: rgba(96, 165, 250, 0.08);
  color: rgba(191, 219, 254, 0.95);
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.35;
  cursor: pointer;
  white-space: normal;
}

.kp-diagnosis-repair-btn:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.14);
}

.kp-diagnosis-issue.error strong {
  color: #fca5a5;
}

.kp-diagnosis-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.kp-diagnosis-samples span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 4px;
  background: rgba(96, 165, 250, 0.07);
  color: rgba(191, 219, 254, 0.9);
  padding: 2px 5px;
  font-size: 10px;
}

.kp-diagnosis-more,
.kp-diagnosis-empty {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.kp-diagnosis-next {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-diagnosis-next>strong {
  display: block;
  margin-bottom: 4px;
  color: rgba(191, 219, 254, 0.94);
  font-size: 11px;
}

.kp-diagnosis-next ol {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.5;
}

.kp-draft-validation {
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.06);
}

.kp-draft-validation summary {
  cursor: pointer;
  color: var(--text-secondary);
  list-style-position: outside;
}

.kp-draft-validation summary span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  vertical-align: top;
}

.kp-draft-validation summary strong {
  font-size: 11px;
  line-height: 1.35;
}

.kp-draft-validation summary em {
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
}

.kp-draft-validation-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.kp-draft-validation-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
}

.kp-draft-validation-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.kp-draft-validation-item span {
  min-width: 0;
}

.kp-draft-validation-item em {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: 52%;
  font-style: normal;
}

.kp-draft-validation-item code {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text-muted);
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}

.kp-draft-validation-item.error span {
  color: #fca5a5;
}

.kp-draft-validation-item button {
  flex-shrink: 0;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.08);
  color: rgba(253, 230, 138, 0.92);
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}

.kp-draft-validation-item button:hover {
  border-color: rgba(245, 158, 11, 0.46);
  background: rgba(245, 158, 11, 0.14);
}

.kp-draft-validation-more {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
}

.kp-draft-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.kp-draft-pill {
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 11px;
}

.kp-draft-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.kp-draft-line {
  color: var(--text-muted);
  font-size: 11px;
}

.kp-draft-line span {
  color: var(--accent);
}

.kp-draft-claims {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.kp-draft-claim {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  border-left: 2px solid rgba(20, 184, 166, 0.5);
  border-radius: 4px;
  background: rgba(20, 184, 166, 0.055);
  color: var(--text-secondary);
  font-size: 11px;
}

.kp-draft-claim span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-draft-claim em {
  flex-shrink: 0;
  color: var(--text-faint);
  font-style: normal;
  font-size: 10px;
}

.kp-draft-evidence-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.kp-draft-evidence-pill {
  border: 1px solid rgba(20, 184, 166, 0.26);
  border-radius: 5px;
  background: rgba(20, 184, 166, 0.08);
  color: rgba(153, 246, 228, 0.92);
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
}

.kp-draft-evidence-pill:hover {
  border-color: rgba(20, 184, 166, 0.48);
  background: rgba(20, 184, 166, 0.14);
}

.kp-draft-commit {
  margin: 8px 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.14);
}

.kp-draft-commit-title {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.kp-draft-commit-group {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 6px;
  margin-bottom: 5px;
}

.kp-draft-commit-group>span {
  color: var(--text-faint);
  font-size: 10px;
  line-height: 22px;
}

.kp-draft-commit-group>div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kp-draft-commit-chip,
.kp-draft-commit-rel button,
.kp-draft-commit-action {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-secondary);
  padding: 3px 6px;
  font-size: 11px;
  cursor: pointer;
}

.kp-draft-commit-chip.created {
  border-color: rgba(212, 244, 65, 0.24);
}

.kp-draft-commit-chip.updated {
  border-color: rgba(245, 158, 11, 0.3);
}

.kp-draft-commit-chip.system {
  border-color: rgba(96, 165, 250, 0.28);
}

.kp-draft-commit-chip.evidence {
  border-color: rgba(20, 184, 166, 0.28);
}

.kp-draft-commit-chip:hover,
.kp-draft-commit-rel button:hover,
.kp-draft-commit-action:hover {
  color: var(--accent);
  border-color: rgba(212, 244, 65, 0.32);
}

.kp-draft-commit-chip:disabled,
.kp-draft-commit-rel button:disabled,
.kp-draft-commit-action:disabled {
  opacity: 0.52;
  cursor: default;
}

.kp-draft-commit-relations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.kp-draft-commit-rel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
}

.kp-draft-commit-rel-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.kp-draft-commit-rel-main span {
  flex-shrink: 0;
  color: var(--accent);
}

.kp-draft-commit-rel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.kp-draft-commit-action.evidence {
  border-color: rgba(20, 184, 166, 0.28);
  color: rgba(153, 246, 228, 0.9);
}

.kp-draft-commit-action.system {
  border-color: rgba(96, 165, 250, 0.28);
  color: rgba(191, 219, 254, 0.92);
}

.kp-draft-actions {
  display: flex;
  gap: 6px;
}

.kp-draft-actions button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
}

.kp-draft-actions button:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(212, 244, 65, 0.28);
}

.kp-draft-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}

.kp-draft-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.kp-draft-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10025;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.kp-draft-confirm {
  width: min(620px, 94vw);
  max-height: min(720px, 90vh);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(18, 18, 20, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

.kp-draft-confirm-head,
.kp-draft-confirm-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-draft-confirm-head strong {
  font-size: 14px;
}

.kp-draft-confirm-head button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
}

.kp-draft-confirm-body {
  padding: 14px 16px;
  overflow: auto;
}

.kp-draft-confirm-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.055);
}

.kp-draft-confirm-summary>div:first-child {
  min-width: 0;
}

.kp-draft-confirm-summary strong {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.kp-draft-confirm-summary em {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.45;
}

.kp-draft-confirm-summary>div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.kp-draft-confirm-summary button {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 50px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-muted);
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.35;
  cursor: pointer;
}

.kp-draft-confirm-summary button:hover,
.kp-draft-confirm-summary button.active {
  border-color: rgba(212, 244, 65, 0.28);
  background: rgba(212, 244, 65, 0.08);
  color: var(--text-secondary);
}

.kp-draft-confirm-summary button strong {
  display: inline;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1;
}

.kp-draft-confirm-summary button.created strong {
  color: var(--accent);
}

.kp-draft-confirm-summary button.reused strong {
  color: rgba(153, 246, 228, 0.95);
}

.kp-draft-confirm-summary button.updated strong {
  color: rgba(253, 186, 116, 0.95);
}

.kp-draft-confirm-section {
  margin-bottom: 14px;
}

.kp-draft-confirm-section h4 {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
}

.kp-draft-confirm-filter-empty {
  margin: 8px 0 4px;
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.kp-draft-confirm-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.kp-draft-confirm-row input {
  margin-top: 2px;
  accent-color: var(--accent);
}

.kp-draft-confirm-row strong {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.kp-draft-confirm-row em {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.kp-draft-confirm-match {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.kp-draft-confirm-match>span {
  color: var(--text-faint);
  font-size: 10px;
}

.kp-draft-confirm-match.reuse>span {
  color: rgba(153, 246, 228, 0.82);
}

.kp-draft-confirm-match select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-secondary);
  padding: 6px 8px;
  font: inherit;
  font-size: 11px;
  outline: none;
  cursor: pointer;
}

.kp-draft-confirm-match select:focus {
  border-color: rgba(212, 244, 65, 0.32);
  background: rgba(255, 255, 255, 0.07);
}

.kp-draft-confirm-empty {
  color: var(--text-faint);
  font-size: 12px;
}

.kp-draft-confirm-foot {
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
}

.kp-draft-confirm-foot button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}

.kp-draft-confirm-foot button.primary {
  border-color: rgba(212, 244, 65, 0.35);
  background: rgba(212, 244, 65, 0.14);
  color: var(--accent);
}

.kp-draft-confirm-foot button:disabled {
  opacity: 0.55;
  cursor: default;
}

.kp-draft-editor {
  width: min(880px, 96vw);
  max-height: min(780px, 92vh);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(18, 18, 20, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

.kp-draft-editor-head,
.kp-draft-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-draft-editor-head strong {
  display: block;
  font-size: 14px;
  color: var(--text);
}

.kp-draft-editor-head span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.kp-draft-editor-head button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
}

.kp-draft-editor-body {
  padding: 14px 16px;
  overflow: auto;
}

.kp-draft-edit-section {
  margin-bottom: 16px;
}

.kp-draft-edit-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.kp-draft-edit-section-head span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.kp-draft-edit-section-head em {
  color: var(--text-faint);
  font-size: 10px;
  font-style: normal;
}

.kp-draft-edit-section-head button {
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: 6px;
  background: rgba(212, 244, 65, 0.06);
  color: rgba(212, 244, 65, 0.82);
  padding: 5px 8px;
  font-size: 11px;
  cursor: pointer;
}

.kp-draft-edit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kp-draft-edit-list.compact {
  gap: 5px;
}

.kp-draft-system-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 8px;
  border-left: 2px solid rgba(96, 165, 250, 0.34);
  border-radius: 6px;
  background: rgba(96, 165, 250, 0.045);
}

.kp-draft-system-block.is-targeted-missing {
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22);
}

.kp-draft-system-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.kp-draft-system-subhead span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
}

.kp-draft-system-subhead button {
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 5px;
  background: rgba(96, 165, 250, 0.06);
  color: rgba(191, 219, 254, 0.9);
  padding: 4px 7px;
  font-size: 10px;
  cursor: pointer;
}

.kp-draft-system-subhead button:hover {
  border-color: rgba(96, 165, 250, 0.42);
  background: rgba(96, 165, 250, 0.12);
}

.kp-draft-system-subhead button.is-targeted-action {
  border-color: rgba(212, 244, 65, 0.5);
  background: rgba(212, 244, 65, 0.16);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.18);
}

.kp-draft-edit-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px 1.6fr 28px;
  gap: 6px;
  align-items: center;
  border-radius: 6px;
}

.kp-draft-edit-row.is-targeted {
  background: rgba(212, 244, 65, 0.075);
  box-shadow: 0 0 0 1px rgba(212, 244, 65, 0.28);
}

.kp-draft-edit-section.is-targeted-missing .kp-draft-edit-section-head {
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.22);
  padding: 6px;
}

.kp-draft-edit-row.object {
  grid-template-columns: 28px 1fr 100px 1.3fr 150px 28px;
}

.kp-draft-edit-row.relation {
  grid-template-columns: 28px minmax(90px, 1fr) 86px minmax(90px, 1fr) 1.2fr 1fr 90px 28px;
}

.kp-draft-edit-row.claim {
  grid-template-columns: 28px 1.5fr 1fr 120px 28px;
}

.kp-draft-edit-row.system {
  grid-template-columns: 28px 1fr 1.6fr 28px;
}

.kp-draft-edit-row.system-node {
  grid-template-columns: 28px minmax(0, 1fr) 28px;
}

.kp-draft-edit-row.system-edge {
  grid-template-columns: 28px 1fr 110px 1fr 28px;
}

.kp-draft-edit-row.canvas-node {
  grid-template-columns: 28px 120px 1.4fr 110px 28px;
}

.kp-draft-edit-row.canvas-edge {
  grid-template-columns: 28px 1fr 120px 1fr 28px;
}

.kp-draft-edit-row input,
.kp-draft-edit-row textarea,
.kp-draft-edit-row select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  padding: 7px 8px;
  font: inherit;
  font-size: 11px;
  outline: none;
}

.kp-draft-edit-row textarea {
  resize: vertical;
  min-height: 32px;
}

.kp-draft-edit-row input:focus,
.kp-draft-edit-row textarea:focus,
.kp-draft-edit-row select:focus {
  border-color: rgba(212, 244, 65, 0.32);
  background: rgba(255, 255, 255, 0.07);
}

.kp-draft-match-select {
  color: var(--text-secondary);
  cursor: pointer;
}

.kp-draft-edit-check {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kp-draft-edit-check input {
  width: 14px;
  height: 14px;
  min-width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--accent);
}

.kp-draft-row-remove {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
}

.kp-draft-row-remove:hover {
  color: var(--red);
  border-color: rgba(255, 100, 100, 0.28);
}

.kp-draft-edit-empty {
  color: var(--text-faint);
  font-size: 11px;
  padding: 8px 0;
}

.kp-draft-editor-foot {
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 0;
}

.kp-draft-editor-foot button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}

.kp-draft-editor-foot button.primary {
  border-color: rgba(212, 244, 65, 0.35);
  background: rgba(212, 244, 65, 0.14);
  color: var(--accent);
}

.kp-draft-editor-foot button:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (max-width: 760px) {
  .kp-draft-editor-overlay {
    padding: 10px;
  }

  .kp-draft-confirm-summary {
    grid-template-columns: 1fr;
  }

  .kp-draft-confirm-summary>div:last-child {
    justify-content: flex-start;
  }

  .kp-draft-edit-row,
  .kp-draft-edit-row.object,
  .kp-draft-edit-row.relation,
  .kp-draft-edit-row.claim,
  .kp-draft-edit-row.system,
  .kp-draft-edit-row.system-node,
  .kp-draft-edit-row.system-edge,
  .kp-draft-edit-row.canvas-node,
  .kp-draft-edit-row.canvas-edge {
    grid-template-columns: 24px 1fr 28px;
  }

  .kp-draft-edit-row input,
  .kp-draft-edit-row textarea,
  .kp-draft-edit-row select {
    grid-column: 2 / 3;
  }

  .kp-draft-row-remove {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
}

/* ── Action Bar on AI Messages ── */
.kp-action-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.kp-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.kp-act-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.kp-act-btn.active {
  color: var(--accent);
  background: rgba(212, 244, 65, 0.1);
  border-color: rgba(212, 244, 65, 0.2);
}

.kp-act-btn svg {
  flex-shrink: 0;
}

.kp-act-btn.saving {
  pointer-events: none;
  opacity: 0.6;
}

.kp-spin {
  animation: kpSaveSpin 0.8s linear infinite;
}

@keyframes kpSaveSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── Bi-Link Inline Annotation ── */
.kp-bilink {
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: all 0.15s;
  border-bottom: 1.5px solid currentColor;
  text-decoration: none;
}

.kp-bilink:hover {
  filter: brightness(1.3);
  border-radius: 2px;
}

/* ── Session Management ── */
.kp-sess-edit-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.kp-sess-edit-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.kp-sess-menu {
  background: rgba(25, 25, 35, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 244, 65, 0.2);
  border-radius: var(--radius-lg);
  min-width: 320px;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: kpMenuSlide 0.15s ease;
  overflow: hidden;
}

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

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

.kp-sess-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-sess-menu-count {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}

.kp-sess-menu-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 6px;
}

.kp-sess-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: default;
  transition: background 0.15s;
}

.kp-sess-menu-item:hover {
  background: rgba(212, 244, 65, 0.08);
}

.kp-sess-menu-item.active {
  background: rgba(212, 244, 65, 0.12);
  border-left: 2px solid var(--accent);
}

.kp-sess-cb {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.kp-sess-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text);
}

.kp-sess-menu-label:hover {
  color: var(--accent);
}

.kp-sess-domain-badge {
  font-size: 10px;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.kp-sess-unlinked {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
  font-style: italic;
}

.kp-sess-unlink {
  display: inline-block;
  margin-left: 4px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s;
  font-style: normal;
}

.kp-sess-unlink:hover {
  opacity: 1;
}

.kp-sess-menu-act {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.kp-sess-menu-item:hover .kp-sess-menu-act {
  opacity: 0.7;
}

.kp-sess-menu-act:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.08);
}

.kp-sess-del:hover {
  background: rgba(240, 80, 80, 0.15) !important;
}

/* Batch assign */
.kp-sess-assign-section {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-sess-assign-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.kp-sess-assign-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.kp-sess-assign-select {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
}

.kp-sess-assign-select:focus {
  border-color: var(--accent);
}

.kp-sess-assign-btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: var(--radius-md);
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.kp-sess-assign-btn:hover {
  background: #4ADE80;
}

/* Sidebar domain-linked sessions */
.kp-sess-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 1px 5px;
  transition: color 0.15s;
}

.kp-sess-count:hover {
  color: var(--accent) !important;
}

/* ── Domain Tag Tree (collapsible hierarchy) ── */
.dt-tree-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  font-size: 12.5px;
}

.dt-tree-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-faint);
  transition: color 0.15s, background 0.15s;
}

.dt-tree-chev:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

.dt-tree-chev-spacer {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dt-tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.dt-desc-count {
  font-size: 10px;
  opacity: 0.5;
  margin-left: 2px;
}

.dt-tree-children {
  animation: dtSlideDown 0.15s ease;
}

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

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

.kp-domain-sessions {

  padding: 2px 0 4px 24px;
  animation: kpMenuSlide 0.15s ease;
}

.kp-domain-sess-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kp-domain-sess-item:hover {
  background: rgba(212, 244, 65, 0.08);
  color: var(--text);
}

.kp-domain-sess-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.kp-domain-sess-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kp-domain-sess-phase {
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ── Entity Confirm Panel ── */
.kp-entity-confirm {
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(212, 244, 65, 0.25);
  border-radius: var(--radius-lg);
  margin: 8px 0 12px 0;
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  animation: kpEntitySlide 0.3s ease;
}

@keyframes kpEntitySlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

.kp-entity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 8px;
}

.kp-entity-dismiss {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
}

.kp-entity-dismiss:hover {
  color: #fff;
}

.kp-entity-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.kp-entity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  transition: background 0.15s;
}

.kp-entity-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.kp-entity-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.kp-entity-icon {
  font-size: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.kp-entity-title {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.kp-entity-type {
  color: #888;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.kp-entity-brief {
  color: #999;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.kp-entity-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}

.kp-entity-confirm-btn {
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.kp-entity-confirm-btn:hover {
  opacity: 0.85;
}

.kp-entity-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.kp-entity-cancel-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #aaa;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
}

.kp-entity-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.kp-entity-done {
  text-align: center;
  color: #8f8;
  font-size: 12px;
  padding: 8px;
}

.kp-entity-badge {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

.kp-entity-badge.new {
  background: rgba(168, 85, 247, 0.15);
  color: #7C3AED;
}

.kp-entity-badge.existing {
  background: rgba(34, 197, 94, 0.15);
  color: #D4F441;
}

.kp-entity-conn-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kp-entity-conn-title {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 4px;
  font-weight: 500;
}

.kp-entity-conn-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 100px;
  overflow-y: auto;
}

.kp-entity-conn-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #bbb;
  padding: 2px 6px;
}

.kp-entity-conn-item span:first-child,
.kp-entity-conn-item span:last-child {
  color: var(--accent);
  font-weight: 500;
}

.kp-conn-arrow {
  color: #777;
  font-size: 10px;
}

.kp-conn-arrow em {
  color: #06b6d4;
  font-style: normal;
}

/* ── Markdown Table ── */
.kp-table-wrap {
  overflow-x: auto;
  margin: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.5;
}

.kp-table th,
.kp-table td {
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-align: left;
}

.kp-table th {
  background: rgba(212, 244, 65, 0.1);
  font-weight: 600;
  color: var(--text-primary);
}

.kp-table td {
  background: rgba(255, 255, 255, 0.02);
}

.kp-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* ── ASCII Diagram / Structure ── */
.kp-diagram {
  margin: 8px 0;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.kp-diagram pre {
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  white-space: pre;
}

/* ── Blockquote ── */
.kp-msg blockquote {
  margin: 6px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--accent);
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 11.5px;
}

/* ── Import button with SVG icon ── */
.kp-import-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Domain Detail Page: AI Session Blocks ── */
.domain-session-block {
  margin: 8px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.domain-session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.domain-session-phase {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(212, 244, 65, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.domain-session-meta {
  font-size: 11px;
  color: var(--text-faint);
}

/* Framework tag pills */
.domain-fw-section {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.domain-fw-label {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 50px;
}

.domain-fw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.domain-fw-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  background: rgba(212, 244, 65, 0.1);
  color: var(--accent);
  border: 1px solid rgba(212, 244, 65, 0.15);
}

.domain-fw-tag.type {
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  border-color: rgba(6, 182, 212, 0.15);
}

/* Chat history in domain view */
.domain-chat-history {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 8px;
}

.domain-chat-msg {
  margin-bottom: 10px;
  padding: 6px 0;
}

.domain-chat-msg+.domain-chat-msg {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 10px;
}

.domain-chat-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: var(--text-faint);
}

.domain-chat-msg.assistant .domain-chat-role {
  color: var(--accent);
}

.domain-chat-msg.user .domain-chat-role {
  color: #4ade80;
}

.domain-chat-content {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.domain-chat-content h3,
.domain-chat-content h4 {
  font-size: 13px;
  margin: 8px 0 4px;
  color: var(--text-primary);
}

.domain-chat-content ul {
  padding-left: 16px;
  margin: 4px 0;
}

.domain-chat-content li {
  margin-bottom: 2px;
}

.domain-chat-content .kp-table-wrap {
  margin: 6px 0;
}

.domain-chat-content .kp-diagram {
  margin: 6px 0;
}

.domain-chat-content blockquote {
  margin: 6px 0;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--accent);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  font-size: 11.5px;
}

/* ── AI Fill Button ── */
.ai-fill-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--accent-dim);
  border: 1px solid rgba(212, 244, 65, 0.2);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-fill-btn:hover {
  background: rgba(212, 244, 65, 0.25);
  border-color: var(--accent);
}

.ai-fill-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ai-fill-spin {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  animation: aiFillSpin 0.8s linear infinite;
}

@keyframes aiFillSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Per-field AI generate button */
.ai-field-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-top: 1px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.2s;
}

.ai-field-btn:hover {
  opacity: 1;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border-color: var(--border);
}

.ai-field-btn:active {
  transform: scale(0.9);
}

.ai-field-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}

.ai-field-btn.ai-field-loading {
  opacity: 1;
  color: var(--accent);
  animation: aiFieldPulse 1.2s ease-in-out infinite;
}

.ai-field-btn.ai-field-done {
  opacity: 1;
  color: var(--green);
  border-color: var(--green);
  background: rgba(52, 199, 89, 0.1);
}

@keyframes aiFieldPulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* Relation Field Sub-components */
.relation-edit-btn:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px;
}

.relation-link:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.05);
}

/* ── AI Fill Progressive Animations ── */
.prop-row.ai-filling {
  background: rgba(212, 244, 65, 0.06);
  border-left: 2px solid var(--accent);
  animation: aiFillPulse 1.2s ease-in-out infinite;
}

.prop-row.ai-done {
  background: rgba(34, 197, 94, 0.08);
  border-left: 2px solid #D4F441;
  animation: aiFillFlash 0.4s ease;
}

.prop-row.ai-skipped {
  opacity: 0.6;
}

.prop-row.ai-error {
  border-left: 2px solid #EC4899;
  background: rgba(239, 68, 68, 0.05);
}

@keyframes aiFillPulse {

  0%,
  100% {
    background: rgba(212, 244, 65, 0.04);
  }

  50% {
    background: rgba(212, 244, 65, 0.12);
  }
}

@keyframes aiFillFlash {
  0% {
    background: rgba(34, 197, 94, 0.2);
  }

  100% {
    background: rgba(34, 197, 94, 0.08);
  }
}

/* ============================================
   AUTH OVERLAY
   ============================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
}

.auth-card {
  width: 360px;
  padding: 48px 36px;
  text-align: center;
}

.auth-logo {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 36px;
  letter-spacing: 0.04em;
}

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

.auth-field {
  text-align: left;
}

.auth-field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.auth-field input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-size: 13px;
  outline: none;
  transition: border var(--transition);
}

.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus,
.auth-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 30px var(--bg-input) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-field input:focus {
  border-color: var(--accent);
}

.auth-pw-wrap {
  position: relative;
}

.auth-pw-wrap input {
  padding-right: 38px;
}

.auth-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}

.auth-pw-toggle:hover {
  opacity: 1;
}

.auth-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 4px;
}

.auth-btn:hover {
  background: var(--accent-hover);
}

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

.auth-error {
  font-size: 12px;
  color: var(--red);
  min-height: 18px;
}

.auth-switch {
  font-size: 12px;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.auth-switch a:hover {
  text-decoration: underline;
}

/* ── User menu (bottom of sidebar) ── */
.user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

.user-bar:hover {
  background: var(--bg-hover);
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-name {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-logout {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}

.user-bar:hover .user-logout {
  opacity: 1;
}

.user-logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--red);
}

/* ═══ Graph Main (center canvas, always visible) ═══ */
.graph-main {
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: #1B1B1B;
  background-image: none;
  background-size: 24px 24px;
  overflow: hidden;
  border-radius: 12px;
}

/* Scanline overlay — disabled for clean look */
.graph-main::after {
  display: none;
}

/* HUD corner metadata labels */
.graph-hud-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(144, 147, 123, 0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 12;
  pointer-events: none;
  user-select: none;
}

.graph-hud-label.top-left {
  top: 10px;
  left: 14px;
}

.graph-hud-label.bottom-right {
  bottom: 10px;
  right: 14px;
}

.graph-hud-label.bottom-left {
  bottom: 10px;
  left: 14px;
}

.graph-main canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.graph-main canvas:active {
  cursor: grabbing;
}

/* ═══ Graph Breadcrumb Navigation ═══ */
.graph-breadcrumb {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  background: rgba(25, 25, 25, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
  user-select: none;
}

.graph-breadcrumb .bc-home {
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.15s;
}

.graph-breadcrumb .bc-home:hover {
  opacity: 0.7;
}

.graph-breadcrumb .bc-home.active {
  cursor: default;
  color: var(--text-primary);
}

.graph-breadcrumb .bc-sep {
  margin: 0 4px;
  color: var(--text-muted);
  font-size: 14px;
}

.graph-breadcrumb .bc-item {
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.15s;
}

.graph-breadcrumb .bc-item:hover {
  color: var(--text-primary);
}

.graph-breadcrumb .bc-item.active {
  cursor: default;
  color: var(--text-primary);
  font-weight: 500;
}

/* ═══ Right Panel → now AI Float Panel ═══ */
.ai-float-panel {
  position: absolute;
  left: 6px;
  top: 40px;
  bottom: 6px;
  width: 360px;
  min-width: 260px;
  max-width: 45vw;
  display: none;
  flex-direction: column;
  background: rgba(25, 25, 25, 0.70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  z-index: 20;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.ai-float-resizer {
  position: absolute;
  right: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 25;
  transition: background 0.15s;
}

.ai-float-resizer:hover,
.ai-float-resizer:active {
  background: var(--accent);
}

.ai-float-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ═══ Object Panel (right-side drawer, fixed overlay) ═══ */
.object-panel {
  position: fixed;
  top: 40px;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 60vw;
  background: #1A1A1A;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 12px 0 0 12px;
  overflow: clip;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: none;
}

.object-panel.open {
  transform: translateX(0);
}

/* Resize handle on left edge */
.op-resizer {
  position: absolute;
  left: -3px;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}

.op-resizer:hover,
.op-resizer:active {
  background: var(--accent);
}

.op-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.op-icon {
  font-size: 16px;
  color: var(--accent);
  display: none;
  /* hidden — breadcrumb replaces it */
}

.op-title {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Breadcrumb Segments ── */
.op-bc-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-bc-seg svg {
  flex-shrink: 0;
}

.op-bc-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-bc-sep {
  color: rgba(255, 255, 255, 0.15);
  margin: 0 4px;
  font-size: 8px;
  flex-shrink: 0;
}

.op-bc-domain {
  cursor: pointer;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
  transition: opacity 0.15s;
}

.op-bc-domain:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.op-bc-type {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.35);
}

.op-bc-current {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 9px;
  max-width: 200px;
}

.op-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.op-action-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.op-action-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}

/* AI badge icon — used for research buttons */
.ai-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 0px 3px;
  line-height: 14px;
  vertical-align: middle;
}

.op-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}

.op-close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.op-body {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.op-body::-webkit-scrollbar {
  width: 5px;
}

.op-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* ═══ Object Drawer (slides out left of AI panel) ═══ */
.object-drawer {
  position: absolute;
  right: 406px;
  /* right-panel width + gap */
  top: 6px;
  bottom: 6px;
  width: 340px;
  background: rgba(25, 25, 25, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  z-index: 19;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: drawerSlideIn 0.25s ease-out;
}

@keyframes drawerSlideIn {
  from {
    transform: translateX(40px);
    opacity: 0;
  }

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

.od-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.od-icon {
  font-size: 16px;
  color: var(--accent);
}

.od-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.od-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}

.od-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.od-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}

.right-panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ═══ Object Card (collapsible top section in right panel) ═══ */
.rp-object-card {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.rp-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}

.rp-card-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.rp-card-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.rp-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-card-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.rp-card-chevron.expanded {
  transform: rotate(90deg);
}

.rp-card-body {
  padding: 0 14px 12px;
  max-height: 300px;
  overflow-y: auto;
}

.rp-card-body::-webkit-scrollbar {
  width: 3px;
}

.rp-card-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.rp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.rp-card-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rp-card-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.rp-card-desc a,
.rp-card-desc .obj-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
}

.rp-card-desc a:hover,
.rp-card-desc .obj-link:hover {
  text-decoration: underline;
}

.rp-card-attrs,
.rp-card-content {
  margin-top: 6px;
}

.rp-card-section-toggle {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}

.rp-card-section-toggle:hover {
  color: var(--text-secondary);
}

/* ═══ Research Section (always visible below card) ═══ */
.rp-research-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rp-research-section .kp-inner {
  height: 100%;
}

/* ═══ Research Canvas (legacy compat — now graph-main is primary) ═══ */
.research-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  perspective: 1200px;
  overflow: hidden;
}

.research-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.research-canvas canvas:active {
  cursor: grabbing;
}

/* ── Depth bar overlay (unified graph) ── */
.rc-depth-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

/* ── Main graph depth selector (same pill style) ── */
.rc-depth-selector.radio-input input {
  display: none;
}

.rc-depth-selector.radio-input {
  --container_width: 147px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0;
  background-color: transparent;
  color: #fff;
  width: var(--container_width);
  overflow: hidden;
  border: none;
  backdrop-filter: none;
  font-family: 'JetBrains Mono', monospace;
}

.rc-depth-selector.radio-input label {
  width: 100%;
  padding: 3px 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0;
  transition: color 0.15s;
}

.rc-depth-selector .selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 5);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
  border-radius: var(--radius-md);
}

.rc-depth-selector.radio-input label:has(input:checked) {
  color: #000;
}

.rc-depth-selector.radio-input label:has(input:checked)~.selection {
  background-color: var(--accent);
  display: inline-block;
}

.rc-depth-selector.radio-input label:nth-child(1):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 0 / 5));
}

.rc-depth-selector.radio-input label:nth-child(2):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 1 / 5));
}

.rc-depth-selector.radio-input label:nth-child(3):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 2 / 5));
}

.rc-depth-selector.radio-input label:nth-child(4):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 3 / 5));
}

.rc-depth-selector.radio-input label:nth-child(5):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 4 / 5));
}

.rc-node-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(144, 147, 123, 0.5);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.rc-overlay-info {
  position: absolute;
  bottom: 48px;
  left: 14px;
  top: auto;
  right: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  letter-spacing: 0.5px;
  background: rgba(30, 30, 30, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 10px 14px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 140px;
}

.rc-overlay-info .rc-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-overlay-info .rc-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rc-outline {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  width: 200px;
  max-height: 60%;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 6px 14px 10px;
  z-index: 2;
  pointer-events: auto;
  border-radius: 0 8px 8px 0;
}

.rc-outline-inner {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.rc-outline-inner .rc-phase-label {
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-outline-inner .rc-phase-label:first-child {
  margin-top: 0;
}

.rc-outline-inner .rc-phase-label svg {
  opacity: 0.7;
}

.rc-outline-inner .rc-item {
  padding-left: 18px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: rcItemIn 0.3s ease;
}

.rc-outline-inner .rc-item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.6;
}

@keyframes rcItemIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

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

/* New node flash highlight in tree outline */
.rc-outline-inner .rc-item.rc-item-flash {
  animation: rcFlashGlow 2s ease-out;
}

@keyframes rcFlashGlow {
  0% {
    background: rgba(76, 175, 80, 0.25);
    color: #fff;
  }

  100% {
    background: transparent;
  }
}

.rc-outline-inner .rc-tree-children {
  transition: all 0.2s ease;
}

.rc-outline-inner .rc-tree-chevron {
  opacity: 0.5;
  transition: opacity 0.15s;
}

.rc-outline-inner .rc-tree-chevron:hover {
  opacity: 1;
}

/* ── Node hover tooltip ── */
.rc-tooltip {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 20;
  background: rgba(14, 14, 14, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px dashed rgba(212, 244, 65, 0.2);
  border-radius: 0;
  padding: 6px 10px;
  max-width: 220px;
  animation: rcTooltipIn 0.12s ease;
  box-shadow: 0 0 12px rgba(212, 244, 65, 0.06);
}

.rc-tooltip.is-open {
  display: block;
}

.rc-tooltip-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #4ADE80;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.rc-tooltip-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(144, 147, 123, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

@keyframes rcTooltipIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

/* ── Node detail panel ── */
.rc-detail-panel {
  display: none;
  position: absolute;
  z-index: 25;
  width: 280px;
  background: rgba(30, 30, 34, 0.70);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: none;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  animation: rcDetailIn 0.2s ease;
  pointer-events: auto;
}

.rc-detail-panel.is-open {
  display: block;
}

@keyframes rcDetailIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

.rc-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rc-detail-type {
  font-size: 10px;
  color: var(--accent);
  background: rgba(212, 244, 65, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rc-detail-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.rc-detail-close:hover {
  opacity: 1;
  color: #fff;
}

.rc-detail-name {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
}

.rc-detail-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}

.rc-detail-connections {
  margin-bottom: 14px;
}

.rc-detail-connections .rc-conn-title {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.rc-detail-connections .rc-conn-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rc-detail-connections .rc-conn-tag {
  font-size: 10px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.rc-detail-connections .rc-conn-tag:hover {
  background: rgba(212, 244, 65, 0.12);
  color: var(--accent);
}

.rc-detail-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
  margin-top: 4px;
}

.rc-detail-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: var(--text-secondary);
  font-size: 11px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.rc-detail-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.rc-detail-btn svg {
  flex-shrink: 0;
}

/* ── Entity links in chat ── */
.kp-entity-link {
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1.5px dashed rgba(212, 244, 65, 0.4);
  transition: all 0.15s;
}

.kp-entity-link:hover {
  color: #fff;
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
  text-shadow: 0 0 8px rgba(212, 244, 65, 0.3);
}

/* ── Global entity popup ── */
.kp-entity-popup {
  display: none;
  position: fixed !important;
  z-index: 9999 !important;
}

.kp-entity-popup.is-open {
  display: block;
}

/* ── AI Chat Context Menu ── */
.kp-ctx-menu {
  position: fixed;
  z-index: 10000;
  min-width: 140px;
  background: rgba(42, 42, 48, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  padding: 4px;
  animation: fadeInPopup 0.12s ease-out;
}

.kp-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: background 0.12s, color 0.12s;
}

.kp-ctx-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.kp-ctx-item svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Create Object Form ── */
.kp-create-form {
  position: fixed;
  z-index: 10001;
  width: 260px;
  background: rgba(38, 38, 44, 0.98);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  padding: 16px;
  animation: fadeInPopup 0.15s ease-out;
}

.kp-cf-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.kp-cf-field {
  margin-bottom: 10px;
}

.kp-cf-field label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

.kp-cf-field input,
.kp-cf-field select {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.kp-cf-field input:focus,
.kp-cf-field select:focus {
  border-color: var(--accent);
}

.kp-cf-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.kp-cf-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.kp-cf-cancel,
.kp-cf-submit {
  flex: 1;
  padding: 7px 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}

.kp-cf-cancel {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.kp-cf-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.kp-cf-submit {
  background: var(--accent);
  color: #111;
}

.kp-cf-submit:hover {
  filter: brightness(1.1);
}

.kp-cf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================
   KNOWLEDGE OVERVIEW DASHBOARD
   ============================================ */
.ko-dashboard {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.ko-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.ko-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
}

.ko-card-num {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}

.ko-card-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.ko-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.ko-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}

.ko-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* 5-Layer bar chart */
.ko-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.ko-bar-label {
  width: 56px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ko-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  overflow: hidden;
}

.ko-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.ko-bar-pct {
  width: 32px;
  font-size: 11px;
  color: #fff;
  text-align: right;
  flex-shrink: 0;
}

.ko-bar-count {
  width: 50px;
  font-size: 10px;
  color: var(--text-faint);
  text-align: right;
  flex-shrink: 0;
}

/* Domain distribution */
.ko-domain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.ko-domain-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ko-domain-name {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
}

.ko-domain-count {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Type distribution grid */
.ko-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ko-type-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.ko-type-chip:hover {
  background: rgba(255, 255, 255, 0.06);
}

.ko-type-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Incomplete list */
.ko-incomplete-list {
  max-height: 400px;
  overflow-y: auto;
}

.ko-incomplete-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.15s;
}

.ko-incomplete-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ko-inc-score {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ko-inc-title {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ko-inc-type {
  font-size: 10px;
  flex-shrink: 0;
}

.ko-inc-missing {
  font-size: 9px;
  color: var(--text-faint);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

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

  .ko-row2 {
    grid-template-columns: 1fr;
  }
}

/* ── Moko Thinking Loader ── */
.loader {
  display: flex;
  justify-content: center;
}

.loader-bar {
  width: 4px;
  height: 18px;
  margin: 0 8px;
  border-radius: 4px;
  animation: loading_3194 1s ease-in-out infinite;
  background-color: rgba(255, 255, 255, 0.4);
}

.loader-bar:nth-child(1) {
  animation-delay: 0s;
}

.loader-bar:nth-child(2) {
  animation-delay: 0.1s;
}

.loader-bar:nth-child(3) {
  animation-delay: 0.2s;
}

.loader-bar:nth-child(4) {
  animation-delay: 0.3s;
}

@keyframes loading_3194 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scaleY(3);
  }

  40% {
    transform: scale(1);
  }
}

/* ============================================
   DOMAIN SPACE — Card-based Research Platform
   ============================================ */
.domain-space {
  padding: 0 0 40px;
  max-width: 100%;
  background: #1A1A1A;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
}

/* ── Hero Topbar (breadcrumb + title + actions) ── */
.ds-hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  gap: 12px;
}

.ds-hero-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ds-hero-bc {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.ds-bc-item {
  cursor: pointer;
  color: var(--accent);
  opacity: 0.7;
  transition: opacity 0.15s;
}

.ds-bc-item:hover {
  opacity: 1;
  color: #fff;
}

.ds-bc-sep {
  color: var(--text-muted);
  margin: 0 1px;
  opacity: 0.5;
}

.ds-bc-current {
  color: var(--text-secondary);
  font-weight: 500;
}

.ds-hero-topbar-title {
  font-size: 14px;
  font-weight: 700;
  color: #4ADE80;
  letter-spacing: 2px;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: 'Space Grotesk', sans-serif;
}

.ds-hero-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ds-linked-canvas-bar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 16px 8px;
}

.ds-linked-canvas-label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'JetBrains Mono', monospace;
}

.ds-linked-canvas-empty {
  padding-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.ds-linked-canvas-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.ds-linked-canvas-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ds-linked-canvas-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-linked-canvas-group-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.ds-linked-canvas-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.ds-linked-canvas-list {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ds-linked-canvas-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  border: 1px solid rgba(212, 244, 65, 0.35);
  background: rgba(212, 244, 65, 0.12);
  color: rgba(247, 252, 218, 0.96);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.ds-linked-canvas-chip:hover {
  background: rgba(212, 244, 65, 0.2);
  border-color: rgba(212, 244, 65, 0.55);
}

.ds-linked-canvas-chip-title {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.ds-linked-canvas-chip-meta {
  font-size: 10px;
  color: rgba(235, 243, 178, 0.92);
}

/* ── Hero Graph ── */
/* Hero section: wrap for graph + overlays */
.ds-hero-wrap {
  position: relative;
  width: 100%;
  height: 350px;
  border-bottom: 1px solid #222;
  overflow: hidden;
  border-radius: 6px;
}

.ds-hero-graph {
  position: absolute;
  inset: 0;
  background: #1A1A1A;
}

.ds-graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* Domain title watermark — top center of graph */
.ds-graph-title-overlay {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.ds-gt-name {
  font-size: 22px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.08);
  letter-spacing: 4px;
  line-height: 1.2;
  white-space: nowrap;
}

.ds-gt-en {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.05);
  letter-spacing: 3px;
  margin-top: 3px;
  text-transform: uppercase;
}

/* Graph controls bar — bottom of graph */
.ds-graph-controls {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.ds-graph-controls>* {
  pointer-events: auto;
}

/* Expand / fullscreen button */
.ds-expand-btn {
  padding: 2px 6px;
  margin-left: 4px;
}

/* Fullscreen graph state */
.ds-graph-fullscreen {
  height: calc(100vh - 4px) !important;
  margin-bottom: 0;
}

/* Full width card */
.ds-card-full {
  column-span: all;
}

/* ── Kanban Panel ── */
.ds-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 14px 8px;
  min-height: 80px;
  max-width: 100%;
  box-sizing: border-box;
}

.ds-kanban-empty {
  width: 100%;
  text-align: center;
  padding: 24px 0;
  color: var(--text-faint);
}

.ds-kanban-empty p {
  margin-bottom: 8px;
  font-size: 13px;
}

.ds-kanban-col {
  flex: 1;
  min-width: 140px;
}

.ds-kanban-col-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 2px solid;
  color: var(--text-secondary);
}

.ds-kanban-dot {
  width: 7px;
  height: 7px;
  border-radius: 0;
  flex-shrink: 0;
}

.ds-kanban-col-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: auto;
}

.ds-kanban-card {
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid #222;
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .2s;
  border-left: 2px solid #4ADE80;
  position: relative;
}

.ds-kanban-card:hover {
  background: rgba(212, 244, 65, 0.05);
  border-color: #4ADE80;
}

.ds-kanban-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-kanban-card-meta {
  display: flex;
  gap: 6px;
  font-size: 10px;
  color: var(--text-faint);
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ds-kanban-priority {
  font-weight: 600;
}

.ds-kanban-method {
  background: rgba(212, 244, 65, 0.1);
  border: 1px solid rgba(212, 244, 65, 0.2);
  padding: 1px 5px;
  border-radius: 0;
  font-size: 9px;
}

.ds-kanban-due {
  opacity: 0.7;
}

/* Stats chips — left side */
.ds-graph-stats-left {
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.ds-stat-chip {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.3px;
}

/* ── Depth selector (1-5 radio pill) ── */
.ds-depth-selector.radio-input input {
  display: none;
}

.ds-depth-selector.radio-input {
  --container_width: 147px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0;
  background-color: rgba(33, 33, 33, 0.85);
  color: #fff;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
}

.ds-depth-selector.radio-input label {
  width: 100%;
  padding: 3px 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0;
  transition: color 0.15s;
}

.ds-depth-selector .selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 5);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
  border-radius: 0;
}

.ds-depth-selector.radio-input label:has(input:checked) {
  color: #000;
}

.ds-depth-selector.radio-input label:has(input:checked)~.selection {
  background-color: var(--accent);
  display: inline-block;
}

.ds-depth-selector.radio-input label:nth-child(1):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 0 / 5));
}

.ds-depth-selector.radio-input label:nth-child(2):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 1 / 5));
}

.ds-depth-selector.radio-input label:nth-child(3):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 2 / 5));
}

.ds-depth-selector.radio-input label:nth-child(4):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 3 / 5));
}

.ds-depth-selector.radio-input label:nth-child(5):has(input:checked)~.selection {
  transform: translateX(calc(var(--container_width) * 4 / 5));
}

/* Drag resize handle at bottom of graph */
.ds-hero-resize {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 5;
  background: transparent;
  transition: background 0.15s;
}

.ds-hero-resize:hover,
.ds-hero-resize.dragging {
  background: var(--accent);
  opacity: 0.5;
}

/* ── Card Grid ── */
.ds-card-grid {
  columns: 3;
  column-gap: 16px;
  padding: 20px 24px 32px;
}

@media (max-width: 1000px) {
  .ds-card-grid {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .ds-card-grid {
    columns: 1;
  }
}

.ds-card-wide {
  column-span: all;
}

/* ── Card (frosted glass style) ── */
.ds-card {
  background: #212121;
  padding: 0;
  border-radius: 6px;
  border: none;
  overflow: hidden;
  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  break-inside: avoid;
  margin-bottom: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ds-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ds-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #fff;
  background: transparent;
  border-bottom: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ds-card-header svg {
  padding: 0;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #ffffff;
}

.ds-card-title {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: 1;
  letter-spacing: 0.1em;
}

/* ── Panel Header Eye icon ── */
.ds-panel-eye {
  margin-left: 8px;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.2s, color 0.2s;
  padding: 4px;
  display: flex;
  align-items: center;
}

.ds-panel-eye:hover {
  opacity: 1;
  color: #fff;
}

.ds-card-badge {
  font-size: 10px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
  padding: 0;
  min-width: 18px;
  text-align: center;
}

.ds-card-body {
  padding: 12px 14px 14px;
  font-family: 'JetBrains Mono', 'Noto Sans SC', monospace;
  font-size: 12px;
}

/* ── Collapsible Card Toggle ── */
.ds-card-header-toggle {
  cursor: pointer;
  user-select: none;
}

.ds-card-header-toggle::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
  transform: rotate(45deg);
  transition: transform 0.2s;
  margin-left: 6px;
  flex-shrink: 0;
}

.ds-card.collapsed .ds-card-header-toggle::after {
  transform: rotate(-45deg);
}

.ds-card.collapsed .ds-card-body {
  display: none;
}

/* ── Mini Ring in Overview Card ── */
.ds-overview-ring {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  position: relative;
}

.ds-overview-ring svg {
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
}

.ds-overview-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Hierarchy Tree ── */
.ds-tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s;
}

.ds-tree-node:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ds-tree-icon {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}

.ds-tree-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-tree-type {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

/* ── Matrix Grid ── */
.ds-matrix-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-matrix-label-y {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2px;
  transform: rotate(180deg);
  flex-shrink: 0;
}

.ds-matrix-inner {
  flex: 1;
  overflow-x: auto;
}

.ds-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.ds-matrix-table th {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ds-matrix-row-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 8px 4px 0;
  text-align: right;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.ds-matrix-cell {
  text-align: center;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.ds-matrix-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
}

.ds-matrix-dot.filled {
  background: #f59e0b;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.3);
}

.ds-matrix-label-x {
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 2px;
  margin-top: 6px;
}

/* ── System / Causal Flow ── */
.ds-flow-chain {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  flex-wrap: wrap;
}

.ds-flow-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ds-flow-node:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent);
  color: #fff;
}

.ds-flow-arrow {
  font-size: 12px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ds-flow-arrow small {
  font-size: 9px;
  opacity: 0.7;
}

/* ── Trend Chart ── */
.ds-trend-stats {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.ds-trend-stats strong {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  margin-left: 3px;
}

.ds-trend-chart {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  border: none;
}

.ds-trend-chart svg {
  width: 100%;
  height: 100%;
}

.ds-trend-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.25);
  margin-top: 4px;
}

.ds-card-scroll {
  max-height: 360px;
  overflow-y: auto;
}

.ds-card-scroll::-webkit-scrollbar {
  width: 3px;
}

.ds-card-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.ds-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  padding: 16px 0;
}

/* ── Overview Stats Row ── */
.ds-overview-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 16px 24px;
}

.ds-overview-card {
  background: #212121;
  border: none;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ds-overview-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ds-overview-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
}

.ds-overview-data {
  display: flex;
  flex-direction: column;
}

.ds-overview-num {
  font-size: 28px;
  font-weight: 700;
  color: #4ADE80;
  line-height: 1.1;
  font-family: 'Space Grotesk', sans-serif;
}

.ds-overview-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  margin-top: 4px;
  text-transform: uppercase;
  font-family: 'Space Grotesk', sans-serif;
}

/* ── Type Distribution Bars ── */
.ds-type-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.ds-type-svg-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
}

.ds-type-svg-icon svg {
  width: 14px;
  height: 14px;
}

.ds-type-bar-label {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.55);
  min-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ds-type-bar-track {
  flex: 1;
  height: 8px;
  background: #222;
  border-radius: 0;
  overflow: hidden;
}

.ds-type-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.6s ease;
}

.ds-type-bar-count {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
  min-width: 30px;
  text-align: right;
}

/* ── Knowledge Gaps ── */
.ds-gap-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border: 1px dashed #222;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}

.ds-gap-item:hover {
  border-color: #4ADE80;
}

.ds-gap-title {
  font-size: 12px;
  font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-gap-layers {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.ds-gap-dot {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: #4ADE80;
}

.ds-gap-dot.missing {
  background: #1a1a1a;
  border: 1px solid #333;
}

.ds-gap-score {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.3);
  min-width: 20px;
  text-align: right;
}

/* ── Connections ── */
.ds-conn-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 11px;
}

.ds-conn-from,
.ds-conn-to {
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  cursor: pointer;
}

.ds-conn-from:hover,
.ds-conn-to:hover {
  color: var(--accent);
}

.ds-conn-rel {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.ds-conn-arrow {
  color: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Timeline ── */
.ds-tl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
}

.ds-tl-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ds-tl-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  flex-shrink: 0;
}

.ds-tl-title {
  color: rgba(255, 255, 255, 0.55);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-tl-time {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

/* ── Research Coverage Panel ── */
.ds-research-merged {
  display: flex;
  gap: 20px;
}

.ds-research-left {
  flex: 1;
  min-width: 0;
}

.ds-research-right {
  flex: 1;
  min-width: 0;
}

@media (max-width: 700px) {
  .ds-research-merged {
    flex-direction: column;
  }
}

.ds-coverage-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.ds-ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

.ds-ring-wrap svg {
  width: 72px;
  height: 72px;
  transform: rotate(-90deg);
}

.ds-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ds-ring-pct {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

.ds-ring-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.ds-coverage-mini-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.ds-mini-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.ds-mini-stat-num {
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  min-width: 20px;
}

.ds-layer-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

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

.ds-layer-name {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.4);
  min-width: 20px;
  font-weight: 600;
}

.ds-layer-track {
  flex: 1;
  height: 4px;
  background: #222;
  border-radius: 0;
  overflow: hidden;
}

.ds-layer-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.6s ease;
}

.ds-layer-pct {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  min-width: 26px;
  text-align: right;
}

.ds-suggestion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.ds-suggestion-dot {
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: #f59e0b;
  flex-shrink: 0;
}

/* ── Research Rhythm Panel (Heat Map) ── */
.ds-heatmap-wrap {
  margin-bottom: 10px;
}

.ds-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(19, 1fr);
  gap: 1px;
}

.ds-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 0;
  background: #1a1a1a;
  min-width: 0;
}

.ds-heatmap-cell.l1 {
  background: rgba(212, 244, 65, 0.1);
}

.ds-heatmap-cell.l2 {
  background: rgba(212, 244, 65, 0.3);
}

.ds-heatmap-cell.l3 {
  background: rgba(212, 244, 65, 0.55);
}

.ds-heatmap-cell.l4 {
  background: #4ADE80;
}

.ds-heatmap-months {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
}

.ds-rhythm-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.ds-rhythm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ds-rhythm-stat-num {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.ds-rhythm-stat-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
}

.ds-mini-session {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
}

.ds-mini-session:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ds-mini-session-title {
  flex: 1;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-mini-session-bar {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0;
  overflow: hidden;
  flex-shrink: 0;
}

.ds-mini-session-fill {
  height: 100%;
  border-radius: 0;
}

.ds-empty a {
  color: var(--accent);
  text-decoration: none;
}

.ds-empty a:hover {
  text-decoration: underline;
}

/* ── Session Rows ── */
.ds-session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.ds-session-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ds-sr-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.ds-sr-body {
  flex: 1;
  min-width: 0;
}

.ds-sr-name {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.ds-sr-bar {
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0;
  overflow: hidden;
}

.ds-sr-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.4s ease;
}

.ds-sr-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.ds-sr-phase {
  font-size: 10px;
  color: var(--text-muted);
}

.ds-sr-time {
  font-size: 9px;
  color: var(--text-faint);
}

/* ── Object Type Groups ── */
.ds-type-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.ds-type-group:last-child {
  border-bottom: none;
}

.ds-type-group.collapsed .ds-type-items {
  display: none;
}

.ds-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.ds-type-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.ds-type-count {
  font-size: 10px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 0;
}

.ds-type-items {
  padding: 0 0 4px;
}

.ds-obj-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 14px 4px 28px;
  cursor: pointer;
  transition: background 0.15s;
}

.ds-obj-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.ds-obj-name {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-obj-fill {
  font-size: 10px;
  color: var(--text-faint);
  flex-shrink: 0;
  margin-left: 8px;
}

.ds-obj-fill.mid {
  color: #f59e0b;
}

.ds-obj-fill.high {
  color: #4ADE80;
}

/* ── Dimension Axes ── */
.ds-dimensions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 14px 8px;
}

.ds-dim {
  padding: 4px 0;
}

.ds-dim-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.ds-dim-axis {
  position: relative;
  height: 28px;
  margin: 0 8px;
}

.ds-dim-line {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.ds-dim-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ds-dim-tick-mark {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
}

.ds-dim-tick span {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ds-dim-meta {
  font-size: 9px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ── Sub-domain Chips ── */
.ds-children {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 14px 8px;
}

.ds-child-chip {
  padding: 6px 14px;
  border: 1px solid;
  border-radius: 0;
  font-size: 12px;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ds-child-chip:hover {
  background: rgba(212, 244, 65, 0.06);
}

.ds-child-count {
  font-size: 10px;
  opacity: 0.6;
}

/* ── Card Drag-Resize Handle ── */
.ds-card {
  position: relative;
}

.ds-card-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  cursor: ns-resize;
  z-index: 5;
  background: transparent;
  transition: background 0.15s, box-shadow 0.15s;
}

.ds-card-resize-handle:hover,
.ds-card-resize-handle.dragging {
  background: #4ADE80;
  opacity: 0.8;
  box-shadow: 0 0 8px 2px rgba(212, 244, 65, 0.5), 0 0 16px 4px rgba(212, 244, 65, 0.25);
}

.ds-card.resizing {
  user-select: none;
}

.ds-card[style*="height"] {
  overflow: hidden;
}

.ds-card[style*="height"] .ds-card-body {
  overflow-y: auto;
  max-height: calc(100% - 36px);
  display: flex;
  flex-direction: column;
}

.ds-card[style*="height"] .ds-trend-chart {
  flex: 1;
  height: auto;
  min-height: 40px;
}

.ds-card[style*="height"] .ds-trend-chart svg {
  width: 100%;
  height: 100%;
}

/* ── Object List View ── */
.obj-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
  font-size: 13px;
  color: var(--text-secondary);
}

.obj-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.obj-list-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.obj-list-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.8;
}

.obj-list-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-list-meta {
  font-size: 11px;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   Research Progress Pipeline & Phase Panels
   ═══════════════════════════════════════════════════════ */
.rp-pipeline {
  margin: 16px 24px 0;
  background: #212121;
  border: none;
  border-radius: 6px;
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rp-pipeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 8px;
  background: transparent;
  border-bottom: none;
}

.rp-pipeline-tag {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 1.5px;
}

.rp-pipeline-title {
  font-size: 14px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  color: #fff;
}

.rp-pipeline-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-mode-tag {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 8px;
  border: 1px solid;
  letter-spacing: 0.5px;
}

.rp-overall {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.4);
}

.rp-progress-bar {
  height: 2px;
  background: #1a1a1a;
  margin: 0 16px;
}

.rp-progress-fill {
  height: 100%;
  transition: width 0.5s ease;
}

.rp-phases {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 16px;
  gap: 0;
}

.rp-phase {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.rp-phase-locked {
  opacity: 0.35;
}

.rp-phase-num {
  width: 24px;
  height: 24px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.rp-phase-info {
  min-width: 0;
}

.rp-phase-label {
  font-size: 12px;
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  white-space: nowrap;
}

.rp-phase-label-en {
  font-size: 8px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rp-phase-active .rp-phase-label-en,
.rp-phase-complete .rp-phase-label-en {
  color: rgba(255, 255, 255, 0.85);
}

.rp-phase-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'JetBrains Mono', monospace;
}

.rp-phase-active .rp-phase-sub,
.rp-phase-complete .rp-phase-sub {
  color: rgba(255, 255, 255, 0.85);
}

.rp-phase-ring {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.rp-phase-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}

.rp-phase-arrow {
  color: rgba(255, 255, 255, 0.15);
  font-size: 16px;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Phase hover linkage */
.rp-phase {
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 6px;
  padding: 4px 6px;
}

.rp-phase:hover {
  background: rgba(255, 255, 255, 0.06);
}

.rp-card {
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s ease,
    box-shadow 0.3s ease;
}

.rp-card-highlight {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: relative;
}

.rp-card-dim {
  opacity: 0.4;
  transform: scale(0.97);
}

/* Phase Grid (4 columns) */
.rp-phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 8px 24px 4px;
}

@media (max-width: 1000px) {
  .rp-phase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.rp-card {
  min-height: 140px;
}

/* Phase 1: Core Objects */
.rp-obj-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp-obj-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.rp-obj-icon {
  display: flex;
  width: 14px;
  flex-shrink: 0;
}

.rp-obj-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-obj-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

/* Phase 2: Core Structures */
.rp-struct-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-struct-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #1a1a1a;
}

.rp-struct-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}

.rp-struct-count {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.5);
}

.rp-struct-layers {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp-layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-layer-label {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.35);
  width: 48px;
  flex-shrink: 0;
}

.rp-layer-bar {
  flex: 1;
  height: 3px;
  background: #1a1a1a;
  overflow: hidden;
}

.rp-layer-val {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.25);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
}

/* Phase 3: Core Dimensions */
.rp-dim-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-dim-item {
  padding: 4px 0;
  border-bottom: 1px solid #1a1a1a;
}

.rp-dim-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-bottom: 4px;
}

.rp-dim-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.rp-dim-sub-tag {
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #222;
  color: rgba(255, 255, 255, 0.4);
  font-family: 'JetBrains Mono', monospace;
}

/* Phase 4: Research Topics */
.rp-topic-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.rp-topic-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rp-topic-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rp-topic-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rp-topic-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.rp-topic-name {
  flex: 1;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-topic-status {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

/* Empty state */
.rp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 8px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  gap: 4px;
}

.rp-empty-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.rp-empty-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════
   Research Mode Selector Modal
   ═══════════════════════════════════════════════════════ */
.rm-modal {
  width: 90vw;
  max-width: 1100px;
  max-height: 90vh;
  overflow-y: auto;
  background: #141416;
  border: 1px solid #222;
  padding: 0;
}

.rm-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid #222;
  background: radial-gradient(ellipse at 50% 0%, rgba(212, 244, 65, 0.04) 0%, transparent 60%);
}

.rm-header-tag {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.rm-header-title {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  color: #4ADE80;
  margin-bottom: 6px;
}

.rm-header-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

.rm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 20px 24px;
}

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

@media (max-width: 500px) {
  .rm-grid {
    grid-template-columns: 1fr;
  }
}

.rm-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #222;
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  animation: rmCardIn 0.3s ease backwards;
}

.rm-card:nth-child(1) {
  animation-delay: 0.05s;
}

.rm-card:nth-child(2) {
  animation-delay: 0.1s;
}

.rm-card:nth-child(3) {
  animation-delay: 0.15s;
}

.rm-card:nth-child(4) {
  animation-delay: 0.2s;
}

@keyframes rmCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

.rm-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.rm-card:active {
  transform: translateY(0);
}

.rm-card-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.rm-card-label {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 2px;
}

.rm-card-label-en {
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.rm-card-tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 12px;
}

.rm-card-divider {
  height: 1px;
  background: #222;
  margin: 0 0 12px;
}

.rm-card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.6;
  margin-bottom: 12px;
}

.rm-card-section {
  margin-bottom: 8px;
}

.rm-card-section-label {
  display: block;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.rm-card-section-value {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

.rm-card-dims {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
}

.rm-dim-tag {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 6px;
  border: 1px solid;
  letter-spacing: 0.5px;
}

.rm-footer {
  padding: 16px 32px;
  border-top: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rm-footer-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.rm-close-btn {
  background: transparent;
  border: 1px solid #333;
  color: rgba(255, 255, 255, 0.5);
  padding: 6px 16px;
  font-size: 11px;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}

.rm-close-btn:hover {
  border-color: #4ADE80;
  color: #4ADE80;
}

/* Mode badge on domain HUD topbar */
.ds-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ds-mode-badge:hover {
  opacity: 0.8;
}

/* ── Saved AI Section (collapsible in object content) ── */
details.kp-saved-section {
  margin: 12px 0;
  border: 1px solid rgba(212, 244, 65, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(212, 244, 65, 0.03);
}

details.kp-saved-section>summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #d4f441);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(212, 244, 65, 0.08);
  transition: background 0.15s;
}

details.kp-saved-section>summary::-webkit-details-marker {
  display: none;
}

details.kp-saved-section>summary::before {
  content: '▶';
  font-size: 8px;
  color: rgba(212, 244, 65, 0.5);
  transition: transform 0.2s;
}

details.kp-saved-section[open]>summary::before {
  transform: rotate(90deg);
}

details.kp-saved-section>summary:hover {
  background: rgba(212, 244, 65, 0.06);
}

details.kp-saved-section .kp-saved-body {
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text, #e0e0e0);
}

details.kp-saved-section .kp-saved-body h3,
details.kp-saved-section .kp-saved-body h4 {
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--text);
}

details.kp-saved-section .kp-saved-body .kp-table-wrap {
  margin: 8px 0;
  overflow-x: auto;
}

details.kp-saved-section .kp-saved-body .kp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

details.kp-saved-section .kp-saved-body .kp-table th,
details.kp-saved-section .kp-saved-body .kp-table td {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

details.kp-saved-section .kp-saved-body .kp-table th {
  background: rgba(212, 244, 65, 0.08);
  color: var(--accent);
  font-weight: 600;
}

details.kp-saved-section .kp-saved-body .kp-diagram {
  margin: 8px 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

details.kp-saved-section .kp-saved-body .kp-diagram pre {
  margin: 0;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
  white-space: pre;
}

/* ══════════════════════════════════════════════
   AI Memory & Research Directions Panels
   ══════════════════════════════════════════════ */

/* Floating panel container (injected by JS) */
/* ── Floating Memory Panel (charcoal) ── */
.floating-mem-panel {
  position: fixed;
  top: 44px;
  right: var(--my-panel-stack-right);
  z-index: 9000;
  width: 304px;
  height: 65vh;
  display: flex;
  flex-direction: column;
  background: var(--moko-tier-bg);
  backdrop-filter: var(--moko-tier-backdrop);
  -webkit-backdrop-filter: var(--moko-tier-backdrop);
  border: 1px solid var(--moko-tier-border);
  border-radius: var(--moko-tier-radius);
  box-shadow: var(--moko-tier-shadow);
  animation: fadeInDropdown 0.15s ease-out;
  overflow: hidden;
}

.floating-mem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0.01em;
}

.floating-mem-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: all 0.15s;
}

.floating-mem-close:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

.floating-mem-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
}

/* ── Floating Panel Resize Handles ── */
.fp-resize {
  position: absolute;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}

.floating-mem-panel:hover .fp-resize {
  opacity: 1;
}

/* Left edge — resize width */
.fp-resize-left {
  top: 40px;
  left: -1px;
  bottom: 14px;
  width: 5px;
  cursor: ew-resize;
}

.fp-resize-left:hover {
  background: linear-gradient(to right, rgba(212, 244, 65, 0.15), transparent);
}

/* Bottom edge — resize height */
.fp-resize-bottom {
  bottom: -1px;
  left: 14px;
  right: 0;
  height: 5px;
  cursor: ns-resize;
}

.fp-resize-bottom:hover {
  background: linear-gradient(to bottom, transparent, rgba(212, 244, 65, 0.15));
}

/* Bottom-left corner — resize both */
.fp-resize-corner {
  bottom: 0;
  left: 0;
  width: 14px;
  height: 14px;
  cursor: nesw-resize;
}

.fp-resize-corner::before {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
  border-left: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.15s;
}

.floating-mem-panel:hover .fp-resize-corner::before {
  border-color: rgba(255, 255, 255, 0.35);
}

/* ── Settings Panel ── */
.settings-panel {
  padding: 4px 0;
}

.settings-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  padding: 10px 14px;
}

.settings-section:last-of-type {
  border-bottom: none;
}

.settings-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(212, 244, 65, 0.7);
  font-weight: 600;
  margin-bottom: 8px;
}

.settings-section-title svg {
  flex-shrink: 0;
}

.settings-section-cn {
  color: rgba(255, 255, 255, 0.25);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: auto;
  font-size: 10px;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  gap: 12px;
  min-height: 28px;
}

.settings-item-info {
  flex: 1;
  min-width: 0;
}

.settings-item-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
}

.settings-item-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1.3;
  margin-top: 1px;
}

/* Toggle switch (iOS style) */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}

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

.settings-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  transition: all 0.2s;
}

.settings-toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.2s;
}

.settings-toggle input:checked+.settings-toggle-slider {
  background: rgba(212, 244, 65, 0.35);
}

.settings-toggle input:checked+.settings-toggle-slider::before {
  transform: translateX(14px);
  background: #D4F441;
}

/* Select dropdown */
.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 3px 20px 3px 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.settings-select:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.settings-select:focus {
  border-color: rgba(212, 244, 65, 0.4);
}

.settings-select option {
  background: #1c1c20;
  color: #ddd;
}

/* Footer */
.settings-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-footer-dot {
  font-size: 8px;
}

/* ── AI Memory Panel ── */
.mem-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mem-panel-header h3 {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

.mem-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

.mem-filter {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mem-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  padding: 3px 7px;
  cursor: pointer;
  transition: all 0.15s;
}

.mem-filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.mem-filter-btn.active {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

.mem-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mem-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.25);
  padding: 24px 12px;
  font-size: 11px;
  line-height: 1.7;
}

.mem-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 7px 9px;
  transition: all 0.15s;
}

.mem-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.mem-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.mem-cat-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.mem-domain {
  background: rgba(167, 139, 250, 0.7);
  color: #08080C;
  border: none;
  padding: 2px 6px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.mem-domain:hover {
  opacity: 0.9;
}

.mem-stars {
  font-size: 10px;
  color: rgba(250, 204, 21, 0.6);
  margin-left: auto;
  letter-spacing: 1px;
}

.mem-del-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
}

.mem-del-btn:hover {
  color: #f87171;
}

.mem-content {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.mem-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
  margin-top: 4px;
}

/* ── Research Directions Panel ── */
.rd-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rd-panel-header h3 {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rd-add-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.rd-add-btn:hover {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.2);
}

.rd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rd-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 8px 10px;
  transition: all 0.15s;
}

.rd-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.rd-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rd-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.rd-status {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  gap: 4px;
}

.rd-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.rd-dot.active {
  background: #4ade80;
}

.rd-dot.paused {
  background: #fbbf24;
}

.rd-dot.done {
  background: #22d3ee;
}

.rd-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 6px;
  line-height: 1.5;
}

.rd-goals-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-bottom: 4px;
  overflow: hidden;
}

.rd-goals-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 2px;
  transition: width 0.3s;
}

.rd-goals-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 6px;
}

.rd-ai-notes {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
  line-height: 1.5;
}

.rd-ai-label {
  color: rgba(96, 165, 250, 0.7);
}

.rd-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.rd-act-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.rd-act-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* ── User Profile Section ── */
.up-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.up-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.up-section-header h4 {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.up-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.up-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
}

.up-key {
  font-size: 10px;
  color: rgba(96, 165, 250, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.up-value {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 4px;
}

.up-conf-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.up-conf-bar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.up-conf-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.6), rgba(167, 139, 250, 0.6));
  border-radius: 2px;
  transition: width 0.3s;
}

.up-conf-text {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.3);
  min-width: 28px;
}

/* ── Enhanced Direction Cards ── */
.rd-desc-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 6px;
}

.rd-desc-row .rd-desc {
  flex: 1;
}

.rd-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  opacity: 0.3;
  transition: opacity 0.15s;
}

.rd-card:hover .rd-edit-btn {
  opacity: 0.7;
}

.rd-goals-section {
  margin: 6px 0 8px;
}

.rd-goals-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rd-goals-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.rd-goal-add {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rd-goal-add:hover {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.rd-goal-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.rd-goal-item.done span {
  text-decoration: line-through;
  opacity: 0.4;
}

.rd-goal-check {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  cursor: pointer;
}

.rd-goal-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #4ade80;
}

.rd-goal-del {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.15);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}

.rd-goal-item:hover .rd-goal-del {
  opacity: 1;
}

.rd-goal-del:hover {
  color: #f87171;
}

/* AI notes — collapsible */
.rd-ai-notes-section {
  margin: 6px 0 8px;
}

.rd-ai-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 4px;
}

.rd-ai-label {
  font-size: 11px;
  color: rgba(96, 165, 250, 0.7);
}

.rd-expand-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
}

.rd-ai-notes-preview {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  white-space: pre-line;
}

.rd-ai-notes-full {
  display: none;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  white-space: pre-line;
  max-height: 200px;
  overflow-y: auto;
}

.rd-ai-notes-section.expanded .rd-ai-notes-preview {
  display: none;
}

.rd-ai-notes-section.expanded .rd-ai-notes-full {
  display: block;
}

.rd-ai-notes-section.expanded .rd-expand-hint::after {
  content: ' ▴';
}

/* Card footer */
.rd-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.rd-date {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
}

/* ── Inline editing for Research Directions ── */
.rd-inline-form {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rd-inline-input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  padding: 5px 8px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.rd-inline-input:focus {
  border-color: rgba(74, 222, 128, 0.4);
}

.rd-inline-input::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.rd-inline-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.rd-inline-save {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
}

.rd-inline-save:hover {
  background: rgba(74, 222, 128, 0.25);
}

.rd-inline-cancel {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.rd-inline-cancel:hover {
  color: rgba(255, 255, 255, 0.7);
}

.rd-inline-save-sm {
  background: none;
  border: none;
  color: #4ade80;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: all 0.15s;
}

.rd-inline-save-sm:hover {
  color: #86efac;
}

.rd-goal-input-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.rd-goal-input-row .rd-inline-input {
  flex: 1;
}

.rd-desc-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rd-desc-row .rd-inline-input {
  flex: 1;
}

/* ── Onboarding Spotlight Tutorial ── */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  /* Let clicks pass through to elevated action targets */
  transition: opacity 0.4s ease;
}

.onboarding-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.onboarding-overlay>svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  /* SVG dark mask captures clicks to prevent clicking random stuff */
}

/* Spotlight glow ring */
.onboarding-spotlight-ring {
  position: absolute;
  border: 1.5px solid rgba(232, 212, 77, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(232, 212, 77, 0.2);
  pointer-events: none;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  animation: onboarding-pulse 2.5s ease-in-out infinite;
}

@keyframes onboarding-pulse {

  0%,
  100% {
    box-shadow: 0 0 24px rgba(232, 212, 77, 0.2);
  }

  50% {
    box-shadow: 0 0 36px rgba(232, 212, 77, 0.4);
  }
}

/* Tooltip — borderless frosted glass at 50% opacity */
.onboarding-tooltip {
  position: absolute;
  z-index: 99991;
  width: 360px;
  background: rgba(18, 18, 26, 0.50);
  backdrop-filter: blur(32px) saturate(1.4);
  -webkit-backdrop-filter: blur(32px) saturate(1.4);
  border: none;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  pointer-events: auto;
  /* Tooltip must be clickable even though parent overlay is pointer-events:none */
}

.onboarding-tooltip.entering {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

/* Icon + Title row */
.onboarding-tooltip-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.onboarding-tooltip-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.onboarding-tooltip-icon svg {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
}

.onboarding-tooltip-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}

.onboarding-tooltip-desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.52);
  margin-bottom: 16px;
}

.onboarding-tooltip-desc b {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.onboarding-tooltip-desc kbd {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-family: 'SF Mono', monospace;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 2px;
}

.onboarding-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.onboarding-step-dots {
  display: flex;
  gap: 5px;
}

.onboarding-step-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: all 0.35s;
}

.onboarding-step-dot.active {
  background: rgba(232, 212, 77, 0.85);
  width: 16px;
  border-radius: 3px;
}

.onboarding-step-dot.done {
  background: rgba(232, 212, 77, 0.35);
}

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

.onboarding-btn-skip {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.28);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.onboarding-btn-skip:hover {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
}

.onboarding-btn-next {
  background: rgba(232, 212, 77, 0.15);
  border: none;
  color: rgba(232, 212, 77, 0.9);
  font-size: 11px;
  white-space: nowrap;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s;
}

.onboarding-btn-next:hover {
  background: rgba(232, 212, 77, 0.28);
  color: #fff;
  transform: translateY(-1px);
}

/* Previous button */
.onboarding-btn-prev {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.15s;
}

.onboarding-btn-prev:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

/* Step counter badge */
.onboarding-step-counter {
  margin-left: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

/* Interactive action hint bar */
.onboarding-action-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 212, 77, 0.08);
  border: 1px solid rgba(232, 212, 77, 0.2);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: rgba(232, 212, 77, 0.85);
}

.onboarding-action-pulse {
  animation: ob-pulse 1.5s ease-in-out infinite;
  font-size: 16px;
}

@keyframes ob-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

/* Success feedback */
.onboarding-action-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4ADE80;
  animation: ob-feedback-in 0.3s ease-out;
}

.onboarding-feedback-icon {
  display: flex;
  width: 18px;
  height: 18px;
}

.onboarding-feedback-icon svg {
  width: 18px;
  height: 18px;
}

@keyframes ob-feedback-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

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

/* Disabled/waiting next button */
.onboarding-btn-next.onboarding-btn-waiting {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 7 Meta-type chip grid (onboarding) */
.ob-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}

.ob-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mc, rgba(255, 255, 255, 0.7));
  background: color-mix(in srgb, var(--mc, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--mc, #888) 25%, transparent);
  white-space: nowrap;
}

/* Welcome / Final — centered */
.onboarding-tooltip.center-mode {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: 420px;
  text-align: center;
  padding: 32px 28px;
}

.onboarding-tooltip.center-mode .onboarding-tooltip-header {
  justify-content: center;
  margin-bottom: 12px;
}

.onboarding-tooltip.center-mode .onboarding-tooltip-icon {
  width: 22px;
  height: 22px;
}

.onboarding-tooltip.center-mode .onboarding-tooltip-title {
  font-size: 18px;
}

.onboarding-tooltip.center-mode .onboarding-tooltip-footer {
  justify-content: center;
}

.onboarding-tooltip.center-mode .onboarding-step-dots {
  display: none;
}

/* ══════════════════════════════════════════════
   Chat Message Right-Click Context Menu
   ══════════════════════════════════════════════ */
.kp-ctx-menu {
  position: fixed;
  z-index: 99999;
  min-width: 160px;
  background: rgba(28, 28, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: fadeInDropdown 0.12s ease-out;
}

.kp-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background 0.1s;
}

.kp-ctx-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.kp-ctx-item.danger {
  color: #f87171;
}

.kp-ctx-item.danger:hover {
  background: rgba(248, 113, 113, 0.1);
}

.kp-hi-mode-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ── LINK PASTE MENU & PREVIEW CARD ── */
.link-paste-menu {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  min-width: 260px;
}

.link-preview-card {
  display: flex;
  margin: 6px 0;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.03));
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  max-width: 600px;
  user-select: none;
}

.link-preview-card:hover {
  border-color: var(--primary-color, rgba(255, 255, 255, 0.3));
  background: var(--bg-surface-3, rgba(255, 255, 255, 0.06));
}

.link-preview-card.loading {
  opacity: 0.6;
  pointer-events: none;
}

.lpc-content {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lpc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #fff);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpc-desc {
  font-size: 12px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lpc-url {
  font-size: 11px;
  color: var(--text-dim, rgba(255, 255, 255, 0.3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpc-image {
  width: 120px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  background: rgba(0, 0, 0, 0.2);
}

.lpc-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lpc-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.link-preview-card:hover .lpc-delete {
  opacity: 1;
}

.lpc-delete:hover {
  background: rgba(255, 0, 0, 0.6);
  color: #fff;
}


/* ── 16:9 PREVIEW CARD ── */
.link-preview-card-169 {
  display: flex;
  flex-direction: column;
  margin: 8px 0;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.03));
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
  max-width: 480px;
  user-select: none;
}

.link-preview-card-169:hover {
  border-color: var(--primary-color, rgba(255, 255, 255, 0.3));
}

.link-preview-card-169.loading {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  opacity: 0.6;
}

.lpc-169-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.lpc-169-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lpc-169-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.lpc-169-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #fff);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpc-169-desc {
  font-size: 12px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lpc-169-url {
  font-size: 11px;
  color: var(--text-dim, rgba(255, 255, 255, 0.3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lpc-169-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.link-preview-card-169:hover .lpc-169-delete {
  opacity: 1;
}

.lpc-169-delete:hover {
  background: rgba(255, 0, 0, 0.8);
  color: #fff;
}


/* ── VIDEO EMBED WRAPPER ── */
.video-embed-wrapper {
  margin: 8px 0;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface-2, rgba(255, 255, 255, 0.03));
  max-width: 560px;
  user-select: none;
  position: relative;
}

.video-embed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.video-embed-platform {
  font-weight: 600;
  color: var(--text-color, #fff);
  font-size: 12px;
}

.video-embed-link {
  color: var(--accent, #a78bfa);
  text-decoration: none;
  font-size: 11px;
  margin-left: auto;
}

.video-embed-link:hover {
  text-decoration: underline;
}

.video-embed-delete {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s;
}

.video-embed-delete:hover {
  background: rgba(255, 0, 0, 0.6);
  color: #fff;
}

.video-embed-frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 */
}

.video-embed-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-embed-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #fff);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Video embed collapse toggle */
.video-embed-toggle {
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.2s;
  user-select: none;
}

.video-embed-toggle:hover {
  color: rgba(255, 255, 255, 0.9);
}

.video-embed-wrapper.collapsed .video-embed-frame {
  display: none;
}

.video-embed-wrapper.collapsed {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}


/* Code-line with title: vertical layout for title + code block */
.code-line {
  flex-wrap: wrap;
}

.code-line>.node-content {
  flex: 0 0 calc(100% - 30px);
  margin-bottom: 2px;
}

.code-line>.code-block-container {
  flex: 0 0 calc(100% - 30px);
  margin-left: 30px;
  width: auto;
}

/* Collapse inline content (images, tables, embeds) when node is collapsed */
/* Images are now siblings of node-content, not inside it */
.node-line.collapsed>.node-image-wrapper,
.node-line.collapsed>.node-content>.node-inline-table,
.node-line.collapsed>.node-content>.node-divider,
.node-line.collapsed>.node-content>.video-embed-wrapper,
.node-line.collapsed>.node-content>.url-preview-card {
  display: none !important;
}

/* Image nodes: vertical layout for title + image (same as code blocks) */
.node-line:has(> .node-image-wrapper) {
  flex-wrap: wrap;
}

.node-line:has(> .node-image-wrapper)>.node-content {
  flex: 0 0 calc(100% - 30px);
  margin-bottom: 2px;
}

.node-line>.node-image-wrapper {
  flex: 0 0 calc(100% - 30px);
  margin-left: 30px;
}

/* ── AI Relation Ghost Pills (matches real pill, gray style) ── */
.relation-ghost-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  vertical-align: middle;
  padding: 0 2px 2px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.15s;
  animation: ghost-in 0.25s ease-out;
}

.relation-ghost-pill:hover {
  opacity: 0.85;
}

/* Ghost name: matches real pill layout but gray */
.ghost-pill-name {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.relation-ghost-pill:hover .ghost-pill-name {
  color: rgba(255, 255, 255, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.relation-ghost-pill.ghost-confirming {
  opacity: 0.4;
  pointer-events: none;
  animation: ghost-pulse 0.6s ease-in-out infinite;
}

/* Auto-linked pill flash animation */
.relation-auto-linked {
  animation: auto-link-flash 0.6s ease-out;
}

@keyframes auto-link-flash {
  0% {
    background: rgba(74, 222, 128, 0.15);
  }

  100% {
    background: transparent;
  }
}

@keyframes ghost-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

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

@keyframes ghost-pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* ── Chat Message Delete Confirm (frosted glass) ── */
.msg-delete-confirm {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(80, 80, 80, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 10;
  animation: ghost-in 0.15s ease-out;
}

.msg-delete-confirm:hover {
  background: rgba(220, 60, 60, 0.45);
  color: rgba(255, 255, 255, 0.95);
}

/* ══════════════════════════════════════════════
   Graph Relation Legend
   ══════════════════════════════════════════════ */
#relationLegend {
  position: absolute;
  bottom: 48px;
  right: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(30, 30, 30, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 10px 14px;
  z-index: 100;
  pointer-events: auto;
  letter-spacing: 0.5px;
}

#relationLegend .legend-title {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  white-space: nowrap;
}

#relationLegend .legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 6px;
}

#relationLegend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s;
  opacity: 0.8;
}

#relationLegend .legend-item:hover {
  opacity: 1;
  color: rgba(255, 255, 255, 0.9);
}

#relationLegend .legend-item.active {
  opacity: 1;
  color: #fff;
  font-weight: 700;
}

#relationLegend .legend-color-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#relationLegend .legend-label {
  font-size: 10px;
}

/* ── Backlink Editable Description Labels ── */
.conn-desc-label {
  font-size: 10px;
  color: var(--accent);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.conn-desc-label:hover {
  background: rgba(212, 244, 65, 0.1);
  text-decoration: underline;
}

.conn-desc-add {
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 0;
  transition: all 0.15s ease;
}

.conn-item:hover .conn-desc-add {
  opacity: 1;
}

.conn-desc-add:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* ── Connection Edit Panel (shared graph + backlink) ── */
.conn-edit-panel {
  position: fixed;
  z-index: 1200;
  width: 240px;
  background: rgba(20, 20, 24, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: cepIn 0.18s ease;
}

@keyframes cepIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }

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

.cep-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
}

.cep-from {
  color: #4ade80;
}

.cep-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
}

.cep-to {
  color: #60a5fa;
}

.cep-section-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  margin-top: 2px;
}

/* Relation type radio buttons */
.cep-rel-types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.cep-rel-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.15s;
  background: rgba(255, 255, 255, 0.03);
  user-select: none;
}

.cep-rel-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
}

.cep-rel-option.active {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  font-weight: 600;
}

.cep-rel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Multi-select description chips */
.cep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.cep-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}

.cep-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.cep-chip.active {
  background: rgba(212, 244, 65, 0.12);
  color: var(--accent, #d4f441);
  font-weight: 500;
}

/* Custom description input */
.cep-desc-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text, #fff);
  font-size: 11px;
  outline: none;
  font-family: inherit;
  margin-bottom: 12px;
  transition: background 0.15s;
}

.cep-desc-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.cep-desc-input:focus {
  background: rgba(255, 255, 255, 0.07);
}

/* Confirm button */
.cep-confirm-btn {
  width: 100%;
  padding: 7px 0;
  border: none;
  border-radius: 8px;
  background: rgba(212, 244, 65, 0.12);
  color: var(--accent, #d4f441);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  letter-spacing: 0.3px;
}

.cep-confirm-btn:hover {
  background: rgba(212, 244, 65, 0.22);
  color: #e8ff70;
}

/* AI Extraction Marquee Border */
@keyframes borderGlowSpin {
  100% {
    transform: rotate(1turn);
  }
}

.extracting-marquee-overlay {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  /* border thickness */
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: inset 0 0 20px rgba(250, 204, 21, 0.4);
}

.extracting-marquee-overlay::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 50%, #facc15 80%, transparent 100%);
  animation: borderGlowSpin 3s linear infinite;
}

/* Pulsing text hint optionally */
.extracting-pulse-text {
  animation: extractTextPulse 1.5s infinite alternate;
}

@keyframes extractTextPulse {
  0% {
    opacity: 0.6;
    text-shadow: 0 0 5px rgba(250, 204, 21, 0);
  }

  100% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
  }
}

/* Reading Sidebar Chevron Hover & Animation */
.reading-expand-btn {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.kp-history-item:hover .reading-expand-btn {
  opacity: 1;
}

.reading-expand-btn.expanded {
  transform: rotate(180deg);
}

/* Chrome Autofill Override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ═══ Bulk Selection & Floating Action Bar ═══ */
.bulk-fab {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(25, 25, 30, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  /* Changed from 40px to 12px for rounded rectangle */
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index: 9999;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
  opacity: 0;
  pointer-events: none;
}

.bulk-fab.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bulk-fab-text {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  margin-right: 8px;
  padding-left: 8px;
}

.bulk-fab-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.15);
}

.bulk-fab .btn {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
  /* Also reduce internal button radius for consistency */
  font-weight: 500;
}

.bulk-fab .btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Custom Gray Checkboxes to lower presence */
.obj-checkbox,
.obj-checkbox-all {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  /* dim gray */
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  margin: 0;
}

.obj-checkbox:checked,
.obj-checkbox-all:checked {
  background: rgba(255, 255, 255, 0.2);
  /* slightly lighter gray when checked */
  border-color: rgba(255, 255, 255, 0.4);
}

.obj-checkbox:checked::after,
.obj-checkbox-all:checked::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;
}

/* ── Notion-style hover-reveal checkboxes ── */

/* Table view: checkbox column always present but checkbox invisible until hover */
.table-view th.td-cb,
.table-view td.td-cb {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
  padding: 0;
}

.table-view td.td-cb {
  cursor: default;
}

.table-view td.td-cb .obj-checkbox {
  opacity: 0;
  transition: opacity 0.15s;
}

.table-view tr:hover td.td-cb .obj-checkbox,
.table-view td.td-cb .obj-checkbox:checked {
  opacity: 1;
}

/* Table header "select all" — always dim, brighten on hover */
.table-view th.td-cb .obj-checkbox-all {
  opacity: 0.3;
  transition: opacity 0.15s;
}

.table-view th.td-cb:hover .obj-checkbox-all {
  opacity: 1;
}

/* List view: checkbox wrap always inline but invisible until hover */
.li-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  width: 20px;
  min-width: 20px;
}

.li-checkbox-wrap .obj-checkbox {
  opacity: 0;
  transition: opacity 0.15s;
}

.list-item:hover .li-checkbox-wrap .obj-checkbox,
.li-checkbox-wrap .obj-checkbox:checked {
  opacity: 1;
}

/* Gallery view: checkbox overlay on card */
.card-checkbox-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  opacity: 0;
  transition: opacity 0.15s;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  padding: 4px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
}

.obj-card:hover .card-checkbox-overlay,
.card-checkbox-overlay.active {
  opacity: 1;
}

/* When any item is selected, show all checkboxes globally */
body.has-selection .table-view td.td-cb .obj-checkbox,
body.has-selection .li-checkbox-wrap .obj-checkbox,
body.has-selection .card-checkbox-overlay {
  opacity: 1;
}

/* --- fc-animated-edge --- */
.fc-animated-edge {
  stroke-dasharray: 4 45;
  animation: fc-dash-moving 1.2s linear infinite;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 1px currentColor);
}

@keyframes fc-dash-moving {
  to {
    stroke-dashoffset: -49px;
  }
}

/* AntV X6 Canvas Styles */
.x6-port-body {
  visibility: hidden;
  transition: visibility 0.2s, transform 0.2s;
}

.x6-node:hover .x6-port-body,
.x6-node.x6-node-selected .x6-port-body {
  visibility: visible;
}

/* ── Mermaid Fullscreen Modal ── */
.kp-mermaid-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(10px);
  z-index: 99999;
  overflow: auto;
  padding: 40px;
}

.kp-mermaid-fs-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 100%;
}

.kp-mermaid-fs-content svg {
  width: 120%;
  height: auto;
  min-width: 1000px;
  max-width: none;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
}

.kp-mermaid-fs-close {
  position: fixed;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  transition: background 0.15s;
}

.kp-mermaid-fs-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.x6-port-body:hover {
  transform: scale(1.5);
  stroke: #D4F441 !important;
  stroke-width: 4 !important;
}

/* ── Feature Flag: Hide Canvas in Prod ── */
html.feature-hide-canvas #graphCanvasToggle,
html.feature-hide-canvas #sidebarObjectsBtn,
html.feature-hide-canvas .op-action-btn[onclick*="toggleFreeCanvas"],
html.feature-hide-canvas .op-action-btn[onclick*="openFreeCanvas"] {
  display: none !important;
}

.op-workbench-subgraph {
  margin: 8px 8px 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 244, 65, 0.28);
  background: linear-gradient(180deg, rgba(212, 244, 65, 0.08), rgba(255, 255, 255, 0.01));
}

.op-workbench-subgraph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.op-workbench-subgraph-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-primary);
}

.op-workbench-subgraph-meta {
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 1px 8px;
}

.op-workbench-subgraph-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.op-workbench-depth-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.op-workbench-depth-btn {
  flex: 1;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font-size: 11px;
  cursor: pointer;
}

.op-workbench-depth-btn.is-active {
  border-color: rgba(212, 244, 65, 0.9);
  background: rgba(212, 244, 65, 0.18);
}

.op-workbench-insert-btn {
  width: 100%;
  height: 32px;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid rgba(212, 244, 65, 0.45);
  background: rgba(212, 244, 65, 0.14);
  color: #eefad2;
  font-size: 12px;
  cursor: pointer;
}

.op-workbench-insert-btn:disabled {
  opacity: .55;
  cursor: default;
}

.op-object-orbit {
  margin: 8px 8px 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.09), rgba(255, 255, 255, 0.01));
}

.op-object-orbit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.op-object-orbit-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-primary);
}

.op-object-orbit-meta {
  font-size: 10px;
  color: var(--text-faint);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 1px 8px;
}

.op-object-orbit-hint {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

.op-object-orbit-controls {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.op-object-orbit-depth-row {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
}

.op-object-orbit-depth-btn {
  flex: 1;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font-size: 11px;
  cursor: pointer;
}

.op-object-orbit-depth-btn.is-active {
  border-color: rgba(56, 189, 248, 0.92);
  background: rgba(56, 189, 248, 0.2);
}

.op-object-orbit-filter {
  width: 132px;
  max-width: 44%;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.24);
  color: var(--text-primary);
  font-size: 11px;
  padding: 0 8px;
}

.op-object-orbit-panel-wrap {
  margin-top: 8px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f141d;
}

.op-object-orbit-panel {
  width: 100%;
  height: 220px;
  min-height: 180px;
}

.op-object-orbit-status {
  position: absolute;
  left: 10px;
  bottom: 8px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  background: rgba(15, 20, 29, 0.72);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: none;
}

.op-object-orbit-status[data-state="loading"] {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.4);
}

.op-object-orbit-status[data-state="error"] {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.4);
}

.op-object-orbit-footer {
  margin-top: 8px;
}

.op-object-orbit-stats {
  font-size: 11px;
  color: var(--text-muted);
}

.op-object-orbit-selection {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-faint);
}

.op-object-orbit-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.op-object-orbit-action-btn {
  flex: 1;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-primary);
  font-size: 11px;
  cursor: pointer;
}

.op-object-orbit-action-btn:hover:not(:disabled) {
  border-color: rgba(56, 189, 248, 0.68);
}

.op-object-orbit-action-btn:disabled {
  opacity: .55;
  cursor: default;
}