/* HALFTONE web — Liquid Glass, порт src/ui.rs + src/glass.rs.
   Все размеры в px = логические точки egui (десктоп при масштабе 100 %). */
:root {
  color-scheme: dark;
  --lime: #c8ff3d;
  --on-lime: #0b1200;
  --label: #fff;
  --sec: rgba(255, 255, 255, .62);
  --ter: rgba(255, 255, 255, .38);
  --fill: rgba(255, 255, 255, .08);
  --fill-hi: rgba(255, 255, 255, .14);
  --sep: rgba(255, 255, 255, .10);
  --track: rgba(255, 255, 255, .16);
  --value: rgba(255, 255, 255, .85);
  --pill: rgb(245, 245, 245);
  --on-pill: rgb(12, 12, 12);
  --danger: rgb(255, 105, 97);
  --menu: rgb(30, 30, 30);
  --accent: #c8ff3d;
  --accent-soft: #9fc43a;
  --row-sel: rgba(255, 255, 255, .13);
  --row-sel-line: rgba(255, 255, 255, .14);
  --veil-top: rgba(255, 255, 255, .10);
  --veil-bot: rgba(255, 255, 255, .04);
  --glass-line: rgba(255, 255, 255, .28);
  --glass-shadow: rgba(0, 0, 0, .32);
  --glass-tight: rgba(0, 0, 0, .25);
  --mat: rgba(255, 255, 255, .055);
  --mat-line: rgba(255, 255, 255, .07);
  --knob-fill: rgb(38, 38, 38);
  --knob-fill-hi: rgb(46, 46, 46);
  --knob-rim: rgba(255, 255, 255, .14);
  --bg-base: none;
  --bg-soft: none;
  --font: "Segoe UI", "Segoe UI Variable Text", "Segoe Fluent Icons", "Segoe MDL2 Assets", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --icons: "Segoe Fluent Icons", "Segoe MDL2 Assets";
  --menu-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
:root.light {
  color-scheme: light;
  --label: rgb(10, 10, 10);
  --sec: rgba(0, 0, 0, .58);
  --ter: rgba(0, 0, 0, .36);
  --fill: rgba(0, 0, 0, .05);
  --fill-hi: rgba(0, 0, 0, .09);
  --sep: rgba(0, 0, 0, .08);
  --track: rgba(0, 0, 0, .12);
  --value: rgba(0, 0, 0, .72);
  --pill: rgb(18, 18, 18);
  --on-pill: #fff;
  --danger: rgb(215, 40, 60);
  --menu: rgb(250, 250, 250);
  --accent: #9cd400;
  --accent-soft: #8cba1e;
  --row-sel: rgba(255, 255, 255, .75);
  --row-sel-line: #fff;
  --veil-top: rgba(255, 255, 255, .62);
  --veil-bot: rgba(255, 255, 255, .42);
  --glass-line: rgba(255, 255, 255, .95);
  --glass-shadow: rgba(0, 0, 0, .10);
  --glass-tight: rgba(0, 0, 0, .08);
  --mat: rgba(255, 255, 255, .50);
  --mat-line: rgba(0, 0, 0, .07);
  --knob-fill: rgb(250, 250, 250);
  --knob-fill-hi: #fff;
  --knob-rim: rgba(0, 0, 0, .10);
  --menu-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
:root.light body { background: rgb(232, 232, 232); }
body { font: 13.5px/1.25 var(--font); font-synthesis: none; color: var(--label); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; cursor: default; }
button, input, select { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
input { user-select: text; -webkit-user-select: text; }
.app { position: fixed; inset: 0; overflow: hidden; min-width: 1060px; min-height: 660px; }
@media (max-width: 1060px), (max-height: 660px) { html, body { overflow: auto; } .app { position: absolute; width: max(100vw, 1060px); height: max(100vh, 660px); } }
.bg { position: absolute; inset: 0; background: var(--bg-base) 0 0 / 100% 100% no-repeat; }
.layer { position: absolute; inset: 0; }
.abs { position: absolute; }
.row { position: absolute; display: flex; align-items: center; gap: 8px; }
.row.rtl { flex-direction: row-reverse; }
.col { position: absolute; display: flex; flex-direction: column; }
.semi { font-weight: 600; }
.bold { font-weight: 700; }
.t { position: absolute; white-space: nowrap; line-height: 1.33; pointer-events: none; }
.clip { overflow: hidden; text-overflow: ellipsis; }
.c-sec { color: var(--sec); }
.c-ter { color: var(--ter); }
.c-danger { color: var(--danger); }
.ico { font-family: var(--icons); font-weight: 400; font-style: normal; line-height: 1; }
.noicons .ico { font-family: var(--font); }
.label { white-space: pre; color: var(--label); }
.pointer { cursor: pointer; }

/* ---------- стекло ---------- */
.glass {
  position: absolute;
  background: linear-gradient(var(--veil-top), var(--veil-bot)), var(--bg-soft) 0 0 / 100vw 100vh fixed;
  background-attachment: scroll, fixed;
  box-shadow: 0 calc(10px * var(--k, 1)) calc(30px * var(--k, 1)) var(--glass-shadow), 0 1px 2px var(--glass-tight), inset 0 1px 0 var(--glass-line);
}
:root.light .glass { box-shadow: 0 calc(10px * var(--k, 1)) calc(30px * var(--k, 1)) var(--glass-shadow), 0 1px 2px var(--glass-tight), inset 0 1px 0 var(--glass-line), inset 0 0 0 1px rgba(0, 0, 0, .07); }
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .12) 28%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .10) 72%, rgba(255, 255, 255, .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass.tint {
  background: linear-gradient(rgba(80, 120, 0, 0), rgba(80, 120, 0, .27)), linear-gradient(rgba(200, 255, 61, .88), rgba(200, 255, 61, .88)), var(--bg-soft) 0 0 / 100vw 100vh fixed;
  background-attachment: scroll, scroll, fixed;
  box-shadow: 0 calc(8px * var(--k, 1)) calc(26px * var(--k, 1)) rgba(170, 230, 30, .35), 0 1px 2px var(--glass-tight), inset 0 1px 0 rgba(255, 255, 255, .70);
  color: var(--on-lime);
}
.glass.tint::after { opacity: .8; }
.reduce .glass { background: rgb(30, 30, 30); box-shadow: 0 calc(10px * var(--k, 1)) calc(30px * var(--k, 1)) var(--glass-shadow), inset 0 0 0 1px rgba(255, 255, 255, .10); }
.reduce .glass::after { display: none; }
:root.light .reduce .glass { background: rgb(250, 250, 250); box-shadow: 0 calc(10px * var(--k, 1)) calc(30px * var(--k, 1)) var(--glass-shadow), inset 0 0 0 1px rgba(0, 0, 0, .10); }
.reduce .glass.tint { background: var(--lime); box-shadow: 0 calc(8px * var(--k, 1)) calc(26px * var(--k, 1)) rgba(170, 230, 30, .35); }
.material { position: absolute; background: var(--mat); box-shadow: inset 0 0 0 1px var(--mat-line); }
@supports (corner-shape: squircle) { .sq { corner-shape: squircle; } }

/* слоты раскладок: перетекают (ease-out-back) */
.slot { transition: left .35s var(--ease-morph), top .35s var(--ease-morph), width .35s var(--ease-morph), height .35s var(--ease-morph), opacity .35s linear, border-radius .35s var(--ease-morph); }
.content.fade-out { opacity: 0; transition: opacity .15s linear; pointer-events: none; }
.content.fade-in { animation: fadein .2s cubic-bezier(.33, 1, .68, 1) both; }
@keyframes fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.disabled { pointer-events: none; opacity: .5; }

/* ---------- тумблер 40×24 ---------- */
.tg { position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--track); cursor: pointer; flex: none; transition: background calc(var(--dur-toggle) * .6) ease; }
.tg:hover { background: color-mix(in srgb, var(--track), var(--label) 8%); }
:root.light .tg { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.tg.on, .tg.on:hover { background: var(--accent-soft); }
:root.light .tg.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tg i { position: absolute; top: 2px; left: 2px; width: 26px; height: 20px; border-radius: 10px; background: #fff; box-shadow: 0 1.5px 4px rgba(0, 0, 0, .25); transition: transform var(--dur-toggle) var(--ease-toggle), width var(--dur-press) var(--ease-press), height var(--dur-press) var(--ease-press), top var(--dur-press) var(--ease-press); }
.tg.on i { transform: translateX(10px); }
.tg:active i { width: 32px; height: 19px; top: 2.5px; }
.tg.on:active i { transform: translateX(4px); }

/* ---------- слайдер ---------- */
.sl { position: absolute; height: 30px; cursor: pointer; touch-action: none; }
.sl .tr { position: absolute; top: 12.5px; height: 5px; border-radius: 2.5px; background: var(--track); }
.sl .fi { position: absolute; top: 12.5px; height: 5px; border-radius: 2.5px; background: var(--value); }
.sl.lime .fi { background: var(--accent); }
.sl .kn { position: absolute; top: 15px; width: 24px; height: 17px; margin: -8.5px 0 0 -12px; border-radius: 8.5px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .30);
  transition: width var(--dur-lens) var(--ease-lens), height var(--dur-lens) var(--ease-lens), margin var(--dur-lens) var(--ease-lens), border-radius var(--dur-lens) var(--ease-lens), background .12s, box-shadow .12s; }
:root.light .sl .kn { box-shadow: 0 2px 6px rgba(0, 0, 0, .30), inset 0 0 0 1px rgba(0, 0, 0, .10); }
.sl:hover .kn { width: 26px; height: 18px; margin: -9px 0 0 -13px; border-radius: 9px; }
.sl.drag .kn, .vf.drag .kn { width: 40px; height: 29px; margin: -14.5px 0 0 -20px; border-radius: 14.5px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .10)), rgba(255, 255, 255, .12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .8); }
:root.light .sl.drag .kn, :root.light .vf.drag .kn { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .10)), rgba(255, 255, 255, .35); box-shadow: 0 4px 14px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(0, 0, 0, .10); }
.sl.drag.lime .kn::before { content: ""; position: absolute; left: 6px; top: 12px; height: 5px; width: var(--lf, 0); border-radius: 2.5px; background: var(--accent); }
.reduce .sl.drag .kn, .reduce .vf.drag .kn { background: rgb(70, 70, 70); box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .5); }

