*{box-sizing:border-box}html,body{background:radial-gradient(#2a2a3a 0%,#121214 100%);width:100%;height:100%;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.app-layout{justify-content:flex-start;align-items:center;gap:32px;width:100%;height:100vh;padding:16px 32px;display:flex;overflow:hidden}.phone-mockup{--phone-native-w:393;--phone-native-h:852;--phone-corner:54;--phone-bezel:6;--phone-top-bezel-h:48;--phone-bottom-bar-h:18;--notch-w:120;--notch-h:32;--phone-h:min(calc(var(--phone-native-h) * 1px), calc(100vh - 32px));--phone-w:calc(var(--phone-native-w) / var(--phone-native-h) * var(--phone-h));--scale:calc(var(--phone-h) / (var(--phone-native-h) * 1px));width:var(--phone-w);height:var(--phone-h);border-radius:calc(var(--phone-corner) * var(--scale));padding:calc(var(--phone-bezel) * var(--scale));background:linear-gradient(135deg,#1a1a1c 0%,#0d0d0f 50%,#1a1a1c 100%);flex-shrink:0;position:relative;box-shadow:0 0 0 1px #ffffff14,0 0 0 2px #3a3a3e,0 0 0 3px #00000080,0 30px 80px #000000b3,0 10px 30px #00000080}.phone-frame{border-radius:calc((var(--phone-corner) - var(--phone-bezel)) * var(--scale));flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.phone-top-bezel{height:calc(var(--phone-top-bezel-h) * var(--scale));background:#000;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.notch-pill{background:#1a1a1c;transition:all .3s;box-shadow:inset 0 0 0 1px #ffffff0f}.notch--dynamic-island{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:calc(var(--notch-h) / 2 * var(--scale))}.notch--classic{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:calc(16 * var(--scale))}.notch--punch-hole{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:50%}.notch--teardrop{width:calc(var(--notch-w) * var(--scale));height:calc(var(--notch-h) * var(--scale));border-radius:50%/60% 60% 40% 40%}.phone-screen{background:#fff;flex:1;width:100%;display:block}.phone-home-bar{height:calc(var(--phone-bottom-bar-h) * var(--scale));background:#000;flex-shrink:0;justify-content:center;align-items:center;display:flex}.phone-home-bar:after{content:"";width:calc(134 * var(--scale));height:calc(5 * var(--scale));background:#fff3;border-radius:100px}.phone-mockup:before{content:"";top:calc(200 * var(--scale));width:4px;height:calc(65 * var(--scale));background:linear-gradient(90deg,#4a4a4e,#5a5a5e);border-radius:0 4px 4px 0;position:absolute;right:-4px;box-shadow:inset 0 1px #ffffff1a}.phone-mockup:after{content:"";top:calc(275 * var(--scale));width:4px;height:calc(55 * var(--scale));background:linear-gradient(90deg,#4a4a4e,#5a5a5e);border-radius:0 4px 4px 0;position:absolute;right:-4px;box-shadow:inset 0 1px #ffffff1a}.phone-volume-up{top:calc(210 * var(--scale));width:4px;height:calc(45 * var(--scale));background:linear-gradient(270deg,#4a4a4e,#5a5a5e);border-radius:4px 0 0 4px;position:absolute;left:-4px;box-shadow:inset 0 1px #ffffff1a}.phone-volume-down{top:calc(260 * var(--scale));width:4px;height:calc(45 * var(--scale));background:linear-gradient(270deg,#4a4a4e,#5a5a5e);border-radius:4px 0 0 4px;position:absolute;left:-4px;box-shadow:inset 0 1px #ffffff1a}.ui-panel{background:#1e1e24;border:1px solid #2c2c30;border-radius:16px;flex-direction:column;flex:1;max-width:480px;max-height:calc(100vh - 32px);padding:28px;display:flex;box-shadow:0 8px 32px #0000004d}.panel-header{border-bottom:1px solid #2c2c30;flex-shrink:0;margin-bottom:24px;padding-bottom:16px}.panel-header h2{color:#e0e0e0;margin:0 0 4px;font-size:1.4rem;font-weight:600}.panel-subtitle{color:#666;margin:0;font-size:.85rem}.panel-body{flex:1}.control-group{margin-bottom:24px}.control-label{color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:.8rem;font-weight:500;display:block}.select-wrapper{position:relative}.phone-select{color:#d0d0d0;appearance:none;cursor:pointer;background:#2a2a30;border:1px solid #3a3a40;border-radius:10px;width:100%;padding:12px 40px 12px 14px;font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.phone-select:hover{border-color:#4a4a50}.phone-select:focus{border-color:#3880ff;outline:none;box-shadow:0 0 0 3px #3880ff33}.phone-select option{color:#d0d0d0;background:#2a2a30}.select-arrow{pointer-events:none;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.phone-info{color:#666;gap:16px;margin-top:12px;font-size:.82rem;display:flex}.phone-info span{background:#25252a;border-radius:6px;padding:4px 10px;font-family:SF Mono,Fira Code,monospace}.upload-container{aspect-ratio:9/16;cursor:pointer;-webkit-user-select:none;user-select:none;background:#2a2a2a;border:3px dashed #555;border-radius:12px;width:100%;max-width:360px;margin:24px auto;transition:border-color .25s,background .25s;position:relative;overflow:hidden}.upload-container:hover,.upload-container:focus{background:#2e2e2e;border-color:#3880ff;outline:none;box-shadow:0 0 0 3px #3880ff59}.upload-overlay{color:#888;flex-direction:column;justify-content:center;align-items:center;gap:8px;transition:opacity .3s;display:flex;position:absolute;inset:0}.upload-icon{opacity:.6}.upload-text{color:#aaa;margin:0;font-size:1rem}.upload-hint{color:#666;margin:0;font-size:.8rem}.preview-canvas{object-fit:contain;width:100%;height:100%;display:block}.actions{z-index:2;opacity:0;gap:8px;transition:opacity .25s;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.upload-container:hover .actions{opacity:1}.hidden{display:none!important}