:root{--primary-gradient:linear-gradient(135deg, #1e293b 0%, #d97706 100%);--card-shadow:0 10px 40px #00000014;--card-shadow-hover:0 20px 60px #0000001f;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}.page-header{border-bottom:1px solid var(--border-color);margin-bottom:24px;padding-bottom:20px}.header-content{box-shadow:none;box-sizing:border-box;background:0 0;align-items:center;gap:16px;width:100%;padding:0;display:flex}.header-actions{align-items:center;gap:10px;margin-left:auto;display:flex}.page-header h1{letter-spacing:-.3px;background:linear-gradient(135deg,#1e293b,#d97706);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 4px;font-size:22px;font-weight:700}.page-header p{color:var(--text-secondary);margin:0;font-size:13px}.stat-card{background:var(--card-bg);border:1px solid var(--border-color);text-align:center;border-radius:12px;flex-direction:column;align-items:center;gap:10px;padding:20px;transition:all .3s;display:flex}.stat-card:hover{background:linear-gradient(135deg,#1e293b59,#d9770659);transform:translateY(-2px);box-shadow:0 8px 25px #0000001f}.stat-icon{color:#d97706;background:#d977061a;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.4rem;display:flex}.stat-content{flex:1}.stat-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:12px;font-weight:500}.stat-value{color:var(--text-primary);font-size:28px;font-weight:700}.action-section{align-items:center;gap:16px;padding:4px 0 24px;display:flex}.action-section h3{color:var(--text-primary);margin:0 0 2px;font-size:15px;font-weight:600}.action-section p{color:var(--text-secondary);flex:1;margin:0;font-size:13px}@media (width<=768px){.action-section{flex-direction:column;align-items:flex-start}}@keyframes spin{to{transform:rotate(360deg)}}.page-container{box-sizing:border-box;width:100%;max-width:100%;padding:24px;overflow-x:hidden}.page-content-card{background:var(--card-bg);border-radius:16px;padding:28px;box-shadow:0 10px 40px #00000014}.primary-btn{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%);border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s}.primary-btn:hover{opacity:.9;transform:translateY(-1px)}.save-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%);border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .3s}.cancel-btn{background:var(--status-neutral-bg);color:var(--text-secondary);cursor:pointer;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600}.retry-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%);border:none;border-radius:8px;margin-top:16px;padding:10px 20px;font-weight:600}.action-buttons{justify-content:center;gap:4px;display:flex}.edit-btn-small,.delete-btn-small{cursor:pointer;border:none;border-radius:6px;padding:5px 7px;font-size:13px;transition:all .3s}.edit-btn-small{background:var(--status-info-bg)}.edit-btn-small:hover{background:#90cdf4}.delete-btn-small{background:var(--status-error-bg)}.delete-btn-small:hover{background:#feb2b2}.status-badge{letter-spacing:.3px;white-space:nowrap;text-transform:uppercase;border-radius:12px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-block}.status-badge.active{background:var(--status-success-bg);color:var(--status-success-text)}.status-badge.inactive{background:var(--status-error-bg);color:var(--status-error-text)}.status-badge.pending{background:var(--status-warning-bg);color:var(--status-orange-text)}.status-badge.paid{background:var(--status-success-bg);color:var(--status-success-text)}.status-badge.overdue{background:var(--status-error-bg);color:var(--status-error-text)}.status-badge.draft{background:var(--status-neutral-bg);color:var(--status-neutral-text)}.status-badge.sent{background:var(--status-info-bg);color:var(--status-info-text)}.status-badge.cancelled{background:var(--status-neutral-bg);color:var(--status-neutral-text)}.status-badge.partial{background:var(--status-warning-bg);color:var(--status-orange-text)}.search-box{flex:1;min-width:200px}.search-input{border:2px solid var(--border-color);width:100%;color:var(--text-primary);background:var(--card-bg);box-sizing:border-box;border-radius:10px;padding:10px 14px;font-size:14px;transition:all .3s}.search-input::placeholder{color:var(--text-secondary);opacity:.7}.search-input:focus{border-color:#d97706;outline:none;box-shadow:0 0 0 3px #d9770626}.filter-select{border:2px solid var(--border-color);color:var(--text-primary);background:var(--card-bg);cursor:pointer;appearance:auto;border-radius:10px;min-width:150px;padding:10px 14px;font-size:14px;transition:all .3s}.filter-select option{color:var(--text-primary);background:var(--card-bg)}.filter-select:focus{border-color:#d97706;outline:none;box-shadow:0 0 0 3px #d9770626}.loading-state,.error-state,.empty-state{text-align:center;padding:60px 24px}.loading-state p,.error-state p{color:var(--text-secondary);margin:0;font-size:14px}.page-spinner{border:3px solid var(--border-color);border-top-color:#d97706;border-radius:50%;width:48px;height:48px;margin:0 auto 16px;animation:.8s linear infinite spin}.empty-icon{opacity:.5;margin-bottom:20px;font-size:64px}.empty-state h4{color:var(--text-primary);margin:0 0 8px;font-size:18px;font-weight:600}.empty-state p{color:var(--text-secondary);margin:0 0 16px;font-size:14px;line-height:1.6}.form-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.form-group{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.form-group.full-width{grid-column:1/-1}.form-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.form-group input,.form-group select,.form-group textarea{box-sizing:border-box;border:2px solid var(--border-color);border-radius:10px;width:100%;padding:10px 14px;font-size:14px;transition:all .3s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#d97706;outline:none;box-shadow:0 0 0 3px #d9770626}.modal-overlay{z-index:1000;box-sizing:border-box;background:#00000080;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.modal-content{background:var(--card-bg);border-radius:16px;width:100%;max-width:820px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:24px;display:flex}.modal-header h2{color:var(--text-primary);margin:0;font-size:20px;font-weight:600}.modal-close{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;padding:0;font-size:24px;line-height:1}.modal-body{box-sizing:border-box;min-height:0;padding:24px}.modal-footer{border-top:1px solid var(--border-color);justify-content:flex-end;gap:12px;padding:20px 24px;display:flex}.pagination{border-top:1px solid var(--border-color);justify-content:center;align-items:center;gap:16px;margin-top:24px;padding-top:24px;display:flex}.pagination-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%);border:none;border-radius:8px;padding:10px 20px;font-weight:600;transition:all .3s}.pagination-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #d9770666}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{color:var(--text-secondary);font-size:14px}.bulk-action-bar{background:#d977061a;border:1px solid #d977064d;border-radius:10px;align-items:center;gap:10px;margin-bottom:12px;padding:10px 14px;display:flex}.bulk-count{color:var(--dse-gold);flex:1;font-size:13px;font-weight:600}.bulk-btn{cursor:pointer;border:none;border-radius:7px;padding:6px 14px;font-size:13px;font-weight:600;transition:opacity .15s}.bulk-btn:disabled{opacity:.5;cursor:not-allowed}.bulk-btn-complete{color:#fff;background:#22c55e}.bulk-btn-complete:hover:not(:disabled){background:#16a34a}.bulk-btn-delete{color:#fff;background:#ef4444}.bulk-btn-delete:hover:not(:disabled){background:#dc2626}.bulk-btn-clear{color:var(--dse-gold);background:0 0;border:1px solid #d9770666!important}.bulk-btn-clear:hover:not(:disabled){background:#d977061a}:root{--dse-blue:#2563eb;--dse-blue-light:#3b82f6;--dse-blue-dark:#1d4ed8;--dse-gold:#d97706;--dse-gold-light:#f59e0b;--dse-gray:#94a3b8;--dse-gray-light:#1e293b;--dse-gray-dark:#f1f5f9;--dse-white:#0f172a;--dse-black:#f8fafc;--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--border-color:#334155;--card-bg:#1e293b;--sidebar-bg:#162032;--hover-bg:#ffffff0d;--input-bg:#1e293b;--input-border:#334155;--status-success-bg:#10b9812e;--status-success-text:#6ee7b7;--status-error-bg:#ef44442e;--status-error-text:#fca5a5;--status-warning-bg:#eab3082e;--status-warning-text:#fde047;--status-info-bg:#d977062e;--status-info-text:#93c5fd;--status-neutral-bg:#64748b2e;--status-neutral-text:#94a3b8;--status-orange-bg:#ed89362e;--status-orange-text:#fbd38d;--text:#e2e8f0;--text-h:#f1f5f9;--bg:#0f172a;--border:#334155;--code-bg:#1f2028;--accent:#d97706;--accent-bg:#d977061a;--accent-border:#d9770666;--accent-gradient:linear-gradient(135deg, #d97706 0%, #f59e0b 100%);--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (width<=1024px){:root{font-size:16px}}#root{text-align:left;box-sizing:border-box;border-inline:none;flex-direction:column;width:100%;max-width:100%;min-height:100svh;margin:0;display:flex;overflow-x:hidden}body{background-color:var(--bg-primary);margin:0}*{scrollbar-width:none;-ms-overflow-style:none}::-webkit-scrollbar{display:none}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.layout input:not([type=range]):not([type=checkbox]):not([type=radio]),.layout select,.layout textarea{background-color:var(--input-bg)!important;color:var(--text-primary)!important;border-color:var(--input-border)!important}.layout input::placeholder,.layout textarea::placeholder{opacity:.7;color:var(--text-secondary)!important}.layout td{color:var(--text-primary)!important;border-color:var(--border-color)!important}.layout tr:hover td{background:linear-gradient(135deg,#1e293b59,#d9770659)!important}.layout th{background-color:var(--sidebar-bg)!important;color:var(--text-secondary)!important;border-color:var(--border-color)!important}.layout .modal-content,.layout .modal-container,.layout .modal-body{background-color:var(--card-bg)!important;color:var(--text-primary)!important}.layout .modal-header,.layout .modal-footer{background-color:var(--card-bg)!important;border-color:var(--border-color)!important}.layout .settings-content,.layout .team-content,.layout .users-content,.layout .audit-content{background-color:var(--card-bg)!important}.layout .info-card,.layout .activity-card,.layout .detail-card,.layout .info-box,.layout .summary-card,.layout .db-connection-card{background:var(--sidebar-bg)!important}.layout .stat-card{background:var(--card-bg)!important}.layout .stat-card:hover{background:linear-gradient(135deg,#1e293b59,#d9770659)!important}.layout .section-title,.layout .card-title,.layout h1,.layout h2,.layout h3,.layout h4,.layout h5{color:var(--text-h)!important}.layout .pagination-btn,.layout .cancel-btn,.layout .clear-filters-btn{background-color:var(--sidebar-bg)!important;color:var(--text-primary)!important;border-color:var(--border-color)!important}.layout .secondary-btn,.layout .btn-secondary{color:var(--dse-gold)!important;background-color:#0000!important;border:1.5px solid #d9770673!important}.layout .secondary-btn:hover,.layout .btn-secondary:hover{border-color:var(--dse-gold)!important;background-color:#d977061a!important}.layout input:disabled,.layout select:disabled,.layout textarea:disabled{background-color:var(--bg-secondary)!important;color:var(--text-secondary)!important}.layout .invoice-preview{background-color:var(--card-bg)!important;color:var(--text-primary)!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--dse-gray);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--dse-gray-dark)}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}:root{--sidebar-width:220px;--topbar-height:48px;--transition-speed:.22s;--dse-blue:var(--dse-blue,#b45309);--dse-blue-light:var(--dse-blue-light,#d97706)}.layout{background:var(--bg-primary,#f7fafc);min-height:100vh;color:var(--text-primary,#1a202c)}.sidebar{width:var(--sidebar-width);z-index:200;height:100vh;transition:transform var(--transition-speed) ease;background:#0f172a;flex-direction:column;display:flex;position:fixed;top:0;left:0;overflow:hidden}.sidebar-brand{height:var(--topbar-height);box-sizing:border-box;border-bottom:1px solid #ffffff1f;justify-content:flex-start;align-items:center;gap:10px;padding:0 14px;text-decoration:none;display:flex}.sidebar-logo-wrap{box-sizing:border-box;background:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding:4px;display:flex}.sidebar-logo{object-fit:contain;width:100%;height:100%;display:block}.sidebar-company{color:#fff;letter-spacing:.02em;-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;font-size:.68rem;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.sidebar-nav{flex-direction:column;flex:1;gap:0;padding:6px 8px 0;display:flex;overflow:hidden auto}.sidebar-group{border-bottom:1px solid #ffffff14;flex-direction:column;gap:1px;margin-bottom:2px;padding-bottom:2px;display:flex}.sidebar-group:last-child{border-bottom:none;margin-bottom:0}.sidebar-group-label{text-transform:uppercase;letter-spacing:.08em;color:#fff6;padding:3px 12px 1px;font-size:.58rem;font-weight:700}.sidebar-link{color:#ffffffd1;transition:background var(--transition-speed) ease, color var(--transition-speed) ease;white-space:nowrap;border-radius:6px;align-items:center;gap:8px;padding:5px 10px;font-size:.67rem;font-weight:500;text-decoration:none;display:flex}.sidebar-link:hover{color:#fff;background:linear-gradient(135deg,#d9770659,#f59e0b59)}.sidebar-link.active{color:#f59e0b;background:#d9770626;font-weight:600;box-shadow:inset 3px 0 #d97706}.sidebar-icon{text-align:center;flex-shrink:0;width:20px;font-size:1rem}.sidebar-label{text-overflow:ellipsis;overflow:hidden}.sidebar-footer{border-top:1px solid #ffffff1f;flex-direction:column;gap:10px;padding:12px 10px;display:flex}.db-status{background:#ffffff1a;border-radius:20px;align-items:center;gap:7px;padding:6px 12px;font-size:.75rem;font-weight:600;display:flex}.db-status.connected{color:#c6f6d5}.db-status.disconnected{color:#fed7d7}.db-status-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px;animation:2s infinite pulse}.db-status.connected .db-status-dot{background:#48bb78;box-shadow:0 0 5px #48bb7899}.db-status.disconnected .db-status-dot{background:#f56565;box-shadow:0 0 5px #f5656599}.db-status-text{white-space:nowrap}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.sidebar-user{cursor:pointer;transition:background var(--transition-speed) ease;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;display:flex;position:relative}.sidebar-user:hover{background:#ffffff1f}.user-avatar{color:#fff;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:.7rem;font-weight:700;display:flex;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.sidebar-user-info{flex-direction:column;flex:1;display:flex;overflow:hidden}.sidebar-user-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:600;overflow:hidden}.sidebar-user-role{color:#ffffffa6;text-transform:capitalize;font-size:.7rem}.user-dropdown{background:var(--card-bg);z-index:300;border-radius:10px;animation:.18s dropUp;position:absolute;bottom:calc(100% + 8px);left:0;right:0;overflow:hidden;box-shadow:0 8px 30px #0000002e}@keyframes dropUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.dropdown-header{border-bottom:1px solid var(--border-color);flex-direction:column;gap:2px;padding:12px 14px;display:flex}.dropdown-name{color:var(--text-primary);font-size:.875rem;font-weight:600}.dropdown-role{color:var(--text-secondary);text-transform:capitalize;font-size:.75rem}.logout-option{cursor:pointer;width:100%;color:var(--text-secondary);text-align:left;transition:background var(--transition-speed) ease, color var(--transition-speed) ease;background:0 0;border:none;align-items:center;gap:8px;padding:11px 14px;font-size:.875rem;font-weight:500;display:flex}.logout-option:hover{background:var(--status-error-bg);color:var(--status-error-text)}.logout-option:disabled{opacity:.5;cursor:not-allowed}.main-wrapper{margin-left:var(--sidebar-width);min-height:100vh;transition:margin-left var(--transition-speed) ease;flex-direction:column;display:flex;overflow-x:hidden}.topbar{height:var(--topbar-height);background:var(--bg-primary,#fff);border-bottom:1px solid var(--border-color,#e9ecef);top:0;left:var(--sidebar-width);z-index:100;box-sizing:border-box;align-items:center;gap:14px;padding:0 20px;display:flex;position:fixed;right:0}.topbar-right{align-items:center;gap:4px;margin-left:auto;display:flex}.lang-toggle{border:1px solid var(--border-color,#e2e8f0);cursor:pointer;color:var(--text-secondary,#64748b);background:0 0;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;line-height:1.4;transition:background .2s,color .2s}.lang-toggle:hover{color:var(--text-primary);background:#ffffff14}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;padding:4px;display:none}.hamburger span{background:var(--text-primary,#1a202c);border-radius:2px;width:20px;height:2px;display:block}.topbar-title{color:var(--text-primary,#1a202c);font-size:1rem;font-weight:600;display:none}.main-content{width:100%;max-width:100%;padding-top:var(--topbar-height);flex:1;overflow-x:hidden}.sidebar-overlay{z-index:190;background:#0006;display:none;position:fixed;inset:0}@media (width<=900px){.sidebar{transform:translate(-100%)}.sidebar.sidebar-mobile-open{transform:translate(0)}.sidebar-overlay{display:block}.main-wrapper{margin-left:0}.topbar{left:0}.hamburger{display:flex}.topbar-title{display:block}}.gs-container{flex:1;max-width:420px;display:none;position:relative}@media (width>=901px){.gs-container{display:block}}.gs-input-wrap{background:var(--bg-secondary,#f8f9fa);border:1px solid var(--border-color,#e2e8f0);border-radius:8px;align-items:center;gap:8px;height:34px;padding:0 10px;transition:border-color .15s,box-shadow .15s;display:flex}.gs-input-wrap:focus-within{background:var(--bg-primary,#fff);border-color:#b45309;box-shadow:0 0 0 3px #667eea1f}.gs-icon{opacity:.5;flex-shrink:0;font-size:.85rem}.gs-input{color:var(--text-primary,#1a202c);background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:.85rem}.gs-input::placeholder{color:var(--text-secondary,#a0aec0)}.gs-spinner{border:2px solid var(--border-color,#e2e8f0);border-top-color:#b45309;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.6s linear infinite spin}.gs-clear{cursor:pointer;color:var(--text-secondary,#a0aec0);background:0 0;border:none;flex-shrink:0;padding:0;font-size:1rem;line-height:1}.gs-clear:hover{color:var(--text-primary,#1a202c)}.gs-dropdown{background:var(--bg-primary,#fff);border:1px solid var(--border-color,#e2e8f0);z-index:500;border-radius:10px;max-height:420px;animation:.14s dropDown;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden auto;box-shadow:0 12px 40px #00000024}.gs-group{border-bottom:1px solid var(--border-color,#e2e8f0);padding:6px 0}.gs-group:last-child{border-bottom:none}.gs-group-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary,#a0aec0);align-items:center;gap:6px;padding:4px 14px 2px;font-size:.7rem;font-weight:700;display:flex}.gs-item{cursor:pointer;text-align:left;background:0 0;border:none;flex-direction:column;gap:1px;width:100%;padding:8px 14px;transition:background .1s;display:flex}.gs-item:hover{background:var(--bg-secondary,#f8f9fa)}.gs-item-primary{color:var(--text-primary,#1a202c);font-size:.875rem;font-weight:500}.gs-item-secondary{color:var(--text-secondary,#718096);font-size:.75rem}.gs-empty{color:var(--text-secondary,#718096);text-align:center;padding:18px 14px;font-size:.85rem}.notif-bell{position:relative}.notif-btn{cursor:pointer;color:var(--text-secondary,#718096);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px 8px;font-size:1.2rem;transition:background .15s;display:flex;position:relative}.notif-btn:hover{background:var(--bg-secondary,#f8f9fa)}.notif-has-red{color:#dc2626}.notif-has-amber{color:#b45309}.notif-badge{color:#fff;pointer-events:none;border-radius:9px;justify-content:center;align-items:center;min-width:17px;height:17px;padding:0 4px;font-size:.65rem;font-weight:700;line-height:1;display:flex;position:absolute;top:2px;right:2px}.badge-red{background:#dc2626}.badge-amber{background:#b45309}.notif-dropdown{background:var(--bg-primary,#fff);border:1px solid var(--border-color,#e2e8f0);z-index:500;border-radius:12px;width:300px;animation:.15s dropDown;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 12px 40px #00000024}@keyframes dropDown{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.notif-header{border-bottom:1px solid var(--border-color,#e2e8f0);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.notif-title{color:var(--text-primary,#1a202c);font-size:.875rem;font-weight:700}.notif-refresh{cursor:pointer;color:var(--text-secondary,#718096);background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:1rem;transition:color .15s}.notif-refresh:hover{color:var(--text-primary,#1a202c)}.notif-list{flex-direction:column;max-height:320px;display:flex;overflow-y:auto}.notif-item{border-bottom:1px solid var(--border-color,#e2e8f0);align-items:center;font-size:.85rem;transition:background .12s;display:flex}.notif-item:last-child{border-bottom:none}.notif-item:hover{background:var(--bg-secondary,#f8f9fa)}.notif-item-main{cursor:pointer;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:10px;min-width:0;padding:11px 8px 11px 16px;display:flex}.notif-item-icon{flex-shrink:0;font-size:1rem}.notif-item-label{color:var(--text-primary,#1a202c);flex:1;min-width:0;font-weight:500}.notif-item-count{border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:.8rem;font-weight:700}.count-red{color:#dc2626;background:#dc26261a}.count-amber{color:#b45309;background:#d977061a}.notif-dismiss{cursor:pointer;color:var(--text-secondary,#718096);opacity:0;background:0 0;border:none;border-radius:4px;flex-shrink:0;margin-right:8px;padding:4px 10px;font-size:1rem;line-height:1;transition:opacity .15s,background .15s}.notif-item:hover .notif-dismiss{opacity:1}.notif-dismiss:hover{background:var(--bg-tertiary,#edf2f7);color:var(--text-primary,#1a202c)}.notif-empty{color:var(--text-secondary,#718096);align-items:center;gap:10px;padding:20px 16px;font-size:.85rem;display:flex}.notif-all-clear-icon{color:#16a34a;background:#22c55e26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:700;display:flex}.dashboard{box-sizing:border-box;width:100%;max-width:100%;margin:0 auto;padding:24px;overflow-x:hidden}.dashboard-header{border-bottom:1px solid var(--border-color);margin-bottom:24px;padding-bottom:20px}.dashboard-header .header-content{box-shadow:none;box-sizing:border-box;background:0 0;align-items:center;width:100%;padding:0;display:flex}.welcome-section{text-align:left}.welcome-section h1{letter-spacing:-.3px;background:linear-gradient(135deg,#d97706,#f59e0b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 4px;font-size:22px;font-weight:700}.welcome-subtitle{color:var(--text-secondary);margin:0;font-size:13px;font-weight:400}.kpi-grid{grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:28px;display:grid}.kpi-card{background:var(--card-bg);border:1px solid var(--border-color);box-shadow:var(--card-shadow);cursor:pointer;text-align:left;width:100%;transition:var(--transition-smooth);border-radius:14px;align-items:center;gap:14px;padding:18px 20px;display:flex;position:relative;overflow:hidden}.kpi-card:hover{box-shadow:var(--card-shadow-hover);border-color:var(--border-color);background:linear-gradient(135deg,#d9770659,#f59e0b59);transform:translateY(-3px)}.kpi-card-alert{background:linear-gradient(135deg, var(--card-bg), #2d1515);border-color:#dc262633}.kpi-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.4rem;display:flex}.kpi-body{flex:1;min-width:0}.kpi-value{color:var(--text-primary);margin-bottom:4px;font-size:1.75rem;font-weight:700;line-height:1}.kpi-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:.72rem;font-weight:500;line-height:1.35}.kpi-alert-dot{width:8px;height:8px;box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px #dc262655;background:#dc2626;border-radius:50%;position:absolute;top:12px;right:12px}.dashboard-content{display:block}.sidebar-section{flex-direction:column;display:flex}.section-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.support-section{margin-top:20px}.section-header h2{color:var(--text-primary);margin:0;font-size:20px;font-weight:700}.section-header p{color:var(--text-secondary);margin:0;font-size:14px}.activity-feed{background:var(--card-bg);box-shadow:var(--card-shadow);border:1px solid var(--border-color);border-radius:12px;padding:4px 16px}.activity-item{border-bottom:1px solid var(--border-color);transition:var(--transition-smooth);gap:12px;padding:14px 0;display:flex}.activity-item:last-child{border-bottom:none}.activity-item:hover{background:linear-gradient(135deg,#d9770614,#f59e0b14);border-radius:8px;margin:0 -8px;padding-left:8px;padding-right:8px}.activity-icon{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex}.activity-content{flex:1}.activity-action{color:var(--text-primary);margin-bottom:4px;font-size:14px;font-weight:600}.activity-description{color:var(--text-secondary);margin-bottom:4px;font-size:13px}.activity-time{color:#a0aec0;white-space:nowrap;font-size:12px;font-style:normal}.support-section{background:var(--card-bg);box-shadow:var(--card-shadow);border:1px solid var(--border-color);border-radius:12px;padding:16px}.support-header h3{color:var(--text-primary);margin:0 0 8px;font-size:18px;font-weight:600}.support-header p{color:var(--text-secondary);margin:0;font-size:14px}.support-info{margin-top:16px}.support-item{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.support-item:last-child{border-bottom:none}.support-label{color:#a0aec0;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.support-value{color:var(--text-primary);word-break:break-word;text-align:right;font-size:14px;font-weight:600}.no-activity{text-align:center;color:#a0aec0;padding:40px}@media (width<=1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.dashboard{padding:16px}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px}.kpi-value{font-size:1.5rem}.dashboard-header .header-content{border-radius:12px;padding:20px}.welcome-section h1{font-size:22px}.activity-feed,.support-section{padding:20px}}@media (width<=480px){.dashboard-header .header-content{padding:16px}.welcome-section h1{font-size:20px}.welcome-subtitle{font-size:13px}.activity-item{align-items:flex-start}.activity-time{font-size:11px}.support-item{flex-direction:column;align-items:flex-start}.support-value{text-align:left}}.app{box-sizing:border-box;background-color:#fff;min-height:100vh;margin:0;padding:0}:root{--dse-gold:#d69e2e;--dse-gold-light:#f6e05e;--dse-gold-dark:#0f203a;--dse-gray:#718096;--dse-gray-light:#e2e8f0;--dse-gray-dark:#2d3748;--dse-white:#fff;--dse-black:#1a202c;--border-radius:8px;--transition-speed:.3s}@media (prefers-color-scheme:dark){:root{--dse-gold:#2b6cb0;--dse-gold-light:#3182ce;--dse-gold-dark:#1a365d;--dse-gray:#a0aec0;--dse-gray-light:#2d3748;--dse-gray-dark:#1a202c;--dse-white:#1a202c;--dse-black:#fff}}body{margin:0;padding:0;overflow-x:hidden}