html,body,button,input,select,textarea{font-family:"Cairo","Segoe UI",Tahoma,sans-serif}
body{overflow-x:hidden}
.btn{font-family:inherit}
.login-page,.login-submit{font-family:"Cairo","Segoe UI",Tahoma,sans-serif}
.login-field input{direction:rtl;text-align:right;padding-right:50px;padding-left:46px}
.login-field .input-icon{right:17px;left:auto}
.login-field .password-toggle{left:10px;right:auto}
.login-field .input-wrap:has(.password-toggle) input{padding-left:54px}

@media(min-width:851px){
  html:has(.login-page),body:has(.login-page){height:100%;overflow:hidden}
  .login-page{width:100%;height:100svh;min-height:0;padding:24px;overflow:hidden}
  .login-shell{height:min(760px,calc(100svh - 48px));min-height:0}
  .login-visual{height:100%;min-height:0}
  .login-panel{height:100%;min-height:0;padding-block:34px 24px}
  .login-copy{padding-top:24px}
  .login-form{margin-top:22px}
  .login-field{margin-bottom:14px}
  .login-field input{height:52px}
  .login-submit{height:52px}
  .login-foot{padding-top:18px}
}

@media(min-width:851px) and (max-height:760px){
  .login-page{padding:16px}
  .login-shell{height:calc(100svh - 32px)}
  .login-panel{padding-block:22px 16px}
  .login-brand .brand-mark{width:40px;height:40px}
  .login-copy{padding-top:14px}
  .login-copy h1{margin-block:7px;font-size:32px;line-height:1.2}
  .login-copy p{font-size:12px}
  .login-form{margin-top:14px}
  .login-field{gap:5px;margin-bottom:9px}
  .login-field input{height:46px}
  .login-meta{margin-bottom:10px}
  .login-submit{height:46px}
  .login-foot{padding-top:10px}
}

@media(max-width:680px){
  .shell{width:100%;overflow-x:hidden}
  .sidebar{padding:max(14px,env(safe-area-inset-top)) 14px 14px}
  .sidebar .brand{justify-content:center}
  .sidebar .nav{margin-inline:-4px;padding:4px;scrollbar-width:none}
  .sidebar .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;padding:11px 13px;font-size:12px}
  .topbar{padding-inline:14px;gap:10px}
  .topbar-actions{gap:6px}
  .topbar .btn{padding:9px 11px;font-size:12px}
  .content{width:100%;padding:14px}
  .card{border-radius:12px}
  .form-grid{gap:13px}
  .field input,.field select,.field textarea{font-size:16px}
  .form-actions{flex-wrap:wrap}
  .form-actions .btn{justify-content:center;flex:1 1 130px}
  table{min-width:620px}
}

@media(max-width:480px){
  .login-page{min-height:100svh;padding:0;overflow:auto;background:#fff}
  .login-shell{width:100%;min-height:100svh;display:flex;flex-direction:column}
  .login-visual{flex:0 0 190px;min-height:190px}
  .login-visual>img{object-position:50% 29%}
  .visual-copy{right:22px;left:22px;bottom:18px}
  .visual-copy h2{font-family:"Cairo",sans-serif;font-size:23px;font-weight:700;line-height:1.3}
  .visual-kicker{font-size:8px}
  .login-panel{flex:1;padding:22px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .login-brand strong{font-family:"Cairo",sans-serif;font-size:15px}
  .login-copy{padding-top:24px}
  .login-copy h1{font-size:28px;line-height:1.35}
  .login-copy h1 br{display:none}
  .login-copy h1 em{font-family:"Cairo",sans-serif}
  .login-copy p{font-size:12px;line-height:1.8}
  .login-form{margin-top:20px}
  .login-field{margin-bottom:14px}
  .login-field input{height:52px;font-size:16px}
  .login-submit{height:52px}
  .login-foot{padding-top:20px}
}

@media(max-width:360px){
  .login-visual{flex-basis:165px;min-height:165px}
  .login-panel{padding-top:18px}
  .login-copy{padding-top:18px}
  .login-copy h1{margin-block:7px;font-size:24px}
  .login-meta{margin-bottom:14px}
}