:root {
  --ep-ink: #15171A;
  --ep-graphite: #2A2E33;
  --ep-steel: #4A5159;
  --ep-slate: #6E757D;
  --ep-bg-1: #FFFFFF;
  --ep-bg-2: #F4F5F7;
  --ep-lumen-100: #FFEBB8;
  --ep-lumen-500: #F5A524;
  --ep-lumen-600: #D98A0B;
  --ep-signal-500: #1E6FBA;
  --ep-danger: #C0392B;
  --ep-danger-bg: #F8E2DF;
  --ep-hair: 1px solid rgba(0,0,0,.08);
  --ep-radius-card: 14px;
  --ep-radius-pill: 999px;
  --ep-radius-input: 8px;
  --ep-font-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --ep-font-ui: "IBM Plex Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --ep-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--ep-bg-1); color: var(--ep-ink); font-family: var(--ep-font-ui); font-size: 14px; }

.h-display { font-family: var(--ep-font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.01em; margin: 0; }
.num { font-family: var(--ep-font-mono); font-variant-numeric: tabular-nums; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: var(--ep-hair);
  background: var(--ep-bg-1);
}
/* Wordmark PNG is cropped to a tight bounding box (ink ≈ 70% of height, ~15%
   transparent padding each side). The earlier export had 88% padding, which
   rendered the wordmark ~6px tall. The small negative margin absorbs the
   remaining padding so the nav keeps its rhythm. It's a wide wordmark, so
   height stays modest to fit the toolbar. */
.nav__logo { height: 30px; margin: -2px 0; width: auto; flex: none; }
.nav { gap: 12px; }
/* Toolbar never wraps into two-line buttons or runs off-screen: on narrow
   windows it scrolls sideways instead. */
.nav__actions { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav__actions::-webkit-scrollbar { display: none; }
.nav__center { color: var(--ep-graphite); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--ep-radius-pill);
  border: var(--ep-hair); background: var(--ep-bg-1); color: var(--ep-ink);
  font-family: var(--ep-font-ui); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.btn:hover { background: var(--ep-bg-2); }
.btn--primary { background: var(--ep-lumen-500); border-color: transparent; color: var(--ep-ink); }
.btn--primary:hover { background: #E0931E; }
.btn--dark { background: var(--ep-ink); color: #fff; border-color: transparent; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { background: var(--ep-bg-1); }
.btn--primary:disabled:hover { background: var(--ep-lumen-500); }
.nav__user { color: var(--ep-slate); font-size: 13px; }

.card { border-radius: var(--ep-radius-card); border: var(--ep-hair); padding: 18px; background: var(--ep-bg-1); }

.dropzone {
  border: 2px dashed rgba(0,0,0,.15); border-radius: var(--ep-radius-card);
  padding: 64px 24px; text-align: center; cursor: pointer; transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.is-over { background: var(--ep-bg-2); border-color: var(--ep-lumen-500); }
.dropzone p { margin: 0; }

.input {
  width: 100%; padding: 10px 14px; border: var(--ep-hair); border-radius: var(--ep-radius-input);
  font-family: var(--ep-font-ui); font-size: 14px;
}

.workbench {
  display: grid; grid-template-columns: 1fr 340px; height: calc(100vh - 65px);
}
.workbench__canvas { background: var(--ep-bg-2); position: relative; overflow: hidden; }
.workbench__panel { border-left: var(--ep-hair); overflow: auto; padding: 16px; background: var(--ep-bg-1); }

.panel-section { padding: 12px 0; border-bottom: var(--ep-hair); }
.panel-section:last-child { border-bottom: none; }
.panel-section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.panel-section__head .panel-section__title { margin: 0; }
.units-pick { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ep-slate); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.units-pick .input { width: auto; padding: 3px 8px; font-size: 12px; text-transform: none; letter-spacing: 0; font-family: var(--ep-font-mono); }
.units-hint { background: var(--ep-lumen-100); border-radius: var(--ep-radius-input); padding: 10px 12px; margin: 0 0 10px; }
.units-hint p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ep-ink); }
.units-hint .btn { padding: 5px 12px; font-size: 12px; }
.panel-section__title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ep-slate); margin: 0 0 8px; }

.row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.row__name { color: var(--ep-graphite); }
.row__value { color: var(--ep-ink); }
.row--clickable { cursor: pointer; }
.row--clickable:hover { background: var(--ep-bg-2); border-radius: 6px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
.row--active { background: var(--ep-bg-2); border-radius: 6px; padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ep-ink); color: #fff; padding: 10px 16px; border-radius: var(--ep-radius-pill);
  font-size: 13px; z-index: 50;
}
.toast--error { background: var(--ep-danger); }

.empty { color: var(--ep-slate); font-size: 13px; padding: 12px 0; }
a { color: inherit; text-decoration: none; }

.library-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: var(--ep-hair);
}
.library-row:last-child { border-bottom: none; }
.library-row:hover { background: var(--ep-bg-2); }
.library-row__label { color: var(--ep-ink); font-weight: 500; }
.library-row__date { color: var(--ep-slate); font-size: 12px; }

.canvas-overlay {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.92); padding: 8px 12px;
  border-radius: var(--ep-radius-input); border: var(--ep-hair);
  font-size: 12px; color: var(--ep-steel);
  pointer-events: none;
}
/* Loading / empty / error card in the middle of the canvas. Interactive (it
   carries Retry / Open file… buttons), unlike the old corner label. */
.canvas-overlay--card {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 32px)); padding: 20px 22px;
  background: var(--ep-bg-1); border-radius: var(--ep-radius-card);
  pointer-events: auto; text-align: left; z-index: 5;
}
.canvas-overlay__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ep-ink); }
.canvas-overlay__detail { margin: 6px 0 0; font-size: 13px; color: var(--ep-steel); overflow-wrap: anywhere; }
.canvas-overlay__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.canvas-overlay--card.is-error .canvas-overlay__title { color: var(--ep-danger); }

/* --- Drop-anywhere target ------------------------------------------------ */
.drop-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(21,23,26,.35); pointer-events: none;
}
.drop-overlay.is-on { display: flex; }
.drop-overlay__card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 36px 48px; background: var(--ep-bg-1);
  border: 2px dashed var(--ep-lumen-500); border-radius: var(--ep-radius-card);
  font-size: 15px; color: var(--ep-ink);
}
.drop-overlay__card span { font-family: var(--ep-font-mono); font-size: 12px; color: var(--ep-slate); }

/* --- Upload status panel (persistent, unlike the toast) ------------------ */
.status-panel {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); z-index: 150; display: none;
  background: var(--ep-bg-1); border: var(--ep-hair); border-radius: var(--ep-radius-card);
  padding: 14px 18px; overflow: hidden;
}
.status-panel.is-on { display: block; }
.status-panel.is-error { background: var(--ep-danger-bg); }
.status-panel__text { margin: 0; font-size: 14px; font-weight: 500; color: var(--ep-ink); }
.status-panel.is-error .status-panel__text { color: var(--ep-danger); font-weight: 500; }
.status-panel__detail { margin: 4px 0 0; font-size: 12px; color: var(--ep-slate); overflow-wrap: anywhere; }
.status-panel__actions { display: flex; gap: 8px; margin-top: 12px; }
/* Indeterminate progress line: a lumen segment sweeping the top edge. */
.status-panel__bar {
  position: absolute; top: 0; left: 0; height: 2px; width: 30%;
  background: var(--ep-lumen-500); animation: ep-sweep 1.2s ease-in-out infinite;
}
@keyframes ep-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .status-panel__bar { animation: none; width: 100%; } }

/* --- Persistent mode banner + crosshair cursor --------------------------- */
/* Small pill at top-centre of the canvas telling the user which mode is live.
   Banner and crosshair are driven together by setModeBanner() so they can't
   drift apart. No shadow, no gradient — brand hairline pill only. */
.mode-banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--ep-bg-1); border: var(--ep-hair); border-radius: var(--ep-radius-pill);
  padding: 6px 14px; font-family: var(--ep-font-ui); font-size: 12px; color: var(--ep-ink);
  z-index: 20; pointer-events: none; white-space: nowrap;
}
#canvas-host.mode-active canvas { cursor: crosshair; }

/* --- Teaching empty states (measure + lux) ------------------------------- */
.teach-list { margin: 0; padding-left: 18px; color: var(--ep-slate); font-size: 12px; line-height: 1.6; }
.teach-list li { margin: 2px 0; }

/* --- Layers list: dense two-column rows that never wrap ------------------- */
.layer-row { cursor: pointer; gap: 10px; }
.layer-row__name {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; color: var(--ep-graphite);
}
.layer-row__label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 150px;
}
.layer-row__value {
  flex: none; white-space: nowrap;
  color: var(--ep-ink); font-size: 13px;
}
.layer-row__count { color: var(--ep-slate); }