*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Inter', sans-serif;
     background: #f8f9fb;
     color: #1e293b;
     overflow-x: hidden;
     transition: background .3s, color .3s
 }

 .dark body,
 .dark {
     background: #0f1117;
     color: #e2e8f0
 }

 ::-webkit-scrollbar {
     width: 5px;
     height: 5px
 }

 ::-webkit-scrollbar-track {
     background: transparent
 }

 ::-webkit-scrollbar-thumb {
     background: #cbd5e1;
     border-radius: 99px
 }

 .dark ::-webkit-scrollbar-thumb {
     background: #334155
 }

 /* Sidebar */
 #sidebar {
     width: 260px;
     transition: width .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
     background: #fff;
     border-right: 1px solid #f1f5f9
 }

 .dark #sidebar {
     background: #141920;
     border-right-color: #1e2736
 }

 #sidebar.collapsed {
     width: 72px
 }

 #sidebar.collapsed .sidebar-label,
 #sidebar.collapsed .sidebar-group-label,
 #sidebar.collapsed .sidebar-badge,
 #sidebar.collapsed .sidebar-arrow,
 #sidebar.collapsed .brand-text {
     display: none !important
 }

 #sidebar.collapsed .sidebar-item {
     justify-content: center;
     padding-left: 0;
     padding-right: 0
 }

 #sidebar.collapsed .sidebar-icon {
     margin-right: 0
 }

 #sidebar-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .45);
     z-index: 39;
     backdrop-filter: blur(2px)
 }

 #sidebar-overlay.active {
     display: block
 }

 @media(max-width:1023px) {
     #sidebar {
         position: fixed;
         top: 0;
         left: 0;
         bottom: 0;
         z-index: 40;
         transform: translateX(-100%);
         width: 260px !important
     }

     #sidebar.mobile-open {
         transform: translateX(0)
     }

     #sidebar.collapsed {
         width: 260px !important
     }

     #sidebar.collapsed .sidebar-label,
     #sidebar.collapsed .sidebar-group-label,
     #sidebar.collapsed .sidebar-badge,
     #sidebar.collapsed .sidebar-arrow,
     #sidebar.collapsed .brand-text {
         display: flex !important
     }

     #sidebar.collapsed .sidebar-item {
         justify-content: flex-start;
         padding-left: 1rem;
         padding-right: 1rem
     }

     #sidebar.collapsed .sidebar-icon {
         margin-right: .75rem
     }
 }

 .sidebar-item {
     display: flex;
     align-items: center;
     padding: .55rem 1rem;
     margin: 1px .5rem;
     border-radius: 10px;
     cursor: pointer;
     transition: background .18s, color .18s;
     position: relative;
     gap: .65rem;
     font-size: .875rem;
     font-weight: 500;
     color: #64748b;
     text-decoration: none;
     white-space: nowrap
 }

 .sidebar-item:hover {
     background: #fff7ed;
     color: #f97316
 }

 .dark .sidebar-item:hover {
     background: #1e2736;
     color: #fb923c
 }

 .sidebar-item.active {
     background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
     color: #f97316;
     font-weight: 600
 }

 .dark .sidebar-item.active {
     background: linear-gradient(135deg, #1e2736 0%, #1e2030 100%);
     color: #fb923c
 }

 .sidebar-item.active::before {
     content: '';
     position: absolute;
     left: -.5rem;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 60%;
     background: #f97316;
     border-radius: 0 3px 3px 0
 }

 .sidebar-icon {
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .95rem;
     flex-shrink: 0
 }

 .sidebar-badge {
     margin-left: auto;
     background: #f97316;
     color: #fff;
     font-size: .65rem;
     font-weight: 700;
     padding: 1px 6px;
     border-radius: 99px;
     line-height: 1.4
 }

 .sidebar-group-label {
     font-size: .65rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: #94a3b8;
     padding: 1rem 1.5rem .35rem
 }

 #sidebar-nav {
     overflow-y: auto;
     overflow-x: hidden;
     flex: 1
 }

 /* Navbar */
 #navbar {
     background: rgba(255, 255, 255, .85);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid #f1f5f9;
     position: sticky;
     top: 0;
     z-index: 30;
     height: 64px
 }

 .dark #navbar {
     background: rgba(20, 25, 32, .9);
     border-bottom-color: #1e2736
 }

 /* Card */
 .card {
     background: #fff;
     border-radius: 16px;
     border: 1px solid #f1f5f9;
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .04), 0 1px 2px -1px rgba(0, 0, 0, .04);
     transition: box-shadow .2s, transform .2s, border-color .2s
 }

 .dark .card {
     background: #141920;
     border-color: #1e2736
 }

 .card:hover {
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 10px -4px rgba(0, 0, 0, .06);
     transform: translateY(-1px)
 }

 /* Stat Icons */
 .stat-icon-orange {
     background: linear-gradient(135deg, #fff7ed, #ffedd5);
     color: #f97316
 }

 .stat-icon-emerald {
     background: linear-gradient(135deg, #ecfdf5, #d1fae5);
     color: #10b981
 }

 .stat-icon-sky {
     background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
     color: #0ea5e9
 }

 .stat-icon-violet {
     background: linear-gradient(135deg, #f5f3ff, #ede9fe);
     color: #8b5cf6
 }

 .stat-icon-rose {
     background: linear-gradient(135deg, #fff1f2, #ffe4e6);
     color: #f43f5e
 }

 .stat-icon-amber {
     background: linear-gradient(135deg, #fffbeb, #fef3c7);
     color: #f59e0b
 }

 /* Buttons */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .4rem;
     padding: .5rem 1.1rem;
     border-radius: 10px;
     font-size: .845rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .18s;
     border: none;
     outline: none;
     white-space: nowrap;
     position: relative;
     overflow: hidden
 }

 .btn:focus-visible {
     outline: 2px solid #f97316;
     outline-offset: 2px
 }

 .btn-primary {
     background: linear-gradient(135deg, #f97316, #ea580c);
     color: #fff;
     box-shadow: 0 2px 8px rgba(249, 115, 22, .3)
 }

 .btn-primary:hover {
     background: linear-gradient(135deg, #ea580c, #c2410c);
     box-shadow: 0 4px 14px rgba(249, 115, 22, .4);
     transform: translateY(-1px)
 }

 .btn-secondary {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     color: #475569
 }

 .dark .btn-secondary {
     background: #1e2736;
     border-color: #2d3748;
     color: #94a3b8
 }

 .btn-secondary:hover {
     background: #f1f5f9;
     border-color: #cbd5e1;
     color: #334155
 }

 .btn-ghost {
     background: transparent;
     color: #64748b
 }

 .btn-ghost:hover {
     background: #f8fafc;
     color: #1e293b
 }

 .dark .btn-ghost:hover {
     background: #1e2736;
     color: #e2e8f0
 }

 .btn-sm {
     padding: .35rem .75rem;
     font-size: .78rem;
     border-radius: 8px
 }

 .btn-icon {
     padding: .5rem;
     border-radius: 10px
 }

 .btn-danger {
     background: linear-gradient(135deg, #f43f5e, #e11d48);
     color: #fff;
     box-shadow: 0 2px 8px rgba(244, 63, 94, .3)
 }

 .btn-success {
     background: linear-gradient(135deg, #10b981, #059669);
     color: #fff;
     box-shadow: 0 2px 8px rgba(16, 185, 129, .3)
 }

 .btn-warning {
     background: linear-gradient(135deg, #f59e0b, #d97706);
     color: #fff;
     box-shadow: 0 2px 8px rgba(245, 158, 11, .3)
 }

 .btn-outline-primary {
     background: transparent;
     border: 1.5px solid #f97316;
     color: #f97316
 }

 .btn-outline-primary:hover {
     background: #fff7ed
 }

 .btn::after {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle, rgba(255, 255, 255, .35) 0%, transparent 70%);
     opacity: 0;
     transition: opacity .3s
 }

 .btn:active::after {
     opacity: 1
 }

 /* Badge */
 .badge {
     display: inline-flex;
     align-items: center;
     gap: .25rem;
     padding: .2rem .6rem;
     border-radius: 99px;
     font-size: .72rem;
     font-weight: 600
 }

 .badge-orange {
     background: #fff7ed;
     color: #ea580c
 }

 .badge-emerald {
     background: #ecfdf5;
     color: #059669
 }

 .badge-rose {
     background: #fff1f2;
     color: #e11d48
 }

 .badge-sky {
     background: #f0f9ff;
     color: #0284c7
 }

 .badge-amber {
     background: #fffbeb;
     color: #d97706
 }

 .badge-slate {
     background: #f8fafc;
     color: #475569
 }

 .badge-violet {
     background: #f5f3ff;
     color: #7c3aed
 }

 .dark .badge-orange {
     background: #431407;
     color: #fb923c
 }

 .dark .badge-emerald {
     background: #022c22;
     color: #34d399
 }

 .dark .badge-rose {
     background: #4c0519;
     color: #fb7185
 }

 .dark .badge-sky {
     background: #082f49;
     color: #38bdf8
 }

 .dark .badge-amber {
     background: #451a03;
     color: #fbbf24
 }

 .dark .badge-slate {
     background: #1e2736;
     color: #94a3b8
 }

 .dark .badge-violet {
     background: #2e1065;
     color: #a78bfa
 }

 /* Dots */
 .dot {
     display: inline-block;
     width: 7px;
     height: 7px;
     border-radius: 50%
 }

 .dot-green {
     background: #10b981
 }

 .dot-orange {
     background: #f97316
 }

 .dot-red {
     background: #f43f5e
 }

 .dot-blue {
     background: #0ea5e9
 }

 .dot-gray {
     background: #94a3b8
 }

 @keyframes livePulse {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, .4)
     }

     50% {
         box-shadow: 0 0 0 6px rgba(16, 185, 129, 0)
     }
 }

 .live-dot {
     animation: livePulse 1.5s ease-in-out infinite
 }

 /* Table */
 .data-table th {
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .05em;
     text-transform: uppercase;
     color: #94a3b8;
     padding: .85rem 1rem;
     background: #f8fafc;
     border-bottom: 1px solid #f1f5f9;
     white-space: nowrap
 }

 .dark .data-table th {
     background: #0f1420;
     border-color: #1e2736;
     color: #64748b
 }

 .data-table td {
     padding: .9rem 1rem;
     border-bottom: 1px solid #f8fafc;
     font-size: .845rem;
     vertical-align: middle;
     color: #475569
 }

 .dark .data-table td {
     border-color: #1a2232;
     color: #94a3b8
 }

 .data-table tr:hover td {
     background: #fafbff
 }

 .dark .data-table tr:hover td {
     background: #0f1420
 }

 .data-table tr:last-child td {
     border-bottom: none
 }

 .table-wrap {
     overflow-x: auto
 }

 /* Progress */
 .progress-bar {
     height: 6px;
     border-radius: 99px;
     background: #f1f5f9;
     overflow: hidden
 }

 .dark .progress-bar {
     background: #1e2736
 }

 .progress-fill {
     height: 100%;
     border-radius: 99px;
     transition: width 1s ease
 }

 /* Dropdown */
 .dropdown-menu {
     position: absolute;
     right: 0;
     top: calc(100% + 6px);
     background: #fff;
     border: 1px solid #f1f5f9;
     border-radius: 14px;
     box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .12);
     z-index: 50;
     min-width: 220px;
     animation: slideDown .18s ease-out;
     overflow: hidden
 }

 .dark .dropdown-menu {
     background: #141920;
     border-color: #1e2736
 }

 .dropdown-item {
     display: flex;
     align-items: center;
     gap: .65rem;
     padding: .65rem 1rem;
     font-size: .845rem;
     color: #475569;
     cursor: pointer;
     transition: background .15s, color .15s
 }

 .dark .dropdown-item {
     color: #94a3b8
 }

 .dropdown-item:hover {
     background: #f8fafc;
     color: #1e293b
 }

 .dark .dropdown-item:hover {
     background: #1a2232;
     color: #e2e8f0
 }

 .dropdown-divider {
     border-top: 1px solid #f1f5f9;
     margin: 4px 0
 }

 .dark .dropdown-divider {
     border-color: #1e2736
 }

 /* Toast */
 #toast-container {
     position: fixed;
     bottom: 1.5rem;
     right: 1.5rem;
     z-index: 9999;
     display: flex;
     flex-direction: column;
     gap: .5rem
 }

 .toast {
     display: flex;
     align-items: center;
     gap: .75rem;
     padding: .85rem 1.1rem;
     background: #fff;
     border: 1px solid #f1f5f9;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
     min-width: 280px;
     max-width: 360px;
     animation: fadeIn .3s ease-out;
     font-size: .845rem;
     font-weight: 500
 }

 .dark .toast {
     background: #141920;
     border-color: #1e2736;
     color: #e2e8f0
 }

 /* Modal */
 .modal-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .5);
     backdrop-filter: blur(4px);
     z-index: 60;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     animation: fadeIn .2s ease-out
 }

 .modal-box {
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
     width: 100%;
     max-width: 560px;
     max-height: 90vh;
     overflow-y: auto;
     animation: fadeIn .25s ease-out
 }

 .dark .modal-box {
     background: #141920;
     border: 1px solid #1e2736
 }

 /* Input */
 .form-input {
     width: 100%;
     padding: .6rem 1rem;
     border: 1.5px solid #e2e8f0;
     border-radius: 10px;
     font-size: .875rem;
     background: #fff;
     color: #1e293b;
     outline: none;
     transition: border-color .2s, box-shadow .2s
 }

 .dark .form-input {
     background: #0f1420;
     border-color: #1e2736;
     color: #e2e8f0
 }

 .form-input:focus {
     border-color: #f97316;
     box-shadow: 0 0 0 3px rgba(249, 115, 22, .12)
 }

 /* Tooltip */
 [data-tooltip] {
     position: relative
 }

 [data-tooltip]::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: calc(100% + 6px);
     left: 50%;
     transform: translateX(-50%);
     background: #1e293b;
     color: #fff;
     font-size: .72rem;
     font-weight: 500;
     padding: 4px 8px;
     border-radius: 6px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity .2s;
     z-index: 99
 }

 [data-tooltip]:hover::after {
     opacity: 1
 }

 /* Tabs */
 .tab-btn {
     padding: .5rem 1rem;
     font-size: .8rem;
     font-weight: 600;
     border-radius: 8px;
     cursor: pointer;
     transition: all .2s;
     color: #64748b;
     background: transparent;
     border: none
 }

 .tab-btn:hover {
     color: #f97316;
     background: #fff7ed
 }

 .tab-btn.active {
     background: #fff;
     color: #f97316;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
 }

 .dark .tab-btn.active {
     background: #1e2736;
     color: #fb923c
 }

 /* Checkbox */
 .custom-check {
     width: 16px;
     height: 16px;
     border: 2px solid #d1d5db;
     border-radius: 5px;
     cursor: pointer;
     transition: all .15s;
     -webkit-appearance: none;
     appearance: none;
     background: #fff;
     position: relative;
     flex-shrink: 0
 }

 .dark .custom-check {
     border-color: #374151;
     background: #0f1420
 }

 .custom-check:checked {
     background: #f97316;
     border-color: #f97316
 }

 .custom-check:checked::after {
     content: '✓';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     font-size: 10px;
     font-weight: 700
 }

 /* Skeleton */
 .skeleton {
     background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
     background-size: 200% 100%;
     animation: skeleton-wave 1.5s ease-in-out infinite;
     border-radius: 8px
 }

 .dark .skeleton {
     background: linear-gradient(90deg, #1e2736 25%, #2d3748 50%, #1e2736 75%);
     background-size: 200% 100%
 }

 @keyframes skeleton-wave {
     0% {
         background-position: 200% 0
     }

     100% {
         background-position: -200% 0
     }
 }

 /* Sortable column */
 .sort-btn {
     cursor: pointer;
     user-select: none
 }

 .sort-btn:hover {
     color: #f97316
 }

 /* Pagination */
 .page-btn {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     font-size: .78rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .18s;
     color: #64748b;
     background: transparent;
     border: 1px solid transparent
 }

 .page-btn:hover {
     background: #fff7ed;
     color: #f97316;
     border-color: #fed7aa
 }

 .page-btn.active {
     background: linear-gradient(135deg, #f97316, #ea580c);
     color: #fff;
     border-color: #f97316
 }

 .page-btn.disabled {
     opacity: .4;
     cursor: not-allowed;
     pointer-events: none
 }

 /* Status filter chips */
 .filter-chip {
     padding: .35rem .85rem;
     border-radius: 99px;
     font-size: .75rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .18s;
     border: 1.5px solid #e2e8f0;
     color: #64748b;
     background: transparent
 }

 .dark .filter-chip {
     border-color: #2d3748;
     color: #94a3b8
 }

 .filter-chip:hover {
     border-color: #f97316;
     color: #f97316;
     background: #fff7ed
 }

 .dark .filter-chip:hover {
     background: #1e2736
 }

 .filter-chip.active {
     background: #f97316;
     color: #fff;
     border-color: #f97316
 }

 .dark .filter-chip.active {
     background: #f97316;
     color: #fff;
     border-color: #f97316
 }

 /* Timeline */
 .timeline-line {
     position: absolute;
     left: 15px;
     top: 32px;
     bottom: 0;
     width: 2px;
     background: #f1f5f9
 }

 .dark .timeline-line {
     background: #1e2736
 }

 * {
     transition-property: background-color, border-color, color, fill, stroke;
     transition-duration: .2s;
     transition-timing-function: ease
 }