.ui-card{background:#fff;border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;display:flex;flex-direction:column;gap:.5rem;transition:all var(--transition-fast)}.ui-card:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px hsla(var(--color-primary-hsl),.15)}.ui-card-header{display:flex;align-items:center;justify-content:space-between}.ui-btn-primary{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.ui-btn-primary:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px hsla(var(--color-primary-hsl),.35)}.ui-icon-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.ui-icon-btn:hover{background:var(--color-surface);color:var(--color-text-main)}.ui-search-box{position:relative;display:flex;align-items:center}.ui-search-icon{position:absolute;left:.75rem;color:var(--color-text-muted);pointer-events:none}.ui-search-input{padding:.5rem .75rem .5rem 2.25rem;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-size:.875rem;color:var(--color-text-main);background:#fff;outline:none;width:240px;transition:border-color var(--transition-fast)}.ui-search-input:focus{border-color:var(--color-primary)}.ui-status-badge{font-size:.7rem;font-weight:600;padding:.15rem .5rem;border-radius:9999px}.ui-status-badge.active{background:#d1fae5;color:#065f46}.ui-status-badge.inactive{background:#f1f5f9;color:#64748b}.ui-status-badge.warning{background:#fef3c7;color:#92400e}.ui-status-badge.danger{background:#fee2e2;color:#b91c1c}.ui-switch{position:relative;width:42px;height:24px;background:#cbd5e1;border:none;border-radius:9999px;cursor:pointer;transition:background .25s ease;flex-shrink:0;padding:0}.ui-switch.on{background:var(--color-primary)}.ui-switch-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #0003;transition:transform .25s ease;display:block}.ui-switch.on .ui-switch-thumb{transform:translate(18px)}.ui-view-toggle{display:flex;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.ui-view-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;transition:all var(--transition-fast)}.ui-view-btn:hover{color:var(--color-text-main);background:var(--color-surface-hover)}.ui-view-btn.active{background:#fff;color:var(--color-primary);box-shadow:var(--shadow-sm)}.ui-tabs{display:flex;gap:.25rem;border-bottom:2px solid var(--color-border)}.ui-tab-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:transparent;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--color-text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all var(--transition-fast)}.ui-tab-btn:hover{color:var(--color-text-main);background:var(--color-surface)}.ui-tab-btn.active{color:var(--color-primary);border-bottom-color:var(--color-primary);font-weight:600}.table-container{padding:24px}.table-card{background:#fff;border-radius:12px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border);overflow:hidden}.table-toolbar{padding:16px 24px;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.search-field-wrapper{position:relative;width:300px}.search-icon-abs{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);width:16px;height:16px}.search-input{width:100%;padding:10px 10px 10px 36px;border:1px solid var(--color-border);border-radius:8px;font-size:.9rem;transition:all .2s}.search-input:focus{outline:none;border-color:var(--color-primary);background:#fff}.filter-group{display:flex;gap:12px}.select-wrapper{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:8px 12px;display:flex;align-items:center}.select-wrapper select{border:none;outline:none;background:transparent;font-size:.9rem;color:var(--color-text-main);cursor:pointer;padding-right:20px}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th{background:#fff;text-align:left;padding:16px 24px;font-size:.85rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-border)}.data-table td{padding:16px 24px;border-bottom:1px solid var(--color-surface);color:var(--color-text-main);font-size:.95rem}.data-table tr:hover{background:var(--color-surface)}.mono-text{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:var(--color-text-secondary);font-size:.85rem}:root{--color-primary-hsl: 158, 64%, 48%;--color-primary: hsl(var(--color-primary-hsl));--color-primary-dark: hsl(158, 64%, 40%);--color-primary-light: hsl(158, 64%, 92%);--color-primary-soft: hsla(var(--color-primary-hsl), .1);--color-background: #ffffff;--color-surface: #f8fafc;--color-surface-hover: #f1f5f9;--color-text-main: #0f172a;--color-text-secondary: #64748b;--color-text-muted: #94a3b8;--color-border: #e2e8f0;--color-border-hover: #cbd5e1;--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .3);--glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, .07);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-premium: 0 20px 25px -5px rgb(0 0 0 / .05), 0 8px 10px -6px rgb(0 0 0 / .05);--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--transition-fast: .2s cubic-bezier(.4, 0, .2, 1);--transition-normal: .3s cubic-bezier(.4, 0, .2, 1);font-family:Plus Jakarta Sans,Outfit,system-ui,sans-serif;line-height:1.6}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background-color:var(--color-background);color:var(--color-text-main);-webkit-font-smoothing:antialiased}#root{width:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn var(--transition-normal)}.animate-slide-up{animation:slideUp var(--transition-normal)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-transparent{color:transparent}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;width:100%}.header-actions{display:flex;align-items:center;gap:12px}.text-blue-400{color:#60a5fa}.text-blue-500{color:#3b82f6}.text-blue-600{color:#2563eb}.text-slate-400{color:#94a3b8}.text-main{color:var(--color-text-main)}.text-white{color:#fff}.hover\:bg-blue-50:hover{background-color:#eff6ff!important}.hover\:bg-slate-50:hover{background-color:#f8fafc!important}.shadow-sm{box-shadow:var(--shadow-sm)}.border-blue-200{border-color:#bfdbfe!important}.w-4{width:1rem}.h-4{height:1rem}.w-7{width:1.75rem}.h-7{height:1.75rem}.gap-1\.5{gap:.375rem}.ml-1\.5{margin-left:.375rem}.layout-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100%;background:var(--color-background);gap:1.5rem;color:var(--color-text-secondary)}.spinner{width:48px;height:48px;border:3px solid var(--color-border);border-top:3px solid var(--color-primary);border-radius:50%;animation:spin .8s cubic-bezier(.4,0,.2,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{position:relative;display:flex;align-items:center;gap:12px;min-width:300px;max-width:400px;padding:16px;border-radius:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 12px #00000026;border:1px solid rgba(255,255,255,.2);pointer-events:auto;overflow:hidden;color:#fff;font-family:inherit;font-size:.95rem;font-weight:500}.toast-success{background:#10b981b3}.toast-success .toast-icon{color:#fff}.toast-error{background:#ef4444b3}.toast-error .toast-icon{color:#fff}.toast-warning{background:#f59e0bb3}.toast-warning .toast-icon{color:#fff}.toast-info{background:#3b82f6b3}.toast-info .toast-icon{color:#fff}.toast-icon{display:flex;align-items:center;justify-content:center}.toast-message{flex:1;line-height:1.4}.toast-close{background:transparent;border:none;color:#fffc;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.toast-close:hover{background:#fff3;color:#fff}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.slide-in{animation:slideInRight .3s cubic-bezier(.4,0,.2,1) forwards}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#ffffff4d;width:100%}.toast-progress:after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;background-color:#ffffffe6;transform-origin:left;animation:progress 3s linear forwards}@keyframes progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.sidebar{width:200px;height:100vh;background-color:var(--color-text-main);color:#fff;display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}.sidebar.collapsed{width:72px}.sidebar-header{height:72px;padding:0 1rem 0 1.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.05)}.sidebar.collapsed .sidebar-header{justify-content:center;padding:0}.sidebar-toggle{min-width:40px;height:40px;background:transparent;border:none;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.sidebar-toggle:hover{color:#fff;background-color:#ffffff0d}.app-title{font-size:1.125rem;font-weight:700;white-space:nowrap;color:#fff;overflow:hidden}.sidebar-nav{flex:1;padding:1.5rem .75rem;display:flex;flex-direction:column;gap:.25rem;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.sidebar-nav::-webkit-scrollbar{display:none}.nav-item{display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;text-decoration:none;color:var(--color-text-muted);border-radius:var(--radius-md);transition:all var(--transition-fast);white-space:nowrap}.sidebar.collapsed .nav-item{justify-content:center;padding:.875rem}.nav-item:hover{color:#fff;background-color:#ffffff0d}.nav-item.active{color:#fff;background-color:var(--color-primary);box-shadow:0 4px 12px hsla(var(--color-primary-hsl),.25)}.nav-icon{min-width:20px}.nav-divider{height:1px;background-color:#ffffff0d;margin:1rem .75rem}.sidebar-footer{padding:1.25rem .75rem;border-top:1px solid rgba(255,255,255,.05)}.sidebar .user-info{padding:0 1rem;margin-bottom:1rem;display:flex;flex-direction:column}.sidebar .user-name{font-size:.875rem;font-weight:600;color:#fff}.sidebar .user-role{font-size:.75rem;color:var(--color-text-muted)}.logout-btn{width:100%;display:flex;align-items:center;gap:1rem;padding:.875rem 1rem;background:transparent;border:none;color:#fca5a5;border-radius:var(--radius-md);transition:all var(--transition-fast);font-weight:600}.sidebar.collapsed .logout-btn{justify-content:center}.logout-btn:hover{background-color:#ef44441a;color:#ef4444}.common-search-box{position:relative;display:flex;align-items:center;background:transparent!important;border:none!important;padding:0!important}.common-search-icon{position:absolute;left:12px;color:#94a3b8;pointer-events:none;z-index:10}.common-search-input{width:100%;padding:10px 16px 10px 40px!important;border:1px solid #e2e8f0!important;border-radius:8px!important;background:#fff!important;font-size:.9rem!important;color:#1e293b!important;outline:none!important;transition:all .2s ease-in-out!important;box-shadow:0 1px 2px #0000000d!important}.common-search-input:focus{border-color:#3b82f6!important;box-shadow:0 0 0 4px #3b82f61a!important;background:#fff!important}.search-box{border:none!important;padding:0!important;background:transparent!important}.topbar{height:72px;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:sticky;top:0;z-index:90;box-shadow:var(--shadow-sm)}.topbar-left{display:flex;align-items:center;gap:1.5rem}.current-page-title{font-size:1.25rem;font-weight:700;color:var(--color-text-main);letter-spacing:-.01em}.topbar-right{display:flex;align-items:center;gap:2rem}.topbar-search{flex-shrink:0}.topbar-actions{display:flex;align-items:center;gap:1.25rem}.icon-btn{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-secondary);border-radius:50%;transition:background var(--transition-fast)}.icon-btn:hover{background-color:var(--color-surface-hover);color:var(--color-primary)}.badge{position:absolute;top:2px;right:2px;background-color:var(--color-primary);color:#fff;font-size:10px;font-weight:700;padding:1px 4px;border-radius:10px;border:2px solid white}.notification-wrapper{position:relative}.icon-btn.active{background-color:var(--color-primary-soft);color:var(--color-primary)}.notification-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:360px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border:1px solid var(--color-border);overflow:hidden;z-index:100;animation:slideDown .3s cubic-bezier(.16,1,.3,1)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-header{padding:1rem 1.25rem;background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.notification-header h3{font-size:.9375rem;font-weight:700;color:var(--color-text-main);margin:0}.notification-header .header-actions{display:flex;gap:.5rem}.notification-header .header-actions button{width:28px;height:28px;border-radius:6px;border:none;background:transparent;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.notification-header .header-actions button:hover{background:var(--color-border);color:var(--color-text-main)}.notification-list{max-height:400px;overflow-y:auto}.notification-item{display:flex;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--color-border-light);transition:all .2s ease;cursor:pointer;position:relative}.notification-item:last-child{border-bottom:none}.notification-item:hover{background-color:var(--color-surface)}.notification-item.unread{background-color:#0d948808}.notification-item.unread:hover{background-color:#0d94880f}.type-indicator{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}.type-indicator.success{background-color:#10b981}.type-indicator.info{background-color:var(--color-primary)}.type-indicator.warning{background-color:#f59e0b}.type-indicator.error{background-color:#ef4444}.item-content{flex:1}.item-title{font-size:.875rem;font-weight:600;color:var(--color-text-main);margin-bottom:.25rem}.item-msg{font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4;margin-bottom:.5rem}.item-time{font-size:.75rem;color:var(--color-text-muted);display:flex;align-items:center;gap:.25rem}.unread-dot{width:6px;height:6px;background-color:var(--color-primary);border-radius:50%;position:absolute;right:1.25rem;top:1.25rem}.empty-notifications{padding:3rem 1rem;text-align:center;color:var(--color-text-muted);font-size:.875rem}.user-profile-wrapper{position:relative;display:flex;align-items:center}.user-profile-toggle{display:flex;align-items:center;gap:.75rem;padding:.375rem .75rem;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-medium);border:1px solid transparent}.user-profile-toggle:hover{background-color:var(--color-surface);border-color:var(--color-border-light)}.user-profile-toggle.active{background-color:var(--color-surface);border-color:var(--color-border);box-shadow:var(--shadow-sm)}.user-profile-toggle .chevron{color:var(--color-text-muted);transition:transform .3s ease}.user-profile-toggle .chevron.up{transform:rotate(180deg)}.user-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:240px;background:#fff;border-radius:var(--radius-lg);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border:1px solid var(--color-border);padding:.5rem;z-index:100;animation:slideDown .3s cubic-bezier(.16,1,.3,1)}.dropdown-header{padding:.75rem 1rem}.dropdown-header .welcome{font-size:.75rem;color:var(--color-text-muted);margin:0}.dropdown-header .full-name{font-size:.9375rem;font-weight:700;color:var(--color-text-main);margin:.125rem 0 0}.dropdown-divider{height:1px;background-color:var(--color-border-light);margin:.5rem}.dropdown-item{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem;border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;transition:all .2s;text-align:left}.dropdown-item:hover{background-color:var(--color-surface);color:var(--color-primary)}.dropdown-item.logout{color:#ef4444}.dropdown-item.logout:hover{background-color:#ef44440d;color:#ef4444}.topbar .avatar{width:36px;height:36px;background:linear-gradient(135deg,var(--color-primary-light),white);border:1px solid var(--color-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--color-primary);flex-shrink:0}.topbar .user-info{display:flex;flex-direction:column;justify-content:center;margin:0;padding:0}.topbar .user-name{font-size:.875rem;font-weight:700;color:var(--color-text-main);line-height:1.25;margin:0}.topbar .user-role{font-size:.75rem;color:var(--color-text-muted);line-height:1.2;margin:0}.layout-container{display:flex;min-height:100vh;width:100%;background-color:var(--color-surface)}.layout-content-wrapper{flex:1;margin-left:200px;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .4s cubic-bezier(.4,0,.2,1)}.sidebar-collapsed .layout-content-wrapper{margin-left:72px}.layout-page-content{flex:1;display:flex;flex-direction:column;padding:0;overflow-y:auto;position:relative;background-color:var(--color-surface)}.layout-page-content>*:not(.rm-container):not(.no-padding){padding:1.25rem 2rem 2rem;overflow-y:auto;flex:1}