:root { --login-ink: #2b1b16; --login-muted: #78645c; --login-line: #eaded6; --login-orange: #e86f2c; --login-orange-dark: #bd4823; }
.login-body { margin: 0; background: #2d211d; }
.login-shell { display: block; min-height: 100vh; }
.login-shell .app-content { padding: 0; overflow: visible; }
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 1.25rem; background: linear-gradient(rgba(35, 20, 14, .48), rgba(35, 20, 14, .48)), var(--login-background) center/cover no-repeat; }
.login-panel { width: min(100%, 430px); padding: clamp(2rem, 6vw, 3.25rem); border: 1px solid rgba(255, 255, 255, .55); border-radius: 24px; background: rgba(255, 250, 245, .97); box-shadow: 0 28px 70px rgba(32, 17, 11, .35); backdrop-filter: blur(10px); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; color: var(--login-ink); }
.login-brand__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #fff0df; box-shadow: inset 0 0 0 1px #f2d7c1; }
.login-brand__mark img { width: 30px; height: 30px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 1.2rem; letter-spacing: -.025em; }
.login-brand small { margin-top: .12rem; color: var(--login-muted); font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.login-panel__heading { margin: 2rem 0 1.6rem; text-align: center; }
.login-panel__heading h1 { margin: 0; color: var(--login-ink); font-size: 1.65rem; font-weight: 760; letter-spacing: -.04em; }
.login-field { margin-bottom: 1.1rem; }
.login-field > label { margin-bottom: .45rem; color: #503b33; font-size: .84rem; font-weight: 750; }
.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; z-index: 2; top: 50%; left: 1rem; color: #96766a; transform: translateY(-50%); }
.login-input-wrap .form-control { min-height: 54px; padding: .75rem 3rem .75rem 2.9rem; border: 1px solid var(--login-line); border-radius: 14px; background: #fff; color: var(--login-ink); transition: border-color .18s ease, box-shadow .18s ease; }
.login-input-wrap .form-control::placeholder { color: #ad9c95; }
.login-input-wrap .form-control:focus { border-color: #ee9a63; box-shadow: 0 0 0 4px rgba(232, 111, 44, .12); }
.login-password-toggle { position: absolute; z-index: 3; top: 50%; right: .65rem; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; color: #8b7167; background: transparent; transform: translateY(-50%); }
.login-password-toggle:hover { color: var(--login-orange-dark); background: #fff2e8; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .15rem 0 1.3rem; font-size: .82rem; }
.login-remember { display: inline-flex; align-items: center; gap: .45rem; color: var(--login-muted); cursor: pointer; }
.login-remember .form-check-input { width: 1rem; height: 1rem; margin: 0; }
.login-remember .form-check-input:checked { border-color: var(--login-orange); background-color: var(--login-orange); }
.login-options a { color: var(--login-orange-dark); font-weight: 750; text-decoration: none; }
.login-options a:hover { text-decoration: underline; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--login-orange), var(--login-orange-dark)); box-shadow: 0 12px 25px rgba(190, 72, 35, .22); font-weight: 750; transition: transform .18s ease, box-shadow .18s ease; }
.login-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px rgba(190, 72, 35, .3); }
.login-alert { border: 1px solid #f0c9c3; border-radius: 13px; background: #fff0ee; color: #8e2e23; font-size: .88rem; }
.login-alert ul { margin: 0; padding-left: 1.15rem; }
.login-toast-stack { position: fixed; z-index: 1090; top: 1rem; right: 1rem; display: grid; width: min(390px, calc(100vw - 2rem)); gap: .65rem; pointer-events: none; }
.login-toast { margin: 0; padding: .9rem 2.8rem .9rem 1rem; border-radius: 14px; box-shadow: 0 16px 42px rgba(35, 20, 14, .24); pointer-events: auto; }
.login-toast ul { display: inline; margin: 0; padding: 0; list-style: none; }
.login-toast .btn-close { top: 50%; transform: translateY(-50%); }
.login-password-toggle:focus-visible, .login-submit:focus-visible, .login-options a:focus-visible { outline: 3px solid rgba(232, 111, 44, .3); outline-offset: 2px; }
@media (max-width: 480px) { .login-page { padding: .8rem; } .login-panel { padding: 2rem 1.35rem; border-radius: 20px; } .login-options { align-items: flex-start; flex-direction: column; gap: .7rem; } }
@media (prefers-reduced-motion: reduce) { .login-submit, .login-input-wrap .form-control { transition: none; } }