/* PTY English Academy — global responsive layer */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
iframe{max-width:100%;border:0}
button,.btn,input,select,textarea{max-width:100%}
button,.btn{touch-action:manipulation}
textarea{resize:vertical}
.portalMain,.portalMain>*{min-width:0;max-width:100%}
.panel,.card,.box,.lessonBlock,.lessonSeqCard,.mini,.quizQ,.flowCard,.examLevel,.examResult{min-width:0;overflow-wrap:anywhere}
.accBody,.storyPaper,.modalCard{overflow-wrap:anywhere}
.table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.table th,.table td{white-space:normal;min-width:120px;vertical-align:top}
.video,iframe[src*="youtube"],iframe[src*="youtu.be"]{width:100%;aspect-ratio:16/9;height:auto;min-height:0}
.modalCard{max-height:calc(100dvh - 32px);overflow-y:auto}
.search input,.chat input,.storySearch{min-width:0;width:100%}
.lessonAccordion summary,.titleRow,.portalMainHeader,.pronSectionTop,.storiesTop{min-width:0}

@media (min-width:851px) and (max-width:1180px){
  .portalShell{grid-template-columns:220px minmax(0,1fr)}
  .portalSidebar{padding:18px 12px}
  .portalMain{padding:20px 18px 36px}
  .unitGrid,.lessonSeqGrid,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pronGrid,.pronCategoryGrid,.pronSubGrid,.pronWordGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:850px){
  .portalShell{display:block;width:100%;min-height:100dvh}
  .portalSidebar{position:relative;top:auto;height:auto;max-height:none;padding:13px 14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
  .sidebarBrand{padding:0 3px 10px;margin-bottom:10px}
  .sidebarLogo{width:42px;height:42px;border-radius:12px}
  .sidebarUser{margin:0 0 10px;padding:9px 11px}
  .verticalNav{display:flex;flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:1px 0 7px;-webkit-overflow-scrolling:touch}
  .verticalNav .btn,.verticalNav .btn.gray{flex:0 0 auto;width:auto;min-width:145px;min-height:44px;scroll-snap-align:start;white-space:nowrap;text-align:center;justify-content:center;background:rgba(255,255,255,.06)}
  .portalMain{padding:17px 14px 30px;overflow:hidden}
  .portalMainHeader{align-items:flex-start}
  .portalMainHeader h2{font-size:clamp(23px,5vw,28px)}
  .hero{padding:20px 14px}.heroBox{padding:24px;border-radius:20px}.heroBox h1{font-size:clamp(28px,7vw,36px)}
  .section{padding:18px 14px 28px}
  .flowSteps{overflow-x:auto;grid-template-columns:repeat(6,minmax(125px,1fr));padding-bottom:5px}
  .phraseRow{max-width:100%}
}

@media (max-width:640px){
  body{font-size:16px}
  .topin{padding:10px 12px;align-items:stretch}
  .brand{font-size:20px}
  .topin>.actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .topin>.actions>.btn{width:100%;padding:10px 8px}
  .portalMain{padding:14px 10px 26px}
  .portalMainHeader{flex-direction:column;margin-bottom:14px;padding-bottom:11px}
  .titleRow,.pronTop,.pronSectionTop,.storiesTop{align-items:stretch;flex-direction:column}
  .titleRow>.btn,.pronSectionTop>.btn,.pronBackBtn{width:100%;text-align:center}
  .grid,.unitGrid,.lessonSeqGrid,.listGrid,.pronGrid,.pronCategoryGrid,.pronSubGrid,.pronWordGrid,.metrics,.scoreGrid,.collectionGrid,.filterGrid,.storyCategoryGrid,.storyCardGrid,.flowGrid{grid-template-columns:minmax(0,1fr)!important}
  .panel,.unit,.lessonSeqCard,.lessonBlock,.flowCard,.examLevel,.examResult{padding:15px;border-radius:15px}
  .lessonAccordion{gap:10px}.lessonAccordion details{border-radius:14px}.lessonAccordion summary{padding:14px}.lessonAccordion .accBody{padding:0 14px 14px}
  .lessonAccordion .accLeft{min-width:0}.lessonAccordion .accMeta{white-space:normal}
  .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.row>*{width:100%;min-width:0}
  .search,.chat{display:grid;grid-template-columns:minmax(0,1fr)}
  .search .btn,.chat .btn{width:100%}
  .quizQ,.flowQuestion,.qa{padding:12px}.quizQ label,.flowQuestion label{padding:10px 7px;line-height:1.45}
  .quizQ .btn{width:100%;margin:6px 0 8px}
  .card img,.pronThumb,.pronSubThumb{height:180px}.pronWordThumb{height:190px}
  .modal{padding:8px}.modalCard{border-radius:15px;padding:14px;max-height:calc(100dvh - 16px)}
  .storyPaper{padding:15px;border-radius:15px}.storyPaper h2{font-size:clamp(23px,7vw,29px)}
  .examSubmitBar{position:static!important;align-items:stretch!important}.examSubmitBar .examSubmit{width:100%}
  h1,h2,h3,h4{overflow-wrap:anywhere}
}

@media (max-width:420px){
  .portalSidebar{padding:11px 10px}
  .sidebarBrand strong{font-size:14px}.sidebarSmall{font-size:11px}
  .verticalNav .btn,.verticalNav .btn.gray{min-width:132px;padding:10px 11px}
  .portalMain{padding-inline:8px}
  .hero,.section{padding-inline:10px}.heroBox{padding:20px}
  .row{grid-template-columns:minmax(0,1fr)}
  .btn{min-height:42px}
  .flowSteps{grid-template-columns:repeat(6,minmax(112px,1fr))}
  .phraseRow{grid-template-columns:36px minmax(0,1fr)!important;padding:11px!important;gap:9px!important}
  .phraseNumber{width:34px!important;height:34px!important}
  .phraseRow .b1Audio{grid-column:1/-1;display:grid;grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}