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; }
    .auth-card { max-width: 440px; margin: 0 auto; }
    .auth-welcome { text-align: center; padding: 20px 0 25px; }
    .auth-welcome-icon { font-size: 56px; color: var(--accent); display: block; margin-bottom: 10px; }
    .auth-welcome h2 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
    .auth-welcome p { margin: 0; font-size: 14px; color: var(--text-tertiary); line-height: 1.4; }
    .tabs { display: flex; margin-bottom: 25px; background: var(--bg-tertiary); border-radius: 12px; padding: 5px; }
    .tab { flex: 1; text-align: center; padding: 12px; font-weight: 700; font-size: 14px; color: var(--text-tertiary); cursor: pointer; border-radius: 8px; transition: 0.2s; }
    .tab.active { background: var(--bg-secondary); color: var(--text-primary); box-shadow: var(--shadow-soft); }
    .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); }
    .form-row { display: flex; gap: 10px; }
    .form-row .form-group { flex: 1; }
    .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); }
    .forgot-pass { text-align: center; margin-top: 15px; font-size: 13px; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; }
    .forgot-pass:hover { color: var(--accent); }
    .choice-buttons { display: flex; flex-direction: column; gap: 12px; }
    .choice-btn { width: 100%; padding: 18px 20px; border: 2px solid var(--border-primary); border-radius: 16px; background: var(--bg-card); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 15px; transition: all 0.2s; text-align: left; }
    .choice-btn:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-medium); }
    .choice-btn:active { transform: scale(0.98); }
    .choice-btn > .material-icons:first-child { font-size: 28px; color: var(--accent); background: var(--accent-light); width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .choice-btn > div { flex: 1; }
    .choice-title { font-weight: 800; font-size: 16px; margin-bottom: 2px; }
    .choice-desc { font-size: 12px; color: var(--text-tertiary); }
    .choice-arrow { font-size: 20px; color: var(--text-placeholder); flex-shrink: 0; }
    .choice-gerant { border-style: dashed; }
    .choice-gerant > .material-icons:first-child { color: var(--text-secondary); background: var(--bg-tertiary); }
    .form-back { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--text-tertiary); cursor: pointer; padding: 5px 0; margin-bottom: 5px; transition: 0.2s; }
    .form-back:hover { color: var(--accent); }
    .account-type-toggle { display: flex; gap: 8px; }
    .acc-type-btn { flex: 1; padding: 12px 8px; border: 2px solid var(--border-secondary); border-radius: 12px; background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; }
    .acc-type-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
    .checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-secondary); cursor: pointer; line-height: 1.5; }
    .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; accent-color: var(--accent); margin-top: 2px; cursor: pointer; }
    #legal-accept-group { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
    .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; }
        .auth-card { max-width: 460px; }
        .container { padding: 30px 50px; }
    }