/* PURE FILTER E10 · VST FINAL
 * Final hardware/VST finish. Visual only: no DSP changes.
 */

.pf-page{width:min(1160px,calc(100% - 28px));padding-top:24px}
.pf-shell{
  --vst-x:50%;--vst-y:8%;
  padding:22px 24px 24px;
  border-color:#444b46;
  border-radius:13px;
  background:
    radial-gradient(640px 260px at var(--vst-x) var(--vst-y),rgba(255,255,255,.30),transparent 58%),
    radial-gradient(520px 180px at 50% 104%,rgba(31,38,33,.16),transparent 66%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.032) 0 1px,rgba(18,24,20,.018) 1px 3px),
    linear-gradient(102deg,#adb3ad 0%,#e5e7e2 13%,#c0c5bf 36%,#f0f1ed 53%,#b8beb8 76%,#d8dbd5 100%);
  box-shadow:
    0 42px 90px rgba(0,0,0,.46),
    0 12px 24px rgba(0,0,0,.31),
    inset 0 2px rgba(255,255,255,.94),
    inset 0 -4px rgba(37,44,39,.31),
    inset 3px 0 rgba(255,255,255,.24),
    inset -3px 0 rgba(29,35,31,.12)
}
.pf-shell:before{inset:6px;border-color:rgba(255,255,255,.62);border-bottom-color:rgba(27,34,29,.38);box-shadow:inset 0 0 0 1px rgba(32,38,33,.07)}
.pf-screw{width:13px;height:13px;filter:contrast(1.06);box-shadow:0 3px 5px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.82)}

