.auth-tabs { display: flex; gap: 25px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.auth-tabs button { padding: 0 0 11px; font-size: 12px; color: var(--muted); border-bottom: 2px solid transparent; }
.auth-tabs button.active { color: var(--green); border-color: var(--green); }
.auth-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-full { grid-column: 1 / -1; }
.login-box.saas-register { width: 420px; }
.tenant-summary { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-bottom: 22px; }
.tenant-info { padding: 23px; }
.tenant-info > h3 { margin-bottom: 24px; font-size: 14px; font-weight: 550; }
.tenant-name-form { margin-top: 25px; border-top: 1px solid var(--line); padding-top: 18px; display: flex; gap: 12px; align-items: end; }
.tenant-name-form .form-field { flex: 1; }
.role-description strong { font-size: 12px; font-weight: 500; }
.role-description p { font-size: 11px; color: var(--muted); margin: 4px 0 18px; }
.user-button .name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown-heading > div { min-width: 0; }
.account-dropdown-heading strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media(max-width:900px) { .tenant-summary { grid-template-columns: 1fr; } .login-box.saas-register { max-width: 100%; } }
@media(max-width:650px) { .auth-fields { grid-template-columns: 1fr; }.auth-full { grid-column: auto; }.tenant-info { padding: 18px; }.tenant-name-form { flex-wrap: wrap; } }
.role-intro { display:flex; gap:14px; padding:18px 22px; background:var(--mint); border:1px solid var(--line); border-radius:12px; margin-bottom:22px; color:var(--green); }
.role-intro p { margin-top:5px; font-size:12px; color:var(--muted); }
.role-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.role-card { padding:22px; display:flex; flex-direction:column; gap:18px; }
.role-card-heading { display:flex; align-items:center; gap:12px; }
.role-card-icon { width:40px; height:40px; border-radius:12px; background:var(--mint); color:var(--green); display:grid; place-items:center; }
.role-card-heading h3 { font-size:15px; }
.role-card-heading span:not(.role-card-icon),.role-card small { color:var(--muted); font-size:11px; }
.role-card-heading>small { margin-left:auto; white-space:nowrap; }
.role-card>p { flex:1; color:var(--muted); line-height:1.8; min-height:44px; }
.role-card-footer { border-top:1px solid var(--line); padding-top:15px; display:flex; align-items:center; gap:8px; }
.role-card-footer>small { margin-right:auto; }
.modal.role-editor { width:1050px; max-width:100%; display:flex; flex-direction:column; }
.role-editor #role-form { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.role-editor .modal-header,.role-editor .modal-footer { flex-shrink:0; }
.role-editor .modal-body { overflow:auto; }
.role-matrix-tools { display:flex; align-items:center; gap:15px; margin:24px 0 12px; }
.role-matrix-tools>span { margin-right:auto; font-weight:600; }
.role-matrix-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:9px; }
.role-matrix { width:100%; min-width:790px; border-collapse:collapse; font-size:12px; }
.role-matrix th,.role-matrix td { border-bottom:1px solid var(--line); padding:12px 8px; text-align:center; }
.role-matrix th:first-child { text-align:left; padding-left:15px; white-space:nowrap; }
.role-matrix thead,.role-group-row { background:var(--mint); }
.role-group-row th { font-size:11px; color:var(--green); padding:8px 15px; }
.role-permission { display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; font-size:11px; }
.role-matrix td:nth-child(n+2):nth-child(-n+6) .role-permission span { display:none; }
.role-row-presets { white-space:nowrap; }
.role-row-presets button { font-size:10px; color:var(--green); padding:3px 5px; }
.role-extra { border:1px solid var(--line); border-radius:9px; margin:22px 0 12px; padding:16px; display:flex; flex-wrap:wrap; gap:20px; }
.role-extra legend { padding:0 6px; color:var(--muted); font-size:12px; }
.role-count { color:var(--muted); font-size:11px; }
@media(max-width:1200px) { .role-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .role-card-grid { grid-template-columns:1fr; } .role-card { padding:18px; } .role-matrix-tools { gap:10px; font-size:11px; } }