@import "tailwindcss";
@import "@heroui/styles";
@variant dark (&:where(.dark, .dark *));

@theme {
  --color-border: var(--border);
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: var(--muted);
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent-hsl));
  --color-accent-foreground: hsl(var(--accent-foreground-hsl));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-agent: hsl(var(--agent));
  --color-agent-foreground: hsl(var(--agent-foreground));
  --color-human: hsl(var(--human));
  --color-human-foreground: hsl(var(--human-foreground));
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-reality: hsl(var(--reality));
  --color-reality-foreground: hsl(var(--reality-foreground));
  --color-run: hsl(var(--run));
  --color-run-foreground: hsl(var(--run-foreground));
  --color-neural: hsl(var(--neural-blue));
  --color-synaptic: hsl(var(--synaptic-green));
  --color-electric: hsl(var(--electric-purple));
  --color-role-pm: hsl(var(--role-pm));
  --color-role-dev: hsl(var(--role-dev));
  --color-role-qa: hsl(var(--role-qa));
  --color-role-prod: hsl(var(--role-prod));
  --color-role-design: hsl(var(--role-design));
  --color-role-devops: hsl(var(--role-devops));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Consolas', monospace;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --animate-pulse-slow: pulse-slow 3s ease-in-out infinite;
  --animate-slide-in: slide-in 0.2s ease-out;
  --animate-ripple-out: ripple-out 1.5s cubic-bezier(0, 0.2, 0.8, 1) forwards;
  --animate-neuron-fire: neuron-fire 0.6s ease-out;
  --animate-rumbling-flow: rumbling-flow 1s linear infinite;
  --animate-fade-up: fade-up 0.4s ease-out forwards;
  --animate-status-ping: status-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-orbital-spin: orbital-spin 20s linear infinite;
  --animate-orbit-reverse: orbit-reverse 25s linear infinite;
  --animate-center-breathe: center-breathe 4s ease-in-out infinite;
  --animate-gradient-shift: gradient-shift 3s ease infinite;
  --animate-shimmer: shimmer 2s linear infinite;
  --animate-float-in: float-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-ring-expand: ring-expand 1.2s cubic-bezier(0, 0, 0.2, 1) forwards;
  --animate-cascade-node-appear: cascade-node-appear 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-cascade-line-draw: cascade-line-draw 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  --animate-cascade-pulse-ring: cascade-pulse-ring 3s ease-in-out infinite;
  --animate-node-shake: node-shake 0.4s ease-out;
  --animate-ripple-wave-bg: ripple-wave-bg 8s ease infinite;
  --animate-minimap-viewport-pulse: minimap-viewport-pulse 2s ease-in-out infinite;
  --animate-ripple-pulse: ripple-pulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-origin-breathe: origin-breathe 3s ease-in-out infinite;
  --animate-wave-ripple: wave-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) forwards;
  --animate-thinking-bounce: thinking-bounce 0.9s ease-in-out infinite;
  --animate-bot-glow: bot-glow 2s ease-in-out infinite;
}

