.login-page { display: grid; min-height: calc(100vh - var(--ft-topbar-height) - 3rem); place-items: center; padding: var(--ft-space-10); background: radial-gradient(circle at 10% 10%, rgba(212,163,115,.15), transparent 24rem); }
.login-shell { display: grid; width: min(100%, 62rem); grid-template-columns: minmax(0, .9fr) minmax(24rem, 1.1fr); overflow: hidden; border: 1px solid var(--ft-border); border-radius: 1.25rem; background: rgba(255,255,255,.94); box-shadow: var(--ft-shadow-raised); animation: portal-fade-up .5s ease both; }
.login-welcome { position: relative; display: grid; align-content: center; gap: var(--ft-space-4); min-height: 30rem; padding: clamp(2rem, 5vw, 3.5rem); color: #fff; background: linear-gradient(145deg, #4b3025 0%, #784d2c 58%, #9a6d32 100%); overflow: hidden; }
.login-welcome::after { position: absolute; right: -5rem; bottom: -5rem; width: 16rem; height: 16rem; border: 2rem solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }
.login-welcome img { position: relative; z-index: 1; width: 8.5rem; max-height: 5.5rem; object-fit: contain; object-position: left center; }
.login-welcome-kicker { position: relative; z-index: 1; color: rgba(255,255,255,.72); font-size: var(--ft-font-xs); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.login-welcome h1 { position: relative; z-index: 1; max-width: 15ch; margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; }
.login-welcome p { position: relative; z-index: 1; max-width: 28rem; margin: 0; color: rgba(255,255,255,.76); line-height: 1.65; }
.login-benefits { position: relative; z-index: 1; display: grid; gap: .55rem; margin-top: var(--ft-space-3); color: rgba(255,255,255,.86); font-size: var(--ft-font-sm); }
.login-benefits span { display: flex; align-items: center; gap: .55rem; }
.login-benefits i { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; color: var(--ft-brown-900); background: var(--ft-gold-500); font-style: normal; font-size: var(--ft-font-xs); font-weight: 700; }
.login-card { display: grid; align-content: center; padding: clamp(2rem, 5vw, 3.5rem); }
.login-card h2 { margin: var(--ft-space-3) 0 var(--ft-space-2); color: var(--ft-brown-900); font-size: var(--ft-font-xl); }
.login-description { margin: 0 0 var(--ft-space-6); color: var(--ft-text-secondary); line-height: 1.6; }
.login-field { margin-bottom: var(--ft-space-4); }
.login-field .form-control { min-height: 3rem; padding-inline: 1rem; }
.login-validation { margin-bottom: var(--ft-space-4); color: var(--ft-red-600); font-size: var(--ft-font-sm); }
.login-submit { width: 100%; min-height: 3rem; margin-top: var(--ft-space-2); }
.login-help { display: block; margin-top: var(--ft-space-5); color: var(--ft-text-muted); font-size: var(--ft-font-xs); line-height: 1.5; text-align: center; }
@media (max-width: 767.98px) { .login-page { min-height: auto; padding: var(--ft-space-5) var(--ft-space-4) var(--ft-space-8); } .login-shell { grid-template-columns: 1fr; } .login-welcome { min-height: 0; padding: var(--ft-space-6); } .login-welcome h1 { max-width: 20ch; font-size: 1.8rem; } .login-welcome p, .login-benefits { display: none; } .login-card { padding: var(--ft-space-6); } }
@media (prefers-reduced-motion: reduce) { .login-shell { animation: none; } }