/** * Shared CraftBelt smartphone wrapper (410×840) — V3 dashboard + V2 transition. * Pair with smartphone-frame.js on V2 pages (auto-wraps body content). */ /* Pre-wrap host (attribute set in ) — avoid white flash before DOMContentLoaded wrap */ html[data-v2-transition='1'] body { margin: 0; min-height: 100vh; padding: 0; background: radial-gradient(circle at center, #0f172a 0%, #030712 100%); color: var(--pc-text, #f8fafc); } html[data-v2-transition='1'] body.cb-phone-host, body.cb-phone-host { margin: 0; min-height: 100vh; padding: 0; overflow-x: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #0f172a 0%, #030712 100%); color: var(--pc-text, #f8fafc); } .smartphone-container { background: #040811; width: 100%; height: 100vh; max-width: 410px; max-height: 840px; margin: 0 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 40px; border: 8px solid #27303f; box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 45px rgba(249, 115, 22, 0.12); } .smartphone-notch { display: none; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 150px; height: 28px; background: #000; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; z-index: 999; } .smartphone-container > .screen-content { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; display: flex; flex-direction: column; background: radial-gradient(ellipse at top, #2a1a12 0%, var(--pc-bg, #14100e) 55%); color: var(--pc-text, #f8fafc); } @media (max-width: 480px) { html[data-v2-transition='1'] body.cb-phone-host, body.cb-phone-host { display: block; } .smartphone-container { max-width: 100%; max-height: 100vh; height: 100vh; border: none; border-radius: 0; box-shadow: none; } }