/* EducaKids responsive audit 2026-08-19: real phones and tablets. */
html,body,#root{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}

@media (max-width:900px){
  .auth-page{min-height:100svh;display:block;background:#f8fbff}
  .auth-visual{min-height:280px;height:280px;padding:22px 24px;border-radius:0 0 28px 28px}
  .auth-visual .brand{width:190px;padding:13px 15px 11px;border-radius:16px;box-shadow:0 14px 30px #001a5640}
  .auth-visual__copy{width:62%;margin-top:54px}
  .auth-visual h1{margin:0;font-size:clamp(31px,7vw,44px);line-height:1;letter-spacing:-.045em}
  .auth-visual p,.auth-proof{display:none}
  .auth-visual>img{right:-2%;bottom:-9px;width:43%;height:76%;max-height:none;object-fit:contain;object-position:center bottom;opacity:1;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28))}
  .auth-panel{min-height:calc(100svh - 280px);padding:30px 24px 40px;display:block;background:radial-gradient(circle at 90% 0,#edf4ff,transparent 32%),#fff}
  .auth-card{width:min(100%,520px);margin:0 auto}
  .auth-card__icon{width:46px;height:46px;margin-bottom:20px;border-radius:14px}
  .auth-card h2{font-size:clamp(30px,7vw,38px);line-height:1.04}
  .auth-card form{margin-top:22px;gap:13px}
  .input-with-icon{min-height:54px;border-radius:15px}
  .input-with-icon input{height:50px;font-size:16px}
  .auth-card .button{min-height:54px;border-radius:15px}
  .auth-panel>small{display:block;margin:22px auto 0;max-width:430px;line-height:1.45}

  .app-shell{display:block;min-width:0}
  .sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:min(310px,86vw);height:100dvh;overflow-y:auto;transform:translateX(-105%);transition:transform .24s ease}
  .sidebar--open{transform:translateX(0)}
  .menu-button,.sidebar__close{display:inline-flex}
  .topbar{height:76px;min-width:0;padding:0 16px;gap:10px}
  .workspace-context{min-width:0;margin:0 auto 0 0}
  .workspace-context label{display:none}
  .workspace-context .pro-chip{display:inline-flex;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar__profile{min-width:0;gap:7px}
  .topbar__profile div{display:none}
  .topbar__profile .avatar{width:40px;height:40px;font-size:12px}
  .topbar__profile .icon-button{width:40px;height:40px;margin-left:0}
  .page{width:100%;min-width:0;padding:18px 16px 42px}
  .page-heading{min-width:0}
  .dashboard-grid,.dashboard-grid--v2,.period-layout,.stats-grid,.quick-actions-grid{grid-template-columns:1fr}
  .dashboard-hero{min-height:0;padding:26px 22px 0;border-radius:24px;display:grid;grid-template-columns:1fr;align-items:start;overflow:hidden}
  .dashboard-hero__copy{min-width:0}
  .dashboard-hero h1{max-width:none;margin-bottom:12px;font-size:clamp(35px,9vw,48px);line-height:1.02;letter-spacing:-1.4px}
  .dashboard-hero p{margin-bottom:18px;font-size:14px;line-height:1.55}
  .dashboard-hero .button-row{display:grid;grid-template-columns:1fr;gap:10px}
  .dashboard-hero .button{width:100%;min-height:52px}
  .dashboard-hero>img{position:relative;right:auto;bottom:auto;z-index:2;width:calc(100% + 44px);max-width:none;height:220px;max-height:none;margin:10px -22px 0;border-radius:0;object-fit:cover;object-position:center 38%;opacity:1;filter:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%);mask-image:linear-gradient(180deg,transparent 0,#000 20%)}
  .metric-grid,.license-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.topic-card,.subject-card,.lesson-card,.assignment-card{min-width:0}
  .modal,.compact-modal{width:calc(100vw - 28px);max-height:calc(100dvh - 28px);overflow:auto}
}

@media (max-width:640px){
  .auth-visual{min-height:225px;height:225px;padding:18px 20px;border-radius:0 0 24px 24px}
  .auth-visual .brand{width:168px;padding:11px 13px 10px;font-size:25px}
  .auth-visual .brand small{margin-top:6px;font-size:8px}
  .auth-visual__copy{width:66%;margin-top:38px}
  .auth-visual__copy .eyebrow{font-size:9px;letter-spacing:1.4px}
  .auth-visual h1{font-size:clamp(27px,8vw,34px)}
  .auth-visual>img{right:-8px;bottom:-8px;width:44%;height:72%}
  .auth-panel{min-height:calc(100svh - 225px);padding:25px 20px 34px}
  .auth-card__icon{width:42px;height:42px;margin-bottom:16px}
  .auth-card h2{font-size:32px}
  .auth-card>p:not(.eyebrow){font-size:14px}
  .auth-card form{margin-top:20px}
  .auth-card .text-button,.recovery-link{font-size:14px;line-height:1.35}
  .auth-divider{margin:19px 0 15px}

  .topbar{height:68px;padding:0 12px}
  .menu-button{width:42px;height:42px}
  .workspace-context .pro-chip{max-width:104px;min-height:38px;padding-inline:10px;font-size:10px}
  .topbar__profile .avatar{display:none}
  .topbar__profile .icon-button{width:42px;height:42px}
  .page{padding:14px 12px 34px}
  .dashboard-hero{padding:22px 18px 0;border-radius:21px}
  .dashboard-hero h1{font-size:clamp(34px,11vw,44px)}
  .dashboard-hero>img{width:calc(100% + 36px);height:190px;margin-inline:-18px}
  .metric-grid,.license-metrics{grid-template-columns:1fr}
  .page-heading.curriculum-heading--studio{min-height:0;padding:24px 19px;border-radius:22px}
  .page-heading.curriculum-heading--studio h1{font-size:36px}
  .subject-grid--v2{gap:14px}
  .subject-grid--v2 .subject-card{min-height:300px;border-radius:22px}
  .subject-grid--v2 .subject-card__content{min-height:300px;padding:22px 19px}
  .subject-grid--v2 .subject-card__content h2{font-size:27px}
  .builder-heading{min-height:0;padding:23px 19px;border-radius:22px}
  .builder-heading h1{font-size:36px}
  .builder-canvas,.builder-library--dock,.builder-publish-panel{padding:18px;border-radius:20px}
  .builder-block{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .builder-block>img{width:74px;height:64px}
  .builder-block__actions{grid-column:1/-1;justify-content:flex-end}
}

@media (min-width:901px) and (max-width:1180px){
  .auth-page{grid-template-columns:minmax(0,1fr) minmax(410px,.86fr)}
  .auth-visual{min-height:100vh;padding-inline:5%}
  .auth-visual__copy{width:78%;margin-top:12vh}
  .auth-visual h1{font-size:clamp(40px,5vw,56px)}
  .auth-visual>img{right:-7%;width:50%}
  .auth-panel{padding:38px 28px}
  .page{padding-inline:22px}
  .dashboard-hero{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}
}