:root {
  --bg: #1a1a2e;
  --panel-bg: #25253a;
  --text: #f0f0f7;
  --muted: #a0a0c0;
  --accent: #7c6fe0;
  --border: #3d3d5c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: relative;
}

#viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2a2a45 0%, #14141f 100%);
}

.viewport-hint {
  position: absolute;
  left: 14px;
  bottom: 12px;
  margin: 0;
  font-size: 11px;
  color: rgba(231, 231, 234, 0.55);
  pointer-events: none;
  user-select: none;
}

#panel {
  width: 340px;
  flex: 0 0 340px;
  overflow-y: auto;
  padding: 18px 20px 40px;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  transition: width 0.18s ease, flex-basis 0.18s ease, padding 0.18s ease;
}

#panel.collapsed {
  width: 0;
  flex: 0 0 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  border-left: none;
}

#leftPanel {
  width: 360px;
  flex: 0 0 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 20px 16px;
  background: var(--panel-bg);
  border-right: 1px solid var(--border);
  transition: width 0.18s ease, flex-basis 0.18s ease, padding 0.18s ease;
}

#leftPanel.collapsed {
  width: 0;
  flex: 0 0 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  border-right: none;
}

.panel-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 16px;
  height: 44px;
  background: var(--border);
  color: var(--muted);
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: left 0.18s ease, right 0.18s ease, background 0.15s ease, color 0.15s ease;
}

.panel-toggle:hover {
  color: var(--text);
  background: var(--accent);
  filter: none;
}

#leftPanelToggle {
  left: 360px;
  border-radius: 0 6px 6px 0;
}

#leftPanelToggle.is-collapsed {
  left: 0;
}

#rightPanelToggle {
  right: 340px;
  border-radius: 6px 0 0 6px;
}

#rightPanelToggle.is-collapsed {
  right: 0;
}

.panel-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}

.panel-toggle.is-collapsed svg {
  transform: rotate(180deg);
}

#panel h1,
#leftPanel h1 {
  font-size: 18px;
  margin: 0 0 4px;
}

.tagline {
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 10px;
}

.tagline a {
  color: var(--muted);
  text-decoration: underline;
}

.tagline a:hover {
  color: var(--text);
}

.tagline .emote {
  font-style: normal;
  display: inline-block;
}

.status {
  /* Hidden -- kept in the DOM (not deleted) because rebuild()/main()
     still write status/error text into it; just no longer shown, since
     the happy-path "Ready" text was just taking up vertical space.
     Failures are still logged to the console via the same code paths. */
  display: none;
}

.clearance {
  font-size: 12px;
  line-height: 1.4;
  min-height: 1.4em;
  margin: -8px 0 14px;
  font-weight: 600;
}
.clearance.ok { color: #6fd66f; }
.clearance.warn { color: #f0b64c; }
.clearance.bad { color: #f0605c; }

details {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 6px 10px 10px;
}

details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 0;
}

/* Nested drawers inside "Advanced Settings" -- tighten up their own
   margin so they read as children of the drawer instead of full siblings
   of it. Visual distinction (so it's obvious which drawer is nested
   inside which when both are open) comes from the general `details
   details` rule below instead of anything specific to Advanced Settings. */
.advanced-drawer details {
  margin: 10px 0 0;
}

/* Any drawer nested inside another drawer (Advanced Settings' children,
   Logo import's "More info", etc.) -- a recessed dark-input-style
   background instead of the plain bordered box top-level drawers use, so
   an open drawer-within-a-drawer doesn't look identical to the drawer
   containing it and it's clear at a glance which one to close. Summary
   text itself is left at the default `details summary` styling (same
   size/weight/color as a top-level drawer's title) -- only the box around
   it changes. */
details details {
  background: var(--bg);
  border-radius: 6px;
  padding: 4px 10px 10px;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 18px 12px;
  margin: 10px 0;
  cursor: pointer;
  text-align: center;
  color: var(--muted);
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--accent);
  color: var(--text);
}

.dropzone svg {
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
}

.dropzone-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dropzone-sub {
  font-size: 11px;
}

.row {
  margin: 10px 0;
}

.slider-row {
  margin: 10px 0;
}

.slider-row label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  min-height: 20px;
}

.slider-row label span.name {
  min-width: 0;
}

.slider-row label span.val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border-bottom: 1px dotted transparent;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
  line-height: 18px;
  /* Reserve the same footprint as .val-edit (width + margin) at all
     times, editing or not -- otherwise swapping the narrower text span
     for the wider input steals horizontal space from the name label,
     which can push it onto an extra wrapped line and shift everything
     below it down. Explicit height (border-box, so the border-bottom is
     absorbed into it rather than adding to it) keeps this pixel-for-
     pixel identical to .val-edit's box, so clicking to edit doesn't
     nudge the row's height by even a hair. */
  min-width: 68px;
  height: 20px;
  text-align: right;
  box-sizing: border-box;
  display: inline-block;
}

