/* VƯỜN NGOẠI NGỮ v6.15.218 — Visual Architecture Refresh + Mobile Stability
   Goal: clearly different public landing, student hub and lesson learning path
   without changing existing behavior or data bindings. */

:root{
  --v217-ink:#123f39;
  --v217-muted:#607b75;
  --v217-teal:#0f7f73;
  --v217-teal-2:#149687;
  --v217-sea:#0f6f86;
  --v217-aqua:#dff5f0;
  --v217-sand:#fff8e9;
  --v217-gold:#d8a62f;
  --v217-line:#dbe9e5;
  --v217-shadow:0 20px 55px rgba(16,77,69,.10);
  --v217-shadow-soft:0 10px 28px rgba(16,77,69,.07);
}

/* -------------------- global shell -------------------- */
body.clarity-ui{
  background:
    radial-gradient(circle at 10% 0%,rgba(20,150,135,.055),transparent 26rem),
    radial-gradient(circle at 92% 8%,rgba(216,166,47,.05),transparent 24rem),
    linear-gradient(180deg,#f8fbfa 0%,#f6faf9 52%,#fbfaf6 100%);
}
body.clarity-ui .status-pill{display:none!important}
.site-header .container{width:min(1240px,calc(100% - 34px))}
.site-header{box-shadow:0 5px 22px rgba(24,74,66,.04)}
.brand{letter-spacing:.035em}
.brand span{font-weight:700;opacity:.78}
.nav-pill,.plan-chip,.user-chip{
  border-color:#dce8e4!important;
  box-shadow:none!important;
}
.nav-pill:hover{border-color:#bcd7cf!important;background:#f5fbf9!important}

/* -------------------- PUBLIC HOME: noticeably new composition -------------------- */
#view-home .home-container{max-width:1240px}
#view-home .home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:30px;
  align-items:stretch;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:visible!important;
}
#view-home .home-hero:before{display:none!important}
#view-home .home-hero-copy{
  position:relative;
  overflow:hidden;
  min-height:530px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:52px 48px!important;
  border-radius:34px;
  border:1px solid #cfe3dd;
  background:
    linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.90)),
    repeating-linear-gradient(90deg,transparent 0 52px,rgba(21,126,111,.035) 52px 55px),
    linear-gradient(145deg,#f3fbf8,#fffaf0);
  box-shadow:var(--v217-shadow);
}
#view-home .home-hero-copy:before,
#view-home .home-hero-copy:after{
  content:"";
  position:absolute;
  pointer-events:none;
}
#view-home .home-hero-copy:before{
  width:220px;height:520px;
  left:-108px;top:20px;
  border-radius:50%;
  border:22px solid rgba(15,127,115,.055);
  transform:rotate(-12deg);
}
#view-home .home-hero-copy:after{
  width:150px;height:150px;
  right:26px;bottom:24px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(216,166,47,.10) 0 34%,transparent 35%),
    conic-gradient(from 0deg,rgba(15,127,115,.08),rgba(15,127,115,0),rgba(15,127,115,.08));
  filter:blur(.2px);
}
#view-home .home-hero-copy>*{position:relative;z-index:1}
#view-home .home-hero-copy .eyebrow{
  width:max-content;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  background:#edf8f4;
  border:1px solid #d2e9e1;
  letter-spacing:.13em;
}
#view-home .home-hero-copy h1{
  max-width:720px;
  font-size:clamp(2.6rem,5.1vw,4.55rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  margin:18px 0 18px!important;
}
#view-home .home-hero-copy>p{
  max-width:590px;
  font-size:1.06rem!important;
  line-height:1.75!important;
}
#view-home .home-motivation-line{
  border:0!important;
  background:transparent!important;
  padding:0!important;
  margin-top:16px!important;
  font-size:.86rem!important;
  color:#496b64!important;
}
#view-home .home-hero-visual-chips{margin-top:18px!important}
#view-home .home-hero-visual-chips span{
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(20,78,69,.045)!important;
}
#view-home .hero-actions .cta{
  min-height:52px!important;
  padding:0 20px!important;
  border-radius:15px!important;
}
#view-home .hero-actions .cta.primary{
  box-shadow:0 10px 22px rgba(15,127,115,.18)!important;
}