/* ---------- вертикальный фейдер ---------- */
.vf { position: absolute; cursor: ns-resize; touch-action: none; }
.vf .tr { position: absolute; left: calc(50% - 3px); width: 6px; border-radius: 3px; background: var(--track); }
.vf .glow { position: absolute; left: calc(50% - 6px); width: 12px; border-radius: 6px; background: rgba(200, 255, 61, .10); }
:root.light .vf .glow { display: none; }
.vf .fi { position: absolute; left: calc(50% - 3px); width: 6px; border-radius: 3px; background: var(--accent); }
.vf .kn { position: absolute; left: 50%; width: 42px; height: 22px; margin: -11px 0 0 -21px; border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  transition: width var(--dur-lens) var(--ease-lens), height var(--dur-lens) var(--ease-lens), margin var(--dur-lens) var(--ease-lens), border-radius var(--dur-lens) var(--ease-lens), background .12s; }
.vf.drag .kn { width: 56px; height: 34px; margin: -17px 0 0 -28px; border-radius: 17px; }
.vf.drag .kn::before { content: ""; position: absolute; left: calc(50% - 3px); top: 17px; bottom: 5px; width: 6px; border-radius: 3px; background: var(--accent); }

/* ---------- ручка ---------- */
.knob { position: absolute; cursor: ns-resize; touch-action: none; }
.knob svg { position: absolute; inset: 0; overflow: visible; }
.knob .body { position: absolute; border-radius: 50%; background: var(--knob-fill); box-shadow: 0 3px 8px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--knob-rim); transition: transform var(--dur-grab) var(--ease-grab); }
:root.light .knob .body { box-shadow: 0 3px 8px rgba(0, 0, 0, .15), inset 0 0 0 1px var(--knob-rim); }
.knob:hover .body, .knob.drag .body { background: var(--knob-fill-hi); }
.knob.drag .body { transform: scale(1.07); }

