/* VƯỜN NGOẠI NGỮ v6.15.330 — AI PROMO TOP + LESSON UI POLISH
   Presentation-only. */

:root{
  --v330-ink:#173f35;
  --v330-muted:#6d7e77;
  --v330-line:#dbe7e2;
  --v330-soft:#f8fbfa;
  --v330-ai:#5a6fc7;
  --v330-ai-soft:#f5f7ff;
}

/* Promo must be the first visible block inside active AI functions. */
body.v330-ui #view-lesson .v330-ai-panel>#v328LessonAccessStrip{
  order:-100!important;
  margin:0 0 14px!important;
}
body.v330-ui #view-lesson .v330-ai-panel>#v328LessonAccessStrip .v328-access-strip{
  margin:0!important;
  border:1px solid #d7e0f0!important;
  border-left:5px solid var(--v330-ai)!important;
  background:linear-gradient(135deg,#fbfcff,#fff)!important;
  box-shadow:0 6px 18px rgba(52,69,119,.055)!important;
}

/* AI panels get a cleaner premium hierarchy. */
body.v330-ui #view-lesson .v330-ai-panel{
  position:relative!important;
  padding-top:0!important;
}
body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:start!important;
  margin:0 0 12px!important;
  padding:16px 18px!important;
  border:1px solid var(--v330-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 4px 12px rgba(18,66,56,.035)!important;
}
body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading .eyebrow{
  color:#6b78a9!important;
  font-size:11px!important;
  letter-spacing:.07em!important;
}
body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading h2{
  margin:3px 0 5px!important;
  color:var(--v330-ink)!important;
  font-size:24px!important;
  line-height:1.2!important;
}
body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading p{
  margin:0!important;
  color:var(--v330-muted)!important;
  font-size:13.5px!important;
  line-height:1.5!important;
}

/* AI policy cards should read like concise usage notes, not another ad. */
body.v330-ui #view-lesson .v330-ai-policy{
  margin:0 0 12px!important;
  padding:13px 14px!important;
  border:1px solid #dfe6f2!important;
  border-radius:14px!important;
  background:var(--v330-ai-soft)!important;
  box-shadow:none!important;
}
body.v330-ui #view-lesson .v330-ai-policy .ai-policy-top{
  gap:10px!important;
}
body.v330-ui #view-lesson .v330-ai-policy .ai-policy-kicker{
  font-size:10.5px!important;
  color:#6875a7!important;
}
body.v330-ui #view-lesson .v330-ai-policy h3{
  margin:2px 0 0!important;
  font-size:16px!important;
  color:#273b73!important;
}
body.v330-ui #view-lesson .v330-ai-policy .ai-policy-rate{
  font-size:12px!important;
  white-space:nowrap!important;
}
body.v330-ui #view-lesson .v330-ai-policy .ai-policy-grid{
  gap:8px!important;
}
body.v330-ui #view-lesson .v330-ai-policy .ai-policy-col,
body.v330-ui #view-lesson .v330-ai-policy .ai-policy-note{
  padding:9px 10px!important;
  border-radius:10px!important;
  font-size:12.5px!important;
  line-height:1.45!important;
}

/* Standardize AI work surfaces. */
body.v330-ui #view-lesson .ai-speaking-card,
body.v330-ui #view-lesson .dubbing-shell,
body.v330-ui #view-lesson .shadow-toolbar-v2,
body.v330-ui #view-lesson .writing-card,
body.v330-ui #view-lesson .grammar-ai-card,
body.v330-ui #view-lesson .grammar-ai-unlocked{
  border:1px solid var(--v330-line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(18,66,56,.045)!important;
}

/* Stronger, consistent buttons. */
body.v330-ui #view-lesson .v330-ai-panel button{
  min-height:42px;
  border-radius:10px!important;
  font-weight:800!important;
}
body.v330-ui #view-lesson .v330-ai-panel .primary,
body.v330-ui #view-lesson .v330-ai-panel .score-btn{
  box-shadow:0 4px 12px rgba(37,95,82,.08)!important;
}

/* Skill navigation: cleaner, consistent, mobile-safe. */
body.v330-ui #view-lesson #skillTabs{
  gap:8px!important;
}
body.v330-ui #view-lesson #skillTabs .skill-tab{
  min-height:52px!important;
  padding:9px 10px!important;
  border-radius:13px!important;
  border:1px solid #dce7e2!important;
  background:#fff!important;
  color:#49655d!important;
  font-weight:800!important;
  line-height:1.25!important;
}
body.v330-ui #view-lesson #skillTabs .skill-tab.active{
  border-color:#83b8aa!important;
  background:#eef8f5!important;
  color:#1f6656!important;
  box-shadow:0 4px 12px rgba(18,88,72,.06)!important;
}

/* Reduce empty vertical rhythm around module transitions. */
body.v330-ui #view-lesson .flow-subnav{
  margin:0 0 12px!important;
}
body.v330-ui #view-lesson .lesson-flow-next{
  margin-top:14px!important;
  border-radius:15px!important;
  border:1px solid var(--v330-line)!important;
  background:#fbfdfc!important;
}

/* Language-specific polish */
body.v330-ui.track-theme-zh #view-lesson .v330-ai-panel>#v328LessonAccessStrip .v328-access-strip{
  border-left-color:#b75a4f!important;
}
body.v330-ui.track-theme-zh #view-lesson .v330-ai-policy{
  background:#fff7f5!important;
  border-color:#eed8d3!important;
}

@media(max-width:900px){
  body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:700px){
  body.v330-ui #view-lesson #skillTabs{
    overflow-x:auto!important;
    display:flex!important;
    scrollbar-width:none!important;
    padding-bottom:4px!important;
  }
  body.v330-ui #view-lesson #skillTabs::-webkit-scrollbar{display:none}
  body.v330-ui #view-lesson #skillTabs .skill-tab{
    flex:0 0 auto!important;
    min-width:128px!important;
  }
  body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading{
    padding:13px!important;
  }
  body.v330-ui #view-lesson .v330-ai-panel .v330-activity-heading h2{
    font-size:21px!important;
  }
}