/* =========================
   Global / Base
========================= */
:root{
  --bg0: #070a12;
  --bg1: #0b1020;
  --card0: rgba(255,255,255,0.03);
  --card1: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);
  --muted2: rgba(255,255,255,0.45);

  --blue: #3b82f6;
  --red: #ff3b30;
  --green: #22c55e;

  --radius: 18px;
  --radius2: 14px;
}

*{ box-sizing:border-box; }
html{ min-height:100%; background-color: var(--bg1, #050712); }
body{
  margin:0;
  min-height: 100vh;
  overflow-y: scroll;              /* always reserve scrollbar space */
  scrollbar-gutter: stable;        /* modern browsers: keep gutter stable */
  display: flex;
  flex-direction: column;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg1);
  color: var(--text);
}

a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

.wrap{
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  padding: 24px 18px 24px 18px;
}

/* Login screen should breathe a bit more and fill the viewport */
body.is-login .wrap{
  max-width: 1320px;
  padding-top: 54px;
  padding-bottom: 28px;
}

/* page-level tools row */
.page-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 4px 0 14px 0;
}

.page-tools-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* footer */
.footer{
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(7,10,18,0.55);
  backdrop-filter: blur(10px);
  margin-top: auto; /* sticky footer */
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

/* extra footer links row */
.footer-links{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 18px 0 18px;
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
}

.footer-sep{ opacity: .5; }

.madeby{
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,0.35);
}

.madeby:hover{
  color: rgba(255,255,255,0.92);
  border-bottom-color: rgba(255,255,255,0.6);
}

.footer a{color: rgba(255,255,255,0.70);}
.footer a:hover{color: rgba(255,255,255,0.92);}

/* Keep all footer links on one line on mobile */
@media (max-width: 600px){
  .footer-links{
    gap: 6px 8px;
    font-size: 10px;
    flex-wrap: nowrap;
    padding: 10px 10px 0;
    white-space: nowrap;
  }
  .footer-inner{
    font-size: 11px;
    padding: 10px 10px;
  }
}

.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }

.small{ font-size: 12px; }
hr.sep{
  border:0;
  border-top:1px solid var(--border);
  margin: 20px 0;
}

/* =========================
   Topbar
========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(7,10,18,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

/* Keep header perfectly static between pages:
   Use a 3-column grid on desktop so the centered nav doesn't shift when items change width. */
@media (min-width: 1401px){
  .topbar{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 14px;
  }
  .topbar-left{
    justify-self: start;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }
  .topbar-left .brand-link{
    justify-self: start;
  }
  .session-counter-chip-desktop{
    justify-self: center;
    margin-left: 0;
  }
  .nav-desktop{ justify-self: center; }
  .who{ justify-self: end; }
}

/* Compact nav for medium-width screens (large laptops / small desktops) */
@media (min-width: 1401px) and (max-width: 1700px){
  .topbar{ padding: 10px 12px; column-gap: 10px; }
  .nav{ gap: 2px; }
  .nav a{ padding: 5px 6px; font-size: 12.5px; }
  .session-counter-chip-desktop{ transform: scale(0.9); }
}

/* Hamburger-bar-left: hidden on full desktop nav, visible only in hamburger mode */
.hamburger-bar-left{ display: none; }


.brand{
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Brand logo (shared header) */
.brand-link{
  display:flex;
  align-items:center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.brand-logo{
  height: 26px;
  width: auto;
  display:block;
}

.nav{
  display:flex;
  gap: 14px;
  align-items:center;
}

.nav a{
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  /* Prevent layout shift when active state adds a border */
  border: 1px solid transparent;
  box-sizing: border-box;
}

.nav a:hover{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.92);
}

.nav a.active{
  background: rgba(59,130,246,0.16);
  border-color: rgba(59,130,246,0.35);
  color: rgba(255,255,255,0.95);
  box-shadow: 0 10px 30px rgba(59,130,246,0.15);
}

.nav a.nav-cta{
  margin-right: 10px; /* separate Mentorship CTA */
  position: relative;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.98);
  /* Match funnel.html color vibe (red/purple premium glow) */
  background: radial-gradient(900px 220px at 30% 0%,
              rgba(255,59,48,0.26),
              rgba(162,48,255,0.18) 42%,
              rgba(255,255,255,0.03) 72%);
  border: 1px solid rgba(255,59,48,0.28);
  box-shadow: 0 16px 44px rgba(0,0,0,0.35), 0 0 28px rgba(255,59,48,0.12);

}

.nav a.nav-cta:hover{
  background: radial-gradient(900px 220px at 30% 0%,
              rgba(255,59,48,0.32),
              rgba(162,48,255,0.20) 42%,
              rgba(255,255,255,0.04) 72%);
  border-color: rgba(255,59,48,0.42);
}

.nav a.nav-cta::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 12px;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 26px rgba(255,59,48,0.18);
  opacity: .85;
}

.who{
  display:flex;
  gap: 8px;
  align-items:center;
}

.pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.pill.muted{ color: rgba(255,255,255,0.6); }

/* Online presence pill (header) */
.pill.online{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(32, 201, 109, 0.14);
  border: 1px solid rgba(32, 201, 109, 0.38);
  color: rgba(180, 255, 220, 0.95);
  min-width: 92px; /* prevents layout shift when counts change */
  justify-content: center;
}
.pill.online .pill-icon{ line-height: 1; }

/* Compact online pill: hide the word "online" and shrink the pill
   on screens narrower than 1700px (prevents header crowding). */
@media (max-width: 1700px){
  .pill.online{
    min-width: 0;
    padding: 5px 9px;
    gap: 6px;
    justify-content: flex-start;
  }
  .pill.online span{
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
}

/* Message log role pills */
.pill-dev {
  background: rgba(255, 59, 59, 0.18);
  border: 1px solid rgba(255, 59, 59, 0.45);
  color: rgba(255, 200, 200, 0.95);
}

.pill-louis {
  background: rgba(255, 215, 0, 0.14);
  border: 1px solid rgba(255, 215, 0, 0.45);
  color: rgba(255, 238, 160, 0.95);
}

.pill-pro {
  background: rgba(68, 138, 255, 0.18);
  border: 1px solid rgba(68, 138, 255, 0.45);
  color: rgba(200, 225, 255, 0.95);
}

.pill-posted {
  margin-right: 8px;
}

/* Admin members pills */
.pill-ok {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
}

.pill-bad {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fecaca;
}

/* Role colors */
.pill-role.role-dev {
  background: rgba(239, 68, 68, 0.20);
  border-color: rgba(239, 68, 68, 0.40);
  color: #fecaca;
}

.pill-role.role-louis {
  background: rgba(245, 158, 11, 0.20);
  border-color: rgba(245, 158, 11, 0.40);
  color: #fde68a;
}

.pill-role.role-pro,
.pill-role.role-profitable {
  background: rgba(59, 130, 246, 0.20);
  border-color: rgba(59, 130, 246, 0.40);
  color: #bfdbfe;
}

.pill-role.role-premium {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.38);
  color: #e9d5ff;
}

.pill-role.role-course {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(14, 165, 233, 0.38);
  color: #bae6fd;
}

.pill-role.role-member {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.28);
  color: #e2e8f0;
}

.pill-role.role-none {
  background: rgba(100, 116, 139, 0.14);
  border-color: rgba(100, 116, 139, 0.25);
  color: #cbd5e1;
}

.members-metrics{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}

.members-showing,
.members-total{
  display:flex;
  align-items:center;
  gap:8px;
}


.members-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.members-head-left{ min-width: 320px; flex: 1; }
.members-head-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  min-width: 180px;
}
.members-total{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:2px;
}
.filters-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.filters-label{
  font-weight:600;
  margin-right:2px;
}
.filters-spacer{
  flex: 1;
  min-width: 12px;
}




/* =========================
   Buttons / Inputs
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(47,124,255,0.25);
  border: 1px solid rgba(47,124,255,0.6);
  background: rgba(153, 0, 255, 0.06);
  color: rgba(255,255,255,0.90);
  cursor:pointer;
  transition: 0.15s ease;
}

.btn:hover{
  filter: brightness(1.5);
}

.btn.primary{
  background: rgba(59,130,246,0.18);
  border-color: rgba(59,130,246,0.35);
}
.btn.primary:hover{
  background: rgba(59,130,246,0.26);
}

.btn.danger{
  background: rgba(255,59,48,0.16);
  border-color: rgba(255,59,48,0.35);
}
.btn.danger:hover{
  background: rgba(255,59,48,0.24);
}

.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,0.10);
}

.btn.small{
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}

/* subtle edit button */
.btn-edit{
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.btn-edit:hover{
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* inputs */
input, textarea, select{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  color: rgba(255,255,255,0.92);
  outline: none;
}

/* Fix unreadable <option> text in native dropdowns */
select option{
  background: #0b1020;
  color: rgba(255,255,255,0.92);
}

input:focus, textarea:focus, select:focus{
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

textarea{ resize: vertical; }

/* =========================
   Admin Trade Forms (New/Edit)
========================= */

.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;}
.page-head h2{margin:0;font-size:22px;letter-spacing:0.2px;}

.trade-form{display:flex;flex-direction:column;gap:14px;}

.meta-grid{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:end;}
.meta-grid .meta-summary{grid-column:1 / -1;}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;color:rgba(255,255,255,0.72);font-weight:700;letter-spacing:0.2px;}

.tradeBlocks{display:flex;flex-direction:column;gap:14px;}

.trade-admin-block{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
}

.trade-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.trade-title{font-weight:800;font-size:15px;margin:0;}

.trade-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-6{grid-column:span 6;}
.span-12{grid-column:1 / -1;}

/* Generic form grid used across admin pages (incl. quizzes) */
.form-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 10px;
  align-items: end;
}
.form-grid .field{ margin: 0; }
.form-grid .field input,
.form-grid .field textarea,
.form-grid .field select{ width: 100%; }

/* Make dark-mode <select> menus readable (OS dropdowns often use white bg) */
.form-grid .field select option{ color:#111; background:#fff; }

.form-grid .field input[type="file"]{
  padding: 8px;
  height: 42px;
}
.form-grid .actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}


.btn-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.btn-row.end{ justify-content:flex-end; }

/* Small toasts (used by quiz admin ajax) */
.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transform: translateY(10px);
  opacity: 0;
  transition: 180ms ease;
}
.toast.show{ transform: translateY(0); opacity: 1; }

.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}

.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding-top:6px;}

.help{font-size:12px;color:rgba(255,255,255,0.55);margin-top:4px;}

/* FAQ answer bullet (final definition lives in the FAQ section below) */

/* Sortable vertical pills (used by FAQ + Quiz categories) */
.sortable-pills{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }

/* Mobile-friendly admin grids */
@media (max-width: 820px){
  .form-grid{ grid-template-columns: 1fr; align-items: stretch; }
  .span-2, .span-3, .span-6, .span-12{ grid-column: 1 / -1 !important; }
  .btn-row.end{ justify-content: flex-start; }
}

.media-preview{
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
}

.media-preview img{
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display:block;
}

.inline-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

@media (max-width: 900px){
  .meta-grid{grid-template-columns:1fr;}
  .trade-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .span-2,.span-3,.span-6{grid-column:span 2;}
  .notes-grid{grid-template-columns:1fr;}
}

/* =========================
   Cards / Panels
========================= */
.card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.panel{
  background: linear-gradient(
    180deg,
    rgba(20,25,40,0.92),
    rgba(12,16,28,0.92)
  );
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px 16px;
  box-shadow:
    0 14px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.panel-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}

.panel-title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.95);
}

.panel-subtitle{
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.64);
}

.panel-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* =========================
   Calendar (fixed grid)
   ========================= */

.cal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cal-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}

.cal-weekdays{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  padding: 0 2px;
}

/* Calendar with an extra weekly summary column (Mon..Fri + Week) */
.cal-weekdays .cal-week-col{ text-align:center; }

.cal-grid.cal-grid-weekly,
.cal-weekdays{
  grid-template-columns: repeat(5, 1fr) minmax(260px, 1.10fr);
}

/* Weekly summary card (the 8th column) */
.cal-week-summary{
  position: relative;
  border-radius: 16px;
  padding: 8px;
  min-height: 96px;
  background: rgba(10,14,25,0.58);
  border: 2px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 30px 120px rgba(255, 59, 48, 0.10),
    0 18px 55px rgba(0,0,0,0.45);
  overflow: hidden;
}

.cal-week-summary::before{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius: inherit;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(520px 280px at 30% 20%, rgba(255,59,48,0.20), transparent 70%),
    radial-gradient(520px 280px at 80% 85%, rgba(47,124,255,0.12), transparent 70%);
  filter: blur(18px);
  opacity: .9;
}

.cal-week-summary > *{ position: relative; z-index: 1; }

.ws-top-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.ws-top{ display:flex; flex-direction:column; gap: 3px; }
.ws-kicker{ font-weight: 950; letter-spacing: .2px; }
.ws-note{ font-size: 11px; color: rgba(255,255,255,0.68); }

.ws-count{
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.90);
}

