*{margin:0;padding:0;box-sizing:border-box;}
html, body {height:100%;overflow:hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
body{background:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;align-items:center;justify-content:center;-webkit-font-smoothing:antialiased;}
.phone-frame{width:100%;max-width:480px;height:100vh;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.12);position:relative;display:flex;flex-direction:column;}
@media(min-width:768px){.phone-frame{height:auto;max-height:90vh;border-radius:24px;overflow:hidden;}}

.bg-layer{display:none;}

.top-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid #f3f4f6;flex-shrink:0;min-height:46px;}
.top-bar .cs-btn{display:flex;align-items:center;gap:5px;font-size:13px;color:#6b7280;text-decoration:none;padding:6px 12px;border-radius:20px;cursor:pointer;border:none;}
.top-bar .cs-btn:hover{background:#e5e7eb;}
.top-bar .cs-btn i{font-size:20px;}
.lang-selector{position:relative;}
.lang-selector-btn{display:flex;align-items:center;gap:5px;font-size:13px;padding:6px 12px;border-radius:20px;border:none;color:#374151;cursor:pointer;}
.lang-selector-btn:hover{background:#e5e7eb;}
.lang-selector-btn i{font-size:10px;color:#9ca3af;}
.lang-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.1);overflow:hidden;z-index:50;display:none;min-width:110px;}
.lang-dropdown.show{display:block;}
.lang-dropdown div{padding:9px 14px;cursor:pointer;font-size:13px;color:#374151;}
.lang-dropdown div:hover{background:#f3f4f6;}
.lang-dropdown div.active{background:#f0f0ff;color:#6366f1;font-weight:600;}

.auth-wrap{position:relative;z-index:1;padding:80px 20px 28px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.auth-header{text-align:center;margin-bottom:24px;}
.auth-header .icon-circle{width:120px;height:36px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;}
.auth-header .icon-circle i{font-size:24px;color:#6366f1;}
.auth-header h4{font-size:18px;font-weight:800;color:#111827;margin-bottom:2px;}
.auth-header p{font-size:13px;color:#9ca3af;}
.form-group{margin-bottom:14px;}
.form-group label{font-size:11px;font-weight:600;color:#6b7280;margin-bottom:4px;display:block;}
.form-group .input-wrap{display:flex;align-items:center;border:1px solid #e5e7eb;border-radius:10px;padding:0;background:#f9fafb;overflow:hidden;}
.form-group .input-wrap:focus-within{border-color:#111827;background:#fff;}
.form-group .input-wrap.error{border-color:#ef4444;background:#fef2f2;}
.form-group .input-wrap i.icon-left{font-size:14px;color:#9ca3af;margin:0 0 0 12px;width:16px;text-align:center;flex-shrink:0;}
.form-group .input-wrap input{border:none;outline:none;flex:1;font-size:14px;color:#111827;background:transparent;padding:10px 8px;}
.form-group .input-wrap input::placeholder{color:#d1d5db;}
.form-group .input-wrap .toggle-pwd{border:none;background:none;padding:10px 12px;cursor:pointer;color:#9ca3af;font-size:14px;flex-shrink:0;}
.form-group .input-wrap .toggle-pwd:hover{color:#6b7280;}
.form-group .error-msg{font-size:10px;color:#ef4444;margin-top:4px;display:none;}
.form-group .error-msg.show{display:block;}
.btn-submit{width:100%;padding:12px;border-radius:10px;border:none;background:#111827;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:4px;}
.btn-submit:active{opacity:.9;}
.auth-footer{text-align:center;margin-top:16px;font-size:13px;color:#9ca3af;}
.auth-footer a{color:#111827;font-weight:600;text-decoration:none;}
.remember-row{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.remember-row input{accent-color:#111827;width:16px;height:16px;}
.remember-row label{font-size:12px;color:#6b7280;cursor:pointer;}
.alert{margin-bottom:12px;border-radius:8px;font-size:12px;padding:10px 12px;}
.register .auth-header .icon-circle i{color:#10b981;}

.toast-custom{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:999;background:#111827;color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:500;box-shadow:0 4px 15px rgba(0,0,0,.2);animation:slideDown .25s ease;max-width:85%;text-align:center;}
.toast-custom.error{background:#ef4444;}
.toast-custom.success{background:#10b981;}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-100%);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
.page-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 12px;
    transition: opacity 0.2s ease;
}
.page-loader.hidden { opacity: 0; pointer-events: none; }
.page-loader .loader-spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 2.5px solid #e5e7eb;
    border-top-color: #ff2d55;
    animation: spin 0.5s linear infinite;
}
.page-loader .loader-text {
    font-size: 12px; color: #9ca3af; font-weight: 500;
    animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loaderPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }