:root { font-family: Inter, "Segoe UI", Arial, sans-serif; color: #172b45; background: #f4f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
.access-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 26px; background: #26384d; color: white; border-bottom: 3px solid #d7a514; }
.access-header h1 { margin: 2px 0; font-size: 25px; }
.access-header p { margin: 0; color: #dbe5ef; }
.access-header .eyebrow { color: #e1bb4e; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.access-header nav { display: flex; align-items: center; gap: 9px; }
.access-header a, .access-header button { padding: 8px 11px; border: 1px solid #8091a3; border-radius: 5px; background: transparent; color: white; text-decoration: none; cursor: pointer; }
.access-shell { padding: 18px 24px 36px; }
.access-status { min-height: 40px; padding: 10px 12px; border: 1px solid #d5dfeb; border-radius: 6px; background: white; }
.access-status.error { border-color: #e79b96; color: #a72b22; background: #fff6f5; }
.access-status.success { border-color: #9bd0af; color: #176438; background: #f1fbf5; }
.access-tabs { display: flex; gap: 3px; margin: 16px 0 0; border-bottom: 1px solid #cdd8e5; }
.access-tabs button { padding: 10px 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #41566f; font-weight: 750; cursor: pointer; }
.access-tabs button.active { border-color: #3479c8; color: #163a64; }
.access-panel { margin-top: 14px; padding: 16px; border: 1px solid #d5dfeb; border-radius: 7px; background: white; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.panel-heading h2, .panel-heading p { margin: 0; }
.panel-heading p { margin-top: 4px; color: #66798e; }
.panel-heading button, .form-actions button, .user-form button { padding: 8px 13px; border: 1px solid #2f6fba; border-radius: 5px; background: #2f6fba; color: white; font-weight: 700; cursor: pointer; }
.roles-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; }
.role-card { padding: 14px; border: 1px solid #d7e0eb; border-radius: 7px; background: #fbfcfe; }
.role-card h3, .role-card p { margin: 0; }
.role-card p { margin-top: 4px; color: #66798e; }
.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; margin-top: 14px; }
.permission-grid label, .check { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.role-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.user-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, .8fr); gap: 16px; align-items: start; }
.users-list { display: grid; gap: 8px; }
.user-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 11px; border: 1px solid #d7e0eb; border-radius: 6px; background: white; text-align: left; cursor: pointer; }
.user-row strong, .user-row small { display: block; }
.user-row small { margin-top: 3px; color: #6c7e91; }
.user-role { color: #325f91; font-weight: 750; }
.user-form { display: grid; gap: 11px; padding: 15px; border: 1px solid #c9d6e5; border-radius: 7px; background: #f8fafc; }
.user-form h3 { margin: 0; }
.user-form label:not(.check) { display: grid; gap: 5px; font-size: 13px; font-weight: 700; }
.user-form input, .user-form select, .user-form textarea { width: 100%; padding: 8px 9px; border: 1px solid #b9c8d9; border-radius: 5px; background: white; }
.user-layout-settings { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid #d5dfeb; border-radius: 6px; background: white; }
.user-layout-settings div { display: grid; gap: 2px; }
.user-layout-settings span { color: #66798e; font-size: 12px; }
.user-layout-settings button.secondary { border-color: #9aabba; background: white; color: #29435f; }
.user-layout-settings button:disabled { opacity: .45; cursor: default; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.form-actions .secondary { border-color: #9aabba; background: white; color: #29435f; }
@media (max-width: 820px) { .access-header { align-items: flex-start; flex-direction: column; } .user-layout { grid-template-columns: 1fr; } }