.ws-metrics{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ws-metric{
  padding: 9px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}
.ws-label{ font-size: 11px; color: rgba(255,255,255,0.70); font-weight: 800; }
.ws-value{ margin-top: 4px; font-size: 16px; font-weight: 950; }

/* Win/Loss coloring (match your site palette: green from psychology + red from funnel) */
.cal-week-summary.ws-win{ border-color: rgba(0, 208, 132, 0.38); }
.cal-week-summary.ws-win{
  background: linear-gradient(180deg, rgba(0,208,132,0.10), rgba(10,14,25,0.58));
}
.cal-week-summary.ws-win::before{
  background:
    radial-gradient(520px 280px at 30% 20%, rgba(0,208,132,0.22), transparent 70%),
    radial-gradient(520px 280px at 80% 85%, rgba(47,124,255,0.10), transparent 70%);
}

.cal-week-summary.ws-loss{ border-color: rgba(255, 59, 48, 0.40); }
.cal-week-summary.ws-loss{
  background: linear-gradient(180deg, rgba(255,59,48,0.10), rgba(10,14,25,0.58));
}
.cal-week-summary.ws-loss::before{
  background:
    radial-gradient(520px 280px at 30% 20%, rgba(255,59,48,0.24), transparent 70%),
    radial-gradient(520px 280px at 80% 85%, rgba(47,124,255,0.10), transparent 70%);
}

.cal-week-summary.ws-flat{ border-color: rgba(255, 255, 255, 0.14); }

.cal-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* Entire cell is clickable because calendar.html uses <a class="cal-cell ..."> */
.cal-cell{
  display: block;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  min-height: 96px;
  box-shadow: var(--shadow);
}

.cal-cell:hover{
  filter: brightness(1.05);
  cursor: pointer;
}

/* Blank leading cells (not clickable) */
.cal-empty{
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

/* Border-only highlights */
.cal-has-trade{ border-color: #2f7cff; }  /* days with trades */
.cal-no-trade{ border-color: #1c2a3a; }   /* days without trades */
.cal-today{ border-color: #00d084; }      /* today */

.cal-cell-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
}

/* ==============================
   Calendar tile title
   3-line clamp (desktop + mobile)
   ============================== */

.cal-title{
  margin-top: 10px;
  font-weight: 800;
  font-size: 13px;

  /* Required for clamping */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;

  /* Standard + vendor */
  line-clamp: 3;
  -webkit-line-clamp: 3;

  /* Must match max-height math */
  line-height: 1.2;

  /* Prevent flex/grid expansion */
  min-height: 0;
}

/* Mobile tuning */
@media (max-width: 900px){
  .cal-title{
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.15;
  line-clamp: 3;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* Desktop: force overflow so clamp activates */
@media (min-width: 901px){
  .cal-title{
    max-height: calc(1.2em * 3);
  }
}


.dot{
  display:inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
}


.day-cell {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 90px;
  background: rgba(255,255,255,0.03);
  transition: transform 0.08s ease, border-color 0.12s ease;
}

.day-cell:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.20);
}

.day-cell.empty {
  background: transparent;
  border-color: transparent;
}

.day-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.day-number {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.day-sub {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.2;
}

/* Border-only states (like you wanted) */
.day-cell.has-trades {
  border-color: rgba(80, 200, 120, 0.55);
}

.day-cell.no-trades {
  border-color: rgba(255, 255, 255, 0.10);
}

.day-cell.today {
  border-color: rgba(120, 180, 255, 0.65);
}

/* Responsive */
@media (max-width: 950px) {
  .calendar-grid { grid-template-columns: repeat(7, minmax(90px, 1fr)); }
}
@media (max-width: 740px) {
  .calendar-grid { grid-template-columns: repeat(2, 1fr); }
  .calendar-dow { display: none; }
}



.day-box{
  min-height: 92px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 10px 10px;
  cursor: pointer;
  transition: 0.12s ease;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.day-box:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.03);
}

.day-num{
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
}

.day-meta{
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.25;
}

/* border colors only (as you wanted) */
.day-has-trade{ border-color: rgba(34,197,94,0.55); }
.day-no-trade{ border-color: rgba(255,255,255,0.10); }
.day-today{ border-color: rgba(59,130,246,0.75); }

/* =========================
   Trade Day Layout (3 columns)
========================= */
.day-center{
  text-align:center;
  margin: 6px 0 18px 0;
}

.day-layout{
  display:grid;
  grid-template-columns: 300px 1fr 320px;
  grid-template-areas:
    "left mid right";
  gap: 16px;
  align-items:start;
}

@media(max-width: 1060px){
  .day-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "mid"
      "right"
      "left";
  }
}

.left-col{ grid-area:left; }
.mid-col{ grid-area:mid; }
.right-col{ grid-area:right; }

.member-comments-col{
  display:none; /* no longer used — comments live inside right-col now */
}

.left-col, .mid-col, .right-col{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

/* Members comments: start scrolling after ~10 items (works on desktop + mobile) */
.member-comments-list{
  max-height: 420px; /* ~10 compact comment cards */
  overflow-y: auto;
  padding-right: 4px; /* room for scrollbar */
}

/* Let dropdown escape the scroll-box while open */
.member-comments-list:has(.comment-actions[open]){
  overflow: visible;
}

@media(max-width: 520px){
  .member-comments-list{
    max-height: 380px;
  }
}

/* =========================
   Checklist (trade page)
========================= */
.checklist-trade{
  display:flex;
  flex-direction:column;
  gap: 8px; /* slightly smaller */
  margin-top: 10px;
}

.check-row{ margin:0; }

.check-label{
  display:flex;
  align-items:center;
  gap: 10px;
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
}

.check-label input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--red);
  flex: 0 0 auto;
}

.check-text{
  font-size: 13.5px;
  line-height: 1.25;
  color: rgba(255,255,255,0.88);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* =========================
   Trades
========================= */
.trade-card{
  padding: 14px 14px;
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.badge{
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.82);
}

.trade-metrics{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 10px;
}

.img-wrap{
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.25);
}

.small-img img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================
   Comments (Pro + Members)
========================= */
.comments{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
}

.comment-card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  padding: 12px 12px;
}

.comment-head{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-bottom: 6px;
}

.comment-user{
  font-weight: 700;
  font-size: 13px;
}

.comment-time{
  margin-left: auto;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.comment-body{
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.35;
  /* Prevent long messages from breaking layout */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ----------
   Tables (admin log / members)
---------- */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* vertical breathing room between rows */
}

.table th{
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  padding: 4px 12px;
}

.table td{
  padding: 12px 12px;
}

.table tbody tr{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.table tbody tr td:first-child{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.table tbody tr td:last-child{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.msg-cell{
  text-align: left;
}

.msg-text{
  /* Wrap long tokens/urls, but avoid template whitespace creating huge blank space */
  display: inline;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  flex: 1 1 auto;
  min-width: 0;           /* allows wrapping inside flex */
}

/* Message log: keep "Deleted" badge separated from message text */
.msg-wrap{
  display: flex;
  align-items: flex-start;
  gap: 12px;              /* <- this is the spacing you want */
}

.pill-deleted{
  flex: 0 0 auto;
  margin-top: 2px;
}

/* Narrow admin panels so tables don't sprawl edge-to-edge */
.admin-narrow{
  max-width: 1200px;
  margin: 0 auto;
}


.msglog-sub{ margin-top: 6px; }
.msglog-tablewrap{ margin-top: 14px; }
.msglog-pagination{
  margin-top: 14px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pager{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.btn.disabled{ opacity: 0.45; pointer-events: none; }

/* Message log: fixed layout so long messages wrap within the message column */
.table-log{
  table-layout: fixed;
}

.table-log th,
.table-log td{
  text-align: left;
  vertical-align: middle;
}

/* Members table: center content vertically for cleaner rows */
.table-members td{
  vertical-align: middle;
}

.row-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.row-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* pro chat should scroll after ~7 messages */
.comments.compact{
  max-height: 520px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Let dropdown escape the scroll-box while open */
.comments.compact:has(.comment-actions[open]){
  overflow: visible;
}
.comments.compact::-webkit-scrollbar{ width: 10px; }
.comments.compact::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}
.comments.compact::-webkit-scrollbar-track{ background: transparent; }

/* spacing above member comments panel (legacy – comments now in right-col) */
.member-comments-spacer{
  margin-top: 5px;
}

/* Ensure comment cards have a hoverable area */
.comment-card{
  position: relative;
}

/* Discreet delete */
.comment-delete{
  position: absolute;
  top: 10px;
  right: 10px;

  padding: 4px 8px;
  border-radius: 10px;

  font-size: 12px;
  font-weight: 700;

  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);

  cursor: pointer;

  /* Hidden until hover */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* Show on hover OR when focused via keyboard */
.comment-card:hover .comment-delete,
.comment-delete:focus,
.comment-delete:focus-visible{
  opacity: 1;
  pointer-events: auto;
}

/* Make sure it's not hidden behind other elements */
.comment-delete{
  z-index: 5;
}

/* Username action dropdown */
.comment-actions{
  position: relative;
  display: inline-block;
}

.comment-actions[open]{
  z-index: 9999;
}

.comment-userlink{
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.comment-userlink::-webkit-details-marker{ display:none; }

.comment-actions-menu{
  position: absolute;
  top: 22px;
  left: 0;
  min-width: 160px;
  z-index: 9999;

  padding: 8px;
  border-radius: 12px;

  background: rgba(20,20,28,0.95);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.comment-actions-meta{
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
  word-break: break-all;
}

.comment-actions-delete{
  width: 100%;
  text-align: left;

  padding: 8px 10px;
  border-radius: 10px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);

  cursor: pointer;
}

.comment-actions-delete:hover{
  background: rgba(255,90,90,0.16);
  border-color: rgba(255,90,90,0.25);
}

/* ----------
   Reply feature
---------- */
.reply-icon{
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.comment-card:hover .reply-icon{
  opacity: 1;
  color: rgba(255,255,255,0.55);
}
.reply-icon:hover{
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.10);
}

.reply-indicator{
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  font-size: 11px;
  color: rgba(255,255,255,0.40);
  margin-top: 5px;
  padding: 2px 8px;
  border-left: 2px solid rgba(255,255,255,0.15);
  border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,0.03);
}
.reply-indicator svg{
  flex-shrink: 0;
  opacity: 0.6;
}

.reply-preview{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  color: rgba(255,255,255,0.60);
}
.reply-preview-text{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-preview-close{
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.reply-preview-close:hover{
  color: rgba(255,255,255,0.85);
}


/* =========================
   Checklist manage page
========================= */
.checklist-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 12px;
}

.checklist-manage{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.check-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.grab{
  cursor: grab;
  user-select:none;
  color: rgba(255,255,255,0.55);
}

.checklist-tip {
  margin-top: 10px;   /* increase/decrease until it’s perfect */
}

/* =========================
   Livestream admin reorder list
========================= */
.live-thumb{
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}

.live-title{
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-order{
  width: 86px;
  flex: 0 0 auto;
}

/* =========================
   Mobile enhancements (non-destructive)
========================= */

body{ overflow-x: hidden; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; }

/* Keep footer visually anchored and avoid awkward blank space */
.wrap{ padding-bottom: 18px; }
.footer{ padding-bottom: env(safe-area-inset-bottom); }

/* --- Mobile dropdown nav --- */
.nav-mobile{ display:none; position: relative; }
.nav-mobile-panel{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 200px;
  max-height: calc(100vh - 84px);
  max-height: calc(100dvh - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,59,48,0.45) transparent;
  background: rgba(10,14,26,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-panel::-webkit-scrollbar{ width: 4px; }
.nav-mobile-panel::-webkit-scrollbar-track{ background: transparent; }
.nav-mobile-panel::-webkit-scrollbar-thumb{ background: rgba(255,59,48,0.40); border-radius: 999px; }
.nav-mobile-panel::-webkit-scrollbar-thumb:hover{ background: rgba(255,59,48,0.65); }
/* Ensure the hidden attribute can actually hide the panel */
.nav-mobile-panel[hidden]{ display: none !important; }
.nav-mobile-panel a{
  display:block;
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.88);
  border: 1px solid transparent;
  box-sizing: border-box;
}
.nav-mobile-panel a.active{
  background: rgba(59,130,246,0.14);
  border-color: rgba(59,130,246,0.28);
  color: rgba(255,255,255,0.95);
}

.nav-mobile-panel a:hover{ background: rgba(255,255,255,0.06); }

/* Mobile menu: keep Mentorship looking like the main CTA */
.nav-mobile-panel a.nav-cta{
  font-weight: 900;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.98);
  background: radial-gradient(900px 220px at 30% 0%,
              rgba(255,59,48,0.26),
              rgba(162,48,255,0.18) 42%,
              rgba(255,255,255,0.03) 72%);
  border-color: rgba(255,59,48,0.28);
  box-shadow: 0 16px 44px rgba(0,0,0,0.35), 0 0 28px rgba(255,59,48,0.12);
}
.nav-mobile-panel a.nav-cta:hover{
  border-color: rgba(255,59,48,0.42);
}
.nav-mobile-panel a.nav-cta.active{
  border-color: rgba(255,59,48,0.55);
  box-shadow: 0 18px 52px rgba(0,0,0,0.40), 0 0 34px rgba(255,59,48,0.18);
}


/* Accessibility helper */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Hamburger icon */
.hamburger{
  width: 18px;
  height: 12px;
  display:inline-block;
  position: relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
}
.hamburger::before{ top:0; box-shadow: 0 5px 0 rgba(255,255,255,0.85); }
.hamburger::after{ bottom:0; }

.nav-user{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.nav-user-name{ font-weight: 800; font-size: 13px; color: rgba(255,255,255,0.92); }
.nav-user-role{ margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.62); }
.nav-divider{
  height: 1px;
  margin: 10px 6px;
  background: rgba(255,255,255,0.10);
}


/* New York session countdown (header + mobile menu) */
.topbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

@media (min-width: 1401px){
  .topbar-left{
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }
  .topbar-left .brand-link{ justify-self: start; }
  .session-counter-chip-desktop{
    justify-self: center;
    margin-left: 0;
  }
}

.session-counter-chip{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 104px;
  padding: 7px 10px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  color: rgba(255,255,255,0.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  cursor: default;
  text-align: center;
}

.session-counter-chip:focus-visible{
  outline: none;
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}

.session-counter-main{
  font-size: 12px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.session-counter-sub{
  font-size: 10px;
  line-height: 1;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.session-counter-live{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  font-size: 12px;
  line-height: 1.05;
  font-weight: 900;
  color: #69ff93;
  text-shadow: 0 0 12px rgba(34,197,94,0.35);
  white-space: nowrap;
}

.session-counter-live-dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
  animation: sessionLivePulse 1.05s ease-out infinite;
}

@keyframes sessionLivePulse{
  0%   { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  65%  { opacity: .35; box-shadow: 0 0 0 8px rgba(34,197,94,0.0); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.0); }
}

.session-counter-chip.is-live{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.08);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.12), 0 0 20px rgba(34,197,94,0.10);
}

.session-counter-chip.is-live .session-counter-main,
.session-counter-chip.is-live .session-counter-sub{
  display:none;
}

.session-counter-chip.is-live .session-counter-live{
  display:inline-flex;
}

.session-counter-chip .session-counter-live[hidden]{
  display:none !important;
}

.session-counter-tooltip{
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(7,10,18,0.98);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  z-index: 80;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
  pointer-events: none;
}

.session-counter-tooltip::before{
  content:"";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(7,10,18,0.98);
  border-left: 1px solid rgba(255,255,255,0.12);
  border-top: 1px solid rgba(255,255,255,0.12);
}

.session-counter-chip[data-tooltip-position="top"] .session-counter-tooltip{
  top: auto;
  bottom: calc(100% + 8px);
}

.session-counter-chip[data-tooltip-position="top"] .session-counter-tooltip::before{
  top: auto;
  bottom: -6px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

@media (hover: hover) and (pointer: fine){
  .session-counter-chip.session-counter-chip-desktop:hover .session-counter-tooltip,
  .session-counter-chip.session-counter-chip-desktop:focus-visible .session-counter-tooltip{
    display:block !important;
  }
}

.session-counter-chip.is-tip-open .session-counter-tooltip{
  display:block !important;
}

.session-counter-chip-mobile{
  width: calc(100% - 12px);
  margin: 0 6px;
  min-width: 0;
  padding: 10px 12px;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
}

.session-counter-chip-mobile .session-counter-main,
.session-counter-chip-mobile .session-counter-live{
  font-size: 14px;
}

.session-counter-chip-mobile .session-counter-sub{
  font-size: 10px;
}

.session-counter-chip-mobile .session-counter-live{
  justify-content: flex-start;
}

.session-counter-chip-mobile .session-counter-tooltip{
  left: 12px;
  right: 12px;
  width: auto;
  transform: none;
  top: calc(100% + 6px);
}

.session-counter-chip-mobile .session-counter-tooltip::before{
  left: 20px;
  transform: rotate(45deg);
}

@media (max-width: 1400px){
  .nav-desktop{ display:none; }
  .nav-mobile{ display:flex; align-items: center; gap: 10px; }

  /* Hamburger header: single-row flex
     [hamburger-bar-left] [—logo centered—] [who] [hamburger] */
  .topbar{
    padding: 8px 14px;
    gap: 10px;
  }
  .hamburger-bar-left{
    display: flex;
    align-items: center;
    gap: 8px;
    order: -1;
  }
  .topbar-left{
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    order: 0;
  }
  .brand{
    justify-self: center;
    text-align: center;
  }
  .session-counter-chip-desktop{
    display:none;
  }
  .who{
    display:flex;
    align-items: center;
    margin-top: 0;
    gap: 8px;
    order: 1;
  }
  .who .pill:not(.online){
    display:none;
  }
  .nav-mobile{
    order: 2;
  }
}

/* Hamburger-bar Mentorship CTA (compact version for header bar) */
.nav-cta-compact{
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.98);
  text-decoration: none;
  white-space: nowrap;
  background: radial-gradient(600px 160px at 30% 0%,
              rgba(255,59,48,0.26),
              rgba(162,48,255,0.18) 42%,
              rgba(255,255,255,0.03) 72%);
  border: 1px solid rgba(255,59,48,0.28);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 0 20px rgba(255,59,48,0.10);
}
.nav-cta-compact:hover{
  border-color: rgba(255,59,48,0.42);
  background: radial-gradient(600px 160px at 30% 0%,
              rgba(255,59,48,0.32),
              rgba(162,48,255,0.22) 42%,
              rgba(255,255,255,0.04) 72%);
}
.nav-cta-compact.active{
  border-color: rgba(255,59,48,0.55);
  box-shadow: 0 12px 36px rgba(0,0,0,0.30), 0 0 24px rgba(255,59,48,0.15);
}

/* Session counter chip in hamburger bar */
.session-counter-chip-hamburger{
  display: none;
  transform: scale(0.85);
}
@media (min-width: 1000px) and (max-width: 1400px){
  .session-counter-chip-hamburger{
    display: inline-flex;
  }
}

/* On small screens (<1000px) hide the hamburger-bar-left entirely
   and fall back to mobile layout: [who] [—logo—] [hamburger] */
@media (max-width: 999px){
  .hamburger-bar-left{ display: none !important; }
  .topbar{
    padding: 10px 16px;
  }
  .who{
    order: -1;
    flex-shrink: 0;
  }
  .who .pill:not(.online){
    display: none;
  }
  .topbar-left{
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    order: 0;
  }
  .nav-mobile{
    order: 1;
    flex-shrink: 0;
  }
}

/* --- Calendar: desktop uses a true grid; mobile switches to a clean stacked layout --- */
.cal-scroll{ overflow-x: visible; }
.cal-desktop{ display:block; }
.cal-mobile{ display:none; }

@media (max-width: 740px){
  .cal-header{ flex-direction: column; align-items: stretch; }
  .cal-header h2{ margin-bottom: 6px; }

  .cal-actions{ width: 100%; justify-content: space-between; gap: 8px; }
  .cal-actions .btn{ flex: 1 1 0; justify-content:center; padding: 9px 10px; }

  /* Swap to mobile layout */
  .cal-desktop{ display:none; }
  .cal-mobile{ display:block; }

  .cal-m-week{ margin: 0 0 14px; }
  .cal-week-summary-mobile{ margin-bottom: 10px; }

  .cal-week-summary{ padding: 12px; border-radius: 16px; }
  .ws-top-row{ align-items: center; }
  .ws-kicker{ font-size: 14px; }
  .ws-note{ font-size: 11px; }
  .ws-count{ padding: 6px 10px; font-size: 11px; }
  .ws-metrics{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .ws-metric{ padding: 10px; }
  .ws-value{ font-size: 16px; }

  .cal-m-days{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cal-m-day{
    display:block;
    background: var(--panel);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    min-height: 96px;
    box-shadow: var(--shadow);
    text-decoration:none;
    color: inherit;
  }

  /* Mobile: make "days with trades" visibly glow like desktop (no hover on touch). */
  .cal-m-day.cal-has-trade{
    border-color: #2f7cff;
    box-shadow: var(--shadow), 0 0 0 1px rgba(47,124,255,0.40), 0 0 18px rgba(47,124,255,0.22);
  }
  .cal-m-day.cal-today{
    border-color: #00d084;
    box-shadow: var(--shadow), 0 0 0 1px rgba(0,208,132,0.40), 0 0 18px rgba(0,208,132,0.18);
  }

  /* Tap feedback (works on mobile): slightly lift + brighten, without affecting layout */
  .cal-m-day:active,
  .cal-m-day:focus{
    filter: brightness(1.06);
    transform: translateY(-1px);
  }
  .cal-m-empty{ background: transparent; border: none; box-shadow: none; pointer-events:none; }
  .cal-m-top{ display:flex; align-items:center; justify-content: space-between; }
  .cal-m-date{ font-weight: 900; font-size: 14px; }
  .cal-m-muted{ margin-top: 8px; font-size: 12px; color: rgba(255,255,255,0.65); }
  .cal-m-title{ margin-top: 8px; font-weight: 900; font-size: 12px; line-height: 1.2; }
}


/* --- Admin Message Log: make rows readable on mobile --- */
@media (max-width: 740px){
  .table-log thead{ display:none; }
  .table-log, .table-log tbody, .table-log tr{ display:block; width:100%; }
  .table-log tr{
    margin: 0 0 12px 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    padding: 10px 10px;
  }
  .table-log td{
    display:flex;
    gap: 10px;
    padding: 8px 6px;
    border: none;
    align-items: flex-start;
    white-space: normal !important;
  }
  .table-log td::before{
    flex: 0 0 92px;
    font-weight: 800;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 1.2;
    content: "";
  }
  .table-log td:nth-child(1)::before{ content:"When"; }
  .table-log td:nth-child(2)::before{ content:"User"; }
  .table-log td:nth-child(3)::before{ content:"Type"; }
  .table-log td:nth-child(4)::before{ content:"Trade Day"; }
  .table-log td:nth-child(5)::before{ content:"IP"; }
  .table-log td:nth-child(6)::before{ content:"Message"; }
  .table-log td:nth-child(7)::before{ content:"Deleted"; }

  .table-log .msg-wrap{ display:flex; flex-direction: column; gap: 8px; }
  .table-log .msg-text{ white-space: pre-wrap; word-break: break-word; }
}

/* =======================================================
   Unified scrollbar styling (Pro Chat + Members Comments)
   Apply to the ACTUAL scrolling element via .scrollbox
   ======================================================= */

.scrollbox {
  overflow-y: auto;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #FF3B30 rgba(255,255,255,0.08);
}

/* Chrome / Edge / Safari (desktop + Android) */
.scrollbox::-webkit-scrollbar {
  width: 10px;              /* match thickness */
}

.scrollbox::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}

.scrollbox::-webkit-scrollbar-thumb {
  background: #2f6bff;
  border-radius: 999px;

  /* makes it look like your pro chat scrollbar (thumb not too skinny) */
  border: 3px solid rgba(10,14,25,0.85);
}

.scrollbox::-webkit-scrollbar-thumb:hover {
  background: #4a7dff;
}
/* Height rules for scroll areas */
.comments.compact.scrollbox {
  max-height: 400px;   /* pro chat: start scrolling after ~5 messages */
}
.comments.compact.scrollbox:has(.comment-actions[open]){
  overflow: visible;
}

.member-comments-list.scrollbox {
  max-height: 420px;   /* members comments after 10 */
}
.member-comments-list.scrollbox:has(.comment-actions[open]){
  overflow: visible;
}

/* =========================================================
   Desktop: bottom Members Comments should NOT be pinned to mid column
   Force it to span the entire grid row, then center the panel
   ========================================================= */
/* member-comments-col no longer used — comments moved into right-col */

/* =========================================================
   FINAL FUNNEL SECTION (CTA RED + CLEAN RIGHT CARD)
   CTA COLOR: #FF3B30
   ========================================================= */

:root{
  --cta-red: #FF3B30;
  --cta-red-soft: rgba(255,59,48,0.16);
  --cta-red-glow: rgba(255,59,48,0.55);
}

.funnel-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 18px 90px;
}

.funnel-hero{
  text-align: center;
  margin-bottom: 20px;
}

.fancy-hero{
  position: relative;
  padding: 26px 18px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.10);
  overflow: hidden;
}

.fancy-hero::before{
  content:"";
  position:absolute;
  inset:-90px -50px -40px -50px;
  background:
    radial-gradient(820px 320px at 50% 0%, rgba(255,59,48,0.36), transparent 66%),
    radial-gradient(520px 260px at 15% 40%, rgba(255,120,110,0.14), transparent 70%),
    radial-gradient(520px 260px at 85% 40%, rgba(255,120,110,0.12), transparent 70%);
  pointer-events:none;
  z-index:0;
}

.fancy-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(10,14,25,0.10), rgba(10,14,25,0.62));
  pointer-events:none;
  z-index:0;
}

.fancy-hero > *{
  position: relative;
  z-index: 1;
}

.funnel-badge{
  display:inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.90);
}

.funnel-title{
  margin: 14px 0 8px;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.funnel-subtitle{
  max-width: 820px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}

.hero-proof-row{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.hero-proof{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.90);
  box-shadow: 0 14px 36px rgba(0,0,0,0.30);
}

.funnel-card{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,25,0.65);
  box-shadow: 0 40px 160px rgba(0,0,0,0.50);
  overflow: hidden;
}

.funnel-grid{
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 22px;
}

.funnel-left, .funnel-right{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22);
  padding: 18px;
}

.funnel-left h3, .funnel-right h3{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 900;
}

.funnel-list{
  margin: 0;
  padding-left: 18px;
}

.funnel-list li{
  margin: 10px 0;
  line-height: 1.45;
  color: rgba(255,255,255,0.84);
}

.funnel-proof{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.proof-pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.78);
}

/* CENTER */
.funnel-center{
  display:flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Funnel VIDEO */
.video-shell{
  position: relative;
  padding-top: 56.25%;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,59,48,0.42);
  background: rgba(0,0,0,0.25);
  box-shadow: 0 35px 140px rgba(255,59,48,0.20);
}

/* IMPORTANT: do NOT use .video-embed here (it is used as a container on livestream pages) */
.video-shell .funnel-iframe{
  position:absolute;
  inset:0;
  z-index: 0;
  width:100%;
  height:100%;
  border:0;
}

/* Funnel video poster (shows YouTube thumbnail until click) */
.video-poster{
  position:absolute;
  inset:0;
  z-index: 1;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  cursor:pointer;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* subtle dark overlay so play icon reads */
.video-poster::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events: none;
  z-index: 0;
  background: rgba(0,0,0,0.28);
}

/* play button */
.video-play{
  position:absolute;
  z-index: 2;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.40);
}

.video-play::before{
  content:"";
  position:absolute;
  left: 52%;
  top: 50%;
  transform: translate(-45%, -50%);
  width: 0;
  height: 0;
  border-left: 18px solid rgba(255,255,255,0.92);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/* When activated, hide poster */
.video-shell.is-playing .video-poster{
  display:none;
}


/* CTA (moved down further) */
.cta-row{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 22px;  /* pushes CTA lower */
}

/* Subtle red divider below CTA block */
.cta-divider{
  height: 1px;
  width: 100%;
  margin: 10px 0 2px;
  background: linear-gradient(90deg, transparent, rgba(255,59,48,0.30), transparent);
  opacity: 0.9;
}

/* CTA Button – fancy + glow + float */
.cta-btn{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 100%;
  max-width: 520px;
  padding: 16px 18px;
  border-radius: 16px;
  text-decoration:none;
  font-weight: 950;
  font-size: 16px;
  letter-spacing: 0.3px;

  color: #fff;
  background: linear-gradient(180deg, #FF5A50, #FF3B30);
  border: 1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 0 0 1px rgba(255,59,48,0.35),
    0 22px 80px rgba(255,59,48,0.45),
    0 10px 30px rgba(0,0,0,0.45);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;

  animation: ctaFloat 3.2s ease-in-out infinite;
  will-change: transform;
}

.cta-btn::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, var(--cta-red-glow), transparent 70%);
  opacity: 0.8;
  z-index:-1;
  animation: ctaPulse 2.8s infinite ease-in-out;
}

@keyframes ctaPulse{
  0%{ opacity: 0.35; }
  50%{ opacity: 0.85; }
  100%{ opacity: 0.35; }
}

@keyframes ctaFloat{
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0px); }
}

.cta-btn:hover{
  animation-play-state: paused;
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow:
    0 0 0 1px rgba(255,59,48,0.50),
    0 28px 95px rgba(255,59,48,0.60),
    0 14px 40px rgba(0,0,0,0.50);
}

.cta-btn:active{
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(255,59,48,0.40),
    0 18px 55px rgba(255,59,48,0.40),
    0 8px 22px rgba(0,0,0,0.45);
}

.cta-sub{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

/* Micro proof under CTA */
.micro-proof{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding-top: 6px;
}

.micro-proof-item{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
}

/* Steps (right) */
.steps{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.step{
  display:grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.step-num{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
}

.step-title{
  font-weight: 950;
  margin-bottom: 3px;
}

.step-text{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
}

/* Who this is for (clean card) */
.who-card{
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
}

.who-title{
  font-weight: 950;
  margin-bottom: 6px;
}

.who-text{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}

.who-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.who-tag{
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.76);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

/* MOBILE */
@media (max-width: 900px){
  .funnel-wrap{ padding: 22px 14px 70px; }
  .funnel-title{ font-size: 32px; }
  .funnel-grid{ grid-template-columns: 1fr; }
  .cta-btn{ max-width: 100%; }
}

/* Pull funnel closer to header (funnel page only) */
.funnel-top-tight{
  padding-top: 10px;     /* was ~40px */
  margin-top: -10px;     /* pulls it up under the header */
}

/* =========================
   FUNNEL (RED/BLACK BORDER)
   ========================= */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.funnel-page{
  /* position: relative; */
  /* Let the page size naturally inside .wrap.
  This prevents a tiny overflow that can create a scrollbar on funnel.html only. */
  min-height: auto;
  padding: 0px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

/* Full-page animated glow (behind everything) */
.funnel-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(255,59,48,.35), transparent 60%),
    radial-gradient(700px 420px at 20% 80%, rgba(255,59,48,.18), transparent 60%),
    radial-gradient(700px 420px at 85% 85%, rgba(255,59,48,.14), transparent 60%),
    radial-gradient(900px 600px at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.85));
  filter: blur(0px);
  animation: funnelGlowShift 10s ease-in-out infinite alternate;
}

@keyframes funnelGlowShift{
  from { transform: translate3d(0,0,0) scale(1); opacity: .95; }
  to   { transform: translate3d(0,-6px,0) scale(1.02); opacity: 1; }
}

/* ONE unified shell that holds BOTH hero + main */
.funnel-shell{
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  border-radius: 23px;
  padding: 0px;
  /* The trick: transparent border + two backgrounds (inner + animated border) */
  border: 3px solid transparent;
  background:
    linear-gradient(rgba(9,12,18,.72), rgba(9,12,18,.72)) padding-box,
    conic-gradient(from var(--angle),
      rgba(162, 48, 255, 0.25),
      rgba(255,59,48,.25),
      rgba(0,0,0,1),
      rgba(255,59,48,.1),
      rgba(255,59,48,0.25)
    ) border-box;
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  animation: funnelSpin 5s linear infinite;
}

/* outer glow halo (like your example’s ::before blur) */
.funnel-shell::before{
  content:"";
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  z-index: -1;
  background: conic-gradient(from var(--angle),
    rgba(255,59,48,.85),
    rgba(0,0,0,1),
    rgba(255,59,48,.85)
  );
  filter: blur(18px);
  opacity: .35;
  animation: funnelSpin 3.2s linear infinite;
}

/* Smooth angle rotation */
@keyframes funnelSpin{
  from{ --angle: 0deg; }
  to  { --angle: 360deg; }
}

/* HERO */
.funnel-hero{
  border-radius: 20px;
  padding: 24px 22px 14px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,59,48,.10), rgba(0,0,0,0));
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}

.funnel-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.funnel-title{
  margin: 16px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.2;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 8px 22px rgba(0,0,0,.55);
}