/* language cards become editorial image tiles */
#view-home .public-language-selector{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:1.15fr .85fr;
  gap:16px!important;
}
#view-home .public-language-card{
  position:relative;
  min-height:0;
  border-radius:30px!important;
  border:0!important;
  box-shadow:var(--v217-shadow)!important;
  background:#102f2b!important;
  overflow:hidden!important;
}
#view-home .public-language-card img{
  position:absolute;
  pointer-events:none;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  aspect-ratio:auto!important;
  transition:transform .5s ease,filter .3s ease;
}
#view-home .public-language-card:after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(6,35,32,.03) 5%,rgba(6,35,32,.22) 48%,rgba(6,35,32,.86) 100%);
}
#view-home .public-language-card:hover img{transform:scale(1.035)}
#view-home .public-language-overlay{
  position:absolute!important;
  pointer-events:none;
  z-index:2;
  inset:auto 0 0 0!important;
  padding:26px 26px 24px!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:#fff!important;
  text-align:left!important;
}
#view-home .public-language-overlay small,
#view-home .public-language-overlay strong,
#view-home .public-language-overlay em,
#view-home .public-language-overlay b{display:block}
#view-home .public-language-overlay small{font-size:.68rem;letter-spacing:.12em;opacity:.82}
#view-home .public-language-overlay strong{font-size:1.75rem;margin:6px 0 3px}
#view-home .public-language-overlay em{font-style:normal;font-size:.8rem;opacity:.78}
#view-home .public-language-overlay b{
  width:max-content;margin-top:13px;padding:8px 11px;border-radius:999px;
  background:rgba(255,255,255,.15);font-size:.72rem;
}

/* public value ribbon behaves like a compact proof bar */
#view-home .public-feature-ribbon{
  margin-top:24px!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:0!important;
  border:1px solid var(--v217-line)!important;
  border-radius:22px!important;
  background:#fff!important;
  overflow:hidden;
  box-shadow:var(--v217-shadow-soft);
}
#view-home .public-feature-ribbon>div{
  border:0!important;
  border-right:1px solid #e8efec!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:16px 14px!important;
}
#view-home .public-feature-ribbon>div:last-child{border-right:0!important}
#view-home .public-feature-ribbon>div>span{display:block;margin-bottom:5px}
#view-home .public-feature-ribbon strong{font-size:.75rem}
#view-home .public-feature-ribbon small{font-size:.65rem;line-height:1.35}

/* -------------------- LOGGED-IN STUDENT HOME: Ocean Student Hub -------------------- */
body.student-experience #view-home .home-container{
  max-width:1240px;
}
body.student-experience #view-home .home-hero{
  grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr);
  gap:18px;
}
body.student-experience #view-home .home-hero-copy{
  min-height:360px;
  padding:42px!important;
  border-color:#bcded7;
  color:#fff;
  background:
    radial-gradient(circle at 76% 18%,rgba(255,255,255,.14),transparent 16rem),
    linear-gradient(132deg,#0d655d 0%,#0b7d7e 48%,#0d6d88 100%)!important;
}
body.student-experience #view-home .home-hero-copy:before{
  border-color:rgba(255,255,255,.06);
}
body.student-experience #view-home .home-hero-copy:after{
  background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,0) 67%);
}
body.student-experience #view-home .home-hero-copy .eyebrow{
  color:#d9fff7!important;background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.18)!important;
}
body.student-experience #view-home .home-hero-copy h1,
body.student-experience #view-home .home-hero-copy h1 span{color:#fff!important}
body.student-experience #view-home .home-hero-copy>p{color:#d9efec!important}
body.student-experience #view-home .home-motivation-line{color:#c8e8e4!important}
body.student-experience #view-home .home-hero-visual-chips span{
  color:#e9fffb!important;background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.15)!important;
}
body.student-experience #view-home .hero-actions .cta{
  background:rgba(255,255,255,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important;
}
body.student-experience #view-home .hero-actions .cta.primary{
  background:#fff!important;color:#0d6d68!important;border-color:#fff!important;
}

