/* ==========================================================================
   SunTeam v2 — SunMeet academy (/sun/meet)
   ========================================================================== */
.mt { overflow-x: clip; }
.mt-hero { position: relative; padding: 14px 0 20px; overflow: hidden; }
.mt-hero .hero-bg { z-index: -1; }
.mt-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.mt-copy { display: flex; flex-direction: column; gap: 16px; }
.mt-copy .lead { margin: 0; }
.mt-copy .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-art > svg { display: block; width: 100%; max-width: 500px; height: auto; margin-inline: auto; overflow: visible; }
.mt-laptop { animation: mt-float 6s ease-in-out infinite; }
.mt-bubble { animation: mt-pop 4s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom left; }
.mt-bubble.b2 { animation-delay: -2s; transform-origin: bottom right; }
.mt-cap { animation: mt-float 5s ease-in-out infinite reverse; }
.mt-book { animation: mt-float 7s ease-in-out infinite; }
.mt-spark path { transform-box: fill-box; transform-origin: center; animation: mt-tw 2.6s ease-in-out infinite; }
@keyframes mt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mt-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.08); } 55% { transform: scale(.98); } }
@keyframes mt-tw { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } }

.mt-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.mt-stats div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.ms-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #111318; color: var(--sun-400); }
.mt-stats b { font-size: var(--fs-xl); font-weight: 900; line-height: 1.2; }
.mt-stats small { font-size: var(--fs-xs); color: var(--text-3); }