.hero-pill-row{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.hero-pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

/* MAIN CARD */
.funnel-card{
  margin-top: 8px;
  border-radius: 20px;
  padding: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}

.funnel-grid{
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* PANELS */
.funnel-left,
.funnel-center,
.funnel-right{
  border-radius: 16px;
  background: rgba(6,8,12,.55);
  border: 1px solid rgba(255,255,255,.08);
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}

.funnel-left h3,
.funnel-right h3{
  margin: 0 0 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.funnel-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.35;
}

.funnel-proof{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.proof-pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
}

/* CTA */
.cta-row{
  margin-top: 8px;
  text-align: center;
}

.cta-btn{
  display: inline-block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  background: #FF3B30;
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow:
    0 14px 35px rgba(255,59,48,.35),
    0 0 0 1px rgba(255,255,255,.14) inset;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  animation: ctaPulse 2.2s ease-in-out infinite;
}

@keyframes ctaPulse{
  0%,100%{ filter: brightness(1); transform: translateY(0); }
  50%{ filter: brightness(1.08); transform: translateY(-2px); }
}

.cta-btn:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 50px rgba(255,59,48,.45),
    0 0 18px rgba(255,59,48,.35),
    0 0 0 1px rgba(255,255,255,.20) inset;
}

.cta-sub{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
}

/* STEPS */
.steps{
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.step{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.step-num{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  background: rgba(255,59,48,.22);
  border: 1px solid rgba(255,59,48,.35);
}

.step-title{
  font-weight: 800;
  color: #fff;
  font-size: 13px;
}

.step-text{
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.35;
}

/* WHO CARD */
.who-card{
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.08);
}

.who-title{
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
  font-size: 13px;
}

.who-text{
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.35;
}

/* RESPONSIVE */
@media (max-width: 980px){
  .funnel-grid{ grid-template-columns: 1fr; }

  /* ── Mobile funnel background fix ──
     The body has a blue gradient bg.  On desktop the .funnel-bg (position:fixed)
     covers it, but on mobile we can't rely on that stacking reliably.
     Solution: hide funnel-bg, and put the background on funnel-page itself
     which is inside .wrap but stretches full-width via negative margins. */
  .funnel-page{
    position: relative;
    /* stretch past .wrap padding to cover body edges on all 4 sides */
    margin: -24px -18px -24px -18px;
    padding: 24px 18px 24px 18px;
    background:
      radial-gradient(600px 400px at 50% 80px, rgba(255,59,48,.32), transparent 70%),
      #000;
  }

  /* Hide the fixed-position bg overlay — funnel-page now owns the background */
  .funnel-bg{ display: none !important; }

  /* Kill heavy animations on mobile (prevents scroll lag) */
  .cta-btn{ animation: none; }

  /* Remove the dark shell box + animated border on mobile */
  .funnel-shell{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: none;
  }
  .funnel-shell::before{ display: none !important; }

  /* Remove card wrapper border on mobile (keep padding) */
  .funnel-card{
    padding: 0;
    background: transparent;
    border: none;
  }

  /* Make panels same width as hero — remove inner padding/border mismatch */
  .funnel-grid{
    gap: 12px;
  }
  .funnel-left,
  .funnel-center,
  .funnel-right{
    padding: 14px;
    border-radius: 14px;
  }

  /* Force all 4 hero pills onto 2 rows of 2 */
  .hero-pill-row{
    justify-content: center;
  }
  .hero-pill{
    white-space: nowrap;
  }

  /* Smaller title — fits in 2 lines on mobile */
  .funnel-title{ font-size: 24px; }

  /* Video block first after hero */
  .funnel-center{ order: -1; }

  /* Hide proof pills on mobile */
  .funnel-proof{ display: none; }
}

/* =====================================================================
   LOGIN PAGE — Funnel-style shell + panels (matches funnel.html vibe)
   Delete everything from: "/* ===== Login page centering + polish ===== */

/* Required for conic gradient angle animation (same idea as funnel) */
@property --angle{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Page wrapper */
.login-shell{
  position: relative;
  min-height: calc(100vh - 64px);
  padding: 10px 18px 70px; /* smaller top gap (closer to top like funnel) */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

/* ============ Background glow (like .funnel-bg) ============ */
/* Keep it simple + consistent. No seam issues because it’s one fixed layer. */
body.is-login{
  background: #050712;
}

body.is-login::before,
body.is-login::after{
  content: none !important;
}

body.is-login .login-shell::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(900px 520px at 50% 16%, rgba(120, 90, 255, .28), transparent 60%),
    radial-gradient(700px 420px at 18% 85%, rgba(90, 160, 255, .18), transparent 60%),
    radial-gradient(700px 420px at 85% 82%, rgba(70, 255, 210, .10), transparent 60%),
    radial-gradient(900px 600px at 50% 50%, rgba(0,0,0,.55), rgba(0,0,0,.88));

  animation: loginGlowShift 10s ease-in-out infinite alternate;
}

@keyframes loginGlowShift{
  from { transform: translate3d(0,0,0) scale(1); opacity: .95; }
  to   { transform: translate3d(0,-6px,0) scale(1.02); opacity: 1; }
}

/* ============ Unified shell (like .funnel-shell) ============ */
.login-wrap{
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  border-radius: 23px;
  padding: 0;
  border: 3px solid transparent;

  /* Inner fill + animated border (same technique as funnel) */
  background:
    linear-gradient(rgba(9,12,18,.72), rgba(9,12,18,.72)) padding-box,
    conic-gradient(from var(--angle),
      rgba(120, 90, 255, 0.22),
      rgba(90, 160, 255, 0.22),
      rgba(0,0,0, 1),
      rgba(70, 255, 210, 0.10),
      rgba(120, 90, 255, 0.22)
    ) border-box;

  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;

  animation: loginShellSpin 6s linear infinite;
}

/* Outer halo (like funnel-shell::before) */
.login-wrap::before{
  content:"";
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  z-index: -1;

  background: conic-gradient(from var(--angle),
    rgba(120, 90, 255, .85),
    rgba(0,0,0, 1),
    rgba(90, 160, 255, .85)
  );

  filter: blur(18px);
  opacity: .28;
  animation: loginShellSpin 3.4s linear infinite;
}

@keyframes loginShellSpin{
  from{ --angle: 0deg; }
  to  { --angle: 360deg; }
}

/* ============ Grid (same structure you already use) ============ */
.login-grid{
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: stretch;
  padding: 16px; /* matches funnel-card spacing */
}

/* Mobile */
@media (max-width: 980px){
  .login-grid{
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

/* ============ Panels (match funnel-left/center/right) ============ */
body.is-login .login-card,
body.is-login .info-card{
  border-radius: 16px;
  background: rgba(6,8,12,.55);
  border: 1px solid rgba(255,255,255,.08);
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}

/* Headline area */
.brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}

.brand-badge{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .02em;

  background: rgba(90,140,255,0.16);
  border: 1px solid rgba(110,170,255,0.28);
  box-shadow:
    0 0 0 6px rgba(110,170,255,0.08),
    0 10px 28px rgba(0,0,0,0.35);
}

.brand-title{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.1;
  color: #fff;
}

.brand-sub{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  margin-top: 2px;
}

/* Typography */
.login-h1{
  margin: 20px 0 10px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 8px 22px rgba(0,0,0,.55);
}

.login-lead{
  color: rgba(255,255,255,.78);
  margin: 0 0 12px;
  max-width: 62ch;
}

/* Chips (like hero-pill/proof-pill) */
.login-chips{
  display:flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}

@media (max-width: 640px) { .login-chips { display: none !important; } }

.chip{
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}

/* ============ Buttons (match funnel CTA “clean premium”, not annoying) ============ */
/* login only: prevent global hover filters messing with icons */
body.is-login .btn:hover{ filter: none !important; }

.login-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}

/* Base button */
.btn.wide{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: .2px;

  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

/* Smooth press */
.btn.wide:active{
  transform: translateY(1px);
}

/* Icon alignment (simple + consistent) */
.btn-ico{
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .95;
}
.btn-ico svg{
  width: 18px;
  height: 18px;
  display:block;
}

/* Primary = main CTA style, like funnel cta-btn but blue */
.btn.wide.primary{
  background: rgba(90,140,255,0.22);
  border: 1px solid rgba(110,170,255,0.35);
  color: #fff;
  box-shadow:
    0 14px 35px rgba(90,140,255,.20),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

.btn.wide.primary:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 42px rgba(90,140,255,.26),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

/* Ghost */
.btn.wide.ghost{
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  box-shadow:
    0 14px 35px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.btn.wide.ghost:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.36);
}

/* Premium */
.btn.wide.premium{
  background: rgba(140,110,255,0.18);
  border: 1px solid rgba(190,160,255,0.30);
  color: #fff;
  box-shadow:
    0 14px 35px rgba(140,110,255,.18),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

.btn.wide.premium:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 42px rgba(140,110,255,.22),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

.btn.wide:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(90,140,255,0.22),
    0 14px 35px rgba(0,0,0,.42);
}

/* Fineprint */
.login-fineprint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.56);
}

/* ============ Mini value rows (match funnel panel vibe) ============ */
.mini-value{
  margin-top: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.mini-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 5px;
  flex: 0 0 10px;
}
.dot-blue{ background: rgba(110,170,255,0.95); }
.dot-green{ background: rgba(95,255,210,0.85); }
.dot-purple{ background: rgba(170,140,255,0.85); }

.mini-title{
  font-weight: 900;
  font-size: 13px;
  color: #fff;
}
.mini-sub{
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  margin-top: 2px;
}

/* ============ Right panel (steps/unlocks match funnel step style) ============ */
.info-h2{
  margin: 2px 0 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.step{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

.step-num{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 26px;
}

.step-title{
  font-weight: 900;
  font-size: 13px;
  color: #fff;
}
.step-sub{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  margin-top: 2px;
}

.divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 10px 0 12px;
}

.unlock-row{
  min-height: 50px;  
  display:flex;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 10px;
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.10);
  white-space: nowrap;
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
}

.unlock-text{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  line-height: 1.3;
}

/* Mentorship highlight (subtle, consistent with theme) */
.mentorship-row{
  border-color: rgba(190,160,255,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}
.mentorship-pill{
  background: rgba(140,110,255,0.12);
  border: 1px solid rgba(190,160,255,0.22);
}

.help{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

/* ============ Bottom feature cards (simple + consistent) ============ */
.features-row{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 0 16px 16px; /* sits inside unified shell, like funnel main */
}

@media (max-width: 1100px){
  .features-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px){
  .features-row{
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }
}

.feature-card{
  border-radius: 16px;
  background: rgba(6,8,12,.55);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset;
}

.feature-title{
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
}
.feature-sub{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  body.is-login .login-shell::before,
  .login-wrap,
  .login-wrap::before{
    animation: none !important;
  }
  .btn.wide{
    transition: none !important;
  }
}

/* ==========================
   Join Discord modal (login)
   ========================== */

.jd-noScroll{
  overflow-y: scroll; /* keep scrollbar gutter visible when modal opens */
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.jd-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.jd-modal[aria-hidden="false"]{ display:block; }

.jd-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
}

.jd-card{
  position: relative;
  width: min(520px, calc(100vw - 28px));
  margin: 10vh auto 0;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(9,12,18,0.92);
  box-shadow: 0 28px 90px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
}

.jd-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 10px;
}

.jd-title{
  font-weight: 900;
  font-size: 16px;
  color: #fff;
}

.jd-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  line-height: 1.35;
}

.jd-x{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.jd-form{ padding: 6px; }

.jd-label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  margin: 8px 0 6px;
}

.jd-inputRow{
  display:flex;
  gap: 10px;
}

.jd-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  outline: none;
}

.jd-input:focus{
  border-color: rgba(110,170,255,0.35);
  box-shadow: 0 0 0 3px rgba(90,140,255,0.18);
}

.jd-consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

.jd-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
}

.jd-btn{
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.jd-btn:active{ transform: translateY(1px); }

.jd-btn-primary{
  background: rgba(90,140,255,0.22);
  border-color: rgba(110,170,255,0.35);
  box-shadow: 0 14px 35px rgba(90,140,255,.18);
}

.jd-btn-primary:hover{
  box-shadow: 0 16px 42px rgba(90,140,255,.24);
}

.jd-btn-ghost{
  background: rgba(0,0,0,0.30);
}

.jd-msg{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  min-height: 16px;
}

.jd-joinLink{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  background: rgba(140,110,255,0.18);
  border: 1px solid rgba(190,160,255,0.30);
  color: #fff;
}







/* ============================
   Daily Bias Voting Module
   ============================ */
.bias-panel {
  position: relative;
  /* Allow button micro-animations without clipping */
  overflow: visible;
  border: 1px solid rgba(120, 140, 255, 0.22);
}

.bias-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 240px at 18% 10%, rgba(90, 140, 255, 0.18), transparent 60%),
              radial-gradient(600px 200px at 88% 88%, rgba(255, 90, 160, 0.16), transparent 60%);
  filter: blur(0px);
  pointer-events: none;
  border-radius: 18px;
}

.bias-panel .panel-titlebar {
  position: relative;
  z-index: 1;
}

.bias-body {
  position: relative;
  z-index: 1;
}

.bias-buttons {
  display: grid;
  /* minmax(0,1fr) prevents content from forcing overflow/clipping */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.bias-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  user-select: none;
  min-width: 0;
}

/* Voting page header */
.bias-page-head{
  max-width: 860px;
  margin: 6px auto 14px;
  text-align: center;
}
.bias-page-title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.bias-page-sub{
  margin-top: 6px;
}

.bias-titlewrap{ max-width: 560px; }
.bias-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.bias-page .panel-titlebar{
  align-items: flex-start;
}

@media (max-width: 900px) {
  .bias-page-head{ text-align: left; padding: 0 2px; }
  .bias-page .panel-titlebar{ flex-direction: column; align-items: stretch; }
  .bias-actions{ justify-content: flex-end; }
}

.bias-btn .bias-emoji { font-size: 18px; }
.bias-btn .bias-label { font-weight: 800; letter-spacing: 0.2px; }
.bias-btn .bias-count {
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
}

.bias-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}

.bias-btn:active { transform: translateY(0px) scale(0.99); }

.bias-btn.bullish {
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.bias-btn.bearish {
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.bias-btn.neutral {
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.bias-btn.selected {
  border-color: rgba(120, 220, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(120, 220, 255, 0.20), 0 10px 26px rgba(0,0,0,0.35);
}

.bias-btn.selected::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(90, 160, 255, 0.16), rgba(255, 90, 160, 0.10));
  pointer-events: none;
}

.bias-btn.punch {
  animation: biasPunch 220ms ease-out;
}

/* Disabled state (during request) */
.bias-btn:disabled {
  cursor: default;
  opacity: 0.65;
  pointer-events: none;
}

@keyframes biasPunch {
  0% { transform: translateY(-1px) scale(1); }
  50% { transform: translateY(-1px) scale(1.02); }
  100% { transform: translateY(-1px) scale(1); }
}

.bias-meter {
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0,0,0,0.28);
  display: flex;
}

.bias-meter-fill {
  height: 100%;
  transition: width 200ms ease;
}

.bias-meter-fill.bullish {
  background: linear-gradient(90deg, rgba(90, 160, 255, 0.85), rgba(90, 220, 255, 0.85));
}

.bias-meter-fill.bearish {
  background: linear-gradient(90deg, rgba(255, 90, 160, 0.80), rgba(255, 150, 110, 0.80));
}

.bias-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bias-footer-note {
  margin-top: 10px;
}

.bias-share.flash {
  filter: brightness(1.2);
}

.cap { text-transform: capitalize; }

@media (max-width: 900px) {
  .bias-buttons { grid-template-columns: 1fr; }
}



/* Works even if the HTML doesn't wrap label in .bias-left */
.bias-panel .bias-actions .bias-btn,
.bias-panel .bias-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center label */
  gap: 10px;
  padding-right: 44px; /* reserve space for count bubble */
  overflow: hidden; /* keep glow inside */
}

.bias-panel .bias-btn .bias-count,
.bias-panel .bias-actions .bias-btn .bias-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  pointer-events: none; /* clicking still hits the button */
}

/* If your buttons are in a 2-col row, ensure they don't clip the count bubble */
.bias-panel .bias-actions {
  overflow: visible;
}


/* Works even if the HTML doesn't wrap label in .bias-left */
.bias-panel:not(.bias-page) .bias-actions .bias-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center label */
  gap: 10px;
  overflow: hidden; /* keep glow inside */
}

.bias-panel:not(.bias-page) .bias-actions .bias-btn .bias-count {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  pointer-events: none; /* clicking still hits the button */
}


/* Keeps the day-page widget consistent (stacked buttons like your mobile view). */
.bias-panel:not(.bias-page) .bias-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bias-panel:not(.bias-page) .bias-actions .bias-btn {
  width: 100%;
  justify-content: center;
  padding-right: 44px; /* space for count bubble */
}

.bias-panel:not(.bias-page) .bias-actions .bias-btn .bias-count {
  right: 12px;
}

/* === Bias widget (trade_day): stack buttons vertically + keep counts inside === */
/* vote_day.html uses .bias-panel.bias-page, so these apply ONLY to the small widget on trade_day.html */
.bias-panel:not(.bias-page) .bias-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Button layout: centered label, count pinned right */
.bias-panel:not(.bias-page) .bias-btn {
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-right: 44px; /* reserve space for count bubble */
  overflow: hidden;    /* keep hover glow inside */
}

.bias-panel:not(.bias-page) .bias-btn .bias-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  pointer-events: none; /* click still hits button */
}




/* =========================================
   Louis Bias dial (per-day slider)
   ========================================= */
.louis-bias-panel {
  position: relative;
  overflow: hidden;
}

.louis-bias-panel::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background:
    radial-gradient(650px 260px at 20% 20%, rgba(255, 81, 171, 0.22), transparent 60%),
    radial-gradient(520px 220px at 80% 85%, rgba(255, 196, 85, 0.16), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.9;
}

.louis-bias-panel .panel-titlebar,
.louis-bias-panel .louis-bias-body {
  position: relative;
  z-index: 2;
}

.louis-bias-lock {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.22),
    0 0 26px rgba(255, 81, 171, 0.12);
}

.louis-bias-scale {
  display: flex;
  justify-content: space-between;
  margin: 12px 2px 8px;
}

.louis-bias-slider {
  position: relative;
  height: 44px;
  margin-top: 2px;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.louis-bias-track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 18px rgba(255,255,255,0.06);
}

/* Bearish: full-bar glow (easy visual cue) */
.louis-bias-body.is-bearish .louis-bias-track {
  background: rgba(255, 59, 48, 0.14) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 0 10px rgba(255, 59, 48, 0.70),
    0 0 28px rgba(255, 59, 48, 0.48),
    0 0 60px rgba(255, 59, 48, 0.26) !important;
}

/* Extra soft red bloom behind the whole track (keeps it obvious even on dark gradients) */
.louis-bias-track::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(140px 38px at 50% 50%, rgba(255, 59, 48, 0.55), transparent 70%);
  filter: blur(10px);
}

.louis-bias-body.is-bearish .louis-bias-track::before {
  opacity: 1;
}

/* Side-glow: highlight the *opposite* side for cleanliness:
   - Bearish -> glow red on the RIGHT side (unfilled)
   - Bullish -> glow green on the LEFT side (unfilled)
   JS sets --lb-pctp (0..100%) and --lb-pctip (inverse). */
.louis-bias-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

.louis-bias-body.is-bearish .louis-bias-track::after {
  opacity: 1;
  clip-path: inset(0 0 0 var(--lb-pctp, 50%));
  box-shadow:
    0 0 16px rgba(255, 59, 48, 0.45),
    0 0 34px rgba(255, 59, 48, 0.22);
}

.louis-bias-body.is-bullish .louis-bias-track::after {
  opacity: 1;
  clip-path: inset(0 var(--lb-pctip, 50%) 0 0);
  box-shadow:
    0 0 16px rgba(0, 220, 140, 0.45),
    0 0 34px rgba(0, 220, 140, 0.22);
}

.louis-bias-fill {
  position: absolute;
  left: 10px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  width: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  box-shadow: 0 0 14px rgba(255,255,255,0.10);
}

/* Fill tone by side (keeps it clean and directional) */
.louis-bias-body.is-bullish .louis-bias-fill {
  background: linear-gradient(90deg, rgba(0, 220, 140, 0.78), rgba(0, 220, 140, 0.12));
  box-shadow:
    0 0 18px rgba(0, 220, 140, 0.22),
    0 0 34px rgba(0, 220, 140, 0.10);
}

.louis-bias-body.is-bearish .louis-bias-fill {
  background: linear-gradient(90deg, rgba(255, 81, 171, 0.70), rgba(255, 81, 171, 0.10));
  box-shadow:
    0 0 14px rgba(255, 81, 171, 0.16),
    0 0 26px rgba(255, 81, 171, 0.10);
}

.louis-bias-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 12px rgba(255,255,255,0.08);
}

.louis-bias-shimmer {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  background-size: 220% 100%;
  background-position: 0% 50%;
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.25px);
  animation: louisBiasShimmer 2.8s ease-in-out infinite;
  animation-play-state: paused;
}

.louis-bias-panel:hover .louis-bias-shimmer {
  animation-play-state: running;
}

@keyframes louisBiasShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.louis-bias-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.92);
  box-shadow:
    0 0 18px rgba(255,255,255,0.16),
    0 0 36px rgba(255, 81, 171, 0.18);
  cursor: grab;
}

.louis-bias-handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(0.98);
}

.louis-bias-slider:focus-visible .louis-bias-handle {
  outline: 2px solid rgba(255,255,255,0.35);
  outline-offset: 3px;
}

.louis-bias-readout {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-weight: 700;
}

.louis-bias-label {
  font-size: 18px;
  letter-spacing: 0.2px;
}

.louis-bias-num {
  font-size: 14px;
  opacity: 0.60;
}

.louis-bias-body.is-locked .louis-bias-slider {
  cursor: not-allowed;
  opacity: 0.58;
}

.louis-bias-body.is-locked .louis-bias-handle {
  cursor: not-allowed;
  opacity: 0.75;
}

.no-select, .no-select * {
  user-select: none !important;
}

/* =========================
   Livestreams
========================= */
.video-layout{
  display:grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 16px;
  align-items:start;
}

.video-main{ padding: 16px; }
.video-meta{ margin-top: 12px; }
.video-title{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}
.video-actions{ margin-top: 10px; display:flex; gap:10px; flex-wrap:wrap; }

.video-embed{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
}
.video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.video-list{ padding: 14px; }
.video-items{ display:flex; flex-direction:column; gap: 10px; }

.video-items{
  /* Keep playlist tidy: scroll after roughly 6 videos */
  max-height: min(calc((80px * 6) + (10px * 5)), 62vh);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #ff3b30 rgba(255,255,255,0.08);
}

/* Chrome / Edge / Safari */
.video-items::-webkit-scrollbar{
  width: 10px;
}
.video-items::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
}
.video-items::-webkit-scrollbar-thumb{
  background: #ff3b30;
  border-radius: 999px;
  border: 3px solid rgba(10,14,25,0.85);
}
.video-items::-webkit-scrollbar-thumb:hover{
  background: #ff6258;
}

.video-item{
  display:flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  min-height: 78px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  text-decoration:none;
  color: inherit;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.video-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}
.video-item.active{
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.10);
}

.video-thumb{
  width: 92px;
  height: 52px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}

.video-item-meta{
  flex: 1 1 auto;
  min-width: 0; /* allow ellipsis / wrapping without stretching the card */
}

.video-item-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  margin-bottom: 4px;
}
.video-item-desc{
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  line-height: 1.25;
  min-height: 2.5em; /* keep item cards consistent even if description is blank */
  max-height: 2.5em;
  overflow: hidden;
}

@media(max-width: 1060px){
  .video-layout{ grid-template-columns: 1fr; }
  .video-thumb{ width: 110px; height: 62px; }
}


/* =========================
   Admin dropdown (header)
========================= */
.nav-admin{
  position: relative;
  display: inline-block;
  margin: 0 2px;
}
.nav-admin-summary{

  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,0.86);
  font-weight: 650;
}
.nav-admin summary::-webkit-details-marker{ display:none; }
.nav-admin[open] .nav-admin-summary{

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.nav-admin-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,59,48,0.65) rgba(255,255,255,0.03);
  background: rgba(16,18,28,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  z-index: 80;
}
.nav-admin-menu::-webkit-scrollbar{ width: 4px; }
.nav-admin-menu::-webkit-scrollbar-track{ background: transparent; border-radius: 999px; }
.nav-admin-menu::-webkit-scrollbar-thumb{ background: rgba(255,59,48,0.40); border-radius: 999px; }
.nav-admin-menu::-webkit-scrollbar-thumb:hover{ background: rgba(255,59,48,0.65); }
.nav-admin-menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255,255,255,0.86);
  text-decoration: none;
}
.nav-admin-menu a.active{
  background: rgba(59,130,246,0.14);
  border: 1px solid rgba(59,130,246,0.28);
  color: rgba(255,255,255,0.95);
}

.nav-admin-menu a:hover{
  background: rgba(255,255,255,0.06);
}

