body.auth-locked { overflow: hidden; }
body.auth-locked .app-shell { visibility: hidden; }
.auth-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 24px; background: #e5ebe6; }
.auth-gate[hidden], .profile-popover[hidden], .account-manager-backdrop[hidden] { display: none; }
.auth-card { box-sizing: border-box; width: min(100%, 460px); padding: 34px; border: 1px solid #b6c8bb; border-radius: 20px; background: #f8faf8; box-shadow: 0 24px 70px #063f3225; color: #20382b; }
.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 34px; color: #063f32; }
.auth-brand-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: #0b503e; color: #fff; font-weight: 800; font-size: 25px; }
.auth-brand strong { display: block; font-size: 21px; letter-spacing: -.03em; }
.auth-brand small { display: block; margin-top: 3px; color: #536b5b; }
.auth-eyebrow { margin: 0 0 7px; color: #0b6047; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.auth-card h1, .account-manager h2 { margin: 0; color: #20382b; font-size: 25px; }
.auth-description, .account-description { margin: 10px 0 22px; color: #536b5b; line-height: 1.55; }
.auth-form, .staff-create-form { display: grid; gap: 15px; }
.auth-form label, .staff-create-form label { display: grid; gap: 7px; color: #294536; font-size: 13px; font-weight: 700; }
.auth-form input, .staff-create-form input, .staff-create-form select, .account-user-row select { box-sizing: border-box; width: 100%; min-height: 44px; border: 1px solid #b6c8bb; border-radius: 10px; padding: 10px 12px; background: #fff; color: #20382b; font: inherit; font-weight: 400; }
.auth-form input:focus, .staff-create-form input:focus, .staff-create-form select:focus { outline: 3px solid #0b604733; border-color: #0b6047; }
.auth-form label small { color: #62766a; font-weight: 400; }
.auth-submit { min-height: 46px; border: 0; border-radius: 10px; padding: 11px 16px; background: #0b6047; color: #fff; font: inherit; font-weight: 750; cursor: pointer; }
.auth-submit:hover { background: #074a36; }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-gate-foot { margin: 22px 0 0; color: #62766a; font-size: 11px; text-align: center; }
.auth-notice { margin: 0 0 14px; padding: 10px 12px; border-radius: 9px; background: #fff0ec; color: #8b2c20; font-size: 13px; }
.auth-notice[data-kind="success"] { background: #e2f1e7; color: #0b503e; }
.profile-button { position: relative; }
.topbar-actions { position: relative; }
.role-preview-control { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 3px 7px; border: 1px solid #226d56; border-radius: 8px; background: #0d513e; color: #d9eee4; white-space: nowrap; }
.role-preview-control[hidden] { display: none; }
.role-preview-control span { color: #b8d7c8; font-size: 9px; font-weight: 700; }
.role-preview-control select { max-width: 132px; height: 24px; padding: 0 3px; border: 0; outline: 0; background: transparent; color: #fff; font: 600 10px var(--ui-font, Arial, sans-serif); cursor: pointer; }
.role-preview-control select option { background: #fff; color: #20382b; }
.role-preview-control.is-preview { border-color: #f0c66e; background: #f8dfa0; color: #473511; }
.role-preview-control.is-preview span { color: #815915; }
.role-preview-control.is-preview select { color: #473511; }
.profile-popover { position: absolute; z-index: 3000; top: calc(100% + 10px); right: 20px; width: 250px; padding: 9px; border: 1px solid #b6c8bb; border-radius: 13px; background: #fff; box-shadow: 0 16px 38px #063f3220; }
.profile-popover-user { display: grid; gap: 4px; padding: 10px 11px 13px; border-bottom: 1px solid #e1e9e3; color: #20382b; }
.profile-popover-user span { color: #536b5b; font-size: 12px; overflow-wrap: anywhere; }
.profile-popover-user small { color: #0b6047; font-weight: 700; }
.profile-popover > button { width: 100%; margin-top: 5px; border: 0; border-radius: 8px; padding: 10px 11px; background: transparent; color: #294536; text-align: left; font: inherit; cursor: pointer; }
.profile-popover > button:hover { background: #e5ebe6; }
@media(max-width:700px) { .role-preview-control { gap: 3px; height: 28px; padding: 2px 5px; } .role-preview-control span { display: none; } .role-preview-control select { max-width: 96px; font-size: 9px; } }
.account-manager-backdrop { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 20px; background: #10291f99; }
.account-manager { box-sizing: border-box; width: min(100%, 800px); max-height: min(90vh, 850px); overflow: auto; padding: 25px; border: 1px solid #b6c8bb; border-radius: 18px; background: #f8faf8; color: #20382b; box-shadow: 0 24px 70px #001b12aa; }
.account-manager > header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.account-close { width: 38px; height: 38px; border: 0; border-radius: 10px; background: #e5ebe6; color: #294536; font-size: 23px; cursor: pointer; }
.staff-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 17px; border: 1px solid #d5e1d8; border-radius: 13px; background: #fff; }
.staff-create-form .auth-submit { align-self: end; }
.account-list-wrap { margin-top: 23px; }
.account-list-wrap h3 { margin: 0 0 11px; font-size: 15px; }
.account-user-list { display: grid; gap: 8px; }
.account-user-row { display: grid; grid-template-columns: minmax(160px, 1.5fr) minmax(120px, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid #d5e1d8; border-radius: 11px; background: #fff; }
.account-user-summary { display: grid; gap: 3px; min-width: 0; }
.account-user-summary span { color: #62766a; font-size: 12px; overflow-wrap: anywhere; }
.account-role-label select { min-height: 37px; padding: 6px 8px; }
.account-state { color: #9a4b35; font-size: 11px; white-space: nowrap; }
.account-state.is-active { color: #0b6047; }
.account-owner-lock { color: #536b5b; font-size: 12px; }
.account-toggle { border: 1px solid #c8d7cc; border-radius: 8px; padding: 8px 10px; background: #f5f8f5; color: #294536; font: inherit; cursor: pointer; }
.account-empty { color: #62766a; }
.auth-secondary { display: block; margin: 14px auto 0; border: 0; padding: 8px 12px; background: transparent; color: #536b5b; font: inherit; cursor: pointer; }
.role-management { margin: 20px 0; }
.role-create-form, .role-editor { display: grid; gap: 12px; padding: 14px; border: 1px solid #d5e1d8; border-radius: 12px; background: #fff; }
.role-create-form { grid-template-columns: minmax(180px, 1fr) minmax(300px, 2fr) auto; align-items: end; }
.role-create-form > label, .role-editor input[name="name"] { display: grid; gap: 6px; color: #294536; font-size: 13px; font-weight: 700; }
.role-create-form input, .role-editor input[name="name"] { box-sizing: border-box; min-height: 40px; border: 1px solid #b6c8bb; border-radius: 9px; padding: 9px 11px; background: #fff; color: #20382b; font: inherit; }
.role-permissions { display: flex; flex-wrap: wrap; gap: 8px; }
.role-permissions label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d5e1d8; border-radius: 999px; padding: 7px 10px; background: #f5f8f5; color: #294536; font-size: 12px; cursor: pointer; }
.role-permissions input { accent-color: #0b6047; }
.auth-role-list { display: grid; gap: 8px; margin-top: 10px; }
.auth-role-system, .role-editor { border: 1px solid #d5e1d8; border-radius: 12px; padding: 12px; background: #fff; }
.auth-role-system { display: grid; gap: 5px; }
.auth-role-system span { color: #62766a; font-size: 12px; }
.role-editor > header { display: flex; align-items: center; gap: 8px; }
.role-editor input[name="name"] { flex: 1; font-weight: 650; }
.role-delete { color: #8b2c20; }
.role-assignment-count { display: block; margin: 2px 0 8px; color: #62766a; font-size: 12px; }
.role-delete:disabled { cursor: wait; opacity: .6; }
.account-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.auth-credential-notice { display: grid; gap: 8px; margin: 10px 0 16px; padding: 14px; border: 1px solid #c8d7cc; border-radius: 12px; background: #e2f1e7; color: #20382b; }
.auth-credential-notice code { overflow-wrap: anywhere; padding: 10px; border-radius: 8px; background: #fff; font-size: 14px; }
.auth-credential-notice small { color: #536b5b; line-height: 1.5; }
.auth-credential-notice button { justify-self: start; border: 0; border-radius: 8px; padding: 8px 12px; background: #0b6047; color: #fff; font: inherit; cursor: pointer; }
@media (max-width: 680px) { .auth-card { padding: 24px; } .staff-create-form { grid-template-columns: 1fr; } .account-user-row { grid-template-columns: 1fr auto; } .account-role-label, .account-state, .account-toggle, .account-owner-lock { justify-self: start; } }
@media (max-width: 860px) { .role-create-form { grid-template-columns: 1fr; } .account-user-actions { justify-content: flex-start; } }