:root{
  color-scheme:light;
  font-family:Inter,"Aptos",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ink:#222120;
  --muted:#7d848b;
  --panel:#fbf8f3;
  --panel-2:#f7f2eb;
  --line:#ddd8d1;
  --gold-1:#8f6530;
  --gold-2:#c8934d;
  --system-accent:#b48749;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f5efe6;color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img,svg{display:block}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.login-layout{display:flex;width:100%;height:100vh;height:100dvh;min-height:650px;background:#f7f1e9}
.login-panel{position:relative;z-index:2;flex:0 0 42%;width:42%;min-width:540px;max-width:690px;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;background:
  radial-gradient(circle at 8% 2%,rgba(255,255,255,.98),rgba(255,255,255,0) 36%),
  linear-gradient(180deg,#fffdf9 0%,#fbf8f3 58%,#f8f3eb 100%);
  box-shadow:22px 0 60px rgba(70,54,36,.08);
}
[dir="rtl"] .login-panel{box-shadow:-22px 0 60px rgba(70,54,36,.08)}
.login-panel-inner{height:100%;display:flex;flex-direction:column;padding:28px clamp(30px,3.2vw,54px) 32px}
.login-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px;flex:0 0 auto}
.back-link{display:inline-flex;align-items:center;gap:10px;color:#66717a;font-size:.84rem;font-weight:650;transition:color .2s ease,transform .2s ease}
.back-link:hover{color:#243b4e;transform:translateX(-2px)}
.back-arrow{font-size:1.2rem;line-height:1}
[dir="rtl"] .back-arrow{transform:rotate(180deg)}
[dir="rtl"] .back-link:hover{transform:translateX(2px)}
.login-content{width:min(100%,480px);margin:auto;display:flex;flex-direction:column;align-items:stretch;padding:16px 0 2px}
.system-brand{text-align:center;margin:0 auto 22px}
.system-animal-mark{width:126px;height:82px;margin:0 auto 12px;display:grid;place-items:center;overflow:visible}
.system-animal-mark img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.system-code{display:block;font-family:Georgia,"Times New Roman",serif;font-size:3.35rem;font-weight:500;line-height:.96;letter-spacing:.03em;color:#8f683b;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.system-name{display:block;margin-top:10px;color:#727980;font-size:.71rem;font-weight:700;letter-spacing:.31em;text-transform:uppercase;white-space:nowrap}
[dir="rtl"] .system-name{font-size:.95rem;letter-spacing:0;text-transform:none;white-space:normal;font-family:"Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif}
.brand-rule{display:block;width:58px;height:1px;margin:18px auto 0;background:linear-gradient(90deg,transparent,#a9793b 17%,#a9793b 83%,transparent)}

.login-heading{text-align:center;margin-bottom:28px}
.login-heading h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.7rem,4vw,4rem);font-weight:500;line-height:1.02;color:#201f1e;letter-spacing:-.025em}
[dir="rtl"] .login-heading h1{font-family:"Geeza Pro","Noto Naskh Arabic",serif;font-weight:700;letter-spacing:0}
.login-heading p{margin:12px 0 0;color:#8f9499;font-size:.79rem;font-weight:700;letter-spacing:.29em;text-transform:uppercase}
[dir="rtl"] .login-heading p{letter-spacing:0;text-transform:none;font-size:.96rem}

.login-form{display:grid;gap:16px}
.field-control{height:60px;display:grid;grid-template-columns:28px minmax(0,1fr) 36px;align-items:center;gap:10px;padding:0 16px;border:1px solid #d7d8d8;border-radius:13px;background:rgba(255,255,255,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(48,45,41,.02);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.field-control:first-of-type{grid-template-columns:28px minmax(0,1fr)}
.field-control:hover{background:rgba(255,255,255,.9)}
.field-control:focus-within{border-color:#b88849;box-shadow:0 0 0 3px rgba(184,136,73,.11)}
.field-icon,.password-toggle svg,.language-picker-button svg{width:23px;height:23px;fill:none;stroke:#737a80;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.field-control input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:#2a2d2f;font-size:.94rem}
.field-control input::placeholder{color:#9da1a4;opacity:1}
.password-toggle{width:36px;height:36px;border:0;padding:0;border-radius:50%;background:transparent;display:grid;place-items:center;transition:background .18s ease}
.password-toggle:hover,.password-toggle.active{background:#f1ece5}
.login-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:1px 0 2px;color:#333638;font-size:.82rem}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer}
.remember input{-webkit-appearance:none;appearance:none;width:21px;height:21px;margin:0;border:1px solid #c5b293;border-radius:5px;background:#fff;display:grid;place-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.remember input:checked{border-color:#9c7038;background:linear-gradient(145deg,#8d6230,#bf8f4d)}
.remember input:checked:after{content:"✓";color:#fff;font-size:.8rem;font-weight:900;line-height:1}
.forgot-button{border:0;background:transparent;color:#9d6e34;padding:5px 0;font-size:.82rem}
.forgot-button:hover{text-decoration:underline}
.sign-in-button{height:62px;border:0;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:18px;padding:0 24px;background:linear-gradient(94deg,#8d6130 0%,#bd8846 53%,#d09c53 100%);color:#fff;font-size:1rem;font-weight:650;box-shadow:0 13px 28px rgba(156,104,46,.23);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.sign-in-button:hover{transform:translateY(-1px);box-shadow:0 17px 31px rgba(156,104,46,.3);filter:saturate(1.04)}
.sign-arrow{font-size:1.45rem;font-weight:300;line-height:1}
[dir="rtl"] .sign-arrow{transform:rotate(180deg)}

.language-picker{position:relative;width:204px}
.language-picker-button{width:100%;height:46px;border:1px solid #d9d8d6;border-radius:999px;background:rgba(255,255,255,.56);display:grid;grid-template-columns:25px 1fr 20px;align-items:center;gap:11px;padding:0 18px;color:#565e65;font-size:.82rem;text-align:start;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}
.language-picker-button svg{width:21px;height:21px}
.language-picker-button .picker-chevron{width:17px;height:17px;transition:transform .2s ease}
.language-picker.open .picker-chevron{transform:rotate(180deg)}
.language-picker-menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:10;display:none;padding:6px;border:1px solid #ddd5ca;border-radius:16px;background:#fffdf9;box-shadow:0 14px 34px rgba(56,43,29,.15)}
.language-picker.open .language-picker-menu{display:block}
.language-picker-menu a{display:block;padding:9px 11px;border-radius:11px;color:#51575c;font-size:.8rem}
.language-picker-menu a:hover,.language-picker-menu a.active{background:#f5eee4;color:#8a632f}
.top-language-picker{width:158px;flex:0 0 auto}
.top-language-picker .language-picker-button{height:38px;padding:0 13px;grid-template-columns:20px 1fr 16px;gap:8px;background:rgba(255,255,255,.78);box-shadow:0 6px 18px rgba(72,58,40,.05)}
.top-language-picker .language-picker-button svg{width:18px;height:18px}
.top-language-picker .language-picker-menu{left:auto;right:0;min-width:158px}
[dir="rtl"] .top-language-picker .language-picker-menu{left:0;right:auto}

.login-tagline{display:flex;align-items:center;justify-content:center;gap:21px;margin-top:30px;color:#898f95;font-size:.62rem;font-weight:750;letter-spacing:.31em;text-transform:uppercase;white-space:nowrap}
.login-tagline i{display:block;width:1px;height:13px;background:#a67b44}
[dir="rtl"] .login-tagline{letter-spacing:0;text-transform:none;font-size:.78rem}

.login-visual{position:relative;flex:1 1 auto;min-width:0;height:100vh;height:100dvh;overflow:hidden;background:#eadfce;isolation:isolate}
.login-visual-backdrop,.login-visual-image{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(0)}
.login-visual-backdrop{z-index:0;object-fit:cover;object-position:center;filter:blur(22px) saturate(.88);transform:scale(1.08);opacity:.28}
.login-visual:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(251,248,243,.13),rgba(255,255,255,0) 26%,rgba(20,27,31,.04));pointer-events:none}
.login-visual-image{z-index:2;object-fit:contain;object-position:center center}

.login-toast{position:fixed;left:50%;bottom:26px;z-index:40;width:calc(100vw - 32px);max-width:540px;transform:translate(-50%,26px);padding:13px 17px;border-radius:14px;background:rgba(26,31,35,.94);color:#fff;font-size:.82rem;line-height:1.45;box-shadow:0 18px 46px rgba(0,0,0,.23);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.login-toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:1600px){
  .login-panel{max-width:720px}
  .login-panel-inner{padding-left:62px;padding-right:62px}
  .login-content{width:min(100%,500px)}
}

@media (min-width:901px) and (max-height:820px){
  .login-panel-inner{padding-top:20px;padding-bottom:20px}
  .login-content{padding-top:7px}
  .system-brand{margin-bottom:14px}
  .system-animal-mark{width:102px;height:65px}
  .system-code{font-size:2.85rem}
  .system-name{margin-top:7px;font-size:.63rem}
  .brand-rule{margin-top:13px}
  .login-heading{margin-bottom:19px}
  .login-heading h1{font-size:2.65rem}
  .login-heading p{margin-top:8px}
  .login-form{gap:12px}
  .field-control{height:52px}
  .sign-in-button{height:54px}
  .login-tagline{margin-top:20px}
}

@media (max-width:900px){
  body{overflow:auto;background:#fbf8f3}
  .login-layout{height:auto;min-height:100vh;display:block;background:#fbf8f3}
  .login-panel{width:100%;min-width:0;max-width:none;min-height:100vh;height:auto;box-shadow:none;border-radius:0}
  .login-panel-inner{min-height:100vh;padding:18px 18px 24px}
  .login-content{width:min(100%,520px);padding-top:14px}
  .login-visual{display:none}
  .system-brand{margin-bottom:18px}
  .system-animal-mark{width:104px;height:67px}
  .system-code{font-size:3rem}
  .system-name{font-size:.63rem;letter-spacing:.25em}
  .login-heading{margin-bottom:22px}
  .login-heading h1{font-size:clamp(2.65rem,9vw,3.55rem)}
  .field-control{height:58px}
  .sign-in-button{height:60px}
  .login-tagline{margin-top:31px;margin-bottom:6px}
}

@media (max-width:520px){
  .login-panel-inner{padding:12px 14px 22px}
  .login-topbar{gap:8px}
  .back-link{font-size:.72rem}
  .top-language-picker{width:132px}
  .top-language-picker .language-picker-button{height:34px;padding:0 10px;grid-template-columns:18px 1fr 14px;font-size:.72rem}
  .top-language-picker .language-picker-menu{min-width:132px}
  .login-content{padding-top:6px}
  .system-animal-mark{width:94px;height:61px}
  .system-code{font-size:2.7rem}
  .system-name{font-size:.58rem;letter-spacing:.2em}
  .brand-rule{margin-top:14px}
  .login-heading h1{font-size:2.75rem}
  .login-heading p{font-size:.68rem;letter-spacing:.22em}
  .login-form{gap:13px}
  .field-control{height:56px;padding-left:14px;padding-right:14px}
  .field-control input{font-size:.88rem}
  .login-options{font-size:.75rem}
  .forgot-button{font-size:.75rem}
  .sign-in-button{height:57px}
  .login-tagline{gap:14px;font-size:.53rem;letter-spacing:.24em}
}

@media (max-width:390px){
  .back-link span:last-child{display:none}
  .login-panel-inner{padding-left:11px;padding-right:11px}
  .system-name{font-size:.54rem}
  .login-heading h1{font-size:2.45rem}
  .login-options{align-items:flex-start;gap:9px}
  .remember span{max-width:124px;line-height:1.25}
  .login-tagline{gap:10px;letter-spacing:.18em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

@media (min-width:901px) and (max-aspect-ratio:4/5){
  .login-panel{flex-basis:48%;width:48%;min-width:500px}
}
@media (min-width:901px) and (min-aspect-ratio:21/9){
  .login-panel{flex-basis:38%;width:38%;max-width:740px}
}
@supports not (height:100dvh){
  body,.login-layout,.login-panel,.login-visual{height:100vh}
}

@media (min-width:901px) and (max-height:680px){
  .login-panel-inner{padding-top:14px;padding-bottom:14px}
  .login-topbar{min-height:32px}
  .login-content{padding-top:3px}
  .system-brand{margin-bottom:10px}
  .system-animal-mark{width:84px;height:52px}
  .system-code{font-size:2.5rem}
  .system-name{margin-top:5px;font-size:.56rem;letter-spacing:.25em}
  .brand-rule{margin-top:10px}
  .login-heading{margin-bottom:14px}
  .login-heading h1{font-size:2.35rem}
  .login-heading p{margin-top:6px;font-size:.63rem}
  .login-form{gap:9px}
  .field-control{height:48px}
  .login-options{font-size:.74rem}
  .sign-in-button{height:50px}
  .login-tagline{margin-top:14px}
}

/* R9 brand-mark refinement */
.animal-login-cms .system-animal-mark{width:142px;height:82px;margin-bottom:15px}
.animal-login-hms .system-animal-mark{margin-bottom:15px}
.animal-login-fms .system-animal-mark{margin-bottom:13px}
@media (min-width:901px) and (max-height:820px){
  .animal-login-cms .system-animal-mark,.animal-login-hms .system-animal-mark{margin-bottom:10px}
}
@media (max-width:520px){
  .system-animal-mark{margin-bottom:9px}
  .animal-login-cms .system-animal-mark{width:112px;height:66px;margin-bottom:10px}
}

/* FMS database-backed prototype sign-in feedback */
.login-error{margin:0 0 14px;padding:10px 12px;border:1px solid #e6c6bd;border-radius:10px;background:#fff0ed;color:#8d4138;font:600 12px/1.45 Arial,Helvetica,sans-serif;text-align:start}

/* R21.4 hosted-login transition: keep the user covered while auth.php and the
   first authenticated FMS request perform their server-side work. */
.login-transition-loader[hidden]{display:none!important}.login-transition-loader{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;background:rgba(248,246,241,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.login-transition-card{width:min(360px,calc(100vw - 40px));display:grid;justify-items:center;gap:11px;padding:28px;border:1px solid rgba(80,75,67,.16);border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 26px 80px rgba(31,35,38,.18);text-align:center;color:#293139}.login-transition-mark{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:#f5f1ea;border:1px solid rgba(80,75,67,.12)}.login-transition-mark img{display:block;width:44px;height:44px;object-fit:contain}.login-transition-card strong{font-size:1rem}.login-transition-card span{font-size:.78rem;color:#747a7f}.login-transition-spinner{width:24px;height:24px;border-radius:50%;border:2px solid rgba(180,135,73,.2);border-top-color:var(--system-accent,#b48749);animation:login-transition-spin .8s linear infinite}@keyframes login-transition-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.login-transition-spinner{animation:none;border-top-color:rgba(180,135,73,.65)}}

/* UAE Vision readiness state */
.system-readiness{display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:100%;margin:0 auto 14px;padding:6px 10px;border-radius:999px;font:800 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.system-readiness span{width:7px;height:7px;border-radius:50%}.system-readiness.ready{border:1px solid #b8d7c7;background:#eef8f2;color:#2a7354}.system-readiness.ready span{background:#3d9a71;box-shadow:0 0 0 4px rgba(61,154,113,.11)}.system-readiness.planned{border:1px solid #d8d6d2;background:#f5f4f1;color:#727578}.system-readiness.planned span{background:#8e9295}.system-readiness.next{border:1px solid #d9c8a7;background:#fbf5e8;color:#896126}.system-readiness.next span{background:#b4883f;box-shadow:0 0 0 4px rgba(180,136,63,.11)}
[dir="rtl"] .system-readiness{letter-spacing:0;text-transform:none}
.planned-login-note{margin:-4px 0 16px;padding:10px 12px;border:1px solid #e0d7ca;border-radius:11px;background:#faf7f1;color:#7a7062;font:600 11px/1.55 Arial,Helvetica,sans-serif;text-align:center}