:root {
  /* Palette */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e5e7eb;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1f2937;
  --neutral-900: #101827;
  --neutral-950: #0b0f19;

  --brand-600: #4f46e5;
  --brand-500: #6366f1;
  --brand-400: #818cf8;
  --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

  /* Status */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-color: #0f172a;     /* slate-900 */
  --muted-text: #475569;     /* slate-600 */

  /* Surface */
  --page-bg: var(--kmx-bg, var(--neutral-50));

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-medium: 0 6px 18px rgba(0,0,0,0.12);
  --shadow-strong: 0 14px 38px rgba(0,0,0,0.18);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms;
  --t-base: 250ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: var(--neutral-950);
    --text-color: var(--neutral-200);
    --muted-text: #94a3b8; /* slate-400 */
  }
}

/* Manual theme override removed */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--font-sans);
  background: var(--page-bg);
  color: var(--text-color);
  font-weight: 500;
}

/* Utility: Alerts */
.app-alert {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  text-align: center;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-200);
}

.app-alert--error {
  color: var(--error);
  background: color-mix(in oklab, var(--error) 10%, transparent);
  border-color: color-mix(in oklab, var(--error) 85%, black 15%);
}

.app-alert--info {
  color: var(--info);
  background: color-mix(in oklab, var(--info) 10%, transparent);
  border-color: color-mix(in oklab, var(--info) 85%, black 15%);
}

.app-alert--success {
  color: var(--success);
  background: color-mix(in oklab, var(--success) 10%, transparent);
  border-color: color-mix(in oklab, var(--success) 85%, black 15%);
}

#app, svg {
  width: 100vw;
  height: 100vh;
  display: block;
}

/* Mobile-specific styles */
@media (max-width: 768px) {
  html, body {
    font-size: 14px;
  }
  
  #app, svg {
    width: 100vw;
    height: 100vh;
    touch-action: manipulation;
  }
  
  /* Ensure navigation buttons are visible on mobile */
  .nav-buttons {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
  }
  
  .nav-controls {
    position: fixed !important;
    top: 8px !important;
    right: 10px !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
  }
  
  .nav-button {
    font-size: 10px !important;
    padding: 4px 8px !important;
    /* margin-left removed to prevent spacing conflicts with unified menu */
  }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
  .node-box {
    min-height: 44px;
    min-width: 44px;
  }
  
  .context-menu {
    min-height: 44px;
  }
  
  .context-menu button {
    min-height: 44px;
    padding: 8px 12px;
  }
}

.node-odd {
  fill: var(--neutral-600);
}
.node-even {
  fill: var(--neutral-200);
}

.node-selected rect {
  stroke: var(--brand-500);
  stroke-width: 3px;
}

/* Dynamic border styles based on node level */
.node-selected.level-0 rect {
  stroke: var(--brand-500);
  stroke-dasharray: none;
  stroke-linecap: round;
}

.node-selected.level-1 rect {
  stroke: var(--brand-500);
  stroke-dasharray: 8,4;
  stroke-linecap: round;
}

.node-selected.level-2 rect {
  stroke: var(--brand-500);
  stroke-dasharray: 6,3;
  stroke-linecap: round;
}

.node-selected.level-3 rect {
  stroke: var(--brand-500);
  stroke-dasharray: 4,2;
  stroke-linecap: round;
}

.node-selected.level-4 rect {
  stroke: var(--brand-500);
  stroke-dasharray: 2,1;
  stroke-linecap: round;
}

/* For levels 5+ use dotted style */
.node-selected.level-5 rect,
.node-selected.level-6 rect,
.node-selected.level-7 rect,
.node-selected.level-8 rect,
.node-selected.level-9 rect {
  stroke: var(--brand-500);
  stroke-dasharray: 1,1;
  stroke-linecap: round;
}

.node-active rect {
  stroke: var(--warning);
  stroke-width: 3px;
}

.node-label {
  pointer-events: none;
  user-select: none;
}

.floating-controls {
  position: absolute;
  z-index: 10;
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 6px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.floating-controls button {
  background: var(--brand-500);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 1em;
  transition: background var(--t-fast) var(--ease);
}
.floating-controls button:hover {
  background: var(--brand-600);
} 

/* DnD preview insertion chip */
#dnd-insert-chip {
  position: fixed;
  z-index: 10000;
  font-size: 12px;
  line-height: 18px;
  padding: 2px 6px;
  color: #fff;
  background: rgba(0,0,0,0.75);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  pointer-events: none;
  transform: translate(-50%, -150%);
}

/* Share info display */
.share-info {
    color: var(--muted-text);
    font-size: 14px;
    margin-right: 10px;
    padding: 5px 10px;
    background-color: var(--neutral-100);
    border-radius: 4px;
    border: 1px solid var(--neutral-200);
}

/* Shared page specific styles */
.shared-page .header {
    background-color: var(--neutral-100);
    border-bottom: 2px solid var(--info);
}

.shared-page .nav-buttons {
    opacity: 0.7;
}

.shared-page .nav-controls {
    opacity: 0.7;
} 

/* Gradient chips for primary nav actions */
.nav-button.personal-area.current-area {
  background: linear-gradient(90deg, var(--kmx-accent-secondary) 0%, #34D399 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--shadow-soft);
}

.nav-button.share-btn {
  background: linear-gradient(90deg, var(--kmx-accent-primary) 0%, var(--kmx-accent-info) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--shadow-soft);
}