/* Painter Synth v1 – fully scoped to .ps-root */
.ps-root{ --ps-bg:#0b0f12; --ps-ink:#d7ffe9; --ps-ac:#00ffb4; --ps-dim:#7aa6a1; --ps-warn:#ffcc66; --ps-danger:#ff5a5a;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ps-ink);
  contain: content;
}
.ps-boot{ background: linear-gradient(180deg, rgba(5,10,12,.96), rgba(5,10,12,.88));
  border:1px solid rgba(0,255,180,.25); border-radius:14px; padding:10px; box-shadow: 0 12px 35px rgba(0,0,0,.35);
}
.ps-top{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.ps-monitor{ flex: 1 1 520px; }
.ps-controls{ flex: 1 1 420px; }
.ps-monitor{
  flex: 1 1 420px; min-width: 280px;
  border-radius:14px; border:1px solid rgba(0,255,180,.22);
  background: radial-gradient(120% 140% at 50% 20%, rgba(0,255,180,.08), rgba(0,0,0,.22));
  overflow:hidden;
  position:relative;
}
.ps-canvas{ width:100%; height:340px; display:block; }
.ps-crt::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 5px);
  opacity:.18; mix-blend-mode: overlay; pointer-events:none;
}
.ps-crt::after{
  content:""; position:absolute; inset:-10%;
  background: radial-gradient(circle at 50% 40%, rgba(0,255,180,.18), rgba(0,0,0,0) 60%);
  opacity:.35; pointer-events:none;
}
.ps-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.ps-hud{
  position:absolute; left:10px; top:10px; right:10px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px; pointer-events:none;
}
.ps-title{ font-weight:800; letter-spacing:.06em; font-size:13px; text-transform:uppercase; color:rgba(230,255,248,.92);}
.ps-sub{ font-size:11px; color:rgba(170,220,215,.85); margin-top:2px; }
.ps-status{ font-size:11px; color:rgba(170,220,215,.9); text-align:right; }
.ps-controls{
  flex: 1 1 360px; min-width: 280px;
  display:flex; flex-direction:column; gap:8px;
}
.ps-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ps-btn{
  appearance:none; border:1px solid rgba(0,255,180,.25); background: rgba(0,255,180,.08);
  color: rgba(230,255,248,.95);
  padding:8px 10px; border-radius:12px; cursor:pointer;
  font-weight:800; letter-spacing:.02em; font-size:12px;
}
.ps-btn:active{ transform: translateY(1px); }
.ps-btn.ps-warn{ border-color: rgba(255,204,102,.35); background: rgba(255,204,102,.10); }
.ps-btn.ps-danger{ border-color: rgba(255,90,90,.40); background: rgba(255,90,90,.10); }
.ps-led{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle;
  background: rgba(255,255,255,.10); border:1px solid rgba(0,255,180,.18);
}
.ps-led.on{ background: rgba(0,255,180,.85); box-shadow: 0 0 18px rgba(0,255,180,.35); }

.ps-box{
  border:1px solid rgba(0,255,180,.18); border-radius:14px; padding:8px;
  background: rgba(0,0,0,.18);
}
.ps-box h4{ margin:0 0 6px 0; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:rgba(200,245,238,.9); }
.ps-mini{ font-size:11px; color:rgba(170,220,215,.85); line-height:1.25; }
.ps-select{
  border:1px solid rgba(0,255,180,.22); background: rgba(0,0,0,.18);
  color: rgba(230,255,248,.95); border-radius:12px; padding:8px 10px; font-weight:700; font-size:12px;
}
.ps-knobs{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.ps-param{ display:flex; flex-direction:column; gap:4px; }
.ps-lab{ display:flex; justify-content:space-between; font-size:11px; color:rgba(170,220,215,.9); }
.ps-val{ color:rgba(230,255,248,.92); font-weight:800; }
.ps-range{ width:100%; }
.ps-wave{ display:flex; gap:6px; flex-wrap:wrap; }
.ps-wbtn{
  flex:1 1 calc(50% - 6px);
  min-width: 84px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,255,180,.18);
  background: rgba(0,0,0,.16);
  color: rgba(210,245,238,.95);
  font-weight:800; font-size:12px;
  cursor:pointer;
}
.ps-wbtn.active{ border-color: rgba(0,255,180,.55); background: rgba(0,255,180,.12); }

.ps-pads{
  margin-top:10px;
  border:1px solid rgba(0,255,180,.18); border-radius:14px;
  padding:8px; background: rgba(0,0,0,.12);
}
.ps-padgrid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:6px; }
.ps-pad{
  user-select:none;
  border-radius:12px; border:1px solid rgba(0,255,180,.16);
  background: rgba(0,0,0,.18);
  padding:8px 6px;
  min-height: 52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  touch-action: manipulation;
}
.ps-pad.on{ border-color: rgba(0,255,180,.55); background: rgba(0,255,180,.10); }
.ps-note{ font-size:11px; font-weight:900; letter-spacing:.05em; color:rgba(230,255,248,.92); }
.ps-bump{
  margin-top:6px; width:18px; height:22px; border-radius:8px;
  background: rgba(0,255,180,.18);
  position:relative;
}
.ps-bump::before{
  content:""; position:absolute; left:50%; top:-10px; transform:translateX(-50%);
  width:18px; height:18px; border-radius:50%;
  background: rgba(0,255,180,.22);
}
.ps-pad.sharp{ background: rgba(0,0,0,.28); }
.ps-toast{
  margin-top:6px; font-size:11px; color:rgba(170,220,215,.9);
  min-height: 16px;
}
@media (max-width: 560px){
  .ps-canvas{ height:220px; }
  .ps-knobs{ grid-template-columns: 1fr; }
  .ps-padgrid{ grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 860px){ .ps-top{ flex-direction:column; } .ps-monitor, .ps-controls{ min-width:0; } }

/* v1.2 layout fixes */
.ps-monitor{ position:relative; min-height: 360px; }
.ps-crt{ width:100%; }
.ps-canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.ps-hud{ position:absolute; inset:0; pointer-events:none; }
.ps-noise{ pointer-events:none; }
@media (max-width: 860px){ .ps-monitor{ min-height: 320px; } }

/* v1.3 additions: tighter controls */
.ps-knobs{ gap:10px; }
.ps-box h4{ margin:0 0 8px 0; }
.ps-row{ gap:8px; }
.ps-wave{ gap:6px; flex-wrap:wrap; }
.ps-wbtn{ padding:6px 8px; }
.ps-btn{ padding:8px 10px; }
.ps-select{ min-width: 180px; }
.ps-ft{ display:flex; gap:6px; flex-wrap:wrap; }
.ps-ft .ps-btnmini{ padding:6px 8px; border-radius:10px; font-weight:700; }
.ps-btnmini{ padding:6px 8px; border-radius:10px; }
.ps-param{ min-width: 160px; }
@media (max-width: 860px){
  .ps-param{ min-width: 140px; }
}