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

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

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

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

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

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

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

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

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

   @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 .4s 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;
       background: transparent;
       border: none;
       cursor: pointer
   }

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

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

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

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

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

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

   /* ============ ACTIVITY-SPECIFIC ============ */
   @keyframes newItem {
       from {
           opacity: 0;
           transform: translateY(-10px);
           background: rgba(99, 102, 241, 0.08)
       }

       to {
           opacity: 1;
           transform: none;
           background: transparent
       }
   }

   .new-item {
       animation: newItem 1s ease-out
   }

   .event-pill {
       padding: 4px 10px;
       border-radius: 8px;
       font-size: 11px;
       font-weight: 800;
       display: inline-flex;
       align-items: center;
       gap: 6px;
       text-transform: uppercase;
       letter-spacing: .03em
   }

   .fil-btn {
       padding: 8px 14px;
       border-radius: 14px;
       font-size: 12.5px;
       font-weight: 700;
       color: #6b7280;
       transition: .2s;
       white-space: nowrap;
       background: transparent;
       border: 1px solid transparent;
       cursor: pointer;
       display: inline-flex;
       align-items: center;
       gap: 6px
   }

   .fil-btn:hover {
       background: rgba(99, 102, 241, .08);
       color: #4f46e5
   }

   html.dark .fil-btn {
       color: #9aa1b5
   }

   html.dark .fil-btn:hover {
       background: rgba(99, 102, 241, .14)
   }

   .fil-btn.on {
       background: #121726;
       color: #fff;
       border-color: #121726
   }

   html.dark .fil-btn.on {
       background: #fff;
       color: #121726;
       border-color: #fff
   }