@media(max-width: 1400px){
  /* In the mobile panel, the admin menu should flow inline */
  .nav-admin.nav-admin-mobile{
    width: 100%;
  }
  .nav-admin.nav-admin-mobile .nav-admin-menu{
    position: static;
    min-width: 0;
    max-height: min(50dvh, 360px);
    margin-top: 6px;
    box-shadow: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,59,48,0.45) transparent;
  }
  .nav-admin.nav-admin-mobile .nav-admin-menu::-webkit-scrollbar{ width: 4px; }
  .nav-admin.nav-admin-mobile .nav-admin-menu::-webkit-scrollbar-track{ background: transparent; }
  .nav-admin.nav-admin-mobile .nav-admin-menu::-webkit-scrollbar-thumb{ background: rgba(255,59,48,0.40); border-radius: 999px; }
  .nav-admin.nav-admin-mobile .nav-admin-menu::-webkit-scrollbar-thumb:hover{ background: rgba(255,59,48,0.65); }
}


/* =========================
   Psychology Videos (slightly different feel)
========================= */
.psych-layout{
  display:grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: 16px;
  align-items:start;
}
@media(max-width: 1060px){
  .psych-layout{ grid-template-columns: 1fr; }
}

.psych-main{
  padding: 16px; /* match livestreams spacing */
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(1200px 380px at 10% 0%, rgba(34,197,94,0.10), transparent 55%),
              rgba(255,255,255,0.03);
}
.psych-list{
  padding: 14px; /* match video-list spacing */
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(900px 280px at 90% 0%, rgba(34,197,94,0.09), transparent 55%),
              rgba(255,255,255,0.02);
}
.psych-list .video-item.active{
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.10);
}

/* =========================
   Quizzes
========================= */
.link-card{ display:block; }

/* member-facing library */
.quiz-hero{
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: radial-gradient(900px 300px at 15% 0%, rgba(59,130,246,0.10), transparent 60%),
              radial-gradient(700px 240px at 85% 0%, rgba(34,197,94,0.08), transparent 60%),
              rgba(255,255,255,0.02);
}

.quiz-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px; }

.quiz-card{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  padding: 14px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.quiz-card:hover{
  transform: translateY(-2px);
  border-color: rgba(59,130,246,0.30);
  background: rgba(59,130,246,0.06);
}

/* Quiz card – best-score mini ring */
.quiz-card-best{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.quiz-card-best-ring{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.quiz-card-best-ring > span{
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: #181820;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.3px;
}
.quiz-card-progress-hint{
  font-style: italic;
  opacity: 0.7;
}

/* Pill variant: warn / in-progress */
.pill.pill-warn{
  border-color: rgba(250,204,21,0.50) !important;
  background: rgba(250,204,21,0.12) !important;
  color: rgba(254,249,195,0.95) !important;
  box-shadow: 0 0 18px rgba(250,204,21,0.10);
}

/* Extra-small button variant */
.btn.btn-xs{
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
}

/* ═══════════════════════════════════════
   QUIZ LEADERBOARD
   ═══════════════════════════════════════ */

.lb-wrap{ max-width: 820px; margin: 0 auto; }

/* Tab bar */
.lb-tabs{
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.lb-tab{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  cursor: pointer;
  transition: all .18s ease;
}
.lb-tab:hover{
  border-color: rgba(59,130,246,0.30);
  color: rgba(255,255,255,0.80);
  background: rgba(59,130,246,0.06);
}
.lb-tab.is-active{
  border-color: rgba(59,130,246,0.55);
  color: #fff;
  background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(139,92,246,0.10));
  box-shadow: 0 0 24px rgba(59,130,246,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
.lb-tab-icon{ font-size: 17px; }

/* Podium container */
.lb-podium{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  padding: 30px 0 0;
  overflow: hidden;
}

/* Floating particles */
.lb-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.lb-particles span{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(250,204,21,0.45);
  animation: lb-float 4s ease-in-out infinite;
  opacity: 0;
}
.lb-particles span:nth-child(1){ left:10%; animation-delay:0s; }
.lb-particles span:nth-child(2){ left:25%; animation-delay:.6s; }
.lb-particles span:nth-child(3){ left:40%; animation-delay:1.2s; }
.lb-particles span:nth-child(4){ left:55%; animation-delay:.3s; }
.lb-particles span:nth-child(5){ left:70%; animation-delay:.9s; }
.lb-particles span:nth-child(6){ left:85%; animation-delay:1.5s; }
.lb-particles span:nth-child(7){ left:15%; animation-delay:2s; }
.lb-particles span:nth-child(8){ left:50%; animation-delay:2.4s; }
.lb-particles span:nth-child(9){ left:65%; animation-delay:1.8s; }
.lb-particles span:nth-child(10){ left:90%; animation-delay:.4s; }

@keyframes lb-float{
  0%  { transform: translateY(0); opacity:0; }
  20% { opacity:0.7; }
  80% { opacity:0.4; }
  100%{ transform: translateY(-110px); opacity:0; }
}

/* Podium slot (column) */
.lb-podium-slot{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 170px;
  text-align: center;
  animation: lb-slot-in .5s ease-out both;
}
.lb-place-1{ animation-delay: .15s; }
.lb-place-2{ animation-delay: .30s; }
.lb-place-3{ animation-delay: .45s; }

@keyframes lb-slot-in{
  from{ opacity:0; transform:translateY(30px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Crown */
.lb-crown-wrap{ position:relative; display:inline-block; }
.lb-crown{
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(250,204,21,0.5));
  animation: lb-crown-bob 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes lb-crown-bob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(-4px); }
}

/* Avatar */
.lb-avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.lb-avatar-gold{
  background: linear-gradient(135deg, #f59e0b, #eab308, #f59e0b);
  box-shadow: 0 0 28px rgba(245,158,11,0.4), 0 0 8px rgba(250,204,21,0.3);
}
.lb-avatar-silver{
  background: linear-gradient(135deg, #94a3b8, #cbd5e1, #94a3b8);
  box-shadow: 0 0 22px rgba(148,163,184,0.3);
}
.lb-avatar-bronze{
  background: linear-gradient(135deg, #b45309, #d97706, #b45309);
  box-shadow: 0 0 20px rgba(180,83,9,0.35);
}

.lb-podium-name{
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-podium-score{
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
  text-shadow: 0 0 12px rgba(59,130,246,0.3);
}
.lb-podium-denom{
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
}
.lb-podium-quizzes{
  margin-top: 2px;
  font-size: 11px;
}

/* Pillars */
.lb-pillar{
  width: 100%;
  margin-top: 10px;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  position: relative;
  overflow: hidden;
}
.lb-pillar::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px 14px 0 0;
  opacity: 0.15;
  pointer-events: none;
}
.lb-pillar-1{
  height: 110px;
  background: linear-gradient(180deg, rgba(245,158,11,0.25) 0%, rgba(245,158,11,0.05) 100%);
  border: 1px solid rgba(245,158,11,0.30);
  border-bottom: none;
  box-shadow: 0 -8px 30px rgba(245,158,11,0.12);
}
.lb-pillar-2{
  height: 80px;
  background: linear-gradient(180deg, rgba(148,163,184,0.20) 0%, rgba(148,163,184,0.04) 100%);
  border: 1px solid rgba(148,163,184,0.25);
  border-bottom: none;
  box-shadow: 0 -6px 20px rgba(148,163,184,0.08);
}
.lb-pillar-3{
  height: 55px;
  background: linear-gradient(180deg, rgba(217,119,6,0.20) 0%, rgba(217,119,6,0.04) 100%);
  border: 1px solid rgba(217,119,6,0.25);
  border-bottom: none;
  box-shadow: 0 -4px 16px rgba(217,119,6,0.08);
}
.lb-place-num{
  font-size: 20px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
}

/* Highlight "you" */
.lb-is-you .lb-podium-name{
  color: rgba(59,130,246,0.95);
}
.lb-is-you .lb-podium-name::after{
  content: ' (You)';
  font-size: 10px;
  color: rgba(59,130,246,0.60);
  font-weight: 500;
}

/* ── List below podium ── */
.lb-list-wrap{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.lb-list{
  max-height: 540px; /* ~15 rows */
  overflow-y: auto;
  padding: 6px 0;
}
/* Custom scrollbar — red theme */
.lb-list::-webkit-scrollbar{ width:6px; }
.lb-list::-webkit-scrollbar-track{ background:rgba(255,255,255,0.03); border-radius:999px; }
.lb-list::-webkit-scrollbar-thumb{ background:rgba(220,38,38,0.55); border-radius:999px; }
.lb-list::-webkit-scrollbar-thumb:hover{ background:rgba(220,38,38,0.75); }
/* Firefox */
.lb-list{ scrollbar-color: rgba(220,38,38,0.55) rgba(255,255,255,0.03); scrollbar-width:thin; }

.lb-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  transition: background .12s;
}
.lb-row:hover{ background: rgba(255,255,255,0.03); }
.lb-row + .lb-row{ border-top: 1px solid rgba(255,255,255,0.04); }

.lb-rank{
  width: 36px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.40);
  flex-shrink: 0;
}
.lb-row-avatar{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}
.lb-row-name{
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-row-stat{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.70);
  flex-shrink: 0;
}

/* Highlight you in the list */
.lb-row.lb-is-you{
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 10px;
  margin: 2px 6px;
}
.lb-row.lb-is-you .lb-row-name::after{
  content: ' (You)';
  font-size: 10px;
  color: rgba(59,130,246,0.55);
}
.lb-row.lb-is-you .lb-row-avatar{
  background: rgba(59,130,246,0.18);
  color: rgba(59,130,246,0.85);
}

/* Leaderboard button on quiz index */
.btn.btn-lb{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.btn-lb-icon{ font-size: 15px; }

/* Small screen */
@media(max-width:640px){
  .lb-podium{ gap:6px; }
  .lb-podium-slot{ width:110px; }
  .lb-avatar{ width:44px; height:44px; font-size:15px; }
  .lb-podium-score{ font-size:17px; }
  .lb-pillar-1{ height:80px; }
  .lb-pillar-2{ height:55px; }
  .lb-pillar-3{ height:38px; }
  .lb-crown{ font-size:18px; top:-18px; }
}

/* ═══════════════════════════════════════ */

/* quiz taking */
.quiz-progress{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  overflow:hidden;
}
.quiz-progress > div{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(59,130,246,0.9), rgba(34,197,94,0.75));
  transition: width .18s ease;
}

.media-box{ border-radius: 16px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); padding:12px; }
.ratio-16x9{ position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; }
.ratio-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; }

.choice-card{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  cursor:pointer;
  background: rgba(255,255,255,0.02);
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
.choice-card:hover{ border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.06); }
.choice-card.is-selected{ border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.08); }
.choice-card input{ margin-top: 3px; }

/* finish overlay (auto-submit) */
.finish-overlay{
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
.finish-overlay.show{ display: flex; }
.finish-panel{
  width: min(560px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(900px 240px at 20% 0%, rgba(59,130,246,0.18), transparent 60%),
              rgba(10,14,23,0.85);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  padding: 18px 18px;
}
.finish-title{ font-weight: 900; font-size: 18px; letter-spacing: 0.2px; }

/* simple confetti particles */
.confetti{
  position: fixed;
  width: 9px;
  height: 15px;
  border-radius: 3px;
  background: rgba(34,197,94,0.95);
  z-index: 9998;
  transition: transform 1.2s linear, top 1.2s linear, opacity 1.2s linear;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

/* results */
.results-hero{
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
}
.score-ring{
  width: 108px;
  height: 108px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: none;
  background: rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}
.score-ring::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 999px;
  background: rgba(8,12,20,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.score-ring > div{ position: relative; z-index: 1; }
.score-ring .num{ font-size: 22px; font-weight: 900; }
.score-ring .den{ font-size: 12px; color: rgba(255,255,255,0.65); margin-top: -4px; }

/* admin editing */
.quiz-admin-note{
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  text-align: left;
  margin-top: 20px;
}

/* One-question-per-page finish overlay */
.finish-overlay{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: 200ms ease;
  z-index: 9999;
}
.finish-overlay.show{ opacity: 1; pointer-events: auto; }
.finish-panel{
  width: min(520px, 92vw);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12,16,26,0.72);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.finish-title{ font-size: 18px; font-weight: 900; letter-spacing: 0.2px; }

.confetti{
  position: fixed;
  width: 8px;
  height: 14px;
  border-radius: 3px;
  background: rgba(59,130,246,0.9);
  z-index: 9998;
  transition: transform 1.2s linear, top 1.2s linear, opacity 1.2s linear;
}

.sortable-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.sortable-item{ border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:12px; background: rgba(255,255,255,.02); }
.sortable-item.dragging{ opacity:.65; }
.drag-handle{ user-select:none; cursor:grab; padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); line-height:1; }

.answer-line{ display:flex; gap:10px; align-items:flex-start; flex-wrap: wrap; }
.answer-line input[type="text"]{ flex: 1; min-width: 240px; }

.upload-chip{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}


/* =========================
   Quizzes polish v2
========================= */

/* Admin quizzes: centered table + drag states */
.admin-quizzes-table th,
.admin-quizzes-table td{ text-align:center; vertical-align:middle; }
.admin-quizzes-table td:first-child{ width:44px; }
.admin-quizzes-table .drag-handle{ cursor:grab; user-select:none; font-size:18px; opacity:.9; }
.admin-quizzes-table tr.dragging{ opacity:.55; }

.pill-sort{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.sortable-pills{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.pill-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,0.04); }
.pill-item.dragging{ opacity:.6; }
.pill-item .drag-handle{ font-size:18px; }
.pill-del{
  margin-left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.90);
  cursor: pointer;
}
.pill-del:hover{ background: rgba(239,68,68,0.20); border-color: rgba(239,68,68,0.45); }

/* Admin quizzes grouped lists */
.quiz-groups{ display:flex; flex-direction:column; gap: 8px; }
.quiz-sort-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.quiz-sort-item{
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,14,23,0.30);
  box-shadow: 0 14px 30px rgba(0,0,0,0.20);
}
.quiz-sort-item.dragging{ opacity: .75; }
.quiz-sort-item .drag-handle{ cursor: grab; user-select:none; font-size: 18px; }
.quiz-sort-main{ flex: 1; min-width: 0; }
.quiz-sort-title{ display:flex; align-items:center; flex-wrap:wrap; gap: 8px; }
.quiz-sort-actions{ display:flex; align-items:center; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }

@media(max-width: 820px){
  .quiz-sort-item{ flex-direction:column; align-items:stretch; }
  .quiz-sort-actions{ justify-content:flex-start; }
}



/* Admin FAQ grouped lists */
.faq-groups{ display:flex; flex-direction:column; gap: 8px; }
.faq-sort-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.faq-sort-item{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,14,23,0.30);
  box-shadow: 0 14px 30px rgba(0,0,0,0.20);
}
.faq-sort-item.dragging{ opacity: .75; }
.faq-sort-item .drag-handle{ cursor: grab; user-select:none; font-size:18px; }
.faq-sort-main{ flex:1; min-width:0; }
.faq-sort-title{ display:flex; align-items:center; flex-wrap:wrap; gap: 8px; }
.faq-sort-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

@media(max-width: 820px){
  .faq-sort-item{ flex-direction:column; align-items:stretch; }
  .faq-sort-actions{ justify-content:flex-start; }
}
/* Simple dialog styling (admin) */
dialog.dialog{
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: transparent;
  max-width: 520px;
  width: calc(100vw - 36px);
}
dialog.dialog::backdrop{ background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.dialog-card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,23,0.92);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
}
.dialog-card .muted{ color: rgba(255,255,255,0.70); }
.dialog-title{ font-weight: 900; font-size: 18px; }

/* Quiz question media sizing */
.quiz-media img{
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 14px;
}
.quiz-media .ratio-16x9{ max-width: 520px; width: 100%; }
.quiz-media iframe{ border-radius: 14px; }

/* Quiz index category pop */
.quiz-category{ margin-top: 28px; }
.quiz-category:first-child{ margin-top: 0; }
.quiz-category-header{
  padding: 14px 16px;
  border-radius: 16px;

  /* stronger category pop */
  border: 1px solid rgba(255, 70, 70, .30);
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(255, 60, 60, .14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow:
    0 0 0 1px rgba(255, 70, 70, .10),
    0 0 26px rgba(255, 50, 50, .18),
    0 0 70px rgba(255, 0, 0, .10),
    0 10px 30px rgba(0,0,0,.22) inset;
}
.quiz-category-header:hover{
  border-color: rgba(255, 90, 90, .42);
  box-shadow:
    0 0 0 1px rgba(255, 90, 90, .14),
    0 0 34px rgba(255, 70, 70, .22),
    0 0 90px rgba(255, 0, 0, .12),
    0 10px 30px rgba(0,0,0,.22) inset;
}
.quiz-category-header .title{ font-size: 18px; font-weight: 700; }
.quiz-category-header .meta{ margin-top: 4px; }
.quiz-category-grid{ margin-top: 12px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media(max-width: 1100px){ .quiz-category-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width: 620px){ .quiz-category-grid{ grid-template-columns: 1fr; } }

/* Results list spacing tighter */
.results-answers{ display:flex; flex-direction:column; gap:8px; }


.quiz-grid{ margin-top: 7px; }

/* =========================
   QUIZ POLISH (High-end)
========================= */

/* Category panels: make them POP (red glow) */
.quiz-category-panel{
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,70,70,0.55);
  background:
    radial-gradient(120% 140% at 10% 0%,
      rgba(255,60,60,0.34) 0%,
      rgba(255,60,60,0.14) 35%,
      rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(20,22,30,0.92), rgba(12,14,20,0.88));
  box-shadow:
    0 0 0 1px rgba(255,70,70,0.25) inset,
    0 10px 26px rgba(0,0,0,0.55),
    0 0 26px rgba(255,60,60,0.30),
    0 0 52px rgba(255,60,60,0.18);
}



.quiz-category-panel .panel-title{
  text-shadow: 0 0 14px rgba(239,68,68,0.22);
}

/* Ensure button rows can be centered/spaced */
.btn-row.center{ justify-content:center; width:100%; }
.btn-row.between{ justify-content:space-between; width:100%; }

/* Admin quiz table: center the actions properly */
.admin-quizzes-table td, .admin-quizzes-table th{ vertical-align: middle; }
.admin-quizzes-table td:last-child{ text-align:center; }
.admin-quizzes-table td:last-child .btn-row{ justify-content:center; width:100%; }

/* Quiz question prompt readability */
.quiz-qprompt{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.35;
  margin: 8px 0 14px;
}

/* Quiz media: slightly bigger, centered, keep aspect ratio */
.media-box.quiz-media-box{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  align-items:center;
  width:100%;
}
.quiz-media-item{ 
  width:100%; 
  display:flex; 
  justify-content:center; 
  align-items:center; }


.media-box.quiz-media-box img{
  max-width: min(980px, 100%);
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
}
.media-box.quiz-media-box .ratio-16x9{
  width: 90%;
  max-width: 980px;
  margin: 0 auto;     /* centers the smaller box */
}

/* Zoom affordance */
.zoomable{ cursor: zoom-in; }
.zoomable:active{ transform: scale(0.995); }

/* Lightbox */
.lightbox-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(10px);
}
.lightbox-overlay.show{ display:flex; }
.lightbox-inner{
  max-width: 96vw;
  max-height: 90vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 20px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,68,68,0.18);
  background: rgba(10,14,23,0.65);
  overflow: hidden;
}
.lightbox-inner img{
  display:block;
  max-width: 96vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-close{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10000;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10,14,23,0.55);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* =========================
   FAQ
========================= */

.faq-wrap{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.faq-group{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,14,23,0.32);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.24);
}

.faq-group-title{
  font-weight: 900;
  letter-spacing: 0.2px;
  margin: 2px 4px 10px;
  color: rgba(255,255,255,0.92);
}

.faq-item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(8,12,20,0.35);
  overflow: hidden;
  margin: 10px 0;
}

.faq-q{
  width: 100%;
  text-align:left;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  color: rgba(255,255,255,0.95);
  border: 0;
  cursor:pointer;
}

.faq-q-text{ font-weight: 800; }

.faq-icon{
  width: 16px;
  height: 16px;
  border-right: 2px solid rgba(255,255,255,0.70);
  border-bottom: 2px solid rgba(255,255,255,0.70);
  display:block;
  transform-origin: 50% 50%;
  /* Nudge up slightly so the chevron is visually centered in the row */
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
  flex: 0 0 auto;
  margin-right: 2px;
}

.faq-item.is-open .faq-icon{
  transform: translateY(-2px) rotate(-135deg);
}

.faq-a{
  height: 0px;
  transition: height 220ms ease;
}

.faq-a-inner{
  position: relative;
  padding: 0 14px 14px 36px;
  color: rgba(255,255,255,0.80);
  line-height: 1.55;
}

/* Answer bullet with comfortable inset (prevents the dot from touching the card edge) */
.faq-a-inner:before{
  content: "•";
  position: absolute;
  /* Center the bullet nicely in the left gutter */
  left: 12px;
  width: 22px;
  text-align: center;
  /* Slight baseline nudge so the bullet aligns with the first line of text */
  top: 0px;
  color: rgba(255,255,255,0.88);
  font-size: 16px;
  line-height: 1.55;
}

/* =========================
   Admin FAQ list
========================= */

.faq-admin-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.faq-admin-row{
  display:flex;
  gap: 10px;
  align-items: stretch;
}

.faq-admin-row.dragging{
  opacity: 0.75;
}

.drag-handle{
  width: 28px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: grab;
  user-select:none;
}

.faq-admin-body{ flex: 1; }

.faq-admin-form{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,14,23,0.30);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.22);
}

.faq-admin-top{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 10px;
}

.faq-admin-mini{
  display:flex;
  gap: 10px;
}

.faq-admin-mini .input{ flex: 1; }

.faq-admin-actions{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.faq-admin-left, .faq-admin-right{
  display:flex;
  align-items:center;
  gap: 8px;
}

@media(max-width: 820px){
  .faq-admin-mini{ flex-direction:column; }
  .drag-handle{ display:none; }
}

/* Results question number badge */
.result-qnum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 52px;
  height: 44px;
  padding: 0 12px;
  border-radius: 16px;
  margin-right: 10px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.96);
  border: 1px solid rgba(239,68,68,0.45);
  background:
    radial-gradient(80px 50px at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(120px 70px at 20% 0%, rgba(239,68,68,0.40), transparent 60%),
    rgba(239,68,68,0.16);
  box-shadow:
    0 0 0 1px rgba(239,68,68,0.20),
    0 0 28px rgba(239,68,68,0.45),
    0 12px 30px rgba(0,0,0,0.25);
  position: relative;
  overflow: hidden;
}

/* Subtle diagonal sheen inside the number badge */
.result-qnum::after{
  content: "";
  position: absolute;
  inset: -30% -60%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 45%, transparent 70%);
  opacity: 0.85;
  pointer-events: none;
}

/* Results question header container (more premium) */
.result-qhead{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(260px 120px at 12% 20%, rgba(239,68,68,0.22), transparent 62%),
    radial-gradient(240px 140px at 82% 0%, rgba(59,130,246,0.10), transparent 60%),
    rgba(10,14,23,0.35);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.result-qtitle{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.96);
  line-height: 1.2;
}

/* Results answers list: dot points + state highlighting */
.result-choices{
  margin: 12px 0 18px; /* extra bottom space before next question */
  padding-left: 0; /* custom bullets */
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.result-choice{
  list-style: none;
  position: relative;
  padding: 10px 12px 10px 38px; /* room for bullet */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(10,14,23,0.35);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  box-sizing: border-box;
}

/* Custom bullet that stays vertically centered even when pills/rows change height */
.result-choice::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.70);
  box-shadow: 0 0 10px rgba(255,255,255,0.12);
}

.result-choice-row{
  display:flex;
  align-items:center;
  gap: 12px;
}
.result-choice-text{
  flex: 1;
  color: rgba(255,255,255,0.92);
  display:flex;
  align-items:center;
  line-height: 1.35;
}
.result-choice-tags{
  display:flex;
  align-items:center;
  gap: 8px;
  justify-content:flex-end;
  white-space: nowrap;
}

