:root {
  --panel: #0d120f;
  --panel-2: #121914;
  --panel-3: #17201a;
  --line: #253229;
  --line-strong: #344a3b;
  --muted: #8e9b92;
  --muted-2: #65736a;
  --accent: #70e59a;
  --accent-soft: #b8f7cc;
  --accent-dim: rgba(112,229,154,.12);
}

body {
  background:
    radial-gradient(circle at 18% -5%, rgba(74,168,105,.12), transparent 30rem),
    radial-gradient(circle at 90% 18%, rgba(65,122,84,.05), transparent 24rem),
    linear-gradient(180deg,#090d0a,#070a08 55%);
}

.app { width:min(1240px,calc(100% - 20px)); padding-top:10px; }

.topbar {
  min-height:52px;
  align-items:center;
  margin-bottom:8px;
  padding:0;
}
.topbar h1 {
  font-size:clamp(1.18rem,4vw,1.72rem);
  letter-spacing:.1em;
}
.topbar h1::before {
  content:"Z̴";
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  margin-right:10px;
  border:1px solid rgba(112,229,154,.25);
  border-radius:11px;
  background:var(--accent-dim);
  color:var(--accent-soft);
  font-size:1.2rem;
  letter-spacing:0;
  vertical-align:middle;
}
.top-actions { gap:7px; }

.panel {
  border-color:var(--line);
  background:rgba(13,18,15,.95);
  box-shadow:0 18px 50px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.018);
}

.source-panel {
  padding:12px !important;
}
.source-panel .field {
  position:relative;
  margin:0;
}
.source-panel .field > span {
  font-size:.73rem;
  font-weight:760;
  letter-spacing:.095em;
  font-variant:all-small-caps;
}
.source-count {
  position:absolute;
  right:2px;
  top:1px;
  color:var(--muted-2);
  font-size:.68rem;
  font-variant-numeric:tabular-nums;
}
.source-panel textarea {
  min-height:92px;
  font-size:1rem;
  border-radius:11px;
  background:var(--panel-2);
}

