/* Lumen Tool styles. Typography tokens come from /shared/design-system.css. */


* { margin: 0; padding: 0; box-sizing: border-box; }
.javascript-required { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:32px; background:#15171a; color:var(--text-main); font-family:var(--font-ui); font-size:var(--fs-body); font-weight:var(--w-normal); line-height:1.6; text-align:center; }
.javascript-required-title { font-size:var(--fs-ui-title); }
.javascript-required-copy { margin-top:12px; color:var(--text-muted); }
.info-pattern-desc { color:var(--text-muted); font-size:var(--fs-ui-sm); line-height:1.6; }
:root {
  --text-soft: var(--text-disabled);
  --panel-bg: #222228;
  --card-bg: #2a2a30;
  --border-soft: #3a3a42;
  --accent-blue: #5a9fd4;
  --accent-blue-soft: rgba(90,159,212,0.14);
  --accent-green: #4caf7d;
  --accent-amber: #f4c542;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --button-height-sm: 32px;
  --button-height-md: 38px;
  --bg: #1a1a1e;
  --accent-blue-bright: #9accf0;
}
html { width: 100%; height: 100%; overflow: hidden; }
body { font-family: var(--font-ui); font-size:var(--fs-ui-md); font-weight: var(--w-normal); background: var(--bg); color: var(--text-main); width: 100vw; max-width: 100vw; min-width: 0; height: 100vh; overflow: hidden; display: flex; }

#viewport { flex: 1 1 auto; min-width: 0; max-width: calc(100vw - 390px); position: relative; cursor: grab; overflow: hidden; touch-action: none; }
#diagram { touch-action: none; }
#viewport:active { cursor: grabbing; }
#viewport canvas { display: block; width: 100% !important; height: 100% !important; }
.viewport-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; max-width:520px; margin:auto; padding:28px; color:var(--text-main); font-size:var(--fs-ui-base); line-height:1.6; text-align:center; }
.light-name-input { width:120px; padding:0 2px; border:none; border-bottom:1px solid var(--accent-blue); outline:none; background:var(--bg); color:var(--text-main); font-family:var(--font-ui); font-size:var(--fs-ui-md); font-weight:var(--w-medium); }

#hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); padding: 10px 20px; border-radius: var(--radius-sm);
  font-size:var(--fs-ui-md); color: rgba(255,255,255,0.7); transition: opacity 1s;
  white-space: nowrap; z-index: 10;
}
#hint #flip-btn { color: rgba(255,255,255,0.7); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
#hint #flip-btn { font-family:var(--font-ui); font-size:var(--fs-ui-md); }
#hint #flip-btn:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.8); }
#hint #flip-btn.active { color: var(--accent-blue); text-decoration-color: rgba(90,159,212,0.5); }
body.advanced #hint { left: calc(50% + 125px); }

/* Nothing floats in the picture: the account button lives in the top bar only. */

/* Way out of the tool. The links in the top bar drop off on narrower screens
   (and in Advanced Mode on nearly every screen), which left visitors stuck on
   the tool with no route to the rest of the site. These sit quietly under the
   name, small and out of the way, and appear exactly where those top links
   disappear. */
