:root {
    --green: #1d4835; --green-2: #143526; --green-3: #0d2519; --gold: #d8b16e; --gold-2: #c9a15a;
    --ink: #1f2a24; --muted: #7a8279; --line: #e2e0d6; --bg: #f6f5ef;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Tajawal', sans-serif; background: var(--bg); color: var(--ink); }

.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }

/* ------------------------------------------------------------ brand panel */
.brand-panel {
    position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 90% at 80% 10%, #2a6249 0%, var(--green) 40%, var(--green-3) 100%);
    display: flex; align-items: center; justify-content: center; padding: 3rem;
}
.pattern {
    position: absolute; inset: 0; opacity: .07;
    background-image:
        radial-gradient(circle at 25% 25%, var(--gold) 2px, transparent 2.5px),
        radial-gradient(circle at 75% 75%, var(--gold) 2px, transparent 2.5px);
    background-size: 46px 46px;
}
.glow {
    position: absolute; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(216,177,110,.28), transparent 65%);
    filter: blur(10px); animation: pulse 7s ease-in-out infinite;
}
.brand-inner { position: relative; text-align: center; max-width: 420px; z-index: 2; animation: rise .9s ease-out both; }
.cup { position: relative; width: 170px; height: 170px; margin: 0 auto 1.6rem; }
.logo {
    width: 170px; height: 170px; border-radius: 50%; display: block;
    box-shadow: 0 0 0 4px var(--gold), 0 0 0 12px rgba(216,177,110,.18), 0 25px 60px rgba(0,0,0,.45);
}
.steam {
    position: absolute; top: -46px; width: 10px; height: 48px; border-radius: 10px;
    background: linear-gradient(to top, rgba(255,255,255,.55), transparent);
    filter: blur(3px); opacity: 0; animation: steam 3.2s ease-in-out infinite;
}
.s1 { left: 62px; animation-delay: 0s; }
.s2 { left: 80px; animation-delay: 1s; height: 60px; top: -58px; }
.s3 { left: 98px; animation-delay: 2s; }
.brand-inner h1 { font-size: 2.4rem; font-weight: 800; margin: 0; color: var(--gold); letter-spacing: .5px; }
.en { margin: .3rem 0 0; letter-spacing: .35em; font-size: .8rem; opacity: .75; }
.divider { display: flex; align-items: center; gap: .8rem; margin: 1.6rem auto 1rem; max-width: 280px; }
.divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.divider span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.divider b { color: var(--gold); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.tag { font-size: 1.15rem; margin: 0 0 2rem; opacity: .92; }
.feats { list-style: none; padding: 0; margin: 0 auto; display: inline-flex; flex-direction: column; gap: .7rem; text-align: right; }
.feats li { font-size: .98rem; opacity: .88; }
.feats i { color: var(--gold); font-style: normal; margin-left: .5rem; font-size: .7rem; }

.beans span {
    position: absolute; width: 22px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, #6b4a2b, #3e2715); opacity: .22;
    animation: float 14s linear infinite;
}
.beans span::after {
    content: ""; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 2px; margin-left: -1px;
    background: rgba(0,0,0,.45); border-radius: 2px; transform: rotate(8deg);
}
.b0 { left: 8%;  bottom: -40px; animation-delay: 0s; }
.b1 { left: 22%; bottom: -40px; animation-delay: 3s;  transform: scale(.7); }
.b2 { left: 38%; bottom: -40px; animation-delay: 6s; }
.b3 { left: 55%; bottom: -40px; animation-delay: 1.5s; transform: scale(.8); }
.b4 { left: 70%; bottom: -40px; animation-delay: 4.5s; }
.b5 { left: 85%; bottom: -40px; animation-delay: 8s;  transform: scale(.6); }
.b6 { left: 15%; bottom: -40px; animation-delay: 10s; }
.b7 { left: 62%; bottom: -40px; animation-delay: 11.5s; transform: scale(.75); }
.b8 { left: 92%; bottom: -40px; animation-delay: 5.5s; }

/* ------------------------------------------------------------ form panel */
.form-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; gap: 1.5rem; }
.card {
    width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 2.6rem 2.4rem;
    box-shadow: 0 1px 0 var(--line), 0 30px 70px -30px rgba(29,72,53,.35);
    border-top: 4px solid var(--gold); animation: rise .7s ease-out .1s both;
}
.mobile-logo { display: none; }
.card h2 { margin: 0; font-size: 1.85rem; font-weight: 800; color: var(--green); }
.sub { margin: .35rem 0 1.8rem; color: var(--muted); }
.alert {
    background: #fdf0ee; color: #a2342a; border: 1px solid #f3cfc9; border-radius: 12px;
    padding: .75rem 1rem; margin-bottom: 1.2rem; font-size: .95rem; animation: shake .4s;
}
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .45rem; }
.input { position: relative; }
.input > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; fill: #a7ada6; pointer-events: none; }
.input input {
    width: 100%; font: inherit; font-size: 1rem; padding: .85rem 2.8rem .85rem 2.8rem;
    border: 1.5px solid var(--line); border-radius: 12px; background: #fbfbf8; color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background .2s; text-align: right;
}
.input input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 4px rgba(29,72,53,.1); }
.input:focus-within > svg { fill: var(--green); }
.eye { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; padding: 4px; }
.eye svg { width: 22px; fill: #a7ada6; display: block; }
.eye.on svg, .eye:hover svg { fill: var(--gold-2); }
.err { display: block; color: #b03a2e; font-size: .85rem; margin-top: .3rem; }
.caps { display: block; color: #9a6a1c; font-size: .85rem; margin-top: .35rem; }
.caps[hidden] { display: none; }
.remember { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 1.5rem; font-size: .93rem; color: #4d564f; cursor: pointer; }
.remember input { width: 17px; height: 17px; accent-color: var(--green); }
.submit {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem;
    font: inherit; font-size: 1.08rem; font-weight: 700; color: #fff; cursor: pointer;
    border: 0; border-radius: 12px; padding: .95rem;
    background: linear-gradient(135deg, var(--green) 0%, #2a6249 100%);
    box-shadow: 0 12px 24px -10px rgba(29,72,53,.6); transition: transform .15s, box-shadow .2s, filter .2s;
}
.submit svg { width: 20px; fill: var(--gold); transition: transform .2s; }
.submit:hover { filter: brightness(1.08); box-shadow: 0 16px 28px -10px rgba(29,72,53,.7); }
.submit:hover svg { transform: translateX(-4px); }
.submit:active { transform: translateY(1px); }
.submit.busy { pointer-events: none; opacity: .8; }
.submit.busy span::after { content: "…"; }
.foot { text-align: center; color: var(--muted); font-size: .85rem; margin: 1.6rem 0 0; }
.copy { color: #9aa199; font-size: .8rem; margin: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: .6; } }
@keyframes steam { 0% { opacity: 0; transform: translateY(14px) scaleX(1); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px) scaleX(1.8); } }
@keyframes float { from { transform: translateY(0) rotate(0); } to { transform: translateY(-115vh) rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

@media (max-width: 900px) {
    .login { grid-template-columns: 1fr; }
    .brand-panel { display: none; }
    .form-panel { background: radial-gradient(120% 70% at 50% 0%, #2a6249 0%, var(--green) 35%, var(--bg) 35.2%); min-height: 100vh; }
    .mobile-logo { display: block; width: 92px; height: 92px; border-radius: 50%; margin: -4.4rem auto 1rem; box-shadow: 0 0 0 4px var(--gold), 0 12px 30px rgba(0,0,0,.3); }
    .card { padding: 2rem 1.5rem; margin-top: 3rem; }
    .card h2, .sub { text-align: center; }
}