/* status pills */
.mm-st { display: inline-flex; align-items: center; width: fit-content; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.mm-st.done { background: var(--surface-sunk); color: var(--text-3); }
.mm-st.open { background: var(--mint-soft); color: var(--mint); }
.mm-st.full { background: var(--rose-soft, #FDE7E4); color: var(--rose, #F04438); }
.mm-st.live { background: #F04438; color: #fff; }

/* my sessions */
.mt-mine { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: center; padding: 22px; border-radius: 28px; background: #111318; color: #fff; }
.mm-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mm-head .eyebrow { background: rgba(255,212,0,.14); color: #FFE45C; }
.mm-head p { margin: 0; color: rgba(255,255,255,.7); font-size: var(--fs-sm); line-height: 1.9; }
.mm-head b { color: var(--sun-400); }
.mm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-list li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); }
.mm-list small { color: rgba(255,255,255,.55); font-size: var(--fs-xs); }

/* upcoming */
.mt-up { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.mu-card { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--sun-400), var(--sh-2); }
.mu-date { display: flex; flex-direction: column; align-items: center; padding: 10px 0; border-radius: 18px; background: #111318; color: #fff; }
.mu-date b { font-size: 1.6rem; font-weight: 900; color: var(--sun-400); line-height: 1.1; }
.mu-date span { font-size: var(--fs-xs); }
.mu-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mu-body small { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); }
.mu-cap { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text-3); }
.mu-cap i { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-sunk); position: relative; overflow: hidden; }
.mu-cap i::after { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--w); background: linear-gradient(90deg, #FFE45C, #F2C200); border-radius: inherit; }
.mu-cd { display: flex; gap: 6px; }
.mu-cd span { display: flex; align-items: baseline; gap: 3px; padding: 4px 8px; border-radius: 10px; background: var(--amber-soft); font-size: var(--fs-xs); }
.mu-cd b { font-weight: 900; }
.mt-empty { display: flex; align-items: center; gap: 20px; padding: 22px; border-radius: 26px; background: linear-gradient(135deg, var(--sun-50), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.mt-empty svg { width: 110px; flex: none; }
.mt-empty b { font-size: var(--fs-lg); font-weight: 900; }
.mt-empty p { margin: 6px 0 12px; color: var(--text-2); line-height: 1.9; font-size: var(--fs-sm); }

/* course */
.mt-course { display: grid; grid-template-columns: 300px 1fr; gap: 0; border-radius: 28px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }
.mc-cover { position: relative; background: #111318; }
.mc-cover svg { display: block; width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.mc-cover .tag { position: absolute; top: 14px; inset-inline-start: 14px; }
.mc-body { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.mc-body h3 { font-size: var(--fs-xl); font-weight: 900; }
.mc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-meta span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--surface-sunk); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.mc-eps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mc-eps li { display: grid; grid-template-columns: 34px minmax(120px, 1fr) minmax(80px, 1.2fr) 46px auto; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s; }
.mc-eps li:hover { background: var(--sun-50); }
.ep-n { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #111318; color: var(--sun-400); font-weight: 900; }
.ep-b b { display: block; font-size: var(--fs-sm); }
.ep-b small { font-size: var(--fs-xs); color: var(--text-3); }
.ep-cap { height: 8px; border-radius: 99px; background: var(--surface-sunk); position: relative; overflow: hidden; }
.ep-cap i { position: absolute; inset: 0 0 0 auto; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #8BD17C, #12B76A); }
.ep-f { font-weight: 900; font-size: var(--fs-sm); text-align: center; }

/* learning path */
.mt-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.mt-path > li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 16px; border-radius: 26px; background: linear-gradient(170deg, color-mix(in srgb, #FFC107 calc(8% + var(--i) * 8%), var(--surface)), var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.mt-path > li::after { content: ""; position: absolute; top: 56px; inset-inline-end: -14px; width: 14px; height: 2px; background: var(--line-strong); }
.mt-path > li:last-child::after { display: none; }
.mp-badge .club-badge { width: 70px; height: 70px; }
.mp-step { font-size: var(--fs-xs); font-weight: 800; color: var(--text-3); }
.mt-path b { font-size: var(--fs-lg); font-weight: 900; }
.mt-path small { color: var(--accent-ink); font-weight: 700; font-size: var(--fs-xs); }
.mt-path ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: start; }
.mt-path ul li { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 12px; background: var(--surface); font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.mt-path ul .ic { color: var(--mint); flex: none; }

/* how + teachers */
.mt-two { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.mt-how, .mt-teachers { padding: 24px; border-radius: 28px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 12px; }
.mt-how ol { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.mt-how li { display: flex; gap: 12px; align-items: flex-start; }
.mt-how li > span { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--amber-soft); color: var(--accent-ink); }
.mt-how b { font-weight: 900; }
.mt-how p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.9; }
.mt-teacher { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface-sunk); }
.mtt-av { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #111318; color: var(--sun-400); font-weight: 900; font-size: 1.3rem; box-shadow: 0 0 0 3px var(--sun-400); }
.mt-teacher > div:nth-child(2) { flex: 1; }
.mt-teacher small { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.mtt-n { display: flex; gap: 6px; }
.mtt-n span { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--surface); font-size: 10.5px; color: var(--text-3); }
.mtt-n b { font-size: var(--fs-md); font-weight: 900; color: var(--text); }
.mt-platform { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #111318; color: rgba(255,255,255,.8); font-size: var(--fs-sm); line-height: 1.9; }
.mt-platform .ic { color: var(--sun-400); flex: none; margin-top: 4px; }
.mt-platform p { margin: 0; }

@media (prefers-reduced-motion: reduce) { .mt-laptop, .mt-bubble, .mt-cap, .mt-book, .mt-spark path { animation: none; } }
@media (max-width: 1100px) { .mt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mt-path { grid-template-columns: 1fr 1fr; } .mt-path > li::after { display: none; } }
@media (max-width: 960px) {
  .mt-hero-grid, .mt-mine, .mt-course, .mt-two { grid-template-columns: 1fr; }
  .mt-art { order: -1; max-width: 360px; margin-inline: auto; }
  .mc-cover svg { max-height: 200px; }
}
@media (max-width: 560px) {
  .mt-stats { grid-template-columns: 1fr 1fr; }
  .mm-list, .mt-path { grid-template-columns: 1fr; }
  .mc-eps li { grid-template-columns: 30px 1fr auto; }
  .mc-eps .ep-cap, .mc-eps .ep-f { display: none; }
  .mu-card { grid-template-columns: 60px 1fr; }
  .mu-card .btn { grid-column: 1 / -1; }
  .mt-empty { flex-direction: column; text-align: center; }
}