.pf-head{min-height:72px;padding:5px 8px 14px;align-items:flex-start}
.pf-head:after{background:linear-gradient(90deg,transparent 1%,rgba(46,54,48,.28) 18%,rgba(255,255,255,.92) 50%,rgba(46,54,48,.28) 82%,transparent 99%)}
.pf-title strong{font-size:19px;text-shadow:0 1px rgba(255,255,255,.65)}
.pf-title small{color:#414a43;letter-spacing:.16em}
.pf-logo{top:35%;width:clamp(198px,21vw,258px)}
.pf-logo img{filter:drop-shadow(0 1px rgba(255,255,255,.9)) drop-shadow(0 3px 2px rgba(0,0,0,.30)) contrast(1.04)}
.pf-actions{gap:7px}

.pf-btn,.pf-ab,.pf-delta{
  min-height:34px;
  border-color:#515953!important;
  border-radius:4px!important;
  background:linear-gradient(#fafbf8 0%,#d8dcd6 39%,#9da49e 55%,#c7cbc5 100%)!important;
  box-shadow:0 5px 7px rgba(0,0,0,.27),inset 0 1px #fff,inset 0 -2px rgba(39,46,41,.20)!important;
  color:#202621!important;
}
.pf-btn:hover,.pf-ab:hover,.pf-delta:hover{filter:brightness(1.035)}
.pf-btn:active,.pf-ab:active,.pf-delta:active{transform:translateY(1px);box-shadow:0 2px 3px rgba(0,0,0,.24),inset 0 2px 5px rgba(26,31,27,.20)!important}
.pf-delta[aria-pressed="true"],.pf-ab[aria-pressed="true"]{box-shadow:0 2px 4px rgba(0,0,0,.24),inset 0 3px 6px rgba(25,31,26,.25),0 0 0 1px rgba(142,199,34,.28)!important}
.pf-ab i,.pf-delta i{border:1px solid rgba(29,35,30,.34);background:#515a53;box-shadow:inset 0 1px 2px rgba(0,0,0,.55)}
.pf-ab[aria-pressed="true"] i,.pf-delta[aria-pressed="true"] i{background:#b8ff3d;box-shadow:0 0 9px rgba(184,255,61,.72),inset 0 1px #f4ffd8}

.pf-display{
  height:238px;
  margin:1px 4px 8px;
  border-width:6px;
  border-top-color:#111511;border-left-color:#171c18;border-right-color:#555e57;border-bottom-color:#727c73;
  border-radius:10px;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(184,255,61,.055),transparent 55%),
    linear-gradient(180deg,#020403 0%,#07100a 56%,#050805 100%);
  box-shadow:inset 0 22px 42px rgba(0,0,0,.96),inset 0 -10px 24px rgba(67,96,37,.035),0 1px rgba(255,255,255,.88),0 8px 14px rgba(0,0,0,.31)
}
.pf-display:after{z-index:6;left:1.6%;top:-28%;width:68%;height:62%;opacity:.82;mix-blend-mode:screen}
.pf-readout{top:11px;left:15px;right:15px;color:#d1ff62;text-shadow:0 0 7px rgba(184,255,61,.34)}
.pf-axis{bottom:10px;color:rgba(226,235,224,.55)}
.pf-meter{right:12px;top:33px;bottom:29px;border-color:#323b34;background:#010201;box-shadow:inset 0 0 7px #000,0 0 0 1px rgba(255,255,255,.025)}

.pf-controls{
  grid-template-columns:1fr .70fr 1fr;
  margin:0 5px 10px;
  border:1px solid rgba(69,77,70,.32);
  border-top-color:rgba(255,255,255,.68);
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 5px 10px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.32)
}
.pf-channel{
  min-height:330px;
  padding:20px 17px 16px;
  background:
    radial-gradient(circle at 50% 12%,rgba(255,255,255,.31),transparent 31%),
    linear-gradient(95deg,rgba(255,255,255,.18),rgba(70,77,71,.025) 24%,rgba(255,255,255,.08) 50%,rgba(55,62,56,.045) 76%,rgba(255,255,255,.15));
  box-shadow:inset 1px 0 rgba(255,255,255,.66),inset -1px 0 rgba(54,61,56,.19)
}
.pf-channel h2{font-size:12px;letter-spacing:.13em;text-shadow:0 1px rgba(255,255,255,.72)}
.pf-channel>small{color:#4d574f;letter-spacing:.16em}
.pf-resonance{background:linear-gradient(90deg,rgba(38,44,40,.055),rgba(255,255,255,.16) 50%,rgba(38,44,40,.055))}

.pf-knob-wrap{width:138px;height:138px;margin:18px auto 9px}
.pf-knob-wrap:before{
  content:"";position:absolute;inset:1px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -136deg,rgba(42,49,43,.48) 0deg 1deg,transparent 1deg 13.4deg);
  -webkit-mask:radial-gradient(circle,transparent 0 67%,#000 68% 72%,transparent 73%);
  mask:radial-gradient(circle,transparent 0 67%,#000 68% 72%,transparent 73%);
  opacity:.48
}
.pf-knob{
  inset:12px;
  border-color:#424a44;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.98) 0 3%,rgba(255,255,255,.38) 4% 9%,transparent 10%),
    radial-gradient(circle at 46% 44%,#c9cdc8 0 14%,#8d958f 34%,#515a53 53%,#aab0aa 70%,#e0e2de 82%,#737b74 100%);
  box-shadow:0 12px 18px rgba(0,0,0,.38),0 4px 5px rgba(0,0,0,.30),inset 0 2px 2px rgba(255,255,255,.76),inset 0 -4px 6px rgba(31,37,32,.34),0 0 0 3px rgba(72,80,74,.12)
}
.pf-knob:before{top:9px;width:3px;height:36px;background:linear-gradient(#f3ffc5,#b8ff3d 38%,#78a91f);box-shadow:0 0 7px rgba(184,255,61,.58);transform-origin:50% 53px}
.pf-knob:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%);border:1px solid rgba(61,68,63,.44);border-radius:50%;background:radial-gradient(circle at 36% 30%,#e7e9e5,#8f9790 58%,#555d57 100%);box-shadow:0 2px 3px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.65)}
.pf-knob-wrap:hover .pf-knob{filter:brightness(1.025)}
.pf-resonance .pf-knob-wrap{width:122px;height:122px;margin-top:23px}
.pf-resonance .pf-knob{inset:13px}
.pf-resonance .pf-knob:before{height:29px;transform-origin:50% 43px}
.pf-resonance .pf-knob:after{width:16px;height:16px}

.pf-value{
  min-width:100px;height:30px;border-color:#202620;
  background:linear-gradient(#020403,#0c120d 54%,#111712);
  box-shadow:inset 0 4px 8px #000,0 1px rgba(255,255,255,.67),0 2px 3px rgba(0,0,0,.12);
  color:#d0ff5d;text-shadow:0 0 6px rgba(184,255,61,.36)
}
.pf-value:focus{outline:1px solid rgba(184,255,61,.55);outline-offset:2px}
.pf-resonance-delta{border-color:rgba(54,64,56,.64);background:linear-gradient(#0d120e,#070a08);color:#8fa969;box-shadow:inset 0 2px 5px #000,0 1px rgba(255,255,255,.48)}

.pf-slope{height:29px;margin-top:16px;border-color:#505851;box-shadow:0 4px 6px rgba(0,0,0,.24),inset 0 1px #fff}
.pf-slope button{background:linear-gradient(#f6f7f4 0%,#d2d6d0 43%,#969d97 57%,#c2c6c0 100%);color:#303731;text-shadow:0 1px rgba(255,255,255,.55)}
.pf-slope button:hover{filter:brightness(1.045)}
.pf-slope button.is-active{background:linear-gradient(#efffc0 0%,#c8f76e 35%,#8fc52a 58%,#a8db3d 100%);box-shadow:inset 0 1px #fbffe9,inset 0 -2px rgba(56,88,18,.32),0 0 7px rgba(184,255,61,.13)}

.pf-filter-toggle{box-shadow:0 3px 5px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.65)!important}
.pf-filter-toggle[aria-pressed="true"]{text-shadow:0 0 5px rgba(184,255,61,.24)}
.pf-channel.is-filter-off{filter:saturate(.75)}
.pf-channel.is-filter-off .pf-filter-toggle{opacity:.75}

.pf-reset-small,.pf-freq-reset{background:linear-gradient(#f6f7f4,#c7cbc5 46%,#9ba19b 55%,#c2c6c0)!important;box-shadow:0 3px 5px rgba(0,0,0,.20),inset 0 1px #fff!important}

.pf-file{margin:8px 5px 13px;border-color:#252b27;border-radius:7px;box-shadow:inset 0 10px 22px rgba(0,0,0,.84),0 1px rgba(255,255,255,.86),0 6px 10px rgba(0,0,0,.20)}
.pf-load{min-height:70px}
.pf-load__icon{width:42px;height:42px;border-color:#687b2b;background:radial-gradient(circle at 37% 30%,#39413a,#121713 66%);box-shadow:inset 0 4px 8px #000,0 1px rgba(255,255,255,.13)}

.pf-transport{margin:0 6px;gap:10px}
.pf-play,.pf-export{height:40px}
.pf-play{box-shadow:0 5px 7px rgba(0,0,0,.29),inset 0 1px #fff,inset 0 -2px rgba(35,42,36,.14)}
.pf-format{height:36px;border-color:#303731}
.pf-export{background:linear-gradient(#ecffae 0%,#c8ee70 18%,#93c52e 51%,#75a81b 57%,#a7d83f 100%);box-shadow:0 5px 8px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.88),inset 0 -2px rgba(54,82,18,.18)}
.pf-export:hover:not(:disabled){filter:brightness(1.045)}

.pf-tp-readout{border-color:#273029;background:linear-gradient(#060d07,#010302);box-shadow:inset 0 3px 8px #000,0 1px rgba(255,255,255,.07),0 3px 6px rgba(0,0,0,.16)}
.pf-tp-readout b{color:#d0ff5d;text-shadow:0 0 6px rgba(184,255,61,.35)}
.pf-tp-gauge{height:4px}

.pf-note{max-width:980px;margin-left:auto;margin-right:auto}

@media(max-width:820px){
  .pf-shell{padding:19px 17px 21px}
  .pf-controls{grid-template-columns:1fr}
  .pf-channel{min-height:300px;border-right:0;border-left:0;border-bottom:1px solid rgba(72,80,73,.35)}
  .pf-knob-wrap{width:126px;height:126px}
  .pf-display{height:225px;margin-left:0;margin-right:0}
}