.slider-row label span.val:hover {
  border-bottom-color: var(--muted);
}

.slider-row .val-edit {
  width: 68px;
  height: 20px;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  padding: 0 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  flex-shrink: 0;
  margin-left: 8px;
}

.slider-row .val-edit::-webkit-outer-spin-button,
.slider-row .val-edit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* Directional sliders (see the `direction` param on createSliderRow()) --
   the chevron icons sit in the SAME flex row as the track, vertically
   centered against it, so adding them never changes the row's height or
   pushes anything below it down. */
.slider-track {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-track input[type="range"] {
  flex: 1;
  width: auto;
  min-width: 0;
}

.dir-icon {
  flex: none;
  display: flex;
  color: var(--text);
}

.slider-row.is-disabled {
  opacity: 0.4;
}

.slider-row.is-disabled input[type="range"] {
  cursor: not-allowed;
}

.switch-entry {
  margin-bottom: 8px;
}

.switch-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.switch-entry-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.switch-remove-btn {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch-remove-btn svg {
  width: 12px;
  height: 12px;
}

.switch-remove-btn:hover {
  color: var(--text);
  background: var(--border);
  filter: none;
}

.select-label,
.section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.pill-toggle {
  display: flex;
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.pill-toggle button {
  flex: 1;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 600;
}

.pill-toggle button:hover {
  filter: none;
  color: var(--text);
}

.pill-toggle button.active {
  background: var(--accent);
  color: white;
}

.color-row {
  display: flex;
  gap: 10px;
}

.color-swatch-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  background: #1a1a2e;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}

.color-swatch-label input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.boost-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #00AE42;
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0 0 14px;
}

.boost-link:hover {
  filter: brightness(1.08);
}

.boost-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.bmc-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffdd00;
  color: #000000;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0 0 14px;
}

.bmc-link:hover {
  filter: brightness(1.08);
}

.bmc-link svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0 16px;
}

.section-num {
  color: var(--muted);
  margin-right: 6px;
}

.sample-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.sample-logo-btn {
  aspect-ratio: 1;
  background: #1a1a2e;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sample-logo-btn:hover {
  border-color: var(--accent);
  color: var(--text);
  filter: none;
}

.sample-logo-btn svg {
  width: 100%;
  height: 100%;
}

/* Currently-selected shape in the library (see renderShapeLibrary() in
   app.js) -- same accent-fill treatment as an active pill-toggle button. */
.sample-logo-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* The "Imported" tile before any logo's been uploaded -- present (not
   hidden) so there's a stable, discoverable spot for it, but greyed out
   and unclickable, same disabled treatment as everywhere else on the
   site. */
.sample-logo-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Text-only tiles (the dynamic "Imported" tile and saved custom samples,
   which have no icon of their own) -- smaller type with an ellipsis so a
   long saved name doesn't blow out the square tile. */
.sample-logo-btn.text-tile {
  font-size: 10px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px;
}

/* Wraps every shape-library tile so a removable (custom-saved) one's ×
   button can sit in the corner without disturbing the .sample-gallery
   grid sizing -- see renderShapeLibrary() in app.js. */
.shape-tile-wrap {
  position: relative;
  aspect-ratio: 1;
}

.shape-tile-wrap .sample-logo-btn {
  width: 100%;
  height: 100%;
}

.remove-sample-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f0605c;
  color: white;
  border: none;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-sample-btn:hover {
  filter: brightness(1.15);
}

select {
  width: 100%;
  background: #1a1a2e;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
}

textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

select:disabled,
textarea:disabled,
input[type="color"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.buttons {
  display: flex;
  gap: 8px;
}

button {
  flex: 1;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 13px;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
}

button#resetBtn,
.secondary-btn {
  background: #2e2e47;
}

.icon-btn {
  flex: 1;
  height: 56px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.icon-btn span {
  font-size: 10px;
  font-weight: 600;
}

.hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 16px;
}

.hint a {
  color: var(--muted);
  text-decoration: underline;
}

.hint a:hover {
  color: var(--text);
}

.hint.bad {
  color: #f0605c;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--text);
}

.icon-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: -2px;
}

.dialog-close-btn {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}

.dialog-close-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.info-dialog {
  width: min(480px, 90vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--text);
}

.info-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.info-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel-bg);
}

.info-dialog-header h2 {
  margin: 0;
  font-size: 15px;
}

.info-dialog-body {
  padding: 4px 18px 18px;
  overflow-y: auto;
  max-height: calc(80vh - 52px);
}

.info-dialog-body p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.info-dialog-body a {
  color: var(--muted);
  text-decoration: underline;
}

.info-dialog-body a:hover {
  color: var(--text);
}

.info-dialog-body h3 {
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 6px;
}

.info-dialog-body ul {
  margin: 0;
  padding-left: 18px;
}

.info-dialog-body li {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 8px;
}