:root {
  --bg: #0b1220;
  --bg-2: #101b31;
  --panel: rgba(15, 23, 42, 0.88);
  --panel-soft: rgba(30, 41, 59, 0.82);
  --line: rgba(255, 255, 255, 0.11);
  --text: #e8f0ff;
  --muted: #a2b2d0;
  --accent: #4cc9f0;
  --accent-2: #22c55e;
  --accent-3: #f59e0b;
  --danger: #ef4444;
  --cell-size: 92px;
  --gap: 10px;
  --radius: 24px;
  --shadow: 0 18px 40px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(76, 201, 240, 0.14), transparent 22%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.12), transparent 18%),
    linear-gradient(160deg, var(--bg) 0%, #0f172a 50%, var(--bg-2) 100%);
}

.app-shell {
  display: grid;
  grid-template-columns: 320px minmax(700px, 1fr) 330px;
  gap: 18px;
  min-height: 100vh;
  padding: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.sidebar, .center-panel {
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 18px 18px 8px;
}

.panel-header h2, .topbar h1, .notes h3 {
  margin: 0 0 6px;
}

.panel-header p, .topbar p, .notes p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 20px 20px 8px;
}

.topbar h1 {
  font-size: 28px;
}

.status {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 13px;
  white-space: nowrap;
}

.status.valid {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.34);
  color: #bbf7d0;
}

.status.invalid {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.34);
  color: #fed7aa;
}

.status.running {
  background: rgba(76,201,240,.12);
  border-color: rgba(76,201,240,.34);
  color: #d5f5ff;
}

.controls-row,
.field-group,
.button-grid,
.notes,
.accordion,
.marble-list,
.marble-legend {
  margin: 0 18px 16px;
}

.controls-row, .button-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button, input, select {
  font: inherit;
  border-radius: 16px;
  border: 1px solid var(--line);
  outline: none;
}

button {
  color: var(--text);
  cursor: pointer;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  transition: transform .12s ease, border-color .12s ease, opacity .12s ease;
}
button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.primary { background: linear-gradient(180deg, rgba(76,201,240,.32), rgba(6,182,212,.16)); border-color: rgba(76,201,240,.4); }
button.success { background: linear-gradient(180deg, rgba(34,197,94,.32), rgba(22,163,74,.16)); border-color: rgba(34,197,94,.4); }
button.warning { background: linear-gradient(180deg, rgba(245,158,11,.26), rgba(217,119,6,.14)); border-color: rgba(245,158,11,.38); }

input, select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  color: var(--text);
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.accordion {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
}
.accordion summary::-webkit-details-marker { display: none; }

.module-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 14px 14px;
}

.module-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.module-card:hover, .module-card.active {
  transform: translateY(-1px);
  border-color: rgba(76,201,240,.46);
  background: rgba(76,201,240,.08);
}
.module-card h4 {
  margin: 8px 0 4px;
  font-size: 13px;
}
.module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.module-preview {
  width: 100%;
  height: 68px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(2,6,23,.5);
}

.board-section {
  padding: 0 18px 18px;
  flex: 1;
}

.board-wrap {
  position: relative;
  background: var(--panel-soft);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 28px;
  padding: 16px;
  min-height: 700px;
  overflow: auto;
}

.grid {
  position: relative;
  display: grid;
  gap: var(--gap);
  justify-content: center;
  z-index: 1;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cell:hover { border-color: rgba(255,255,255,.20); }
.cell.start { border-color: rgba(76,201,240,.6); border-width: 2px; }
.cell.finish { border-color: rgba(34,197,94,.6); border-width: 2px; }
.cell.selected { box-shadow: 0 0 0 2px rgba(76,201,240,.25); }
.cell-tag {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}
.cell svg { width: 100%; height: 100%; display: block; }

#physicsCanvas {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  z-index: 2;
  pointer-events: none;
}

.marble-row {
  display: grid;
  grid-template-columns: 1fr 84px 44px;
  gap: 8px;
  margin-bottom: 8px;
}

.marble-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
}
.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.75);
}

.notes {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 14px;
}

.log {
  min-height: 150px;
  max-height: 300px;
  overflow: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 8px;
}

@media (max-width: 1500px) {
  .app-shell { grid-template-columns: 300px 1fr; }
  .right { grid-column: span 2; }
}

@media (max-width: 960px) {
  :root { --cell-size: 78px; }
  .app-shell { grid-template-columns: 1fr; }
  .right { grid-column: auto; }
  .topbar { flex-direction: column; }
  .board-wrap { min-height: 560px; }
}