:root {
  color-scheme: dark;
  --bg: #060b0f;
  --panel: #111a20;
  --panel-hi: #182229;
  --panel-lo: #0b1217;
  --line: #34414a;
  --line-soft: rgba(138, 157, 170, .16);
  --text: #e6e9ec;
  --muted: #9da7ae;
  --blue: #2595ff;
  --blue-hi: #73bcff;
  --blue-deep: #0a3975;
  --danger: #ff4949;
  --radius: 7px;
  --shadow: 0 18px 54px rgba(0, 0, 0, .42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* skryté panely tabov nesmú zaberať miesto ani pri vlastnom display */
html { min-width: 320px; background: #030608; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 50% -30%, #20303a 0, #070d11 43%, #020406 100%); }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.noise { position: fixed; inset: 0; opacity: .055; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.synth { width: min(1800px, calc(100% - 16px)); min-height: calc(100vh - 16px); margin: 8px auto; border: 1px solid #131f26; border-radius: 13px; overflow: hidden; overflow: clip; background: #081015; box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.04); }   /* clip: zaoblené rohy bez vlastného scrollu → hlavička môže byť sticky */
.topbar { min-height: 84px; display: flex; align-items: center; gap: 22px; padding: 12px 20px; border-bottom: 1px solid #19262e; background: linear-gradient(180deg, #0d151a, #080e12); }
.brand { width: 128px; color: white; text-decoration: none; line-height: 1; letter-spacing: .1em; }
.brand__name { display: block; font-size: 38px; font-weight: 300; letter-spacing: .08em; }
.brand__sub { display: block; margin-top: 7px; font-size: 12px; font-weight: 650; letter-spacing: .48em; }
.icon-button { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-content: center; gap: 5px; border: 1px solid #2a353d; border-radius: 8px; background: linear-gradient(#121b20, #0a1014); box-shadow: inset 0 1px rgba(255,255,255,.03), 0 3px 8px #0008; }
.icon-button:hover { border-color: #4b5b65; background: #152129; }
.menu-button span { width: 22px; height: 2px; border-radius: 2px; background: #dce1e4; }
.icon-button .icon { width: 24px; height: 24px; color: #dce1e4; }
.preset-browser { width: min(420px, 36vw); height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) 40px 40px; align-items: center; padding: 0 7px 0 6px; border: 1px solid #2b373f; border-radius: 7px; background: #0a1115; box-shadow: inset 0 1px rgba(255,255,255,.02); }
.preset-browser__folder { width: 20px; height: 20px; flex: 0 0 auto; color: #c7ced2; }
.preset-browser__name, .preset-step { height: 38px; border: 0; background: transparent; }
.preset-browser__name { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 5px; text-align: left; }
.preset-browser__name:hover { background: #111b21; }
.preset-browser__name:hover .preset-browser__folder { color: var(--blue-hi); }
.preset-browser__label { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.preset-browser__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-browser__bank { min-width: 0; color: #74828b; font-size: 10px; letter-spacing: .03em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* banka · kategória */
.preset-browser__bank:empty { display: none; }
.preset-browser__text.is-dirty::after { content: " •"; color: var(--blue-hi); }
.preset-step { color: #bcc5ca; font-size: 30px; line-height: 1; }
.preset-step:hover { color: var(--blue-hi); }
.topbar__spacer { flex: 1; }
/* hlavička ostáva hore, scrolluje sa len obsah pod ňou (nie na nízkych displejoch — mobil na šírku — tam by zaberala priveľa miesta);
   pod šumovou textúrou (.noise, z-index 10), nad klávesami (z-index 2); scroll-padding: fokus / scrollIntoView neskončí pod hlavičkou */
@media (min-height: 520px) {
  .topbar { position: sticky; top: 0; z-index: 5; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
  html { scroll-padding-top: 100px; }
}
@media (min-height: 520px) and (max-width: 980px) {
  html { scroll-padding-top: 150px; }   /* hlavička na dva riadky */
}
.utility-button { height: 30px; padding: 0 10px; border: 1px solid #2f3d46; border-radius: 5px; background: #0a1115; color: #aeb7bd; font-size: 11px; letter-spacing: .12em; }
.utility-button:hover { color: var(--blue-hi); border-color: var(--blue); }
.rnd-group { display: flex; align-items: center; gap: 8px; }
/* EFFECTS: prepínač obsahu racku (stlačený = efekty); LED = zapnutý aspoň jeden efekt */
.fx-button { height: 52px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px 0 13px; border: 1px solid #2a353d; border-radius: 8px; background: linear-gradient(#121b20, #0a1014); color: #c7ced2; font-size: 12px; letter-spacing: .14em; box-shadow: inset 0 1px rgba(255,255,255,.03), 0 3px 8px #0008; }
.fx-button:hover { border-color: #4b5b65; background: #152129; color: #e6ebee; }
.fx-button[aria-pressed="true"] { color: #dcefff; border-color: var(--blue); background: linear-gradient(180deg, #1767b7, #0b326b); box-shadow: inset 0 1px #4ca9ff, inset 0 -8px 18px rgba(0,0,0,.2), 0 0 16px rgba(27,127,255,.18); }
.fx-button__led { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #313c43; box-shadow: inset 0 1px 1px #000; transition: background .2s, box-shadow .2s; }
.fx-button.has-fx .fx-button__led { background: #46d06a; box-shadow: 0 0 7px #2ee06a; }
.fx-button__short { display: none; }
.rnd-amount { min-width: 0; }
.rnd-amount .knob { --size: 30px; --scale-size: 40px; grid-template-columns: var(--scale-size) auto; grid-template-areas: "stage label" "stage value"; justify-items: start; align-items: center; column-gap: 6px; row-gap: 1px; }
.rnd-amount .knob__stage { grid-area: stage; }
.rnd-amount .knob__label { grid-area: label; align-self: end; min-height: 0; color: #8d99a1; font-size: 10px; letter-spacing: .12em; }
.rnd-amount .knob__value { grid-area: value; align-self: start; min-width: 4ch; font-size: 11px; }
.cpu { min-width: 160px; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 22px 6px; align-items: center; column-gap: 9px; color: #bac2c7; font-size: 12px; }
.cpu__dial { grid-row: 1 / span 2; width: 25px; aspect-ratio: 1; border: 3px solid #879098; border-bottom-color: transparent; border-radius: 50%; transform: rotate(35deg); }
.cpu__bar { height: 5px; overflow: hidden; border-radius: 5px; background: #182128; }
.cpu__bar i { display: block; width: 38%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0876dc, #40aeff); box-shadow: 0 0 8px var(--blue); transition: width .3s; }

.rack-grid { display: grid; grid-template-columns: minmax(390px, 1.05fr) minmax(300px, .82fr) minmax(420px, 1.2fr) 180px; grid-template-areas: "osc mixer filter filter" "env env master output" "lfo matrix matrix output"; gap: 8px; padding: 8px; }
.module { min-width: 0; position: relative; border: 1px solid #34414a; border-radius: var(--radius); background: radial-gradient(circle at 50% 5%, rgba(60,80,92,.15), transparent 45%), linear-gradient(145deg, #151e24, #0f181e); box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -22px 55px rgba(0,0,0,.12), 0 2px 5px #0007; overflow: hidden; }
.module--osc { grid-area: osc; }
.module--mixer { grid-area: mixer; }
.module--filter { grid-area: filter; }
.module--env { grid-area: env; }
.module--master { grid-area: master; }
.module--lfo { grid-area: lfo; }
.module--matrix { grid-area: matrix; }
.module--output { grid-area: output; }
.module--dist { grid-area: dist; }
.module--chorus { grid-area: chorus; }
.module--comb { grid-area: comb; }
.module--formant { grid-area: formant; }
.module--phaser { grid-area: phaser; }
.module--crush { grid-area: crush; }
.module--delay { grid-area: delay; }
.module--reverb { grid-area: reverb; }
/* EFFECTS: ten istý rack — namiesto syntézy osem efektov v poradí signálu (dva rady po štyroch), OUTPUT ostáva */
.rack-grid.is-fx { grid-template-columns: repeat(4, minmax(0, 1fr)) 180px; grid-template-areas: "dist chorus comb formant output" "phaser crush delay reverb output"; }
.module__heading { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid rgba(0,0,0,.7); box-shadow: 0 1px rgba(255,255,255,.045); }
.module__heading h2 { margin: 0; font-size: 17px; font-weight: 450; letter-spacing: .035em; }
.module__icon { width: 24px; height: 24px; flex: 0 0 auto; color: #dbe1e5; stroke-width: 1.4; }
.module__heading--tabs { padding-right: 10px; }
.module__heading--tabs synth-tabs { align-self: stretch; flex: 1; margin-left: 12px; }
.module__heading--center { justify-content: center; }

synth-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: 43px; margin: 0 12px 12px; border: 1px solid #06090b; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 2px #000; }
.module__heading synth-tabs { min-height: 36px; margin: 7px 0 7px 12px; }
.tab { border: 0; border-right: 1px solid #06090b; background: linear-gradient(#182127, #0e1519); color: #c9ced2; font-size: 12px; letter-spacing: .03em; }
.tab:last-child { border-right: 0; }
.tab:hover { background: #192832; }
.tab.is-active { color: #dcefff; background: linear-gradient(180deg, #1767b7, #0b326b); box-shadow: inset 0 1px #4ca9ff, inset 0 -8px 18px rgba(0,0,0,.2), 0 0 16px rgba(27,127,255,.14); }

.control-grid { display: grid; align-items: start; }
.osc-top { grid-template-columns: 1.6fr repeat(3, .7fr); padding: 16px 20px 10px; gap: 12px; }
.osc-bottom { grid-template-columns: repeat(3, 1fr); padding: 12px 24px 24px; row-gap: 18px; }
.osc-bottom synth-knob:last-child { grid-column: 3; }   /* 2. riadok: FM AMOUNT · LEVEL · PAN */
.field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.field__label, .compact-field > span { color: #c7cdd1; font-size: 11px; letter-spacing: .035em; }
select, .compact-field button { width: 100%; height: 38px; appearance: none; padding: 0 26px 0 11px; border: 1px solid #030607; border-radius: 5px; background: linear-gradient(#10181d, #090e11) padding-box, linear-gradient(#38464f, #11181d) border-box; color: var(--blue-hi); box-shadow: 0 1px 1px #000, inset 0 1px rgba(255,255,255,.02); background-image: linear-gradient(#11191e, #090e11); background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%239da7ac' d='M1 1h8L5 6z'/%3E%3C/svg%3E"), linear-gradient(#11191e, #090e11); background-position: calc(100% - 10px) 50%, 0 0; background-size: 10px 7px, 100% 100%; }
.wave-select, .shape-display { width: 100%; min-height: 58px; display: grid; grid-template-columns: 1fr 18px; align-items: center; padding: 6px 10px; border: 1px solid #020405; border-radius: 6px; color: var(--blue); background: linear-gradient(#11191d, #080d10); box-shadow: inset 0 1px #263139; }
.wave-select { position: relative; padding-top: 14px; }
.wave-select small, .shape-display small { position: absolute; top: 5px; left: 10px; font-size: 9px; color: var(--blue-hi); letter-spacing: .04em; }
.wave-select svg { width: 100%; height: 38px; }
.wave-select polyline, .shape-display path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }

synth-knob { min-width: 60px; display: flex; justify-content: center; touch-action: none; user-select: none; }
.knob { --size: 55px; --scale-size: 74px; --angle: 0deg; width: 100%; display: grid; justify-items: center; gap: 5px; color: var(--text); }
.knob[data-size="xs"] { --size: 36px; --scale-size: 49px; }
.knob[data-size="sm"] { --size: 43px; --scale-size: 58px; }
.knob[data-size="lg"] { --size: 69px; --scale-size: 93px; }
.knob[data-size="xl"] { --size: 88px; --scale-size: 119px; }
.knob__label { min-height: 14px; color: #cbd1d5; font-size: 11px; line-height: 1.15; text-align: center; letter-spacing: .035em; white-space: nowrap; }
.knob__stage { width: var(--scale-size); height: var(--scale-size); display: grid; place-items: center; position: relative; }
.knob__scale { width: var(--scale-size); height: var(--scale-size); position: absolute; overflow: visible; pointer-events: none; }
.knob__track, .knob__value-arc, .knob__tick { fill: none; vector-effect: non-scaling-stroke; }
.knob__track { stroke: #27343c; stroke-width: 2px; opacity: .9; }
.knob__value-arc { stroke: var(--blue); stroke-width: 2.25px; stroke-linecap: round; filter: drop-shadow(0 0 1.25px rgba(31, 147, 255, .75)); }
.knob__value-arc.is-empty { opacity: 0; }
.knob__tick { stroke: #84919a; stroke-width: 1px; stroke-linecap: round; opacity: .62; }
.knob__tick--medium { opacity: .78; }
.knob__tick--major { stroke: #aeb9c0; stroke-width: 1.15px; opacity: .9; }
.knob__dial { width: var(--size); height: var(--size); position: relative; border: 1px solid #020303; border-radius: 50%; background: radial-gradient(circle at 36% 26%, #30383d 0, #1c2429 36%, #0c1114 72%); box-shadow: inset 0 2px 2px rgba(255,255,255,.11), inset 0 -4px 7px #000, 0 3px 5px #000, 0 0 0 2px #202a31; }
.knob__indicator { width: 2px; height: 32%; position: absolute; top: 8%; left: calc(50% - 1px); border-radius: 2px; background: #e9edf0; box-shadow: 0 0 3px #fff; transform: rotate(var(--angle)); transform-origin: 50% 131.25%; }
.knob:focus-visible { outline: none; }
.knob:focus-visible .knob__dial { box-shadow: inset 0 2px 2px rgba(255,255,255,.11), inset 0 -4px 7px #000, 0 3px 5px #000, 0 0 0 2px var(--blue-hi); }
.knob__value { color: #d5dade; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.knob.is-dragging .knob__dial { box-shadow: inset 0 2px 2px rgba(255,255,255,.13), inset 0 -4px 7px #000, 0 3px 5px #000, 0 0 0 2px #30404b, 0 0 15px rgba(37,149,255,.23); }

synth-toggle { display: flex; justify-content: center; }
.toggle { display: flex; min-width: 72px; flex-direction: column; align-items: center; gap: 12px; }
.toggle__label { color: #cbd1d5; font-size: 11px; white-space: nowrap; }
.toggle__button { width: 46px; height: 25px; display: flex; align-items: center; padding: 3px; border: 1px solid #030506; border-radius: 5px; background: #080d10; box-shadow: inset 0 1px 4px #000, 0 1px rgba(255,255,255,.05); }
.toggle__button::before { content: ""; width: 18px; height: 17px; border: 1px solid #111; border-radius: 3px; background: linear-gradient(#657078, #2d353a); box-shadow: inset 0 1px rgba(255,255,255,.3), 0 1px 3px #000; transition: transform .18s, background .18s, box-shadow .18s; }
.toggle__button:disabled { opacity: .35; cursor: not-allowed; }
synth-toggle[disabled] .toggle__label { opacity: .45; }
.toggle__button[aria-checked="true"]::before { transform: translateX(19px); background: linear-gradient(#61b9ff, #157de5); box-shadow: inset 0 0 3px #d5f0ff, 0 0 8px #148cff; }

.mixer-head, .matrix-head { display: grid; align-items: center; color: #bdc5ca; font-size: 10px; letter-spacing: .04em; }
.mixer-head { grid-template-columns: 1.2fr .9fr .7fr; margin: 0 12px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.mixer-head span:first-child { text-align: left; }
.mixer-list { padding: 6px 15px 15px; }
mixer-strip { display: block; }
.mixer-strip { min-height: 62px; display: grid; grid-template-columns: 1.2fr .9fr .7fr; align-items: center; text-align: center; }
.mixer-strip__name { text-align: left; font-size: 12px; }
.mixer-strip synth-knob .knob { gap: 1px; }
.mixer-strip synth-knob .knob__label { display: none; }
.mixer-strip synth-knob .knob__stage { width: var(--scale-size); height: var(--scale-size); }
.mixer-strip synth-knob .knob__value { font-size: 10px; }
.mixer-divider { margin: 4px 0 3px; padding: 9px 0 4px; border-top: 1px solid var(--line-soft); font-size: 9px; color: #aeb7bd; }

.filter-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 26px 18px; }
.filter-knobs { grid-template-columns: repeat(3, 1fr); gap: 20px 4px; padding: 0 20px 24px; }
/* ---- OSC: SYNC (OFF / zdroj / zdroj) ---- */
.field--sync { align-items: center; gap: 12px; padding-top: 2px; }
.segmented { display: grid; grid-template-columns: 1.4fr 1fr 1fr; width: 100%; max-width: 132px; border: 1px solid #06090b; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 2px #000; }
.segmented button { height: 30px; padding: 0; border: 0; border-right: 1px solid #06090b; background: linear-gradient(#182127, #0e1519); color: #aeb9c0; font-size: 11px; letter-spacing: .04em; }
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: #dcefff; }
.segmented button[aria-checked="true"] { color: #dcefff; background: linear-gradient(180deg, #1767b7, #0b326b); box-shadow: inset 0 1px #4ca9ff; }

/* ---- OSC › SUB / NOISE ---- */
.subnoise { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; padding: 16px 20px 20px; }
.subnoise__col { min-width: 0; display: grid; grid-template-rows: auto auto 64px auto; gap: 14px; align-content: start; }
.subnoise__title { margin: 0; padding-bottom: 7px; border-bottom: 1px solid var(--line-soft); color: #dce3e7; font-size: 13px; font-weight: 500; letter-spacing: .12em; }
.subnoise__col .field { align-self: start; }
.subnoise__knobs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 6px; }
.subnoise__hint { grid-column: 1 / -1; margin: 0; color: #7d8a92; font-size: 11px; line-height: 1.45; }

/* ---- FILTER › ROUTING (podľa design/filter-routing-monolith.html) ---- */
.routing { padding: 0 14px 16px; }
.routing__box { padding: 12px 12px 14px; border: 1px solid #2c3a43; border-radius: 6px; background: #0b1419; box-shadow: inset 0 2px 8px rgba(0,0,0,.55); }
.routing__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.routing__label { color: #c4d0d6; font-size: 11px; letter-spacing: .08em; }
.routing__desc { color: var(--blue-hi); font-size: 12px; font-variant-numeric: tabular-nums; }
.routing__modes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.routing__mode { min-width: 0; padding: 7px 2px 6px; border: 1px solid #33424c; border-radius: 4px; background: linear-gradient(#141f25, #0d161b); color: #9fb1bd; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.routing__mode:hover { border-color: #4b5f6b; color: #d5e2ea; }
.routing__mode[aria-pressed="true"] { border-color: #4ca9ff; color: #edf7ff; background: linear-gradient(180deg, #1767b7, #0b326b); box-shadow: inset 0 1px #4ca9ff, 0 0 12px rgba(27,127,255,.14); }
.routing__mode svg { display: block; width: 100%; height: 34px; margin-bottom: 4px; }
.routing__mode .routing__wires { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
.routing__diagram { display: block; width: 100%; height: 170px; margin: 10px 0 8px; }
.routing__diagram .routing__wires { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(37,149,255,.35)); }
.routing__node { cursor: pointer; outline: none; }
.routing__node rect { fill: #1a2830; stroke: #4d6574; stroke-width: 1; transition: fill .15s, stroke .15s; }
.routing__node:hover rect, .routing__node:focus-visible rect { stroke: var(--blue-hi); }
.routing__node:focus-visible rect { stroke-width: 2; }
.routing__node.is-selected rect { fill: #1d5c90; stroke: #4ca9ff; }
.routing__node.is-open rect { fill: #131d23; stroke-dasharray: 3 2; }
.routing__node-name { fill: #e2edf5; font-size: 13px; font-weight: 600; text-anchor: middle; }
.routing__node-info { fill: #9fb4c2; font-size: 9.5px; text-anchor: middle; }
.routing__node.is-selected .routing__node-info { fill: #cfe6f8; }
.routing__node.is-compact .routing__node-info { font-size: 8.5px; }
.routing__io { fill: #c4d0d6; font-size: 11px; letter-spacing: .06em; }
.routing__order { width: auto; min-width: 128px; height: 32px; font-size: 12px; }
.routing__order:disabled { opacity: .45; cursor: not-allowed; }
.routing__hint { margin: 10px 2px 0; color: #7d8a92; font-size: 11px; line-height: 1.45; }

.module--env { display: flex; flex-direction: column; }
.env-layout { flex: 1; display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); column-gap: 14px; padding: 12px; }
.env-controls { display: flex; flex-direction: column; }
.env-controls .fader-bank { flex: 1; min-height: 150px; max-height: 250px; padding-bottom: 30px; }
.env-controls { min-width: 0; }
.env-knobs, .fader-bank { display: grid; grid-template-columns: repeat(4, 1fr); }
.env-knobs { gap: 3px; }
.fader-bank { height: 135px; padding: 4px 8px 0; }
synth-fader { min-width: 34px; display: flex; justify-content: center; touch-action: none; user-select: none; }
.fader { --handle-height: 22px; width: 38px; height: 100%; position: relative; display: flex; justify-content: center; }
.fader__rail { width: 6px; height: calc(100% - var(--handle-height)); position: absolute; top: calc(var(--handle-height) / 2); border-radius: 4px; background: #060b0e; box-shadow: inset 0 0 3px #000, 0 0 0 1px rgba(255,255,255,.045); }
.fader__rail::before { content: ""; position: absolute; inset: 2px; top: calc((100% - var(--value)) * 1%); bottom: 2px; border-radius: 3px; background: #188cf1; opacity: .55; }
.fader__handle { width: 29px; height: var(--handle-height); position: absolute; left: 4px; bottom: calc(var(--value) * 1%); transform: translateY(calc(var(--value) * 1%)); border: 1px solid #030405; border-radius: 3px; background: linear-gradient(#596166 0 43%, #b6bdc1 45% 50%, #20272b 52% 100%); box-shadow: inset 0 1px rgba(255,255,255,.26), 0 3px 5px #000; }
.fader__ticks { position: absolute; top: calc(var(--handle-height) / 2); right: -7px; bottom: calc(var(--handle-height) / 2); left: -7px; opacity: .42; pointer-events: none; }
.fader__ticks i { height: 1px; position: absolute; top: calc(var(--tick) * 12.5%); right: 0; left: 0; display: block; transform: translateY(-50%); }
.fader__ticks i::before, .fader__ticks i::after { content: ""; width: 13px; height: 1px; position: absolute; top: 0; background: #62717a; }
.fader__ticks i::before { left: 0; }
.fader__ticks i::after { right: 0; }
.fader__label { position: absolute; bottom: -13px; color: #69777f; font-size: 8px; }
.fader__value { position: absolute; bottom: -28px; color: #d5dade; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fader:focus-visible { outline: none; }
.fader:focus-visible .fader__handle { box-shadow: inset 0 1px rgba(255,255,255,.26), 0 3px 5px #000, 0 0 0 2px var(--blue-hi); }
synth-fader.is-inactive .fader__handle, synth-fader.is-inactive .fader__value { opacity: .4; }
.env-visual { min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 10px; }
envelope-editor { min-height: 184px; display: block; position: relative; }
.envelope { position: absolute; inset: 0; overflow: hidden; border: 1px solid #030506; border-radius: 5px; background-color: #081015; background-image: linear-gradient(rgba(66,102,125,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(66,102,125,.10) 1px, transparent 1px), linear-gradient(180deg, rgba(16,43,68,.2), transparent); background-size: 28px 28px; box-shadow: inset 0 2px 8px #000; }
.envelope svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.envelope__fill { fill: url(#env-fill); }
.envelope__point { vector-effect: non-scaling-stroke; }
.envelope__line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(37,149,255,.35)); }
.envelope__hit { fill: transparent; stroke: none; }
.envelope__point { fill: #54a9ff; stroke: #8dc8ff; stroke-width: 1; pointer-events: none; }
.envelope__handle { outline: none; }
.envelope__handle--x, .envelope__handle--xy { cursor: grab; }
.envelope__handle--x:active, .envelope__handle--xy:active { cursor: grabbing; }
.envelope__handle--fixed { cursor: default; }
.envelope__handle:focus-visible .envelope__point { fill: #d8efff; stroke: #2d9dff; stroke-width: 2; }
.env-options { display: grid; grid-template-columns: 1fr 1fr .9fr; align-items: end; gap: 10px; }
.compact-field { display: flex; flex-direction: column; gap: 7px; text-align: center; }
.compact-field button { padding: 0; background-image: linear-gradient(#11191e, #090e11); color: #d5dade; }
.env-options synth-knob .knob__label { min-height: auto; }
.env-options select { padding: 0 17px 0 6px; font-size: 12px; background-position: calc(100% - 6px) 50%, 0 0; background-size: 8px 6px, 100% 100%; }

.master-grid { display: grid; align-items: center; }
.master-grid--top { grid-template-columns: repeat(4, 1fr); gap: 16px 8px; padding: 14px 16px 12px; }
.master-grid--bottom { grid-template-columns: repeat(3, 1fr); padding: 14px 24px 18px; border-top: 1px solid var(--line-soft); }
.master-grid .field { text-align: center; }
.master-grid select { padding: 0 17px 0 7px; font-size: 13px; background-position: calc(100% - 6px) 50%, 0 0; background-size: 8px 6px, 100% 100%; }
.toggle-pair { display: grid; gap: 9px; align-self: center; }
.toggle-pair .toggle { min-width: 0; flex-direction: row-reverse; justify-content: center; gap: 8px; }
.toggle-pair .toggle__button { width: 27px; }
.toggle-pair .toggle__button::before { width: 17px; }
.toggle-pair .toggle__button[aria-checked="true"]::before { transform: translateX(1px); }

.lfo-grid { min-height: 240px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; gap: 28px 6px; padding: 24px 18px; }
.lfo-grid synth-toggle { align-self: center; }
.shape-display { position: relative; min-height: 78px; grid-template-columns: 1fr 13px; padding-top: 19px; }
.shape-display small { position: absolute; top: 7px; left: 10px; font-size: 9px; }
.shape-display svg { width: 100%; height: 47px; }

.matrix-head { grid-template-columns: 30px 1.1fr 1.6fr 1.8fr 24px; gap: 8px; padding: 9px 16px 5px; }
.matrix-list { display: grid; gap: 5px; padding: 4px 13px 18px; }
.matrix-row { display: grid; grid-template-columns: 30px 1.1fr 1.6fr 1.8fr 24px; gap: 8px; align-items: center; font-size: 10px; }
.matrix-row select { height: 29px; padding: 0 18px 0 7px; font-size: 10px; background-position: calc(100% - 7px) 50%, 0 0; background-size: 8px 6px, 100% 100%; }
.matrix-row__index { text-align: center; color: #c5ccd0; }
.matrix-amount { display: grid; grid-template-columns: 43px 1fr; align-items: center; gap: 6px; }
.matrix-amount output { text-align: right; font-variant-numeric: tabular-nums; color: #cbd4d9; }
input[type="range"] { width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; accent-color: var(--blue); }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, #35434b 0 var(--fill-start), #1f8ff1 var(--fill-start) var(--fill-end), #35434b var(--fill-end) 100%); box-shadow: 0 0 0 1px #030506; }
input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; appearance: none; border: 2px solid #1b84e1; border-radius: 50%; background: #3e9ff4; box-shadow: 0 0 6px rgba(29,143,247,.7); }
input[type="range"]::-moz-range-track { height: 2px; background: linear-gradient(90deg, #35434b 0 var(--fill-start), #1f8ff1 var(--fill-start) var(--fill-end), #35434b var(--fill-end) 100%); }
input[type="range"]::-moz-range-progress { height: 2px; background: transparent; }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #1b84e1; border-radius: 50%; background: #3e9ff4; }
.matrix-head span:last-child { text-align: center; }
.matrix-toggle { width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid #1d282e; border-radius: 4px; background: #0b1216; }
.matrix-toggle i { width: 8px; height: 8px; border-radius: 50%; background: #2a353c; box-shadow: inset 0 1px 1px #000; transition: background .15s, box-shadow .15s; }
.matrix-toggle[aria-checked="true"] i { background: #3aa2ff; box-shadow: 0 0 6px #1d8fff; }
.matrix-toggle:hover { border-color: #56656e; }
.matrix-row.is-unused select { color: #7f8b93; }
.matrix-row.is-unused .matrix-toggle[aria-checked="true"] i { background: #24506f; box-shadow: none; }
.matrix-row.is-muted > :not(.matrix-toggle) { opacity: .32; filter: saturate(.2); }

.module--output { padding-bottom: 16px; }
.meters { height: 310px; position: relative; display: flex; justify-content: center; gap: 13px; margin: 14px 15px 8px; padding-left: 26px; }
output-meter { width: 28px; display: block; }
.meter { height: 100%; display: grid; grid-template-rows: 17px 1fr 20px; gap: 4px; text-align: center; color: #cbd2d6; font-size: 10px; }
.meter output { margin-inline: -8px; white-space: nowrap; font-size: 10px; font-variant-numeric: tabular-nums; line-height: 20px; }
.meter__well { position: relative; overflow: hidden; border: 2px solid #020405; border-radius: 2px; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.75) 0 2px, transparent 2px 5px), linear-gradient(to top, #1fa83a 0 64%, #e6d214 64% 80%, #ef8725 80% 91%, #ee3636 91%); box-shadow: inset 0 0 4px #000, 0 0 0 1px #354149; }
.meter__mask { position: absolute; inset: 0 0 auto; height: calc(100% - var(--level)); background: #071014; transition: height .09s linear; }
.meter__peak { position: absolute; left: 0; right: 0; bottom: var(--peak); height: 2px; background: #f6d04b; box-shadow: 0 0 3px #ffc400; transition: bottom .12s linear; }
.meter-scale { position: absolute; left: 0; width: 24px; top: 21px; bottom: 24px; color: #aeb8be; font-size: 9px; text-align: right; }
.meter-scale span { position: absolute; right: 0; bottom: var(--pos); transform: translateY(50%); line-height: 1; font-variant-numeric: tabular-nums; }
.clip-led { position: absolute; top: 0; right: -4px; padding: 1px 4px; border-radius: 3px; color: #5b2a2a; font-size: 9px; font-weight: 650; letter-spacing: .06em; transition: color .15s, text-shadow .15s; }
.clip-led.is-on { color: #ff4d4d; text-shadow: 0 0 6px #ff2a2a; }
.limiter { display: block; width: 93px; height: 34px; margin: 9px auto 0; border: 1px solid var(--blue); border-radius: 4px; background: linear-gradient(#15232c, #0d171d); color: #dbe4e9; font-size: 10px; box-shadow: inset 0 0 0 1px rgba(91,178,255,.15), 0 0 8px rgba(37,149,255,.12); }
.limiter { --gr: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.limiter__led { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, #ffb020 calc(var(--gr) * 100%), #2b363d); box-shadow: 0 0 calc(var(--gr) * 8px) #ff9d00; transition: background .1s, box-shadow .1s; }
.limiter[aria-pressed="false"] { color: #71808a; border-color: #34434c; box-shadow: none; }
.limiter[aria-pressed="false"] .limiter__led { background: #2b363d; box-shadow: none; }
.power-button { position: relative; }
.power-button .icon { color: #8a949b; }
.power-button.is-on .icon { color: var(--blue-hi); }
.power-button.is-error { border-color: var(--danger); }
.power-button.is-error .power-led { background: var(--danger); box-shadow: 0 0 7px var(--danger); }
.power-button .power-led { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #313c43; box-shadow: inset 0 1px 1px #000; transition: background .2s, box-shadow .2s; }
.power-button.is-on { border-color: var(--blue); }
.power-button.is-on .power-led { background: #46d06a; box-shadow: 0 0 7px #2ee06a; }

.compact-field button.is-on { color: var(--blue-hi); border-color: var(--blue); box-shadow: inset 0 0 0 1px rgba(91,178,255,.18), 0 0 8px rgba(37,149,255,.14); }

/* EFEKTY: číslo = poradie v reťazci, ON s LED (ako LIMITER), vypnutý efekt má stlmené ovládače (dajú sa meniť) */
.module--fx { display: flex; flex-direction: column; }   /* telo vyplní výšku radu → ovládače zvisle na stred */
.module--fx .module__heading { gap: 10px; padding: 0 12px 0 14px; }
.module--fx .module__heading h2 { font-size: 16px; white-space: nowrap; }
.fx-order { display: inline-grid; place-content: center; width: 20px; height: 20px; margin-right: 10px; border: 1px solid #3a4851; border-radius: 50%; color: #8d99a1; font-size: 11px; font-weight: 600; vertical-align: 2px; }
.fx-power { height: 30px; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid #34434c; border-radius: 4px; background: linear-gradient(#15232c, #0d171d); color: #71808a; font-size: 10px; letter-spacing: .12em; }
.fx-power:hover { border-color: #4b5b65; color: #c7ced2; }
.fx-power__led { width: 6px; height: 6px; border-radius: 50%; background: #2b363d; transition: background .15s, box-shadow .15s; }
.fx-power[aria-checked="true"] { color: #dbe4e9; border-color: var(--blue); box-shadow: inset 0 0 0 1px rgba(91,178,255,.15), 0 0 8px rgba(37,149,255,.12); }
.fx-power[aria-checked="true"] .fx-power__led { background: #46d06a; box-shadow: 0 0 7px #2ee06a; }
/* ovládače v dvoch radoch: 2 stĺpce, pri šiestich ovládačoch 3 (FORMANT, PHASER, DELAY) — v troch stĺpcoch stredný knob namiesto veľkého */
.fx-body { --fx-cols: 2; flex: 1; display: grid; grid-template-columns: repeat(var(--fx-cols), minmax(0, 1fr)); align-content: center; align-items: center; justify-items: center; gap: 16px 8px; padding: 18px 12px 20px; transition: opacity .15s; }
.module--formant .fx-body, .module--phaser .fx-body, .module--delay .fx-body { --fx-cols: 3; }
.module--formant .knob[data-size="lg"], .module--phaser .knob[data-size="lg"], .module--delay .knob[data-size="lg"] { --size: 55px; --scale-size: 74px; }
.fx-body > synth-knob:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* MIX pri CHORUS a BITCRUSHER na stred 2. radu */
.module--fx.is-off .fx-body { opacity: .5; }
.fx-type { width: 100%; max-width: 130px; }
.fx-toggles { display: grid; grid-column: span 2; grid-auto-flow: column; gap: 24px; justify-items: center; }

.keyboard { display: grid; grid-template-columns: auto 58px 1fr; grid-template-rows: 1fr auto; grid-template-areas: "wheels side keys" ". . hint"; gap: 6px 12px; align-items: stretch; margin: 0 8px 8px; padding: 12px 14px; border: 1px solid #34414a; border-radius: var(--radius); background: linear-gradient(145deg, #131c22, #0e161c); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 2px 5px #0007; }
.keyboard__side { grid-area: side; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.keyboard__side .utility-button { height: 30px; padding: 0 4px; font-size: 10px; letter-spacing: .06em; }
.keyboard__range { text-align: center; color: #9da7ae; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.keyboard__hint { grid-area: hint; margin: 0; color: #6d7b84; font-size: 10px; letter-spacing: .03em; }
.keys { grid-area: keys; }

/* kolesá pitch bend / modulation */
.keyboard__wheels { grid-area: wheels; display: flex; gap: 8px; }
synth-wheel { display: block; touch-action: none; user-select: none; }
.wheel { height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 5px; cursor: ns-resize; outline: none; }
.wheel__slot { width: 30px; position: relative; overflow: hidden; border: 1px solid #020405; border-radius: 6px; background: #05090c; box-shadow: inset 0 2px 8px #000, 0 0 0 1px #1c262d; }
/* valec: rebrovanie sa posúva s hodnotou, tieň na okrajoch = zakrivenie */
.wheel__drum { position: absolute; inset: 3px 4px; border-radius: 4px;
  background:
    linear-gradient(rgba(0,0,0,.75), transparent 30%, transparent 70%, rgba(0,0,0,.75)),
    repeating-linear-gradient(180deg, #2a3339 0 2px, #161d22 2px 5px);
  background-position: 0 0, 0 calc(var(--pos) * -48px);
  box-shadow: inset 1px 0 rgba(255,255,255,.08), inset -1px 0 rgba(0,0,0,.6); }
.wheel__mark { position: absolute; left: 4px; right: 4px; height: 3px; bottom: calc(6px + var(--pos) * (100% - 15px)); border-radius: 2px; background: var(--blue-hi); box-shadow: 0 0 6px var(--blue); }
.wheel__center { position: absolute; left: -1px; right: -1px; top: 50%; height: 1px; background: rgba(157,167,174,.35); }
.wheel__label { color: #8d99a1; font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
.wheel:focus-visible .wheel__slot { box-shadow: inset 0 2px 8px #000, 0 0 0 2px var(--blue-hi); }
.wheel.is-held .wheel__slot { box-shadow: inset 0 2px 8px #000, 0 0 0 1px #30404b, 0 0 12px rgba(37,149,255,.2); }
.keys { position: relative; height: 132px; border-radius: 5px; overflow: hidden; background: #05090c; box-shadow: inset 0 2px 8px #000, 0 0 0 1px #1c262d; touch-action: none; user-select: none; }
.key { position: absolute; top: 0; margin: 0; padding: 0; border-radius: 0 0 4px 4px; cursor: pointer; }
.key--white { height: 100%; border: 1px solid #0a0f13; background: linear-gradient(#e7eaec 0 82%, #c9ced2 92%, #aeb5ba 100%); box-shadow: inset 0 -5px 8px rgba(0,0,0,.18), inset 1px 0 rgba(255,255,255,.55); }
.key--white i { position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); color: #5a6870; font-size: 9px; font-style: normal; pointer-events: none; }
.key--black { height: 62%; z-index: 2; border: 1px solid #000; background: linear-gradient(#3a4249, #14191d 70%, #060a0d); box-shadow: inset 0 2px rgba(255,255,255,.16), 0 3px 5px rgba(0,0,0,.6); }
.key--white.is-active { background: linear-gradient(#9fd0ff 0 80%, #5aa5e8 100%); box-shadow: inset 0 -4px 10px rgba(9,66,120,.45); }
.key--black.is-active { background: linear-gradient(#2c78c4, #0d2f56); box-shadow: inset 0 2px rgba(255,255,255,.2), 0 0 9px rgba(37,149,255,.4); }
.key:focus-visible { outline-offset: -3px; }

.interaction-hint { position: fixed; left: 50%; top: 16px; z-index: 20; padding: 9px 14px; border: 1px solid #334550; border-radius: 99px; color: #c7d1d7; background: rgba(5,12,17,.9); box-shadow: 0 8px 24px #0009; font-size: 11px; pointer-events: none; opacity: 0; transform: translate(-50%, -12px); transition: opacity .2s, transform .2s; }
.interaction-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- dialógy ---- */
.panel { width: min(520px, calc(100vw - 24px)); max-height: min(720px, calc(100vh - 24px)); padding: 0; border: 1px solid #34414a; border-radius: 10px; color: var(--text); background: linear-gradient(160deg, #151e24, #0c1418); box-shadow: 0 24px 80px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.04); }
.panel[open] { display: flex; flex-direction: column; }
html:has(.panel:modal) { overflow: hidden; scrollbar-gutter: stable; }   /* otvorený dialóg (presety, nastavenia): synth v pozadí sa nescrolluje, stránka neposkočí */
.panel, .panel__body, .preset-banks, .preset-tabs { overscroll-behavior: contain; }   /* scroll zoznamu v dialógu nepretečie na stránku */
.panel::backdrop { background: rgba(2,5,7,.66); backdrop-filter: blur(3px); }
.panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.7); box-shadow: 0 1px rgba(255,255,255,.045); }
.panel__head h2 { margin: 0; font-size: 16px; font-weight: 450; letter-spacing: .04em; }
.panel__close { width: 32px; height: 32px; border: 1px solid #2a353d; border-radius: 6px; background: #0a1115; font-size: 20px; line-height: 1; color: #aeb7bd; }
.panel__close:hover { color: white; border-color: #4b5b65; }
.panel__body { padding: 14px 18px; overflow: auto; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 14px; }
.panel__button { height: 34px; padding: 0 12px; border: 1px solid #2f3d46; border-radius: 5px; background: linear-gradient(#131c22, #0b1216); color: #cdd5da; font-size: 12px; }
.panel__button:hover { border-color: var(--blue); color: var(--blue-hi); }
.panel__button:disabled { opacity: .45; cursor: not-allowed; }
.panel__button--primary { border-color: var(--blue); color: #dcefff; background: linear-gradient(180deg, #1767b7, #0b326b); }
.panel__button--danger { border-color: #5a2a2a; color: #ffb3b3; }
.panel__button--danger:hover { border-color: var(--danger); color: #ffd0d0; }
.panel__status { min-height: 18px; margin: 0; padding: 0 18px 14px; color: #9fb4c2; font-size: 12px; }
.panel__status[data-kind="error"] { color: #ff8a8a; }
.panel input[type="text"], .panel input[type="number"] { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #030607; border-radius: 5px; background: #080d10; color: var(--text); font: inherit; font-size: 13px; box-shadow: inset 0 1px 3px #000, 0 1px rgba(255,255,255,.04); }
.panel input:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 1px; }
/* prehliadač presetov: široký dialóg — hľadanie v hlavičke, banky vľavo, lišta zvolenej banky, karty jej kategórií, mriežka zvukov, pätička */
.preset-dialog { width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(780px, 88vh); max-height: none; }
.preset-dialog .panel__head { gap: 16px; }
.preset-search { flex: 0 1 560px; margin-left: auto; display: flex; align-items: center; gap: 12px; }
.preset-search input[type="search"] { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid #030607; border-radius: 5px; background: #080d10; color: var(--text); font: inherit; font-size: 13px; box-shadow: inset 0 1px 3px #000, 0 1px rgba(255,255,255,.04); }
.preset-search input:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 1px; }
.preset-search__all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; color: #9aa6ae; font-size: 11px; white-space: nowrap; cursor: pointer; }
.preset-search__all input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.preset-browse { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
/* banky: zvislý zoznam (vstavaná prvá), počet zvukov, bodka = banka aktuálneho presetu */
.preset-banks { min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px 12px 18px; overflow-y: auto; border-right: 1px solid var(--line-soft); scrollbar-width: thin; }
.preset-bank { flex: 0 0 auto; min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "note note"; align-items: center; column-gap: 8px; padding: 6px 10px; border: 1px solid #06090b; border-radius: 5px; background: linear-gradient(#182127, #0e1519); color: #c9ced2; font-size: 12px; line-height: 1.2; text-align: left; box-shadow: 0 1px 2px #000; }
.preset-bank:hover { background: #192832; }
.preset-bank.is-active { color: #dcefff; background: linear-gradient(180deg, #1767b7, #0b326b); box-shadow: inset 0 1px #4ca9ff, inset 0 -8px 18px rgba(0,0,0,.2), 0 0 16px rgba(27,127,255,.14); }
.preset-bank__name { grid-area: name; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.preset-bank.has-current .preset-bank__name::before { content: "● "; color: var(--blue-hi); font-size: 9px; vertical-align: 1px; }
.preset-bank.is-active.has-current .preset-bank__name::before { color: #dcefff; }
.preset-bank__count { grid-area: count; color: #6f7d86; font-size: 10px; font-variant-numeric: tabular-nums; }
.preset-bank.is-active .preset-bank__count { color: #a9d3ff; }
.preset-bank__note { grid-area: note; color: #74828b; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.preset-bank.is-active .preset-bank__note { color: #a9d3ff; }
.preset-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* lišta zvolenej banky: názov (pri premenovaní pole), počet, akcie; na mobile namiesto zoznamu bánk výber */
.preset-bankbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px 0; }
.preset-bankbar__select { display: none; }
.preset-bankbar__title { flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.preset-bankbar__title h3 { min-width: 0; margin: 0; overflow: hidden; color: #e3e8eb; font-size: 15px; font-weight: 450; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.preset-bankbar__title small { flex: 0 0 auto; color: #7d8a92; font-size: 11px; }
.preset-bankbar__title input { flex: 1 1 auto; max-width: 360px; height: 34px; }
.preset-bankbar__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.preset-bankbar__actions .panel__button { height: 32px; padding: 0 10px; font-size: 11px; }
.preset-bankbar__actions .panel__button.is-confirm { color: #ffd0d0; border-color: var(--danger); background: #2a1316; }
/* karty kategórií zvolenej banky (Všetko + kategórie); pri mnohých kategóriách najviac ~4,5 riadka (a 32 % dialógu), ďalšie sa posúvajú */
.preset-tabs { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 4px; min-height: 54px; max-height: max(54px, min(206px, 32%)); padding: 10px 18px 6px; overflow-x: auto; scrollbar-width: thin; }   /* aspoň jeden celý riadok; spodný okraj: miesto pre fokusový rámik */
.preset-tab { flex: 1 1 auto; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 10px; border: 1px solid #06090b; border-radius: 5px; background: linear-gradient(#182127, #0e1519); color: #c9ced2; font-size: 12px; line-height: 1.15; white-space: nowrap; box-shadow: 0 1px 2px #000; }
.preset-tab--all { flex-grow: 0; }
.preset-tab:hover { background: #192832; }
.preset-tab.is-active { color: #dcefff; background: linear-gradient(180deg, #1767b7, #0b326b); box-shadow: inset 0 1px #4ca9ff, inset 0 -8px 18px rgba(0,0,0,.2), 0 0 16px rgba(27,127,255,.14); }
.preset-tab__count { color: #6f7d86; font-size: 10px; font-variant-numeric: tabular-nums; }
.preset-tab.is-active .preset-tab__count { color: #a9d3ff; }
.preset-tabs.is-searching .preset-tab { color: #8d99a1; }   /* hľadanie ide cez celú banku (alebo všetky) */
.preset-list { flex: 1; min-height: 96px; padding-top: 10px; }   /* v nízkom okne sa skôr zmenšia karty kategórií */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(180px, calc((100% - 18px) / 4)), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }   /* najviac 4 stĺpce */
.preset-item { position: relative; min-width: 0; }
.preset-item__load { width: 100%; min-height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 12px; border: 1px solid #1d282e; border-radius: 5px; background: #0e161b; text-align: left; font-size: 13px; }
.preset-item--user .preset-item__load { padding-right: 42px; }   /* miesto pre × */
.preset-item__load:hover { border-color: #3c4c56; background: #131f26; }
.preset-item.is-current .preset-item__load { border-color: var(--blue); color: #dcefff; background: linear-gradient(90deg, rgba(23,103,183,.35), rgba(11,50,107,.15)); }
.preset-item__name { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.preset-item__cat { overflow: hidden; color: #7d8a92; font-size: 10px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.preset-item.is-current .preset-item__cat { color: #9fc9f2; }
/* zmazanie zvuku vlastnej banky: × v rohu karty, druhý klik potvrdí („Zmazať?“) */
.preset-item__delete { position: absolute; top: 50%; right: 6px; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #859199; font-size: 15px; line-height: 1; transform: translateY(-50%); }
.preset-item__delete:hover { color: #ffb3b3; border-color: #5a2a2a; background: #0e161b; }
.preset-item__delete.is-confirm { color: #ffd0d0; border-color: #5a2a2a; background: #2a1316; font-size: 12px; }
.preset-empty { margin: 0; color: #7d8a92; font-size: 12px; }
.preset-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid var(--line-soft); }
/* uloženie: banka · kategória · názov · Uložiť v jednom riadku, akcie pod ním */
.preset-save { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(130px, 210px) minmax(110px, 170px) minmax(140px, 1fr) auto; align-items: center; gap: 6px 10px; }
.preset-save label { color: #c7cdd1; font-size: 11px; letter-spacing: .04em; white-space: nowrap; }
.preset-save select { height: 36px; font-size: 12px; }
.preset-save__hint { grid-column: 2 / -1; color: #ffb38a; font-size: 11px; }
.preset-save__hint:empty { display: none; }
.preset-foot .panel__actions { padding: 0; }
.panel__status-action { margin-left: 4px; padding: 2px 8px; border: 1px solid var(--blue); border-radius: 4px; background: #0b2440; color: #dcefff; font-size: 11px; }
.panel__status-action:hover { background: #1767b7; }
.preset-dialog .panel__status { min-height: 16px; padding: 0 18px 10px; }
.preset-dialog .panel__status:empty { min-height: 0; padding-bottom: 0; }   /* prázdna hláška nezaberá miesto zoznamu */
/* nízke okno (telefón na šírku): hustejšie okraje, bez popisu uloženia; keby sa nezmestilo ani tak, dialóg sa posúva */
@media (max-height: 560px) {
  .preset-dialog { overflow-y: auto; }
  .preset-dialog .panel__head { padding-block: 8px; }
  .preset-bankbar { padding-top: 8px; }
  .preset-foot { gap: 6px 12px; padding-block: 8px; }
  .preset-save label { display: none; }
}
@media (max-height: 560px) and (min-width: 601px) {
  .preset-bankbar { flex-wrap: nowrap; }   /* názov banky (skráti sa) a akcie v jednom riadku */
  .preset-bankbar__title { flex-basis: 0; }
  #preset-bank-info { display: none; }
}
.settings-grid { display: grid; grid-template-columns: minmax(150px, 1fr) 1.3fr; align-items: center; gap: 12px 14px; }
.settings-grid label { color: #c7cdd1; font-size: 12px; }
.settings-grid label small { display: block; margin-top: 2px; color: #7d8a92; font-size: 10px; }
.settings-grid select { font-size: 12px; }
.settings-note { grid-column: 1 / -1; margin: -4px 0 0; color: #7d8a92; font-size: 11px; }
.shortcuts { margin: 0 18px 16px; color: #aeb7bd; font-size: 12px; }
.shortcuts summary { cursor: pointer; color: #c7cdd1; }
.shortcuts ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.6; }
/* hlásenie dole (snackbar): neprekrýva hornú lištu; kliky prechádzajú, zachytí ich len tlačidlo akcie */
.toast { position: fixed; inset: auto auto 20px 50%; z-index: 30; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 10px 16px; overflow: visible; border: 1px solid #334550; border-radius: 8px; color: #dbe4e9; background: rgba(5,12,17,.95); box-shadow: 0 10px 30px #000a; font-size: 12px; pointer-events: none; opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.toast[popover]:not(:popover-open) { display: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-visible .toast__action { pointer-events: auto; }
.toast__action { flex: 0 0 auto; height: 26px; padding: 0 10px; border: 1px solid var(--blue); border-radius: 4px; background: #0d2440; color: #dcefff; font-size: 12px; }
.toast__action:hover { background: #134070; }
/* zoznam tvarov (priebeh / LFO) */
.choice-menu { position: fixed; inset: auto; margin: 0; padding: 4px; display: none; gap: 2px; border: 1px solid #34414a; border-radius: 7px; color: var(--text); background: #0c1418; box-shadow: 0 14px 40px #000c; }
.choice-menu:popover-open { display: grid; }
.choice-menu__item { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; min-height: 34px; padding: 3px 12px 3px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #cdd5da; font-size: 12px; text-align: left; }
.choice-menu__item svg { width: 54px; height: 22px; color: var(--blue); }
.choice-menu__item polyline, .choice-menu__item path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.choice-menu__item:hover, .choice-menu__item:focus-visible { outline: none; border-color: #3c4c56; background: #131f26; }
.choice-menu__item[aria-selected="true"] { color: #dcefff; border-color: var(--blue); background: linear-gradient(90deg, rgba(23,103,183,.35), rgba(11,50,107,.15)); }
.toast[data-kind="error"] { border-color: #6b2c2c; color: #ffc9c9; }

/* 4 stĺpce potrebujú ~1350 px (súčet minmax minim + medzery) */
@media (max-width: 1400px) {
  .rack-grid { grid-template-columns: 1.15fr .85fr 1.15fr; grid-template-areas: "osc mixer filter" "env env master" "lfo matrix matrix" "output output output"; }
  .rack-grid.is-fx { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "dist chorus comb formant" "phaser crush delay reverb" "output output output output"; }
  .module--output { padding-bottom: 10px; }
  .module--output .meters { width: 200px; height: 180px; margin: 10px auto; }
  .meters { padding-left: 32px; }
  /* úzke stĺpce MASTERu: dlhé popisy (STEREO SPREAD, PORTAMENTO) na dva riadky */
  .master-grid--top .knob__label { min-height: 24px; font-size: 10px; letter-spacing: .01em; display: flex; align-items: flex-end; justify-content: center; white-space: normal; max-width: 100%; }
}
/* hlavička na stredných šírkach: menšie medzery, potom kompaktné logo, CPU a „FX“ — názov presetu ostane čitateľný */
@media (max-width: 1280px) {
  .topbar { gap: 14px; }
}
@media (max-width: 1100px) {
  .rack-grid.is-fx { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "dist chorus" "comb formant" "phaser crush" "delay reverb" "output output"; }
  /* efekty v dvoch stĺpcoch: štyri a tri ovládače v jednom rade, šesť 3 × 2; všetky knoby stredné */
  .module--dist .fx-body, .module--comb .fx-body, .module--reverb .fx-body { --fx-cols: 4; }
  .module--chorus .fx-body, .module--crush .fx-body { --fx-cols: 3; }
  .fx-body > synth-knob:last-child:nth-child(odd) { grid-column: auto; }
  .module--fx .knob[data-size="lg"] { --size: 55px; --scale-size: 74px; }
  .brand { width: 100px; }.brand__name { font-size: 30px; }.brand__sub { font-size: 9px; }
  .cpu { min-width: 64px; grid-template-columns: 1fr; column-gap: 0; }
  .cpu__dial { display: none; }
  .fx-button { padding: 0 13px 0 12px; margin-right: auto; }
  .fx-button__long { display: none; }.fx-button__short { display: inline; }
  .preset-browser { width: auto; flex: 1 1 auto; min-width: 0; max-width: 420px; }
  .topbar__spacer { display: none; }
}
/* do 980 px hlavička na dva riadky: logo · RND + AMOUNT · CPU · power / menu · preset · FX · nastavenia */
@media (max-width: 980px) {
  .topbar { flex-wrap: wrap; row-gap: 0; }
  .topbar::after { content: ''; order: 5; flex-basis: 100%; }   /* zalomenie: menu, preset, FX a nastavenia vždy v 2. riadku */
  .brand { order: 1; }
  .rnd-group { order: 2; margin-left: auto; }.cpu { order: 3; }.power-button { order: 4; }
  .menu-button { order: 6; }.preset-browser { order: 7; flex: 1 1 0; max-width: none; }.fx-button { order: 8; margin-right: 0; }.settings-button { order: 9; }
  .menu-button, .preset-browser, .fx-button, .settings-button { margin-top: 10px; }
  .icon-button, .fx-button { height: 44px; }.icon-button { width: 44px; }.preset-browser { height: 44px; }
}
@media (max-width: 900px) {
  .topbar { gap: 10px; padding: 10px 12px; }
  .brand { width: 100px; }.brand__name { font-size: 30px; }.brand__sub { font-size: 9px; }
  .cpu { min-width: 64px; grid-template-columns: 1fr; column-gap: 0; }
  .cpu__dial { display: none; }
  .preset-browser { width: auto; flex: 1; }
  .rack-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "osc filter" "mixer master" "env env" "lfo lfo" "matrix matrix" "output output"; }
}
@media (max-width: 660px) {
  .synth { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
  /* mobil: oktávy v riadku nad klaviatúrou, kolesá vľavo od kláves */
  .keyboard { grid-template-columns: auto 1fr; grid-template-areas: "side side" "wheels keys" "hint hint"; margin: 0 6px 6px; }
  .keyboard__side { flex-direction: row; align-items: center; justify-content: center; }
  .keyboard__side .utility-button { width: 64px; }
  #oct-down { order: 0; }.keyboard__range { order: 1; }#oct-up { order: 2; }   /* v riadku: − vľavo, + vpravo */
  .keyboard { column-gap: 8px; }.keyboard__wheels { gap: 4px; }.wheel__slot { width: 22px; }   /* klávesy ≥ 30 px aj pri 360 px */
  .keyboard__hint { text-align: center; }
  .keys { height: 150px; }
  /* hlavička (od 900 px na dva riadky) na telefóne užšia */
  .topbar { gap: 8px; }
  .brand { width: 88px; }
  /* 2. riadok: názov presetu dostane miesto — bez ikony priečinka (prehliadač otvára aj ☰), užšie šípky, FX ako štvorec s LED v rohu */
  .preset-browser { grid-template-columns: minmax(0, 1fr) 32px 32px; padding-right: 4px; }
  .preset-browser__folder { display: none; }
  .preset-browser__name { padding: 0 6px; }
  .fx-button { position: relative; width: 44px; height: 44px; justify-content: center; padding: 0; letter-spacing: .08em; }
  .fx-button__led { position: absolute; top: 6px; right: 6px; }
  .fx-button__long { display: none; }.fx-button__short { display: inline; }
  /* efekty pod sebou: tri ovládače v jednom rade (BITCRUSHER, CHORUS), štyri 2 × 2 a s veľkým knobom, šesť 3 × 2 */
  .module--dist .fx-body, .module--comb .fx-body, .module--reverb .fx-body { --fx-cols: 2; }
  .module--dist .knob[data-size="lg"], .module--crush .knob[data-size="lg"], .module--comb .knob[data-size="lg"],
  .module--chorus .knob[data-size="lg"], .module--reverb .knob[data-size="lg"] { --size: 69px; --scale-size: 93px; }
  .rack-grid { display: flex; flex-direction: column; padding: 6px; }
  .osc-top { grid-template-columns: 1.4fr 1fr 1fr; }.osc-top synth-knob:last-child { grid-column: 2; }
  .filter-selects { padding-inline: 14px; }.filter-knobs { padding-inline: 8px; }
  .env-layout { grid-template-columns: 1fr; gap: 16px; }.env-controls { min-height: 235px; }
  envelope-editor { min-height: 210px; }
  .module__heading--tabs { flex-wrap: wrap; padding-top: 10px; }.module__heading--tabs synth-tabs { flex-basis: 100%; margin-left: 0; }
  /* matrix na dva riadky: zdroj → cieľ, pod nimi hĺbka */
  .matrix-head { display: none; }
  .matrix-list { gap: 0; }
  .matrix-row { grid-template-columns: 14px 1fr 1fr 28px; grid-template-areas: "idx src dst on" "idx amt amt on"; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
  .matrix-row:last-child { border-bottom: 0; }
  .matrix-row__index { grid-area: idx; }.matrix-row__src { grid-area: src; }.matrix-row__dst { grid-area: dst; }
  .matrix-amount { grid-area: amt; grid-template-columns: 40px 1fr; }.matrix-toggle { grid-area: on; width: 28px; height: 28px; }
  .matrix-row select { height: 32px; }
  .matrix-amount input[type="range"] { height: 26px; }
}
@media (max-width: 480px) {
  /* AMOUNT bez popisu (ostáva hodnota, aria-label a tooltip), aby sa 1. riadok hlavičky zmestil */
  .rnd-amount .knob { grid-template-areas: "stage value"; }
  .rnd-amount .knob__label { display: none; }
  .rnd-amount .knob__value { align-self: center; }
  .cpu { min-width: 52px; }
  .topbar { gap: 6px; }
  .routing { padding-inline: 8px; }.routing__box { padding: 10px 8px 12px; }
  .routing__modes { gap: 4px; }.routing__mode { font-size: 10px; letter-spacing: -.01em; }
  .master-grid--top { grid-template-columns: repeat(2, 1fr); }
  .settings-grid { grid-template-columns: 1fr; gap: 6px; }
  .settings-grid select, .settings-grid input { margin-bottom: 8px; }
  .panel__actions .panel__button { flex: 1 1 calc(50% - 8px); }
}
/* prehliadač presetov: užšie okno → karty v mriežke po 5; mobil → celá obrazovka, posuvný pás kariet, 2 stĺpce zvukov */
/* najužšie telefóny: 1. riadok hlavičky (logo · RND + AMOUNT · CPU · power) sa musí zmestiť → AMOUNT len ako knob */
@media (max-width: 380px) {
  .topbar, .rnd-group { gap: 6px; }
  #randomize { padding: 0 8px; }
  .rnd-amount .knob { --size: 26px; --scale-size: 34px; grid-template-columns: var(--scale-size); grid-template-areas: "stage"; }
  .rnd-amount .knob__value { display: none; }
}
@media (min-width: 601px) and (max-width: 1080px) {
  .preset-browse { grid-template-columns: 200px minmax(0, 1fr); }
  .preset-banks { padding-left: 14px; }
  .preset-save { grid-template-columns: minmax(120px, 1fr) minmax(100px, 150px) minmax(130px, 1.4fr) auto; }
  .preset-save label { grid-column: 1 / -1; }
  .preset-save__hint { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .preset-dialog { width: 100%; height: 100%; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .preset-dialog .panel__head { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .preset-search { order: 3; flex: 1 1 100%; margin: 0; gap: 10px; }
  /* banky: výber v lište (zoznam vľavo nie je); kategórie: posuvný pás */
  .preset-browse { grid-template-columns: minmax(0, 1fr); }
  .preset-banks { display: none; }
  .preset-bankbar { padding: 10px 12px 0; gap: 6px 8px; }
  .preset-bankbar__select { display: block; flex: 1 1 100%; height: 40px; }
  .preset-bankbar__title { flex: 1 1 100%; }
  .preset-bankbar__title h3 { display: none; }
  .preset-bankbar__title h3[hidden] + input { display: block; }
  .preset-bankbar__actions { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .preset-bankbar__actions .panel__button[hidden] { display: none; }
  .preset-tabs { flex-wrap: nowrap; padding: 8px 12px 6px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .preset-tabs::-webkit-scrollbar { display: none; }
  .preset-tab { flex: 0 0 auto; }
  .preset-list { padding: 10px 12px; }
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .preset-foot { gap: 8px; padding: 10px 12px; }
  /* uloženie: popis / banka + kategória / názov + Uložiť / hláška */
  .preset-save { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "label label label" "bank cat cat" "name name btn" "hint hint hint"; }
  .preset-save label { grid-area: label; }
  #preset-save-bank { grid-area: bank; }
  #preset-save-category { grid-area: cat; }
  #preset-save-name { grid-area: name; }
  #preset-save-button { grid-area: btn; }
  .preset-save__hint { grid-area: hint; }
  .preset-foot .panel__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .preset-dialog .panel__status { padding: 0 12px 10px; }
}
@media (pointer: coarse) {
  .preset-tab { min-height: 44px; }
  .preset-item__load { min-height: 52px; }
  .preset-item__delete { min-width: 40px; height: 40px; right: 4px; }
  .preset-item--user .preset-item__load { padding-right: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}