/* ---------- сегменты ---------- */
.seg { position: relative; height: 36px; border-radius: 18px; padding: 3px; display: inline-flex; flex: none; }
.seg .pl { position: absolute; top: 3px; height: 30px; border-radius: 15px; background: var(--pill); box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  transition: left var(--dur-seg) var(--ease-seg), width var(--dur-seg) var(--ease-seg); }
.seg button { position: relative; height: 30px; border-radius: 15px; font-weight: 600; font-size: 13px; color: var(--label); cursor: pointer; white-space: nowrap; transition: color .12s; }
.seg button:hover:not(.on) { background: var(--fill); }
.seg button.on { color: var(--on-pill); cursor: default; }
.seg button.ico { font-size: 14px; font-weight: 400; }
.seg.dis { pointer-events: none; opacity: .5; }

/* ---------- кнопки ---------- */
.rb { position: absolute; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: transform var(--dur-press) var(--ease-press); flex: none; }
.rb:hover { transform: scale(1.03); }
.rb:active { transform: scale(.87); }
.rb.plain { color: var(--sec); }
.rb.plain:hover { color: var(--label); background: var(--fill); transform: none; }
.rb.plain:active { transform: scale(.87); }
.rb.glass { color: var(--label); }
.rb.lime { color: var(--on-lime); }
.rb .ico { pointer-events: none; }
.rb.dis, .gb.dis { pointer-events: none; opacity: .45; }
.inl { position: relative !important; }
.gb { position: relative; height: 32px; padding: 0 15px; border-radius: 16px; font-weight: 600; font-size: 13px; color: var(--label); cursor: pointer; white-space: nowrap; flex: none; transition: transform var(--dur-press) var(--ease-press); }
.gb:hover { transform: scale(1.0175); }
.gb:active { transform: scale(.93); }
.tb { position: relative; padding: 4px 4px; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: pre; flex: none; }
.tb:hover { color: var(--label) !important; }
.tb.dis { pointer-events: none; opacity: .5; }
.primary { position: absolute; border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; display: grid; place-items: center; transition: transform var(--dur-press) var(--ease-press), left .35s var(--ease-morph), top .35s var(--ease-morph), width .35s var(--ease-morph), height .35s var(--ease-morph); overflow: visible; z-index: 5; }
.primary:hover { transform: scale(1.015); }
.primary:active { transform: scale(.94); }
.primary.off { color: var(--ter); cursor: default; transform: none; }
.primary .pf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: rgba(200, 255, 61, .85); }
.primary span { position: relative; white-space: nowrap; }

