:root {
    --primary: #2c5aa0;
    --secondary: #1e3a8a;
    --accent: #f97316;
    --light: #f8fafc;
    --dark: #1e293b;
    --gray: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --card-bg: #ffffff;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --radius: 12px;
    --input-padding: 14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100vh;overflow-x:hidden}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
    background:linear-gradient(135deg,#f0f4f8 0%,#e2e8f0 100%);
    color:var(--dark);
    line-height:1.5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.header{width:100%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:15px 0;position:sticky;top:0;z-index:1000}
.navbar{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center}
.logo-text{font-size:28px;font-weight:700;color:var(--primary);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}
.language-switch select{
    padding:10px 14px;border-radius:8px;border:1px solid #d1d5db;background:#fff;font-size:14px;min-width:150px;color:var(--dark);
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c5aa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat:no-repeat;background-position:left 12px center;background-size:16px;
    padding-left:40px;padding-right:20px;cursor:pointer;transition:all .2s;text-align:right
}
.language-switch select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,90,160,.1)}
.rtl-direction{direction:rtl;text-align:right}
.login-container{width:100%;max-width:480px;margin:30px auto;padding:0 16px;flex:1;display:flex;align-items:center}
.login-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 24px;width:100%;border:1px solid rgba(0,0,0,.05)}
.login-header{text-align:center;margin-bottom:30px}
.login-header h1{font-size:24px;color:var(--secondary);margin-bottom:8px;font-weight:700}
.login-header p{color:var(--gray);font-size:15px}
.alert{padding:14px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;border:1px solid;line-height:1.5}
.alert-danger{background-color:rgba(239,68,68,.08);color:var(--danger);border-color:rgba(239,68,68,.2)}
.alert-success{background-color:rgba(16,185,129,.08);color:var(--success);border-color:rgba(16,185,129,.2)}
.form-group{margin-bottom:20px}
.form-label{display:block;margin-bottom:8px;font-weight:600;color:var(--dark);font-size:15px}
.form-control{width:100%;padding:var(--input-padding);border:1px solid #d1d5db;border-radius:8px;font-size:16px;transition:all .2s;background:#fff;color:var(--dark);-webkit-appearance:none}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(44,90,160,.1)}
.btn{padding:16px 20px;border-radius:8px;font-weight:600;font-size:16px;cursor:pointer;transition:all .2s;border:none;width:100%;display:block;text-align:center;position:relative}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;box-shadow:0 4px 12px rgba(44,90,160,.2)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none!important}
.hint{text-align:center;margin-top:16px;color:var(--gray);font-size:14px;line-height:1.5}
.login-footer{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid #e5e7eb;font-size:14px}
.login-footer a{color:var(--primary);text-decoration:none;font-weight:500}
.login-footer + .login-footer{margin-top:12px}
#countdown{font-weight:600;color:var(--danger)}
.simple-footer{text-align:center;padding:20px;color:var(--gray);font-size:14px;width:100%;background:#fff;border-top:1px solid #e5e7eb;margin-top:20px}
@media (max-width:768px){
    .header{padding:12px 0}.navbar{padding:0 16px}.logo-text{font-size:24px}
    .language-switch select{min-width:120px;padding:8px 12px;padding-left:35px;font-size:13px}
    .login-container{padding:0 12px;margin:20px auto}
    .login-card{padding:24px 20px}
    .login-header h1{font-size:22px}
    .login-header p{font-size:14px}
    .form-control,.btn{padding:14px 16px;font-size:15px}
}
@supports (-webkit-touch-callout:none){.form-control{font-size:16px}}