/* ── Keyframes ── */
@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes slide-in { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes ripple-out { 0% { transform: scale(0.3); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } }
@keyframes neuron-fire { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rumbling-flow { 0% { stroke-dashoffset: 20; } 100% { stroke-dashoffset: 0; } }
@keyframes fade-up { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes status-ping { 0% { transform: scale(1); opacity: 1; } 75% { transform: scale(1.8); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@keyframes orbital-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes orbit-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }
@keyframes center-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes particle-flow { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes float-in { 0% { transform: translateY(12px) scale(0.96); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes ring-expand { 0% { transform: scale(0.8); opacity: 0.6; stroke-width: 2px; } 100% { transform: scale(2.2); opacity: 0; stroke-width: 0.5px; } }
@keyframes cascade-node-appear { 0% { transform: scale(0) translateY(8px); opacity: 0; } 60% { transform: scale(1.05) translateY(-2px); opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes cascade-line-draw { 0% { stroke-dashoffset: var(--line-length, 200); } 100% { stroke-dashoffset: 0; } }
@keyframes cascade-pulse-ring { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.15); opacity: 0.8; } }
@keyframes thinking-dots { 0%, 20% { content: '·'; } 40% { content: '··'; } 60%, 100% { content: '···'; } }
@keyframes node-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes wh-pop-in { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
@keyframes wh-pop-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes wh-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes wh-badge-pop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes ripple-wave-bg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes minimap-viewport-pulse { 0%, 100% { border-color: hsl(var(--primary) / 0.4); } 50% { border-color: hsl(var(--primary) / 0.7); } }
@keyframes ripple-pulse { 0% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.2); opacity: 0.1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes origin-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 20px hsl(var(--primary) / 0.2); } 50% { transform: scale(1.04); box-shadow: 0 0 40px hsl(var(--primary) / 0.35), 0 0 80px hsl(var(--arch) / 0.14); } }
@keyframes wave-ripple { 0% { transform: scale(0.8); opacity: 0.6; border-width: 2px; } 100% { transform: scale(2.5); opacity: 0; border-width: 0.5px; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes thinking-bounce { 0%, 40% { transform: translateY(0); opacity: 0.3; } 20% { transform: translateY(-6px); opacity: 1; } }
@keyframes bot-glow { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--agent) / 0.08); border-color: hsl(var(--agent) / 0.15); } 50% { box-shadow: 0 0 6px 2px hsl(var(--agent) / 0.12); border-color: hsl(var(--agent) / 0.35); } }

/* ── CSS Variables ── */
:root {
  /* Raw HSL aliases (for opacity patterns: hsl(var(--x-hsl) / alpha)) */
  --background-hsl: 40 28% 97%;
  --foreground-hsl: 160 14% 12%;
  --border-hsl: 38 16% 88%;
  --accent-hsl: 38 20% 92%;
  --accent-foreground-hsl: 160 14% 12%;
  --success-hsl: 146 52% 38%;
  --warning-hsl: 38 88% 52%;
  --muted-hsl: 38 14% 90%;

  /* Full colors (HeroUI components use var(--x) directly) */
  --background: hsl(40 28% 97%);
  --foreground: hsl(160 14% 12%);
  --border: hsl(38 16% 88%);
  --accent: hsl(158 44% 32%);
  --accent-foreground: hsl(0 0% 100%);
  --muted: hsl(38 8% 42%);
  --success: hsl(146 52% 38%);
  --success-foreground: hsl(0 0% 100%);
  --warning: hsl(38 88% 52%);
  --warning-foreground: hsl(0 0% 0%);

  /* HeroUI-specific tokens */
  --surface: hsl(42 32% 99%);
  --surface-foreground: hsl(160 14% 12%);
  --surface-secondary: hsl(40 20% 94%);
  --overlay: hsl(42 32% 99%);
  --overlay-foreground: hsl(160 14% 12%);
  --default: hsl(40 20% 94%);
  --default-foreground: hsl(160 14% 12%);
  --danger: hsl(0 84% 60%);
  --danger-foreground: hsl(0 0% 100%);
  --focus: hsl(158 44% 32%);
  --field-background: hsl(42 32% 99%);
  --field-foreground: hsl(160 14% 12%);
  --field-placeholder: hsl(38 8% 52%);
  --field-border: hsl(38 16% 88%);
  --separator: hsl(38 16% 88%);
  --segment: hsl(42 32% 99%);
  --segment-foreground: hsl(160 14% 12%);
  --scrollbar: hsl(38 16% 88%);

  /* Project tokens (not used by HeroUI directly) */
  --card: 42 32% 99%;
  --card-foreground: 160 14% 12%;
  --popover: 42 32% 99%;
  --popover-foreground: 160 14% 12%;
  --primary: 158 44% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 40 20% 94%;
  --secondary-foreground: 160 14% 12%;
  --muted-foreground: 38 8% 44%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --input: 38 16% 88%;
  --ring: 158 44% 32%;
  --radius: 0.5rem;
  --agent: 162 68% 35%;
  --agent-foreground: 0 0% 100%;
  --human: 24 86% 52%;
  --human-foreground: 0 0% 0%;
  --wiki: 24 68% 48%;
  --wiki-foreground: 0 0% 100%;
  --arch: 14 42% 40%;
  --arch-foreground: 0 0% 100%;
  --req: 42 84% 48%;
  --req-foreground: 0 0% 0%;
  --neural-blue: 172 58% 38%;
  --synaptic-green: 146 52% 38%;
  --electric-purple: 28 72% 52%;
  --reality: 190 62% 42%;
  --reality-foreground: 0 0% 100%;
  --run: 206 72% 46%;
  --run-foreground: 0 0% 100%;
  --role-pm: 34 78% 50%;
  --role-dev: 170 54% 36%;
  --role-qa: 146 44% 34%;
  --role-prod: 18 52% 40%;
  --role-design: 12 66% 52%;
  --role-devops: 28 72% 46%;
  --import-card-hover: 158 44% 32% / 0.08;
  --import-card-selected: 158 44% 32% / 0.14;
  --import-step-done: 158 44% 32%;
  --import-step-active: 158 44% 32%;
  --import-step-pending: 0 0% 60%;
  --wiki-surface: 40 26% 96%;
  --wiki-surface-strong: 38 22% 93%;
  --wiki-panel: 42 30% 98%;
  --wiki-panel-foreground: 160 14% 12%;
  --wiki-panel-muted: 38 18% 91%;
  --wiki-accent: 158 34% 89%;
  --wiki-accent-foreground: 160 18% 18%;
  --wiki-warm: 36 50% 90%;
  --wiki-shadow: 36 24% 26%;
  --verdict-bug: 0 70% 52%;
  --verdict-risk: 38 80% 52%;
  --verdict-new-req: 258 70% 58%;
  --verdict-scope: 24 80% 52%;
  --verdict-debt: 215 15% 55%;
  --verdict-knowledge: 214 80% 58%;
  --verdict-team: 170 60% 42%;
  --verdict-forecast: 190 70% 50%;
  --verdict-decision: 270 60% 58%;
  --verdict-adjust: 200 70% 52%;
}

.dark {
  /* Raw HSL aliases */
  --background-hsl: 160 14% 8%;
  --foreground-hsl: 150 16% 92%;
  --border-hsl: 155 10% 22%;
  --accent-hsl: 155 12% 20%;
  --accent-foreground-hsl: 150 16% 92%;
  --success-hsl: 146 52% 46%;
  --warning-hsl: 38 88% 56%;
  --muted-hsl: 155 8% 18%;

  /* Full colors */
  --background: hsl(160 14% 8%);
  --foreground: hsl(150 16% 92%);
  --border: hsl(155 10% 22%);
  --accent: hsl(158 46% 54%);
  --accent-foreground: hsl(0 0% 100%);
  --muted: hsl(155 8% 58%);
  --success: hsl(146 52% 46%);
  --success-foreground: hsl(0 0% 100%);
  --warning: hsl(38 88% 56%);
  --warning-foreground: hsl(0 0% 0%);

  /* HeroUI-specific tokens */
  --surface: hsl(160 12% 11%);
  --surface-foreground: hsl(150 16% 92%);
  --surface-secondary: hsl(158 10% 17%);
  --overlay: hsl(160 12% 11%);
  --overlay-foreground: hsl(150 16% 92%);
  --default: hsl(158 10% 17%);
  --default-foreground: hsl(150 16% 92%);
  --danger: hsl(0 70% 42%);
  --danger-foreground: hsl(0 0% 98%);
  --focus: hsl(158 46% 54%);
  --field-background: hsl(160 12% 11%);
  --field-foreground: hsl(150 16% 92%);
  --field-placeholder: hsl(155 8% 58%);
  --field-border: hsl(155 10% 22%);
  --separator: hsl(155 10% 19%);
  --segment: hsl(158 10% 17%);
  --segment-foreground: hsl(150 16% 92%);
  --scrollbar: hsl(155 10% 22%);

  /* Project tokens */
  --card: 160 12% 11%;
  --card-foreground: 150 16% 92%;
  --popover: 160 12% 11%;
  --popover-foreground: 150 16% 92%;
  --primary: 158 46% 54%;
  --primary-foreground: 0 0% 100%;
  --secondary: 158 10% 17%;
  --secondary-foreground: 150 16% 92%;
  --muted-foreground: 155 8% 58%;
  --destructive: 0 70% 42%;
  --destructive-foreground: 0 0% 98%;
  --input: 155 10% 22%;
  --ring: 158 46% 54%;
  --agent: 162 64% 44%;
  --human: 24 82% 56%;
  --wiki: 24 72% 58%;
  --arch: 14 52% 54%;
  --req: 42 88% 54%;
  --reality: 190 72% 58%;
  --run: 206 82% 62%;
  --neural-blue: 172 62% 52%;
  --synaptic-green: 146 52% 46%;
  --electric-purple: 28 76% 58%;
  --role-pm: 34 80% 58%;
  --role-dev: 170 56% 54%;
  --role-qa: 146 46% 48%;
  --role-prod: 18 54% 56%;
  --role-design: 12 68% 58%;
  --role-devops: 28 74% 56%;
  --import-card-hover: 158 46% 54% / 0.10;
  --import-card-selected: 158 46% 54% / 0.18;
  --import-step-done: 158 46% 54%;
  --import-step-active: 158 46% 54%;
  --import-step-pending: 0 0% 48%;
  --wiki-surface: 158 14% 10%;
  --wiki-surface-strong: 158 12% 13%;
  --wiki-panel: 158 12% 12%;
  --wiki-panel-foreground: 150 16% 92%;
  --wiki-panel-muted: 155 10% 18%;
  --wiki-accent: 156 24% 22%;
  --wiki-accent-foreground: 150 16% 92%;
  --wiki-warm: 155 14% 18%;
  --wiki-shadow: 0 0% 0%;
}

/* ── Base Styles ── */
@layer base {
  * { @apply border-border; }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
}

/* ── Utilities ── */
@layer utilities {
  .font-mono { font-family: 'JetBrains Mono', 'SF Mono', monospace; }

  .canvas-dot-bg {
    background-color: var(--background);
    background-image: radial-gradient(circle, hsl(var(--border-hsl) / 0.15) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  .node-card-shadow { box-shadow: 0 1px 3px hsl(0 0% 0% / 0.2), 0 0 0 1px hsl(var(--border-hsl) / 0.5); }
  .node-card-shadow-selected { box-shadow: 0 1px 3px hsl(0 0% 0% / 0.3), 0 0 0 1px hsl(var(--border-hsl) / 0.8); }

  .canvas-grid-light {
    background-color: var(--background);
    background-image:
      linear-gradient(hsl(var(--border-hsl) / 0.35) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border-hsl) / 0.35) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
  }

  .dark .canvas-grid-light {
    background-image:
      linear-gradient(hsl(var(--border-hsl) / 0.45) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border-hsl) / 0.45) 1px, transparent 1px);
  }

  .liquid-glass {
    background: hsl(var(--card) / 0.55);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    box-shadow:
      0 8px 32px hsl(0 0% 0% / 0.12),
      inset 0 1px 0 hsl(0 0% 100% / 0.22);
  }

  .toolbar-shell { position: relative; }

  .toolbar-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
      radial-gradient(120% 80% at 50% -20%, hsl(0 0% 100% / 0.2), transparent 60%),
      linear-gradient(140deg, hsl(0 0% 100% / 0.08), transparent 55%);
  }

  .workbench-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
  }

  .electron .workbench-shell {
    padding-top: 52px;
    background: var(--background);
  }

  .electron .workbench-shell::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    z-index: 9990;
    -webkit-app-region: drag;
    pointer-events: none;
  }

  .electron .traffic-light-pill {
    position: fixed;
    top: 10px;
    left: 6px;
    width: 68px;
    height: 36px;
    border-radius: 999px;
    z-index: 9998;
    -webkit-app-region: no-drag;
    pointer-events: none;
    border: 1px solid hsl(0deg 0% 100% / 10%);
    background: hsl(0deg 0% 100% / 5%);
    -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.06);
    backdrop-filter: blur(28px) saturate(2) brightness(1);
    box-shadow:
      0 1px 0 hsl(0 0% 100% / 0.7) inset,
      0 -1px 0 hsl(0 0% 0% / 0.06) inset,
      0 4px 24px hsl(0 0% 0% / 0.10),
      0 1px 4px hsl(0 0% 0% / 0.06),
      0 0 0 0.5px hsl(0 0% 0% / 0.06);
  }

  .dark .traffic-light-pill {
    border-color: hsl(0 0% 100% / 0.12);
    background: hsl(var(--card) / 0.52);
    backdrop-filter: blur(28px) saturate(1.6) brightness(1.02);
    -webkit-backdrop-filter: blur(28px) saturate(1.6) brightness(1.02);
    box-shadow:
      0 1px 0 hsl(0 0% 100% / 0.10) inset,
      0 -1px 0 hsl(0 0% 0% / 0.25) inset,
      0 4px 32px hsl(0 0% 0% / 0.40),
      0 1px 6px hsl(0 0% 0% / 0.20),
      0 0 0 0.5px hsl(0 0% 0% / 0.30);
  }

  .electron .workbench-header {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9998;
    -webkit-app-region: no-drag;
  }

  .activity-bar {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    gap: 4px;
    flex-shrink: 0;
    background: hsl(var(--card) / 0.88);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    border-radius: 999px;
    box-shadow: 0 2px 12px hsl(0 0% 0% / 0.08), 0 4px 24px hsl(0 0% 0% / 0.06);
  }
  .dark .activity-bar {
    box-shadow: 0 2px 12px hsl(0 0% 0% / 0.28), 0 4px 24px hsl(0 0% 0% / 0.2);
  }

  .ab-item {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    color: hsl(var(--muted-foreground));
    border: none;
    background: transparent;
  }

  .ab-item:hover {
    background: hsl(var(--secondary));
    color: var(--foreground);
  }

  .ab-item-active {
    background: hsl(var(--primary) / 0.14);
    color: hsl(var(--primary));
  }

  .ab-item-active::before { display: none; }

  .ab-item-disabled { opacity: 0.3; cursor: not-allowed; }
  .ab-item-disabled:hover { background: transparent; color: hsl(var(--muted-foreground)); }

  .workbench-main { flex: 1; min-width: 0; display: flex; order: 2; }

  .workbench-island {
    flex: 1;
    background: var(--background);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .island-header {
    padding: 10px 18px;
    border-bottom: 1px solid hsl(var(--border-hsl) / 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
  }

  .island-header-name { font-weight: 600; }
  .island-header-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }

  .island-header-branch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 10px;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--secondary));
    padding: 2px 7px;
    border-radius: 6px;
  }

  .island-header-meta { margin-left: auto; font-size: 11px; color: hsl(var(--muted-foreground)); }
  .island-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

  /* ── Workbench Header ── */
  .workbench-header {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .wh-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    height: 36px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.06);
    border: 1px solid hsl(0deg 0% 100% / 10%);
    background: hsl(0deg 0% 100% / 5%);
    backdrop-filter: blur(28px) saturate(2) brightness(1);
    box-shadow:
      0 1px 0 hsl(0 0% 100% / 0.7) inset,
      0 -1px 0 hsl(0 0% 0% / 0.06) inset,
      0 4px 24px hsl(0 0% 0% / 0.10),
      0 1px 4px hsl(0 0% 0% / 0.06),
      0 0 0 0.5px hsl(0 0% 0% / 0.06);
  }
  .dark .wh-pill {
    border-color: hsl(0 0% 100% / 0.14);
    background:
      linear-gradient(180deg, hsl(0 0% 100% / 0.07), hsl(0 0% 100% / 0.015) 42%, transparent),
      hsl(var(--card) / 0.55);
    backdrop-filter: blur(32px) saturate(1.9) brightness(1.08);
    -webkit-backdrop-filter: blur(32px) saturate(1.9) brightness(1.08);
    box-shadow:
      0 1px 0 hsl(0 0% 100% / 0.18) inset,
      0 0 0 0.5px hsl(0 0% 100% / 0.04) inset,
      0 -1px 0 hsl(0 0% 0% / 0.30) inset,
      0 8px 32px hsl(0 0% 0% / 0.45),
      0 2px 8px hsl(0 0% 0% / 0.25),
      0 0 0 0.5px hsl(0 0% 0% / 0.35);
  }

  /* Wiki toolbar cell-division animation — grid slot for layout-space animation */
  .wh-pill-slot {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .wh-pill-slot.open {
    grid-template-columns: 1fr;
  }
  .wh-pill-slot.closing {
    grid-template-columns: 0fr;
    transition: grid-template-columns 0.35s cubic-bezier(0.55, 0, 0.75, 0.2);
  }
  .wh-pill-slot > .wh-pill {
    min-width: 0;
    overflow: hidden;
  }
  .wh-pill:has([data-searching]) {
    overflow: visible !important;
  }

  /* Visual enter animation on the pill content */
  .wh-pill-enter {
    animation: pill-fade-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  .wh-pill-enter > .flex > * {
    animation: pill-child-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .wh-pill-enter > .flex > *:nth-child(1) { animation-delay: 0.08s; }
  .wh-pill-enter > .flex > *:nth-child(2) { animation-delay: 0.14s; }
  .wh-pill-enter > .flex > *:nth-child(3) { animation-delay: 0.20s; }
  .wh-pill-enter > .flex > *:nth-child(4) { animation-delay: 0.26s; }

  /* Visual exit animation */
  .wh-pill-exit {
    animation: pill-fade-out 0.28s cubic-bezier(0.55, 0, 0.75, 0.2) forwards;
  }
  .wh-pill-exit > .flex > * {
    animation: pill-child-out 0.2s cubic-bezier(0.55, 0, 0.75, 0.2) both;
  }
  .wh-pill-exit > .flex > *:nth-child(4) { animation-delay: 0s; }
  .wh-pill-exit > .flex > *:nth-child(3) { animation-delay: 0.04s; }
  .wh-pill-exit > .flex > *:nth-child(2) { animation-delay: 0.08s; }
  .wh-pill-exit > .flex > *:nth-child(1) { animation-delay: 0.12s; }

  @keyframes pill-fade-in {
    0% { opacity: 0; filter: blur(4px); }
    60% { opacity: 1; filter: blur(0px); }
    100% { opacity: 1; filter: blur(0px); }
  }

  @keyframes pill-fade-out {
    0% { opacity: 1; filter: blur(0px); }
    100% { opacity: 0; filter: blur(4px); }
  }

  @keyframes pill-child-in {
    0% { opacity: 0; transform: scale(0.5) translateX(-8px); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
  }

  @keyframes pill-child-out {
    0% { opacity: 1; transform: scale(1) translateX(0); }
    100% { opacity: 0; transform: scale(0.5) translateX(-8px); }
  }


  .wh-project-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: background 120ms;
    height: 26px;
    font-size: 12px;
  }
  .wh-project-trigger:hover { background: hsl(var(--secondary)); }

  .wh-btn {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, color 120ms;
    flex-shrink: 0;
  }
  .wh-btn:hover { background: hsl(var(--secondary)); color: var(--foreground); }
  .wh-btn.active { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }

  .wh-issue-btn-wrapper {
    display: flex;
    align-items: center;
  }
  .wh-issue-btn-wrapper.enter {
    animation: wh-pop-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .wh-issue-btn-wrapper.exit {
    animation: wh-pop-out 200ms ease-in both;
  }
  .wh-bounce {
    animation: wh-bounce 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .wh-badge-pop {
    animation: wh-badge-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .wh-divider {
    width: 1px;
    height: 14px;
    background: hsl(var(--border-hsl) / 0.6);
    flex-shrink: 0;
    margin: 0 4px;
  }

  .wh-actions { display: flex; align-items: center; gap: 2px; }

  /* HeroUI Tabs 在 header 内的样式覆盖 */
  .wh-tabs { display: flex; align-items: center; }
  .wh-tabs .tabs__list-container { background: transparent !important; border: none !important; padding: 0 !important; }
  .wh-tabs .tabs__list { background: transparent !important; border: none !important; gap: 0 !important; padding: 0 !important; }
  .wh-tabs .tabs__tab {
    font-size: 12px !important;
    height: 26px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    color: hsl(var(--muted-foreground)) !important;
    display: flex;
    align-items: center;
  }
  .wh-tabs .tabs__tab[aria-selected="true"] { color: hsl(var(--primary)) !important; }
  .wh-tabs .tabs__indicator { border-radius: 999px !important; background: hsl(var(--primary) / 0.1) !important; }
  .wh-tabs .tabs__separator { display: none !important; }

  /* ── Wiki view mode tabs (文档/规划) ── */
  .wiki-view-tabs { display: flex; align-items: center; }
  .wiki-view-tabs .tabs__list-container { background: transparent !important; border: none !important; padding: 0 !important; }
  .wiki-view-tabs .tabs__list { background: transparent !important; border: none !important; gap: 0 !important; padding: 0 !important; }
  .wiki-view-tabs .tabs__tab {
    font-size: 12px !important;
    height: 26px !important;
    padding: 0 10px !important;
    gap: 5px !important;
    border-radius: 999px !important;
    color: hsl(var(--muted-foreground)) !important;
    display: flex;
    align-items: center;
  }
  .wiki-view-tabs .tabs__tab[aria-selected="true"] { color: hsl(var(--primary)) !important; }
  .wiki-view-tabs .tabs__indicator { border-radius: 999px !important; background: hsl(var(--primary) / 0.1) !important; }
  .wiki-view-tabs .tabs__separator { display: none !important; }

  /* ── Wiki Workspace panels ── */
  .wiki-panel {
    background: hsl(var(--card) / 0.6);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }
  .dark .wiki-panel {
    background: hsl(var(--card) / 0.5);
  }

  .wiki-panel-header {
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 4px;
  }

  .wiki-separator {
    width: 1px;
    background: hsl(var(--border-hsl) / 0.4);
    align-self: stretch;
    margin: 8px 0;
  }

  .wiki-tabs { display: flex; align-items: center; width: 100%; }
  .wiki-tabs .tabs__list-container { background: transparent !important; border: none !important; padding: 0 !important; width: 100%; }
  .wiki-tabs .tabs__list { background: transparent !important; border: none !important; gap: 0 !important; padding: 0 2px !important; width: 100%; justify-content: space-evenly; }
  .wiki-tabs .tabs__tab {
    font-size: 11px !important;
    height: 28px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    border-radius: 999px !important;
    color: hsl(var(--muted-foreground) / 0.6) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    transition: color 120ms;
  }
  .wiki-tabs .tabs__tab[aria-selected="true"] { color: var(--foreground) !important; }
  .wiki-tabs .tabs__indicator { border-radius: 999px !important; background: hsl(var(--secondary)) !important; }
  .wiki-tabs .tabs__separator { display: none !important; }

  .wiki-issue-popover {
    position: fixed;
    width: 320px;
    max-height: 400px;
    border-radius: 16px;
    background: hsl(var(--card) / 0.82);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid hsl(var(--border-hsl) / 0.3);
    box-shadow:
      0 8px 32px hsl(0 0% 0% / 0.15),
      inset 0 1px 0 hsl(0 0% 100% / 0.1);
    animation: float-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .dark .wiki-issue-popover {
    background: hsl(var(--card) / 0.75);
    box-shadow:
      0 8px 32px hsl(0 0% 0% / 0.4),
      inset 0 1px 0 hsl(0 0% 100% / 0.06);
  }

  .dark .liquid-glass {
    background: hsl(var(--card) / 0.45);
    box-shadow: 0 8px 32px hsl(0 0% 0% / 0.35), inset 0 1px 0 hsl(0 0% 100% / 0.08);
  }

  .wiki-page-bg {
    background: radial-gradient(circle at top left, hsl(var(--wiki-warm) / 0.55), transparent 34%), radial-gradient(circle at top right, hsl(var(--wiki-accent) / 0.52), transparent 28%), linear-gradient(180deg, hsl(var(--wiki-surface)) 0%, var(--background) 45%, var(--background) 100%);
  }
  .dark .wiki-page-bg {
    background: radial-gradient(circle at top left, hsl(var(--wiki-warm) / 0.34), transparent 34%), radial-gradient(circle at top right, hsl(var(--wiki-accent) / 0.42), transparent 28%), linear-gradient(180deg, hsl(var(--wiki-surface)) 0%, var(--background) 42%, var(--background) 100%);
  }

  .wiki-workbench-card {
    border: 1px solid hsl(var(--border-hsl) / 0.72);
    background: linear-gradient(180deg, hsl(var(--wiki-panel) / 0.94) 0%, hsl(var(--card) / 0.86) 100%);
    box-shadow: 0 18px 42px hsl(var(--wiki-shadow) / 0.08), 0 1px 0 hsl(0 0% 100% / 0.22) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .dark .wiki-workbench-card {
    background: linear-gradient(180deg, hsl(var(--wiki-panel) / 0.96) 0%, hsl(var(--card) / 0.88) 100%);
    box-shadow: 0 20px 48px hsl(0 0% 0% / 0.28), 0 1px 0 hsl(0 0% 100% / 0.04) inset;
  }

  .wiki-reading-surface {
    border: 1px solid hsl(var(--border-hsl) / 0.72);
    background: linear-gradient(180deg, hsl(var(--wiki-panel) / 0.98) 0%, hsl(var(--background-hsl) / 0.96) 100%);
    box-shadow: 0 24px 60px hsl(var(--wiki-shadow) / 0.08), 0 1px 0 hsl(0 0% 100% / 0.22) inset;
  }
  .dark .wiki-reading-surface {
    background: linear-gradient(180deg, hsl(var(--wiki-panel) / 0.98) 0%, hsl(var(--background-hsl) / 0.94) 100%);
    box-shadow: 0 24px 60px hsl(0 0% 0% / 0.34), 0 1px 0 hsl(0 0% 100% / 0.04) inset;
  }

  .wiki-reading-copy { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; }
  .wiki-kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
  .wiki-soft-rule { border-color: hsl(var(--border-hsl) / 0.55); }
  .wiki-fade-in { animation: float-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* ── Search keyword highlight inside wiki blocks ──────────────────────── */
  mark.wiki-search-highlight {
    @apply bg-warning/40 text-foreground rounded-sm px-0.5;
    animation: wiki-highlight-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes wiki-highlight-pop {
    0% { background-color: hsl(var(--warning) / 0.7); transform: scale(1.05); }
    100% { background-color: hsl(var(--warning) / 0.4); transform: scale(1); }
  }
  @keyframes float-in {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .toolbar-block { @apply rounded-xl border border-transparent bg-transparent p-0; }
  .toolbar-quick-btn { @apply inline-flex items-center gap-1.5 rounded-lg border border-border/50 bg-background/60 px-2.5 py-1 text-xs text-foreground transition hover:bg-background/90 disabled:opacity-50; }
  .toolbar-check-chip { @apply inline-flex h-8 items-center gap-2 rounded-lg border border-border/50 bg-background/60 px-2.5 text-xs text-foreground transition hover:bg-background/90; }
  .context-menu-btn { @apply block w-full rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent hover:text-accent-foreground; }

  .react-flow__pane { background: transparent; }
  .react-flow__controls {
    @apply border border-border/60 bg-card/80 shadow;
    backdrop-filter: blur(6px);
    background: hsl(var(--card) / 0.82) !important;
    border-color: hsl(var(--border-hsl) / 0.6) !important;
    color: var(--foreground) !important;
  }
  .react-flow__controls-button {
    @apply border-border/50 bg-card text-foreground hover:bg-secondary;
    background: transparent !important;
    border-color: hsl(var(--border-hsl) / 0.5) !important;
    color: var(--foreground) !important;
  }
  .react-flow__controls-button:hover { background: hsl(var(--secondary) / 0.9) !important; }
  .react-flow__controls-button:active { background: hsl(var(--secondary)) !important; }
  .react-flow__controls-button svg { stroke: currentColor !important; color: var(--foreground) !important; }
  .react-flow__controls-button svg * { stroke: currentColor !important; }
  .react-flow__controls-button path { stroke: currentColor !important; fill: none !important; }
  .react-flow.light .react-flow__controls,
  .react-flow.dark .react-flow__controls,
  .react-flow.light .react-flow__controls-button,
  .react-flow.dark .react-flow__controls-button { color: var(--foreground) !important; }
  .react-flow__minimap {
    background: hsl(var(--card) / 0.82) !important;
    border-color: hsl(var(--border-hsl) / 0.6) !important;
    @apply border border-border/60 bg-card/70 shadow;
  }
  .react-flow__edge-path { transition: stroke 120ms ease, stroke-width 120ms ease, opacity 120ms ease; }

  .coord-node-card { transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease; }
  .coord-node-card:hover { box-shadow: 0 4px 16px hsl(0 0% 0% / 0.16); transform: translateY(-1px); }
  .coord-node-card:hover .coord-handle { opacity: 1; }
  .coord-handle { opacity: 0.6; transition: opacity 120ms ease, transform 120ms ease; }
  .coord-handle:hover { opacity: 1; transform: scale(1.08); }

  .import-source-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: hsl(var(--card));
    cursor: pointer;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .import-source-card:hover {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--import-card-hover));
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.08);
  }
  .import-source-card[data-selected="true"] {
    border-color: hsl(var(--primary) / 0.6);
    background: hsl(var(--import-card-selected));
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2), 0 4px 16px hsl(var(--primary) / 0.08);
  }
  .import-source-card[data-selected="true"]::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.5), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .new-project-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 100px;
    border-radius: 0.75rem;
    border: 1.5px dashed var(--border);
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .new-project-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    background: hsl(var(--primary) / 0.04);
    color: hsl(var(--primary));
    box-shadow: 0 0 24px hsl(var(--primary) / 0.06);
  }

  .import-step-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
  }
  .import-step-dot[data-state="done"] { background: hsl(var(--import-step-done)); color: hsl(var(--primary-foreground)); }
  .import-step-dot[data-state="active"] { background: hsl(var(--import-step-active)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 0 3px hsl(var(--import-step-active) / 0.2); }
  .import-step-dot[data-state="pending"] { background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); }

  .import-step-line { width: 2px; flex: 1; min-height: 1.5rem; transition: background 0.3s ease; }
  .import-step-line[data-state="done"] { background: hsl(var(--import-step-done)); }
  .import-step-line[data-state="pending"] { background: var(--border); }

  .import-input {
    height: 2.5rem;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .import-input:focus { outline: none; border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.12); }
  .import-input::placeholder { color: hsl(var(--muted-foreground) / 0.6); }

  .import-select {
    height: 2.5rem;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
  }
  .import-select:focus { outline: none; border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.12); }

  .project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    background: hsl(var(--card));
    cursor: pointer;
    transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .project-card:hover {
    border-color: hsl(var(--primary) / 0.3);
    background: hsl(var(--card) / 0.8);
    box-shadow: 0 4px 24px hsl(var(--primary) / 0.06), 0 1px 4px hsl(0 0% 0% / 0.06);
    transform: translateY(-1px);
  }

  .project-status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .project-status-dot[data-status="healthy"] { background: var(--success); box-shadow: 0 0 6px hsl(var(--success-hsl) / 0.4); }
  .project-status-dot[data-status="at_risk"] { background: var(--warning); box-shadow: 0 0 6px hsl(var(--warning-hsl) / 0.4); animation: status-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .project-status-dot[data-status="blocked"] { background: hsl(var(--destructive)); box-shadow: 0 0 6px hsl(var(--destructive) / 0.4); }

  .health-bar { height: 3px; border-radius: 999px; background: hsl(var(--secondary)); overflow: hidden; }
  .health-bar-fill { height: 100%; border-radius: 999px; transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .health-bar-fill[data-level="high"] { background: var(--success); }
  .health-bar-fill[data-level="medium"] { background: var(--warning); }
  .health-bar-fill[data-level="low"] { background: hsl(var(--destructive)); }

  .env-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    border: 1px solid;
    padding: 0.125rem 0.5rem;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1.4;
  }

  .import-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
  }
  .import-state-badge[data-state="syncing"] { background: hsl(var(--warning-hsl) / 0.12); color: var(--warning); border: 1px solid hsl(var(--warning-hsl) / 0.3); }
  .import-state-badge[data-state="ready"] { background: hsl(var(--success-hsl) / 0.12); color: var(--success); border: 1px solid hsl(var(--success-hsl) / 0.3); }
  .import-state-badge[data-state="failed"] { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / 0.3); }
  .import-state-badge[data-state="idle"] { background: hsl(var(--muted-hsl)); color: hsl(var(--muted-foreground)); border: 1px solid var(--border); }

  .search-input-wrapper { position: relative; display: flex; align-items: center; }
  .search-input {
    height: 2.25rem;
    width: 100%;
    max-width: 18rem;
    border-radius: 0.625rem;
    border: 1px solid hsl(var(--border-hsl) / 0.7);
    background: hsl(var(--card));
    padding: 0 0.75rem 0 2.25rem;
    font-size: 0.8125rem;
    color: var(--foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
  }
  .search-input:focus { outline: none; border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1); max-width: 22rem; }
  .search-input::placeholder { color: hsl(var(--muted-foreground) / 0.6); }

  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    background: hsl(var(--card));
    padding: 0 0.625rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
  }
  .filter-chip:hover { border-color: hsl(var(--primary) / 0.3); color: var(--foreground); background: hsl(var(--accent-hsl) / 0.5); }
  .filter-chip[data-active="true"] { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
  .filter-chip[data-active="true"]:hover { background: hsl(var(--primary) / 0.15); }

  .sort-select {
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    background: hsl(var(--card));
    padding: 0 1.75rem 0 0.625rem;
    font-size: 0.75rem;
    color: var(--foreground);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 0.75rem;
    transition: border-color 0.2s ease;
  }
  .sort-select:focus { outline: none; border-color: hsl(var(--primary) / 0.5); }

  .dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(0 0% 0% / 0.4);
    backdrop-filter: blur(4px);
    animation: fade-in 0.15s ease-out;
  }

  .dialog-content {
    position: relative;
    width: 100%;
    max-width: 26rem;
    margin: 1rem;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    background: hsl(var(--card));
    padding: 1.5rem;
    box-shadow: 0 20px 60px hsl(0 0% 0% / 0.2), 0 0 0 1px hsl(var(--border-hsl) / 0.3);
    animation: float-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .dialog-content h3 { font-size: 1rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.5rem; }
  .dialog-content p { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
  .dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }

  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; }
  .empty-state-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background: hsl(var(--secondary)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: hsl(var(--muted-foreground)); }

  .toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    background: hsl(var(--card));
    box-shadow: 0 12px 40px hsl(0 0% 0% / 0.15);
    animation: float-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    max-width: 24rem;
  }
  .toast[data-type="success"] { border-color: hsl(var(--success-hsl) / 0.3); background: hsl(var(--success-hsl) / 0.08); }
  .toast[data-type="error"] { border-color: hsl(var(--destructive) / 0.3); background: hsl(var(--destructive) / 0.08); }
  .toast[data-type="warning"] { border-color: hsl(var(--warning-hsl) / 0.3); background: hsl(var(--warning-hsl) / 0.08); }

  .provider-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border-hsl) / 0.6);
    background: hsl(var(--card));
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .provider-card:hover { border-color: hsl(var(--primary) / 0.3); box-shadow: 0 4px 16px hsl(var(--primary) / 0.04); }
  .provider-card[data-selected="true"] { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.06); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.15); }

  .duplicate-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: hsl(var(--warning-hsl) / 0.08);
    border: 1px solid hsl(var(--warning-hsl) / 0.25);
  }
  .duplicate-warning-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: hsl(var(--warning-hsl) / 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning);
  }

  .import-progress-bar { height: 4px; border-radius: 999px; background: hsl(var(--secondary)); overflow: hidden; }
  .import-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--neural-blue))); animation: shimmer 2s linear infinite; background-size: 200% 100%; }
}
/* END_UTILITIES */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

[contenteditable]:focus { outline: none; }
[contenteditable]:empty::before { content: attr(data-placeholder); color: hsl(var(--muted-foreground)); }

.prose-block { @apply leading-relaxed text-sm; }
.prose-block h1 { @apply text-xl font-semibold mb-3 mt-6; }
.prose-block h2 { @apply text-lg font-semibold mb-2 mt-5; }
.prose-block h3 { @apply text-base font-medium mb-1.5 mt-4; }
.prose-block p { @apply mb-2; }
.prose-block ul { @apply ml-4 mb-2 list-disc; }
.prose-block ol { @apply ml-4 mb-2 list-decimal; }
.prose-block li { @apply mb-0.5; }
.prose-block code { @apply font-mono text-xs bg-secondary px-1 py-0.5 rounded; }
.prose-block pre { @apply bg-secondary p-3 rounded-lg mb-3 overflow-x-auto; }
.prose-block pre code { @apply bg-transparent p-0; }
.prose-block blockquote { @apply border-l-2 border-primary/30 pl-4 italic text-muted-foreground mb-2; }
.prose-block a { @apply text-primary underline decoration-primary/30 hover:decoration-primary; }

.feed-prose { @apply text-[11px] leading-relaxed text-foreground/90; }
.feed-prose > :first-child { @apply mt-0; }
.feed-prose > :last-child { @apply mb-0; }
.feed-prose p { @apply my-1.5; }
.feed-prose h1 { @apply text-sm font-semibold mb-1 mt-2; }
.feed-prose h2 { @apply text-xs font-semibold mb-1 mt-2; }
.feed-prose h3 { @apply text-[11px] font-semibold mb-0.5 mt-1.5; }
.feed-prose h4, .feed-prose h5, .feed-prose h6 { @apply text-[11px] font-medium mb-0.5 mt-1.5; }
.feed-prose ul { @apply ml-4 my-1.5 list-disc; }
.feed-prose ol { @apply ml-4 my-1.5 list-decimal; }
.feed-prose li { @apply mb-0.5; }
.feed-prose li > p { @apply my-0; }
.feed-prose code { @apply font-mono text-[10px] bg-secondary/80 px-1 py-0.5 rounded; }
.feed-prose pre { @apply bg-secondary/70 p-2 rounded my-2 overflow-x-auto; }
.feed-prose pre code { @apply bg-transparent p-0 text-[10px] leading-snug; }
.feed-prose blockquote { @apply border-l-2 border-primary/30 pl-2 italic text-muted-foreground my-1.5; }
.feed-prose a { @apply text-primary underline decoration-primary/30 hover:decoration-primary; }
.feed-prose hr { @apply my-2 border-border/40; }
.feed-prose table { @apply w-full border-collapse my-2 text-[10px]; }
.feed-prose th, .feed-prose td { @apply border border-border/60 px-1.5 py-1 text-left; }
.feed-prose th { @apply bg-secondary/60 font-medium; }
.feed-prose img { @apply max-w-full rounded; }

