/* Airbrush Some Stuff V30 — Tactile Control UI
   Inspired by dark hardware-control interfaces: recessed wells, raised buttons,
   inner highlights, soft graphite surfaces and small cyan/lime status accents. */
:root{
  --ctl-bg:#14191c;
  --ctl-bg-2:#20272b;
  --ctl-edge:#030608;
  --ctl-hi:rgba(255,255,255,.08);
  --ctl-shadow:rgba(0,0,0,.68);
  --ctl-led:#29e5ff;
  --ctl-led-alt:#d8ff4f;
}
body.v30-tactile{--control-x:50%;--control-y:50%}

/* Raised tactile CTAs — primary buttons keep brand color but gain physical depth. */
.v30-tactile .btn,
.v30-tactile button[type="submit"],
.v30-tactile .floating-project-main,
.v30-tactile .menu-toggle,
.v30-tactile .filter{
  position:relative;
  border-width:1px;
  border-style:solid;
  border-color:rgba(0,0,0,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(0,0,0,.16),
    0 2px 0 #020405,
    0 8px 18px rgba(0,0,0,.24);
  text-shadow:0 1px 0 rgba(255,255,255,.18);
}
.v30-tactile .btn:before,
.v30-tactile button[type="submit"]:before,
.v30-tactile .floating-project-main:before,
.v30-tactile .menu-toggle:before,
.v30-tactile .filter:before{
  content:"";
  position:absolute;
  inset:2px 3px auto 3px;
  height:42%;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.03));
  opacity:.34;
}
.v30-tactile .btn:active,
.v30-tactile button[type="submit"]:active,
.v30-tactile .floating-project-main:active,
.v30-tactile .menu-toggle:active,
.v30-tactile .filter:active,
.v30-tactile .v30-pressed{
  transform:translateY(2px) scale(.995)!important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 0 #020405,
    0 4px 10px rgba(0,0,0,.2)!important;
}