/* today card becomes a distinct mission panel */
#view-home .student-today-hero{
  padding:24px!important;
  border-radius:30px!important;
  border:1px solid #c9e1dc!important;
  background:
    radial-gradient(circle at 88% 10%,rgba(39,153,135,.14),transparent 9rem),
    linear-gradient(155deg,#ffffff,#eef9f6)!important;
  box-shadow:var(--v217-shadow)!important;
}
#view-home .student-today-head{align-items:flex-start!important}
#view-home .student-card-kicker{letter-spacing:.12em;font-size:.65rem}
#view-home .student-today-head strong{display:block;font-size:1.55rem!important;line-height:1.15;margin-top:8px;color:#174f48}
#view-home .student-goal-count{
  min-width:58px;height:58px;display:grid!important;place-items:center;
  border-radius:18px!important;background:#0f7f73!important;color:#fff!important;
  font-size:1.05rem!important;box-shadow:0 9px 19px rgba(15,127,115,.18);
}
#view-home .student-goal-progress{height:10px!important;margin:20px 0 15px!important}
#view-home .student-goal-progress i{background:linear-gradient(90deg,#0f7f73,#24aa98)!important}
#view-home .student-today-mini-list{display:grid!important;gap:7px!important}
#view-home .student-today-quote{
  margin-top:16px!important;padding-top:14px!important;border-top:1px solid #dcebe7;color:#52726b!important;font-size:.76rem!important;
}

/* Student dashboard is no longer a stack of equal cards */
#view-home .student-home-dashboard{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);
  grid-template-areas:
    "plan plan"
    "priority learning"
    "summary learning"
    "bottom bottom";
  gap:18px!important;
  margin-top:24px!important;
}
#view-home .student-home-dashboard.hidden{display:none!important}
#view-home .student-plan-strip{grid-area:plan}
#view-home .student-dashboard-priority{grid-area:priority}
#view-home .student-dashboard-learning{grid-area:learning}
#view-home .student-dashboard-summary-row{grid-area:summary}
#view-home .student-dashboard-bottom{grid-area:bottom}

#view-home .student-plan-strip{
  display:flex!important;justify-content:space-between!important;align-items:center!important;
  padding:12px 16px!important;border-radius:16px!important;
  background:#fff!important;box-shadow:none!important;
}
#view-home .student-plan-strip-copy{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap}
#view-home .student-plan-strip-copy span{font-size:.6rem!important}
#view-home .student-plan-strip-copy strong{font-size:.85rem!important}
#view-home .student-plan-strip-copy small{font-size:.69rem!important}
#view-home .student-plan-strip-action{
  min-height:38px!important;padding:0 12px!important;border-radius:11px!important;
}

#view-home .student-dashboard-priority>.student-next-card{
  min-height:250px;
  padding:26px!important;
  border-radius:28px!important;
  border:0!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(255,255,255,.16),transparent 14rem),
    linear-gradient(136deg,#123f39,#0d726a)!important;
  color:#fff;
  box-shadow:0 22px 45px rgba(15,88,79,.16)!important;
}
#view-home .student-dashboard-priority .student-card-head strong{color:#fff!important;font-size:1.05rem}
#view-home .student-dashboard-priority .student-card-icon{background:rgba(255,255,255,.12)!important}
#view-home .student-dashboard-priority .student-period-pill{
  color:#dff5ef!important;background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.16)!important;
}
#view-home .student-next-actions{margin-top:18px!important}
#view-home .student-next-actions button{
  min-height:48px!important;border-radius:14px!important;border-color:rgba(255,255,255,.22)!important;
}
#view-home .student-motivation-quote{
  border-left:2px solid rgba(255,255,255,.35)!important;color:#d2ebe6!important;
  margin-top:20px!important;
}

#view-home .student-dashboard-learning{
  display:grid!important;
  grid-template-columns:1fr!important;
  align-content:start;
  gap:18px!important;
}
#view-home .student-dashboard-learning .student-dash-card{
  border-radius:24px!important;padding:20px!important;
}
#view-home .student-streak-card{
  background:linear-gradient(160deg,#fffaf0,#fff)!important;
  border-color:#eee1bd!important;
}
#view-home .student-streak-number{
  min-width:72px;text-align:center;padding:7px 10px;border-radius:999px;background:#fff0bf;color:#755310!important;
}
#view-home .student-roadmap-card{background:#fff!important}
#view-home .student-roadmap-list{margin-top:13px!important}

#view-home .student-summary-card{
  padding:24px!important;border-radius:26px!important;background:#fff!important;
}
#view-home .student-summary-grid{
  display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:9px!important;margin-top:16px!important;
}
#view-home .student-summary-grid>div{
  min-height:112px!important;
  display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  padding:14px!important;border-radius:17px!important;
  background:#f8fbfa!important;
}
#view-home .student-summary-grid>div>span{font-size:1.2rem}
#view-home .student-summary-grid>div>strong{font-size:1.35rem!important;margin-top:7px;color:#185f56!important}
#view-home .student-summary-grid>div>small{margin-top:3px;color:#71847f!important}

