:root {
  --bg: #06100e;
  --panel: rgba(12, 28, 24, 0.94);
  --panel-2: rgba(18, 40, 34, 0.94);
  --line: rgba(119, 255, 188, 0.18);
  --text: #ebfff5;
  --muted: #91afa4;
  --accent: #76ffae;
  --cyan: #70ffeb;
  --purple: #c38cff;
  --warn: #ffd56f;
  --danger: #ff769d;
  --good: #8eff98;
  --shadow: 0 0 0 1px rgba(118,255,174,.05), 0 16px 36px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(rgba(112,255,235,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,255,235,.025) 1px, transparent 1px),
    radial-gradient(circle at 12% 0%, rgba(112,255,235,.11), transparent 28%),
    radial-gradient(circle at 90% 5%, rgba(195,140,255,.11), transparent 27%),
    linear-gradient(180deg, #030807 0%, #071411 48%, #050b09 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

button, input, select { font: inherit; }
button, .button-label { touch-action: manipulation; }

input, select {
  width: 100%;
  min-height: 44px;
  padding: .72rem .82rem;
  border-radius: 12px;
  border: 1px solid rgba(118,255,174,.15);
  background: rgba(5,14,12,.94);
  color: var(--text);
  outline: none;
}
input:focus, select:focus {
  border-color: rgba(112,255,235,.48);
  box-shadow: 0 0 0 3px rgba(112,255,235,.08);
}
input[readonly] { opacity: .7; }
label { display: block; margin-bottom: .34rem; color: var(--muted); font-size: .86rem; }

.app-shell { width: min(1240px, calc(100% - 1rem)); margin: 0 auto; padding: .8rem 0 2rem; }
.topbar {
  position: sticky;
  top: .5rem;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(13,31,26,.96), rgba(6,18,15,.94));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.topbar h1 { margin: .18rem 0 0; font-size: clamp(1.35rem, 4vw, 2rem); letter-spacing: -.025em; }
.eyebrow { margin: 0; color: var(--cyan); font-size: .72rem; letter-spacing: .16em; }
.topbar-actions, .main-nav, .tag-row, .inline-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

.main-nav { margin: .9rem 0; }
.nav-btn, .primary-btn, .ghost-btn, .danger-btn, .small-btn, .unlock-btn {
  min-height: 44px;
  border-radius: 13px;
  border: 1px solid rgba(118,255,174,.12);
  padding: .7rem .92rem;
  color: var(--text);
  cursor: pointer;
}
.nav-btn, .ghost-btn, .small-btn { background: rgba(16,35,30,.94); }
.nav-btn.active, .primary-btn, .unlock-btn {
  background: linear-gradient(135deg, rgba(76,255,166,.24), rgba(112,255,235,.13));
  border-color: rgba(118,255,174,.24);
  box-shadow: 0 0 24px rgba(118,255,174,.07);
}
.danger-btn { background: rgba(255,118,157,.12); border-color: rgba(255,118,157,.24); }
.button-label { display: inline-flex; align-items: center; margin: 0; }

.screen { display: none; }
.screen.active { display: block; }
.grid, .kpi-grid, .product-grid, .group-grid, .order-grid, .history-grid, .day-grid, .field-grid { display: grid; gap: .9rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3, .field-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: .9rem; }
.field-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpi-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.product-grid, .group-grid, .order-grid, .history-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card, .metric, .group-card, .product-card, .day-card, .order-card, .history-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15,34,29,.95), rgba(7,20,17,.95));
  box-shadow: var(--shadow);
}
.card, .group-card, .product-card, .day-card, .order-card, .history-card { padding: 1rem; }
.metric { padding: 1rem; }
.metric p { margin: 0 0 .3rem; color: var(--muted); font-size: .82rem; }
.metric h2 { margin: 0; font-size: 1.5rem; }
.section-title { margin: 0 0 .7rem; font-size: 1.08rem; }
.subtle, .muted-line, .footer-note { color: var(--muted); }
.footer-note, .muted-line { font-size: .84rem; }

.group-card-header, .product-card-header, .row-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.group-card h3, .product-card h3, .day-card h3, .order-card h3, .history-card h3 { margin: 0 0 .25rem; }
.tag-row { margin-top: .65rem; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .32rem .58rem;
  border: 1px solid rgba(118,255,174,.12);
  border-radius: 999px;
  background: rgba(15,34,29,.86);
  font-size: .78rem;
}
.tag.good { color: var(--good); }
.tag.warn { color: var(--warn); }
.tag.danger { color: var(--danger); }
.tag.purple { color: var(--purple); }
.tag.cyan { color: var(--cyan); }

