/* ---------- sample page: template switcher ---------- */
.tpl{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,calc(100vw - 32px))}
.tpl-b{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 16px 0 18px;background:#001621;color:#E4ECEF;border:1px solid #37525F;cursor:pointer;font:600 14px/1 var(--f);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.tpl-b:hover{border-color:#FF4103}
.tpl-k{font:500 10.5px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:#7E96A1}
.tpl-b i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-135deg);margin-top:4px;transition:transform .3s}
.tpl-b[aria-expanded="true"] i{transform:rotate(45deg);margin-top:-4px}
.tpl-p{width:100%;max-height:min(70vh,620px);overflow:auto;background:#001621;color:#E4ECEF;border:1px solid #37525F;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.tpl-h{font-size:13.5px;line-height:1.45;color:#B7C6CD;margin-bottom:14px}.tpl-h b{color:#fff}
.tpl-g{margin-top:12px}
.tpl-g>p{font:600 10.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:#7E96A1;padding-bottom:8px;border-bottom:1px solid #1B3340}
.tpl-g button{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 4px;background:none;border:0;border-bottom:1px solid #1B3340;color:#E4ECEF;text-align:left;cursor:pointer;font:600 15px/1.2 var(--f)}
.tpl-g button span{font:500 11px/1 var(--m);color:#7E96A1}
.tpl-g button em{font:500 10.5px/1 var(--m);font-style:normal;color:#7E96A1}
.tpl-g button:hover b{color:#FF4103}
.tpl-g button[aria-current="true"] b{color:#FF4103}
.tpl-g button[aria-current="true"]::after{content:"●";color:#FF4103;font-size:10px}
.wipe{position:fixed;inset:0;z-index:96;pointer-events:none;overflow:hidden}
.wipe i{position:absolute;left:50%;top:50%;width:320vmax;height:320vmax;background:var(--noturno);transform:translate(-50%,-50%) rotate(-45deg) translateY(-232vmax)}
.wipe i::before,.wipe i::after{content:"";position:absolute;left:0;right:0;height:2.4vmax;background:var(--vul)}
.wipe i::before{bottom:-2.4vmax}.wipe i::after{top:-2.4vmax}
.wipe.cover i{transform:translate(-50%,-50%) rotate(-45deg) translateY(0);transition:transform .6s var(--eio)}
.wipe.leave i{transform:translate(-50%,-50%) rotate(-45deg) translateY(232vmax);transition:transform .72s var(--eio)}
@media (prefers-reduced-motion:reduce){.wipe{display:none}}
@media (max-width:640px){html.fx .hud-bl{display:none}.tpl-k{display:none}.tpl{left:auto;right:12px;transform:none;align-items:flex-end}.tpl-b{min-height:40px;font-size:13px;padding:0 12px}}