
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');
:root{--bg:#050b14;--panel:#091728;--gold:#d49a3a;--gold2:#f1c46c;--line:rgba(212,154,58,.38)}
*{box-sizing:border-box;max-width:100%}html,body{width:100%;max-width:100%;overflow-x:hidden;margin:0;touch-action:pan-y}body{font-family:Tajawal,Arial,sans-serif;direction:rtl;background:#050b14;color:#fff;min-height:100vh}
.auth-header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1240px)/2));background:#050b14;border-bottom:1px solid var(--line)}.auth-logo{display:flex;align-items:center;gap:10px;color:var(--gold2);text-decoration:none}.auth-logo span{font-size:42px}.auth-logo strong{display:block;font-size:27px}.auth-logo small{display:block;color:var(--gold2);font-size:12px}.auth-header nav{display:flex;gap:20px}.auth-header nav a{color:#fff;text-decoration:none;font-weight:800}.auth-header nav .gold{background:linear-gradient(135deg,#f0c573,#b87928);color:#07111f;padding:10px 18px;border-radius:7px}
.auth-shell{width:min(1240px,calc(100% - 32px));margin:26px auto;display:grid;grid-template-columns:620px 1fr;gap:24px;min-height:720px}.login-shell{grid-template-columns:500px 1fr}.auth-card{background:linear-gradient(145deg,rgba(9,23,40,.96),rgba(2,8,18,.98));border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 26px 65px rgba(0,0,0,.35);align-self:center}.auth-icon{width:78px;height:78px;border-radius:20px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(135deg,#f5d483,#b87928)}.auth-card h1{text-align:center;color:var(--gold2);font-size:34px;margin:0}.subtitle{text-align:center;color:#f7dfbc}.auth-visual{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(0deg,rgba(2,8,18,.12),rgba(2,8,18,.10)),url('../images/register-horse-visual.jpg') center/cover no-repeat;min-height:620px;position:relative}.visual-overlay{position:absolute;inset:auto 28px 28px 28px;background:rgba(8,20,34,.74);border:1px solid var(--line);border-radius:16px;padding:22px}.visual-overlay h2{color:var(--gold2);font-size:30px;margin:0 0 8px}.visual-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.visual-stats span{border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.auth-alert{border-radius:12px;padding:12px;margin-bottom:14px;font-weight:800}.auth-alert.error{background:rgba(211,22,49,.18);border:1px solid rgba(211,22,49,.5);color:#ffd9df}.auth-form{width:100%;overflow:hidden}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .wide,.phone-field{grid-column:1/-1}.auth-form label span,.phone-title{display:block;margin-bottom:7px;color:#ffe5b7;font-weight:800}.auth-form input,.auth-form select{width:100%;height:50px;border-radius:9px;border:1px solid var(--line);background:rgba(2,8,18,.65);color:#fff8e8;padding:0 14px;font-size:16px;outline:none}.auth-form input::placeholder{color:rgba(255,238,210,.55)}.auth-form select option{background:#07111f;color:white}.check{display:flex!important;align-items:center;gap:10px;margin:18px 0}.check input{width:18px!important;height:18px!important}.check span{margin:0!important}.auth-submit{width:100%;height:54px;border:0;border-radius:9px;background:linear-gradient(135deg,#f0c573,#b87928);color:#07111f;font-size:18px;font-weight:900}.switch{text-align:center;color:#ffe2b6}.switch a{color:var(--gold2);font-weight:900}.phone-row{display:grid;grid-template-columns:190px 1fr;gap:12px}.phone-row input{direction:ltr;text-align:left}.phone-field .hint{display:block;margin-top:8px;color:var(--gold2);font-size:12px}
@media(max-width:950px){.auth-header{height:70px;padding:0 14px}.auth-logo span{font-size:34px}.auth-logo strong{font-size:22px}.auth-logo small{display:none}.auth-header nav{display:none}.auth-shell,.login-shell{width:100%;max-width:100vw;margin:0;padding:14px 12px 90px;display:block;min-height:auto}.auth-visual{display:none}.auth-card{width:100%;margin:0 auto;padding:22px 16px;border-radius:18px}.auth-card h1{font-size:30px}.form-grid,.phone-row{grid-template-columns:1fr;gap:11px}.auth-form input,.auth-form select{height:48px;font-size:16px}}
