/* Shared styles for the phone test tools: speaker-water-eject, vibration-test, washing-machine-balance-meter */
.pt-chips .chip{min-height:38px}
.pt-stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 16px;min-height:0;background:var(--blue-soft)}
.pt-status{font-weight:700;font-size:15px;text-align:center;margin:0;min-height:1.6em;color:var(--ink)}
.pt-big{font:800 clamp(30px,7vw,42px)/1 var(--font);letter-spacing:-.03em;margin:0;text-align:center}
.pt-sub{font-size:14px;color:var(--ink-2);font-weight:600;margin:0;text-align:center}
.pt-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pt-row .btn{flex:1 1 140px}
.pt-out{font:800 15px var(--font);min-width:64px;text-align:right}
.pt-slider{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.pt-tips{margin:0;padding-left:20px;font-size:14.5px;color:var(--ink-2)}
.pt-tips li{margin-bottom:6px}
.pt-warn{background:#ffe9e4;box-shadow:3px 3px 0 #ff7a59}
.pt-ok{background:#e7f8ef;box-shadow:3px 3px 0 var(--mint)}
.pt-bar{width:100%;height:12px;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.pt-bar i{display:block;height:100%;width:0;background:var(--blue)}
.pt-steps{margin:0 0 0 18px;padding:0;font-size:14.5px;color:var(--ink-2)}
.pt-steps li{margin-bottom:6px}

/* speaker water eject: big round play button with rings */
.sw-go{position:relative;display:grid;place-items:center;align-content:center;gap:4px;width:min(220px,56vw);aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:var(--sun);color:var(--ink);box-shadow:var(--hard-lg);cursor:pointer;font:800 20px/1.2 var(--font);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.sw-go:hover{transform:translate(-1px,-1px)}
.sw-go:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.sw-go svg{width:64px;height:64px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw-go span{display:block;margin-top:4px}
.sw-go::before,.sw-go::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--blue);opacity:0;pointer-events:none}
.sw-go.on{background:var(--blue);color:#fff}
.sw-go.on::before{animation:sw-ring 1.3s ease-out infinite}
.sw-go.on::after{animation:sw-ring 1.3s .65s ease-out infinite}
@keyframes sw-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){.sw-go.on::before,.sw-go.on::after{animation:none}}

/* vibration test */
.vb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.vb-p{display:grid;gap:6px;text-align:left;font:700 14.5px/1.25 var(--font);background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);min-height:64px}
.vb-p:hover{transform:translate(-1px,-1px)}
.vb-p[aria-pressed=true]{background:var(--sun)}
.vb-p small{font-weight:600;color:var(--ink-2);font-size:12.5px}
.vb-phone{width:120px;height:210px;border:3px solid var(--ink);border-radius:24px;background:#fff;box-shadow:var(--hard);position:relative;display:grid;place-items:center}
.vb-phone::before{content:"";position:absolute;top:10px;width:34px;height:6px;border-radius:6px;background:var(--ink)}
.vb-phone svg{width:54px;height:54px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vb-phone.on{background:var(--sun);animation:vb-shake .09s linear infinite}
@keyframes vb-shake{0%{transform:translate(-3px,0) rotate(-1.5deg)}50%{transform:translate(3px,0) rotate(1.5deg)}100%{transform:translate(-3px,0) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){.vb-phone.on{animation:none;outline:4px solid var(--blue)}}
.vb-bars{display:flex;width:100%;height:26px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff;position:relative}
.vb-bars i{display:block;height:100%}
.vb-bars i.b{background:var(--blue)}
.vb-bars i.g{background:#fff}
.vb-head{position:absolute;top:0;bottom:0;left:0;width:3px;background:#ff7a59}
.vb-felt{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}

/* level */
.lv-vial{position:relative;width:min(270px,72vw);aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:radial-gradient(circle,#eafff4 0 60%,#c9f3dd 100%);box-shadow:var(--hard-lg);overflow:hidden}
.lv-vial::before,.lv-vial::after{content:"";position:absolute;background:rgba(15,18,34,.35)}
.lv-vial::before{left:50%;top:8%;bottom:8%;width:2px;margin-left:-1px}
.lv-vial::after{top:50%;left:8%;right:8%;height:2px;margin-top:-1px}
.lv-ring{position:absolute;left:50%;top:50%;border:2px dashed var(--ink);border-radius:50%;transform:translate(-50%,-50%)}
.lv-ring.r1{width:22%;height:22%}
.lv-ring.r2{width:56%;height:56%;border-style:solid;border-color:rgba(15,18,34,.25)}
.lv-bub{position:absolute;left:50%;top:50%;width:18%;height:18%;margin:-9% 0 0 -9%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,#ffd98c 40%,var(--sun) 100%);border:3px solid var(--ink);will-change:transform;z-index:1}
.lv-tube{position:relative;width:100%;max-width:340px;height:64px;border:3px solid var(--ink);border-radius:999px;background:linear-gradient(#eafff4,#c9f3dd);box-shadow:var(--hard-lg);overflow:hidden}
.lv-tube::before,.lv-tube::after{content:"";position:absolute;top:8px;bottom:8px;width:2px;background:rgba(15,18,34,.45)}
.lv-tube::before{left:calc(50% - 30px)}
.lv-tube::after{left:calc(50% + 28px)}
.lv-tube .lv-bub{width:52px;height:40px;margin:-20px 0 0 -26px;border-radius:999px}
.lv-read{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.lv-read div{background:#fff;border:2px solid var(--ink);border-radius:var(--r-sm);padding:8px 10px;text-align:center}
.lv-read b{display:block;font-size:24px;line-height:1.1}
.lv-read small{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.lv-state{font:800 20px var(--font);padding:6px 16px;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
.lv-state.ok{background:var(--mint)}
.lv-state.off{background:#ffd2c7}
.lv-vial.ok{background:radial-gradient(circle,#c9f7de 0 60%,#8de8b7 100%)}
.lv-advice{font-size:15px;font-weight:600;text-align:center;margin:0;color:var(--ink)}