.summary-box, .fixture-box, .data-panel {
  margin-top: .85rem;
  padding: .82rem;
  border: 1px solid rgba(118,255,174,.09);
  border-radius: 15px;
  background: rgba(8,23,19,.86);
}
.clean-list, .alert-list { list-style: none; padding: 0; margin: 0; }
.clean-list li, .alert-list li { padding: .62rem 0; border-bottom: 1px solid rgba(118,255,174,.07); }
.clean-list li:last-child, .alert-list li:last-child { border-bottom: 0; }
.checkbox-wrap { display: flex; align-items: center; gap: .55rem; margin-top: .75rem; }
.checkbox-wrap input { width: auto; min-height: auto; transform: scale(1.12); }
.checkbox-wrap label { margin: 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.inline-form > div { flex: 1 1 180px; }
.empty-state { padding: 1rem; border: 1px dashed rgba(118,255,174,.18); border-radius: 16px; color: var(--muted); text-align: center; }
.data-warning { color: var(--warn); font-size: .84rem; margin-top: .6rem; }
hr.soft { border: 0; border-top: 1px solid rgba(118,255,174,.08); margin: 1rem 0; }

.fixture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 120px;
  gap: .65rem;
  align-items: end;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(118,255,174,.07);
}
.fixture-row:last-child { border-bottom: 0; }
.fixture-name { min-width: 0; }
.fixture-name strong { display: block; }
.fixture-name span { color: var(--muted); font-size: .8rem; }

.settings-product-title { margin: 0; }
.known-cap-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }

@media (hover:hover) and (pointer:fine) {
  .nav-btn:hover, .primary-btn:hover, .ghost-btn:hover, .danger-btn:hover, .small-btn:hover, .unlock-btn:hover { transform: translateY(-1px); }
}

@media (max-width: 900px) {
  .kpi-grid, .grid.cols-2, .grid.cols-3, .field-grid, .field-grid.cols-3, .field-grid.cols-4 { grid-template-columns: 1fr; }
  .fixture-row { grid-template-columns: 1fr 92px; }
  .fixture-row .fixture-cap { grid-column: 1 / -1; }
}


/* V3: reactive alien grid */
#alienGridCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
}

.app-shell { position: relative; z-index: 1; }

/* V3: research board */
.research-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  justify-content: space-between;
}

.research-toolbar-actions,
.research-nudge {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.research-board-shell {
  margin-top: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(124,255,175,.16);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7,17,15,.78), rgba(4,10,9,.92));
  box-shadow: inset 0 0 55px rgba(124,255,175,.035);
}

.research-board {
  position: relative;
  min-height: 600px;
  background-image:
    linear-gradient(rgba(124,255,175,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,175,.055) 1px, transparent 1px);
  background-size: 126px 128px;
  background-position: 52px 50px;
  user-select: none;
}

.research-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.research-link {
  stroke: rgba(124,255,175,.35);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.research-link-glow {
  stroke: rgba(123,255,239,.09);
  stroke-width: 9;
  vector-effect: non-scaling-stroke;
}

.research-node {
  position: absolute;
  width: 94px;
  height: 112px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  touch-action: none;
}

.research-node-square {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 13px;
  display: grid;
  place-items: center;
  position: relative;
  border: 2px solid rgba(124,255,175,.16);
  background: linear-gradient(145deg, rgba(25,38,34,.98), rgba(8,15,13,.98));
  box-shadow: inset 0 0 18px rgba(0,0,0,.34), 0 0 0 1px rgba(0,0,0,.28);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}

.research-node:hover .research-node-square,
.research-node.selected .research-node-square {
  border-color: rgba(123,255,239,.62);
  box-shadow: 0 0 0 3px rgba(123,255,239,.09), 0 0 28px rgba(123,255,239,.13);
}

.research-node.unlocked .research-node-square {
  background: linear-gradient(145deg, rgba(77,198,121,.88), rgba(28,95,76,.94));
  border-color: rgba(150,255,188,.78);
  box-shadow: 0 0 24px rgba(124,255,175,.16), inset 0 0 15px rgba(255,255,255,.06);
}

.research-node.editing .research-node-square::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(196,139,255,.45);
  border-radius: 17px;
}

