.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;transition:all .2s ease;white-space:nowrap;text-decoration:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:active:not(:disabled){transform:scale(.97)}.btn--primary{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:#0284c7;color:#0f172a;font-size:.875rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.btn--primary:hover:not(:disabled){background-color:#0369a1;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a}.btn--primary:active:not(:disabled){transform:scale(.97)}.btn--primary:disabled{opacity:.5;cursor:not-allowed}.btn--secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background-color:#f1f5f9;color:#334155;font-size:.875rem;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;transition:all .2s ease}.btn--secondary:hover:not(:disabled){background-color:#e2e8f0}.btn--secondary:disabled{opacity:.5;cursor:not-allowed}.btn--danger{background-color:#fef2f2;color:#dc2626}.btn--danger:hover:not(:disabled){background-color:#dc2626;color:#fff}.btn--ghost{background:transparent;color:#64748b}.btn--ghost:hover:not(:disabled){background:#f1f5f9;color:#1e293b}.btn--sm{padding:.375rem .75rem;font-size:.75rem}.btn--icon{padding:.5rem;border-radius:.75rem;background:transparent;color:#94a3b8}.btn--icon:hover{background:#f1f5f9;color:#334155}.btn--icon.danger:hover{background:#fef2f2;color:#dc2626}.btn--icon.edit:hover{background:#e0f2fe;color:#0284c7}.card{background:#fff;border-radius:1.5rem;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;border:1px solid #f1f5f9;overflow:hidden}.card__header{padding:1.25rem 1.5rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.card__header h2,.card__header h3{margin:0;color:#1e293b;font-weight:700}.card__body{padding:1.5rem}.page-header{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}@media(min-width:640px){.page-header{flex-direction:row;align-items:center;justify-content:space-between}}.page-header__title h2{margin:0;font-size:1.5rem;font-weight:700;color:#0f172a;letter-spacing:-.025em}.page-header__title p{margin:.25rem 0 0;font-size:.875rem;color:#94a3b8}.page-header__actions{display:flex;gap:.5rem;flex-shrink:0}.role-avatar{border:1px solid;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;transition:all .2s ease}.role-avatar--custom{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}.role-avatar--system{background:#0f172a;color:#fff;border-color:#1e293b}.role-type-badge{display:inline-flex;align-items:center;gap:.375rem;width:max-content;padding:.25rem .625rem;border:1px solid;border-radius:9999px;font-size:.65rem;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.role-type-badge__dot{width:.375rem;height:.375rem;border-radius:9999px;flex-shrink:0}.role-type-badge--custom{background:#e0f2fe;color:#0369a1;border-color:#bae6fd}.role-type-badge--custom .role-type-badge__dot{background:#0284c7}.role-type-badge--system{background:#f1f5f9;color:#334155;border-color:#e2e8f0}.role-type-badge--system .role-type-badge__dot{background:#64748b}.permission-detail-chip{display:inline-flex;align-items:center;padding:.25rem .5rem;border:1px solid;border-radius:.5rem;font-size:.65rem;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.permission-detail-chip--read{background:#e0f2fe;color:#0284c7;border-color:#bae6fd}.permission-detail-chip--create{background:#f0fdf4;color:#16a34a;border-color:#86efac}.permission-detail-chip--update{background:#fffbeb;color:#d97706;border-color:#fcd34d}.permission-detail-chip--delete{background:#fef2f2;color:#dc2626;border-color:#fca5a5}.permission-detail-chip--default{background:#f1f5f9;color:#475569;border-color:#e2e8f0}.data-table-wrapper{background:#fff;border-radius:1.5rem;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;border:1px solid #f1f5f9}.data-table{width:100%;border-collapse:collapse;text-align:left}.data-table thead tr{border-bottom:1px solid #f1f5f9}.data-table th{padding:1rem 1.25rem;font-size:.75rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;background:transparent}.data-table th.right{text-align:right}.data-table tbody tr{border-bottom:1px solid #f8fafc;transition:background .15s}.data-table tbody tr:last-child{border-bottom:none}.data-table tbody tr:hover{background:#f8fafc}.data-table tbody tr.clickable{cursor:pointer}.data-table td{padding:1rem 1.25rem;font-size:.875rem;color:#334155;vertical-align:middle}.data-table td.right{text-align:right}.data-table td.mono{font-family:monospace;color:#94a3b8;font-size:.75rem}.data-table .row-actions{display:flex;justify-content:flex-end;gap:.25rem;opacity:.35;transition:opacity .15s}.data-table tr:hover .row-actions{opacity:1}.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width:767px){.data-table-mobile-cards.data-table thead{display:none}.data-table-mobile-cards.data-table tbody,.data-table-mobile-cards.data-table tr,.data-table-mobile-cards.data-table td{display:block;width:100%}.data-table-mobile-cards.data-table tr{margin:0 1rem .75rem;border:1px solid #f1f5f9!important;border-radius:1rem;padding:.75rem;background:#fff}.data-table-mobile-cards.data-table td{padding:.375rem 0;border:none!important;display:flex;align-items:flex-start;gap:.5rem}.data-table-mobile-cards.data-table td:before{content:attr(data-label);min-width:100px;font-size:.75rem;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;padding-top:.1rem;flex-shrink:0}.data-table-mobile-cards.data-table td.right{flex-direction:row-reverse;justify-content:flex-end}}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap}.badge--success{background:#f0fdf4;color:#16a34a}.badge--danger{background:#fef2f2;color:#dc2626}.badge--warning{background:#fffbeb;color:#d97706}.badge--info{background:#e0f2fe;color:#0284c7}.badge--neutral{background:#f1f5f9;color:#475569}.badge--primary{background:#e0f2fe;color:#002030}.form-group{display:flex;flex-direction:column;gap:.375rem}.form-group label{font-size:.75rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.625rem 1rem;background:#f8fafc;border:1px solid transparent;border-radius:.75rem;font-size:.875rem;color:#0f172a;outline:none;transition:all .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:#fff;border-color:#0284c7;box-shadow:0 0 0 4px #0284c740}.form-group input::placeholder,.form-group select::placeholder,.form-group textarea::placeholder{color:#94a3b8}.form-group textarea{resize:vertical;min-height:80px}.btn-action-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;min-height:2.5rem;background:#0284c7;color:#fff;border:1px solid #0284C7;border-radius:.75rem;font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:.875rem;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;transition:all .2s ease}.btn-action-primary svg{width:1rem;height:1rem;flex-shrink:0}.btn-action-primary:hover:not(:disabled){background:#0369a1;border-color:#0369a1;box-shadow:0 4px 6px #0000000d,0 2px 4px #0000000a}.btn-action-primary:focus-visible{outline:none;box-shadow:0 0 0 4px #0284c740}.btn-action-primary:active:not(:disabled){transform:scale(.98)}.btn-action-primary:disabled{opacity:.55;cursor:not-allowed}.app-modal-overlay{position:fixed!important;inset:0!important;z-index:99999!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:1rem!important;background:#0f172a8c!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.app-modal-card{position:relative!important;z-index:100000!important;display:flex!important;flex-direction:column!important;width:100%!important;max-width:520px!important;max-height:calc(100vh - 2rem)!important;overflow:hidden!important;background:#fff!important;border:1px solid #f1f5f9;border-radius:1.5rem;box-shadow:0 20px 25px #00000014,0 10px 10px #0000000a;opacity:1!important;visibility:visible!important;transform:none!important}.app-modal-card--sm{max-width:400px!important}.app-modal-card--lg{max-width:580px!important}.app-modal-card--xl{max-width:680px!important;height:min(92vh,820px)!important}.app-modal-card>form{display:flex;flex-direction:column;flex:1;min-height:0;max-height:100%}.app-modal-card__header{padding:1.25rem 1.5rem;border-bottom:1px solid #f1f5f9;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-shrink:0}.app-modal-card__header h3{margin:0;font-size:1.125rem;font-weight:700;color:#0f172a}.app-modal-card__body{padding:1.5rem;overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:1rem}.app-modal-card__footer{padding:1rem 1.5rem;border-top:1px solid #f1f5f9;display:flex;justify-content:flex-end;gap:.5rem;flex-shrink:0;background:#f8fafc}.empty-state{text-align:center;padding:3rem 1.5rem;color:#94a3b8}.empty-state svg{margin:0 auto 1rem;opacity:.4}.empty-state p{margin:0;font-size:.875rem}.skeleton{background:#f1f5f9;border-radius:.5rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.alert{display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;border-radius:1rem;font-size:.875rem;margin-bottom:1rem}.alert--danger{background:#fef2f2;color:#dc2626;border:1px solid #fca5a5}.alert--success{background:#f0fdf4;color:#16a34a;border:1px solid #86efac}.alert--warning{background:#fffbeb;color:#d97706;border:1px solid #fcd34d}.alert--info{background:#e0f2fe;color:#0284c7;border:1px solid #BAE6FD}.sidebar-backdrop{position:fixed;inset:0;background:#0006;z-index:40;display:none}@media(max-width:767px){.sidebar-backdrop{display:block}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.avatar{width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;flex-shrink:0}.avatar--square{border-radius:.75rem}.avatar--primary{background:#e0f2fe;color:#000f16}.avatar--blue{background:#e0f2fe;color:#0284c7}.avatar--neutral{background:#f1f5f9;color:#475569}*,*:before,*:after{box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#f4f6f8;margin:0;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:#cbd5e1}