:root{--brand:#2563eb;--bg:#f8fafc}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:linear-gradient(135deg,#f8fafc,#eef2ff);color:#111827;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto}
.login-wrap{min-height:calc(100vh - 120px)}
.login-card{max-width:420px}
.btn-primary{background-color:var(--brand);border-color:var(--brand)}
.btn-primary:hover{filter:brightness(0.95)}
.brand-muted{color:#6b7280}
.page-container{padding:24px}
.card{border-radius:12px}
.alert{border-radius:10px}
footer{backdrop-filter:saturate(1.2)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width: 576px){
  .card{margin:0 12px}
  .page-container{padding:16px}
  .navbar .container{padding-left:16px;padding-right:16px}
}
/* Stars input */
.rating{display:flex;gap:6px;flex-direction:row-reverse;justify-content:flex-start}
.rating input{display:none}
.rating label{font-size:24px;color:#cbd5e1;cursor:pointer}
.rating input:checked ~ label{color:#f59e0b}
.rating label:hover,.rating label:hover ~ label{color:#fbbf24}
.rating:focus-within label{outline:none}
/* Stars meter for averages */
.stars{position:relative;display:inline-block;font-size:20px;line-height:1;color:#cbd5e1;direction:ltr;letter-spacing:2px;font-family:Arial,sans-serif;unicode-bidi:isolate}
.stars::before{content:'★★★★★';letter-spacing:inherit;font-family:inherit}
.stars::after{content:'★★★★★';position:absolute;left:0;top:0;width:var(--fill,0%);color:#f59e0b;overflow:hidden;white-space:nowrap;letter-spacing:inherit;font-family:inherit}