/* PocketMitra Figma-aligned visual layer */
:root{--pm-green:#1eca80;--wa:#25d366;--ink:#25252d;--sub:#6f7278;--stroke:#e4e7e5;--paper:#fff}
.phone{width:375px;height:812px;border:0;border-radius:32px;background:#fff;box-shadow:0 0 0 9px #090a0d,0 32px 90px #0009;overflow:hidden}
.phone:before{top:0;width:108px;height:24px;border-radius:0 0 14px 14px}
.app-screen{position:relative;width:375px;height:812px;min-height:0;padding:0 20px 24px;background:var(--paper);color:var(--ink);overflow:hidden;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.status{height:44px;margin:0 -20px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#17191c}
.app-nav{height:48px;margin:0 -20px;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;padding:0 20px;border-bottom:1px solid #f2f3f2}
.app-nav .back{width:36px;height:36px;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font-size:29px;line-height:1;text-align:left}
.app-nav>b{text-align:center;font-size:16px;font-weight:500}.app-nav>span{text-align:right;font-size:10px;font-weight:600;color:#30333a}.app-nav>i{display:block}
.figma-illustration{width:116px;height:116px;margin:76px auto 32px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#effff7,#dff8ec);color:var(--pm-green);font-size:44px;box-shadow:0 14px 34px #1eca8019}
.figma-body{padding-top:108px}.figma-body.otp-body{padding-top:0}
.figma-body h2,.otp-body h2,.agreement-sheet h2{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:700;color:var(--ink)}
.desc{margin:0 0 28px;font-size:13px;line-height:20px;color:var(--sub)}
.otp-row{width:100%;display:grid;grid-template-columns:repeat(6,48px);gap:9px;margin:0 0 10px}
.otp-box{width:48px;height:48px;padding:0;border:1px solid #cfd4d1;border-radius:8px;background:#fff;color:var(--ink);font-size:20px;font-weight:600;text-align:center;outline:0;box-shadow:none}
.otp-box:focus{border-color:var(--pm-green);box-shadow:0 0 0 3px #1eca8018}.otp-row.bad .otp-box{border-color:#e45e66;background:#fff8f8;color:#c9434c}
.test-otp{margin:8px 0 18px;text-align:center;font-size:11px;color:#a0a5a2}.test-otp b{color:#707672}
.resend-line{margin:0 0 28px;text-align:center;font-size:12px;color:#777c79}.resend-line button{padding:0;border:0;background:transparent;color:var(--pm-green);font-weight:600}
.primary-app{width:100%;height:48px;padding:0;border:0;border-radius:8px;background:var(--pm-green);color:#fff;font-size:14px;font-weight:700;box-shadow:0 8px 18px #1eca8028}
.primary-app:hover{background:#18b975}.verify{margin:0}.error-text{margin:2px 0 8px;color:#d94b55;font-size:11px}
.channels{position:absolute;left:20px;right:20px;bottom:28px;display:flex;justify-content:center;gap:32px;color:#929794}
.channels button{padding:7px 4px;border:0;background:transparent;font-size:12px;font-weight:600;color:var(--pm-green)}.channels button:last-child{color:var(--wa)}.channels button.off{color:#b7bbb8;pointer-events:none}
.toast{position:absolute;left:28px;right:28px;bottom:82px;padding:11px 14px;border-radius:9px;background:#173c2d;color:#fff;text-align:center;font-size:12px;box-shadow:0 10px 30px #0003}
.figma-body>small{display:block;margin-bottom:7px;color:#8a8f8c;font-size:11px}.mobile-line{display:flex;align-items:center;justify-content:space-between;margin:0 0 28px}.mobile-line strong{font-size:22px;letter-spacing:.2px}.mobile-line button{padding:5px 0;border:0;background:transparent;color:var(--pm-green);font-weight:600}.otp-inline{display:grid;grid-template-columns:1fr 94px;gap:10px;align-items:end;margin:0 0 24px}.otp-inline label{font-size:11px;color:#777d79}.otp-inline input{display:block;width:100%;height:48px;margin-top:6px;padding:0 12px;border:1px solid #d0d5d2;border-radius:8px;background:#fff;font-size:13px}.otp-inline button{height:48px;padding:0;border:1px solid var(--pm-green);border-radius:8px;background:#fff;color:var(--pm-green);font-weight:600}.consent{display:flex;margin:16px 0 22px;color:#676c69;font-size:11px;line-height:17px}.agreement-doc{height:624px;padding:30px 4px 0;overflow:hidden;color:var(--ink)}.agreement-doc h2{margin:0 0 12px;font-size:19px}.agreement-doc p{margin:0 0 30px;color:#747a76;font-size:14px;line-height:24px}.agreement-doc.faded{opacity:.18;filter:blur(.3px)}.bottom{position:absolute;left:20px;right:20px;bottom:28px;width:auto}.agreement-sheet{position:absolute;left:0;right:0;bottom:0;min-height:542px;padding:28px 20px 24px;border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -18px 55px #12251c24}.agreement-sheet .otp-row{margin-top:6px}.agreement-sheet .consent{margin:12px 0}.agreement-sheet .primary-app{margin-top:2px}.agreement-sheet .channels{position:static;margin-top:10px}.overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;padding:0;background:#111a}.dialog{width:100%;padding:30px 24px 28px;border-radius:24px 24px 0 0;background:#fff;text-align:center;box-shadow:0 -20px 60px #0003}.wa-icon{width:52px;height:52px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--wa);color:#fff;font-size:24px}.dialog h3{margin:0 0 8px;font-size:18px}.dialog p{margin:0 auto 24px;max-width:280px;color:#777d79;font-size:13px;line-height:20px}.dialog .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog .actions button{height:46px;border-radius:8px}.dialog .confirm{border-color:var(--pm-green);background:var(--pm-green);color:#fff}.success-icon{width:70px;height:70px;margin:110px auto 30px}.home-hero{margin:-92px -20px 28px;padding:120px 24px 34px}.quick{gap:10px}.quick b{padding:20px 5px;border-radius:12px}
@media(max-height:850px){.figma-illustration{margin-top:62px}.figma-body{padding-top:88px}}
/* Read-only developer inspect mode */
body.dev-mode #phone,body.dev-mode #phone *{cursor:crosshair!important;user-select:none}
body.dev-mode #phone input{caret-color:transparent}
body.dev-mode #phone *:hover{outline:1px dashed #4d8eff;outline-offset:2px}
body.dev-mode .scene-tabs,body.dev-mode .pages a[data-screen]{cursor:not-allowed!important;opacity:.55}
body.dev-mode .scene-tabs:after{content:'开发模式下页面已锁定';display:block;grid-column:1/-1;margin-top:5px;padding:6px 8px;border-radius:6px;background:#322719;color:#f0ad6b;font-size:10px;text-align:center}
body.dev-mode #devToggle{background:#2769d8;border-color:#4389ff;color:#fff}
body.dev-mode .selected{outline:2px solid #4d8eff!important;outline-offset:3px}