/* PURE FILTER · RENDERED HARDWARE FINISH
 * Visual-only layer over E10.1. No audio/DSP changes.
 * Goal: make the live web UI feel closer to a polished product render.
 */

:root{
  --pf-render-metal-hi:#f4f5f1;
  --pf-render-metal:#c9cdc7;
  --pf-render-metal-lo:#8f9690;
  --pf-render-edge:#444b46;
  --pf-render-ink:#171c18;
  --pf-render-green:#b8ff3d;
}

.pf-page{width:min(1180px,calc(100% - 28px));padding-top:22px}

/* Main machined chassis */
.pf-shell{
  position:relative;
  padding:23px 25px 25px;
  border:1px solid #363c38;
  border-radius:14px;
  background:
    radial-gradient(720px 250px at var(--vst-x,50%) var(--vst-y,7%),rgba(255,255,255,.34),transparent 57%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.030) 0 1px,rgba(28,34,30,.016) 1px 2px,transparent 2px 4px),
    linear-gradient(100deg,#aeb4ae 0%,#e7e9e4 14%,#c0c5bf 31%,#f4f5f1 50%,#b9bfb9 72%,#d9dcd6 100%);
  box-shadow:
    0 48px 96px rgba(0,0,0,.48),
    0 14px 28px rgba(0,0,0,.31),
    0 3px 5px rgba(0,0,0,.28),
    inset 0 2px rgba(255,255,255,.98),
    inset 0 -5px rgba(35,42,37,.30),
    inset 4px 0 rgba(255,255,255,.24),
    inset -4px 0 rgba(38,44,40,.12);
}
.pf-shell::before{
  inset:6px;
  border:1px solid rgba(255,255,255,.75);
  border-right-color:rgba(48,55,50,.30);
  border-bottom-color:rgba(41,48,43,.40);
  border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(38,44,40,.08),0 1px rgba(255,255,255,.25);
}
.pf-shell::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10px -7px -10px;
  border-radius:17px;
  background:#111512;
  box-shadow:0 18px 34px rgba(0,0,0,.32);
}

