/* VƯỜN NGOẠI NGỮ v6.15.323 — STABLE UI FOUNDATION
   Built directly from v6.15.311 lock candidate.
   Presentation-only authority: typography, navigation layout, progress, ranking and dashboard readability.
   No Supabase, access, scoring, billing, Speaking, Shadowing or Lesson logic changes. */

:root{
  --v323-ink:#173e34;
  --v323-muted:#65776f;
  --v323-green:#147564;
  --v323-green-deep:#0e5d50;
  --v323-line:#dbe7e2;
  --v323-soft:#f7fbf9;
  --v323-radius:18px;
  --v323-shadow:0 10px 26px rgba(18,66,56,.07);
}

/* =========================================================
   1. READABILITY — CONTROLLED TYPE SCALE
   ========================================================= */
body.v323-ui{
  color:var(--v323-ink);
  font-size:17px;
  line-height:1.58;
}
body.v323-ui p,
body.v323-ui li,
body.v323-ui label,
body.v323-ui input,
body.v323-ui textarea,
body.v323-ui select{
  font-size:16px;
  line-height:1.55;
}
body.v323-ui button{
  font-size:15px;
  line-height:1.3;
}
body.v323-ui h1{font-size:38px;line-height:1.12;letter-spacing:-.03em}
body.v323-ui h2{font-size:28px;line-height:1.2;letter-spacing:-.02em}
body.v323-ui h3{font-size:21px;line-height:1.3}
body.v323-ui small{font-size:13.5px;line-height:1.45}
body.v323-ui .eyebrow{font-size:12.5px;line-height:1.3;letter-spacing:.075em}

/* Chinese stays clearly larger than support text. */
body.v323-ui .zh-reading-hanzi,
body.v323-ui .zh-vocab-hanzi,
body.v323-ui .chinese-word,
body.v323-ui [lang="zh"],
body.v323-ui [lang="zh-Hans"]{
  font-size:22px!important;
  line-height:1.5!important;
}
body.v323-ui .zh-reading-pinyin,
body.v323-ui .zh-vocab-pinyin,
body.v323-ui .v301-role-pinyin{
  font-size:16px!important;
  line-height:1.5!important;
}

/* =========================================================
   2. TEACHER — MAIN FUNCTIONS VERTICAL, CONTENT WIDE
   No DOM wrapper needed: use the stable v311 sibling structure directly.
   ========================================================= */
@media(min-width:901px){
  body.v323-ui #view-teacher>.container{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    column-gap:18px;
    align-items:start;
  }
  body.v323-ui #view-teacher>.container>.breadcrumb,
  body.v323-ui #view-teacher>.container>.teacher-hero,
  body.v323-ui #view-teacher>.container>.teacher-stats{
    grid-column:1/-1;
  }
  body.v323-ui #view-teacher>.container>.teacher-tabs{
    grid-column:1;
    grid-row:4;
  }
  body.v323-ui #view-teacher>.container>.teacher-panel{
    grid-column:2;
    grid-row:4;
    min-width:0;
  }
}

body.v323-ui #view-teacher .teacher-tabs{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  position:sticky;
  top:78px;
  z-index:45;
  margin:0;
  padding:8px;
  max-height:calc(100vh - 96px);
  overflow:auto;
  border:1px solid var(--v323-line);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--v323-shadow);
}
body.v323-ui #view-teacher .teacher-tab{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:9px 11px;
  border-radius:10px;
  white-space:normal;
  text-align:left;
  font-size:14.5px;
}
body.v323-ui #view-teacher .teacher-tab.active{
  background:linear-gradient(135deg,var(--v323-green),var(--v323-green-deep));
  color:#fff;
  border-color:transparent;
}
body.v323-ui #view-teacher .teacher-section{
  min-width:0;
  padding:20px;
  border-radius:var(--v323-radius);
  border:1px solid var(--v323-line);
  background:#fff;
  box-shadow:var(--v323-shadow);
}
body.v323-ui #view-teacher .teacher-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  gap:16px;
  align-items:end;
  min-width:0;
  padding-bottom:13px;
  margin-bottom:15px;
  border-bottom:1px solid #edf2ef;
}
body.v323-ui #view-teacher .teacher-section-head>div:first-child{min-width:0}
body.v323-ui #view-teacher .teacher-section-head h2{
  margin:4px 0 0;
  font-size:25px;
  line-height:1.25;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
}
body.v323-ui #view-teacher .teacher-section-head p{
  max-width:720px;
  margin:7px 0 0;
  font-size:14.5px;
  line-height:1.5;
}
body.v323-ui #view-teacher .teacher-section-head select{
  min-width:150px;
  font-size:15px;
}