#view-home .student-dashboard-bottom{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)!important;
  gap:18px!important;
}
#view-home .student-achievement-card{
  padding:24px!important;border-radius:26px!important;
}
#view-home .student-progress-banner{
  min-height:230px;
  padding:28px!important;
  border-radius:28px!important;
  display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:flex-start!important;
  background:
    radial-gradient(circle at 80% 25%,rgba(255,255,255,.16),transparent 9rem),
    linear-gradient(145deg,#0d7187,#0d7c75)!important;
}
#view-home .student-progress-banner strong{font-size:1.55rem!important;line-height:1.2!important}
#view-home .student-progress-banner .primary{
  min-height:46px!important;border-radius:13px!important;padding:0 17px!important;
}

/* -------------------- TRACK / COURSE: more editorial, less generic card grid -------------------- */
#view-track .container,#view-course .container,#view-lesson .container{width:min(1240px,calc(100% - 34px))}
#view-track .track-hero{
  min-height:380px;
  border:0!important;border-radius:32px!important;overflow:hidden;
  background:linear-gradient(130deg,#113f39,#0d756d)!important;
  color:#fff;box-shadow:var(--v217-shadow);
}
#view-track .track-hero .eyebrow,#view-track .track-hero h1{color:#fff!important}
#view-track .track-hero p{color:#d8efeb!important}
#view-track .track-hero-note{color:#c6e5df!important}
#view-track .track-hero-media{
  align-self:stretch!important;min-width:360px!important;margin:-30px!important;margin-left:0!important;position:relative!important;overflow:hidden!important;
}
#view-track .track-hero-media img{width:100%!important;height:100%!important;object-fit:cover!important}
#view-track .track-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,63,57,.34),transparent 45%)}
#view-track .track-hero-media span{z-index:2!important}
#view-track .track-value-strip{
  margin-top:18px!important;border-radius:20px!important;border:1px solid #d9e7e3!important;background:#fff!important;
  box-shadow:var(--v217-shadow-soft)!important;
}
#view-track .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#view-track .course-card{
  min-height:210px!important;border-radius:24px!important;padding:26px!important;
  border:1px solid #dce9e5!important;box-shadow:none!important;
}
#view-track .course-card:hover{box-shadow:var(--v217-shadow-soft)!important}

#view-course .course-hero{
  border-radius:30px!important;
  border:1px solid #d5e6e1!important;
  background:
    radial-gradient(circle at 88% 15%,rgba(15,127,115,.11),transparent 13rem),
    linear-gradient(145deg,#fff,#f2faf7)!important;
  box-shadow:var(--v217-shadow-soft)!important;
}
#view-course .course-roadmap-guide{
  margin-top:20px!important;border-radius:30px!important;padding:26px!important;border:1px solid #dbe8e4!important;
  background:#fff!important;box-shadow:var(--v217-shadow-soft)!important;
}
#view-course .course-roadmap-columns{
  position:relative;
  grid-template-columns:1fr!important;
  gap:15px!important;
}
#view-course .course-roadmap-block{
  position:relative;
  padding:22px 24px 22px 32px!important;
  border-radius:20px!important;
}
#view-course .course-roadmap-block:before{
  content:"";position:absolute;left:14px;top:24px;bottom:24px;width:3px;border-radius:999px;background:#dce9e5;
}
#view-course .course-roadmap-block.core:before{background:linear-gradient(#0f7f73,#8ed1c3)}
#view-course .course-roadmap-block.extended:before{background:linear-gradient(#d8a62f,#eadba5)}
#view-course .season-grid{gap:12px!important}
#view-course .season-card{
  grid-template-columns:120px minmax(0,1fr) 220px 34px!important;
  min-height:112px!important;border-radius:20px!important;border:1px solid #dce8e4!important;
  box-shadow:none!important;background:#fff!important;
}
#view-course .season-card:hover{border-color:#bcd7cf!important;box-shadow:var(--v217-shadow-soft)!important}