.debug-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.75rem;
  border-bottom: 1px solid hsl(var(--border-hsl) / 0.6);
  background: hsl(var(--card) / 0.85);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  z-index: 30;
  flex-shrink: 0;
}

.debug-panel { border-bottom: 1px solid hsl(var(--border-hsl) / 0.5); z-index: 29; flex-shrink: 0; }

.debug-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 12rem;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border-hsl) / 0.5);
  background: hsl(var(--card) / 0.6);
  font-size: 10px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.debug-pill:hover { background: hsl(var(--secondary) / 0.7); border-color: var(--border); }
.debug-pill-active { background: hsl(var(--primary) / 0.1); border-color: hsl(var(--primary) / 0.4); color: var(--foreground); }

.debug-step-border { border-left: 2px solid hsl(var(--border-hsl) / 0.5); padding-left: 0.75rem; margin-left: 0.25rem; }
.debug-step-border[data-status="running"] { border-color: hsl(var(--run)); }
.debug-step-border[data-status="completed"] { border-color: var(--success); }
.debug-step-border[data-status="failed"] { border-color: hsl(var(--destructive)); }
.debug-step-border[data-status="waiting_permission"] { border-color: var(--warning); }
.debug-step-border[data-status="blocked"] { border-color: var(--warning); }

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