/* =========================================================
   3. STUDENT DIRECTORY — ONE WIDE CARD, HORIZONTAL INNER DATA
   ========================================================= */
body.v323-ui #teacher-students .vnn-directory-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;
}
body.v323-ui #teacher-students .vnn-student-card{
  display:grid!important;
  grid-template-columns:minmax(210px,.8fr) minmax(290px,1.2fr) minmax(240px,.9fr)!important;
  grid-template-areas:
    "identity course access"
    "actions actions actions"!important;
  gap:13px 14px!important;
  align-items:stretch!important;
  min-width:0!important;
  padding:16px!important;
}
body.v323-ui #teacher-students .vnn-student-top{grid-area:identity!important;min-width:0!important}
body.v323-ui #teacher-students .vnn-student-course{grid-area:course!important;min-width:0!important}
body.v323-ui #teacher-students .vnn-student-access{grid-area:access!important;min-width:0!important}
body.v323-ui #teacher-students .vnn-student-actions{grid-area:actions!important;min-width:0!important}

body.v323-ui #teacher-students .vnn-student-top{
  display:grid!important;
  grid-template-columns:50px minmax(0,1fr)!important;
  grid-template-areas:"avatar identity" "avatar status"!important;
  gap:5px 11px!important;
  align-content:start!important;
}
body.v323-ui #teacher-students .vnn-dir-avatar{grid-area:avatar!important}
body.v323-ui #teacher-students .vnn-student-identity{grid-area:identity!important}
body.v323-ui #teacher-students .vnn-student-top>.status-badge{
  grid-area:status!important;
  justify-self:start!important;
  max-width:100%!important;
}
body.v323-ui #teacher-students .vnn-student-identity strong{
  font-size:17.5px!important;
  line-height:1.34!important;
}
body.v323-ui #teacher-students .vnn-student-identity small,
body.v323-ui #teacher-students .vnn-student-identity span,
body.v323-ui #teacher-students .vnn-student-identity em{
  font-size:13.5px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

body.v323-ui #teacher-students .vnn-student-course{
  display:flex!important;
  align-items:center!important;
  padding:12px 13px!important;
}
body.v323-ui #teacher-students .vnn-dir-course{
  width:100%!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-areas:
    "lang title"
    "lang class"
    "meta meta"
    "place place"!important;
  gap:3px 9px!important;
  min-width:0!important;
}
body.v323-ui #teacher-students .vnn-dir-language{grid-area:lang!important;align-self:start!important}
body.v323-ui #teacher-students .vnn-dir-course>strong{grid-area:title!important;font-size:15.5px!important;line-height:1.4!important}
body.v323-ui #teacher-students .vnn-dir-course>span{grid-area:class!important;font-size:13.5px!important}
body.v323-ui #teacher-students .vnn-dir-course>small{
  grid-area:meta!important;
  font-size:13px!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
body.v323-ui #teacher-students .vnn-dir-placement{grid-area:place!important;margin-top:4px!important}

body.v323-ui #teacher-students .vnn-student-access{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  align-content:stretch!important;
}
body.v323-ui #teacher-students .vnn-student-access>div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:10px 11px!important;
}
body.v323-ui #teacher-students .vnn-student-access span{
  font-size:11.5px!important;
  line-height:1.3!important;
}
body.v323-ui #teacher-students .vnn-student-access strong{
  margin-top:4px!important;
  font-size:14.5px!important;
  line-height:1.4!important;
  overflow-wrap:break-word!important;
}