/* -------------------- LESSON: true learning path treatment -------------------- */
#view-lesson{
  background:
    linear-gradient(180deg,rgba(236,248,244,.78),rgba(248,251,250,.96) 320px,transparent 640px);
}
#view-lesson .lesson-breadcrumb{padding-top:18px}
#view-lesson .lesson-hero{
  position:relative;
  overflow:hidden;
  min-height:265px;
  padding:34px!important;
  border:0!important;
  border-radius:32px!important;
  color:#fff;
  background:
    radial-gradient(circle at 85% 18%,rgba(255,255,255,.14),transparent 13rem),
    linear-gradient(132deg,#113f39 0%,#0c736b 58%,#0c7086 100%)!important;
  box-shadow:0 22px 48px rgba(15,76,69,.16)!important;
}
#view-lesson .lesson-hero:after{
  content:"LESSON";
  position:absolute;right:24px;bottom:-20px;
  font-size:7rem;font-weight:950;letter-spacing:-.06em;color:rgba(255,255,255,.045);
  pointer-events:none;
}
#view-lesson .lesson-hero>div:first-child{position:relative;z-index:2;max-width:760px}
#view-lesson .lesson-hero .eyebrow{color:#c8fff4!important}
#view-lesson .lesson-hero h1{color:#fff!important;font-size:clamp(2.3rem,4.7vw,4rem)!important;line-height:1!important}
#view-lesson .lesson-hero p{color:#d9eeea!important;max-width:700px!important}
#view-lesson .lesson-hero-tools{position:relative;z-index:2}
#view-lesson .lesson-dictionary-trigger{
  background:rgba(255,255,255,.10)!important;color:#fff!important;border-color:rgba(255,255,255,.20)!important;
}
#view-lesson .lesson-score-card{
  min-width:150px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(255,255,255,.10)!important;
  color:#d9efeb!important;
  backdrop-filter:blur(8px);
}
#view-lesson .lesson-score-card .big-percent{color:#fff!important}

/* guide becomes top caption; tabs become visual stepper */
#view-lesson .lesson-flow-guide{
  margin:20px 0 12px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
  border:1px solid #dce9e5!important;
  background:#fff!important;
  box-shadow:var(--v217-shadow-soft)!important;
}
#view-lesson .lesson-flow-guide-copy>span{letter-spacing:.12em!important}
#view-lesson .lesson-flow-current{
  border:0!important;background:#eaf7f3!important;color:#166e62!important;border-radius:999px!important;
}

#view-lesson .skill-tabs--flow{
  counter-reset:v217step;
  position:sticky!important;
  top:72px!important;
  z-index:29!important;
  display:grid!important;
  grid-template-columns:repeat(7,minmax(112px,1fr))!important;
  gap:8px!important;
  overflow-x:auto!important;
  padding:10px!important;
  margin:0 0 22px!important;
  border:1px solid #dbe8e4!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 10px 28px rgba(25,70,62,.07)!important;
  backdrop-filter:blur(12px);
}
#view-lesson .skill-tabs--flow .skill-tab:not([hidden]){
  counter-increment:v217step;
  position:relative;
  min-height:62px!important;
  padding:10px 9px 10px 37px!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:#f5f8f7!important;
  color:#55706a!important;
  text-align:left!important;
  font-size:.72rem!important;
  line-height:1.2!important;
}
#view-lesson .skill-tabs--flow .skill-tab:not([hidden]):before{
  content:counter(v217step);
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:#e3ece9;color:#6d827c;font-size:.62rem;font-weight:900;
}
#view-lesson .skill-tabs--flow .skill-tab.active{
  background:linear-gradient(135deg,#0f7f73,#158f82)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(15,127,115,.18)!important;
}
#view-lesson .skill-tabs--flow .skill-tab.active:before{background:#fff;color:#0f7469}
#view-lesson .skill-tabs--flow .skill-tab span{display:block!important;margin-top:2px}

/* learning content resembles a workspace */
#view-lesson .skill-panel.active{
  min-height:520px;
  padding:26px!important;
  border:1px solid #dfeae6;
  border-radius:28px;
  background:#fff;
  box-shadow:var(--v217-shadow-soft);
  margin-bottom:34px;
}
#view-lesson .activity-heading{
  padding-bottom:18px!important;
  margin:0 0 20px!important;
  border-bottom:1px solid #e6eeeb;
}
#view-lesson .activity-heading h2{font-size:2rem!important;letter-spacing:-.025em}
#view-lesson .activity-heading p{max-width:720px!important}
#view-lesson .complete-skill{
  border-radius:999px!important;background:#f6faf8!important;border-color:#d9e7e2!important;
}
#view-lesson .complete-skill.done{background:#e7f8f2!important}
#view-lesson .flow-subnav{
  width:max-content;max-width:100%;
  padding:5px!important;border-radius:13px!important;background:#f1f6f4!important;margin-bottom:18px!important;
}
#view-lesson .flow-subnav button{border-radius:10px!important}
#view-lesson .vocab-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
#view-lesson .vocab-card{
  border-radius:18px!important;border:1px solid #e0ebe7!important;background:#fbfdfc!important;
  box-shadow:none!important;transition:border-color .18s ease,transform .18s ease;
}
#view-lesson .vocab-card:hover{border-color:#bfd9d1!important;transform:translateY(-1px)}
#view-lesson .flash-card,#view-lesson .practice-card,#view-lesson .exercise-card,
#view-lesson .reading-card,#view-lesson .writing-card,#view-lesson .speaking-card{
  border-color:#dfeae6!important;box-shadow:none!important;
}

