:root { font-family: Inter, "Segoe UI", Arial, sans-serif; color: #1c2b42; background: #f3f6fb; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.auth-page { background: radial-gradient(ellipse at 50% 0%, #e4eef9 0, #f4f7fb 54%, #edf2f8 100%); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }
.login-card { width: min(100%, 420px); padding: 34px 38px 28px; border: 1px solid #e5ebf2; border-radius: 20px; background: #fff; box-shadow: 0 18px 55px rgb(22 43 74 / 10%); }
.login-logo { display: block; width: 90px; height: 90px; object-fit: contain; margin: 0 auto 14px; }
.auth-eyebrow { margin: 0 0 9px; color: #19876f; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.login-card h1 { margin: 0; color: #142440; font-size: 27px; letter-spacing: -.035em; text-align: center; }
.auth-subtitle { margin: 9px 0 25px; color: #66768d; font-size: 13px; text-align: center; }
.login-card form { display: grid; gap: 9px; }
.login-card label, .auth-label { margin-top: 7px; color: #263851; font-size: 12px; font-weight: 700; }
.login-card input, .auth-input, .auth-select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d9e2ed; border-radius: 9px; outline: 0; background: #fff; color: #172941; font: inherit; font-size: 13px; }
.login-card input:focus, .auth-input:focus, .auth-select:focus { border-color: #398bc5; box-shadow: 0 0 0 3px rgb(57 139 197 / 14%); }
.password-field { display: flex; align-items: center; position: relative; }
.password-field input { padding-right: 80px; }
.password-toggle { position: absolute; right: 7px; min-height: 32px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #386e9a; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.password-toggle:hover { background: #eef5fb; }
.auth-primary, .auth-secondary, .auth-danger { min-height: 40px; padding: 9px 15px; border: 0; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: background-color .16s ease, box-shadow .16s ease; }
.auth-primary { margin-top: 10px; background: #17345b; color: #fff; }
.auth-primary:hover { background: #214675; box-shadow: 0 5px 14px rgb(23 52 91 / 18%); }
.auth-primary:disabled, .auth-secondary:disabled, .auth-danger:disabled { opacity: .6; cursor: wait; }
.auth-secondary { border: 1px solid #d9e3ee; background: #fff; color: #31445d; }
.auth-secondary:hover { background: #f3f7fb; }
.auth-danger { background: #b93843; color: #fff; }
.auth-danger:hover { background: #a82e38; }
.login-footnote { margin: 21px 0 0; color: #8996a8; font-size: 10px; text-align: center; }
.auth-message { margin: 4px 0; padding: 10px 11px; border-radius: 8px; font-size: 12px; line-height: 1.45; }
.auth-message[hidden] { display: none; }
.auth-message.error { border: 1px solid #f1d0d3; background: #fff4f4; color: #9d2932; }
.auth-message.success { border: 1px solid #cde8dd; background: #effaf5; color: #176d55; }
.auth-app { min-height: 100vh; background: #f4f7fb; }
.auth-content { width: min(100% - 36px, 1080px); margin: 28px auto 60px; }
.auth-panel { margin-bottom: 18px; padding: 22px; border: 1px solid #e5ebf2; border-radius: 15px; background: white; box-shadow: 0 8px 25px rgb(25 46 76 / 5%); }
.auth-panel h1 { margin: 0 0 7px; color: #172b49; font-size: 22px; }
.auth-panel h2 { margin: 0 0 14px; color: #213753; font-size: 15px; }
.auth-panel p { color: #63738a; font-size: 12px; line-height: 1.5; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.auth-field { display: grid; gap: 7px; }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 15px; }
.auth-table-wrap { overflow: auto; }
.auth-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.auth-table th, .auth-table td { padding: 10px 9px; border-bottom: 1px solid #e9eef4; text-align: left; vertical-align: middle; }
.auth-table th { color: #586a81; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.auth-pill { display: inline-flex; padding: 4px 7px; border-radius: 20px; background: #eef4fa; color: #345474; font-size: 10px; font-weight: 700; }
.auth-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.auth-check { display: flex; gap: 8px; align-items: center; color: #42536a; font-size: 12px; }
.auth-check input { accent-color: #1d806b; }
.auth-inline-form { display: flex; flex-wrap: wrap; gap: 9px; align-items: end; }
.auth-inline-form .auth-field { flex: 1 1 170px; }
.auth-small { color: #75849a; font-size: 11px; }
@media (max-width: 640px) { .login-card { padding: 28px 22px 24px; } .auth-content { width: min(100% - 22px, 1080px); margin-top: 16px; } .auth-panel { padding: 17px; } .auth-grid, .auth-checks { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .auth-content { width: calc(100% - max(22px, env(safe-area-inset-left)) - max(22px, env(safe-area-inset-right))); }
    .auth-field input:not([type="checkbox"]),.auth-field select,.auth-field textarea { min-width:0; max-width:100%; font-size:16px; }
    .auth-primary,.auth-secondary,.auth-danger { min-height:44px; }
    .auth-actions>* { max-width:100%; }
    .auth-table-wrap { overscroll-behavior-x:contain; }
}
@media (max-width: 1023px) {
    .auth-content { padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }