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

 body {
     font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
     transition: background .3s, color .3s
 }

 body {
     background: #f8fafc;
     color: #1e293b
 }

 .sidebar-bg {
     background: #fff;
     border-right: 1px solid #e2e8f0
 }

 .card-bg {
     background: #fff;
     border: 1px solid #e2e8f0
 }

 .header-bg {
     background: rgba(255, 255, 255, .95);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid #e2e8f0
 }

 .input-bg {
     background: #f1f5f9;
     border: 1px solid #e2e8f0;
     color: #1e293b
 }

 .text-main {
     color: #1e293b
 }

 .text-sub {
     color: #64748b
 }

 .text-muted {
     color: #94a3b8
 }

 .hover-bg:hover {
     background: #f1f5f9
 }

 .divider {
     border-color: #e2e8f0
 }

 .popup-bg {
     background: #fff;
     border: 1px solid #e2e8f0
 }

 .badge-bg {
     background: #f1f5f9
 }

 .dark body {
     background: #020617;
     color: #e2e8f0
 }

 .dark .sidebar-bg {
     background: #0f172a;
     border-right: 1px solid #1e293b
 }

 .dark .card-bg {
     background: #1e293b;
     border: 1px solid #334155
 }

 .dark .header-bg {
     background: rgba(15, 23, 42, .95);
     backdrop-filter: blur(20px);
     border-bottom: 1px solid #1e293b
 }

 .dark .input-bg {
     background: #1e293b;
     border: 1px solid #334155;
     color: #e2e8f0
 }

 .dark .text-main {
     color: #f1f5f9
 }

 .dark .text-sub {
     color: #94a3b8
 }

 .dark .text-muted {
     color: #64748b
 }

 .dark .hover-bg:hover {
     background: #334155
 }

 .dark .divider {
     border-color: #1e293b
 }

 .dark .popup-bg {
     background: #1e293b;
     border: 1px solid #334155
 }

 .dark .badge-bg {
     background: #334155
 }

 ::-webkit-scrollbar {
     width: 6px
 }

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

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

 .sidebar-container {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     width: 260px;
     z-index: 50;
     display: flex;
     flex-direction: column;
     overflow-y: auto
 }

 .main-container {
     margin-left: 260px;
     min-height: 100vh
 }

 @media(max-width:1023px) {
     .sidebar-container {
         transform: translateX(-100%);
         transition: transform .3s
     }

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

     .main-container {
         margin-left: 0
     }
 }

 .sidebar-link {
     transition: all .3s;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 10px 12px;
     border-radius: 12px;
     font-size: 14px;
     color: #64748b;
     text-decoration: none
 }

 .dark .sidebar-link {
     color: #94a3b8
 }

 .sidebar-link:hover {
     background: rgba(76, 110, 245, .08);
     color: #4c6ef5;
     transform: translateX(4px)
 }

 .dark .sidebar-link:hover {
     background: rgba(76, 110, 245, .15);
     color: #748ffc
 }

 .sidebar-link.active {
     background: linear-gradient(135deg, rgba(76, 110, 245, .1), rgba(124, 58, 237, .08));
     color: #4c6ef5;
     font-weight: 600;
     border-left: 3px solid #4c6ef5
 }

 .dark .sidebar-link.active {
     background: linear-gradient(135deg, rgba(76, 110, 245, .2), rgba(124, 58, 237, .12));
     color: #748ffc
 }

 .header-sticky {
     position: sticky;
     top: 0;
     z-index: 30
 }

 .toast-enter {
     animation: slideIn .4s
 }

 @keyframes slideIn {
     from {
         transform: translateX(100%);
         opacity: 0
     }

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

 .overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .5);
     backdrop-filter: blur(4px);
     z-index: 40;
     display: none
 }

 .overlay.show {
     display: block
 }

 .modal {
     position: fixed;
     inset: 0;
     z-index: 200;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 1rem
 }

 .modal.show {
     display: flex
 }

 .gradient-text {
     background: linear-gradient(135deg, #4c6ef5, #7c3aed);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent
 }

 /* Settings Nav - WORKING */
 .settings-nav {
     display: flex;
     flex-direction: column;
     gap: 2px
 }

 .settings-nav-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 14px;
     border-radius: 10px;
     cursor: pointer;
     transition: all .2s;
     font-size: 13px;
     color: #64748b;
     background: transparent;
     border: none;
     font-family: inherit;
     text-align: left;
     width: 100%
 }

 .dark .settings-nav-item {
     color: #94a3b8
 }

 .settings-nav-item:hover {
     background: rgba(76, 110, 245, .08);
     color: #4c6ef5
 }

 .dark .settings-nav-item:hover {
     background: rgba(76, 110, 245, .15);
     color: #748ffc
 }

 .settings-nav-item.active {
     background: linear-gradient(135deg, rgba(76, 110, 245, .12), rgba(124, 58, 237, .08));
     color: #4c6ef5;
     font-weight: 600
 }

 .dark .settings-nav-item.active {
     background: linear-gradient(135deg, rgba(76, 110, 245, .2), rgba(124, 58, 237, .12));
     color: #748ffc
 }

 /* Settings content sections */
 .settings-section {
     display: none
 }

 .settings-section.active {
     display: block
 }

 /* Toggle switch */
 .toggle-sw {
     width: 40px;
     height: 22px;
     background: #cbd5e1;
     border-radius: 9999px;
     position: relative;
     cursor: pointer;
     transition: all .3s;
     border: none;
     flex-shrink: 0
 }

 .dark .toggle-sw {
     background: #475569
 }

 .toggle-sw::after {
     content: '';
     position: absolute;
     top: 2px;
     left: 2px;
     width: 18px;
     height: 18px;
     background: white;
     border-radius: 50%;
     transition: all .3s;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
 }

 .toggle-sw.on {
     background: #4c6ef5
 }

 .toggle-sw.on::after {
     transform: translateX(18px)
 }

 /* Theme cards */
 .theme-card {
     padding: 16px;
     border-radius: 12px;
     border: 2px solid transparent;
     cursor: pointer;
     transition: all .3s;
     text-align: center
 }

 .theme-card:hover {
     border-color: #4c6ef5
 }

 .theme-card.selected {
     border-color: #4c6ef5;
     background: rgba(76, 110, 245, .05)
 }

 .dark .theme-card.selected {
     background: rgba(76, 110, 245, .1)
 }

 /* Layout */
 .settings-layout {
     display: grid;
     grid-template-columns: 220px 1fr;
     gap: 0;
     min-height: 500px
 }

 @media(max-width:1023px) {
     .settings-layout {
         grid-template-columns: 1fr
     }

     .settings-sidebar {
         display: none
     }

     .settings-sidebar.mobile-show {
         display: block;
         position: fixed;
         inset: 0;
         z-index: 100;
         width: 260px;
         padding: 16px;
         overflow-y: auto
     }
 }