.research-node-code {
  font-weight: 900;
  letter-spacing: .06em;
  font-size: .78rem;
  color: #effff8;
  text-shadow: 0 1px 6px rgba(0,0,0,.75);
}

.research-lock-mark {
  position: absolute;
  right: -5px;
  top: -7px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: .72rem;
  background: #121916;
  border: 1px solid rgba(255,255,255,.13);
  color: var(--muted);
}

.research-node.unlocked .research-lock-mark { display: none; }

.research-node-name {
  display: block;
  margin-top: 7px;
  font-size: .72rem;
  line-height: 1.08;
  font-weight: 750;
  text-wrap: balance;
  color: var(--text);
}

.research-node-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .63rem;
}

.research-layout-code {
  display: none;
  width: 100%;
  min-height: 220px;
  margin-top: .8rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
}
.research-layout-code.visible { display: block; }

.research-selected-panel {
  margin-top: 1rem;
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.research-selected-panel .tag-row { margin-top: 0; justify-content: flex-end; }

.nudge-btn {
  min-width: 44px;
  min-height: 44px;
  padding: .55rem;
}

/* V3: per-item capacity editor */
.capacity-editor {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}
.capacity-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 150px;
  gap: .75rem;
  align-items: center;
  padding: .62rem .72rem;
  border: 1px solid rgba(124,255,175,.08);
  border-radius: 13px;
  background: rgba(10,20,18,.66);
}
.capacity-row label { margin: 0; color: var(--text); }

.auto-start-box {
  padding: .75rem .85rem;
  border: 1px solid rgba(123,255,239,.13);
  border-radius: 14px;
  background: rgba(11,27,24,.76);
  color: var(--muted);
}
.auto-start-box strong { color: var(--text); }

@media (max-width: 650px) {
  .research-selected-panel { grid-template-columns: 1fr; }
  .research-selected-panel .tag-row { justify-content: flex-start; }
  .capacity-row { grid-template-columns: 1fr; }
}

/* V4: full research board builder */
button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
}

.connector-banner {
  margin-top: .8rem;
  padding: .72rem .8rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  border: 1px solid rgba(196,139,255,.3);
  border-radius: 14px;
  background: rgba(56,31,76,.25);
  color: var(--text);
}

.research-node.connector-source .research-node-square {
  border-color: rgba(196,139,255,.9);
  box-shadow: 0 0 0 4px rgba(196,139,255,.12), 0 0 32px rgba(196,139,255,.28);
}

.research-node-editor {
  margin-top: 1rem;
}

.research-editor-heading,
.calibration-group-head,
.calibration-back-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.research-editor-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(100px, .6fr) minmax(100px, .6fr);
  gap: .75rem;
  margin-top: 1rem;
}

.research-editor-actions {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.connector-list {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(124,255,175,.09);
}

.connector-list h3 {
  margin: 0 0 .65rem;
  font-size: .9rem;
}

.connector-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .58rem .68rem;
  border-radius: 12px;
  background: rgba(9,18,16,.7);
  border: 1px solid rgba(124,255,175,.08);
  margin-top: .45rem;
  font-size: .84rem;
}

/* V4: flip-card product calibration */
.calibration-groups {
  display: grid;
  gap: 1rem;
}

.calibration-group {
  overflow: hidden;
}

.calibration-group-head {
  align-items: center;
  margin-bottom: .85rem;
}

.calibration-group-head .section-title {
  margin-bottom: 0;
}

.calibration-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .85rem;
}

.calibration-card {
  min-width: 0;
  min-height: 390px;
  perspective: 1100px;
}

.calibration-card-inner {
  position: relative;
  width: 100%;
  min-height: 390px;
  transform-style: preserve-3d;
  transition: transform .42s cubic-bezier(.2,.75,.2,1);
}

.calibration-card.is-flipped .calibration-card-inner {
  transform: rotateY(180deg);
}

.calibration-face {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 390px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(124,255,175,.13);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(19,35,31,.97), rgba(7,15,13,.98));
  box-shadow: inset 0 0 34px rgba(124,255,175,.025);
  overflow: hidden;
}

.calibration-front {
  display: flex;
}