/* Selected states */
.result-choice.picked-wrong{
  border-color: rgba(239,68,68,0.55);
  background:
    radial-gradient(120px 60px at 10% 20%, rgba(239,68,68,0.25), transparent 60%),
    rgba(239,68,68,0.10);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.22), 0 0 24px rgba(239,68,68,0.22), 0 12px 30px rgba(0,0,0,0.22);
}
.result-choice.picked-wrong::before{ background: rgba(239,68,68,0.95); box-shadow: 0 0 16px rgba(239,68,68,0.35); }

.result-choice.picked-correct,
.result-choice.correct-answer{
  border-color: rgba(34,197,94,0.55);
  background:
    radial-gradient(140px 70px at 10% 20%, rgba(34,197,94,0.22), transparent 62%),
    rgba(34,197,94,0.10);
  box-shadow: 0 0 0 1px rgba(34,197,94,0.18), 0 0 24px rgba(34,197,94,0.18), 0 12px 30px rgba(0,0,0,0.22);
}
.result-choice.picked-correct::before,
.result-choice.correct-answer::before{ background: rgba(34,197,94,0.95); box-shadow: 0 0 16px rgba(34,197,94,0.30); }

/* Pill variants (keeps existing pill base) */
.pill.pill-good{
  border-color: rgba(34,197,94,0.45) !important;
  background: rgba(34,197,94,0.12) !important;
  color: rgba(220,252,231,0.95) !important;
  box-shadow: 0 0 18px rgba(34,197,94,0.14);
}
.pill.pill-bad{
  border-color: rgba(239,68,68,0.50) !important;
  background: rgba(239,68,68,0.12) !important;
  color: rgba(254,226,226,0.95) !important;
  box-shadow: 0 0 18px rgba(239,68,68,0.16);
}

/* Small-screen tweaks */
@media(max-width: 640px){
  .quiz-qprompt{ font-size: 17px; }
  .media-box.quiz-media-box img{ max-height: 360px; }
}

/* =========================
   Checklist Page Redesign (Full)
========================= */
.checklist-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.checklist-hero{
  text-align:center;
  margin: 12px 0 18px;
}
.checklist-title{
  font-size: 34px;
  letter-spacing: .3px;
  margin: 0;
}
.checklist-subtitle{
  margin: 8px 0 0;
  opacity: .85;
}

.checklist-card{
  padding: 16px;
  border-radius: 18px;
}

.checklist-add-row{
  display:grid;
  grid-template-columns: 1fr 220px auto;
  gap: 12px;
  align-items:center;
  margin: 0;
}

.checklist-input-wrap{ width: 100%; }
.checklist-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
}

.checklist-quickadd{ width: 100%; }
.checklist-select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: inherit;
}

.checklist-add-btn{
  padding: 11px 16px;
  border-radius: 14px;
  white-space: nowrap;
}

.checklist-hint{
  margin-top: 10px;
  font-size: 13px;
  opacity: .8;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.muted{ opacity: .72; }

.checklist-items{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.checklist-item{
  display:grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.drag-handle{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  cursor: grab;
  user-select:none;
  opacity: .9;
}

.checklist-item-main{
  display:flex;
  align-items:center;
  gap: 10px;
}

.checklist-checkbox{
  width: 18px;
  height: 18px;
  accent-color: #d24b5a;
}

.checklist-text{
  font-size: 15px;
  line-height: 1.25;
}

.icon-btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: inherit;
  border-radius: 12px;
  width: 36px;
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.icon-btn.danger:hover{
  border-color: rgba(210,75,90,.55);
  background: rgba(210,75,90,.15);
}

.checklist-empty{
  padding: 18px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.14);
  text-align:center;
}
.empty-title{ font-weight: 700; margin-bottom: 6px; }
.empty-sub{ opacity: .8; font-size: 14px; }

/* Bottom info section */
.checklist-info-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}

.info-card{
  padding: 0;
  border-radius: 18px;
  overflow:hidden;
}

.info-summary{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor:pointer;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.info-summary::-webkit-details-marker{ display:none; }

.info-title{
  font-size: 16px;
  font-weight: 750;
}
.info-mini{
  margin-top: 4px;
  font-size: 13px;
  opacity: .78;
}
.chev{
  opacity: .8;
  transition: transform .15s ease;
}
details[open] .chev{
  transform: rotate(180deg);
}

.info-body{
  padding: 14px 16px 16px;
}

.info-text{
  margin: 0;
  opacity: .92;
  line-height: 1.45;
}
.small{ font-size: 13px; }

/* Chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.chip{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  padding: 9px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-size: 13px;
}
.chip:hover{
  border-color: rgba(210,75,90,.55);
  background: rgba(210,75,90,.14);
}

/* FIX: spacing under pills so hint isn't touching */
.chips-hint{
  margin-top: 12px;
}

/* Responsive */
@media (max-width: 900px){
  .checklist-add-row{
    grid-template-columns: 1fr;
  }
  .checklist-info-grid{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   UPGRADE PAGE (FREE MEMBER)
   Unique styling for /upgrade (unpaid_funnel.html)
   ========================================================= */
.upgrade-page{
  position: relative;
  padding: 0px 24px 18px;
  min-height: calc(100vh - 120px);
}

.upgrade-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% 20%, rgba(110, 66, 255, 0.22), transparent 60%),
    radial-gradient(860px 520px at 80% 35%, rgba(0, 212, 255, 0.14), transparent 62%),
    radial-gradient(900px 520px at 55% 85%, rgba(255, 59, 48, 0.10), transparent 60%),
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,0.40), rgba(0,0,0,0.86));
  animation: upgradeGlow 10s ease-in-out infinite alternate;
}

@keyframes upgradeGlow{
  from { transform: translate3d(0,0,0) scale(1); opacity: .95; }
  to   { transform: translate3d(0,-10px,0) scale(1.03); opacity: 1; }
}

.upgrade-shell{
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  margin: 0 auto;
  border-radius: 26px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(12,14,20,0.72), rgba(8,10,14,0.62));
  box-shadow: 0 28px 90px rgba(0,0,0,0.60);
  overflow: hidden;
}

.upgrade-shell::before{
  content:"";
  position: absolute;
  inset: -22px;
  border-radius: inherit;
  background:
    radial-gradient(55% 55% at 20% 25%, rgba(110, 66, 255, 0.55), transparent 70%),
    radial-gradient(60% 60% at 80% 40%, rgba(0, 212, 255, 0.35), transparent 70%),
    radial-gradient(55% 55% at 55% 85%, rgba(255, 59, 48, 0.25), transparent 72%);
  filter: blur(22px);
  opacity: .45;
  pointer-events:none;
  z-index: 0;
}

.upgrade-shell > *{ position: relative; z-index: 1; }

/* Upgrade page: reuse Psychology green glow + Funnel motion (scoped) */

/* Make upgrade page feel alive like funnel.html: float + pulse + shimmer (reusing funnel keyframes where possible) */
.upgrade-page{
  --cta-green-glow: rgba(34,197,94,0.85);
}

/* Continuous subtle float on hero + cards (staggered) */
.upgrade-page .upgrade-hero-anim{
  animation: ctaFloat 6.2s ease-in-out infinite;
}
.upgrade-page .upgrade-card-anim{
  animation: ctaFloat 7.4s ease-in-out infinite;
}
.upgrade-page .upgrade-card-anim:nth-child(2){ animation-delay: -1.2s; }
.upgrade-page .upgrade-card-anim:nth-child(3){ animation-delay: -2.6s; }
.upgrade-page .upgrade-card-anim:nth-child(4){ animation-delay: -3.9s; }

/* Animated conic border sweep like funnel (stronger visibility) */
.upgrade-page .upgrade-card{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.upgrade-page .upgrade-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events:none;
  opacity: 0.20;
  background: conic-gradient(from var(--angle),
    rgba(34,197,94,0.00),
    rgba(34,197,94,0.22),
    rgba(255,255,255,0.08),
    rgba(34,197,94,0.00)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: funnelSpin 3.8s linear infinite;
}
.upgrade-page .upgrade-card:hover::after{
  opacity: 0.32;
}

/* CTA buttons: same lively pulse/float behavior as funnel cta-btn, but green */
.upgrade-page .upgrade-cta-anim{
  position: relative;
  animation: ctaFloat 3.2s ease-in-out infinite;
  will-change: transform;
  overflow: hidden;
}
.upgrade-page .upgrade-cta-anim::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  padding: 2px;
  pointer-events:none;
  background: conic-gradient(from var(--angle),
    rgba(34,197,94,0.00),
    rgba(34,197,94,0.52),
    rgba(59,130,246,0.28),
    rgba(255,59,48,0.24),
    rgba(255,255,255,0.10),
    rgba(34,197,94,0.00)
  );
  /* keep it as a clean border ring */
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: 0.26;
  filter: blur(0.6px);
  animation: funnelSpin 3.8s linear infinite, ctaPulse 3.4s ease-in-out infinite;
}

.upgrade-page .upgrade-cta-anim:hover::before,
.upgrade-page .upgrade-cta-anim:focus-visible::before{
  opacity: 0.58;
}

/* Shimmer sweep on CTA (no JS) */
.upgrade-page .upgrade-cta-anim::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(110deg,
    rgba(255,255,255,0.00) 20%,
    rgba(255,255,255,0.18) 35%,
    rgba(255,255,255,0.00) 50%
  );
  transform: translateX(-120%);
  opacity: 0.55;
  animation: upgradeSweep 3.6s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes upgradeSweep{
  0%{ transform: translateX(-120%); opacity: 0.00; }
  20%{ opacity: 0.35; }
  50%{ transform: translateX(120%); opacity: 0.55; }
  80%{ opacity: 0.15; }
  100%{ transform: translateX(120%); opacity: 0.00; }
}

.upgrade-page .upgrade-shell{
  /* Match Funnel's premium animated border technique (reuse existing keyframes) */
  position: relative;
  isolation: isolate;
  border: 3px solid transparent;
  background:
    /* inner */
    linear-gradient(180deg, rgba(12,14,20,0.74), rgba(8,10,14,0.62)) padding-box,
    /* animated border */
    conic-gradient(from var(--angle),
      rgba(34,197,94,0.58),
      rgba(59,130,246,0.42),
      rgba(255,59,48,0.40),
      rgba(110,66,255,0.44),
      rgba(0,212,255,0.30),
      rgba(34,197,94,0.58)
    ) border-box;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.60),
    0 0 0 1px rgba(34,197,94,0.10) inset;
}
.upgrade-page .upgrade-shell::before{
  /* Stronger spinning outer glow around the WHOLE page container */
  content:"";
  position:absolute;
  inset:-14px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle),
    rgba(34,197,94,0.00),
    rgba(34,197,94,0.42),
    rgba(59,130,246,0.32),
    rgba(255,59,48,0.30),
    rgba(110,66,255,0.26),
    rgba(0,212,255,0.16),
    rgba(34,197,94,0.00)
  );
  filter: blur(16px);
  opacity: 0.42;
  z-index: -1;
  pointer-events:none;
  animation: funnelSpin 4.8s linear infinite;
}
.upgrade-page .upgrade-shell::after{
  /* subtle rotating highlight ring like Funnel */
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events:none;
  opacity: .46;
  background: conic-gradient(from var(--angle),
    rgba(34,197,94,0.00),
    rgba(34,197,94,0.22),
    rgba(59,130,246,0.16),
    rgba(255,59,48,0.14),
    rgba(255,255,255,0.06),
    rgba(34,197,94,0.00)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: funnelSpin 3.2s linear infinite, ctaPulse 4.2s ease-in-out infinite;
}
.upgrade-page .upgrade-bg{
  /* Keep existing background but add the same gentle float used on funnel glow layer */
  animation: funnelGlowShift 10s ease-in-out infinite alternate;
}

/* Hero: add psychology-style green bloom */
.upgrade-page .upgrade-hero{
  background:
    radial-gradient(1200px 380px at 10% 0%, rgba(34,197,94,0.10), transparent 55%),
    rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}

/* Plan/feature cards: subtle green idle glow, stronger on hover/focus */
.upgrade-page .upgrade-card{
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(1100px 360px at 12% 0%, rgba(34,197,94,0.07), transparent 55%),
    rgba(255,255,255,0.03);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.upgrade-page .upgrade-card:hover{
  transform: translateY(-2px);
  border-color: rgba(34,197,94,0.55);
  background:
    radial-gradient(1100px 360px at 12% 0%, rgba(34,197,94,0.12), transparent 58%),
    rgba(34,197,94,0.06);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.18) inset,
    0 24px 70px rgba(0,0,0,0.52);
}

/* Key highlights + pills */
.upgrade-page .upgrade-chip{
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.08);
}
.upgrade-page .upgrade-chip:hover{
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.12);
}

/* CTA button: psychology green glow, stronger on hover */
.upgrade-page .upgrade-btn.primary{
  border-color: rgba(34,197,94,0.45);
  background: linear-gradient(180deg, rgba(34,197,94,0.22), rgba(34,197,94,0.10));
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.18) inset,
    0 18px 70px rgba(34,197,94,0.16),
    0 8px 26px rgba(0,0,0,0.45);
}
.upgrade-page .upgrade-btn.primary:hover,
.upgrade-page .upgrade-btn.primary:focus-visible{
  border-color: rgba(34,197,94,0.70);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.30) inset,
    0 26px 90px rgba(34,197,94,0.26),
    0 10px 30px rgba(0,0,0,0.52);
}

/* Embed card spacing */
.upgrade-video-embed{
  margin-top: 10px;
  border-radius: 16px;
}

.upgrade-page .upgrade-video.upgrade-card-anim{
  animation: none !important; /* prevent subtle up/down twitch on iframe */
}
.upgrade-page .upgrade-video-embed{
  transform: translateZ(0);
}
.upgrade-page .upgrade-video-embed iframe{
  display:block;
}




.upgrade-hero{
  padding: 20px 16px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  text-align: center;
}

.upgrade-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(110, 66, 255, 0.30);
  background: rgba(110, 66, 255, 0.12);
  box-shadow: 0 10px 28px rgba(110, 66, 255, 0.18);
}

.upgrade-title{
  margin: 14px 0 10px;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.03em;
  text-shadow: 0 10px 28px rgba(0,0,0,0.55);
}

.upgrade-sub{
  max-width: 860px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}

.upgrade-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.upgrade-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 950;
  text-decoration: none;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.upgrade-btn.primary{
  color: #fff;
  background: linear-gradient(180deg, rgba(110,66,255,1), rgba(80,50,220,1));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 18px 70px rgba(110,66,255,0.35),
    0 8px 24px rgba(0,0,0,0.45);
  animation: none;
}

@keyframes upgradePulse{
  0%,100%{ transform: translateY(0); filter: brightness(1); }
  50%{ transform: translateY(-2px); filter: brightness(1.08); }
}

.upgrade-btn.ghost{
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.26);
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

.upgrade-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.upgrade-chips{
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.upgrade-chip{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.80);
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
}

.upgrade-main{ margin-top: 14px; }

.upgrade-grid{
  align-items: stretch;
  display: grid;
  grid-template-columns: 0.95fr 1.3fr 0.95fr;
  gap: 14px;
  align-items: start;
}

.upgrade-card{
  border-radius: 18px;
  background: rgba(5,7,10,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 20px 60px rgba(0,0,0,0.35);
  padding: 14px;
  overflow: hidden;
  position: relative;
}

.upgrade-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0));
  opacity:.65;
}

.upgrade-card > *{ position: relative; z-index: 1; }

.upgrade-card-head{ margin-bottom: 10px; }
.upgrade-card-title{ font-weight: 950; color: #fff; font-size: 14px; }
.upgrade-card-sub{ font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 2px; }

.upgrade-video-frame{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.22);
  background:
    radial-gradient(900px 400px at 30% 20%, rgba(0,212,255,0.10), transparent 60%),
    radial-gradient(900px 500px at 80% 60%, rgba(110,66,255,0.14), transparent 62%),
    rgba(0,0,0,0.35);
  padding-top: 56.25%;
  box-shadow: 0 24px 90px rgba(0, 212, 255, 0.10);
}

.upgrade-video-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}

.upgrade-video-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  z-index: 1;
  text-align:center;
  padding: 14px;
}

.upgrade-play{
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  position: relative;
  transform: translateZ(0);
}

.upgrade-play::before{
  content:"";
  position:absolute;
  left: 52%;
  top: 50%;
  transform: translate(-45%, -50%);
  width: 0;
  height: 0;
  border-left: 18px solid rgba(255,255,255,0.90);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.upgrade-video-text{
  font-weight: 950;
  color: rgba(255,255,255,0.92);
  line-height: 1.25;
}

.upgrade-video-text-small{
  display:block;
  margin-top: 4px;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

.upgrade-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
  line-height: 1.45;
}

.upgrade-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,0.86);
  font-size: 13px;
  line-height: 1.45;
}

.upgrade-list strong{ color: rgba(255,255,255,0.96); }

.upgrade-mini{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.upgrade-mini-pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.upgrade-roadmap-box{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(110,66,255,0.08);
}

.upgrade-roadmap-title{
  font-weight: 950;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}

.upgrade-roadmap-text{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}

.upgrade-steps{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

.upgrade-step{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}

.upgrade-step-num{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 950;
  color: #fff;
  border: 1px solid rgba(0, 212, 255, 0.25);
  background: rgba(0, 212, 255, 0.10);
  box-shadow: 0 10px 28px rgba(0, 212, 255, 0.10);
}

.upgrade-step-title{ font-weight: 950; color: #fff; font-size: 12.5px; }
.upgrade-step-text{ margin-top: 3px; color: rgba(255,255,255,0.70); font-size: 12px; line-height: 1.35; }

.upgrade-help{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.upgrade-help-title{ font-weight: 950; color: #fff; margin-bottom: 6px; font-size: 13px; }
.upgrade-help-text{ color: rgba(255,255,255,0.70); font-size: 12px; line-height: 1.45; }

@media (max-width: 980px){
  .upgrade-grid{ grid-template-columns: 1fr; }
  .upgrade-shell{ padding: 14px; }
  .upgrade-hero{ padding: 18px 14px 10px; }

  /* ── Mobile upgrade background fix ──
     Same approach as the mentorship funnel: hide the fixed bg overlay,
     put an opaque black bg directly on upgrade-page, and stretch it
     past .wrap padding with negative margins. */
  .upgrade-page{
    position: relative;
    margin: -24px -18px -24px -18px;
    padding: 24px 18px 24px 18px;
    background:
      radial-gradient(600px 400px at 50% 80px, rgba(34,197,94,.18), transparent 70%),
      #000;
  }

  /* Hide the fixed bg overlay — upgrade-page now owns the background */
  .upgrade-bg{ display: none !important; }

  /* Kill heavy animations on mobile (prevents scroll lag) — keep CTA alive */
  .upgrade-page .upgrade-hero-anim{ animation: none; }
  .upgrade-page .upgrade-card-anim{ animation: none; }

  /* Remove the dark shell box + animated border on mobile */
  .upgrade-shell{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .upgrade-shell::before{ display: none !important; }
  .upgrade-shell::after{ display: none !important; }
  .upgrade-page .upgrade-shell{ border: none !important; background: transparent !important; box-shadow: none !important; }
  .upgrade-page .upgrade-shell::before{ display: none !important; }
  .upgrade-page .upgrade-shell::after{ display: none !important; }

  /* Remove card wrapper decoration — keep padding */
  .upgrade-card{
    padding: 14px;
    border-radius: 14px;
  }
  .upgrade-page .upgrade-card::after{ display: none; }

  /* Video block first after hero */
  .upgrade-video{ order: -1; }

  /* Tighter grid */
  .upgrade-grid{ gap: 12px; }

  /* Smaller title on mobile */
  .upgrade-title{ font-size: 24px; }

  /* Chips wrap nicely */
  .upgrade-chip{ white-space: nowrap; }
}


/* Mobile extra polish: prevent sparse weeks looking floaty  */

@media (max-width: 520px){
  .cal-m-days{
    grid-template-columns: 1fr;
  }
  .cal-m-day{
    min-height: 84px;
  }
}

/* =========================
   Mentorship Hub
========================= */
.menthub-page{
  position: relative;
  min-height: calc(100vh - 120px);
  padding: 0;
}

/* Cosmic animated background (CSS-only) */
.menthub-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 52% 18%, rgba(255,59,48,.34), transparent 60%),
    radial-gradient(900px 520px at 15% 75%, rgba(255,59,48,.16), transparent 60%),
    radial-gradient(900px 520px at 88% 80%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(1000px 740px at 50% 45%, rgba(0,0,0,.55), rgba(0,0,0,.90));
  animation: funnelGlowShift 11s ease-in-out infinite alternate;
}

/* Star layers: drift + twinkle */
.menthub-stars{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menthub-stars-a{
  opacity: .90;
  background-image:
    radial-gradient(4px 4px at 6% 18%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(4px 4px at 14% 62%, rgba(255,255,255,.46), transparent 60%),
    radial-gradient(4px 4px at 22% 36%, rgba(255,255,255,.70), transparent 60%),
    radial-gradient(4px 4px at 31% 78%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(4px 4px at 38% 46%, rgba(255,255,255,.58), transparent 60%),
    radial-gradient(4px 4px at 44% 22%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(4px 4px at 52% 70%, rgba(255,255,255,.54), transparent 60%),
    radial-gradient(4px 4px at 61% 34%, rgba(255,255,255,.68), transparent 60%),
    radial-gradient(4px 4px at 69% 16%, rgba(255,255,255,.48), transparent 60%),
    radial-gradient(4px 4px at 74% 58%, rgba(255,255,255,.62), transparent 60%),
    radial-gradient(4px 4px at 82% 28%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(4px 4px at 88% 80%, rgba(255,255,255,.52), transparent 60%),
    radial-gradient(4px 4px at 95% 44%, rgba(255,255,255,.60), transparent 60%);
  animation: mhStarsDrift 28s linear infinite;
}

.menthub-stars-b{
  opacity: .85;
  background-image:
    radial-gradient(6px 6px at 18% 22%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(5px 5px at 28% 58%, rgba(255,255,255,.26), transparent 60%),
    radial-gradient(6px 6px at 41% 14%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(5px 5px at 56% 48%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(5px 5px at 64% 76%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(5px 5px at 79% 38%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(5px 5px at 92% 20%, rgba(255,255,255,.20), transparent 60%);
  animation: mhStarsTwinkle 4.6s ease-in-out infinite alternate;
}

@keyframes mhStarsDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-18px,-10px,0); }
}


/* Moon graphic (image-based, heavy lighting + slow drift). */
.menthub-moon{
  position: absolute;
  left: 50%;
  top: 120px;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: .95;
  pointer-events: none;
  background: url('/static/img/menthub_moon.png') center/cover no-repeat;
  filter:
    drop-shadow(0 24px 90px rgba(0,0,0,.62))
    drop-shadow(0 0 120px rgba(255,59,48,.22));
  animation: mhMoonDrift 36s ease-in-out infinite alternate;
}

.menthub-moon::before{
  /* Terminator + surface shading (gives bumps without ugly swirl) */
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.20), rgba(255,255,255,0) 40%),
    radial-gradient(circle at 68% 60%, rgba(0,0,0,.58), rgba(0,0,0,0) 62%),
    radial-gradient(circle at 55% 48%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%);
  mix-blend-mode: overlay;
  opacity: .90;
}

.menthub-moon::after{
  /* red rim + animated moonlight sweep */
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,59,48,.16), rgba(255,59,48,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 64%),
    linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 65%);
  background-size: 100% 100%, 100% 100%, 220% 220%;
  background-position: 0 0, 0 0, 0% 40%;
  filter: blur(1.5px);
  opacity: .92;
  animation: mhMoonLightSweep 10.5s linear infinite;
}

@keyframes mhMoonDrift{
  0%{ transform: translateX(calc(-50% - 38px)); }
  50%{ transform: translateX(-50%); }
  100%{ transform: translateX(calc(-50% + 38px)); }
}

@keyframes mhMoonLightSweep{
  0%{ background-position: 0 0, 0 0, -40% 35%; }
  100%{ background-position: 0 0, 0 0, 140% 65%; }
}

@media (max-width: 900px){
  .menthub-moon{
    width: 460px;
    height: 460px;
    top: 180px;
  }
}

/* Shooting stars */
.menthub-shooting{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.menthub-shooting .shoot{
  position: absolute;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,59,48,0), rgba(255,59,48,.85), rgba(255,255,255,.55));
  border-radius: 999px;
  filter: drop-shadow(0 0 8px rgba(255,59,48,.35));
  opacity: 0;
  transform: rotate(22deg);
  animation: mhShoot 6.8s linear infinite;
}

.menthub-shooting .shoot::after{
  content:"";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  filter: blur(.2px);
}

.menthub-shooting .s1{ top: 16%; left: -20%; animation-delay: 0.5s; }
.menthub-shooting .s2{ top: 28%; left: -35%; animation-delay: 2.1s; width: 220px; }
.menthub-shooting .s3{ top: 46%; left: -45%; animation-delay: 3.6s; width: 180px; }
.menthub-shooting .s4{ top: 62%; left: -38%; animation-delay: 5.1s; width: 240px; }
.menthub-shooting .s5{ top: 74%; left: -28%; animation-delay: 1.3s; width: 200px; }
.menthub-shooting .s6{ top: 10%; left: -48%; animation-delay: 4.4s; width: 210px; }

@keyframes mhShoot{
  0%{ opacity: 0; transform: translate3d(0,0,0) rotate(22deg); }
  8%{ opacity: .9; }
  28%{ opacity: 0; }
  100%{ opacity: 0; transform: translate3d(160vw, 80vh, 0) rotate(22deg); }
}

/* Content shell (reuse funnel technique for rotating conic border) */
.mentorship-hub{
  position: relative;
  z-index: 1;
  max-width: 1120px;
}

.mentorship-hub .mh-shell{
  position: relative;
  border-radius: 23px;
  border: 3px solid transparent;
  background:
    /* more see-through so the moon reads through the glass */
    linear-gradient(rgba(9,12,18,.70), rgba(9,12,18,.70)) padding-box,
    /* remove hard black wedges (they look like a swirl). keep it energetic with red + blue */
    conic-gradient(from var(--angle),
      rgba(255,59,48,.42),
      rgba(255,59,48,.10),
      rgba(59,130,246,.26),
      rgba(255,59,48,.14),
      rgba(255,59,48,.42)
    ) border-box;
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  animation: funnelSpin 5s linear infinite;
  overflow: hidden;
}

.mentorship-hub .mh-shell::before{
  content:"";
  position: absolute;
  inset: -12px;
  border-radius: 34px;
  z-index: -1;
  /* glow ring behind the glass border */
  background: conic-gradient(from var(--angle),
    rgba(255,59,48,.88),
    rgba(255,59,48,.25),
    rgba(59,130,246,.55),
    rgba(255,59,48,.25),
    rgba(255,59,48,.88)
  );
  filter: blur(20px);
  opacity: .22;
  animation: funnelSpin 3.2s linear infinite;
}

.mentorship-hub .mh-hero{
  position: relative;
  padding: 30px 24px 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,59,48,.14), rgba(0,0,0,0));
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}

.mentorship-hub .mh-hero::after{
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 260px at 50% 0%, rgba(255,59,48,.24), transparent 62%);
  pointer-events: none;
  opacity: .55;
  animation: mhHeroPulse 7.5s ease-in-out infinite;
}

@keyframes mhHeroPulse{
  0%{ opacity: .30; transform: translate3d(0,0,0); }
  50%{ opacity: .58; transform: translate3d(0,-4px,0); }
  100%{ opacity: .30; transform: translate3d(0,0,0); }
}

.mentorship-hub .mh-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.94);
  background: rgba(255,59,48,0.12);
  border: 1px solid rgba(255,59,48,0.22);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.30) inset, 0 0 18px rgba(255,59,48,0.10);
}

.mentorship-hub .mh-title{
  margin: 14px 0 8px;
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: .2px;
}

.mentorship-hub .mh-sub{
  margin: 0 auto;
  max-width: 76ch;
  opacity: 0.84;
}

.mentorship-hub .mh-actions{
  position: relative;
  z-index: 1;
  margin: 16px 0 8px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mentorship-hub .mh-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  color: rgba(255,255,255,.96);
  background: rgba(255,59,48,0.92);
  border: 1px solid rgba(255,59,48,0.55);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.mentorship-hub .mh-cta::after{
  content:"";
  position: absolute;
  inset: -2px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: translateX(-120%);
  animation: upgradeSweep 2.8s ease-in-out infinite;
  opacity: .65;
}

.mentorship-hub .mh-cta:hover{ transform: translateY(-1px); border-color: rgba(255,59,48,0.70); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 26px rgba(255,59,48,.16); }

.mentorship-hub .mh-cta.secondary{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}

.mentorship-hub .mh-pills{
  position: relative;
  z-index: 1;
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.mentorship-hub .mh-pill{
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.94);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset;
  animation: mhPillFloat 7.5s ease-in-out infinite;
}

.mentorship-hub .mh-pill:nth-child(2){ animation-delay: -1.8s; }
.mentorship-hub .mh-pill:nth-child(3){ animation-delay: -3.4s; }
.mentorship-hub .mh-pill:nth-child(4){ animation-delay: -2.6s; }
.mentorship-hub .mh-pill:nth-child(5){ animation-delay: -4.1s; }

@keyframes mhPillFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-4px); }
  100%{ transform: translateY(0px); }
}

