*,
 *::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 {
     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 .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 .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 {
     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 {
     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
 }

 .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
 }

 .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-outline-primary {
     background: transparent;
     border: 1.5px solid #f97316;
     color: #f97316
 }

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

 .dark .btn-outline-primary:hover {
     background: rgba(249, 115, 22, .1)
 }

 .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
 }

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

 .dot-green {
     background: #10b981
 }

 .dot-red {
     background: #f43f5e
 }

 .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
 }

 .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-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-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-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-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
 }

 .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)
 }

 [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
 }

 .switch {
     position: relative;
     width: 36px;
     height: 20px;
     background: #d1d5db;
     border-radius: 99px;
     cursor: pointer;
     transition: background .2s;
     flex-shrink: 0;
     display: inline-block
 }

 .dark .switch {
     background: #374151
 }

 .switch.active {
     background: #10b981
 }

 .switch::after {
     content: '';
     position: absolute;
     top: 2px;
     left: 2px;
     width: 16px;
     height: 16px;
     background: #fff;
     border-radius: 50%;
     transition: transform .2s;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .12)
 }

 .switch.active::after {
     transform: translateX(16px)
 }

 .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
 }

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

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(8px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes slideDown {
     from {
         opacity: 0;
         transform: translateY(-8px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 /* Category Card */
 .cat-card {
     background: #fff;
     border-radius: 20px;
     border: 1px solid #f1f5f9;
     overflow: hidden;
     transition: box-shadow .2s, transform .2s, border-color .2s;
     cursor: pointer;
     position: relative
 }

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

 .cat-card:hover {
     box-shadow: 0 20px 35px -10px rgba(0, 0, 0, .1), 0 8px 15px -6px rgba(0, 0, 0, .05);
     transform: translateY(-3px);
     border-color: #fed7aa
 }

 .dark .cat-card:hover {
     border-color: #7c2d12
 }

 .cat-hero {
     position: relative;
     height: 150px;
     overflow: hidden
 }

 .cat-hero-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .6s cubic-bezier(.4, 0, .2, 1)
 }

 .cat-card:hover .cat-hero-img {
     transform: scale(1.1)
 }

 .cat-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .65) 100%)
 }

 .cat-icon-lg {
     position: absolute;
     top: 12px;
     left: 12px;
     width: 44px;
     height: 44px;
     border-radius: 14px;
     background: rgba(255, 255, 255, .95);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
     z-index: 2
 }

 .dark .cat-icon-lg {
     background: rgba(20, 25, 32, .95)
 }

 .cat-status-badge {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 2;
     backdrop-filter: blur(8px);
     background: rgba(255, 255, 255, .92);
     padding: .25rem .55rem;
     border-radius: 99px;
     font-size: .65rem;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: .25rem
 }

 .dark .cat-status-badge {
     background: rgba(20, 25, 32, .92)
 }

 .cat-name-overlay {
     position: absolute;
     bottom: 12px;
     left: 14px;
     right: 14px;
     z-index: 2;
     color: #fff
 }

 .cat-name-title {
     font-family: 'Outfit', sans-serif;
     font-weight: 700;
     font-size: 1.05rem;
     line-height: 1.2;
     text-shadow: 0 1px 4px rgba(0, 0, 0, .4)
 }

 .cat-name-subtitle {
     font-size: .7rem;
     opacity: .9;
     margin-top: .15rem;
     text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
     display: flex;
     align-items: center;
     gap: .35rem
 }

 .cat-quick-menu {
     position: absolute;
     top: 12px;
     right: 12px;
     z-index: 5;
     opacity: 0;
     transform: translateY(-4px);
     transition: all .25s
 }

 .cat-card:hover .cat-quick-menu {
     opacity: 1;
     transform: translateY(0)
 }

 .cat-quick-menu.hidden-hover {
     display: none
 }

 .gradient-pill {
     background: linear-gradient(135deg, #fff7ed, #ffedd5);
     color: #c2410c;
     padding: .15rem .55rem;
     border-radius: 99px;
     font-size: .65rem;
     font-weight: 700
 }

 .dark .gradient-pill {
     background: linear-gradient(135deg, #431407, #7c2d12);
     color: #fdba74
 }

 /* Sortable */
 .sortable {
     cursor: grab
 }

 .sortable:active {
     cursor: grabbing
 }

 .sort-handle {
     cursor: grab;
     color: #cbd5e1;
     padding: 4px;
     border-radius: 6px;
     transition: all .15s
 }

 .sort-handle:hover {
     background: #f1f5f9;
     color: #64748b
 }

 .dark .sort-handle:hover {
     background: #1e2736;
     color: #94a3b8
 }

 /* Empty state */
 .empty-state {
     padding: 3rem 2rem;
     text-align: center
 }

 /* Tree/hierarchy view */
 .tree-item {
     border-left: 2px solid #f1f5f9;
     padding-left: 1rem;
     margin-left: 1rem;
     position: relative
 }

 .dark .tree-item {
     border-left-color: #1e2736
 }

 .tree-item::before {
     content: '';
     position: absolute;
     left: -2px;
     top: 1rem;
     width: 1rem;
     height: 2px;
     background: #f1f5f9
 }

 .dark .tree-item::before {
     background: #1e2736
 }

 /* View toggle */
 .view-toggle-btn {
     padding: .4rem .65rem;
     font-size: .72rem;
     font-weight: 600;
     color: #64748b;
     background: transparent;
     border: none;
     cursor: pointer;
     transition: all .18s
 }

 .view-toggle-btn.active {
     background: #f97316;
     color: #fff
 }

 /* Image skeleton */
 .img-skeleton {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
     background-size: 200% 100%;
     animation: sk 1.5s ease-in-out infinite;
     z-index: 1
 }

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

 @keyframes sk {
     0% {
         background-position: 200% 0
     }

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

 .cat-hero-img.loaded~.img-skeleton {
     display: none
 }

 .color-swatch {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     cursor: pointer;
     border: 2px solid transparent;
     transition: all .18s
 }

 .color-swatch:hover {
     transform: scale(1.1)
 }

 .color-swatch.selected {
     border-color: #f97316;
     transform: scale(1.1)
 }