:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f9fc;--vt-c-white-mute: #f0f2f8;--vt-c-indigo-deep: #1e1f37}:root{--c-bg-app: var(--vt-c-white-soft);--c-bg-surface: var(--vt-c-white);--c-bg-sidebar: var(--vt-c-white);--c-bg-header: var(--vt-c-white);--c-bg-mute: var(--vt-c-white-mute);--c-text-primary: var(--vt-c-indigo-deep);--c-text-secondary: rgba(30, 31, 55, .58);--c-text-muted: rgba(30, 31, 55, .36);--c-text-inverse: #ffffff;--c-border: rgba(99, 102, 241, .12);--c-border-hover: rgba(99, 102, 241, .28);--c-primary: #6366F1;--c-primary-hover: #5254CC;--c-primary-dark: #3730A3;--c-primary-light: #EEF2FF;--c-primary-text: #6366F1;--c-code: #10B981;--c-code-light: rgba(16, 185, 129, .1);--c-paper: #F59E0B;--c-paper-light: rgba(245, 158, 11, .1);--c-success: #10B981;--c-success-light: rgba(16, 185, 129, .1);--c-warning: #F59E0B;--c-warning-light: rgba(245, 158, 11, .1);--c-danger: #EF4444;--c-danger-light: rgba(239, 68, 68, .1);--shadow-sm: 0 1px 2px rgba(30, 31, 55, .06);--shadow-md: 0 4px 14px rgba(99, 102, 241, .1), 0 1px 3px rgba(30,31,55,.05);--shadow-lg: 0 8px 28px rgba(99, 102, 241, .14), 0 2px 6px rgba(30,31,55,.06);--sidebar-w: 240px;--header-h: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-full: 9999px;--font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-code: "JetBrains Mono", "Fira Code", "Consolas", "Liberation Mono", monospace}.view-container{padding:22px;background:var(--c-bg-app);min-height:100%}.toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.search-input{padding:8px 14px;border:1.5px solid var(--c-border);border-radius:8px;font-size:.875rem;background:var(--c-bg-surface);color:var(--c-text-primary);font-family:var(--font-base);outline:none;min-width:200px;transition:border-color .18s}.search-input:focus{border-color:var(--c-primary)}.select-input{padding:8px 12px;border:1.5px solid var(--c-border);border-radius:8px;font-size:.875rem;background:var(--c-bg-surface);color:var(--c-text-primary);font-family:var(--font-base);outline:none;cursor:pointer;transition:border-color .18s}.select-input:focus{border-color:var(--c-primary)}.btn{padding:8px 16px;border-radius:8px;font-size:.875rem;font-weight:600;font-family:var(--font-base);border:none;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-sm{padding:5px 11px;font-size:.78rem}.btn-primary{background:var(--c-primary);color:#fff;box-shadow:0 2px 8px #6366f14d}.btn-primary:hover:not(:disabled){background:var(--c-primary-hover);box-shadow:0 4px 14px #6366f166;transform:translateY(-1px)}.btn-default{background:var(--c-bg-surface);color:var(--c-text-secondary);border:1.5px solid var(--c-border)}.btn-default:hover:not(:disabled){border-color:var(--c-primary);color:var(--c-primary)}.btn-success{background:#10b981;color:#fff}.btn-success:hover:not(:disabled){background:#059669}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--c-border);background:var(--c-bg-surface);margin-bottom:16px}.data-table{width:100%;border-collapse:collapse;background:var(--c-bg-surface)}.data-table th{background:var(--c-primary-light, rgba(99,102,241,.07));color:var(--c-text-secondary);padding:11px 12px;text-align:left;font-weight:600;font-size:.8rem;border-bottom:1.5px solid var(--c-border);white-space:nowrap}.data-table td{padding:11px 12px;border-bottom:1px solid var(--c-border);vertical-align:middle;color:var(--c-text-primary);font-size:.875rem}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:var(--c-bg-mute)}.td-center{text-align:center}.td-empty{color:var(--c-text-muted);font-size:.875rem;padding:32px!important}.td-muted{color:var(--c-text-muted)}.pagination{display:flex;align-items:center;gap:12px;justify-content:flex-end}.page-info{font-size:.85rem;color:var(--c-text-muted)}.status-badge{display:inline-block;padding:3px 10px;border-radius:10px;font-size:.75rem;font-weight:600}.status-on{background:#10b9811f;color:#10b981}.status-off{background:#ef44441a;color:#ef4444}#app .users-view,#app .roles-view,#app .user-groups-view,#app .permissions-view{padding:22px;background:var(--c-bg-app);min-height:100%}#app .card{background:var(--c-bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:20px 22px;margin-bottom:18px;border:1px solid var(--c-border)}#app .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}#app .card-title{font-size:1.05rem;font-weight:700;color:var(--c-text-primary);letter-spacing:-.01em}#app .primary-button{background:transparent;color:var(--c-primary);border:1.5px solid var(--c-primary);padding:9px 18px;border-radius:var(--radius-md);cursor:pointer;font-weight:600;font-size:.875rem;transition:all .2s;box-shadow:none}#app .primary-button:hover{background:#6366f11a;color:var(--c-primary);border:2px solid var(--c-primary);transform:translateY(-1px);box-shadow:0 0 0 2px #6366f11f,0 0 12px #6366f147}#app .table-container{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--c-border)}#app .data-table{width:100%;border-collapse:collapse;background:var(--c-bg-surface)}#app .data-table th{background:var(--c-primary-light);color:var(--c-primary-text);padding:11px 10px;text-align:center;font-weight:600;font-size:.82rem;border:1px solid var(--c-border)}#app .data-table td{padding:11px 10px;border:1px solid var(--c-border);vertical-align:middle;text-align:center;color:var(--c-text-primary);font-size:.875rem}#app .data-row:hover{background-color:var(--c-bg-mute)}#app .status-active{background-color:var(--c-success-light);color:var(--c-success)}#app .status-inactive{background-color:var(--c-danger-light);color:var(--c-danger)}#app .action-btn{padding:5px 10px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:.78rem;margin:0 3px;transition:all .15s}#app .edit-btn{background:var(--c-primary-light);color:var(--c-primary)}#app .edit-btn:hover{background:#6366f11a;color:var(--c-primary);border:1.5px solid var(--c-primary);box-shadow:0 0 8px #6366f140}#app .delete-btn{background:var(--c-danger-light);color:var(--c-danger)}#app .delete-btn:hover{background:var(--c-danger);color:#fff}#app .loading-spinner{border:3px solid var(--c-bg-mute);border-top-color:var(--c-primary)}#app .pagination-container{border-top:1px solid var(--c-border);padding-top:16px;margin-top:16px}#app .pagination-info{color:var(--c-text-secondary)}#app .pagination-btn{border:1px solid var(--c-border);background:var(--c-bg-surface);color:var(--c-text-secondary);border-radius:var(--radius-sm);transition:all .15s}#app .pagination-btn:hover:not(:disabled){border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-light)}#app .pagination-btn:disabled{background:var(--c-bg-mute);color:var(--c-text-muted)}#app .pagination-btn.page-number.active{background:#6366f11a;color:var(--c-primary);border:2px solid var(--c-primary);box-shadow:0 0 0 2px #6366f11f,0 0 10px #6366f147}#app .module-header{background:var(--c-primary)}#app .permission-code{background:var(--c-primary-light);color:var(--c-primary);font-family:var(--font-code);border-radius:var(--radius-sm)}#app .permission-group-title{color:var(--c-text-primary);font-weight:600;font-size:.95rem}#app .permission-item{border:1px solid var(--c-border);background:var(--c-bg-surface);border-radius:var(--radius-md);transition:box-shadow .2s}#app .permission-item:hover{box-shadow:var(--shadow-md);border-color:var(--c-border-hover)}#app .permission-name{color:var(--c-text-primary)}#app .permission-desc{color:var(--c-text-secondary)}#app .loading-container,#app .empty-container{color:var(--c-text-muted)}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}html{width:100%;height:100%}body{width:100%;height:100%;min-height:100vh;padding:0;margin:0;color:var(--c-text-primary);background:var(--c-bg-app);transition:color .5s,background-color .5s;line-height:1.6;font-family:var(--font-base);font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100vw;height:100vh;overflow:hidden}a{text-decoration:none;color:var(--c-primary);transition:.4s;padding:3px}a:hover{background-color:var(--c-primary-light)}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100vw;height:100vh;overflow:hidden}