/* ============ BASE & RESET ============ */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html,
 body {
     width: 100%;
     min-height: 100vh;
     overflow-x: hidden
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Plus Jakarta Sans', sans-serif;
     background: #f6f7fb;
     color: #121726;
     -webkit-tap-highlight-color: transparent
 }

 html.dark body {
     background: #070a12;
     color: #e8eaf2
 }

 body,
 .tr {
     transition: background-color .35s ease, color .35s ease, border-color .35s ease
 }

 /* ============ AURORA BACKGROUND ============ */
 .aurora {
     position: fixed;
     inset: 0;
     z-index: -2;
     overflow: hidden;
     pointer-events: none
 }

 .aurora span {
     position: absolute;
     border-radius: 50%;
     filter: blur(90px);
     opacity: .30
 }

 .aurora .a1 {
     width: 520px;
     height: 520px;
     background: #6366f1;
     top: -180px;
     left: -120px
 }

 .aurora .a2 {
     width: 420px;
     height: 420px;
     background: #ec4899;
     top: 10%;
     right: -140px;
     opacity: .18
 }

 .aurora .a3 {
     width: 460px;
     height: 460px;
     background: #06b6d4;
     bottom: -180px;
     left: 30%;
     opacity: .16
 }

 html.dark .aurora span {
     opacity: .20
 }

 html.dark .aurora .a2 {
     opacity: .14
 }

 /* ============ SCROLLBAR ============ */
 ::-webkit-scrollbar {
     width: 7px;
     height: 7px
 }

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

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

 html.dark ::-webkit-scrollbar-thumb {
     background: #242b3d
 }

 .noscroll::-webkit-scrollbar {
     display: none
 }

 /* ============ SURFACES & CARDS ============ */
 .card {
     background: rgba(255, 255, 255, .78);
     backdrop-filter: blur(18px);
     border: 1px solid rgba(17, 24, 39, .07);
     border-radius: 22px;
     transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s, border-color .35s, background .35s
 }

 html.dark .card {
     background: rgba(17, 22, 36, .62);
     border-color: rgba(255, 255, 255, .07)
 }

 .card-hov:hover {
     transform: translateY(-4px);
     box-shadow: 0 24px 60px -24px rgba(79, 70, 229, .35);
     border-color: rgba(99, 102, 241, .35)
 }

 .glass-bar {
     background: rgba(255, 255, 255, .72);
     backdrop-filter: blur(22px) saturate(180%);
     border-bottom: 1px solid rgba(17, 24, 39, .07)
 }

 html.dark .glass-bar {
     background: rgba(10, 13, 22, .72);
     border-bottom-color: rgba(255, 255, 255, .07)
 }

 /* ============ KPI STRIPE & TEXT ============ */
 .stripe {
     position: relative;
     overflow: hidden
 }

 .stripe::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--stripe, linear-gradient(90deg, #6366f1, #ec4899))
 }

 .gtext {
     background: linear-gradient(110deg, #6366f1, #a855f7 40%, #ec4899 70%, #06b6d4);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent
 }

 /* ============ SIDEBAR ============ */
 .sidebar {
     width: 268px;
     z-index: 90;
     transition: transform .32s cubic-bezier(.4, 0, .2, 1)
 }

 @media(max-width:1023px) {
     .sidebar {
         position: fixed;
         transform: translateX(-100%)
     }

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

 .sb-ov {
     position: fixed;
     inset: 0;
     background: rgba(5, 8, 16, .6);
     backdrop-filter: blur(3px);
     z-index: 89;
     opacity: 0;
     visibility: hidden;
     transition: .3s
 }

 .sb-ov.show {
     opacity: 1;
     visibility: visible
 }

 .nav-i {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 9px 13px;
     border-radius: 13px;
     font-size: 13.5px;
     font-weight: 600;
     color: #6b7280;
     transition: .2s;
     position: relative
 }

 html.dark .nav-i {
     color: #8f97ad
 }

 .nav-i:hover {
     background: rgba(99, 102, 241, .09);
     color: #4f46e5
 }

 html.dark .nav-i:hover {
     background: rgba(99, 102, 241, .14);
     color: #a5b4fc
 }

 .nav-i.on {
     background: linear-gradient(100deg, rgba(99, 102, 241, .16), rgba(236, 72, 153, .08));
     color: #4f46e5
 }

 html.dark .nav-i.on {
     color: #c7d2fe
 }

 .nav-i.on::before {
     content: '';
     position: absolute;
     left: -4px;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
     height: 18px;
     border-radius: 9px;
     background: linear-gradient(#6366f1, #ec4899)
 }

 .grp-t {
     font-size: 10px;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: #a3aabd;
     padding: 0 13px;
     margin-bottom: 7px
 }

 html.dark .grp-t {
     color: #5b6378
 }

 /* ============ PANELS & MODALS ============ */
 .pop {
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     border-radius: 20px;
     overflow: hidden;
     z-index: 120;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px) scale(.98);
     transition: .22s cubic-bezier(.4, 0, .2, 1);
     background: #fff;
     border: 1px solid rgba(17, 24, 39, .09);
     box-shadow: 0 30px 70px -20px rgba(10, 13, 22, .3)
 }

 html.dark .pop {
     background: #0e1320;
     border-color: rgba(255, 255, 255, .08);
     box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8)
 }

 .pop.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1)
 }

 .pop-w {
     width: 370px;
     max-width: calc(100vw - 20px)
 }

 .pop-p {
     width: 264px;
     max-width: calc(100vw - 20px)
 }

 @media(max-width:640px) {
     .pop {
         position: fixed !important;
         top: 66px !important;
         left: 10px !important;
         right: 10px !important;
         width: auto !important;
         max-width: calc(100vw - 20px) !important;
         max-height: calc(100dvh - 86px)
     }

     .pop-body {
         max-height: calc(100dvh - 240px) !important
     }
 }

 .mdl {
     position: fixed;
     inset: 0;
     z-index: 300;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 14px;
     background: rgba(6, 9, 17, .65);
     backdrop-filter: blur(7px);
     opacity: 0;
     visibility: hidden;
     transition: .26s
 }

 .mdl.show {
     opacity: 1;
     visibility: visible
 }

 .mdl>div {
     transform: translateY(24px) scale(.96);
     transition: .3s cubic-bezier(.3, .8, .3, 1);
     max-height: 92dvh;
     overflow-y: auto;
     width: 100%
 }

 .mdl.show>div {
     transform: none
 }

 /* ============ ANIMATIONS & UTILS ============ */
 @keyframes ping2 {
     0% {
         transform: scale(1);
         opacity: .9
     }

     75%,
     100% {
         transform: scale(2.2);
         opacity: 0
     }
 }

 .ping::after {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 99px;
     background: inherit;
     animation: ping2 1.6s cubic-bezier(0, 0, .2, 1) infinite
 }

 @keyframes rise {
     from {
         opacity: 0;
         transform: translateY(16px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 .rise {
     animation: rise .55s cubic-bezier(.2, .7, .3, 1) both
 }

 .chip {
     padding: 4px 11px;
     border-radius: 99px;
     font-size: 11.5px;
     font-weight: 700;
     white-space: nowrap
 }

 .seg {
     padding: 6px 13px;
     border-radius: 11px;
     font-size: 12px;
     font-weight: 700;
     color: #8b90a3;
     transition: .2s;
     white-space: nowrap
 }

 .seg.on {
     background: #fff;
     color: #121726;
     box-shadow: 0 2px 8px rgba(10, 13, 22, .09)
 }

 html.dark .seg.on {
     background: #242b3d;
     color: #fff
 }

 table td,
 table th {
     white-space: nowrap
 }

 .act {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     height: 30px;
     border-radius: 9px;
     transition: .2s
 }

 :focus-visible {
     outline: 2px solid #6366f1;
     outline-offset: 2px
 }

 /* ============ TOAST ============ */
 .toast {
     position: fixed;
     left: 50%;
     bottom: 22px;
     transform: translateX(-50%) translateY(90px);
     z-index: 400;
     padding: 11px 18px;
     border-radius: 14px;
     font-size: 13px;
     font-weight: 700;
     color: #fff;
     background: #121726;
     box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5);
     transition: .35s cubic-bezier(.2, .8, .3, 1);
     opacity: 0;
     max-width: calc(100vw - 28px)
 }

 .toast.show {
     transform: translateX(-50%) translateY(0);
     opacity: 1
 }

 /* ============ COLLECTIONS SPECIFIC ============ */
 .coll-card {
     border-radius: 20px;
     overflow: hidden;
     transition: .4s cubic-bezier(.4, 0, .2, 1);
 }

 .coll-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 28px 55px -22px rgba(79, 70, 229, .45);
 }

 .coll-card .banner {
     transition: transform .6s cubic-bezier(.4, 0, .2, 1);
 }

 .coll-card:hover .banner {
     transform: scale(1.08);
 }

 .coll-av {
     border: 4px solid #fff;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
 }

 html.dark .coll-av {
     border-color: #121726;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
 }

 .view-btn {
     padding: 6px;
     border-radius: 10px;
     color: #9aa1b5;
     transition: .2s;
 }

 .view-btn.active {
     background: #fff;
     color: #121726;
     box-shadow: 0 2px 8px rgba(10, 13, 22, .09);
 }

 html.dark .view-btn.active {
     background: #242b3d;
     color: #fff;
 }