.calibration-open {
  width: 100%;
  min-height: 390px;
  padding: 1rem;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.calibration-open:hover {
  background: radial-gradient(circle at 80% 12%, rgba(123,255,239,.07), transparent 36%);
}

.calibration-card-kicker {
  color: var(--accent-2);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.calibration-product-name {
  margin-top: .45rem;
  font-size: 1.15rem;
  line-height: 1.12;
  font-weight: 800;
}

.calibration-front-data {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .6rem;
  margin: 1.2rem 0 auto;
}

.calibration-front-data > span {
  padding: .75rem;
  border-radius: 14px;
  border: 1px solid rgba(124,255,175,.08);
  background: rgba(5,13,11,.52);
}

.calibration-front-data strong,
.calibration-front-data small {
  display: block;
}

.calibration-front-data strong {
  font-size: 1.35rem;
}

.calibration-front-data small {
  color: var(--muted);
  margin-top: .2rem;
}

.calibration-flip-hint {
  width: 100%;
  margin-top: .75rem;
  color: var(--muted);
  font-size: .76rem;
  text-align: right;
}

.calibration-back {
  transform: rotateY(180deg);
  padding: .9rem;
  display: flex;
  flex-direction: column;
}

.calibration-back-head h3 {
  margin: .2rem 0 0;
  font-size: 1rem;
}

.calibration-box-field,
.calibration-capacity-section {
  margin-top: .75rem;
}

.calibration-add-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 76px auto;
  gap: .45rem;
}

.calibration-existing {
  margin-top: .75rem;
  min-height: 78px;
  max-height: 138px;
  overflow-y: auto;
  padding-right: .2rem;
}

.calibration-existing-title {
  color: var(--muted);
  font-size: .74rem;
  margin-bottom: .4rem;
}

.calibration-cap-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px 34px;
  gap: .4rem;
  align-items: center;
  padding: .35rem .4rem;
  border-radius: 10px;
  background: rgba(5,13,11,.48);
  margin-top: .35rem;
  font-size: .77rem;
}

.calibration-cap-row input {
  padding: .48rem .5rem;
}

.capacity-clear {
  min-width: 32px;
  min-height: 32px;
  border-radius: 9px;
  border: 1px solid rgba(255,123,159,.18);
  background: rgba(255,123,159,.1);
  color: var(--danger);
  cursor: pointer;
}

.calibration-none {
  margin: .4rem 0;
  font-size: .78rem;
}

.calibration-save {
  width: 100%;
  margin-top: auto;
}

@media (prefers-reduced-motion: reduce) {
  .calibration-card-inner { transition: none; }
}

@media (max-width: 700px) {
  .research-editor-grid { grid-template-columns: 1fr 1fr; }
  .research-editor-grid > div:first-child { grid-column: 1 / -1; }
  .calibration-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calibration-card { min-height: 360px; }
  .calibration-card-inner, .calibration-face, .calibration-open { min-height: 360px; }
}

@media (max-width: 480px) {
  .calibration-card-grid { grid-template-columns: 1fr; }
  .calibration-add-row { grid-template-columns: 1fr 72px; }
  .calibration-add-row button { grid-column: 1 / -1; }
  .research-editor-heading { flex-direction: column; }
}

/* V4: collapsible calibration groups keep Settings compact */
details.calibration-group > summary {
  list-style: none;
  cursor: pointer;
  margin: -1rem;
  padding: 1rem;
}
details.calibration-group > summary::-webkit-details-marker { display: none; }
details.calibration-group[open] > summary {
  margin-bottom: .85rem;
  border-bottom: 1px solid rgba(124,255,175,.08);
}
.calibration-group-head .tag-row { margin-top: 0; align-items: center; }
.calibration-chevron {
  display: inline-block;
  color: var(--muted);
  font-size: 1rem;
  transition: transform .18s ease;
}
details.calibration-group[open] .calibration-chevron { transform: rotate(180deg); }


/* V5: fixture shelf-count calibration */
.fixture-calibration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.fixture-calibration-card {
  min-width: 0;
  padding: .85rem;
  border-radius: 16px;
  border: 1px solid rgba(124,255,175,.10);
  background: linear-gradient(145deg, rgba(15,29,26,.95), rgba(7,15,13,.96));
}
.fixture-calibration-card > strong {
  display: block;
  margin: .35rem 0 .8rem;
}
.fixture-calibration-card small {
  display: block;
  margin-top: .45rem;
  color: var(--muted);
  line-height: 1.25;
}
.fixture-calibration-card input {
  text-align: center;
  font-weight: 800;
}
@media (max-width: 520px) {
  .fixture-calibration-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}