body.v323-ui #teacher-students .vnn-student-actions{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(122px,1fr))!important;
  gap:8px!important;
  padding-top:2px!important;
}
body.v323-ui #teacher-students .vnn-student-actions button{
  width:100%!important;
  min-width:0!important;
  min-height:44px!important;
  padding:8px 10px!important;
  font-size:14px!important;
  line-height:1.25!important;
  white-space:normal!important;
}
body.v323-ui #teacher-students .student-delete-account-btn{
  border-color:#efb6ad!important;
  background:#fff7f5!important;
  color:#a94237!important;
}

/* Directory filters stay compact and horizontal. */
body.v323-ui #teacher-students .vnn-directory-toolbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
}
body.v323-ui #teacher-students .vnn-directory-filters{
  display:flex!important;
  gap:8px!important;
  align-items:center!important;
}
body.v323-ui #teacher-students .vnn-dir-search input{font-size:15px!important}

/* =========================================================
   4. LESSON — VERTICAL MAIN FUNCTIONS ON DESKTOP
   Stable v311 click/routing authority remains untouched.
   ========================================================= */
@media(min-width:901px){
  body.v323-ui #view-lesson>.container{
    display:grid;
    grid-template-columns:218px minmax(0,1fr);
    column-gap:18px;
    align-items:start;
  }
  body.v323-ui #view-lesson>.container>.lesson-breadcrumb,
  body.v323-ui #view-lesson>.container>.lesson-hero,
  body.v323-ui #view-lesson>.container>.lesson-flow-guide{
    grid-column:1/-1;
  }
  body.v323-ui #view-lesson>.container>#skillTabs{
    grid-column:1;
    grid-row:4;
  }
  body.v323-ui #view-lesson>.container>.skill-panel{
    grid-column:2;
    grid-row:4;
    min-width:0;
  }
}
body.v323-ui #view-lesson #skillTabs{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:7px!important;
  position:sticky!important;
  top:78px!important;
  z-index:44!important;
  margin:0!important;
  padding:8px!important;
  max-height:calc(100vh - 96px)!important;
  overflow:auto!important;
  border:1px solid var(--v323-line)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:var(--v323-shadow)!important;
}
body.v323-ui #view-lesson #skillTabs .skill-tab{
  width:100%!important;
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  font-size:15px!important;
  text-align:left!important;
  white-space:normal!important;
}
body.v323-ui #view-lesson #skillTabs .skill-tab>span{font-size:15px!important}
body.v323-ui #view-lesson #skillTabs .skill-tab.active{
  background:linear-gradient(135deg,var(--v323-green),var(--v323-green-deep))!important;
  color:#fff!important;
  border-color:transparent!important;
}
body.v323-ui #view-lesson .skill-panel.active{
  min-width:0!important;
  padding:20px!important;
  border:1px solid var(--v323-line)!important;
  border-radius:var(--v323-radius)!important;
  background:#fff!important;
  box-shadow:var(--v323-shadow)!important;
}
body.v323-ui #view-lesson .activity-heading h2{font-size:25px!important}
body.v323-ui #view-lesson .activity-heading p{font-size:15.5px!important}
body.v323-ui #view-lesson .vocab-term{font-size:19px!important}
body.v323-ui #view-lesson .vocab-ipa{font-size:15px!important}
body.v323-ui #view-lesson .vocab-meaning{font-size:15.5px!important}

/* =========================================================
   5. STUDENT PROGRESS — EASIER TO SCAN
   ========================================================= */