/* league top 3 becomes genuinely prestigious */
.vnn-prestige-league{
  border-radius:28px!important;
  padding:25px!important;
  box-shadow:var(--v217-shadow-soft)!important;
}
.vnn-prestige-podium-wrap{gap:14px!important}
.vnn-prestige-podium{
  min-height:235px!important;
  justify-content:center!important;
  border-radius:22px!important;
}
.vnn-prestige-podium.rank-1{
  min-height:285px!important;
  transform:translateY(-8px);
  background:
    radial-gradient(circle at 50% 20%,rgba(216,166,47,.16),transparent 7rem),
    linear-gradient(180deg,#fff9df,#fff)!important;
  border-color:#e6cd82!important;
}
.vnn-prestige-podium.rank-1 .vnn-prestige-avatar.large{width:76px;height:76px}
.vnn-prestige-podium.rank-2 .vnn-prestige-avatar.large,
.vnn-prestige-podium.rank-3 .vnn-prestige-avatar.large{width:64px;height:64px}
.vnn-prestige-podium.rank-1 .vnn-prestige-crown{font-size:2.3rem!important}
.vnn-prestige-podium>b{font-size:1.35rem!important}

/* -------------------- responsive -------------------- */
@media(max-width:1080px){
  #view-home .home-hero{grid-template-columns:1fr!important}
  #view-home .home-hero-copy{min-height:auto}
  #view-home .public-language-selector{grid-template-columns:1fr 1fr!important;grid-template-rows:340px!important}
  body.student-experience #view-home .home-hero{grid-template-columns:1fr 1fr!important}
  #view-home .student-home-dashboard{
    grid-template-columns:1fr!important;
    grid-template-areas:"plan" "priority" "learning" "summary" "bottom"!important;
  }
  #view-home .student-dashboard-learning{grid-template-columns:1fr 1fr!important}
  #view-home .student-dashboard-bottom{grid-template-columns:1fr 1fr!important}
  #view-home .public-feature-ribbon{grid-template-columns:repeat(3,1fr)!important}
  #view-home .public-feature-ribbon>div:nth-child(3){border-right:0!important}
  #view-track .track-hero-media{min-width:300px!important}
  #view-lesson .skill-tabs--flow{grid-template-columns:repeat(7,minmax(118px,1fr))!important}
}
@media(max-width:760px){
  .site-header .container,#view-track .container,#view-course .container,#view-lesson .container{width:min(100% - 20px,1240px)}
  #view-home .home-container{width:min(100% - 20px,1240px)!important}
  #view-home .home-hero-copy{padding:30px 24px!important;border-radius:25px!important}
  #view-home .home-hero-copy h1{font-size:2.55rem!important}
  #view-home .public-language-selector{grid-template-columns:1fr!important;grid-template-rows:270px 230px!important}
  body.student-experience #view-home .home-hero{grid-template-columns:1fr!important}
  body.student-experience #view-home .home-hero-copy{min-height:320px;padding:28px!important}
  #view-home .student-today-hero{border-radius:24px!important}
  #view-home .student-dashboard-learning{grid-template-columns:1fr!important}
  #view-home .student-summary-grid{grid-template-columns:repeat(2,1fr)!important}
  #view-home .student-summary-grid>div:last-child{grid-column:1/-1}
  #view-home .student-dashboard-bottom{grid-template-columns:1fr!important}
  #view-home .public-feature-ribbon{grid-template-columns:repeat(2,1fr)!important}
  #view-home .public-feature-ribbon>div{border-right:1px solid #e8efec!important;border-bottom:1px solid #e8efec!important}
  #view-home .public-feature-ribbon>div:nth-child(2n){border-right:0!important}
  #view-home .public-feature-ribbon>div:nth-last-child(-n+2){border-bottom:0!important}
  #view-track .track-hero{min-height:auto;flex-direction:column!important;padding:26px!important}
  #view-track .track-hero-media{width:calc(100% + 52px)!important;height:270px!important;min-width:0!important;margin:0 -26px -26px!important}
  #view-track .course-grid{grid-template-columns:1fr!important}
  #view-course .season-card{grid-template-columns:1fr!important;padding:18px!important}
  #view-course .season-progress{width:100%!important}
  #view-lesson .lesson-hero{padding:26px!important;border-radius:25px!important;align-items:flex-start!important;flex-direction:column!important}
  #view-lesson .lesson-hero:after{font-size:4.2rem}
  #view-lesson .lesson-hero h1{font-size:2.5rem!important}
  #view-lesson .lesson-hero-tools{width:100%!important;display:grid!important;grid-template-columns:1fr auto!important}
  #view-lesson .lesson-score-card{min-width:112px!important;padding:13px!important}
  #view-lesson .lesson-flow-guide{align-items:flex-start!important;flex-direction:column!important}
  #view-lesson .skill-tabs--flow{
    top:64px!important;
    display:flex!important;
    gap:7px!important;
    padding:8px!important;
    border-radius:16px!important;
    margin-left:-1px!important;margin-right:-1px!important;
  }
  #view-lesson .skill-tabs--flow .skill-tab:not([hidden]){min-width:128px!important;min-height:56px!important}
  #view-lesson .skill-panel.active{padding:20px!important;border-radius:22px!important}
  #view-lesson .vocab-grid{grid-template-columns:1fr!important}
  .vnn-prestige-podium-wrap{grid-template-columns:1fr!important}
  .vnn-prestige-podium.rank-1{transform:none!important;order:-1!important;min-height:230px!important}
}
@media(max-width:440px){
  #view-home .home-hero-copy h1{font-size:2.2rem!important}
  #view-home .home-hero-visual-chips{display:none!important}
  #view-home .hero-actions{display:grid!important;grid-template-columns:1fr!important}
  #view-home .public-language-selector{grid-template-rows:250px 220px!important}
  #view-home .public-feature-ribbon{grid-template-columns:1fr!important}
  #view-home .public-feature-ribbon>div{border-right:0!important}
  #view-home .public-feature-ribbon>div:not(:last-child){border-bottom:1px solid #e8efec!important}
  #view-home .student-summary-grid{grid-template-columns:1fr!important}
  #view-home .student-summary-grid>div:last-child{grid-column:auto}
  #view-lesson .lesson-hero h1{font-size:2.05rem!important}
  #view-lesson .lesson-hero-tools{grid-template-columns:1fr!important}
  #view-lesson .lesson-score-card{width:100%!important}
}
/* v6.15.218 mobile home stability
   Keep the new composition, but avoid expensive GPU/style invalidation on touch devices. */
