body { font-family: -apple-system, sans-serif; margin: 0; background-color: var(--bg-primary); color: var(--text-primary); display: flex; justify-content: center; min-height: 100vh; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
    .main-wrapper { width: 100%; max-width: 600px; min-height: 100vh; background: var(--bg-primary); position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--border-primary); border-right: 1px solid var(--border-primary); }
    .container { padding: 20px; flex: 1; }
    .reset-card { max-width: 440px; margin: 0 auto; }
    .icon-box { text-align: center; margin: 30px 0 20px; }
    .icon-box .material-icons { font-size: 56px; color: var(--accent); opacity: 0.7; }
    .desc-text { text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin-bottom: 25px; }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 6px; text-transform: uppercase; color: var(--text-secondary); }
    .form-input { width: 100%; padding: 15px; border: 1px solid var(--border-secondary); border-radius: 12px; font-size: 15px; box-sizing: border-box; outline: none; background: var(--bg-secondary); color: var(--text-primary); transition: border-color 0.3s; }
    .form-input:focus { border-color: var(--accent); }
    .form-input::placeholder { color: var(--text-placeholder); }
    .submit-btn { background: var(--accent); color: white; width: 100%; padding: 16px; border: none; border-radius: 14px; font-size: 16px; font-weight: 800; margin-top: 10px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
    .submit-btn:active { transform: scale(0.98); }
    .back-link { text-align: center; margin-top: 20px; font-size: 13px; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: 0.3s; }
    .back-link:hover { color: var(--accent); }
    .success-state { display: none; text-align: center; padding: 30px 0; }
    .success-state .material-icons { font-size: 64px; color: var(--success); margin-bottom: 12px; display: block; }
    .success-state h3 { margin: 0 0 10px; font-size: 20px; font-weight: 900; }
    .success-state p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
    .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; height: 80px; background: var(--bg-nav); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border-primary); display: flex; justify-content: space-around; align-items: center; z-index: 9999; padding-bottom: env(safe-area-inset-bottom); }
    .nav-btn { color: var(--text-placeholder); cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; transition: 0.3s; border-radius: 12px; }
    .nav-btn .material-icons { font-size: 24px; }
    .nav-btn.active { color: var(--accent); }
    @media (min-width: 768px) { .main-wrapper { max-width: 900px; } .bottom-nav { max-width: 900px; } .container { padding: 25px 40px; } }
    @media (min-width: 1024px) {
        .header { display: none !important; }
        .reset-card { max-width: 460px; }
        .container { padding: 30px 50px; }
    }