#site-links {
  position: absolute; top: 88px; left: 14px; z-index: 10;
  display: none; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size:var(--fs-ui-sm); line-height: 1.5;
}
#site-links a { position: relative; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
#site-links a:hover { color: rgba(255,255,255,0.9); }
.simulator-social-link { color:var(--text-disabled); transition:color 0.2s; }
.simulator-social-link:hover { color:var(--text-main); }
/* Advanced Mode hides the name card, so the links move up into its place. */
body.advanced #site-links { left: 264px; top: 20px; }
@media (max-width: 1280px) { body:not(.advanced) #site-links { display: flex; } }
@media (max-width: 2160px) { body.advanced #site-links { display: flex; } }

#panel {
  width: 390px; background: #202026; border-left: 1px solid #303038;
  min-width: 390px; max-width: 390px; flex: 0 0 390px; overflow-y: scroll; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px;
}

.desktop-notice { display: block; font-size:var(--fs-ui-sm); color: #e6c45e; background: #2b271d; border: 1px solid #4a3d1f; border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; margin-bottom: 8px; }

.light-card { background: #27272d; border: 1px solid #34343c; border-radius: var(--radius-lg); padding: 16px; }
.light-card.active { border-color: var(--accent-blue); background: #292930; }
.lt-free-light-access #card-1,
.lt-free-light-access #card-2,
.lt-free-light-access #card-3,
.light-card.studio-locked-light { opacity: .72; }
.lt-free-light-access #card-1.active,
.lt-free-light-access #card-2.active,
.lt-free-light-access #card-3.active,
.light-card.studio-locked-light.active { border-color: #34343c; background: #27272d; }
.lt-free-light-access #card-1 .light-header,
.lt-free-light-access #card-2 .light-header,
.lt-free-light-access #card-3 .light-header,
.light-card.studio-locked-light .light-header { cursor: default; }
.lt-free-light-access #card-1 .light-toggle,
.lt-free-light-access #card-2 .light-toggle,
.lt-free-light-access #card-3 .light-toggle,
.lt-free-light-access #card-1 .control-slider,
.lt-free-light-access #card-2 .control-slider,
.lt-free-light-access #card-3 .control-slider,
.lt-free-light-access #card-1 .gel-swatch,
.lt-free-light-access #card-2 .gel-swatch,
.lt-free-light-access #card-3 .gel-swatch,
.light-card.studio-locked-light .light-toggle,
.light-card.studio-locked-light .control-slider,
.light-card.studio-locked-light .gel-swatch { cursor: default; }
.lt-free-light-access #card-1 .light-toggle.on { background: #444; }
.lt-free-light-access #card-1 .light-toggle.on::after { transform: none; }
.lt-free-light-access #card-1 .light-toggle::after,
.lt-free-light-access #card-2 .light-toggle::after,
.lt-free-light-access #card-3 .light-toggle::after,
.light-card.studio-locked-light .light-toggle::after { opacity: .72; }
.light-lock-note {
  display: none;
  color: var(--text-soft);
  font-size:var(--fs-ui-xs);
  font-weight:var(--w-medium);
  line-height: 1.25;
}
.lt-free-light-access #card-1 .light-lock-note,
.lt-free-light-access #card-2 .light-lock-note,
.lt-free-light-access #card-3 .light-lock-note,
.studio-locked-light .light-lock-note { display: inline-flex; }
.light-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.light-name { font-size:var(--fs-ui-md); font-weight:var(--w-medium); display: flex; align-items: center; gap: 8px; }
.light-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.light-toggle { width: 40px; height: 22px; border-radius: 11px; background: #444; cursor: pointer; position: relative; border: none; transition: background 0.05s; }
.light-toggle.on { background: var(--accent-blue); }
.light-toggle::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: white; top: 3px; left: 3px; transition: transform 0.05s; }
.light-toggle.on::after { transform: translateX(18px); }

.control-row { display: flex; align-items: center; margin-top: 10px; gap: 8px; }
.control-label { font-size:var(--fs-ui-sm); color: var(--text-muted); width: 68px; flex-shrink: 0; }
.control-slider { flex: 1; min-width: 0; height: 3px; -webkit-appearance: none; appearance: none; background: #444; border-radius: 2px; outline: none; }
.control-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #ddd; cursor: pointer; }
.control-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #ddd; cursor: pointer; border: none; }
.control-value { font-size:var(--fs-ui-sm); color: var(--text-main); width: 52px; flex-shrink: 0; text-align: right; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-btn { padding: 6px 12px; border: 1px solid #444; border-radius: var(--radius-sm); background: transparent; color: var(--text-main); font-family: var(--font-ui); font-size:var(--fs-ui-sm); line-height: 1.2; cursor: pointer; transition: all 0.2s; }
.preset-btn:hover { border-color: #888; color: #fff; }
.preset-btn.active { border-color: var(--accent-green); color: #6fcf97; background: rgba(76,175,125,0.08); }
.section-title { font-size:var(--fs-ui-xs); font-weight:var(--w-bold); color: #aeb2bb; text-transform: uppercase; letter-spacing: 1px; }
.section-title:has(.reset-btn) { display: flex; align-items: center; justify-content: space-between; }

.panel-footer { margin-top: auto; padding-top: 16px; border-top: 1px solid #333; font-size:var(--fs-ui-xs); color: var(--text-disabled); text-align: center; line-height: 1.6; }
.panel-footer a { color: #666; text-decoration: none; }
.panel-footer a:hover { color: #aaa; }
.share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2a2a30; border: 1px solid var(--accent-blue); border-radius: var(--radius-md); padding: 10px 20px; font-size:var(--fs-ui-sm); color: var(--text-main); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; z-index: 1000; }
.share-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.skin-tones { display: flex; gap: 8px; }
.skin-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; }
.skin-btn:hover { border-color: #666; }
.skin-btn.active { border-color: var(--accent-blue); }
/* PBR heads keep their own colour, so the skin-tone row is disabled for them:
   dimmed and not clickable, no other change. Enabled again on a Lumen head. */
#skin-tones.controls-disabled { opacity: 0.4; }
#skin-tones .skin-btn:disabled { cursor: default; }
#skin-tones .skin-btn:disabled:hover { border-color: transparent; }
#skin-tones .skin-btn.active:disabled:hover { border-color: var(--accent-blue); }
.skin-dot { width: 26px; height: 26px; border-radius: 50%; display: block; }

.reset-btn { float: right; min-height: 30px; background: rgba(90,159,212,0.08); border: 1px solid rgba(90,159,212,0.65); border-radius: var(--radius-sm); color: var(--accent-blue-bright); font-family: var(--font-ui); font-size:var(--fs-ui-sm); font-weight:var(--w-semibold); line-height: 1; padding: 0 11px; cursor: pointer; transition: all 0.2s; }
.reset-btn:hover { border-color: var(--accent-blue); color: #d7ecfb; background: rgba(90,159,212,0.16); }


#mobile-fallback {
  display: none;
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 12%, rgba(90,159,212,0.10) 0%, rgba(90,159,212,0) 38%),
    #1b1b20;
  color: var(--text-main);
  padding: 22px 18px 20px;
}
.mobile-fallback-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-top: clamp(18px, 4vh, 34px);
}
.mobile-fallback-brand {
  font-size:var(--fs-ui-title);
  line-height: 1;
  font-weight:var(--w-semibold);
  letter-spacing: -0.03em;
  color: var(--text-strong);
  margin-bottom: 22px;
}
.mobile-fallback-hero {
  padding: 0;
  margin-bottom: 18px;
}
.mobile-fallback-title {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(20px, 5.1vw, var(--fs-card));
  line-height: 1.2;
  font-weight:var(--w-bold);
  letter-spacing: -0.02em;
  color: #ffb25f;
  text-align: left;
  margin: 0 auto 18px;
  text-shadow: 0 0 18px rgba(255, 157, 48, 0.12);
  white-space: nowrap;
}
.mobile-fallback-subtitle {
  font-size:var(--fs-ui-md);
  line-height: 1.45;
  color: var(--text-main);
  margin-bottom: 16px;
}
.mobile-fallback-visual {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid #303038;
  background: #111116;
  margin-bottom: 10px;
  max-height: 170px;
}
.mobile-fallback-visual img {
  display: block;
  width: 100%;
  height: auto;
}
.mobile-fallback-caption {
  font-size:var(--fs-ui-sm);
  line-height: 1.45;
  color: #9ca3ad;
}
.mobile-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
}
.mobile-fallback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height-md);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size:var(--fs-ui-md);
  font-weight:var(--w-medium);
  transition: all 0.2s;
}
.mobile-fallback-btn.primary {
  background: transparent;
  border: 1px solid #4c89af;
  color: #8ec2eb;
}
.mobile-fallback-btn.primary:hover { background: #24303a; border-color: #7db8e6; color: var(--accent-blue-bright); }
.mobile-fallback-btn.secondary {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}
.mobile-fallback-btn.secondary:hover {
  border-color: #555865;
  background: #24242a;
  color: #fff;
}
.mobile-fallback-footer { display: none; }

/* No size-based wall: only a real phone gets the simple page, and that is
   switched on in code, not by how wide the window happens to be. */

body.mobile-blocked {
  display: block;
  height: auto;
  overflow: auto;
}
body.mobile-blocked #left-panel,
body.mobile-blocked #viewport,
body.mobile-blocked #setup-panel,
body.mobile-blocked #panel,
body.mobile-blocked #print-modal,
body.mobile-blocked #comparison-export-modal,
body.mobile-blocked #setup-compare-overlay,
body.mobile-blocked .share-toast {
  display: none !important;
}
body.mobile-blocked #mobile-fallback {
  display: block;
}

@media (max-width: 768px) {
  body { flex-direction: column; }
  #viewport { flex: 0 0 50vh; width: 100%; max-width: none; height: 50vh; }
  #panel { flex: 0 0 50vh; width: 100%; min-width: 0; max-width: none; height: 50vh; }
}

/* Tablets held upright. The head sits on top and the controls underneath, but
   in two columns instead of one full-width stack: the basics on the left, the
   lights on the right. That keeps the sliders a sane width and halves how far
   you have to scroll. */
@media (max-width: 1024px) and (orientation: portrait) {
  body { flex-direction: column; }
  #viewport { flex: 0 0 50vh; width: 100%; max-width: none; height: 50vh; }
  #panel {
    flex: 0 0 50vh; width: 100%; min-width: 0; max-width: none; height: 50vh;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start; gap: 0 26px; padding: 18px 26px;
  }
  #panel > .panel-col { min-width: 0; }
  #panel > .panel-footer { grid-column: 1 / -1; }
  /* Advanced Mode lays the project panel over the left edge of the screen. On
     a narrow screen that would cover the left column, so there the controls
     step aside into one column next to it. */
  body.advanced #panel { grid-template-columns: minmax(0, 1fr); padding-left: 276px; }
}

#view-toggle {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: none; gap: 3px; background: #25252b; border: 1px solid #383840; border-radius: 6px; padding: 2px;
}
body.advanced #view-toggle { left: calc(50% + 125px); }
.view-btn {
  padding: 7px 20px; border: none; border-radius: 4px; background: transparent;
  color: var(--text-muted); font-family: var(--font-ui); font-size:var(--fs-ui-base); font-weight:var(--w-semibold); cursor: pointer; transition: all 0.2s;
}
.view-btn.active { background: var(--accent-blue); color: #fff; }
.view-btn:hover { color: #d5d8de; }
#toolbar-actions {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  display: flex; gap: 8px; align-items: center;
}
@media (max-width: 2160px) {
  body.advanced #toolbar-actions .toolbar-nav-link {
    display: none;
  }
}
/* The links stay in the top bar down to tablet-sideways width, which is where
   they start to run into the name card. Below that they hand over to the small
   stacked links under the name. */
@media (max-width: 1280px) {
  #toolbar-actions .toolbar-nav-link {
    display: none;
  }
}
/* The account button stays in the top bar at every width. */
@media (max-width: 1280px) {
  body.advanced #toolbar-actions .advanced-only {
    display: none !important;
  }
}
@media (max-width: 1180px) {
  body.advanced #toolbar-brand {
    display: none;
  }
}
@media (max-width: 1080px) {
  body.advanced #toolbar-actions {
    display: none;
  }
}
@media (max-width: 980px) {
  #toolbar-actions {
    right: 8px;
    gap: 6px;
  }
  #toolbar-actions .toolbar-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 1120px) {
  body.advanced #toolbar-actions {
    gap: 6px;
  }
  body.advanced #toolbar-actions .toolbar-nav-link,
  body.advanced #toolbar-actions .toolbar-btn {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.toolbar-btn {
  display: flex; align-items: center; gap: 5px;
  height: var(--button-height-md); min-height: var(--button-height-md); padding: 0 16px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: #28282e; color: var(--text-main);
  font-family: var(--font-ui); font-size:var(--fs-ui-md); font-weight:var(--w-medium);
  cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap;
}
.toolbar-btn:hover { border-color: #555865; background: #2d2d34; color: #fff; }
.toolbar-nav-link {
  position: relative; display: flex; align-items: center;
  height: var(--button-height-md); min-height: var(--button-height-md); padding: 0 14px; border: 1px solid #383840; border-radius: var(--radius-sm);
  background: #28282e; color: var(--text-muted);
  font-family: var(--font-ui); font-size:var(--fs-ui-md); font-weight:var(--w-medium);
  text-decoration: none; white-space: nowrap; transition: all 0.2s;
}
.toolbar-nav-link:hover { border-color: #555865; background: #2d2d34; color: #fff; }
.tool-blog-badge {
  position: absolute; top: -7px; right: -7px; display: grid; min-width: 16px; height: 16px; place-items: center;
  padding: 0 4px; border-radius: 999px; background: #E05252; color: #fff; font-size: var(--fs-ui-3xs);
  font-weight: var(--w-bold); line-height: 1; box-shadow: 0 0 0 2px var(--bg);
}
.tool-blog-badge[hidden] { display: none; }
.toolbar-btn-account {
  background: #FFDD00; border-color: #FFDD00; color: #000; font-weight:var(--w-semibold); justify-content: center; width: 92px; flex: 0 0 92px; box-sizing: border-box;
}
.toolbar-btn-account:hover { background: #ffe833; border-color: #ffe833; color: #000; }
#share-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: rgba(30,30,35,0.97); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 6px; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 100;
}
#share-menu.open { display: block; }
.share-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 5px; color: var(--text-main);
  font-family: var(--font-ui); font-size:var(--fs-ui-md);
  cursor: pointer; transition: background 0.15s; text-decoration: none; white-space: nowrap;
  /* Works both as the old <a> and as a real <button>. */
  background: none; border: none; width: 100%; text-align: left;
}
.share-option:hover { background: rgba(255,255,255,0.08); color: #fff; }
.share-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; }
.share-section-title {
  font-size:var(--fs-ui-xs); font-weight:var(--w-semibold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft); padding: 6px 12px 4px;
}

/* Left sidebar */
#left-panel {
  display: none; width: 250px; min-width: 250px; background: #202026; border-right: 1px solid #303038;
  flex-direction: column; overflow-y: auto; flex-shrink: 0;
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 4;
}
body.advanced #left-panel { display: flex; }
/* Project menu */
#project-menu-wrap {
  position: relative; display: none; flex-direction: column; width: 100%; margin: 0;
  border: 0; border-bottom: 1px solid #303038; border-radius: 0;
  background: #202026;
  box-shadow: none; overflow: visible;
  transition: background 0.15s;
}
body.advanced #project-menu-wrap { display: flex; }
#project-menu-wrap:hover,
#project-menu-wrap.open {
  background: #222227;
}
.project-menu-bar {
  display: flex; align-items: flex-start; gap: 8px; padding: 14px 16px 12px;
}
#project-menu-toggle {
  flex: 1; border: none; background: transparent; color: #fff4cf; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-ui); text-align: left;
}
.project-menu-toggle-copy {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.project-menu-toggle-title {
  font-size:var(--fs-ui-lg); font-weight:var(--w-semibold); letter-spacing: -0.015em; line-height: 1.12; color: #f2d778;
}
.project-menu-toggle-sub {
  max-width: 176px; font-size:var(--fs-ui-xs); color: #a99f82;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.project-menu-toggle-caret {
  flex-shrink: 0; color: #cbb26e; transition: transform 0.15s ease;
}
#project-menu-wrap.open .project-menu-toggle-caret { transform: rotate(180deg); }
#project-menu {
  display: none; position: static; width: 100%;
  padding: 0 16px 16px; border-top: 0;
}
#project-menu-wrap.open #project-menu { display: block; }
.project-menu-status {
  min-height: 0; margin-bottom: 10px; font-size:var(--fs-ui-xs); line-height: 1.35;
  color: #a99f82;
}
.project-menu-actions { display: flex; flex-direction: column; gap: 8px; }
.project-menu-btn {
  width: 100%; margin: 0; min-height: var(--button-height-sm); padding: 0 10px; border-radius: var(--radius-md);
  border: 1px solid #44444c; background: transparent; color: #ddd6c8;
  font-family: var(--font-ui); font-size:var(--fs-ui-sm); font-weight:var(--w-semibold); letter-spacing: 0; cursor: pointer;
  text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.project-menu-btn:hover {
  background: #29292f; border-color: #66666f; color: #fff;
}
.project-menu-btn-primary {
  background: var(--accent-amber); border-color: var(--accent-amber); color: #1b1b1f; font-weight:var(--w-semibold);
}
.project-menu-btn-primary:hover {
  background: #ffd157; border-color: #ffd157; color: #141418;
}
.lp-header {
  padding: 16px 16px 12px; border-top: 0; border-bottom: 1px solid #303038;
  font-size:var(--fs-ui-xs); font-weight:var(--w-bold); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-main);
}
.state-slot {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s, border-color 0.15s;
}
.state-slot:hover { background: #25252b; border-top-color: rgba(255,255,255,0.08); }
.state-slot:first-child { border-top: none; }
.state-slot.empty { cursor: pointer; }
.state-slot.empty:hover { background: #232a26; }
.state-slot:focus-visible {
  outline: 1px solid #C2A46A;
  outline-offset: 2px;
  border-radius: 3px;
}
.state-slot-media {
  position: relative;
}
.state-thumb {
  width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-sm);
  background: var(--bg); object-fit: cover; display: block;
  border: 1px solid #34343c;
}
.state-thumb-empty {
  width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-sm);
  background: #202026; border: 1px dashed #444852;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; font-size:var(--fs-ui-md); color: var(--text-muted);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.state-slot.empty:hover .state-thumb-empty {
  border-color: #4caf7d; color: #6fcf97; background: #202a24;
}
.state-empty-plus {
  color: #6fcf97; font-size:var(--fs-ui-title); line-height: 1; font-weight:var(--w-medium);
}
.state-empty-label {
  color: inherit; font-size:var(--fs-ui-sm); font-weight:var(--w-semibold);
}
.state-pattern-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  max-width: calc(100% - 12px);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(6,8,12,0.74);
  color: #eef2f8;
  font-size:var(--fs-ui-2xs);
  font-weight:var(--w-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.state-meta { display: flex; align-items: center; gap: 6px; }
.state-name {
  font-size:var(--fs-ui-md); font-weight:var(--w-semibold); color: var(--text-main);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.state-time { font-size:var(--fs-ui-sm); color: var(--text-main); flex-shrink: 0; }
.state-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.state-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.state-slot:hover .state-icon-btn { color: #fff; }
.state-icon-btn:hover { background: rgba(255,255,255,0.05); }
.state-icon-btn-note.is-active,
.state-icon-btn-note:hover { color: var(--accent-blue); }
.state-icon-btn-delete:hover { color: #ef5350; }
.state-name-input {
  width: 100%;
  padding: 0 2px;
  border: none;
  border-bottom: 1px solid var(--accent-blue);
  background: var(--bg);
  color: var(--text-main);
  outline: none;
  font-family: var(--font-ui);
  font-size:var(--fs-ui-xs);
  font-weight:var(--w-medium);
}
.state-note-preview {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size:var(--fs-ui-sm); color: var(--text-main); line-height: 1.45;
}
.state-export-btn {
  display: block; width: calc(100% - 24px); margin: 0 12px 10px;
  min-height: var(--button-height-md); padding: 0 10px; background: #202026; border: 1px solid #4c89af;
  border-radius: var(--radius-sm); color: #8ec2eb; font-family: var(--font-ui);
  font-size:var(--fs-ui-md); font-weight:var(--w-medium); cursor: pointer; transition: all 0.2s; text-align: center;
}
.state-export-btn:hover { background: #24303a; border-color: #7db8e6; color: var(--accent-blue-bright); }
.lp-tip {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size:var(--fs-ui-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

#setup-compare-overlay {
  display: none; position: fixed; inset: 0; z-index: 204;
  background: rgba(0,0,0,0.72); align-items: center; justify-content: center;
  padding: 6px; font-family: var(--font-ui);
}
body.advanced #setup-compare-overlay {
  left: 250px;
  right: 390px;
}
#setup-compare-overlay.open { display: flex; }
.setup-compare-modal {
  position: relative; width: 100%; height: calc(100% - 12px); overflow: hidden;
  background: rgba(25,25,30,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  box-shadow: 0 28px 80px rgba(0,0,0,0.72);
  display: flex; flex-direction: column;
}
.setup-compare-header {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 34px; padding: 6px 18px 2px; border-bottom: none;
}
.setup-compare-title { font-size:var(--fs-ui-title); font-weight:var(--w-semibold); color: var(--text-strong); margin: 0; }
.setup-compare-close {
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04);
  color: var(--text-main); border-radius: var(--radius-sm); padding: 0 12px; min-height: var(--button-height-sm); font-family: var(--font-ui);
  font-size:var(--fs-ui-md); font-weight:var(--w-medium); cursor: pointer; flex-shrink: 0;
}
.setup-compare-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.setup-compare-body {
  flex: 1; min-height: 0; padding: 4px 18px 58px; overflow: hidden;
  display: flex; flex-direction: column;
}
.setup-compare-picker {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; color: var(--text-muted); font-size:var(--fs-ui-sm);
}
.setup-compare-picker.open { display: flex; }
.setup-compare-picker-label { margin-right: 4px; }
.setup-compare-choice {
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
  color: var(--text-main); border-radius: var(--radius-sm); padding: 5px 10px; font-family: var(--font-ui);
  font-size:var(--fs-ui-xs); font-weight:var(--w-semibold); cursor: pointer;
}
.setup-compare-choice.active {
  border-color: rgba(90,159,212,0.72); background: rgba(90,159,212,0.18); color: #dcefff;
}
.setup-compare-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px; min-height: 0; flex: 1;
}
.setup-compare-grid.compare-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
}
.setup-compare-grid.compare-count-3,
.setup-compare-grid.compare-count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.setup-compare-grid.compare-count-4 {
  gap: 8px 10px;
}
.setup-compare-card {
  min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.setup-compare-thumb {
  width: 100%; flex: 1 1 auto; min-height: 0; height: auto; object-fit: cover; display: block;
  background: #08080a; border-radius: var(--radius-lg);
}
/* The picture saved with the setup, shown because its head could not be put in
   the scene. A quiet line on the picture says so, so nobody takes it for a
   fresh comparison. */
.setup-compare-media { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.setup-compare-media .setup-compare-thumb { width: 100%; height: 100%; }
.setup-compare-saved-note {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px; border-radius: var(--radius-sm, 6px);
  background: rgba(8,8,10,0.72); color: #cfd2d9; font-size:var(--fs-ui-xs); line-height: 1.3;
}

/* A setup whose head could not be loaded has no picture. The card keeps its
   size and says what happened, instead of showing an empty frame. */
.setup-compare-thumb-missing {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 20px; font-size:var(--fs-ui-sm); line-height: 1.5; color: #9a9aa4;
  border: 1px dashed #33343d;
}
.setup-compare-grid.compare-count-2 .setup-compare-thumb,
.setup-compare-grid.compare-count-2 .setup-compare-media {
  aspect-ratio: 5 / 4;
}
.setup-compare-grid.compare-count-3 .setup-compare-thumb,
.setup-compare-grid.compare-count-4 .setup-compare-thumb,
.setup-compare-grid.compare-count-3 .setup-compare-media,
.setup-compare-grid.compare-count-4 .setup-compare-media {
  aspect-ratio: 16 / 10;
}
.setup-compare-meta {
  flex: 0 0 auto;
  display: grid;
  gap: 4px;
  padding: 8px 2px 0;
}
.setup-compare-topline {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.setup-compare-name {
  font-size:var(--fs-ui-md); font-weight:var(--w-semibold); color: var(--text-strong); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.setup-compare-grid.compare-count-2 .setup-compare-name {
  font-size:var(--fs-ui-lg);
}
.setup-compare-pattern {
  display: inline-flex; max-width: 48%; padding: 2px 7px;
  border-radius: var(--radius-sm); background: var(--accent-blue-soft); color: var(--accent-blue-bright);
  font-size:var(--fs-ui-xs); font-weight:var(--w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.setup-compare-info {
  display: block; color: #afb4bf; font-size:var(--fs-ui-xs); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.setup-compare-caption-dot { color: #6b717d; padding: 0 5px; }
.setup-compare-note {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-soft);
  font-size:var(--fs-ui-xs);
  line-height: 1.35;
}
.setup-compare-footer {
  position: absolute; left: 18px; right: 18px; bottom: 12px;
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  height: 38px;
  padding: 0; border-top: none;
}
.setup-compare-grid.compare-count-4 .setup-compare-meta {
  padding-top: 5px;
}
.setup-compare-grid.compare-count-4 .setup-compare-name {
  font-size:var(--fs-ui-sm);
}
.setup-compare-grid.compare-count-4 .setup-compare-pattern {
  max-width: 44%;
  padding: 2px 6px;
}
.setup-compare-grid.compare-count-4 .setup-compare-info {
  font-size:var(--fs-ui-xs);
  line-height: 1.25;
}
.setup-compare-grid.compare-count-4 .setup-compare-note {
  font-size:var(--fs-ui-xs);
  line-height: 1.25;
}
.setup-compare-export {
  border: none; background: var(--accent-blue); color: #fff; border-radius: var(--radius-sm);
  min-height: var(--button-height-md); padding: 0 14px; font-family: var(--font-ui); font-size:var(--fs-ui-md);
  font-weight:var(--w-semibold); cursor: pointer;
}
.setup-compare-export:hover { background: #6fb0e2; }
.ui-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8,8,12,0.7);
}
.ui-modal-panel {
  width: min(100%, 420px);
  padding: 26px 28px;
  border: 1px solid #4a4b55;
  border-radius: var(--radius-lg);
  background: #26262f;
  box-shadow: 0 20px 56px rgba(0,0,0,0.66);
  font-family: var(--font-ui);
}
.ui-modal-title {
  margin-bottom: 8px;
  font-size:var(--fs-lead);
  font-weight: var(--w-semibold);
  color: var(--text-strong);
}
.ui-modal-copy {
  margin-bottom: 18px;
  font-size:var(--fs-ui-md);
  line-height: 1.6;
  color: var(--text-main);
  font-weight: var(--w-normal);
}
.ui-modal-section-label {
  margin-bottom: 8px;
  font-size:var(--fs-ui-xs);
  font-weight: var(--w-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ui-modal-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ui-modal-choice-grid + .ui-modal-section-label {
  margin-top: 16px;
}
.ui-modal-choice {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid #555;
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size:var(--fs-ui-md);
  font-weight:var(--w-medium);
  cursor: pointer;
}
.ui-modal-choice:hover,
.ui-modal-action-secondary:hover {
  border-color: #737681;
  color: #fff;
}
.ui-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.ui-modal-actions:has(> .ui-modal-action:nth-child(2)) > .ui-modal-action {
  flex: 1 1 0;
  min-width: 0;
}
.ui-modal-action {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size:var(--fs-ui-md);
  cursor: pointer;
}
.ui-modal-action-primary {
  border: none;
  font-weight: var(--w-semibold);
}
.ui-modal-action-secondary {
  border: 1px solid #555;
  background: transparent;
  color: var(--text-main);
  font-weight: var(--w-medium);
}
.ui-modal-dismiss {
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size:var(--fs-ui-md);
  font-weight:var(--w-medium);
  line-height: 1.2;
  cursor: pointer;
}
#credits-modal { z-index: 200; }
.credits-modal-panel { width: min(100%, 700px); }
.credits-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.credits-list li {
  padding: 10px 0;
  border-top: 1px solid #3a3b45;
  font-size:var(--fs-ui-md);
  line-height: 1.5;
  color: var(--text-muted);
  white-space: nowrap;
}
.credits-list li:first-child { border-top: none; }
.credits-model { color: var(--text-main); font-weight:var(--w-semibold); }
.credits-list a { color: var(--gold, #C2A46A); }
/* Heads 02 and up are only in the Studio, so their credits stay hidden on the
   open page. The Studio stylesheet switches them back on. */
.credits-studio { display: none; }

#print-modal {
  z-index: 200;
  background: rgba(8,8,12,0.68);
}
.print-modal-panel {
  width: min(100%, 380px);
  padding: 28px 32px;
  text-align: center;
}
.print-modal-icon {
  margin-bottom: 12px;
  font-size:var(--fs-large-title);
  line-height: 1;
}
.print-modal-title {
  font-size:var(--fs-h3);
}
.print-modal-copy {
  margin-bottom: 24px;
  font-size:var(--fs-ui-md);
}
.print-modal-action {
  flex: 1;
  font-size:var(--fs-ui-md);
}
.print-modal-action-primary {
  background: #e8e8e8;
  color: #111;
}
.print-modal-dismiss {
  margin-top: 16px;
}
#comparison-export-modal {
  z-index: 205;
  background: rgba(8,8,12,0.74);
}
.comparison-export-panel {
  width: min(100%, 420px);
}
.comparison-export-actions {
  margin-top: 20px;
}
.comparison-export-action {
  font-size:var(--fs-ui-md);
}
.comparison-export-action-primary {
  flex: 1;
  background: var(--accent-blue);
  color: #fff;
}
#new-project-modal {
  z-index: 206;
  background: rgba(8,8,12,0.78);
}
.new-project-panel {
  width: min(100%, 480px);
}
.app-notice-panel {
  width: min(100%, 360px);
  text-align: center;
}
.app-notice-actions {
  justify-content: center;
}
.app-notice-action {
  min-width: 128px;
  background: var(--accent-blue);
  color: #fff;
}
.app-copy-panel {
  width: min(100%, 460px);
}
.app-copy-field {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #4f535f;
  border-radius: 8px;
  background: #1d1d24;
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size:var(--fs-ui-sm);
}
.app-copy-actions {
  margin-top: 18px;
}
.app-copy-primary {
  background: var(--accent-blue);
  color: #fff;
}
.new-project-alert {
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border: none;
  color: #f3b07a;
  font-size:var(--fs-ui-md);
  line-height: 1.55;
  font-weight:var(--w-medium);
}
.new-project-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.new-project-action {
  font-size:var(--fs-ui-md);
}
.new-project-action-save {
  background: var(--accent-blue);
  color: #fff;
}
.new-project-action-reset {
  border-color: rgba(224, 76, 76, 0.4);
  color: #ffb0b0;
}
.new-project-action-reset:hover {
  border-color: rgba(224, 76, 76, 0.62);
  color: #ffd0d0;
  background: rgba(224, 76, 76, 0.08);
}
.note-popup {
  position: fixed;
  z-index: 1000;
  width: min(380px, calc(100vw - 28px));
  padding: 18px;
  background: #24242a;
  border: 1px solid #44444c;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0,0,0,0.58);
  font-family: var(--font-ui);
}
.note-popup-title {
  margin-bottom: 12px;
  font-size:var(--fs-ui-lg);
  font-weight:var(--w-semibold);
  color: var(--text-strong);
}
.note-popup-textarea {
  width: 100%;
  height: 260px;
  padding: 12px;
  resize: none;
  outline: none;
  background: var(--bg);
  border: 1px solid #4b4b55;
  border-radius: var(--radius-md);
  color: var(--text-strong);
  font-family: var(--font-ui);
  font-size:var(--fs-ui-md);
  line-height: 1.55;
}
.note-popup-textarea:focus,
.note-popup-textarea:focus-visible {
  outline: none;
  border-color: var(--accent-blue);
}
.note-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.note-popup-btn {
  flex: 1;
  min-height: var(--button-height-md);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size:var(--fs-ui-md);
  cursor: pointer;
}
.note-popup-btn-primary {
  border: 1px solid var(--accent-blue);
  background: var(--accent-blue);
  color: #fff;
  font-weight:var(--w-semibold);
}
.note-popup-btn-secondary {
  border: 1px solid #555865;
  background: transparent;
  color: var(--text-main);
  font-weight:var(--w-medium);
}
.note-popup-btn-secondary:hover {
  border-color: #737681;
  color: #fff;
}
@media (max-width: 900px) {
  .setup-compare-modal { width: 94vw; height: 88vh; }
  .setup-compare-grid,
  .setup-compare-grid.compare-count-2,
  .setup-compare-grid.compare-count-3,
  .setup-compare-grid.compare-count-4 { grid-template-columns: 1fr; grid-template-rows: none; overflow-y: auto; }
  .setup-compare-thumb, .setup-compare-media { height: 300px; flex: none; }
  .setup-compare-info { white-space: normal; }
  .setup-compare-footer { flex-direction: column; align-items: stretch; }
}

/* Shift viewport and setup-panel right when left panel is visible - handled by flex layout */
body.advanced #setup-panel { left: 250px; }
#setup-panel {
  position: absolute; top: 0; left: 0; bottom: 0; right: 390px;
  background: var(--bg); overflow-y: auto;
  padding: 80px 40px 40px;
  font-family: var(--font-ui); z-index: 5;
}
#setup-inner {
  max-width: 1040px;
  margin: 0 auto;
}
.setup-header {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 28px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.setup-header h2 { font-size:var(--fs-subtitle); font-weight:var(--w-semibold); color: #fff; margin: 0; }
.setup-ts { font-size:var(--fs-ui-md); color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.setup-section { margin-bottom: 28px; }
.setup-section-title {
  font-size:var(--fs-ui-sm); font-weight:var(--w-semibold); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.setup-lights-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.setup-light-card {
  background: #242428; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.slc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.slc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.slc-name { font-size:var(--fs-ui-lg); font-weight:var(--w-semibold); color: #fff; }
.slc-status { margin-left: auto; font-size:var(--fs-ui-sm); font-weight:var(--w-semibold); padding: 3px 8px; border-radius: 5px; }
.slc-status.on  { background: rgba(90,159,212,0.2); color: #7ab8e8; }
.slc-status.off { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.slc-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.slc-row:last-child { border-bottom: none; padding-bottom: 0; }
.slc-label { font-size:var(--fs-ui-md); color: var(--text-muted); }
.slc-val { font-size:var(--fs-ui-md); font-weight:var(--w-medium); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.slc-kdesc { color: var(--text-muted); font-size:var(--fs-ui-md); margin-left: 5px; font-weight:var(--w-normal); }
.slc-gel-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.setup-global-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
}
.setup-global-card {
  background: #242428; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 20px 22px;
}
.sgc-label { font-size:var(--fs-ui-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.sgc-val   { font-size:var(--fs-ui-title); font-weight:var(--w-semibold); color: #fff; }
.sgc-sub   { font-size:var(--fs-ui-md); color: var(--text-muted); margin-top: 3px; }
@media (max-width: 768px) {
  #setup-panel { right: 0; padding-top: 70px; }
  .setup-lights-grid { grid-template-columns: repeat(2, 1fr); }
}

#toolbar-brand {
  position: absolute; top: 14px; left: 14px; z-index: 10;
  display: flex; align-items: flex-start; gap: 10px;
  transition: left 0.2s;
}
body.advanced #toolbar-brand { left: 264px; }
#toolbar-brand .brand-card {
  display: flex; flex-direction: column; justify-content: center;
  background: #1f1f24; border: 1px solid #2d2d34; padding: 7px 12px; border-radius: var(--radius-sm);
}
#toolbar-brand .brand-title { font-size:var(--fs-brand); font-weight:var(--w-semibold); color: #e8e5df; letter-spacing: -0.5px; line-height: 1.1; margin: 0; }
#toolbar-brand .brand-sub { font-size:var(--fs-ui-md); color: #a3a6ae; margin-top: 3px; }
#diagram {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg); cursor: default;
}
.advanced-toggle-btn {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-md); border: 1.5px solid #7c4dff;
  background: rgba(124,77,255,0.1); color: #b39dff;
  font-family: var(--font-ui); font-size:var(--fs-ui-base); font-weight:var(--w-semibold);
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.advanced-toggle-btn:hover { background: rgba(124,77,255,0.2); border-color: #9c6fff; color: #d0c0ff; }
.advanced-toggle-btn.active { background: #7c4dff; color: #fff; border-color: #7c4dff; }
.advanced-toggle-btn svg { flex-shrink: 0; }

/* Collapsible cards - only in advanced mode */
.lt-free-light-access #card-1 .light-card-body,
.lt-free-light-access #card-2 .light-card-body,
.lt-free-light-access #card-3 .light-card-body,
.light-card.studio-locked-light .light-card-body,
body.advanced .light-card-body { overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 500px; opacity: 1; }
.lt-free-light-access #card-1 .light-card-body,
.lt-free-light-access #card-2 .light-card-body,
.lt-free-light-access #card-3 .light-card-body,
.light-card.studio-locked-light.collapsed .light-card-body,
body.advanced .light-card.collapsed .light-card-body { max-height: 0; opacity: 0; }
body.preparing-advanced .light-card.collapsed .light-card-body { transition: none !important; }
body.advanced .light-header { cursor: pointer; user-select: none; }
body.advanced .light-card.studio-locked-light .light-header { cursor: default; }
@keyframes advancedReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Advanced-only elements - hidden in simple mode */
/* Value Study card under the four lights. It is a normal light card that
   `advanced-only` shows as a flex box, so it stacks its rows itself. The
   filters live in a zero-size drawing that must not take up any room. */
#value-study-card { flex-direction: column; align-items: stretch; }
/* The name on the left and the switch hard against the right edge, exactly as
   on every light card. The full width is spelled out so the row cannot shrink
   around its own text and squeeze the name onto two lines. */
#value-study-card .light-header { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
#value-study-card .light-name { white-space: nowrap; }
#value-study-card .value-study-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.advanced-only { display: none !important; }
body.advanced .advanced-only { display: flex !important; }
body.advanced .advanced-only-inline { display: inline-flex !important; }
.advanced-only-inline { display: none !important; }

/* Third and fourth light - hidden in simple mode */
#card-2 { display: none; }
.lt-free-light-access #card-2,
#card-2.studio-locked-light { display: block; }
body.advanced #card-2 { display: block; animation: advancedReveal 0.28s ease both; }
#card-3 { display: none; }
.lt-free-light-access #card-3,
#card-3.studio-locked-light { display: block; }
body.advanced #card-3 { display: block; animation: advancedReveal 0.32s ease both; }

/* Gel color picker row */
.gel-row { display: flex; align-items: center; margin-top: 10px; gap: 8px; }
.gel-label { font-size:var(--fs-ui-xs); color: var(--text-muted); width: 65px; flex-shrink: 0; }
.gel-swatches { display: flex; gap: 5px; flex: 1; }
.gel-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color 0.15s; flex-shrink: 0; }
.gel-swatch:hover { border-color: #888; }
.gel-swatch.active { border-color: #fff; }
.gel-swatch.none { background: rgba(255,255,255,0.02); border: 2px solid #666; position: relative; }
.gel-swatch.none::after { content: '\00d7'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size:var(--fs-ui-md); font-weight:var(--w-semibold); line-height: 1; color: #9b9b9b; }

/* Kelvin color dot - advanced only */
.kelvin-dot {
  display: none; width: 16px; height: 16px; border-radius: 50%;
  flex-shrink: 0; margin-left: 6px; border: 1px solid rgba(255,255,255,0.2);
  vertical-align: middle;
}
body.advanced .kelvin-dot { display: inline-block; }

/* Stops readout next to intensity - advanced only */
.ev-display {
  display: none; font-size:var(--fs-ui-xs); color: var(--accent-blue); flex-shrink: 0;
  margin-left: 2px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.advanced .ev-display { display: inline; }
/* Intensity slider exactly as long as the Kelvin slider below it. The row also
   carries the stops readout, so the label and the value column give up a few
   pixels to make room for it without the slider getting shorter. */
body.advanced .control-row:has(.ev-display) { gap: 4px; }
body.advanced .control-row:has(.ev-display) .control-label { flex: 0 0 64px; min-width: 64px; width: 64px; }
body.advanced .control-row:has(.ev-display) .control-value { min-width: 34px; width: 34px; }
body.advanced .control-row:has(.ev-display) .control-slider { flex: 0 0 calc(100% - 166px); }

/* Advanced info panel */
/* The little switch that sits at the bottom of the canvas. Surface uses it on
   the right, Analysis on the left, so there is one switch to maintain and both
   look and behave exactly the same. The label sits above the buttons in small
   text, which keeps the switch narrow. */
.canvas-switch {
  position: absolute; bottom: 18px; z-index: 12;
  display: none; flex-direction: column; align-items: flex-start; gap: 4px;
  font-family: var(--font-ui); font-size:var(--fs-ui-md); line-height: 1.4;
}
.canvas-switch.is-available { display: inline-flex; }
.canvas-switch .ss-label {
  display: inline-flex; align-items: center;
  color: var(--text-main); font-size:var(--fs-ui-sm); font-weight:var(--w-medium); letter-spacing: .06em;
  text-transform: uppercase;
}
.canvas-switch .ss-opts {
  position: relative; display: inline-flex; align-items: stretch;
  height: 34px; box-sizing: border-box; padding: 3px;
  border: 1px solid var(--border-soft, #3a3a42); border-radius: 6px;
  background: #28282e;
}
.canvas-switch .ss-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: 4px; background: #C2A46A;
  transition: transform 0.05s;
}
.canvas-switch.on-second .ss-thumb { transform: translateX(100%); }
.canvas-switch .ss-btn {
  position: relative; z-index: 1; min-width: 92px; padding: 0 16px;
  border: 0; background: none; color: var(--text-main); font-family: inherit;
  font-size:var(--fs-ui-md); font-weight:var(--w-medium); line-height: 1; cursor: pointer;
  transition: color .18s;
}
.canvas-switch .ss-btn:hover { color: #e6e8ec; }
.canvas-switch .ss-btn.active { color: #15161a; font-weight:var(--w-semibold); }

/* Analysis keeps its spot on the right, Surface takes the left. In Advanced
   Mode the saved setups panel covers the left edge of the canvas, so Surface
   steps aside next to it, the same way the view switch does. The Analysis card
   opens against the right edge, so it hangs from that side and stays inside
   the canvas. */
#surface-switch { left: 20px; right: auto; align-items: flex-end; }
body.advanced #surface-switch { left: 270px; }
#analysis-dock {
  /* Analysis belongs to Advanced Mode, so it is simply not there in Basic. */
  position: absolute; right: 20px; left: auto; bottom: 18px; z-index: 12;
  display: none; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
  max-height: calc(100% - 90px);
}
body.advanced #analysis-dock { display: flex; }
#analysis-switch { position: static; display: inline-flex; }
#analysis-switch .ss-btn { min-width: 62px; }
#advanced-info {
  width: 340px; max-width: calc(100vw - 60px);
  box-sizing: border-box; overflow: visible;
  background: #1e1e24; border: 1px solid #333; border-radius: var(--radius-md);
  padding: 8px 12px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
#analysis-dock.open #advanced-info { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
#advanced-info .info-row { padding: 5px 0; }
@media (prefers-reduced-motion: reduce) {
  #advanced-info { transition: none; transform: none; }
}
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #2a2a30; font-size:var(--fs-ui-md); }
.info-row:last-child { border-bottom: none; }
.info-label { color: #888; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }
.info-value { color: var(--text-main); font-weight:var(--w-medium); text-align: right; flex: 1 1 auto; min-width: 0; margin-left: 18px; line-height: 1.45; }
.info-warn { color: var(--accent-amber); }
.info-good { color: #4caf7d; }
.info-tip { position: relative; display: inline-flex; align-items: center; cursor: help; }
.info-tip-icon { width: 18px; height: 18px; border-radius: 50%; background: #333; color: #888; font-size:var(--fs-ui-xs); font-weight:var(--w-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-tip:hover .info-tip-icon { color: var(--text-main); background: #444; }
.info-tip-text { white-space: normal; display: none; position: absolute; left: 0; top: calc(100% + 6px); background: #1a1a22; border: 1px solid #555; border-radius: var(--radius-md); padding: 10px 12px; font-size:var(--fs-ui-md); color: var(--text-main); width: 180px; line-height: 1.5; z-index: 50; pointer-events: none; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.info-tip:hover .info-tip-text { display: block; }
#left-panel .info-tip-text { left: -8px; right: auto; }
/* Inside the Analysis card the balloon hangs from the right edge, so it can
   never push the card wide and make a scrollbar appear. */
#advanced-info .info-tip-text { left: auto; right: 0; width: 240px; }

body.advanced .light-label { cursor: text; }
body.advanced .light-label:hover { color: var(--accent-blue); }
body:not(.advanced) .light-label { cursor: default; }
.light-card.studio-locked-light .light-label,
body.advanced .light-card.studio-locked-light .light-label { cursor: default; }
.light-card.studio-locked-light .light-label:hover,
body.advanced .light-card.studio-locked-light .light-label:hover { color: inherit; }
/* The rename control is a real button, so the keyboard reaches it on its own
   and it is no longer a button nested inside another one. */
.light-edit-btn { display: none; margin-left: 5px; padding: 0; background: none; border: none; color: #888; cursor: pointer; flex-shrink: 0; line-height: 0; transition: color 0.2s; }
body.advanced .light-edit-btn { display: inline-flex; align-items: center; }
.light-edit-icon { display: block; vertical-align: middle; }
.light-name:hover .light-edit-btn { color: var(--accent-blue); }

/* Legacy simulator phone fallback */
html.lt-mobile-blocked body {
  display: block;
  height: auto;
  overflow: auto;
}

html.lt-mobile-blocked #left-panel,
html.lt-mobile-blocked #viewport,
html.lt-mobile-blocked #setup-panel,
html.lt-mobile-blocked #panel,
html.lt-mobile-blocked #print-modal,
html.lt-mobile-blocked #comparison-export-modal,
html.lt-mobile-blocked #setup-compare-overlay,
html.lt-mobile-blocked .share-toast {
  display: none !important;
}

html.lt-mobile-blocked #mobile-fallback {
  display: block;
}

/* Keyboard focus: a clear ring for keyboard users only (mouse appearance is
   unchanged because :focus-visible does not fire on pointer interaction). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.control-slider:focus-visible,
.light-toggle:focus-visible,
.light-edit-btn:focus-visible {
  outline: 1px solid #C2A46A;
  outline-offset: 2px;
  border-radius: 3px;
}

/* The control panel is split into two groups (basics, lights) so a tablet in
   portrait can put them side by side. On every other screen they behave as one
   column, with the same spacing as before. */
#panel > .panel-col { display: flex; flex-direction: column; gap: 14px; }

/* Shorter screens and tablets: keep the head and the canvas controls usable,
   so the readings get their own scroll instead of filling the viewport. */
@media (max-height: 820px) {
  #advanced-info { max-height: calc(100vh - 190px); overflow-y: auto; }
}
@media (max-width: 1024px) and (orientation: portrait) {
  #analysis-dock { right: 14px; left: auto; bottom: 14px; max-height: calc(100% - 70px); }
  body.advanced #surface-switch { left: 264px; }
  #advanced-info { width: 280px; max-height: calc(50vh - 110px); overflow-y: auto; padding: 6px 10px; }
  #advanced-info .info-row { padding: 4px 0; }
}

/* Narrower screens (tablet): the hint line drops the keyboard shortcuts so it
   stays short enough to keep clear of the two switches. It stays where it
   belongs, along the bottom edge of the picture. */
@media (max-width: 1180px) {
  #hint .hint-adv { display: none !important; }
}

/* A download button that has nothing to save (the Setup view is a table, not a
   picture) shows that it is off instead of quietly doing nothing. */
.state-export-btn:disabled { opacity: .45; cursor: default; }

/* Shown for the moment a comparison needs to load the head a setup was saved on. */
.setup-compare-loading { padding: 24px; color: var(--text-muted); font-size:var(--fs-ui-md); }

/* The one-off note next to the Surface switch. Same card look as the Analysis
   panel, with a little tail pointing down at the switch it talks about. It is
   only ever shown on a first visit and takes itself away again. */
.canvas-tip {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 12px;
  width: 280px; max-width: calc(100vw - 60px); box-sizing: border-box;
  background: #1e1e24; border: 1px solid #333; border-radius: var(--radius-md);
  padding: 12px 34px 12px 14px;
  font-family: var(--font-ui); font-size:var(--fs-ui-md); line-height: 1.5;
  color: var(--text-main); text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.canvas-tip.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.canvas-tip strong { display: block; margin-bottom: 4px; color: #e6e8ec; font-weight:var(--w-semibold); }
.canvas-tip::after {
  content: ''; position: absolute; top: 100%; left: 26px;
  border: 7px solid transparent; border-top-color: #1e1e24;
}
.canvas-tip-close {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: none; color: #9aa0aa; cursor: pointer;
  font-family: inherit; font-size:var(--fs-lead); line-height: 1; padding: 2px 4px;
}
.canvas-tip-close:hover { color: #e6e8ec; }
@media (prefers-reduced-motion: reduce) {
  .canvas-tip { transition: none; }
}

/* THE BOTTOM ROW ON A NARROW SCREEN
   On a smaller tablet the name card, the 3D/Diagram switch and Share all want
   the same strip along the top, so they end up on top of one another. There the
   view switch and Share drop down to one row along the bottom of the picture,
   together with the Surface and Analysis switches, just above the hint line.
   The row is only used when the tool asks for it (body.bottom-row), so nothing
   moves on a normal screen. */
#canvas-bottom-row {
  position: absolute; left: 20px; right: 20px; bottom: 62px; z-index: 12;
  display: none; align-items: flex-end; justify-content: space-between; gap: 10px;
  pointer-events: none;
}
body.advanced #canvas-bottom-row { left: 270px; }
body.bottom-row #canvas-bottom-row { display: flex; }
body.bottom-row #view-toggle { top: 64px; left: 50%; transform: translateX(-50%); }
body.bottom-row #surface-switch { bottom: 62px; }
#canvas-bottom-row .cbr-left,
#canvas-bottom-row .cbr-right { display: flex; align-items: flex-end; gap: 10px; }
#canvas-bottom-row .cbr-right { margin-left: auto; }
#canvas-bottom-row > * > * { pointer-events: auto; }
/* Everything in the row sits in the row itself, instead of hanging from its own
   corner of the picture. */
#canvas-bottom-row #view-toggle,
#canvas-bottom-row .canvas-switch,
#canvas-bottom-row #analysis-dock {
  position: static !important; transform: none; bottom: auto; left: auto; right: auto; top: auto;
}
/* The readings still open upwards from the switch, and never taller than the
   picture they sit in. Closed, the card hangs above the row instead of sitting
   in it, otherwise it would quietly hold the whole row open and push the
   switches up into the middle of the face. */
#canvas-bottom-row #analysis-dock { position: relative !important; max-height: none; }
#canvas-bottom-row #advanced-info {
  position: absolute; bottom: 100%; right: 0; margin-bottom: 10px;
  max-height: calc(100vh - 190px); overflow-y: auto;
}

@media (min-width: 1025px) {
  body.advanced #left-panel {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    flex: 0 0 250px;
  }
  body.advanced #hint,
  body.advanced #view-toggle {
    left: 50%;
  }
  body.advanced #site-links,
  body.advanced #surface-switch {
    left: 20px;
  }
  body.advanced #canvas-bottom-row {
    left: 20px;
  }
}

/* Reduced motion: switch off the decorative movement (the card reveal, the
   sliding switch thumbs and the button lift), while leaving layout untouched. */
@media (prefers-reduced-motion: reduce) {
  body.advanced #card-2,
  body.advanced #card-3 { animation: none; }
  .light-toggle::after,
  .canvas-switch .ss-thumb { transition: none; }
}