:root { --blue: #007AFF; --bg: #FFF; --gray: #8e8e93; }
body { background: #F2F2F7; font-family: -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; display: flex; justify-content: center; overflow-x: hidden; }
.main-container { background: var(--bg); width: 100%; max-width: 480px; min-height: 100vh; padding: 40px 25px; box-sizing: border-box; text-align: center; }
.hidden { display: none !important; }

.logo-box { background: var(--blue); width: 70px; height: 70px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: white; font-size: 30px; }
h1 { font-size: 26px; font-weight: 700; margin: 0; }
.v-num { color: var(--blue); }
.subtitle { color: var(--gray); font-size: 14px; margin: 10px 0 30px; }

.stats-grid { display: flex; justify-content: space-around; margin-bottom: 30px; }
.stat strong { display: block; font-size: 18px; }
.stat span { font-size: 10px; color: var(--gray); text-transform: uppercase; }

.primary-btn { background: var(--blue); color: white; border: none; width: 100%; padding: 18px; border-radius: 14px; font-size: 17px; font-weight: 600; cursor: pointer; }
.disabled-btn { background: #E5E5EA; color: #A1A1A1; width: 100%; padding: 18px; border-radius: 14px; border: none; font-size: 17px; }

.terminal-window { background: #000; border-radius: 12px; padding: 15px; color: #32D74B; font-family: monospace; font-size: 12px; text-align: left; height: 50px; margin: 10px 0 30px; }

.info-content { text-align: left; border-top: 1px solid #eee; padding-top: 20px; }
.info-content h3 { font-size: 18px; margin-bottom: 8px; }
.bullet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 15px 0; }
.b-item { background: #F2F2F7; padding: 8px; border-radius: 8px; font-size: 10px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 5px; }
.fine-print { font-size: 10px; color: #AEAEB2; text-align: center; font-style: italic; }

.step-item { border: 1.5px solid #E5E5EA; border-radius: 16px; padding: 15px; display: flex; align-items: center; gap: 15px; margin-bottom: 12px; cursor: pointer; text-align: left; }
.step-item.completed { border-color: var(--blue); background: #F0F7FF; }
.inactive { opacity: 0.5; pointer-events: none; }

.ios-input { width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid #E5E5EA; background: #F2F2F7; font-size: 16px; outline: none; box-sizing: border-box; margin-top: 10px; font-family: inherit; }
.ios-input:focus { border-color: var(--blue); background: #FFF; }

.spinner { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid var(--blue); border-radius: 50%; animation: spin 1s linear infinite; margin: 100px auto 20px; }
@keyframes spin { 100% { transform: rotate(360deg); } }