*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;color:#182033;background:#eef2f7}body{display:grid;grid-template-columns:260px 1fr}.side{background:#111827;color:#fff;padding:26px 20px;overflow:auto}.brand{font-size:11px;letter-spacing:2px;color:#60a5fa}.side h1{font-size:27px;line-height:1.05;margin:14px 0 6px}.side h1 span{color:#34d399}.side>p{color:#94a3b8;margin:0 0 24px}.scenario{display:grid;gap:8px}.scenario button,.reset{border:1px solid #334155;background:#1e293b;color:#cbd5e1;text-align:left;padding:11px 13px;border-radius:9px;cursor:pointer}.scenario button.on{background:#0f766e;border-color:#34d399;color:#fff}.statebox{margin-top:22px;border:1px solid #334155;border-radius:10px;padding:13px;background:#0f172a}.statebox b,.statebox small{display:block}.statebox small{color:#94a3b8;margin:3px 0 12px}.timerline{display:flex;justify-content:space-between;border-top:1px solid #253247;padding-top:8px;margin-top:8px;font-size:12px}.timerline span{color:#94a3b8}.timerline strong{color:#34d399}.reset{width:100%;margin-top:13px;text-align:center}.legend{font-size:12px;color:#94a3b8;margin-top:20px}.legend b{color:#cbd5e1}.legend label{display:block;margin-top:9px}main{min-width:0;display:grid;grid-template-rows:64px 1fr 36px}header{background:#fff;border-bottom:1px solid #dbe2ea;padding:11px 24px;display:flex;align-items:center;justify-content:space-between}header b{display:block;font-size:16px}header span{font-size:12px;color:#64748b}.tips{background:#eff6ff;color:#1d4ed8;padding:7px 11px;border-radius:8px;font-size:12px}.stage{display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;background:radial-gradient(circle at center,#fff 0,#eef2f7 70%)}.phone{position:relative;height:min(82vh,820px);aspect-ratio:750/1624;background:#fff;box-shadow:0 22px 60px rgba(15,23,42,.22);overflow:hidden;border-radius:18px}.phone img{width:100%;height:100%;object-fit:fill;display:block}.hotspot{position:absolute;border:2px solid transparent;cursor:pointer;z-index:4}.show .hotspot{border-color:#2563eb;background:rgba(37,99,235,.10)}.hotspot:active{background:rgba(16,185,129,.22)}.field{position:absolute;z-index:5;background:transparent;border:0;outline:0;color:transparent;caret-color:#111;font-size:18px}.field::selection{background:transparent}.checkbox-ui{position:absolute;z-index:5;border:2px solid transparent;cursor:pointer}.show .checkbox-ui{border-color:#2563eb}.checked:after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#10b981;font-weight:800;font-size:18px}.cover-text{position:absolute;z-index:6;background:#fff;color:#111;display:flex;align-items:center;justify-content:center;font-weight:600}.sending{color:#94a3b8!important;pointer-events:none}.countdown{position:absolute;z-index:6;background:#fff;color:#64748b;font-weight:600;display:flex;align-items:center;justify-content:center}.toast{position:absolute;z-index:20;left:50%;bottom:12%;transform:translateX(-50%) translateY(15px);background:rgba(15,23,42,.92);color:#fff;padding:9px 14px;border-radius:8px;font-size:12px;opacity:0;transition:.2s;white-space:nowrap}.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}#overlay{position:absolute;inset:0;z-index:8;pointer-events:none}#overlay img{width:100%;height:100%;object-fit:fill}.modal-btn{position:absolute;z-index:12;cursor:pointer;border:2px solid transparent}.show .modal-btn{border-color:#2563eb;background:rgba(37,99,235,.08)}footer{text-align:center;color:#64748b;font-size:12px;padding:8px}@media(max-width:800px){body{grid-template-columns:1fr}.side{display:none}header{padding:10px 12px}.stage{padding:6px}.phone{height:min(86vh,780px)}}