.spb{margin:1.5rem 0;padding:clamp(1rem,2.4vw,1.6rem);border:1px solid #b8d7df;border-radius:22px;background:linear-gradient(145deg,#f5fbfc,#fff8ef);box-shadow:0 16px 38px #123b5220}.spb *{box-sizing:border-box}.spb__head{display:flex;justify-content:space-between;gap:1rem;align-items:start}.spb__head h3{margin:.25rem 0;color:#103654}.spb__head p{margin:.35rem 0;color:#486373}.spb__badge{white-space:nowrap;padding:.4rem .7rem;border-radius:999px;background:#e6f5f3;color:#087b78;font-weight:800}.spb__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.spb__case{padding:1rem;border:1px solid #cbdde3;border-radius:18px;background:#fff}.spb__case h4{margin:0 0 .75rem}.spb__controls{display:grid;gap:.72rem}.spb__control{display:grid;grid-template-columns:5.5rem 1fr 4.5rem;gap:.55rem;align-items:center}.spb__control label{font-weight:750;color:#153f59}.spb input[type=range]{accent-color:#ee7817;width:100%;cursor:grab}.spb input[type=range]:active{cursor:grabbing}.spb input[type=number],.spb__shared input{width:100%;padding:.55rem;border:1px solid #9bbcc8;border-radius:9px;font:inherit}.spb__shared{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1rem;padding:.85rem;border-radius:14px;background:#eaf4f5}.spb__shared label{display:grid;gap:.35rem;font-weight:750}.spb__stage{position:relative;margin-top:1rem;height:275px;border-radius:16px;overflow:hidden;background:linear-gradient(#eaf5f7 0 58%,#d6e3e2 58%);border:1px solid #d0e2e6}.spb__flowboard{position:absolute;inset:10px 10px auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;z-index:5}.spb__flow{padding:.36rem .45rem;border-radius:8px;background:#fff;color:#0a7380;font-size:.82rem;font-weight:800;line-height:1.3;box-shadow:0 2px 8px #123b5217}.spb__flow--return{grid-column:1/-1;color:#805a12}.spb__flow--out{color:#c45408;text-align:right}.spb__tank{position:absolute;left:17%;right:17%;bottom:17px;height:165px;border:8px solid #173d55;border-top:0;border-radius:0 0 16px 16px;overflow:hidden;background:#edf5f3}.spb__water{position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(#46c2c7,#0a8993);transition:height .25s ease}.spb__water:before{content:"";position:absolute;left:-10%;top:-7px;width:120%;height:14px;background:radial-gradient(ellipse,#74e1e3 0 45%,transparent 48%) 0 0/44px 14px;animation:spbWave 2s linear infinite}.spb__pump{position:absolute;right:22%;bottom:28px;width:46px;height:52px;border-radius:12px 12px 7px 7px;background:#123b55;color:#fff;display:grid;place-items:center;font-weight:800;z-index:2}.spb__level-handle{position:absolute;right:8%;width:48px;height:48px;transform:translateY(50%);border:4px solid #fff;border-radius:50%;background:#ee7817;color:transparent;box-shadow:0 3px 13px #0005;cursor:ns-resize;z-index:7;touch-action:none}.spb__level-handle:focus-visible{outline:4px solid #ffca65;outline-offset:3px}.spb__level-label{position:absolute;right:calc(8% + 54px);z-index:7;padding:.32rem .5rem;border-radius:8px;background:#103b59;color:#fff;font-size:.78rem;font-weight:800;transform:translateY(50%);pointer-events:none}.spb__meter{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem;margin-top:.8rem}.spb__meter div{padding:.6rem;border-radius:12px;background:#edf5f7;color:#36576a;font-size:.86rem}.spb__meter b{display:block;color:#093b59;font-size:1rem}.spb__summary{margin-top:1rem;padding:1rem;border-left:5px solid #ee7817;border-radius:12px;background:#fff}.spb__summary strong{color:#0b6e72}.spb__actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}.spb__actions button{border:1px solid #9bbbc6;border-radius:999px;background:#fff;padding:.55rem .85rem;font:inherit;font-weight:750;cursor:pointer}.spb__actions button[aria-pressed=true]{background:#103b59;color:#fff}.spb__note{display:block;margin-top:.75rem;color:#5d6f77}.spb.is-warning .spb__summary{background:#fff1df}.spb.is-draining .spb__summary{border-color:#0b928b}@keyframes spbWave{to{transform:translateX(44px)}}@media(max-width:820px){.spb__head,.spb__grid{display:block}.spb__badge{display:inline-block;margin-top:.5rem}.spb__case+.spb__case{margin-top:1rem}.spb__control{grid-template-columns:1fr 4.7rem}.spb__control label{grid-column:1/-1}.spb__meter{grid-template-columns:repeat(2,1fr)}.spb__stage{height:265px}.spb__shared{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.spb__water,.spb__water:before{transition:none;animation:none}}

/* ===== r63 可讀性補強與名片色（寶藍 #193E82／#152E7E，橘 #D97827；白底小字橘 #B45309） ===== */
.spb{border-color:#cfd9ea;background:linear-gradient(145deg,#f7f9fd,#fff8ef);box-shadow:0 16px 38px #152e7e1f;color:#1F2937}
.spb__head h3{color:#193E82}
.spb__head p{color:#1F2937}
.spb .eyebrow{color:#193E82}
.spb__badge{background:#e6ecf5;color:#193E82}
.spb__case{border-color:#d5deec}
.spb__control label{color:#193E82}
.spb input[type=range]{accent-color:#D97827;min-height:44px;margin:0}
.spb input[type=number],.spb__shared input{border-color:#8fa3c7;min-height:44px}
.spb__shared{background:#eef2f9}
.spb__stage{background:linear-gradient(#eef3fa 0 58%,#dde4ef 58%);border-color:#d5deec}
.spb__flow{color:#193E82;line-height:1.45}
.spb__flow--return{color:#1F2937}
.spb__flow--out{color:#B45309}
.spb__tank{border-color:#152E7E}
.spb__pump{background:#193E82;right:auto;left:14%}
.spb__level-handle{background:#D97827;touch-action:none}
.spb__level-handle::before{content:"";position:absolute;inset:-6px}
.spb__level-handle:focus-visible{outline:4px solid #193E82;outline-offset:3px}
.spb__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.spb__level-label{background:#193E82}
.spb__meter div{background:#eef2f9;color:#1F2937}
.spb__meter b{color:#193E82}
.spb__summary{border-left-color:#D97827}
.spb__summary strong{color:#193E82}
.spb__actions button{border-color:#8fa3c7;color:#193E82;min-height:44px}
.spb__actions button[aria-pressed=true]{background:#193E82;color:#fff}
.spb__actions button:focus-visible{outline:3px solid #D97827;outline-offset:2px}
.spb__note{color:#1F2937;line-height:1.6}
.spb.is-draining .spb__summary{border-color:#193E82}
.spb__warn{margin:.9rem 0 0;padding:.75rem .9rem;border:2px solid #D97827;border-radius:12px;background:#fff4e8;color:#1F2937;font-weight:700;line-height:1.6}
.spb__warn b{color:#B45309}
html[data-diag-in-view] .qa-assist:not(.is-open){opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* r63d：版面（單欄）與字級同一斷點 820px，768px 平板直向也是單欄、內文 16px */
@media(max-width:820px){
 .spb .eyebrow,.spb__flow,.spb__level-label,.spb__meter div,.spb__note{font-size:1rem}
 .spb__stage{height:300px}
 .spb__pump{left:2%;width:34px}
 .spb__level-label{right:calc(8% + 50px)}
}
@media(max-width:767.98px){
 .spb{margin-bottom:calc(1.5rem + 68px + env(safe-area-inset-bottom))}
 .spb__case,.spb__stage,.spb__summary,.spb__warn{scroll-margin-bottom:calc(88px + env(safe-area-inset-bottom))}
 html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom))}

 .qa-assist.qa-assist{position:static;width:auto;max-width:740px;margin:20px auto 0;padding:0 16px calc(100px + env(safe-area-inset-bottom))}
 .qa-assist.qa-assist .qa-launch,.qa-assist.qa-assist.is-auto-collapsed:not(.is-open) .qa-launch{position:relative;width:100%;height:auto;min-height:48px;max-width:100%;padding:10px 16px;gap:9px;justify-content:center;border-radius:12px;box-shadow:none}
 .qa-assist.qa-assist .qa-launch::after,.qa-assist.qa-assist.is-auto-collapsed:not(.is-open) .qa-launch::after{display:none}
 .qa-assist.qa-assist .qa-launch span,.qa-assist.qa-assist.is-auto-collapsed:not(.is-open) .qa-launch span{width:auto;max-width:none;opacity:1;white-space:normal}
 .qa-assist.qa-assist .qa-panel{position:relative;inset:auto;width:100%;max-height:none;margin-top:12px}
 html[data-diag-in-view] .qa-assist:not(.is-open){opacity:1!important;visibility:visible!important;pointer-events:auto!important}
}