/* Real multi-control profiles */
.style-profiles { margin-top:13px; }
.profiles-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin:0 3px 7px;
}
.profiles-title {
  color:var(--muted);
  font-size:.73rem;
  font-weight:780;
  letter-spacing:.1em;
  font-variant:all-small-caps;
}
.profiles-summary {
  margin-top:1px;
  color:var(--muted-2);
  font-size:.7rem;
}
.profiles-hint {
  color:var(--muted-2);
  font-size:.65rem;
  letter-spacing:.06em;
  font-variant:all-small-caps;
}
.profile-rail {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(132px,1fr);
  gap:7px;
  overflow-x:auto;
  padding:1px 1px 7px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.profile-rail::-webkit-scrollbar { display:none; }
.style-profile {
  scroll-snap-align:start;
  min-height:78px;
  display:grid;
  grid-template-columns:31px 1fr;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(20,27,22,.96),rgba(13,18,15,.96));
  color:var(--text);
  text-align:left;
  transition:border-color .14s ease,background .14s ease,transform .1s ease;
}
.style-profile:active { transform:scale(.98); }
.style-profile.active {
  border-color:rgba(112,229,154,.48);
  background:
    radial-gradient(circle at 8% 20%,rgba(112,229,154,.13),transparent 58%),
    linear-gradient(145deg,rgba(23,32,26,.98),rgba(13,18,15,.98));
  box-shadow:inset 0 0 0 1px rgba(112,229,154,.06);
}
.style-profile:disabled { opacity:.46; }
.style-profile-icon {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:var(--accent-soft);
  font-size:1.05rem;
}
.style-profile-copy {
  min-width:0;
  display:grid;
  gap:2px;
}
.style-profile-copy b {
  font-size:.76rem;
  letter-spacing:.065em;
  font-variant:all-small-caps;
}
.style-profile-copy small {
  overflow:hidden;
  color:var(--muted-2);
  font-size:.63rem;
  line-height:1.2;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* Actual tabs instead of one very long accordion. */
.workspace { gap:12px; margin-top:4px; }
.controls {
  padding:0 10px 10px;
  overflow:hidden;
}
.control-tabs {
  position:sticky;
  top:0;
  z-index:9;
  display:flex;
  gap:3px;
  margin:0 -10px 7px;
  padding:7px;
  border-bottom:1px solid var(--line);
  background:rgba(13,18,15,.985);
  border-radius:18px 18px 0 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.control-tabs::-webkit-scrollbar { display:none; }
.control-tab {
  flex:1 0 auto;
  min-height:35px;
  padding:0 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:.71rem;
  font-weight:760;
  letter-spacing:.07em;
  font-variant:all-small-caps;
}
.control-tab.active {
  background:var(--accent-dim);
  color:var(--accent-soft);
}
.controls.ui-tabs-ready > details { display:none; }
.controls.ui-tabs-ready > details.ui-active {
  display:block;
  margin:7px 0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(18,25,20,.56);
}
.controls.ui-tabs-ready > details.ui-active + details.ui-active { margin-top:7px; }
.controls.ui-tabs-ready > details > summary { display:none; }

.field,.range-field { margin:9px 0; gap:6px; }
.field>span,.range-field>span,.mini-label {
  color:var(--muted);
  font-size:.78rem;
}
textarea,select,input[type="number"],input[type="text"] {
  min-height:41px;
  border-radius:10px;
  border-color:var(--line);
  background:var(--panel-2);
}
textarea:focus,select:focus,input[type="number"]:focus,input[type="text"]:focus {
  background:var(--panel-3);
  border-color:rgba(112,229,154,.58);
  box-shadow:0 0 0 3px rgba(112,229,154,.06);
}

/* Value-aware range tracks. */
input[type="range"] { --pct:50%; height:25px; }
input[type="range"]::-webkit-slider-runnable-track {
  height:9px;
  border-color:var(--line);
  background:linear-gradient(90deg,var(--accent) 0 var(--pct),var(--panel-3) var(--pct) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  width:19px;
  height:19px;
  margin-top:-6px;
  border-radius:7px;
}
input[type="range"]::-moz-range-track {
  height:9px;
  background:var(--panel-3);
}
input[type="range"]::-moz-range-progress {
  height:9px;
  border-radius:999px;
  background:var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width:19px;
  height:19px;
  border-radius:7px;
}
.check-row {
  min-height:35px;
  gap:9px;
  font-size:.8rem;
}
.check-row input {
  width:18px;
  height:18px;
}
.note { color:var(--muted-2); font-size:.72rem; }

/* Buttons and output become materially denser. */
.button {
  min-height:38px;
  padding:0 12px;
  border-radius:10px;
}
.output-panel { padding:11px; }
.output-head {
  align-items:center;
  margin-bottom:7px;
}
.live-title {
  display:flex;
  align-items:center;
  gap:7px;
}
.live-dot {
  width:7px;
  height:7px;
  border-radius:3px;
  background:var(--accent);
  box-shadow:0 0 12px rgba(112,229,154,.55);
}
.section-title {
  font-size:.78rem;
  letter-spacing:.11em;
}
.stats {
  margin-top:2px;
  color:var(--muted-2);
  font-size:.68rem;
}
.preview {
  min-height:250px;
  border-radius:13px;
  padding:27px 16px;
  background:
    radial-gradient(circle at center,rgba(112,229,154,.025),transparent 55%),
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
    #080c09;
  background-size:auto,24px 24px,24px 24px,auto;
}
.preview-zoom {
  top:6px;
  right:6px;
  gap:2px;
  padding:3px;
  border-radius:9px;
  background:rgba(8,12,9,.9);
  backdrop-filter:blur(10px);
}
.zoom-button,.zoom-value {
  height:28px;
  border-radius:7px;
}
.zoom-button { width:29px; }
.zoom-value {
  min-width:43px;
  font-size:.65rem;
}
.fit-button {
  min-width:34px;
  color:var(--accent-soft);
}
.density-wrap { margin:8px 0; }
.density-graph { height:38px; border-radius:8px; }
#rawOutput { min-height:115px; }

@media (min-width:900px) {
  .controls {
    max-height:calc(100dvh - 20px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
}

@media (max-width:800px) {
  .app {
    width:min(100% - 12px,760px);
    padding-top:7px;
  }
  .topbar {
    min-height:44px;
    display:flex;
  }
  .topbar h1 { font-size:1.16rem; }
  .topbar h1::before {
    width:32px;
    height:32px;
    margin-right:7px;
    border-radius:9px;
    font-size:1rem;
  }
  .top-actions .button {
    min-height:34px;
    padding-inline:9px;
  }

  .source-panel { margin-top:4px; }
  .source-panel textarea { min-height:76px; }

  .style-profiles { margin-top:9px; }
  .profiles-summary {
    max-width:68vw;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
  .profiles-hint { display:none; }
  .profile-rail {
    grid-auto-columns:118px;
    margin-right:-6px;
    gap:6px;
  }
  .style-profile {
    min-height:69px;
    grid-template-columns:27px 1fr;
    gap:7px;
    padding:8px;
    border-radius:12px;
  }
  .style-profile-icon {
    width:27px;
    height:27px;
    border-radius:8px;
    font-size:.92rem;
  }
  .style-profile-copy b { font-size:.71rem; }
  .style-profile-copy small { font-size:.59rem; }

  .workspace { margin-top:1px; }
  .controls {
    margin-top:7px;
    padding-bottom:calc(var(--dock-height) + 18px + env(safe-area-inset-bottom));
  }
  .control-tabs {
    margin-inline:-10px;
    padding:6px;
  }
  .control-tab {
    min-height:33px;
    padding-inline:8px;
  }

  .output-panel.fixed {
    left:6px;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    border-color:var(--line-strong);
    box-shadow:0 18px 58px rgba(0,0,0,.76);
    backdrop-filter:blur(14px);
  }
  .output-panel.fixed .preview {
    height:calc(var(--dock-height) - 70px);
    padding:10px 7px;
  }
  .output-panel.fixed.show-density .preview {
    height:calc(var(--dock-height) - 112px);
  }
  .output-panel.fixed.compact {
    height:90px;
    max-height:90px;
  }
  .output-panel.fixed.compact .preview {
    height:37px;
    padding:1px 5px;
    font-size:min(21px,var(--preview-font-size,38px)) !important;
    line-height:1.3 !important;
  }
  .output-panel.fixed.compact .preview-zoom { display:none; }

  .zoom-button,.zoom-value { height:26px; }
  .zoom-button { width:27px; }
  .zoom-value { min-width:39px; font-size:.61rem; }
}

@media (max-width:470px) {
  .topbar h1::before { display:none; }
  .profile-rail { grid-auto-columns:112px; }
  .output-actions { gap:4px; }
  .output-actions .button {
    min-height:34px;
    padding-inline:8px;
  }
  .output-actions .icon-button {
    width:34px;
    min-height:34px;
    padding:0;
  }
}