/* PURE FILTER E10.3 · PRODUCT RENDER REALISM
 * Visual-only refinement over E10.2. No DSP changes.
 * Goal: feel like a photographed / rendered commercial VST front panel,
 * not a web card with gradients.
 */

:root{
  --pf-real-ink:#181c19;
  --pf-real-edge:#4b514c;
  --pf-real-green:#b8ff3d;
  --pf-real-metal-hi:#f1f2ee;
  --pf-real-metal-mid:#c7cbc6;
  --pf-real-metal-lo:#8b918c;
}

/* ---- CHASSIS: machined aluminium, tight shadows, fine grain ---- */
.pf-shell{
  border:1px solid #444a45!important;
  border-radius:12px!important;
  background:
    radial-gradient(900px 250px at var(--vst-x,50%) var(--vst-y,8%),rgba(255,255,255,.19),transparent 58%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,rgba(40,46,42,.014) 1px 2px,transparent 2px 5px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,rgba(29,35,31,.010) 1px 2px,transparent 2px 4px),
    linear-gradient(101deg,#aeb3ae 0%,#d9dcd7 12%,#c5c9c4 28%,#eceee9 48%,#b8bdb8 72%,#d2d5d0 100%)!important;
  box-shadow:
    0 26px 54px rgba(0,0,0,.42),
    0 8px 16px rgba(0,0,0,.26),
    0 2px 3px rgba(0,0,0,.26),
    inset 0 1px rgba(255,255,255,.98),
    inset 0 -3px rgba(44,50,46,.28),
    inset 2px 0 rgba(255,255,255,.20),
    inset -2px 0 rgba(36,42,38,.12)!important;
}
.pf-shell::before{
  inset:5px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-right-color:rgba(56,62,58,.28)!important;
  border-bottom-color:rgba(52,58,54,.34)!important;
  border-radius:8px!important;
  box-shadow:inset 0 0 0 1px rgba(45,51,47,.07)!important;
}
.pf-shell::after{
  inset:8px -5px -8px!important;
  background:linear-gradient(#1a1f1b,#0e120f)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.34)!important;
}

/* Countersunk screws: reduce toy-like shine. */
.pf-screw{
  width:13px!important;height:13px!important;
  border:1px solid rgba(35,40,36,.66)!important;
  background:
    linear-gradient(42deg,transparent 44%,rgba(25,29,26,.88) 45% 52%,transparent 53%),
    radial-gradient(circle at 34% 27%,#fafbf8 0 4%,#c9cdc8 16%,#858b86 38%,#454b46 63%,#202521 84%,#101310 100%)!important;
  box-shadow:0 2px 3px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.62)!important;
}

/* ---- HEADER: printed labels + mounted metal logo ---- */
.pf-head{min-height:74px!important;padding:5px 9px 15px!important}
.pf-title strong{
  color:#151915!important;
  font-weight:900!important;
  letter-spacing:-.018em!important;
  text-shadow:0 1px rgba(255,255,255,.80)!important;
}
.pf-title small{
  color:#3c433e!important;
  letter-spacing:.15em!important;
  text-shadow:none!important;
}
.pf-logo img{
  filter:drop-shadow(0 1px rgba(255,255,255,.82)) drop-shadow(0 3px 2px rgba(0,0,0,.28)) contrast(1.04)!important;
}

/* Real push buttons: short hard shadows and separate cap/seat. */
.pf-btn,.pf-ab,.pf-delta{
  border:1px solid #454b46!important;
  border-bottom-color:#272c28!important;
  border-radius:4px!important;
  background:linear-gradient(#f0f2ed 0%,#d7dad5 35%,#aeb4ae 54%,#c8ccc6 100%)!important;
  box-shadow:
    0 3px 3px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.25),
    inset 0 1px rgba(255,255,255,.96),
    inset 0 -1px rgba(47,53,49,.30)!important;
  color:#1d221e!important;
  text-shadow:0 1px rgba(255,255,255,.62)!important;
}
.pf-btn:active,.pf-ab:active,.pf-delta:active{
  transform:translateY(1px)!important;
  box-shadow:0 1px 1px rgba(0,0,0,.24),inset 0 2px 4px rgba(43,49,44,.20)!important;
}
.pf-ab i,.pf-delta i{
  width:7px!important;height:7px!important;
  background:#303632!important;
  border:1px solid #1a1e1b!important;
  box-shadow:inset 0 1px 2px #000,0 1px rgba(255,255,255,.40)!important;
}
.pf-ab[aria-pressed="true"] i,.pf-delta[aria-pressed="true"] i{
  background:#c7ff59!important;
  border-color:#667b2c!important;
  box-shadow:0 0 6px rgba(184,255,61,.66),inset 0 1px #f5ffd6!important;
}

/* ---- DISPLAY: true recessed glass / bezel stack ---- */
.pf-display{
  border:6px solid #343a35!important;
  border-top-color:#0e120f!important;
  border-left-color:#171c18!important;
  border-right-color:#626963!important;
  border-bottom-color:#737b74!important;
  border-radius:9px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 15%),
    radial-gradient(ellipse at 50% 58%,rgba(184,255,61,.035),transparent 58%),
    #020402!important;
  box-shadow:
    inset 0 16px 30px rgba(0,0,0,.94),
    inset 0 -9px 18px rgba(42,68,24,.025),
    0 1px rgba(255,255,255,.90),
    0 0 0 1px #1c211d,
    0 5px 8px rgba(0,0,0,.26)!important;
}
.pf-display::before{
  background:
    linear-gradient(180deg,rgba(255,255,255,.040),transparent 12%),
    linear-gradient(108deg,rgba(255,255,255,.020),transparent 35% 70%,rgba(255,255,255,.010))!important;
  mix-blend-mode:screen!important;
  opacity:.72!important;
}
.pf-display::after{opacity:.26!important}
.pf-readout{letter-spacing:.055em!important;text-shadow:0 0 4px rgba(184,255,61,.28)!important}
.pf-axis{opacity:.82!important;text-shadow:0 1px #000!important}
.pf-meter,.pf-tp-readout{
  border-color:#252b26!important;
  background:#010201!important;
  box-shadow:inset 0 3px 8px #000,0 0 0 1px rgba(255,255,255,.035)!important;
}

/* ---- CONTROL DECK: one machined faceplate, not three web cards ---- */
.pf-controls{
  margin:0 6px 12px!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
.pf-channel{
  min-height:350px!important;
  padding:22px 20px 18px!important;
  background:transparent!important;
  border-top:0!important;
  border-bottom:0!important;
  border-left:1px solid rgba(255,255,255,.55)!important;
  border-right:1px solid rgba(64,71,65,.38)!important;
  box-shadow:none!important;
}
.pf-channel:first-child{border-left:0!important}
.pf-channel:last-child{border-right:0!important}
.pf-channel h2{
  color:#161a17!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.105em!important;
  text-shadow:0 1px rgba(255,255,255,.82)!important;
}
.pf-channel>small{
  color:#4a514c!important;
  font-weight:700!important;
  letter-spacing:.135em!important;
  text-shadow:none!important;
}

/* ---- KNOBS: ceramic/aluminium face, smooth bezel, grounded contact shadow ---- */
.pf-knob-wrap{
  --knob-light-x:30%;
  --knob-light-y:20%;
  filter:none!important;
  border-radius:50%;
  box-shadow:0 9px 8px -5px rgba(0,0,0,.46)!important;
}
.pf-knob-wrap::before{
  background:
    radial-gradient(circle,#f1f2ee 0 61%,#d3d6d1 62% 66%,#767d77 67% 70%,#cdd1cc 71% 74%,transparent 75%)!important;
  filter:none!important;
  box-shadow:0 3px 3px rgba(0,0,0,.30)!important;
}
.pf-knob{
  border:1px solid #8b918c!important;
  background:
    linear-gradient(118deg,rgba(255,255,255,.22),transparent 34% 66%,rgba(70,76,71,.08)),
    linear-gradient(145deg,#fafaf6 0%,#f0efe9 34%,#dddcd5 67%,#bbbfb9 100%)!important;
  box-shadow:
    0 7px 8px rgba(0,0,0,.27),
    0 2px 2px rgba(0,0,0,.26),
    inset 0 2px 1px rgba(255,255,255,.88),
    inset 0 -5px 7px rgba(72,79,73,.20),
    0 0 0 2px #d8dbd6,
    0 0 0 4px #5d645e,
    0 0 0 5px #e5e7e2!important;
}
/* Broad, non-circular material sheen. */
.pf-knob{
  background:
    linear-gradient(125deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.08) 28%,transparent 42% 72%,rgba(75,82,76,.08) 100%),
    linear-gradient(145deg,#fbfbf7 0%,#efeee8 34%,#dddcd5 68%,#b9bdb7 100%)!important;
}
.pf-knob::before{
  width:3px!important;
  background:#303531!important;
  box-shadow:1px 0 rgba(255,255,255,.55)!important;
}
.pf-knob::after{
  border-color:rgba(82,89,83,.13)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.24)!important;
}

/* Printed calibration, less floating / less UI-like. */
.pf-param-scale{
  color:#292f2b!important;
  font-weight:800!important;
  text-shadow:0 1px rgba(255,255,255,.74)!important;
}
.pf-param-scale svg{filter:none!important}
.pf-param-scale .pf-scale-arc{stroke:rgba(47,53,49,.54)!important;stroke-width:1.15!important}
.pf-param-scale .pf-scale-arc-hi{stroke:rgba(255,255,255,.56)!important;stroke-width:.45!important}
.pf-param-scale .pf-scale-tick{stroke:rgba(44,50,46,.58)!important;stroke-width:.95!important}
.pf-param-scale .pf-scale-tick.is-major{stroke:rgba(27,32,28,.86)!important;stroke-width:1.45!important}
.pf-resonance .pf-param-scale .pf-scale-label--mid{
  background:linear-gradient(rgba(226,229,224,.98),rgba(205,209,203,.98))!important;
  border:0!important;
  box-shadow:0 1px rgba(255,255,255,.62)!important;
}

/* ---- READOUTS: actual inset LCD windows ---- */
.pf-value,.pf-resonance-delta{
  border:1px solid #242a25!important;
  border-bottom-color:#555d56!important;
  border-radius:4px!important;
  background:linear-gradient(#010201,#060b07 55%,#0b100c)!important;
  box-shadow:inset 0 3px 6px #000,0 1px rgba(255,255,255,.60),0 2px 2px rgba(0,0,0,.12)!important;
  color:#cbff55!important;
  text-shadow:0 0 4px rgba(184,255,61,.28)!important;
}

/* ---- HARDWARE SWITCHES / SLOPE KEYS ---- */
.pf-filter-toggle{
  border:1px solid #303631!important;
  border-bottom-color:#111512!important;
  border-radius:10px!important;
  background:linear-gradient(#343b36,#161b17 58%,#0c100d)!important;
  color:#dfe4dc!important;
  box-shadow:0 2px 2px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.14)!important;
}
.pf-filter-toggle[aria-pressed="true"]{
  color:#e7ffb8!important;
  border-color:#5b6d2f!important;
  box-shadow:0 2px 2px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.13),0 0 5px rgba(184,255,61,.10)!important;
}
.pf-slope{
  border:1px solid #505751!important;
  border-bottom-color:#252a26!important;
  border-radius:3px!important;
  box-shadow:0 2px 3px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.70)!important;
}
.pf-slope button{
  background:linear-gradient(#e9ebe7 0%,#c8ccc6 43%,#9ba29c 56%,#bdc1bb 100%)!important;
  border-right:1px solid rgba(64,71,65,.38)!important;
  color:#272c28!important;
  text-shadow:0 1px rgba(255,255,255,.58)!important;
}
.pf-slope button.is-active{
  background:linear-gradient(#eaff9e 0%,#bee45c 35%,#83b522 55%,#a2d13a 100%)!important;
  color:#17200f!important;
  box-shadow:inset 0 1px rgba(255,255,255,.80),inset 0 -1px rgba(51,77,18,.30)!important;
}

/* ---- LOAD BAY: perforated black metal, like a real rack insert ---- */
.pf-file{
  border:1px solid #252b26!important;
  border-bottom-color:#5c645d!important;
  border-radius:6px!important;
  background:
    radial-gradient(circle at 2px 2px,rgba(255,255,255,.055) 0 1px,transparent 1.15px) 0 0/6px 6px,
    linear-gradient(#171c18,#090c0a)!important;
  box-shadow:inset 0 7px 12px rgba(0,0,0,.58),0 1px rgba(255,255,255,.62),0 3px 5px rgba(0,0,0,.16)!important;
}
.pf-load__icon{
  border:1px solid #4b5541!important;
  background:linear-gradient(#303831,#101511)!important;
  box-shadow:inset 0 2px 4px #000,0 1px rgba(255,255,255,.12)!important;
}

/* ---- TRANSPORT: coherent hardware row ---- */
.pf-play,.pf-export,.pf-format{
  border-color:#363c37!important;
  border-bottom-color:#1d221e!important;
  box-shadow:0 3px 4px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.72)!important;
}
.pf-play{
  background:linear-gradient(#e8eae6,#b6bbb5 48%,#858c86 55%,#b5bab4)!important;
}
.pf-export{
  background:linear-gradient(#e4ff90,#b9df51 37%,#78a91e 55%,#9acb32)!important;
  color:#18200f!important;
  text-shadow:0 1px rgba(255,255,255,.42)!important;
}
.pf-seek{
  filter:drop-shadow(0 1px rgba(255,255,255,.40));
}

/* Keep disabled hardware physical, not simply faded web UI. */
.pf-channel.is-filter-off{filter:none!important}
.pf-channel.is-filter-off .pf-knob-wrap,.pf-channel.is-filter-off .pf-param-scale{opacity:.46!important;filter:grayscale(.16)!important}

@media(max-width:820px){
  .pf-channel{border-left:0!important;border-right:0!important;border-bottom:1px solid rgba(65,72,66,.34)!important}
  .pf-controls{margin-left:0!important;margin-right:0!important}
}