/* Screws: deeper countersunk hardware */
.pf-screw{
  width:14px;height:14px;
  background:
    linear-gradient(45deg,transparent 45%,rgba(18,22,19,.78) 46% 52%,transparent 53%),
    radial-gradient(circle at 34% 25%,#fff 0 4%,#e7e9e5 12%,#a8aea8 31%,#636a64 55%,#2f3531 73%,#171b18 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.88),0 0 0 1px rgba(34,40,35,.46);
}

/* Header / logo */
.pf-head{min-height:76px;padding:5px 10px 16px}
.pf-head::after{height:2px;background:linear-gradient(90deg,transparent,rgba(44,51,46,.22) 18%,rgba(255,255,255,.86) 50%,rgba(44,51,46,.22) 82%,transparent)}
.pf-title strong{font-size:20px;letter-spacing:-.025em;color:#191e1a;text-shadow:0 1px #fff,0 2px 2px rgba(0,0,0,.12)}
.pf-title small{margin-top:5px;color:#39413b;letter-spacing:.17em;text-shadow:0 1px rgba(255,255,255,.72)}
.pf-logo{top:34%;width:clamp(210px,22vw,275px)}
.pf-logo img{filter:drop-shadow(0 1px #fff) drop-shadow(0 4px 3px rgba(0,0,0,.36)) contrast(1.05)}

/* Top hardware buttons */
.pf-btn,.pf-ab,.pf-delta{
  min-height:36px!important;
  border:1px solid #454c47!important;
  border-radius:5px!important;
  background:linear-gradient(#fafbf8 0%,#e0e3dd 37%,#a5aca6 53%,#c7cbc5 100%)!important;
  box-shadow:
    0 5px 7px rgba(0,0,0,.29),
    0 1px 1px rgba(0,0,0,.20),
    inset 0 1px #fff,
    inset 0 -2px rgba(48,55,50,.22)!important;
  text-shadow:0 1px rgba(255,255,255,.66);
}
.pf-btn:hover,.pf-ab:hover,.pf-delta:hover{filter:brightness(1.045) contrast(1.01)}
.pf-btn:active,.pf-ab:active,.pf-delta:active{transform:translateY(1px);box-shadow:0 2px 3px rgba(0,0,0,.25),inset 0 3px 6px rgba(38,44,39,.22)!important}
.pf-ab i,.pf-delta i{width:7px;height:7px;border-radius:50%;background:#3d4540;box-shadow:inset 0 1px 2px rgba(0,0,0,.68),0 1px rgba(255,255,255,.45)}
.pf-ab[aria-pressed="true"] i,.pf-delta[aria-pressed="true"] i{background:var(--pf-render-green);box-shadow:0 0 9px rgba(184,255,61,.72),inset 0 1px #f7ffdf}

/* Analyzer: recessed glass display with deep metal bezel */
.pf-display{
  height:242px;
  margin:2px 4px 10px;
  border:7px solid #242a26;
  border-top-color:#0b0f0c;
  border-left-color:#111713;
  border-right-color:#626a63;
  border-bottom-color:#747d75;
  border-radius:11px;
  background:
    radial-gradient(ellipse at 50% 56%,rgba(184,255,61,.045),transparent 58%),
    linear-gradient(#010302,#050a06 52%,#030603);
  box-shadow:
    inset 0 23px 46px rgba(0,0,0,.98),
    inset 0 -14px 30px rgba(86,120,47,.035),
    0 1px rgba(255,255,255,.94),
    0 0 0 2px rgba(48,55,50,.45),
    0 9px 15px rgba(0,0,0,.34);
}
.pf-display::before{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 15%),
    radial-gradient(ellipse at 25% -10%,rgba(255,255,255,.065),transparent 38%);
  mix-blend-mode:screen;
}
.pf-display::after{z-index:6;opacity:.55;left:1%;top:-31%;width:60%;height:58%}
.pf-readout{color:#d3ff67;text-shadow:0 0 7px rgba(184,255,61,.35)}
.pf-axis{color:rgba(234,239,232,.58);text-shadow:0 1px #000}
.pf-meter{border-color:#303831;background:#010201;box-shadow:inset 0 0 7px #000,0 0 0 1px rgba(255,255,255,.05)}
.pf-tp-readout{border-color:#2c342d;background:linear-gradient(#071008,#010302);box-shadow:inset 0 3px 9px #000,0 1px rgba(255,255,255,.07),0 3px 5px rgba(0,0,0,.18)}

/* Three machined control bays */
.pf-controls{
  position:relative;
  grid-template-columns:1fr .72fr 1fr;
  margin:0 5px 12px;
  border:1px solid #858b85;
  border-top-color:#f4f5f1;
  border-bottom-color:#6e756f;
  border-radius:7px;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(47,54,49,.03),rgba(255,255,255,.13));
  box-shadow:0 6px 11px rgba(0,0,0,.15),inset 0 1px rgba(255,255,255,.72),inset 0 -2px rgba(48,55,50,.11);
}
.pf-channel{
  min-height:344px;
  padding:21px 19px 18px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.017) 0 1px,transparent 1px 3px),
    linear-gradient(96deg,rgba(255,255,255,.22),rgba(69,76,70,.018) 32%,rgba(255,255,255,.11) 56%,rgba(55,62,56,.04));
  border-left:1px solid rgba(255,255,255,.68);
  border-right:1px solid rgba(73,80,74,.48);
  box-shadow:inset 1px 0 rgba(255,255,255,.42),inset -1px 0 rgba(53,60,55,.09);
}
.pf-channel:first-child{border-left:0}.pf-channel:last-child{border-right:0}
.pf-resonance{background:linear-gradient(90deg,rgba(52,59,54,.035),rgba(255,255,255,.20) 48%,rgba(52,59,54,.035))}
.pf-channel h2{font-size:13px;letter-spacing:.11em;color:#171c18;text-shadow:0 1px #fff,0 2px 2px rgba(0,0,0,.09)}
.pf-channel>small{color:#49524b;letter-spacing:.14em;text-shadow:0 1px rgba(255,255,255,.70)}

/* Clean rendered white knobs: smooth bezel, ivory ceramic face, contact shadow. */
.pf-knob-wrap{filter:drop-shadow(0 10px 8px rgba(0,0,0,.23))}
.pf-knob-wrap::before{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:0!important;
  border-radius:50%!important;
  background:radial-gradient(circle,#f4f5f1 0 61%,#d8dbd6 62% 67%,#7c837d 68% 72%,#d7dad5 73% 77%,transparent 78%)!important;
  -webkit-mask:none!important;
  mask:none!important;
  opacity:1!important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.34))!important;
}
.pf-knob{
  border:1px solid #8b918b!important;
  background:
    linear-gradient(145deg,#fff 0%,#f8f7f2 28%,#ecebe5 55%,#d9d8d1 77%,#b7bbb5 100%)!important;
  box-shadow:
    0 13px 17px rgba(0,0,0,.36),
    0 4px 5px rgba(0,0,0,.30),
    inset 0 2px 2px rgba(255,255,255,.96),
    inset 0 -7px 10px rgba(84,91,85,.25),
    inset 6px 0 10px rgba(255,255,255,.16),
    0 0 0 3px #d8dbd6,
    0 0 0 5px #656c66,
    0 0 0 7px rgba(240,241,237,.92)!important;
}
.pf-knob::before{
  width:4px!important;
  border-radius:3px!important;
  background:linear-gradient(90deg,#171b18,#3b413d 58%,#111411)!important;
  box-shadow:1px 0 rgba(255,255,255,.72),0 1px 1px rgba(0,0,0,.22)!important;
}
.pf-knob::after{border-color:rgba(90,97,91,.16)!important;background:none!important;box-shadow:inset 0 1px rgba(255,255,255,.33)!important}
.pf-knob-wrap:hover .pf-knob{filter:brightness(1.015)}

/* Calibration marks integrate into the chassis instead of floating over it. */
.pf-param-scale{color:#2f3631;text-shadow:0 1px rgba(255,255,255,.86)}
.pf-param-scale svg{filter:drop-shadow(0 1px rgba(255,255,255,.70))}
.pf-param-scale .pf-scale-arc{stroke:rgba(47,54,49,.62);stroke-width:1.25}
.pf-param-scale .pf-scale-arc-hi{stroke:rgba(255,255,255,.80);stroke-width:.55}
.pf-param-scale .pf-scale-tick{stroke:rgba(48,55,50,.58)}
.pf-param-scale .pf-scale-tick.is-major{stroke:rgba(29,35,31,.88)}
.pf-resonance .pf-param-scale .pf-scale-label--mid{background:linear-gradient(rgba(238,240,235,.96),rgba(207,211,205,.96));border:1px solid rgba(112,119,113,.22);box-shadow:0 1px rgba(255,255,255,.78),0 2px 3px rgba(0,0,0,.07)}

/* Readouts: inset black glass */
.pf-value{
  border:1px solid #202620!important;
  border-bottom-color:#4e5750!important;
  background:linear-gradient(#010302,#081008 55%,#0d140e)!important;
  box-shadow:inset 0 4px 9px #000,0 1px rgba(255,255,255,.72),0 3px 4px rgba(0,0,0,.14)!important;
  color:#d1ff61!important;
  text-shadow:0 0 6px rgba(184,255,61,.35)!important;
}
.pf-resonance-delta{background:linear-gradient(#0a0e0b,#030504)!important;border-color:#303832!important;box-shadow:inset 0 3px 7px #000,0 1px rgba(255,255,255,.50)!important}

/* Switches and slope keys */
.pf-filter-toggle{
  border:1px solid #363d38!important;
  background:linear-gradient(#3f4741,#1a1f1b 55%,#0f1310)!important;
  color:#dfe4dc!important;
  box-shadow:0 3px 5px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.16),inset 0 -2px rgba(0,0,0,.38)!important;
}
.pf-filter-toggle[aria-pressed="true"]{border-color:#5c6f2c!important;color:#eaffbd!important;background:linear-gradient(#3b4632,#1a2116 55%,#10150d)!important;box-shadow:0 3px 5px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.12),0 0 8px rgba(184,255,61,.10)!important}
.pf-slope{border-color:#4d554f;box-shadow:0 4px 6px rgba(0,0,0,.26),inset 0 1px #fff,0 1px rgba(255,255,255,.32)}
.pf-slope button{background:linear-gradient(#f6f7f4 0%,#dfe2dc 37%,#a5aca6 54%,#c6cac4 100%);color:#242a26;text-shadow:0 1px rgba(255,255,255,.70)}
.pf-slope button.is-active{background:linear-gradient(#efffc0 0%,#d2fb7b 31%,#95cb2d 55%,#7fad20 59%,#a5d83c 100%);color:#1b260f;box-shadow:inset 0 1px #fbffe9,inset 0 -2px rgba(57,89,18,.32),0 0 8px rgba(184,255,61,.18)}
.pf-reset-small,.pf-freq-reset{border-color:#59615b!important;background:linear-gradient(#fafbf8,#d9ddd7 40%,#9fa6a0 55%,#c4c8c2)!important;box-shadow:0 3px 5px rgba(0,0,0,.21),inset 0 1px #fff!important}

/* Recessed file bay */
.pf-file{
  margin:9px 5px 14px;
  border:2px solid #242a26;
  border-top-color:#151a16;
  border-right-color:#4b534c;
  border-bottom-color:#626b63;
  border-radius:8px;
  background:
    radial-gradient(circle,rgba(255,255,255,.055) 0 1px,transparent 1.2px) 0 0/5px 5px,
    linear-gradient(#121713,#050806 72%);
  box-shadow:inset 0 10px 24px rgba(0,0,0,.88),0 1px rgba(255,255,255,.88),0 6px 10px rgba(0,0,0,.23);
}
.pf-load{min-height:72px}
.pf-load__icon{border-color:#6b7e2b;background:radial-gradient(circle at 36% 29%,#3b443c,#101411 67%);box-shadow:inset 0 4px 8px #000,0 2px 3px rgba(0,0,0,.25),0 1px rgba(255,255,255,.10)}

/* Bottom transport */
.pf-transport{gap:11px;margin:0 6px 1px}
.pf-play{border-color:#4a524c;background:linear-gradient(#f4f5f1,#c7cbc5 45%,#8f9690 56%,#c2c6c0);box-shadow:0 5px 8px rgba(0,0,0,.31),inset 0 1px #fff,inset 0 -2px rgba(40,47,42,.18)}
.pf-play i{filter:drop-shadow(0 0 3px rgba(184,255,61,.44))}
.pf-format{border-color:#292f2b;box-shadow:inset 0 3px 6px #000,0 1px rgba(255,255,255,.54),0 4px 6px rgba(0,0,0,.18)}
.pf-format button{background:linear-gradient(#3e4540,#191e1a);color:#d2d7d0}
.pf-format button.is-active{background:linear-gradient(#1a2118,#080c09);color:#cfff55;box-shadow:inset 0 0 0 1px #82ae25,inset 0 3px 6px #000}
.pf-export{border-color:#4d661e;background:linear-gradient(#f0ffbd 0%,#d7f58e 16%,#9bcf35 49%,#78a91c 57%,#a7db3f 100%);box-shadow:0 6px 9px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.92),inset 0 -2px rgba(56,86,18,.22)}
.pf-seek{filter:drop-shadow(0 1px rgba(255,255,255,.30))}

/* Keep compact/responsive without flattening the hardware feel. */
@media(max-width:820px){
  .pf-shell{padding:20px 17px 22px}
  .pf-controls{grid-template-columns:1fr}
  .pf-channel{min-height:315px}
  .pf-display{height:225px;margin-left:0;margin-right:0}
}