@media(max-width:900px){
  body.clarity-ui{
    background:linear-gradient(180deg,#f8fbfa 0%,#f7faf9 58%,#fbfaf6 100%)!important;
  }
  .site-header{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #view-home .home-hero-copy,
  #view-home .public-language-card,
  #view-home .student-today-hero,
  #view-home .student-dashboard-priority>.student-next-card,
  #view-home .student-progress-banner{
    box-shadow:0 8px 22px rgba(16,77,69,.07)!important;
  }
  #view-home .home-hero-copy:after{
    filter:none!important;
    background:rgba(15,127,115,.035)!important;
  }
  #view-home .public-language-card img{
    transition:none!important;
    transform:none!important;
  }
  #view-home .public-language-card:hover,
  #view-home .public-language-card:hover img{
    transform:none!important;
  }
  #view-home button,
  .mobile-account-bar button,
  .site-header button{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  #view-home .public-language-card,
  #view-home .hero-actions .cta,
  #view-home .student-plan-strip-action,
  #view-home .student-progress-banner .primary{
    position:relative;
    z-index:2;
  }
  #view-home .public-language-card:after,
  #view-home .public-language-card img,
  #view-home .public-language-overlay{
    pointer-events:none!important;
  }
  #view-home .public-language-card{
    pointer-events:auto!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #view-home .public-language-card img,#view-lesson .vocab-card{transition:none!important}
}