/* Solar System Builder — Prototype Styles */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg, #0f1117);
  color: var(--text, #e4e4e7);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top Bar ───────────────────────────────────────── */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--card, #1a1b26);
  border-bottom: 1px solid var(--border, #2d2d3d);
  flex-shrink: 0;
  z-index: 10;
}
.top-bar h1 { font-size: 16px; font-weight: 600; }
.top-bar-actions { display: flex; gap: 8px; align-items: center; }
.top-bar select, .top-bar button {
  padding: 6px 12px;
  border: 1px solid var(--border, #2d2d3d);
  border-radius: 6px;
  background: var(--bg, #0f1117);
  color: var(--text, #e4e4e7);
  font-size: 12px;
  cursor: pointer;
}
.top-bar button:hover { background: var(--accent-bg, rgba(69,69,255,.1)); }
.btn-demo { background: var(--accent, #4545ff) !important; color: #fff !important; border-color: var(--accent, #4545ff) !important; font-weight: 600; }
.btn-demo:hover { opacity: 0.9; }

/* ── Main Layout ───────────────────────────────────── */

.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Catalog Sidebar ───────────────────────────────── */

.catalog {
  width: 240px;
  background: var(--card, #1a1b26);
  border-right: 1px solid var(--border, #2d2d3d);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.catalog-section { padding: 12px 16px; border-bottom: 1px solid var(--border, #2d2d3d); }
.catalog-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3, #71717a);
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.catalog-section-title .chev { font-size: 10px; transition: transform 0.2s; }
.catalog-section.collapsed .chev { transform: rotate(-90deg); }
.catalog-section.collapsed .catalog-items { display: none; }
.catalog-items { display: flex; flex-direction: column; gap: 4px; }
.catalog-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.catalog-item:hover { background: var(--accent-bg, rgba(69,69,255,.08)); }
.catalog-item.locked { opacity: 0.35; cursor: not-allowed; }
.catalog-item.locked:hover { background: transparent; }
.catalog-item.added { opacity: 0.5; text-decoration: line-through; }
.catalog-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.catalog-lock { font-size: 10px; margin-left: auto; color: var(--text3, #71717a); }

/* ── Progress Bar ──────────────────────────────────── */

.progress-section {
  padding: 12px 16px;
  border-top: 1px solid var(--border, #2d2d3d);
  margin-top: auto;
}
.progress-label { font-size: 11px; color: var(--text3, #71717a); margin-bottom: 6px; }
.progress-bar-track {
  height: 6px;
  background: var(--border, #2d2d3d);
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.progress-stats { font-size: 11px; color: var(--text3, #71717a); margin-top: 4px; display: flex; gap: 12px; }
.progress-stats span { display: flex; align-items: center; gap: 4px; }
.stat-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ── Canvas Container ──────────────────────────────── */

.canvas-container {
  flex: 1;
  position: relative;
}
#cy { width: 100%; height: 100%; }

/* ── Narration Card ────────────────────────────────── */

.narration {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card, #1a1b26);
  border: 1px solid var(--accent, #4545ff);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  z-index: 20;
  display: none;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(69,69,255,.2);
}
.narration.visible { display: block; animation: fadeSlideIn 0.3s ease; }
.narration-step { font-size: 10px; color: var(--accent, #4545ff); font-weight: 700; margin-bottom: 4px; }
.narration-controls { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.narration-controls button {
  padding: 4px 14px;
  border: 1px solid var(--border, #2d2d3d);
  border-radius: 5px;
  background: var(--bg, #0f1117);
  color: var(--text, #e4e4e7);
  font-size: 11px;
  cursor: pointer;
}
.narration-controls .btn-next { background: var(--accent, #4545ff); color: #fff; border-color: var(--accent, #4545ff); }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Light Theme ───────────────────────────────────── */

[data-theme="light"] body { background: #f8f9fa; color: #18181b; }
[data-theme="light"] .top-bar,
[data-theme="light"] .catalog,
[data-theme="light"] .narration { background: #fff; }