/* KNOBY plug-ins — web kit (ten sam system „device” v2 co wtyczki JUCE: products/plugins/shared) */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #121212; --panel: #1b1b1b; --raised: #262626; --line: #2e2e2e; --track: #333333;
  --faint: #4a4a4a; --dim: #a3a3a3; --label: #d9d9d9; --text: #ffffff; --body: #8c8c8c;
  --ink: #111111; --footer: #0c0c0c; --acc: #ffffff;
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, .knob canvas:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* urządzenie */
.dev { background: var(--bg); min-width: 0; }
.hdr { height: 52px; background: var(--acc); color: var(--ink); display: flex; align-items: center; gap: 0;
  padding: 0 14px 0 18px; border-bottom: 1px solid rgba(17,17,17,.35); }
.hdr .logo { width: 40px; height: 25px; flex: none; color: var(--ink); }
.hdr .wm { font-weight: 200; font-size: 27px; letter-spacing: -.01em; line-height: 1; margin: -3px 0 0 10px; }
.hdr .sep { width: 1px; height: 24px; background: rgba(17,17,17,.45); margin: 0 16px; flex: none; }
.hdr .pn { font-family: var(--mono); font-weight: 600; font-size: 22px; letter-spacing: 0; }
.hdr .tg { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .75; margin-left: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hdr .presets { margin-left: auto; display: flex; gap: 4px; position: relative; flex: none; padding-left: 12px; }
.hb { height: 30px; min-width: 30px; background: var(--ink); color: #fff; border: 0; border-radius: 5px; cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 0 10px; }
.hb:hover { background: #222; }
.hb.pname { width: 196px; text-transform: none; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmenu { position: absolute; top: 34px; right: 34px; width: 196px; background: var(--raised); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px; z-index: 20; display: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.pmenu.on { display: block; }
.pmenu b { display: block; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .16em; color: var(--dim);
  padding: 8px 8px 4px; }
.pmenu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 4px; padding: 7px 8px;
  font-family: var(--mono); font-size: 13px; color: var(--text); cursor: pointer; }
.pmenu button:hover, .pmenu button.cur { background: var(--acc); color: var(--ink); }

.bodyg { padding: 12px; display: grid; gap: 12px; }
.sec { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px 12px; min-width: 0; position: relative; }
.sec > h3 { height: 30px; margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 500;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.sec > h3::before { content: ""; width: 6px; height: 6px; background: var(--acc); flex: none; }
.sec > h3 .r { margin-left: auto; color: var(--dim); letter-spacing: .12em; }

.btn { height: 32px; border-radius: 5px; background: var(--raised); border: 1px solid #3a3a3a; color: var(--text); cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 0 12px;
  white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: #2d2d2d; border-color: var(--faint); }
.btn:active { transform: translateY(1px); }
.btn.on { background: var(--acc); border-color: var(--acc); color: var(--ink); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.big { height: 56px; border-radius: 8px; background: var(--acc); border: 0; color: var(--ink); font-family: var(--sans);
  font-weight: 600; font-size: 20px; letter-spacing: .06em; }
.btn.big:hover { filter: brightness(1.08); }

.ftr { min-height: 28px; background: var(--footer); border-top: 1px solid var(--line); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 6px 16px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.caps { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--label); }
.val { font-family: var(--mono); font-size: 13px; color: var(--text); }

.knobs { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 4px 6px; }
.knob { display: flex; flex-direction: column; align-items: center; user-select: none; -webkit-user-select: none; width: 92px; }
.knob .kl { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); height: 16px; line-height: 16px; white-space: nowrap; }
.knob canvas { display: block; cursor: ns-resize; touch-action: none; }
.knob .kv { font-family: var(--mono); font-size: 13px; color: var(--text); height: 20px; line-height: 20px; white-space: nowrap; }
.knob.active .kl { color: var(--text); }
.knob.active .kv { color: var(--acc); }

@media (max-width: 720px) {
  .hdr { flex-wrap: wrap; height: auto; padding: 10px 12px; row-gap: 8px; }
  .hdr .tg { display: none; }
  .hdr .presets { margin-left: 0; padding-left: 0; width: 100%; }
  .hdr .presets .pname { flex: 1; width: auto; }
  .pmenu { right: 34px; left: 34px; width: auto; }
  .ftr { display: none; }
  .knob { width: 80px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }