/* =========================
   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,body{ height:100%; }
body{
  margin:0;
  min-height: 100%;
  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:
    radial-gradient(1200px 900px at 20% 0%, rgba(59,130,246,0.10), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(34,197,94,0.06), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-repeat: no-repeat;
  background-attachment: fixed;
  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:space-between;
  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);}

.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: 741px){
  .topbar{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 14px;
  }
  .brand{ justify-self: start; }
  .nav-desktop{ justify-self: center; }
  .who{ justify-self: end; }
}


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

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

/* Mobile: compact + dynamically sized (icon + number only).
   Desktop keeps min-width to avoid header jitter when counts change. */
@media (max-width: 740px){
  .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);
}
.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; }

/* File inputs tend to sit higher/lower across browsers; normalize height */
.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;
    -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"
    "comments comments comments"; /* ✅ always below, full width */
  gap: 16px;
  align-items:start;
}

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

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

.member-comments-col{
  grid-area: comments;
  align-items:center;
  display:flex;
  flex-direction:column;
  gap: 16px;
}

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

@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;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 6px;
}

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

.comment-time{
  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;
  vertical-align: top;
}

.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;
}
.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 */
.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-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: 20;

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


/* =========================
   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: none; }

/* 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;
  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;
}
.nav-mobile-panel a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  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);
}

@media (max-width: 740px){
  .nav-desktop{ display:none; }
  .nav-mobile{ display:flex; }

  /* Mobile header: centered title + hamburger menu on the right */
  .topbar{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .brand{
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }
  .nav-mobile{
    grid-column: 3;
    justify-self: end;
  }
  /* Mobile: keep presence pill on the top-left (aligned with title) and hide name/role pills
     because they already appear inside the hamburger dropdown. */
  .who{
    display:flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    justify-content: flex-start;
    margin-top: 0;
    gap: 8px;
  }
  .who .pill:not(.online){
    display:none;
  }
}

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

.member-comments-list.scrollbox {
  max-height: 420px;   /* members comments after 10 */
}

/* =========================================================
   Desktop: bottom Members Comments should NOT be pinned to mid column
   Force it to span the entire grid row, then center the panel
   ========================================================= */
@media (min-width: 901px){
  .member-comments-col{
    grid-column: 1 / -1 !important;  /* span ALL columns (left + mid + right) */
    width: 100%;
    display: flex;
    justify-content: center;         /* center the panel inside the full row */
  }

  .member-comments-col > .panel{
    width: min(1100px, 100%);
  }
}

/* =========================================================
   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;
  padding: 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;
  gap: 8px;
  margin-top: 14px;
}

.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: 28px 22px 22px;
  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 14px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  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: 8px;
}

.hero-pill{
  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);
}

/* MAIN CARD */
.funnel-card{
  margin-top: 16px;
  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: start;
}

/* 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: 14px;
  display: flex;
  flex-wrap: wrap;
  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: 16px;
  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; }
}

/* =====================================================================
   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;
}

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

/* 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: hidden; }

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

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


/* =========================
   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-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;
  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 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: 860px){
  /* 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;
    margin-top: 10px;
    box-shadow: none;
    background: rgba(255,255,255,0.03);
  }
}


/* =========================
   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 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: 18px; }
.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 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;
}

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

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

.call-week-grid{
  display: grid;
  grid-template-columns: 78px repeat(var(--day-count, 5), minmax(120px, 1fr));
  /* Slightly tighter vertical spacing between hours */
  grid-template-rows: 44px repeat(var(--slot-count), 38px);
  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{
  /* 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{
  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{
  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;
  /* 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;
}

/* 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: linear-gradient(180deg, rgba(18,18,22,0.92), rgba(10,10,14,0.92));
  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;
  -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;
  -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(140px, 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;
}