/* выпадашка «Basic ⌃⌄» */
.dd { position: relative; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--label); cursor: pointer; white-space: nowrap; padding: 0 44px 0 15px; text-align: left; flex: none; transition: transform var(--dur-press) var(--ease-press); }
.dd:hover { transform: scale(1.0175); }
.dd:active { transform: scale(.93); }
.dd .chev { position: absolute; right: 11px; top: 50%; width: 8px; height: 12px; margin-top: -6px; }
.dd.dis { pointer-events: none; opacity: .5; }

/* меню */
.menu { position: fixed; z-index: 50; min-width: 180px; padding: 6px; border-radius: 14px; background: var(--menu); box-shadow: var(--menu-shadow), inset 0 0 0 1px rgba(255, 255, 255, .12); display: flex; flex-direction: column; gap: 8px; animation: menuin .12s ease-out; }
:root.light .menu { box-shadow: var(--menu-shadow), inset 0 0 0 1px rgba(0, 0, 0, .08); }
@keyframes menuin { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu .mi { position: relative; height: 30px; border-radius: 8px; padding-left: 30px; display: flex; align-items: center; cursor: pointer; white-space: nowrap; font-size: 13.5px; padding-right: 12px; }
.menu .mi:hover { background: var(--fill-hi); }
.menu .mi .ck { position: absolute; left: 8px; width: 12px; text-align: center; font-size: 11px; }
.menu .mi.danger { color: var(--danger); padding-left: 8px; }
.menu .mi.dis { opacity: .4; pointer-events: none; }
.menu hr { border: 0; height: 1px; background: var(--sep); margin: 0 2px; }
.menu .cap { font-weight: 600; font-size: 12px; color: var(--ter); padding: 0 2px; }
.menu .note { font-size: 12px; color: var(--sec); padding: 0 2px; max-width: 290px; white-space: normal; }
.menu .tl { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 0 2px; }
.menu .hrow { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.tf { height: 30px; border-radius: 10px; background: var(--fill); padding: 0 8px; color: var(--label); font-size: 13.5px; }
.tf:focus { box-shadow: inset 0 0 0 1px var(--label); }

/* строки треков */
.trow { position: relative; flex: none; border-radius: 12px; cursor: pointer; transition: transform var(--dur-press) var(--ease-press); }
.trow:hover { background: var(--fill); }
.trow:active { transform: scale(.97); }
.trow.sel, .trow.sel:hover { background: var(--row-sel); box-shadow: inset 0 1px 0 var(--row-sel-line); }
.trow .tt { position: absolute; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.33; }
.trow .ts { position: absolute; font-size: 11.5px; color: var(--sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.33; }
.trow .dot { position: absolute; right: 11px; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.thumb { position: absolute; overflow: hidden; background: var(--fill) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--sep); display: grid; place-items: center; color: var(--ter); }
.thumb.img { box-shadow: none; }
.thumb .play { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; color: var(--lime); font-size: 13px; }
.list { position: absolute; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.hscroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.vscroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.drophint { position: absolute; pointer-events: none; box-shadow: inset 0 0 0 2px var(--accent); }

/* значение с точным вводом (DragValue) */
.ve { position: relative; border-radius: 4px; padding: 1px 4px; cursor: ew-resize; white-space: nowrap; line-height: 1.33; flex: none; touch-action: none; }
.ve:hover { background: var(--fill); }
.ve-in { position: relative; background: var(--fill); border-radius: 4px; padding: 1px 4px; color: var(--label); text-align: right; width: 64px; }
.ne { position: absolute; background: none; color: var(--label); font-weight: 600; padding: 2px 0; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.ne.off { color: var(--ter); }
.ne::placeholder { color: var(--ter); }

canvas.wave { position: absolute; }
.tip { position: fixed; z-index: 60; background: var(--menu); color: var(--label); border-radius: 8px; padding: 4px 8px; font-size: 12.5px; pointer-events: none; box-shadow: var(--menu-shadow); white-space: pre-line; max-width: 420px; }

/* шаги */
.chip { position: relative; height: 42px; border-radius: 21px; background: var(--fill); cursor: pointer; flex: none; }
.chip:hover { background: var(--fill-hi); }
.chip.sel { background: var(--pill); color: var(--on-pill); }
.chip .x { position: absolute; right: 7px; top: 10px; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: 9px; }
.chip .x:hover { background: var(--fill-hi); }
.chip.sel .x:hover { background: rgba(0, 0, 0, .08); }
.addchip { height: 40px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--ter); color: var(--sec); padding: 0 18px; white-space: nowrap; cursor: pointer; flex: none; font-size: 13px; }
.addchip:hover { box-shadow: inset 0 0 0 1px var(--sec); color: var(--label); }
.tile { position: absolute; cursor: pointer; transition: transform var(--dur-press) var(--ease-press); }
.tile:active { transform: scale(.965); }
.tile .hov { position: absolute; inset: 0; border-radius: inherit; background: var(--fill); opacity: 0; }
.tile:hover .hov { opacity: 1; }
.tile.sel .hov { opacity: 0; }
.tile .selring { position: absolute; inset: 1px; border-radius: 19px; box-shadow: inset 0 0 0 2px var(--accent), 0 0 22px rgba(200, 255, 61, .10); opacity: 0; transition: opacity .2s; }
.tile.sel .selring { opacity: 1; }
.tile .ck { position: absolute; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: 10px; }
.tile .ck.on { background: var(--accent-soft); color: var(--on-lime); }
.tile .ck.off { box-shadow: inset 0 0 0 1.5px var(--ter); }
.tile .ck.off:hover { box-shadow: inset 0 0 0 1.5px var(--sec); }
.step { position: absolute; width: 28px; height: 28px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 13px; }