body.v323-ui #studentHomeDashboard{
  gap:14px!important;
}
body.v323-ui #studentHomeDashboard .student-dash-card{
  border:1px solid var(--v323-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--v323-shadow)!important;
}
body.v323-ui #studentHomeDashboard .student-card-head strong{
  font-size:17px!important;
  line-height:1.35!important;
}
body.v323-ui #studentHomeDashboard .student-card-head{
  gap:10px!important;
}
body.v323-ui #studentHomeDashboard .student-period-pill{
  font-size:12.5px!important;
  line-height:1.3!important;
}
body.v323-ui #studentHomeDashboard .student-summary-grid{
  gap:9px!important;
}
body.v323-ui #studentHomeDashboard .student-summary-grid>div{
  min-width:0!important;
  padding:13px 10px!important;
  border:1px solid #e3ece8!important;
  border-radius:13px!important;
  background:#fbfdfc!important;
}
body.v323-ui #studentHomeDashboard .student-summary-grid>div strong{
  font-size:25px!important;
  line-height:1.1!important;
}
body.v323-ui #studentHomeDashboard .student-summary-grid>div small{
  font-size:12.5px!important;
  line-height:1.35!important;
}
body.v323-ui #studentHomeDashboard .student-streak-number{
  font-size:17px!important;
}
body.v323-ui #studentHomeDashboard .student-roadmap-copy strong{
  font-size:15px!important;
}

/* Teacher progress report readability. */
body.v323-ui #teacher-progress .progress-evaluation-row,
body.v323-ui #teacher-report .report-section-card{
  border-radius:14px!important;
}
body.v323-ui #teacher-progress .progress-eval-metric strong{
  font-size:24px!important;
}
body.v323-ui #teacher-progress .progress-evaluation-row{
  font-size:14px!important;
  line-height:1.45!important;
}

/* =========================================================
   6. VƯỜN LEAGUE / BXH — SAME DATA, MUCH MORE READABLE
   ========================================================= */
body.v323-ui .vnn-prestige-league{
  grid-column:1/-1!important;
  border-radius:18px!important;
  box-shadow:var(--v323-shadow)!important;
}
body.v323-ui .vnn-prestige-head h3{
  font-size:22px!important;
  line-height:1.3!important;
}
body.v323-ui .vnn-prestige-head p{
  font-size:14px!important;
  line-height:1.5!important;
}
body.v323-ui .vnn-prestige-tabs button{
  min-height:40px!important;
  padding:0 12px!important;
  font-size:13px!important;
}
body.v323-ui .vnn-prestige-program strong{font-size:15px!important}
body.v323-ui .vnn-prestige-program span{
  font-size:13px!important;
  line-height:1.45!important;
}
body.v323-ui .vnn-prestige-podium>strong{
  font-size:15px!important;
}
body.v323-ui .vnn-prestige-podium>em{
  font-size:12px!important;
}
body.v323-ui .vnn-prestige-podium>b{
  font-size:20px!important;
}
body.v323-ui .vnn-prestige-podium>b small{
  font-size:11.5px!important;
}
body.v323-ui .vnn-prestige-stats span{
  font-size:12px!important;
}
body.v323-ui .vnn-prestige-reward{
  font-size:12px!important;
  line-height:1.4!important;
}
body.v323-ui .vnn-prestige-name b{
  font-size:14.5px!important;
}
body.v323-ui .vnn-prestige-name small{
  font-size:12px!important;
}
body.v323-ui .vnn-prestige-score strong{
  font-size:17px!important;
}
body.v323-ui .vnn-prestige-score small{
  font-size:11.5px!important;
}
body.v323-ui .vnn-prestige-my-rank,
body.v323-ui .vnn-prestige-rules summary{
  font-size:13px!important;
}
body.v323-ui .vnn-prestige-rules p{
  font-size:12.5px!important;
  line-height:1.55!important;
}

/* =========================================================
   7. GENERAL PAGE POLISH — QUIET, CLEAN, NOT A REDESIGN LAYER CAKE
   ========================================================= */
body.v323-ui .section-block,
body.v323-ui .card{
  border-radius:var(--v323-radius);
}
body.v323-ui .section-title-row h2{
  color:var(--v323-ink);
}
body.v323-ui .section-subtitle,
body.v323-ui .muted{
  color:var(--v323-muted);
}
body.v323-ui .teacher-stat{
  border:1px solid var(--v323-line)!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(18,66,56,.05)!important;
}
body.v323-ui .teacher-stat strong{
  font-size:28px!important;
  color:var(--v323-green)!important;
}
body.v323-ui .teacher-stat span{
  font-size:13.5px!important;
}