/* Dark secondary controls mirror the reference hardware surface. */
.v30-tactile .btn-ghost,
.v30-tactile .filter:not(.active),
.v30-tactile .menu-toggle,
.v30-tactile .floating-project-main{
  background:linear-gradient(180deg,#242b2f 0%,#11171a 55%,#090d0f 100%);
  color:#e8eef0;
  border-color:#050809;
  text-shadow:0 -1px 0 #000;
}
.v30-tactile .btn-ghost:hover,
.v30-tactile .filter:not(.active):hover,
.v30-tactile .menu-toggle:hover,
.v30-tactile .floating-project-main:hover{
  border-color:rgba(41,229,255,.33);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 2px 0 #020405,0 10px 24px rgba(0,0,0,.34),0 0 22px rgba(41,229,255,.09);
}

/* Recessed input wells on dark tool surfaces. Light paper forms remain light. */
.v30-tactile :where(.tool-form,.pc-wizard-form,.capacity-calculator,.deadline-tool,.shop-controls,.site-search-form,.product-detail-info,.discount-game) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.v30-tactile .site-search-form input{
  background:linear-gradient(180deg,#080c0e,#141a1d 62%,#171e21);
  color:#e9f0f2;
  border:1px solid #020405;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.76),
    inset 0 -1px 0 rgba(255,255,255,.055),
    0 1px 0 rgba(255,255,255,.035);
  text-shadow:0 1px 0 #000;
}
.v30-tactile :where(.tool-form,.pc-wizard-form,.capacity-calculator,.deadline-tool,.shop-controls,.site-search-form,.product-detail-info,.discount-game) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea)::placeholder,
.v30-tactile .site-search-form input::placeholder{color:#6e7b80}
.v30-tactile :where(.tool-form,.pc-wizard-form,.capacity-calculator,.deadline-tool,.shop-controls,.site-search-form,.product-detail-info,.discount-game) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus,
.v30-tactile .site-search-form input:focus{
  outline:none;
  border-color:rgba(41,229,255,.72);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.74),
    0 0 0 2px rgba(41,229,255,.08),
    0 0 20px rgba(41,229,255,.12);
}

/* Light estimator keeps its light palette, but gets physical depth. */
.v30-tactile .estimator-wrap :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
.v30-tactile .project-form :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  box-shadow:inset 0 2px 5px rgba(7,16,22,.12),0 1px 0 rgba(255,255,255,.9);
  border-color:#b9c2c6;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.v30-tactile .estimator-wrap :where(input,select,textarea):focus,
.v30-tactile .project-form :where(input,select,textarea):focus{
  outline:none;
  border-color:#29cde4;
  box-shadow:inset 0 2px 5px rgba(7,16,22,.12),0 0 0 3px rgba(41,229,255,.11),0 0 18px rgba(41,229,255,.12);
}

/* Toggle/checkbox treatment: compact hardware switch with status LED. */
.v30-tactile :where(.check-label,.terms-check,.admin-form label.check,.launch-check-item){position:relative}
.v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:44px;
  height:24px;
  border-radius:999px;
  flex:0 0 auto;
  margin:0;
  background:linear-gradient(180deg,#080b0d,#191f22);
  border:1px solid #020304;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.78),0 1px 0 rgba(255,255,255,.06);
  position:relative;
  cursor:pointer;
  transition:.25s ease;
}
.v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]:before{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:16px;height:16px;
  border-radius:50%;
  background:linear-gradient(180deg,#414a4e,#181e21 62%,#0d1113);
  border:1px solid #050708;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.17),0 2px 4px rgba(0,0,0,.72);
  transition:.25s cubic-bezier(.2,.8,.2,1);
}
.v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]:after{
  content:"";
  position:absolute;right:-11px;top:7px;
  width:6px;height:6px;border-radius:50%;
  background:#3f4548;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 0 0 1px #020304;
  transition:.25s ease;
}
.v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]:checked{border-color:#0d1c20;background:linear-gradient(180deg,#071215,#102126)}
.v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]:checked:before{transform:translateX(20px);background:linear-gradient(180deg,#495357,#20282b)}
.v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]:checked:after{background:var(--ctl-led);box-shadow:0 0 0 1px #020304,0 0 9px rgba(41,229,255,.82),0 0 20px rgba(41,229,255,.38)}

/* Wizard radio controls get an LED dot and pressed selected state. */
.v30-tactile .wizard-choice-grid span{
  background:linear-gradient(180deg,#1d2428,#0b1114 64%,#090d0f);
  border:1px solid #020405;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 5px rgba(0,0,0,.28),0 3px 0 rgba(0,0,0,.42);
  position:relative;
  padding-left:48px;
}
.v30-tactile .wizard-choice-grid span:before{
  content:"";position:absolute;left:22px;top:50%;width:8px;height:8px;border-radius:50%;transform:translateY(-50%);
  background:#31383c;box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 0 0 1px #020304;
}
.v30-tactile .wizard-choice-grid input:checked+span{
  color:#efffc2;
  background:linear-gradient(180deg,#212a2e,#10191c 62%,#0b1113);
  border-color:rgba(216,255,79,.24);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04),0 0 22px rgba(216,255,79,.06);
  transform:translateY(2px);
}
.v30-tactile .wizard-choice-grid input:checked+span:before{background:var(--ctl-led-alt);box-shadow:0 0 0 1px #020304,0 0 10px rgba(216,255,79,.85),0 0 22px rgba(216,255,79,.28)}

/* Native ranges, including future admin/calculator sliders. */
.v30-tactile input[type="range"]{
  appearance:none;-webkit-appearance:none;height:12px;border-radius:999px;background:linear-gradient(180deg,#050708,#1a2023);border:1px solid #020304;box-shadow:inset 0 3px 6px rgba(0,0,0,.78),0 1px 0 rgba(255,255,255,.05);padding:0;
}
.v30-tactile input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:30px;height:24px;border-radius:10px;background:linear-gradient(180deg,#3d464a,#161c1f 68%,#090d0f);border:1px solid #020304;box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 3px 7px rgba(0,0,0,.72);cursor:grab}
.v30-tactile input[type="range"]::-moz-range-thumb{width:30px;height:24px;border-radius:10px;background:linear-gradient(180deg,#3d464a,#161c1f 68%,#090d0f);border:1px solid #020304;box-shadow:inset 0 1px 1px rgba(255,255,255,.18),0 3px 7px rgba(0,0,0,.72);cursor:grab}

/* Control-panel cards: use only on interactive tool surfaces, not portfolio imagery. */
.v30-tactile :where(.calculator-card,.pc-wizard-form,.tool-form,.deadline-tool,.capacity-calculator,.form-delivery-badge){
  background:linear-gradient(145deg,#11191d,#091014 72%);
  border-color:#020405;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -1px 0 rgba(255,255,255,.018),0 18px 45px rgba(0,0,0,.24);
}
.v30-tactile .calculator-card:after,
.v30-tactile .pc-wizard-form:after,
.v30-tactile .tool-form:after{
  content:"";position:absolute;inset:7px;border-radius:calc(28px - 7px);border:1px solid rgba(255,255,255,.025);pointer-events:none;
}
.v30-tactile :where(.calculator-card,.pc-wizard-form,.tool-form){position:relative;isolation:isolate}

/* Small hardware/status LED utility used by JS. */
.v30-led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3c4448;box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 0 0 1px #020304;vertical-align:middle;margin-right:7px}
.v30-led.on{background:var(--ctl-led);box-shadow:0 0 0 1px #020304,0 0 9px rgba(41,229,255,.8),0 0 20px rgba(41,229,255,.26)}
.v30-led.lime.on{background:var(--ctl-led-alt);box-shadow:0 0 0 1px #020304,0 0 9px rgba(216,255,79,.72),0 0 20px rgba(216,255,79,.24)}

/* Search bar becomes a recessed hardware search slot. */
.v30-tactile .site-search-form{position:relative;padding:8px;border-radius:999px;background:linear-gradient(180deg,#1d2428,#090d0f);border:1px solid #020304;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 20px rgba(0,0,0,.24)}
.v30-tactile .site-search-form input{border-radius:999px!important;min-height:48px}
.v30-tactile .site-search-form .btn{min-height:48px}

/* Preserve radiance but seat it inside a tactile bezel. */
.v30-tactile .btn-radiant{border-color:#0b1011!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.56),inset 0 -2px 0 rgba(0,0,0,.17),0 2px 0 #020405,0 9px 20px rgba(0,0,0,.28),0 0 30px rgba(41,229,255,.12)!important}

@media(max-width:700px){
  .v30-tactile .site-search-form{border-radius:24px;padding:9px}
  .v30-tactile .site-search-form input{border-radius:16px!important}
  .v30-tactile .site-search-form .btn{width:100%}
  .v30-tactile :where(.check-label,.admin-form label.check) input[type="checkbox"]:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .v30-tactile *{scroll-behavior:auto}
  .v30-tactile :where(.btn,button,.filter,input,select,textarea){transition-duration:.01ms!important}
}