*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;max-width:414px;margin:0 auto}.phone-frame{background:#000;border-radius:40px;padding:12px;box-shadow:0 20px 60px #00000080;position:relative}.phone-screen{background:#f5f5f7;border-radius:30px;overflow:hidden;height:780px;position:relative;display:flex;flex-direction:column}.status-bar{background:#fff;padding:14px 24px 8px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600}.bg-content{flex:1;background:#fff;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.bg-content h2{font-size:18px;color:#333;margin-bottom:8px}.bg-content p{font-size:14px;color:#666;text-align:center;margin-bottom:24px}.bg-content .success-icon{width:64px;height:64px;border-radius:50%;background:#4caf50;display:flex;align-items:center;justify-content:center;margin-bottom:16px}.bg-content .success-icon svg{width:32px;height:32px;fill:#fff}.trigger-btn{background:#2196f3;color:#fff;border:none;padding:14px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.trigger-btn:hover{background:#1976d2}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-end;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease;border-radius:30px;overflow:hidden}.modal-overlay.active{opacity:1;pointer-events:all}.modal{background:#fff;width:100%;border-radius:20px 20px 0 0;max-height:92%;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1)}.modal-overlay.active .modal{transform:translateY(0)}.warning-banner{background:#fff3cd;border-bottom:1px solid #ffc107;padding:14px 20px;display:flex;align-items:flex-start;gap:12px;border-radius:20px 20px 0 0}.warning-icon{width:36px;height:36px;flex-shrink:0}.warning-text h3{color:#856404;font-size:13px;font-weight:700;letter-spacing:.5px;margin-bottom:2px}.warning-text p{color:#856404;font-size:12px;line-height:1.4}.step-indicator{display:flex;align-items:center;justify-content:center;padding:16px 20px 8px;gap:8px}.step-dot{width:8px;height:8px;border-radius:50%;background:#ddd;transition:all .3s}.step-dot.active{background:#2196f3;width:24px;border-radius:4px}.step-dot.completed{background:#4caf50}.step-label{font-size:13px;color:#666;margin-left:12px;font-weight:500}.step-content-wrapper{flex:1;overflow:hidden;position:relative}.step-content{padding:16px 20px;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transform:translate(50px);transition:all .35s cubic-bezier(.32,.72,0,1);overflow-y:auto}.step-content.active{opacity:1;transform:translate(0);position:relative}.step-content.exit-left{transform:translate(-50px)}.step-title{font-size:18px;font-weight:700;color:#333;margin-bottom:4px;text-align:center}.step-subtitle{font-size:14px;color:#333;font-weight:600;margin-bottom:8px;text-align:center}.step-description{font-size:14px;color:#666;text-align:center;line-height:1.5;margin-bottom:16px}.step-image{width:100%;max-width:280px;height:200px;background:#f0f4f8;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden;border:1px solid #e0e0e0}.step-image img{width:100%;height:100%;object-fit:contain}.step-image .placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#999}.step-image .placeholder svg{width:48px;height:48px;opacity:.5}.step-image .placeholder span{font-size:12px}.confirm-checkbox{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f8f9fa;border-radius:10px;cursor:pointer;width:100%;max-width:300px;transition:background .2s;-webkit-user-select:none;user-select:none}.confirm-checkbox:hover{background:#e8f4fd}.checkbox-custom{width:22px;height:22px;border:2px solid #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}.confirm-checkbox.checked .checkbox-custom{background:#2196f3;border-color:#2196f3}.confirm-checkbox.checked .checkbox-custom svg{opacity:1}.checkbox-custom svg{width:14px;height:14px;fill:#fff;opacity:0;transition:opacity .2s}.checkbox-label{font-size:14px;color:#333;font-weight:500}.modal-buttons{display:flex;gap:12px;padding:16px 20px;border-top:1px solid #eee;background:#fff}.btn{flex:1;padding:14px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .2s}.btn-secondary{background:#f0f0f0;color:#333}.btn-secondary:hover{background:#e0e0e0}.btn-primary{background:#2196f3;color:#fff}.btn-primary:hover{background:#1976d2}.btn-primary.disabled,.btn-primary:disabled{background:#b0bec5;color:#fff;cursor:not-allowed;pointer-events:none}.btn-primary.disabled:hover,.btn-primary:disabled:hover{background:#b0bec5}.btn.hidden{visibility:hidden}.completion-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;border-radius:30px;opacity:0;pointer-events:none;transition:opacity .4s}.completion-overlay.active{opacity:1;pointer-events:all}.completion-icon{width:80px;height:80px;border-radius:50%;background:#4caf50;display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:scaleIn .4s cubic-bezier(.32,.72,0,1) .2s both}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.completion-icon svg{width:40px;height:40px;fill:#fff}.completion-overlay h2{font-size:20px;color:#333;margin-bottom:8px;animation:fadeUp .4s ease .4s both}.completion-overlay p{font-size:14px;color:#666;animation:fadeUp .4s ease .5s both}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.demo-badge{position:fixed;top:16px;right:16px;background:#ffffffe6;padding:8px 16px;border-radius:20px;font-size:12px;color:#666;box-shadow:0 2px 8px #0000001a}@media(max-width:440px){.phone-frame{border-radius:0;padding:0}.phone-screen{border-radius:0;height:100vh}.modal-overlay,.completion-overlay{border-radius:0}.demo-badge{display:none}}