/* css/styles.css
   Unified stylesheet:
   - App/dashboard styles you already have
   - Shared utilities (glass, buttons, modals, honor system)
   - Keeps scrollbar styling + z-index hierarchy + dropdown/modals
   - CONSISTENT GLASS MORPHISM ACROSS ALL CARDS

   IMPORTANT:
   ✅ Landing (index.html) header/nav/menu/hero styles REMOVED from this file.
*/

/* =========================
   THEME TOKENS
   ========================= */
   :root{
    /* Apple-ish dark + electric blue */
    --bg-900:#000000;
    --bg-850:#05070A;
    --bg-800:#0A0C10;
  
    --line:rgba(255,255,255,0.10);
    --line-2:rgba(255,255,255,0.06);
  
    --text:#FFFFFF;
    --muted:#A1A1AA;
    --muted-2:#C7C7CC;
  
    --accent:#0A84FF;
    --accent-2:#6EA8FF;
    --accent-3:#7C5CFF;
  
    --accent-soft:rgba(10,132,255,0.18);
    --accent-glow:rgba(10,132,255,0.28);
  
    /* CONSISTENT GLASS TOKENS */
    --glass:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
    --glass-2:rgba(255,255,255,0.055);
    --glass-border:rgba(255,255,255,0.08);
    --glass-blur:blur(12px) saturate(180%);
  
    --ui-radius:18px;
    --card-radius:18px;
  
    /* App layout */
    --sidebar-w:260px;
    --right-w:340px;
    --max-width:1400px;
  
    /* Honor (blue system) */
    --honor-blue-600:#0A84FF;
    --honor-blue-500:#0066CC;
    --honor-blue-400:#6EA8FF;
    --honor-success:#10b981;
    --honor-bg-lite:rgba(255,255,255,0.02);
    --honor-text-sub:rgba(255,255,255,0.66);
  }
  
  /* =========================
     RESET + BASE
     ========================= */
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  
  html,body{
    height:100%;
    margin:0;
    padding:0;
    color:var(--text);
    font-family:Manrope, "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
    overflow-x:hidden;
    line-height:1.6;
    font-feature-settings:"ss01","ss02","cv01","cv03";
    background:#000;
  }
  
  body{
    background:
      radial-gradient(ellipse 70% 52% at 50% -10%, rgba(10,132,255,0.12), transparent 70%),
      radial-gradient(ellipse 60% 50% at 50% 120%, rgba(124,92,255,0.08), transparent 65%),
      #000;
    position:relative;
  }
  
  /* Premium subtle noise */
  body::before{
    content:'';
    position:fixed;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:0;
    opacity:0.65;
  }
  
  a,button{ -webkit-tap-highlight-color:transparent; }
  :focus-visible{
    outline:2px solid rgba(10,132,255,0.7);
    outline-offset:3px;
    border-radius:12px;
  }
  
  /* Helpful defaults */
  svg{ display:block; max-width:100%; }
  img{ max-width:100%; height:auto; }
  
  /* =========================
     SHARED UTILITIES - CONSISTENT GLASS
     ========================= */
  .container{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
    position:relative;
    z-index:2;
  }
  
  .glass{
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  
  .card-hover{
    transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s, border-color .22s, background .22s;
  }
  .card-hover:hover{
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    transform: translateY(-6px);
    border-color: rgba(10,132,255,0.18);
  }
  
  /* =========================
     STAT CARDS - CONSISTENT GLASS
     ========================= */
  .stat-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .stat-card:hover {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 
      0 8px 30px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-2px);
  }
  
  /* =========================
     APP/DASHBOARD LAYOUT (kept)
     ========================= */
  .app{
    max-width:var(--max-width);
    margin:0 auto;
    padding:24px;
    min-height:100vh;
    display:grid;
    grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
    grid-gap:28px;
    align-items:start;
    position:relative;
    z-index:1;
  }
  .main{ min-width:0; position:relative; z-index:10; }
  .right{ min-width:0; z-index:10; }
  
  /* ==================== CRITICAL Z-INDEX HIERARCHY ==================== */
  .glass, .card-hover, .stat-card { position: relative; z-index: 1; }
  
  /* Dropdown layer: ABOVE all content */
  #sortMenu,
  [data-dropdown],
  .dropdown-menu,
  .playbook-dropdown{
    position:absolute !important;
    z-index:100 !important;
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    background: linear-gradient(
      180deg,
      rgba(10, 12, 16, 0.98) 0%,
      rgba(5, 7, 10, 0.97) 100%
    ) !important;
    isolation:isolate;
  }
  
  /* Modal backdrop/content */
  .modal-overlay{ z-index:70 !important; }
  .modal-content{ z-index:80 !important; }
  
  /* Toast */
  #toast{ z-index:100 !important; }
  
  /* ==================== MOBILE SIDEBAR (layout adjustments preserved)
     NOTE: the actual .sidebar rules were moved to sidebar.css.
     We keep the responsive .app column change here so layout responds,
     but the .sidebar transform/position logic lives in sidebar.css.
  ==================== */
  @media (max-width:1200px){
    .app{
      grid-template-columns: 1fr var(--right-w);
      padding:20px;
    }
  }
  
  /* Remaining responsive breakpoints (unchanged) */
  @media (max-width:900px){
    .app{
      grid-template-columns: 1fr;
      padding:16px 12px;
      grid-gap:16px;
    }
    .right{ display:none; }
  }
  @media (max-width:640px){
    .app{ padding:12px 8px; grid-gap:12px; }
  }
  
    /* ==================== APP BUTTONS (kept) ==================== */
    .btn-accent{
      background: linear-gradient(90deg, rgba(10,132,255,0.22), rgba(124,92,255,0.10));
      backdrop-filter: blur(10px) saturate(180%);
      -webkit-backdrop-filter: blur(10px) saturate(180%);
      color:#FFFFFF;
      padding:8px 12px;
      border-radius:10px;
      font-weight:800;
      border:1px solid rgba(10,132,255,0.22);
      cursor:pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      position:relative;
      z-index:1;
    }
    .btn-accent:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(10,132,255,0.16);
      border-color: rgba(10,132,255,0.35);
    }
    .btn-accent:disabled{
      opacity:0.5;
      cursor:not-allowed;
      transform:none;
    }
    
    .btn-ghost{
      background:transparent;
      border:1px solid rgba(255,255,255,0.08);
      padding:8px 12px;
      border-radius:10px;
      color:rgba(255,255,255,0.70);
      cursor:pointer;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      transition: all 0.2s ease;
      position:relative;
      z-index:1;
    }
    .btn-ghost:hover{
      background: rgba(255,255,255,0.05);
      color:#FFFFFF;
      border-color: rgba(10,132,255,0.16);
    }
    .btn-ghost:disabled{ opacity:0.5; cursor:not-allowed; }
    
    /* ==================== LOADING SKELETON (kept) ==================== */
    .skeleton{
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0.02) 100%
      );
      background-size: 200% 100%;
      animation: skeletonShimmer 1.5s ease-in-out infinite;
      border-radius: 8px;
    }
    @keyframes skeletonShimmer{
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    
    /* ==================== MODALS (kept) ==================== */
    .modal-overlay{
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      animation: overlayFadeIn 0.3s ease forwards;
    }
    @keyframes overlayFadeIn{
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .modal-content{
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      backdrop-filter: blur(45px) saturate(180%);
      -webkit-backdrop-filter: blur(45px) saturate(180%);
      border-radius: var(--card-radius);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.7),
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      padding: 32px;
      max-width: 560px;
      width: 90%;
      animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    @keyframes modalSlideUp{
      from { opacity: 0; transform: translateY(20px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .close-x{
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .close-x:hover{
      background: rgba(255, 90, 90, 0.1);
      border-color: rgba(255, 90, 90, 0.3);
      color: #ff5a5a;
      transform: rotate(90deg);
    }
    
    /* ==================== PLAYBOOK DROPDOWN (kept) ==================== */
    .playbook-actions{ position: relative; }
    
    .playbook-menu-btn{
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      color: rgba(255, 255, 255, 0.7);
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .playbook-menu-btn:hover{
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
      color: #FFFFFF;
    }
    
    .playbook-dropdown{
      right: 0;
      top: 100%;
      margin-top: 8px;
      min-width: 180px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 8px;
      display: none;
    }
    .playbook-dropdown.active{
      display: block;
      animation: dropdownSlideIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @keyframes dropdownSlideIn{
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .playbook-dropdown button{
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .playbook-dropdown button:hover{ background: rgba(255, 255, 255, 0.08); }
    .playbook-dropdown button.danger{ color: #ff5a5a; }
    .playbook-dropdown button.danger:hover{ background: rgba(255, 90, 90, 0.1); }
    
    /* ==================== MISC (kept) ==================== */
    .meta-insight{
      background: rgba(10,132,255,0.12);
      border: 1px solid rgba(10,132,255,0.18);
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      color: rgba(110,168,255,0.95);
      white-space: nowrap;
    }
    
    .pro-badge{
      background: linear-gradient(90deg, rgba(246, 217, 2, 0.759), rgba(243, 186, 0, 0.996));
      padding: 2px 8px;
      color: #000;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 10px rgba(10,132,255,0.22);
    }
    
    #toast{
      background: rgba(0,0,0,0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 12px 16px;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 600;
      position: fixed;
      top: 20px;
      right: 20px;
      opacity: 0;
      transform: translateX(100%);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    #toast.show{
      opacity: 1;
      transform: translateX(0);
    }
    
    input:focus,
    textarea:focus,
    select:focus{
      outline:none;
      border-color: rgba(10,132,255,0.4);
      box-shadow: 0 0 0 3px rgba(10,132,255,0.12);
    }
    
    .tab-btn{ transition: all 0.2s ease; }
    .tab-btn.active{
      background: rgba(255,255,255,0.05) !important;
      color: #FFFFFF;
    }
    
    button, a{
      -webkit-touch-callout:none;
      user-select:none;
    }
    
    /* Modals: dark scheme support for native controls */
    .modal-overlay,
    .modal-overlay *{ color-scheme: dark; }
    .modal-overlay select,
    .modal-overlay select option{
      background-color: #0A0C10 !important;
      color: #E6EEF8 !important;
    }
    .modal-overlay select{
      border: 1px solid rgba(255,255,255,0.08) !important;
      -webkit-appearance: menulist-button;
      appearance: menulist-button;
      padding-right: 2.25rem;
    }
    .modal-overlay select:focus{
      outline: 2px solid rgba(10,132,255,0.20) !important;
      box-shadow: 0 0 0 3px rgba(10,132,255,0.08) !important;
    }
    .modal-overlay select::-ms-expand{ display:block; }
    .modal-overlay .select-panel,
    .modal-overlay .select-custom-panel{
      z-index: 999999 !important;
      background-color: #0A0C10 !important;
      color: #E6EEF8 !important;
    }
    
    .chain-icon{
      width:24px;
      height:24px;
      vertical-align:middle;
    }
    
    /* Research tab bits (kept) - CONSISTENT GLASS */
    @keyframes slideUp{
      from{ opacity:0; transform: translateY(20px); }
      to{ opacity:1; transform: translateY(0); }
    }
    .premium-card{
      background: var(--glass);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .premium-card:hover{
      border-color: rgba(10,132,255,0.12);
      box-shadow: 0 20px 60px rgba(6,12,30,0.45), 0 0 0 1px rgba(10,132,255,0.05);
    }
    
    .research-card{
      position: relative;
      overflow: hidden;
      border-radius: 16px;
      background: var(--glass);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-border);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .research-card::before{
      content:'';
      position:absolute;
      top:0;
      left:-100%;
      width:50%;
      height:100%;
      background: linear-gradient(90deg, transparent, rgba(10,132,255,0.04), transparent);
      transition: left 0.6s ease;
    }
    .research-card:hover::before{ left:150%; }
    
    .belief-pill{
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      border-radius: 999px;
      padding: 6px 8px;
      font-size: 11px;
    }
    .belief-pill::after{
      content:'';
      position:absolute;
      inset:0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
      opacity:0;
      transition: opacity 0.3s;
    }
    .belief-pill:hover::after{
      opacity:1;
      animation: shimmer 1.2s ease-in-out infinite;
    }
    @keyframes shimmer{
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    
    .note{
      transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid rgba(255,255,255,0.05);
    }
    .note:hover{
      background: rgba(255,255,255,0.04) !important;
      border-color: rgba(10,132,255,0.08);
    }
    
    .proof-upvote:hover,
    .proof-downvote:hover{
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    }
    .trust-number{ min-width:46px; text-align:right; }
    .trust-wrap{ max-width:160px; }
    .trust-info{ position:relative; }
    .trust-info-btn{
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }
    
    .trust-tooltip{
      position:absolute;
      right:0;
      top:calc(100% + 8px);
      transform-origin: top right;
      max-width: 260px;
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(6,12,30,0.9);
      color: #fff;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      z-index: 30;
      line-height: 1.3;
      display: block;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 180ms ease, transform 180ms ease;
    }
    .trust-tooltip.visible{
      opacity:1;
      pointer-events:auto;
      transform: translateY(0);
    }
    .trust-tooltip::after{
      content:'';
      position:absolute;
      top:-6px;
      right:12px;
      width:0;height:0;
      border-left:6px solid transparent;
      border-right:6px solid transparent;
      border-bottom:6px solid rgba(6,12,30,0.9);
    }
    .trust-tooltip.hidden{ display:none; opacity:0; pointer-events:none; transform: translateY(6px); }
    
    .skeleton-card{
      display:flex;
      align-items:center;
      gap:16px;
      width:100%;
    }
    .skeleton-card .skeleton-avatar{ flex:0 0 auto; }
    .skeleton-card .skeleton-text{ border-radius:8px; }
    .skeleton-card .flex-1{ min-width:0; }
    
    @media (max-width: 900px){
      #honor-section{ padding:16px; }
      #honor-title{ font-size:11px; letter-spacing:0.8px; gap:5px; }
      .honor-badge{ font-size:8px; padding:5px 10px; gap:3px; }
      #honor-value{ font-size:14px; }
      #progress-bar-bg{ height:7px; }
      #progress-label{ font-size:10px; margin-top:6px; }
      .modal-content{ padding:24px; width:95%; }
    }
    
    @media (max-width: 768px){
      .research-card{ padding: 1rem !important; }
      .research-card > .flex{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        gap:12px;
      }
      .research-card img{
        width:56px !important;
        height:56px !important;
        flex:0 0 56px;
        border-radius:12px;
      }
      .research-card .flex-1{ min-width:0; flex:1 1 auto; display:block; }
      .research-card > .flex .flex-shrink-0{ flex:0 0 auto; margin-left:8px; }
      .research-card .trust-wrap{
        width:100%;
        order:3;
        margin-top:8px;
        display:flex;
        justify-content:flex-end;
      }
      .proofs-panel{ width:100%; order:4; }
    
      .trust-tooltip{
        left:8px;
        right:8px;
        top:calc(100% + 8px);
        max-width:calc(100% - 16px);
      }
      .trust-tooltip::after{ right:20px; }
    }
    
    @media (max-width: 640px){
      .modal-content{ padding:20px; }
    }
    
    .empty-state-icon{ animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse{
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.85; transform: scale(1.02); }
    }
    
    /* =========================
       GLOBAL SCROLLBAR STYLING (KEPT)
       (WHOLE PAGE — HIDDEN BY DEFAULT, SUBTLE ON HOVER)
       ========================= */
    html,
    body,
    .app{
      scrollbar-width: none;        /* Firefox */
      -ms-overflow-style: none;     /* IE / Edge */
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .app::-webkit-scrollbar{
      width:0;
      height:0;
    }
    html:hover,
    body:hover,
    .app:hover{
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.08) transparent;
    }
    html:hover::-webkit-scrollbar,
    body:hover::-webkit-scrollbar,
    .app:hover::-webkit-scrollbar{
      width:6px;
      height:6px;
    }
    html:hover::-webkit-scrollbar-track,
    body:hover::-webkit-scrollbar-track,
    .app:hover::-webkit-scrollbar-track{
      background:transparent;
    }
    html:hover::-webkit-scrollbar-thumb,
    body:hover::-webkit-scrollbar-thumb,
    .app:hover::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,0.08);
      border-radius:999px;
      border:1px solid transparent;
    }
    html:hover::-webkit-scrollbar-thumb:hover,
    body:hover::-webkit-scrollbar-thumb:hover,
    .app:hover::-webkit-scrollbar-thumb:hover{
      background: rgba(255,255,255,0.14);
    }
    
    /* =========================
       HORIZONTAL TAB BAR SCROLLBAR (KEPT)
       ========================= */
    .glass.overflow-x-auto{
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .glass.overflow-x-auto::-webkit-scrollbar{ height:0; }
    
    .glass.overflow-x-auto:hover{
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.08) transparent;
    }
    .glass.overflow-x-auto:hover::-webkit-scrollbar{ height:6px; }
    .glass.overflow-x-auto:hover::-webkit-scrollbar-track{ background:transparent; }
    .glass.overflow-x-auto:hover::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,0.08);
      border-radius:999px;
    }
    .glass.overflow-x-auto:hover::-webkit-scrollbar-thumb:hover{
      background: rgba(255,255,255,0.14);
    }