/* PURE CLIPPER V20 · recessed 3D monitor treatment. Visual only; DSP untouched. */
.pcl-page .pcl-monitor{
  position:relative;
  isolation:isolate;
  gap:12px;
  padding:18px;
  border:1px solid #090a08;
  border-top-color:#6d7567;
  border-bottom:4px solid #050605;
  border-radius:16px;
  background:
    linear-gradient(105deg,rgba(255,255,255,.10),transparent 16%,rgba(0,0,0,.22) 48%,rgba(255,255,255,.055) 78%,transparent),
    url("../../assets/pure-eq-graphite-texture-v3.webp") center/cover,
    linear-gradient(145deg,#33382f,#11140f 48%,#262b23);
  background-blend-mode:screen,soft-light,normal;
  box-shadow:
    0 3px 0 #050605,
    0 15px 26px rgba(0,0,0,.52),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 3px 0 7px rgba(255,255,255,.035),
    inset -5px -8px 14px rgba(0,0,0,.58);
}

.pcl-page .pcl-monitor::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:5;
  border:1px solid rgba(205,222,193,.16);
  border-right-color:rgba(0,0,0,.68);
  border-bottom-color:rgba(0,0,0,.78);
  border-radius:11px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.34);
  pointer-events:none;
}

.pcl-page .pcl-monitor::after{
  content:"";
  position:absolute;
  z-index:6;
  top:10px;
  left:4%;
  right:4%;
  height:31%;
  border-radius:50% 50% 45% 45% / 22% 22% 66% 66%;
  background:linear-gradient(180deg,rgba(238,255,226,.105),rgba(255,255,255,.025) 46%,transparent 100%);
  filter:blur(.2px);
  pointer-events:none;
}

.pcl-page .pcl-curve-wrap,
.pcl-page .pcl-meter-stack{
  position:relative;
  z-index:1;
  overflow:hidden;
  border:2px solid #050604;
  border-top-color:#020302;
  border-bottom-color:#4b5544;
  border-radius:10px;
  background:
    radial-gradient(ellipse at 50% 38%,rgba(184,255,61,.075),transparent 58%),
    linear-gradient(115deg,rgba(255,255,255,.022),transparent 32%),
    linear-gradient(#020402,#071006 72%,#020402);
  box-shadow:
    inset 0 16px 28px rgba(0,0,0,.92),
    inset 10px 0 18px rgba(0,0,0,.46),
    inset -8px 0 16px rgba(0,0,0,.42),
    inset 0 -1px 0 rgba(184,255,61,.12),
    0 2px 0 rgba(255,255,255,.075),
    0 8px 14px rgba(0,0,0,.55);
}

.pcl-page .pcl-curve-wrap::before,
.pcl-page .pcl-meter-stack::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:
    repeating-linear-gradient(180deg,rgba(210,255,185,.018) 0 1px,transparent 1px 4px),
    linear-gradient(112deg,rgba(255,255,255,.055),transparent 22% 76%,rgba(184,255,61,.025));
  mix-blend-mode:screen;
  pointer-events:none;
}

.pcl-page .pcl-curve-wrap::after,
.pcl-page .pcl-meter-stack::after{
  content:"";
  position:absolute;
  inset:5px;
  z-index:4;
  border:1px solid rgba(184,255,61,.055);
  border-radius:6px;
  box-shadow:inset 0 0 22px rgba(184,255,61,.025);
  pointer-events:none;
}

.pcl-page .pcl-monitor-head{
  position:relative;
  z-index:2;
  text-shadow:0 1px 0 #000,0 0 7px rgba(184,255,61,.14);
}

.pcl-page .pcl-curve{
  position:relative;
  z-index:1;
  filter:drop-shadow(0 7px 10px rgba(0,0,0,.52));
}

.pcl-page .pcl-trace{
  filter:drop-shadow(0 0 3px rgba(184,255,61,.72)) drop-shadow(0 0 9px rgba(184,255,61,.22));
}

.pcl-page .pcl-meter{
  border-color:#020302;
  box-shadow:inset 0 4px 7px #000,0 1px 0 rgba(184,255,61,.08);
}

.pcl-page .pcl-meter i{
  filter:saturate(1.08);
  box-shadow:0 0 5px rgba(184,255,61,.62),0 0 13px rgba(184,255,61,.25);
}

@media(max-width:900px){
  .pcl-page .pcl-monitor{padding:14px;gap:10px}
}

@media(max-width:620px){
  .pcl-page .pcl-monitor{
    padding:10px;
    border-radius:12px;
    box-shadow:0 3px 0 #050605,0 10px 18px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -5px 10px rgba(0,0,0,.52);
  }
  .pcl-page .pcl-monitor::before{inset:4px;border-radius:8px}
  .pcl-page .pcl-monitor::after{opacity:.6}
  .pcl-page .pcl-curve-wrap,
  .pcl-page .pcl-meter-stack{border-radius:8px}
}

@media(prefers-contrast:more){
  .pcl-page .pcl-monitor::after,
  .pcl-page .pcl-curve-wrap::before,
  .pcl-page .pcl-meter-stack::before{display:none}
}