/* 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

   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);

  --glass:rgba(255,255,255,0.035);
  --glass-2:rgba(255,255,255,0.055);

  --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
   ========================= */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  position:relative;
  z-index:2;
}

.glass{
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.015));
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--card-radius);
  border: 1px solid rgba(255,255,255,0.08);
  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);
}

/* =========================
   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 { 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) */
  @keyframes slideUp{
    from{ opacity:0; transform: translateY(20px); }
    to{ opacity:1; transform: translateY(0); }
  }
  .premium-card{
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    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;
  }
  .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);
  }