/* =========================================================
   8. RESPONSIVE
   ========================================================= */
@media(max-width:1100px) and (min-width:901px){
  body.v323-ui #view-teacher>.container{grid-template-columns:195px minmax(0,1fr)}
  body.v323-ui #view-lesson>.container{grid-template-columns:195px minmax(0,1fr)}
  body.v323-ui #teacher-students .vnn-student-card{
    grid-template-columns:minmax(200px,.8fr) minmax(270px,1.2fr)!important;
    grid-template-areas:
      "identity course"
      "access access"
      "actions actions"!important;
  }
}

@media(max-width:900px){
  body.v323-ui h1{font-size:32px}
  body.v323-ui h2{font-size:24px}
  body.v323-ui h3{font-size:19px}

  body.v323-ui #view-teacher>.container,
  body.v323-ui #view-lesson>.container{
    display:block!important;
  }
  body.v323-ui #view-teacher .teacher-tabs,
  body.v323-ui #view-lesson #skillTabs{
    position:static!important;
    max-height:none!important;
    margin:0 0 12px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.v323-ui #view-teacher .teacher-tab,
  body.v323-ui #view-lesson #skillTabs .skill-tab{
    min-height:48px!important;
  }

  body.v323-ui #teacher-students .vnn-student-card{
    grid-template-columns:1fr!important;
    grid-template-areas:"identity" "course" "access" "actions"!important;
  }
  body.v323-ui #teacher-students .vnn-directory-toolbar{
    grid-template-columns:1fr!important;
  }
  body.v323-ui #teacher-students .vnn-directory-filters{
    width:100%!important;
  }
  body.v323-ui #studentHomeDashboard .student-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:620px){
  body.v323-ui{
    font-size:16px;
  }
  body.v323-ui p,
  body.v323-ui li,
  body.v323-ui label,
  body.v323-ui textarea,
  body.v323-ui select{
    font-size:15px;
  }
  body.v323-ui input{
    font-size:16px; /* avoid iOS zoom */
  }

  body.v323-ui #view-teacher .teacher-section{
    padding:15px;
  }
  body.v323-ui #view-teacher .teacher-section-head{
    grid-template-columns:1fr;
    align-items:start;
  }
  body.v323-ui #view-teacher .teacher-section-head select{
    width:100%;
    min-width:0;
  }
  body.v323-ui #view-teacher .teacher-tabs,
  body.v323-ui #view-lesson #skillTabs{
    grid-template-columns:1fr!important;
  }

  body.v323-ui #teacher-students .vnn-student-access{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.v323-ui #teacher-students .vnn-student-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.v323-ui #teacher-students .student-delete-account-btn{
    grid-column:1/-1!important;
  }
  body.v323-ui #teacher-students .vnn-directory-filters{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.v323-ui #teacher-students .vnn-directory-filters select,
  body.v323-ui #teacher-students .vnn-dir-search{
    width:100%!important;
  }

  body.v323-ui #studentHomeDashboard .student-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.v323-ui .vnn-prestige-head{
    flex-direction:column!important;
  }
  body.v323-ui .vnn-prestige-tabs{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  body.v323-ui .vnn-prestige-tabs button{
    width:100%!important;
    padding:0 8px!important;
  }
  body.v323-ui .vnn-prestige-podium-wrap{
    grid-template-columns:1fr!important;
  }
  body.v323-ui .vnn-prestige-podium.rank-1,
  body.v323-ui .vnn-prestige-podium.rank-2,
  body.v323-ui .vnn-prestige-podium.rank-3{
    order:initial!important;
  }
}

@media(max-width:380px){
  body.v323-ui #teacher-students .vnn-student-access,
  body.v323-ui #teacher-students .vnn-student-actions{
    grid-template-columns:1fr!important;
  }
  body.v323-ui #teacher-students .student-delete-account-btn{
    grid-column:auto!important;
  }
}