.role-page{padding:24px;font-family:system-ui,-apple-system,sans-serif;color:#333}.role-page .toolbar{margin-bottom:16px}.role-page .btn,.role-page .btn-secondary,.role-page .btn-delete,.role-page .btn-edit{padding:8px 16px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s}.role-page .btn:disabled,.role-page .btn-secondary:disabled,.role-page .btn-delete:disabled,.role-page .btn-edit:disabled{opacity:.5;cursor:not-allowed}.role-page .btn-primary{background:#22c55e;color:#fff;border-color:#22c55e}.role-page .btn-primary:hover:not(:disabled){background:#16a34a;border-color:#16a34a}.role-page .btn-edit{background:#22c55e;color:#fff;border-color:#22c55e;padding:6px 16px;margin-right:8px}.role-page .btn-edit:hover:not(:disabled){background:#16a34a}.role-page .btn-delete{background:#fff;color:#ef4444;border-color:#ef4444;padding:6px 16px}.role-page .btn-delete:hover:not(:disabled){background:#fef2f2}.role-page .btn-secondary{background:#fff;color:#666;border-color:#d1d5db}.role-page .btn-secondary:hover:not(:disabled){background:#f9fafb}.role-page .error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;padding:10px 14px;border-radius:4px;margin-bottom:12px;font-size:14px}.role-page .loading{color:#666;font-size:14px;padding:12px 0}.role-page .table{width:100%;border-collapse:collapse;font-size:14px}.role-page .table thead{background:#fafafa}.role-page .table thead th{padding:14px 16px;text-align:left;font-weight:500;color:#555;border-bottom:1px solid #eee}.role-page .table tbody td{padding:18px 16px;border-bottom:1px solid #f0f0f0;color:#333}.role-page .table tbody tr:hover td{background:#fafafa}.role-page .table .col-action{width:200px;text-align:right}.role-page .table .empty{text-align:center;color:#999;padding:32px}.role-page .modal-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.role-page .modal{background:#fff;border-radius:8px;width:100%;max-width:420px;padding:24px;box-shadow:0 10px 25px #00000026}.role-page .modal h2{margin:0 0 20px;font-size:18px;font-weight:600}.role-page .modal .field{margin-bottom:16px}.role-page .modal .field label{display:block;font-size:13px;color:#555;margin-bottom:6px}.role-page .modal .field input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;outline:none;box-sizing:border-box}.role-page .modal .field input:focus{border-color:#22c55e}.role-page .modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.role-page .perm-tags{display:flex;flex-wrap:wrap;gap:6px}.role-page .perm-tag{display:inline-block;padding:2px 8px;background:#f1f5f9;color:#475569;border-radius:4px;font-size:12px;font-family:ui-monospace,monospace}.role-page .perm-empty{color:#999;font-size:13px}.role-page .modal .perm-list{max-height:220px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:4px;padding:8px 12px}.role-page .modal .perm-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer;font-family:ui-monospace,monospace}.role-page .modal .perm-item input{margin:0;cursor:pointer}.role-page .modal .perm-item:hover{color:#22c55e}