.mentorship-hub .mh-grid{
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Desktop: offset cosmic bg to account for sidebar */
@media (min-width: 1401px){
  .menthub-bg{ left: 220px; }
  .sidebar-collapsed .menthub-bg{ left: 56px; }
}
@media (min-width: 1401px) and (max-width: 1700px){
  .menthub-bg{ left: 200px; }
}

@media (max-width: 980px){
  .mentorship-hub .mh-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menthub-moon{ width: 420px; height: 420px; top: 200px; }
}

@media (max-width: 640px){
  .mentorship-hub .mh-title{ font-size: 32px; }
  .mentorship-hub .mh-hero{ padding: 22px 16px 18px; }
  .mentorship-hub .mh-grid{ grid-template-columns: 1fr; padding: 14px; }
  .menthub-moon{ width: 420px; height: 420px; top: 200px; }
}

.mentorship-hub .mh-card{
  position: relative;
  display: block;
  padding: 18px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: rgba(10, 14, 22, 0.62);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.35);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.mentorship-hub .mh-card[aria-disabled="true"]{ cursor: default; }

.mentorship-hub .mh-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 260px at 20% 0%, rgba(255,59,48,0.16), transparent 60%),
    radial-gradient(800px 260px at 95% 15%, rgba(59,130,246,0.10), transparent 60%);
  opacity: 0.70;
  pointer-events: none;
}

.mentorship-hub .mh-card::after{
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--angle),
    rgba(255,59,48,.0),
    rgba(255,59,48,.28),
    rgba(59,130,246,.16),
    rgba(255,59,48,.0)
  );
  filter: blur(14px);
  opacity: .18;
  pointer-events: none;
  animation: funnelSpin 5.5s linear infinite;
}

.mentorship-hub .mh-card:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,59,48,0.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 18px 44px rgba(0,0,0,0.46);
  filter: brightness(1.04);
}

.mentorship-hub .mh-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.mentorship-hub .mh-card-title{
  font-weight: 950;
  letter-spacing: 0.15px;
}

.mentorship-hub .mh-tag{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,59,48,0.18);
  background: rgba(255,59,48,0.10);
  opacity: 0.98;
  white-space: nowrap;
}

/* "Open" pill for live mentorship cards */
.mentorship-hub .mh-tag.mh-tag-live{
  border-color: rgba(80, 200, 120, 0.38);
  background: rgba(80, 200, 120, 0.12);
  box-shadow: 0 0 0 1px rgba(80, 200, 120, 0.10), 0 12px 22px rgba(80, 200, 120, 0.08);
}

/* "Coming Soon" pill + disabled card */
.mentorship-hub .mh-tag.mh-tag-soon{
  border-color: rgba(255, 193, 7, 0.38);
  background: rgba(255, 193, 7, 0.12);
  color: rgba(255, 193, 7, 0.9);
}
.mentorship-hub .mh-card-soon{
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.mentorship-hub .mh-card-desc{
  margin-top: 10px;
  opacity: 0.82;
  position: relative;
  z-index: 1;
}

.mentorship-hub .mh-card-meta{
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.70;
  position: relative;
  z-index: 1;
}

/* =========================
   Mentorship Hub Performance (mobile + reduced motion)
   Goal: preserve the same look/feel on desktop, while reducing
   expensive paints/compositing on mobile.

   Key wins:
   - stop animating full-viewport fixed backgrounds on small screens
   - reduce heavy blur/drop-shadow radii
   - reduce the number of simultaneously animated layers
   - respect prefers-reduced-motion
========================= */

/* Mobile/touch: keep the same visual design, but cheaper.
   (Desktop remains identical because these rules only apply <= 720px.) */
@media (max-width: 720px){
  /* Fixed full-viewport + animated gradients can trigger frequent repaints on mobile GPUs */
  .menthub-bg{ animation: none; }

  /* Star layers: keep, but slow down to reduce animation work */
  .menthub-stars-a{ animation-duration: 70s; }
  .menthub-stars-b{ animation-duration: 12s; }

  /* Moon: large drop-shadows are expensive on mobile; keep glow but shrink radii */
  .menthub-moon{
    filter:
      drop-shadow(0 14px 44px rgba(0,0,0,.56))
      drop-shadow(0 0 70px rgba(255,59,48,.18));
    animation-duration: 64s;
  }
  /* Animated sweep + blur is a steady repaint cost; freeze it on mobile */
  .menthub-moon::after{ animation: none; }

  /* Shooting stars: fewer concurrent animations */
  .menthub-shooting .s4,
  .menthub-shooting .s5,
  .menthub-shooting .s6{ display: none; }
  .menthub-shooting .shoot{
    animation-duration: 9.5s;
    filter: drop-shadow(0 0 5px rgba(255,59,48,.30));
  }

  /* Spinning conic border + big blur glows are expensive; keep effect, slow + reduce blur */
  .mentorship-hub .mh-shell{ animation-duration: 12s; }
  .mentorship-hub .mh-shell::before{ filter: blur(12px); opacity: .18; animation-duration: 9s; }

  /* Per-card animated blurred conic layer (6 cards) is costly on mobile */
  .mentorship-hub .mh-card::after{ animation: none; filter: blur(10px); opacity: .14; }

  /* Minor: reduce per-element floating animation work */
  .mentorship-hub .mh-pill{ animation-duration: 12s; }
  .mentorship-hub .mh-hero::after{ animation-duration: 12s; }

  /* Isolate card painting to reduce repaint area when hovering/scrolling */
  .mentorship-hub .mh-card{ contain: paint; }
}

/* Respect reduced motion: turn off continuous animations on the hub */
@media (prefers-reduced-motion: reduce){
  .menthub-bg,
  .menthub-stars-a,
  .menthub-stars-b,
  .menthub-moon,
  .menthub-moon::after,
  .menthub-shooting .shoot,
  .mentorship-hub .mh-shell,
  .mentorship-hub .mh-shell::before,
  .mentorship-hub .mh-card::after,
  .mentorship-hub .mh-pill,
  .mentorship-hub .mh-hero::after{
    animation: none !important;
  }
}

/* =========================
   Mentorship Theme (Private Hub + Quizzes)
   Red / cosmic styling overrides
========================= */
.mentorship-theme .page-title,
.mentorship-theme h1,
.mentorship-theme h2{
  text-shadow: 0 0 22px rgba(255,60,60,.28);
}

.mentorship-theme .quiz-cat,
.mentorship-theme .quiz-card,
.mentorship-theme .quiz-box,
.mentorship-theme .card{
  border-color: rgba(255,80,80,.38) !important;
  box-shadow: 0 0 0 1px rgba(255,80,80,.14), 0 18px 55px rgba(255,25,25,.12);
  background: linear-gradient(180deg, rgba(16,18,28,.72), rgba(12,12,18,.56));
  backdrop-filter: blur(10px);
}

.mentorship-theme .pill,
.mentorship-theme .chip,
.mentorship-theme .tag{
  opacity: 1 !important;
  border-color: rgba(255,90,90,.55) !important;
  box-shadow: 0 0 0 1px rgba(255,70,70,.12), 0 10px 28px rgba(255,30,30,.10);
}

.mentorship-theme .btn,
.mentorship-theme button,
.mentorship-theme a.btn{
  opacity: 1 !important;
}

.mentorship-theme .btn-primary,
.mentorship-theme .btn.red,
.mentorship-theme .btn-cta{
  background: linear-gradient(180deg, rgba(255,75,75,.92), rgba(190,40,40,.92));
  border-color: rgba(255,120,120,.65);
  box-shadow: 0 0 0 1px rgba(255,80,80,.20), 0 20px 55px rgba(255,30,30,.22);
}

.mentorship-theme .btn-primary:hover,
.mentorship-theme .btn.red:hover,
.mentorship-theme .btn-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255,110,110,.28), 0 26px 70px rgba(255,40,40,.28);
}

.mentorship-theme .btn-secondary{
  border-color: rgba(255,90,90,.45);
}

/* Mentorship media pages (livestreams / psychology) */
.mentorship-media-page .menthub-content,
.mentorship-admin-page .menthub-content{
  position: relative;
  z-index: 2;
}

.mentorship-media-page .video-embed{
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,120,120,0.22);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.mentorship-media-page .video-list-head{
  border-bottom: 1px solid rgba(255,120,120,0.18);
}

/* Tidy the mentorship-only subtitle under the page title */
.mentorship-media-page .sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.01em;
}

/* Playlist header "title box" (match the non-mentorship layout)
   while keeping the mentorship red theme */
.mentorship-media-page .video-list .mentorship-list-head{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,120,120,0.22);
  box-shadow: 0 0 0 1px rgba(255,120,120,0.07) inset, 0 12px 28px rgba(0,0,0,0.35);
}

/* Slightly smaller + cleaner playlist text than the default site list */
.mentorship-media-page .video-item-meta{ gap: 4px; }
.mentorship-media-page .video-item-title{ font-size: 13px; line-height: 1.15; }
.mentorship-media-page .video-item-desc{ font-size: 12px; line-height: 1.2; opacity: 0.78; }

.mentorship-media-page .video-item{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,120,120,0.18);
}

.mentorship-media-page .video-item:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,120,120,0.28);
}

.mentorship-media-page .video-item.active{
  border-color: rgba(255,59,48,0.65);
  background: rgba(255,59,48,0.14);
  box-shadow: 0 0 0 1px rgba(255,59,48,0.14) inset, 0 14px 36px rgba(255,30,30,0.14);
}

.mentorship-admin-page .check-item{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,120,120,0.18);
}


/* Admin dropdown: Mentorship section separator */
.nav-admin-divider{
  height: 1px;
  margin: 10px 10px 8px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
}
.nav-admin-section-title{
  margin: 0 6px 6px;
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.60);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
}
/* =========================
   Mentorship Quizzes page
   (reuse hub's stars/shooting-stars aesthetic)
========================= */
.mentorship-quiz-index{
  position: relative;
  overflow: hidden;
  padding: 6px 0 28px;
}

.mentorship-quiz-index .mh-sky{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mentorship-quiz-index .mh-stars,
.mentorship-quiz-index .mh-shooters{
  position: absolute;
  inset: 0;
}

.mentorship-quiz-index .wrap{
  position: relative;
  z-index: 1;
}

/* Shared hub primitives */
.mentorship-quiz-index .mh-hero{ margin: 10px 0 18px; }
.mentorship-quiz-index .mh-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
}

.mentorship-quiz-index .mh-hero-title{
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 1000;
  margin: 10px 0 6px;
  letter-spacing: -0.6px;
}

.mentorship-quiz-index .mh-hero-sub{
  opacity: 0.86;
  max-width: 70ch;
}

.mentorship-quiz-index .mh-section-title{
  margin: 18px 0 10px;
  font-weight: 1000;
  letter-spacing: -0.2px;
}

.mentorship-quiz-index .mh-quiz-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media(max-width: 980px){
  .mentorship-quiz-index .mh-quiz-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width: 620px){
  .mentorship-quiz-index .mh-quiz-grid{ grid-template-columns: 1fr; }
}

.mentorship-quiz-index .mh-quiz-card{
  display: block;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(15, 15, 25, 0.70);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

.mentorship-quiz-index .mh-quiz-card:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(115,255,175,0.22);
  filter: brightness(1.05);
}

.mentorship-quiz-index .mh-quiz-title{
  font-weight: 1000;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}

.mentorship-quiz-index .mh-quiz-meta{
  margin-top: 10px;
  opacity: 0.85;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mentorship-quiz-index .mh-empty{
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0.9;
}

/* Admin page minor polish (keeps existing admin styles intact) */
.mentorship-admin-quizzes .admin-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  margin: 10px 0 14px;
}

.mentorship-admin-quizzes .admin-grid{
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
}

@media(max-width: 980px){
  .mentorship-admin-quizzes .admin-grid{ grid-template-columns: 1fr; }
}

.mentorship-admin-quizzes .admin-card{
  background: rgba(15, 15, 25, 0.70);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 45px rgba(0,0,0,0.35);
}

.mentorship-admin-quizzes .admin-card-title{
  font-weight: 1000;
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}

.mentorship-admin-quizzes .admin-form .field{ margin-bottom: 10px; }
.mentorship-admin-quizzes .admin-form label{ display:block; font-size: 12px; font-weight: 900; opacity: .85; margin-bottom: 6px; }
.mentorship-admin-quizzes .admin-form input,
.mentorship-admin-quizzes .admin-form textarea,
.mentorship-admin-quizzes .admin-form select{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: inherit;
  padding: 10px 12px;
  outline: none;
}

.mentorship-admin-quizzes .admin-form textarea{ min-height: 90px; resize: vertical; }
.mentorship-admin-quizzes .admin-form .row{ display:flex; gap: 10px; }
.mentorship-admin-quizzes .admin-form .row .field{ flex: 1; }
.mentorship-admin-quizzes .admin-form .actions{ display:flex; gap: 10px; align-items:center; margin-top: 10px; }

.mentorship-admin-quizzes .quiz-table{
  width: 100%;
  border-collapse: collapse;
}
.mentorship-admin-quizzes .quiz-table th,
.mentorship-admin-quizzes .quiz-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  vertical-align: top;
}
.mentorship-admin-quizzes .quiz-table th{ text-align:left; font-size: 12px; letter-spacing: .3px; opacity: .8; }
.mentorship-admin-quizzes .quiz-title{ font-weight: 1000; }
.mentorship-admin-quizzes .quiz-desc{ opacity: .82; margin-top: 4px; }
.mentorship-admin-quizzes .quiz-meta{ opacity: .75; font-size: 12px; margin-top: 8px; }
.mentorship-admin-quizzes .quiz-actions{ display:flex; gap: 8px; flex-wrap: wrap; }

/* If your base button classes exist, keep them. Provide fallbacks. */
.mentorship-admin-quizzes .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.mentorship-admin-quizzes .btn.primary{ background: rgba(80, 200, 120, 0.14); border-color: rgba(80, 200, 120, 0.32); }
.mentorship-admin-quizzes .btn.danger{ background: rgba(255,59,48,0.10); border-color: rgba(255,59,48,0.22); }
.mentorship-admin-quizzes .btn.small{ padding: 7px 10px; font-size: 12px; }




/* Mentorship quizzes index: keep same layout as /quizzes but use hub red glow + starfield */
.mentorship-quiz-index .card.quiz-hero.mentorship-quiz-hero{
  background: radial-gradient(1200px 600px at 35% 30%, rgba(210, 45, 55, 0.30), rgba(10,10,18,0.92) 60%), rgba(12, 12, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}

.mentorship-quiz-index .panel.quiz-category-panel{
  background: rgba(12, 12, 20, 0.68);
  border: 1px solid rgba(255,255,255,0.10);
}

.mentorship-quiz-index a.quiz-card{
  border-color: rgba(255,255,255,0.12);
}

.mentorship-quiz-index a.quiz-card:hover{
  border-color: rgba(255, 85, 85, 0.30);
  box-shadow: 0 18px 50px rgba(0,0,0,0.40);
}

.mentorship-quiz-index .pill{
  background: rgba(220, 50, 60, 0.18);
  border-color: rgba(220, 50, 60, 0.30);
}

@media (max-width: 720px) {
  .moon,
  .moon-wrapper,
  .moon-container {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .funnel-bg,
  .cosmic-bg,
  .mentorship-bg {
    position: absolute !important;
    animation: none !important;
    background-attachment: scroll !important;
  }
}

/* Mentorship Hub ONLY — mobile: remove moon + stop shooting stars */
@media (max-width: 820px){
  .menthub-page .shooting-star,
  .menthub-page .shooting-stars,
  .menthub-page .shooting-stars *{
    animation: none !important;
    display: none !important;
  }

  .menthub-page .moon,
  .menthub-page .menthub-moon,
  .menthub-page .moon-wrapper,
  .menthub-page .moon-container{
    animation: none !important;
    display: none !important;
  }
}




/* ===== Mentorship Quiz Index + Mentorship Quiz Run readability ===== */

/* Index cards: match the cleaner non-mentorship layout */
.mentorship-quiz-index .quiz-category-panel{
  margin-top: 14px;
}

.mentorship-quiz-index .quiz-category-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.mentorship-quiz-index .quiz-category-title{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.mentorship-quiz-index .quiz-category-title strong{
  font-size: 15px;
  letter-spacing: 0.2px;
}

.mentorship-quiz-index .quiz-category-title span{
  font-size: 12.5px;
  opacity: 0.70;
}

.mentorship-quiz-index .quiz-grid{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.mentorship-quiz-index a.quiz-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
}

.mentorship-quiz-index .quiz-card-top{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
}

.mentorship-quiz-index .quiz-card-name{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mentorship-quiz-index .quiz-card-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12.5px;
  opacity: 0.75;
}

.mentorship-quiz-index .quiz-card-count{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.mentorship-quiz-index .quiz-card-cta{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
}

.mentorship-quiz-index .start-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  transform: translateZ(0);
}

.mentorship-quiz-index a.quiz-card:hover .start-pill{
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.10);
}

/* Empty state spacing */
.mentorship-quiz-index .quiz-empty{
  margin-top: 12px;
}

/* Run + Results: bump contrast so content is easier to read over the starfield */
.mentorship-quiz-page .panel{
  background: rgba(10, 12, 18, 0.72);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}

.mentorship-quiz-page .choice-card{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
}

.mentorship-quiz-page .choice-card:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}

.mentorship-quiz-page .choice-card.correct{
  background: rgba(40, 214, 128, 0.16);
  border-color: rgba(40, 214, 128, 0.34);
}

.mentorship-quiz-page .choice-card.your{
  background: rgba(98, 168, 255, 0.14);
  border-color: rgba(98, 168, 255, 0.30);
}

.mentorship-quiz-page .choice-card.wrong{
  background: rgba(255, 78, 90, 0.14);
  border-color: rgba(255, 78, 90, 0.30);
}

/* Slightly stronger text contrast inside mentorship quiz pages */
.mentorship-quiz-page .muted,
.mentorship-quiz-page .subtle{
  opacity: 0.78;
}

/* ===== Mentorship quiz readability bump (keeps the background animations untouched) ===== */
/* Make the main content containers slightly more opaque so text is easier to read over the starfield. */
.mentorship-quiz-page .card{
  background: linear-gradient(180deg, rgba(10,12,18,0.72), rgba(10,12,18,0.60));
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px);
}

/* Answer blocks (taking pages) */
.mentorship-quiz-page .choice-card{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.mentorship-quiz-page .choice-card:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
}
.mentorship-quiz-page .choice-card.is-selected{
  border-color: rgba(34,197,94,0.50);
  background: rgba(34,197,94,0.12);
}

/* Results answers: bump contrast for the non-highlighted rows without overriding picked/correct state styling */
.mentorship-quiz-page .result-choice:not(.picked-wrong):not(.picked-correct):not(.correct-answer){
  background: rgba(10,14,23,0.55);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 12px 30px rgba(0,0,0,0.24);
}

.mentorship-quiz-page .quiz-admin-note{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}


/* Mobile: make calendar day "glow/hover" feedback work on touch (no hover devices) */
@media (hover: none) and (pointer: coarse){
  .day-cell{
    -webkit-tap-highlight-color: transparent;
  }
  .day-cell:active,
  .day-cell:focus-within{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 18px rgba(59,130,246,0.16);
  }
  .day-cell.has-trades:active,
  .day-cell.has-trades:focus-within{
    box-shadow: 0 0 0 1px rgba(80,200,120,0.30), 0 0 18px rgba(80,200,120,0.18);
  }
  .day-cell.today:active,
  .day-cell.today:focus-within{
    box-shadow: 0 0 0 1px rgba(120,180,255,0.35), 0 0 18px rgba(120,180,255,0.18);
  }
}



/* =========================
   Mentorship: Calls + Events
========================= */

.mentorship-schedule-page .mh-card-surface,
.mentorship-events-page .mh-card-surface{
  background: rgba(13, 14, 18, 0.72);
  border: 1px solid rgba(255, 60, 90, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 60, 90, 0.08), 0 20px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
}

/* Weekly timetable grid (desktop) */
.call-grid-wrap{ margin-top: 6px; }
.call-grid-scroll{
  max-height: 560px; /* ~10 hours visible, rest scrolls */
  border-radius: 18px;
  scrollbar-gutter: stable;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

/* Match the site's custom scrollbar styling (like member chat) */
.cw-scroll::-webkit-scrollbar{ width: 10px; }
.cw-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
}
.cw-scroll::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.20);
}
.cw-scroll::-webkit-scrollbar-track{ background: transparent; }
.cw-scroll{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }


/* ---- Mentorship Call Recordings page tweaks ---- */
.mcr-scroll{ margin-top: 14px; }
.mcr-empty{ margin-top: 10px; }

.mcr-call-panel{ margin-top: 12px; }

.mcr-call-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mcr-call-left{
  flex: 1 1 auto;
  min-width: 0;
}

.mcr-call-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 160px;
}

.call-week-grid{
  display: grid;
  grid-template-columns: 78px repeat(var(--day-count, 7), minmax(0, 1fr));
  /* Slightly tighter vertical spacing between hours */
  grid-template-rows: 44px repeat(var(--slot-count, 26), 38px);
  column-gap: 8px;
  position: relative;
  padding: 6px;
  border-radius: 18px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: visible;
}

.call-week-grid .cw-corner{
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 7;
  background: rgba(0,0,0,0.22);
  border-radius: 14px;
}

.call-week-grid .cw-day{
  min-width: 0;
  /* Per-day accent set inline on the element (falls back to mentorship red) */
  --accent: 255, 60, 90;
  grid-row: 1;
  padding: 8px 8px;
  border-radius: 14px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  /* keep the day headers pinned when scrolling the timetable */
  position: sticky;
  top: 0;
  z-index: 6;
  backdrop-filter: blur(6px);
}

.call-week-grid .cw-day.has-calls{
  /* Much louder, obvious highlight for days with calls */
  border-color: rgba(var(--accent), 0.85);
  box-shadow: 0 0 0 1px rgba(var(--accent), 0.30), 0 0 42px rgba(var(--accent), 0.32);
  background: rgba(var(--accent), 0.34);
  color: rgba(255,255,255,0.99);
}

.week-nav{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
}
.week-nav .week-range{
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0 2px;
  white-space: nowrap;
}
@media (max-width: 700px){
  .week-nav{
    width: 100%;
    justify-content: space-between;
  }
  .week-nav .week-range{
    text-align:center;
    flex: 1;
  }
}

.form-notes{
  margin-top: 10px;
}
.form-notes .form-notes-title{
  font-weight: 700;
  margin: 0 0 8px 0;
}
.form-notes textarea{
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

.call-week-grid .cw-time{
  grid-column: 1;
  align-self: start;
  justify-self: end;
  padding: 2px 8px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.call-week-grid .cw-line{
  grid-column: 2 / -1;
  justify-self: stretch;
  width: 100%;
  align-self: start;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,60,90,0.18), rgba(255,255,255,0.10));
  /* Put hour lines exactly on the slot boundary so blocks line up (e.g. 5PM starts on the 17:00 line) */
  margin-top: 0;
  border-radius: 2px;
  pointer-events: none;
}

.call-week-grid .cw-block{
  /* Per-day accent set inline on the element */
  --accent: 255, 60, 90;
  border-radius: 16px;
  padding: 10px 10px 10px;
  height: 100%;
  align-self: stretch;
  justify-self: stretch;
  min-height: 0;
  /* Brighter, easier to spot (each day has its own accent) */
  background: linear-gradient(180deg, rgba(var(--accent), 0.42), rgba(18, 19, 26, 0.86));
  border: 1px solid rgba(var(--accent), 0.90);
  box-shadow: 0 0 0 1px rgba(var(--accent), 0.32), 0 0 24px rgba(var(--accent), 0.28), 0 16px 30px rgba(0,0,0,0.35);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}

.call-week-grid .cw-block:focus-visible{
  outline: 2px solid rgba(var(--accent), 0.60);
  outline-offset: 2px;
}

.call-week-grid .cw-block:before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(500px 140px at 20% 0%, rgba(var(--accent), 0.22), transparent 60%),
              radial-gradient(400px 120px at 80% 100%, rgba(var(--accent), 0.14), transparent 65%);
  opacity: 0.9;
  pointer-events:none;
}

.call-week-grid .cw-block:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--accent), 0.72);
  box-shadow: 0 0 0 1px rgba(var(--accent), 0.22), 0 0 34px rgba(var(--accent), 0.18), 0 22px 44px rgba(0,0,0,0.42);
}


/* Mentorship schedule toolbar (top-right controls) */
.mentorship-schedule-page .mh-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.mentorship-schedule-page .mh-toolbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
}
.mentorship-schedule-page .mh-toolbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* "Scheduled calls" header pill – title left, vertically centered */
.mh-agenda-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  min-height: 48px;
}
.mh-agenda-h{
  font-weight: 1000;
  letter-spacing: 0.2px;
  line-height: 1.05;
}
.mh-agenda-tz{
  margin-left: auto;
  white-space: nowrap;
  line-height: 1.05;
}
.mentorship-schedule-page .mh-toolbar .week-nav{
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.16);
}
.mentorship-schedule-page .mh-toolbar .week-range{
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}
.mentorship-schedule-page .mh-toolbar .btn{
  opacity: 0.98;
}
.mentorship-schedule-page .mh-toolbar .btn.ghost{
  opacity: 0.96;
}
.mentorship-schedule-page .mh-toolbar .btn:hover{
  opacity: 1;
}

/* Mobile tweaks for Livestream Call Schedule (admin + subheading alignment) */
@media (max-width: 720px){
  /* 1) If admin controls are present, hide the current week text on mobile to avoid crowding */
  .mentorship-schedule-page .mh-toolbar--can-manage .mh-toolbar-left{
    visibility: hidden;
    pointer-events: none;
    user-select: none;
  }

  /* 2) Scheduled calls subheading should align left with the title (not centered) */
  .mentorship-schedule-page .mh-agenda-head{
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }
  .mentorship-schedule-page .mh-agenda-tz{
    margin-left: 0;
    width: 100%;
    white-space: normal;
    text-align: left;
  }
}

/* Slightly brighter titles/buttons on events page */
.mentorship-events-page .event-title{ color: rgba(255,255,255,0.98); }
.mentorship-events-page .btn{ opacity: 0.98; }
.mentorship-events-page .btn.ghost{ opacity: 0.96; }

/* Call details modal */
.cw-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2000;
}

/* Ensure the HTML [hidden] attribute actually hides the modal (override our display:flex) */
.cw-modal-backdrop[hidden]{
  display: none !important;
}
.cw-modal{
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #181820;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,60,90,0.18);
  overflow: hidden;
}
.cw-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cw-modal-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
}
.cw-modal-meta{
  margin-top: 3px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
}
.cw-modal-body{ padding: 12px 14px 14px; }
.cw-modal-notes{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.84);
  white-space: pre-wrap;
}
.cw-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding: 0 14px 14px;
  margin-top: 0;
}
.cw-modal .btn{
  opacity: 0.98;
}

.cw-block-top{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  position: relative;
}
.cw-title{
  font-weight: 900;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cw-time-range{
  font-size: 12px;
  color: rgba(255,255,255,0.68);
  white-space: nowrap;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-time-under{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-actions{ margin-top: 10px; position: relative; }
.cw-notes{
  margin-top: 6px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Clean scheduled calls list (used as mobile primary, desktop secondary) */
.mh-agenda{ margin-top: 14px; }
.mh-agenda-head{
  position: relative;
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.mh-agenda-h{
  font-weight: 1000;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.95);
  text-align: left;
  line-height: 1.05;
}
.mh-agenda-tz{
  margin-left: auto;
  text-align: right;
}

/* Mobile/desktop agenda variants */
.mh-agenda--mobile{ display:none; }

.mh-agenda-day{
  padding: 12px 2px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.mh-agenda-day:last-child{ border-bottom: none; }
.mh-agenda-title{
  font-weight: 950;
  margin: 0 0 10px 4px;
  color: rgba(255,255,255,0.92);
}
.mh-agenda-list{ display:flex; flex-direction:column; gap: 10px; }
.mh-agenda-item{
  /* Per-day accent set inline on the element */
  --accent: 255, 60, 90;
  width: 100%;
  text-align: left;
  border-radius: 16px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(var(--accent), 0.30), rgba(18, 19, 26, 0.86));
  border: 1px solid rgba(var(--accent), 0.36);
  box-shadow: 0 0 0 1px rgba(var(--accent), 0.14), 0 14px 30px rgba(0,0,0,0.34);
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mh-agenda-item:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--accent), 0.60);
  box-shadow: 0 0 0 1px rgba(var(--accent), 0.20), 0 0 28px rgba(var(--accent), 0.16), 0 20px 44px rgba(0,0,0,0.44);
}
.mh-agenda-main{ min-width: 0; }
.mh-agenda-top{ display:flex; justify-content:space-between; gap: 10px; align-items: baseline; }
.mh-agenda-name{ font-weight: 1000; color: rgba(255,255,255,0.97); }
.mh-agenda-time{ font-size: 12px; color: rgba(255,255,255,0.78); white-space: nowrap; }
.mh-agenda-time-under{ margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.80); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.mh-agenda-actions{ flex: 0 0 auto; }

.mh-agenda-subline{ margin-top: 4px; }
.mh-agenda-note{
  margin-top: 6px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Ensure the scheduled list is visible on mobile even if other layout rules change */
@media (max-width: 820px){
  .mh-agenda{ display:block; }
}

/* Events list */
.events-list{ display:flex; flex-direction:column; gap: 12px; }
.event-row{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: stretch;
}
.event-date{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   

  border-radius: 18px;
  padding: 10px 8px;
  text-align:center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255, 60, 90, 0.65);
  box-shadow: 0 0 0 1px rgba(255, 60, 90, 0.22), 0 0 18px rgba(255, 60, 90, 0.18), 0 16px 30px rgba(0,0,0,0.35);
}
.event-date .ed-mon{
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
}
.event-date .ed-day{
  font-size: 30px;
  font-weight: 1000;
  line-height: 1.1;
  margin-top: 2px;
}
.event-date .ed-dow{
  font-size: 12px;
  color: rgba(255,255,255,0.60);
  margin-top: 2px;
}

.event-card{
  border-radius: 18px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(255, 60, 90, 0.22), rgba(18, 19, 26, 0.86));
  border: 1px solid rgba(255, 60, 90, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 60, 90, 0.08), 0 18px 38px rgba(0,0,0,0.38);
  position: relative;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.event-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(520px 160px at 20% 0%, rgba(255,60,90,0.14), transparent 60%);
  opacity: 0.9;
  pointer-events:none;
}
.event-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255, 60, 90, 0.24);
  box-shadow: 0 0 0 1px rgba(255, 60, 90, 0.12), 0 22px 46px rgba(0,0,0,0.44);
}
.event-title{ font-weight: 1000; font-size: 18px; position: relative; }
.event-when{ margin-top: 2px; }
.event-meta{ margin-top: 10px; position: relative; }
.event-notes{ margin-top: 8px; position: relative; }
.event-actions{ margin-top: 12px; position: relative; display:flex; gap:10px; flex-wrap:wrap; }

/* Responsive: tighter timetable on medium screens */
@media (max-width: 920px){
  .call-week-grid{ grid-template-columns: 86px repeat(var(--day-count, 5), minmax(0, 1fr)); }
}
@media (max-width: 820px){
  /* On mobile, show the list as the primary view */
  .call-grid-wrap{ display:none; }
  .mh-agenda--mobile{ display:block; }
  .mh-agenda--desktop{ display:none; }

  .mh-toolbar{ align-items: flex-start; position: relative; }
  /* Mobile: keep week selector untouched; pin Manage/Back to top-right of the week box (same row as the Week: label) */
  .mh-toolbar-right{ width: 100%; position: static; }
  .mh-head-actions{
    position: absolute;
    top: 0;
    right: 0;
    display:flex;
    gap: 10px;
    z-index: 3;
  }
  .week-nav{
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px; /* sits under the Week: line */
  }

  .week-nav .week-range{ flex: 1 1 auto; text-align: center; font-weight: 900; }
  .week-nav .btn.small{ padding: 8px 12px; }

  .mh-agenda{ margin-top: 10px; }
  /* Keep scheduled calls pill title on the left (no horizontal centering) */
  .mh-agenda-head{ flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .mh-agenda-tz{ margin-left: auto; position: static; right: auto; top: auto; transform: none; text-align: left; white-space: normal; }
}

@media (max-width: 520px){
  .event-row{ grid-template-columns: 70px 1fr; gap: 10px; }
  .event-date{ border-radius: 16px; padding: 10px 6px; }
  .event-date .ed-day{ font-size: 26px; }
  .event-title{ font-size: 16px; }
}



/* =========================
   Mentorship Calls/Events – Admin layout polish
========================= */
.admin-form-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 18px 22px;
  align-items:end;
}
.admin-form-grid label{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 13px;
}
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea{
  width: 100%;
}
.form-notes{
  grid-column: 1 / -1;
}
.form-notes textarea{
  min-height: 96px;
}
@media (max-width: 1100px){
  .admin-form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .admin-form-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Mentorship Calls/Events – Title + action visibility tweaks
========================= */
.mentorship-schedule-page .page-head h2,
.mentorship-events-page .page-head h2{
  color: rgba(255,255,255,0.96);
  text-shadow: 0 0 18px rgba(255,59,48,.20);
}
.mentorship-schedule-page .btn.small.ghost,
.mentorship-events-page .btn.small.ghost{
  opacity: 1;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,59,48,0.22);
}
.mentorship-schedule-page .btn.small.ghost:hover,
.mentorship-events-page .btn.small.ghost:hover{
  background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 1px rgba(255,59,48,0.18) inset, 0 0 22px rgba(255,59,48,0.16);
}
.mentorship-schedule-page .week-nav{
  opacity: 1;
}
.mentorship-schedule-page .week-range{
  opacity: 0.92;
}
.mentorship-schedule-page .page-head .mh-actions{
  justify-content:flex-end;
}



/* Mentorship schedule/events page polish */
.mh-page-head .mh-title{
  color: rgba(255,255,255,0.96);
  text-shadow: 0 0 18px rgba(255,60,60,0.10);
}
.mh-page-head .mh-head-right .week-range{
  opacity: 0.98;
}
.mh-page-head .mh-head-right .btn{
  opacity: 0.98;
}
.mh-page-head .mh-head-right .btn.ghost{
  opacity: 0.94;
}
.mh-page-head .mh-head-right .btn:hover{
  opacity: 1;
}
.mh-page-head .week-nav{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
}

/* Make form grids feel less cramped */
.admin-form-grid label{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea{
  width:100%;
}

.mh-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
}
.mh-head-left{ min-width: 260px; }
.mh-head-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
}
.mh-head-actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}
@media(max-width: 860px){
  .mh-head-row{ flex-direction:column; align-items:stretch; }
  .mh-head-right{ align-items:flex-start; }
  .mh-head-actions{ 
    margin-top: -6px;   /* nudges buttons up */
    justify-content:flex-start; 
  }
}

.mh-page-head .btn{
  opacity: 0.9;
}
.mh-page-head .btn.ghost{
  opacity: 0.82;
}
.mh-page-head .btn:hover{
  opacity: 1;
}


/* =========================
   Admin Calls: Invitee picker (Discord-style)
   Scoped to admin calls page only (uses .invitee-*)
========================= */
.invitee-picker{
  margin-top: 14px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.invitee-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.invitee-title{
  font-weight: 800;
}

.invitee-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
  min-height: 26px;
}

.invitee-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,60,90,0.10);
  font-size: 13px;
}

.invitee-chip .chip-x{
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.85);
  cursor:pointer;
  line-height: 1;
}

.invitee-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.invitee-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(8px);
}

.invitee-dialog{
  position: relative;
  width: min(720px, calc(100vw - 40px));
  margin: 10vh auto 0;
  border-radius: 18px;
  padding: 18px;
  background: rgba(10,12,18,0.92);
  border: 1px solid rgba(255,60,90,0.40);
  box-shadow: 0 0 0 1px rgba(255,60,90,0.18), 0 20px 60px rgba(0,0,0,0.60);
}

.invitee-dialog-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.invitee-dialog-title{
  font-size: 18px;
  font-weight: 900;
}

.invitee-x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.9);
  cursor:pointer;
  line-height: 1;
}

.invitee-search{
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,60,90,0.55);
  color: rgba(255,255,255,0.92);
  outline: none;
}

.invitee-list{
  margin-top: 12px;
  max-height: 300px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.invitee-row{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  cursor:pointer;
  user-select:none;
}

.invitee-row:hover{
  background: rgba(255,255,255,0.03);
}

.invitee-avatar{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, rgba(255,60,90,0.35), rgba(0,0,0,0.10));
  border: 1px solid rgba(255,255,255,0.08);
}

.invitee-name{
  flex: 1;
  font-weight: 700;
}

.invitee-check{
  width: 18px;
  height: 18px;
}

.invitee-actions{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

/* prevent page scroll when modal is open */
body.modal-open{
  overflow: hidden;
}

/* =========================
   Landing Page (scoped)
   ========================= */

.landing-page{
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.landing-page .landing-bg{
  /* keep mentorship hub background behavior but ensure it doesn't escape the page */
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lp-hero{
  position: relative;
  z-index: 1;
  padding: 92px 0 70px;
}

.lp-hero-wrap{
  position: relative;
}

.lp-hero-inner{
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 18px 14px 10px;
}

.lp-title{
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 auto 14px;
  font-size: clamp(40px, 6vw, 74px);
  color: rgba(255,255,255,.96);
  text-shadow: 0 0 34px rgba(255,40,40,.22);
}

.lp-title .lp-accent{
  background: linear-gradient(180deg, rgba(255,90,90,.98), rgba(190,40,40,.90));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.lp-sub{
  margin: 0 auto 20px;
  max-width: 560px;
  font-size: 15px;
  color: rgba(255,255,255,.75);
}

.lp-cta-row{
  display: flex;
  justify-content: center;
  /* nudge CTA slightly lower */
  margin: 22px 0 22px;
}

.lp-cta{
  gap: 10px;
  padding: 12px 18px;
  border-radius: 16px;
}

/* lp-cta-arrow removed (no arrow on CTA) */

.lp-social-proof{
  display: grid;
  justify-items: center;
  gap: 8px;
  /* move the whole "Join thousands..." block lower */
  margin-top: 28px;
}

.lp-avatars{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 36px;
}

.lp-av{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid rgba(10,10,12,.65);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,80,80,.18);
  background: radial-gradient(circle at 30% 25%, rgba(255,120,120,.55), rgba(15,15,18,.55) 52%, rgba(0,0,0,.35) 100%);
  margin-left: -10px;
}

.lp-av:first-child{ margin-left: 0; }
.lp-av.a2{ filter: hue-rotate(20deg) saturate(1.15); }
.lp-av.a3{ filter: hue-rotate(-20deg) saturate(1.15); }
.lp-av.a4{ filter: hue-rotate(40deg) saturate(1.05); }
.lp-av.a5{ filter: hue-rotate(-40deg) saturate(1.05); }
.lp-av.a6{ filter: hue-rotate(10deg) saturate(1.10); }

.lp-stars{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,170,0,.12);
  border: 1px solid rgba(255,170,0,.22);
  color: rgba(255,190,70,.95);
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 12px 30px rgba(0,0,0,.26);
}

.lp-proof-text{
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

/* Section-only grid lines like reference (subtle, dashed) */
.lp-gridlines{
  overflow: hidden;
}

.lp-gridlines::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    repeating-linear-gradient(
      to right,
      rgba(255,80,80,.14) 0,
      rgba(255,80,80,.14) 1px,
      transparent 1px,
      transparent 150px
    );
  /* dashed via mask (modern browsers); falls back to solid thin guides */
  -webkit-mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0 10px, rgba(0,0,0,0) 10px 20px);
  mask-image: repeating-linear-gradient(to bottom, rgba(0,0,0,1) 0 10px, rgba(0,0,0,0) 10px 20px);
}

.lp-reviews{
  margin-top: 78px; /* push reviews lower like the reference */
  padding: 18px 0 0;
  position: relative;
}

/* Full-bleed reviews like reference (landing main.wrap is already full width) */
.lp-reviews-lg{
  position: relative;
  width: 100%;
  margin: 0;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 18px;
}

/* Natural edge fade (NO "blur boxes"); uses mask so it blends into the background */
.lp-reviews-lg{
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    transparent 100%
  );
}

.lp-marquee{
  position: relative;
  overflow: hidden;
  /* tighter rows (top + bottom feel grouped) */
  padding: 4px 0;
}

/* Keep rows closer together (remove big vertical gap) */
.lp-marquee + .lp-marquee{ margin-top: 2px; }

.lp-track{
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}

.lp-marquee-a .lp-track{
  animation: lp-marquee-left 42s linear infinite;
}
.lp-marquee-b .lp-track{
  animation: lp-marquee-right 54s linear infinite;
}

.lp-marquee:hover .lp-track{
  animation-play-state: paused;
}

@keyframes lp-marquee-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes lp-marquee-right{
  from{ transform: translateX(-50%); }
  to{ transform: translateX(0); }
}

.lp-card{
  width: min(520px, 88vw);
  border-radius: 18px;
  padding: 18px 18px 18px;
  background: rgba(18,18,22,.62);
  border: 1px solid rgba(255,80,80,.10);
  box-shadow: 0 16px 45px rgba(0,0,0,.40);
  backdrop-filter: blur(12px);
}

.lp-card-top{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.lp-card-stars{
  color: rgba(255,190,70,.95);
  letter-spacing: 1px;
  font-weight: 900;
  font-size: 12px;
}

.lp-card-name{
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 12px;
}

.lp-card p{
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 1.35;
}

/* Mobile performance: reduce marquee speed + keep spacing comfortable */
@media (max-width: 720px){
  .lp-hero{ padding: 78px 0 58px; }
  .lp-reviews{ margin-top: 30px; }
  .lp-marquee-a .lp-track{ animation-duration: 34s; }
  .lp-marquee-b .lp-track{ animation-duration: 42s; }
}


/* ===== Landing Page tweaks (section 1 refinements) ===== */
body.is-landing .topbar{ display:none !important; }
body.is-landing .page-tools{ display:none !important; }
body.is-landing{ overflow-x: hidden; }
body.is-landing{ overflow-x:hidden; }

/* Landing uses its own header and full-bleed sections; remove default main wrap padding/width */
body.is-landing main.wrap{
  max-width: none;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Custom landing header (TraderVue-like layout, styled to match site) */
.landing-page .lp-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.28), rgba(0,0,0,0));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,80,80,.10);
}
.landing-page .lp-topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  align-items: center;
  gap: 16px;
}
.landing-page .lp-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}
.landing-page .lp-brand-mark{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(255,60,60,.10), 0 18px 35px rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
}
.landing-page .lp-brand-text{
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.landing-page .lp-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 26px;
}
.landing-page .lp-nav a{
  color: rgba(255,255,255,.82);
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  opacity: .95;
}
.landing-page .lp-nav a:hover{
  color: rgba(255,255,255,.98);
  text-shadow: 0 0 18px rgba(255,60,60,.22);
}
.landing-page .lp-auth{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap: 14px;
}
.landing-page .lp-login{
  color: rgba(255,255,255,.80);
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
}
.landing-page .lp-login:hover{ color: rgba(255,255,255,.98); }

.landing-page .lp-signup{
  padding: 10px 14px;
  border-radius: 14px;
}

/* Red CTA button for landing (header + hero) */
.landing-page .lp-btn-red{
  background: linear-gradient(180deg, rgba(255,60,60,.98), rgba(185,24,24,.92));
  border: 1px solid rgba(255,80,80,.34);
  color: rgba(255,255,255,.95);
  box-shadow:
    0 14px 35px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,60,60,.12),
    0 0 26px rgba(255,60,60,.20);
  position: relative;
  overflow: hidden;
  animation: lp-red-pulse 3.2s ease-in-out infinite;
}
.landing-page .lp-btn-red:hover{
  transform: translateY(-1px);
  box-shadow:
    0 18px 46px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,60,60,.18),
    0 0 34px rgba(255,60,60,.28);
}
.landing-page .lp-btn-red::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  transform: translateX(-40%) rotate(12deg);
  opacity: .55;
  pointer-events:none;
  animation: lp-shimmer 4.8s linear infinite;
}
@keyframes lp-red-pulse{
  0%,100%{ filter: saturate(1); }
  50%{ filter: saturate(1.12) brightness(1.02); }
}
@keyframes lp-shimmer{
  0%{ transform: translateX(-55%) rotate(12deg); opacity:.35; }
  40%{ opacity:.55; }
  100%{ transform: translateX(55%) rotate(12deg); opacity:.28; }
}

/* Mobile: only show the Log In control in the landing header */
@media (max-width: 720px){
  .landing-page .lp-topbar-inner{ grid-template-columns: 1fr auto; }
  .landing-page .lp-nav{ display:none; }
  .landing-page .lp-signup{ display:none; }
  .landing-page .lp-login{
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
  }
}

/* Pull hero content up slightly */
.landing-page .lp-hero{
  padding-top: 56px;
}

/* Responsive landing header */
@media (max-width: 920px){
  .landing-page .lp-topbar-inner{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  .landing-page .lp-nav{
    grid-column: 1 / -1;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .landing-page .lp-auth{
    justify-content:flex-end;
  }
}
@media (max-width: 520px){
  .landing-page .lp-nav{ display:none; }
  .landing-page .lp-topbar{ padding: 12px 0; }
  .landing-page .lp-hero{ padding-top: 44px; }
  .landing-page .lp-card{ min-width: 300px; }
}


/* ===== Landing Page hotfix: tighten review rows + spacing (landing-only) ===== */
.landing-page .lp-marquee{ margin-top: 0 !important; }
.landing-page .lp-marquee + .lp-marquee{ margin-top: 0 !important; }
.landing-page .lp-track{ padding: 6px 0 !important; }

/* ===== Landing Section 2: Image showcase (no frame, transparent edges) ===== */
.landing-page .lp-showcase{
  position: relative;
  padding: 58px 0 78px;
}

.landing-page .lp-showcase-inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Red scribble line behind the image (NO glow) */
.landing-page .lp-scribble{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140vw;
  max-width: none;
  pointer-events: none;
  z-index: 0;
  opacity: .95;
}
.landing-page .lp-scribble svg{
  display:block;
  width: 140vw;
  height: 140px;
  max-width: none;
}

/* Simple image box (no device border, no shade behind transparency) */
.landing-page .lp-image-box{
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.landing-page .lp-image-box img{
  display:block;
  width: 100%;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Reveal animation (on first scroll into view) */
.landing-page [data-reveal]{
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .75s ease, transform .75s ease;
  will-change: opacity, transform;
}
.landing-page [data-reveal].is-inview{
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  .landing-page [data-reveal]{ transition: none; opacity: 1; transform: none; }
}

/* Reviews: remove any banding/shade + never pause on hover */
.landing-page .lp-marquee,
.landing-page .lp-track{
  background: transparent !important;
  backdrop-filter: none !important;
}
.landing-page .lp-marquee:hover .lp-track{
  animation-play-state: running !important;
}



/* =========================================================
   Landing (page 1) - AiWave frame replacement (red theme)
   ========================================================= */
body.is-landing .lp-aiwave-frame{
  max-width: 1100px;
  margin: 0 auto;
}

body.is-landing .lp-aiwave-frame .lp-aiwave-frame-inner{
  position: relative;
  border-radius: 28px;
  padding: 28px;
  overflow: hidden;

  /* Red, mentorship-hub style glow */
  background:
    radial-gradient(1000px 520px at 50% 10%, rgba(255,59,48,0.18), transparent 60%),
    radial-gradient(900px 520px at 50% 95%, rgba(255,59,48,0.10), transparent 65%),
    rgba(8,10,18,0.55);

  border: 1px solid rgba(255,59,48,0.22);
  box-shadow:
    0 0 0 1px rgba(255,59,48,0.10) inset,
    0 30px 90px rgba(0,0,0,0.55),
    0 0 55px rgba(255,59,48,0.18);
}

body.is-landing .lp-aiwave-frame .lp-aiwave-frame-inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 10%, rgba(255,59,48,0.14) 42%, transparent 60%);
  transform: translateX(-35%);
  opacity: 0.75;
  animation: lpAiwaveSheen 8s ease-in-out infinite;
}

@keyframes lpAiwaveSheen{
  0%   { transform: translateX(-38%); opacity: 0.45; }
  50%  { transform: translateX(38%);  opacity: 0.85; }
  100% { transform: translateX(-38%); opacity: 0.45; }
}

body.is-landing .lp-aiwave-frame .slider-image-effect{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    0 0 28px rgba(255,59,48,0.10);
  animation: lpAiwaveFloat 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes lpAiwaveFloat{
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

@media (max-width: 767px){
  body.is-landing .lp-aiwave-frame .lp-aiwave-frame-inner{
    padding: 18px;
    border-radius: 22px;
  }
  body.is-landing .lp-aiwave-frame .slider-image-effect{
    border-radius: 14px;
  }
}


/* --- Landing (AiWave image holder) overrides: stop bounce + thicker border --- */
.landing-aiwave-preview,
.slider-frame,
.slider-frame .slider-image-effect,
.landing-aiwave-preview .slider-frame {
  animation: none !important;
  transform: none !important;
}

.landing-aiwave-preview .slider-frame,
.slider-frame {
  border-width: 4px !important;           /* thicker like blue version */
  box-shadow:
    0 0 0 1px rgba(255, 50, 80, 0.35),
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 0 38px rgba(255, 50, 80, 0.22) !important;
}

/* make the frame feel "bigger" and closer to the blue version proportions */
.landing-aiwave-preview .slider-frame,
.slider-frame {
  padding: 28px !important;
  border-radius: 22px !important;
}

/* ensure image respects the larger frame */
.landing-aiwave-preview .slider-image-effect,
.slider-frame .slider-image-effect {
  border-radius: 16px !important;
}


/* --- Landing (AiWave image holder) border upscale (blue-like) --- */
.landing-aiwave-preview .slider-frame,
.slider-frame.lp-aiwave-frame-inner,
.slider-frame {
  border-width: 4px !important;
  padding: 28px !important;
  border-radius: 26px !important;
  /* inner stroke */
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: -12px;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(255, 50, 80, 0.40),
    0 0 0 10px rgba(255, 50, 80, 0.08),
    0 26px 90px rgba(0, 0, 0, 0.62),
    0 0 70px rgba(255, 50, 80, 0.22) !important;
}
.landing-aiwave-preview .slider-image-effect,
.slider-frame .slider-image-effect{
  border-radius: 18px !important;
}


/* ===== Landing: Trusted logos marquee (AiWave-style) ===== */
body.is-landing .lp-aiwave-width{
  width: 100%;
  max-width: 1200px;   /* match the preview frame width */
  margin-left: auto;
  margin-right: auto;
}

body.is-landing .lp-trusted{
  padding: 34px 16px 18px;      /* bigger section */
}

/* helps the image box above blend into this strip */
body.is-landing .lp-showcase{
  position: relative;
  padding-bottom: 26px;
}
body.is-landing .lp-showcase::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-2px;
  height:70px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.55));
  opacity: 0.9;
}

/* headline/kicker */
body.is-landing .lp-trusted-kicker{
  text-align: center;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.78;
  margin-bottom: 18px;
}

/* marquee container */
body.is-landing .lp-logo-marquee{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 16px 0;              /* taller like AiWave */
  background: linear-gradient(180deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.22),
    rgba(0,0,0,0.05)
  );
}

/* fade edges like AiWave */
body.is-landing .lp-logo-marquee::before,
body.is-landing .lp-logo-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 120px;
  z-index: 2;
  pointer-events:none;
}
body.is-landing .lp-logo-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.95), rgba(0,0,0,0.0));
}
body.is-landing .lp-logo-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(0,0,0,0.95), rgba(0,0,0,0.0));
}

/* track: seamless loop with duplicated content */
body.is-landing .lp-logo-track{
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  will-change: transform;
  animation: lpLogoScroll 16s linear infinite;
  transform: translate3d(0,0,0);
}

/* items */
body.is-landing .lp-logo-item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  filter: grayscale(1);
  transition: opacity 180ms ease, filter 180ms ease;
  z-index: 1; /* under fades */
}

body.is-landing .lp-logo-item img{
  height: 36px;                 /* bigger logos */
  width: auto;
  display: block;
}

body.is-landing .lp-logo-item:hover{
  opacity: 1;
  filter: grayscale(0);
}

/* true seamless loop: our HTML already duplicates the logos twice.
   translate exactly half the track length (first set) */
@keyframes lpLogoScroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  body.is-landing .lp-logo-track{ animation: none; }
}

body.is-landing .lp-aiwave-width{
  width: 100%;
  max-width: 1200px;   /* match the preview frame width */
  margin-left: auto;
  margin-right: auto;
}

body.is-landing .lp-trusted{
  padding: 26px 16px 10px;
}

body.is-landing .lp-trusted-kicker{
  text-align: center;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 14px;
}

body.is-landing .lp-logo-marquee{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 10px 0;
  /* subtle blend with your red glow background */
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.25), rgba(0,0,0,0.00));
}

body.is-landing .lp-logo-track{
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: lpLogoScroll 18s linear infinite;
  will-change: transform;
}

body.is-landing .lp-logo-item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 180ms ease, filter 180ms ease;
}

body.is-landing .lp-logo-item img{
  height: 26px;
  width: auto;
  display: block;
}

body.is-landing .lp-logo-item:hover{
  opacity: 1;
  filter: grayscale(0);
}

@keyframes lpLogoScroll{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  body.is-landing .lp-logo-track{ animation: none; }
}
/* --- Header "Coming soon" links --- */
.nav a.nav-coming-soon,
.nav-mobile-panel a.nav-coming-soon{
  cursor:not-allowed;
  pointer-events:none;
  opacity:0.38;
  color:rgba(255,255,255,0.5) !important;
}

/* --- Header locked nav links (free/unpaid members) --- */
.nav a.nav-locked,
.nav-mobile-panel a.nav-locked{
  display:inline-flex;
  align-items:center;
  gap:4px;
  opacity:0.38;
  color:rgba(255,255,255,0.5) !important;
  cursor:pointer;
  text-decoration:none;
  transition: opacity .15s ease, color .15s ease;
}

.nav a.nav-locked:hover,
.nav-mobile-panel a.nav-locked:hover{
  opacity:0.55;
  color:rgba(255,255,255,0.65) !important;
  text-decoration:none;
}

.nav-lock-icon{
  width:12px;
  height:12px;
  flex-shrink:0;
  opacity:0.7;
}

.nav-mobile-panel a.nav-locked .nav-lock-icon{
  width:13px;
  height:13px;
}


/* =========================
   Desktop Left Sidebar (≥1401px)
   Converts the top header into a fixed left-side vertical navigation.
========================= */

/* Nav icon (inline SVG) shared style */
.nav-icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.7;
  display: none; /* hidden on mobile/hamburger, shown on desktop sidebar */
}

/* Sidebar collapse button: hidden on mobile */
.sidebar-collapse-btn{ display: none; }

/* Sidebar bottom section: show .who on mobile, full section on desktop */
.sidebar-bottom{
  display: contents; /* let children flow into parent flex on mobile */
}
.sidebar-bottom .session-counter-chip-desktop{ display: none; }
.sidebar-bottom .who-user-row{ display: none; }

@media (min-width: 1401px){

  /* --- Nav icons visible on desktop sidebar --- */
  .nav-icon{ display: inline-block; }

  /* --- Sidebar container --- */
  .topbar{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-bottom: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    background: rgba(7,10,18,0.88);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,59,48,0.45) transparent;
    transition: width .2s ease;
  }
  .topbar::-webkit-scrollbar{ width: 5px; }
  .topbar::-webkit-scrollbar-track{ background: transparent; }
  .topbar::-webkit-scrollbar-thumb{ background: rgba(255,59,48,0.40); border-radius: 999px; }
  .topbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,59,48,0.65); }

  /* --- Brand / logo area at top of sidebar --- */
  .topbar-left{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    width: 100%;
  }
  .topbar-left .brand-link{ justify-self: start; }
  .brand-logo{ height: 32px; }

  /* --- Sidebar collapse button --- */
  .sidebar-collapse-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, transform .2s;
  }
  .sidebar-collapse-btn:hover{
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
  }
  /* Rotate arrow when collapsed */
  .topbar.is-collapsed .sidebar-collapse-btn{
    transform: rotate(180deg);
  }

  /* --- Desktop nav is now vertical --- */
  .nav-desktop{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 10px 0;
    flex: 1;
    justify-self: stretch;
  }

  .nav.nav-desktop{
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    width: 100%;
  }

  .nav a .nav-icon{ opacity: 0.6; }
  .nav a:hover .nav-icon{ opacity: 0.85; }
  .nav a.active .nav-icon{ opacity: 1; }

  /* Mentorship CTA in sidebar */
  .nav a.nav-cta{
    margin-right: 0;
    margin-bottom: 6px;
  }

  /* Locked nav items in sidebar */
  .nav a.nav-locked{
    gap: 10px;
  }

  /* --- Sidebar bottom section --- */
  .sidebar-bottom{
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: auto;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .sidebar-bottom .session-counter-chip-desktop{ display: inline-flex; }
  .sidebar-bottom .who-user-row{ display: flex; }

  /* --- Session counter at bottom of sidebar --- */
  .session-counter-chip-desktop{
    display: inline-flex;
    margin: 10px 10px 6px;
    width: calc(100% - 20px);
    justify-content: center;
    transform: scale(0.92);
  }

  /* --- Who / user info area at bottom of sidebar --- */
  .who{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 12px 12px;
    width: 100%;
    margin-top: 0;
    border-top: none;
  }
  .who .pill{ font-size: 11px; padding: 4px 8px; }
  .who .pill.online{ width: 100%; justify-content: center; }
  /* Username + role on one line */
  .who-user-row{
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* --- Logout link styling --- */
  .nav a.nav-logout{
    margin-top: auto;
    opacity: 0.6;
    font-weight: 600;
  }
  .nav a.nav-logout:hover{ opacity: 0.85; }

  /* --- Admin dropdown: popup mode for sidebar --- */
  .nav-admin{
    width: 100%;
    margin: 0;
    position: relative;
  }
  .nav-admin-summary{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 10px;
    width: 100%;
    transition: background .15s;
  }
  .nav-admin[open] .nav-admin-summary{
    background: rgba(255,255,255,0.06);
    border-radius: 10px 10px 0 0;
  }
  .nav-admin-menu{
    position: static;
    min-width: 0;
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,59,48,0.45) transparent;
    border-radius: 0 0 10px 10px;
    margin-top: 0;
    padding: 4px 6px 6px;
    box-shadow: none;
    background: rgba(255,255,255,0.03);
    border: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .nav-admin-menu::-webkit-scrollbar{ width: 5px; }
  .nav-admin-menu::-webkit-scrollbar-track{ background: transparent; border-radius: 999px; }
  .nav-admin-menu::-webkit-scrollbar-thumb{ background: rgba(255,59,48,0.40); border-radius: 999px; }
  .nav-admin-menu::-webkit-scrollbar-thumb:hover{ background: rgba(255,59,48,0.65); }
  .nav-admin-menu a{
    padding: 7px 10px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* --- Push main content to the right of the sidebar --- */
  body.page-body{
    padding-left: 220px;
    transition: padding-left .2s ease;
  }
  /* Login page: no sidebar, no offset */
  body.is-login{
    padding-left: 0;
  }
  /* Landing page: no sidebar */
  body.is-landing{
    padding-left: 0;
  }
  /* Pages with hidden header (funnels etc): no sidebar offset */
  body.is-no-sidebar{
    padding-left: 0;
  }

  .footer{
    margin-left: 0;
  }

  /* --- Wrap needs top padding since no top header --- */
  .wrap{
    padding-top: 40px;
  }
  /* Calendar page is already fine with less padding */
  .wrap:has(> .cal-header){
    padding-top: 14px;
  }

  /* --- Nav separator before logout --- */
  .nav a.nav-logout{
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 12px;
    margin-top: 8px;
    border-radius: 0 0 10px 10px;
  }

  /* =========================
     Sidebar Collapsed state (desktop, user-toggled)
  ========================= */
  .topbar.is-collapsed{
    width: 56px;
    align-items: center;
  }
  body.page-body.sidebar-collapsed{
    padding-left: 56px;
  }
  .topbar.is-collapsed .topbar-left{
    padding: 10px 8px;
    justify-content: center;
  }
  .topbar.is-collapsed .brand-link{
    display: none;
  }
  .topbar.is-collapsed .nav.nav-desktop{
    padding: 8px 6px;
    align-items: center;
  }
  .topbar.is-collapsed .nav a{
    justify-content: center;
    padding: 10px;
    width: 40px;
    height: 40px;
    position: relative;
  }
  .topbar.is-collapsed .nav a span,
  .topbar.is-collapsed .nav-admin-summary span{
    display: none;
  }
  .topbar.is-collapsed .nav a .nav-icon{
    width: 18px;
    height: 18px;
    opacity: 0.75;
  }
  .topbar.is-collapsed .nav a .nav-lock-icon{
    width: 16px;
    height: 16px;
  }
  /* Collapsed sidebar bottom */
  .topbar.is-collapsed .sidebar-bottom{
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .topbar.is-collapsed .session-counter-chip-desktop{
    display: none;
  }
  .topbar.is-collapsed .who{
    padding: 8px;
    align-items: center;
  }
  .topbar.is-collapsed .who .pill{
    font-size: 0;
    padding: 6px;
    min-width: 0;
  }
  .topbar.is-collapsed .who .pill.online{
    font-size: 11px;
    padding: 5px 4px;
    justify-content: center;
    width: 100%;
  }
  .topbar.is-collapsed .who .pill.online .pill-icon{ display: none; }
  .topbar.is-collapsed .who .pill.online .pill-text{ display: inline; font-size: 11px; }
  .topbar.is-collapsed .who-user-row{ display: none; }
  /* Admin menu when collapsed */
  .topbar.is-collapsed .nav-admin{
    width: 40px;
  }
  .topbar.is-collapsed .nav-admin-summary{
    justify-content: center;
    padding: 10px;
    width: 40px;
    height: 40px;
  }
  .topbar.is-collapsed .nav-admin-summary .nav-icon{
    width: 18px;
    height: 18px;
    margin: 0;
  }
  .topbar.is-collapsed .nav-admin-menu{
    position: fixed;
    left: 56px;
    min-width: 220px;
    max-height: min(70vh, 500px);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    background: rgba(12,14,24,0.98);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: none;
    z-index: 90;
  }
  /* Tooltip on hover for collapsed sidebar links */
  .topbar.is-collapsed .nav a::after{
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(16,18,28,0.98);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 100;
  }
  .topbar.is-collapsed .nav a:hover::after{
    opacity: 1;
  }
  .topbar.is-collapsed .nav a:not([data-tip])::after{
    display: none;
  }

  /* =========================
     Journal page: always collapse sidebar to icons-only
     to avoid double-sidebar clutter
  ========================= */
  body.is-journal .topbar{
    width: 56px;
    align-items: center;
  }
  body.is-journal{
    padding-left: 56px;
  }
  body.is-journal .topbar-left{
    display: none;
  }
  body.is-journal .session-counter-chip-desktop{
    display: none;
  }
  body.is-journal .nav.nav-desktop{
    padding: 8px 6px;
    align-items: center;
  }
  body.is-journal .nav a{
    justify-content: center;
    padding: 10px;
    width: 40px;
    height: 40px;
    position: relative;
  }
  body.is-journal .nav a span,
  body.is-journal .nav-admin-summary span{
    display: none;
  }
  body.is-journal .nav a .nav-icon{
    width: 18px;
    height: 18px;
    opacity: 0.75;
  }
  body.is-journal .nav a .nav-lock-icon{
    width: 16px;
    height: 16px;
  }
  body.is-journal .sidebar-bottom{
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  body.is-journal .who{
    padding: 8px;
    align-items: center;
  }
  body.is-journal .who .pill{
    font-size: 0;
    padding: 6px;
    min-width: 0;
  }
  body.is-journal .who .pill.online{
    font-size: 11px;
    padding: 5px 4px;
    justify-content: center;
    width: 100%;
  }
  body.is-journal .who .pill.online .pill-icon{ display: none; }
  body.is-journal .who .pill.online .pill-text{ display: inline; font-size: 11px; }
  body.is-journal .who-user-row{ display: none; }
  /* Admin menu in journal icons-only mode */
  body.is-journal .nav-admin{
    width: 40px;
  }
  body.is-journal .nav-admin-summary{
    justify-content: center;
    padding: 10px;
    width: 40px;
    height: 40px;
  }
  body.is-journal .nav-admin-summary .nav-icon{
    width: 18px;
    height: 18px;
    margin: 0;
  }
  body.is-journal .nav-admin-menu{
    position: fixed;
    left: 56px;
    min-width: 220px;
    max-height: min(70vh, 500px);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    background: rgba(12,14,24,0.98);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: none;
    z-index: 90;
  }

  /* Tooltip on hover for journal collapsed sidebar links */
  body.is-journal .nav a::after{
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(16,18,28,0.98);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.88);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 100;
  }
  body.is-journal .nav a:hover::after{
    opacity: 1;
  }
  body.is-journal .nav a:not([data-tip])::after{
    display: none;
  }

}

/* Medium desktop (1401–1700): keep sidebar narrower */
@media (min-width: 1401px) and (max-width: 1700px){
  .topbar{ width: 200px; }
  body.page-body{ padding-left: 200px; }
  .nav a{ font-size: 14px; padding: 9px 10px; }
  .nav-admin-menu{ left: 200px; min-width: 220px; }
}