/* Mobile-first hardening layer for PCP Haffouz */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,.btn,input,select,textarea,.choice,.quiz-option,.lesson-link{touch-action:manipulation}
button,.btn,.tab,.ex-num,.char-btn{min-height:44px}
.hero-meta{margin-top:14px;font-size:13px;opacity:.9}
.table-wrap{-webkit-overflow-scrolling:touch}
pre,code{overflow-wrap:anywhere;word-break:break-word}

@media (max-width:980px){
  .container{padding:22px 16px 64px}
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .course-layout,.exercise-layout{grid-template-columns:1fr}
  .exercise-side{position:static;top:auto}
  .lesson-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teacher-layout,.admin-layout,.dashboard-layout{grid-template-columns:1fr!important}
}

@media (max-width:720px){
  body{font-size:14px;line-height:1.5}
  .topbar-inner{padding:9px 12px;gap:8px;flex-wrap:wrap}
  .brand{min-width:0;flex:1}
  .brand>div:last-child{min-width:0}
  .brand strong,.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand small{display:none}
  .top-actions{margin-left:0;width:100%;justify-content:flex-end;overflow-x:auto;padding-bottom:2px}
  .user-chip{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .container{padding:16px 12px 56px}
  .hero{border-radius:20px}
  .hero-content{padding:28px 20px 26px}
  .hero h1{font-size:clamp(34px,12vw,52px);letter-spacing:-1.6px;margin:7px 0 11px}
  .hero p{font-size:15px;line-height:1.55}
  .eyebrow{font-size:10px;letter-spacing:1px}
  .status-pill{margin-top:18px;max-width:100%;white-space:normal;line-height:1.35}

  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
  .section{margin-top:20px}
  .section-head{align-items:flex-start;flex-direction:column;gap:8px}
  .section-head .spacer{display:none}
  .section-head .btn{width:100%}
  .section-head h2{font-size:22px}
  .card{padding:17px;border-radius:16px}
  .feature-card{gap:12px}
  .feature-card .arrow{align-self:center}
  .iconbox{width:40px;height:40px;border-radius:12px}

  .form-row{grid-template-columns:1fr}
  .field input,.field select,.field textarea{font-size:16px;min-height:46px}
  .auth-wrap{margin:22px auto;padding:0 4px}
  .panel-head,.panel-body{padding:15px}
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .tab{width:100%}

  .dash-hero{align-items:flex-start;flex-direction:column;padding:17px}
  .dash-hero h1{font-size:23px}
  .stat-card strong{font-size:25px}
  .memory-grid{grid-template-columns:1fr}
  .lesson-nav{grid-template-columns:1fr}
  .lesson-block{padding:15px}
  .lesson-block.lead{font-size:15px}
  .lesson-block.formula{font-size:16px;overflow-x:auto;text-align:left}
  .quiz{padding:14px}
  .quiz-option{min-height:46px}

  .exercise-layout{gap:12px}
  .exercise-side .card{padding:12px}
  .exercise-list{grid-template-columns:repeat(6,minmax(40px,1fr));overflow-x:auto;scrollbar-width:thin;padding-bottom:3px}
  .ex-num{font-size:12px;min-width:40px}
  .ex-head{padding:17px}
  .ex-head h2{font-size:20px}
  .ex-body{padding:15px}
  .question{padding:16px 0}
  .q-title{gap:8px}
  .q-prompt{font-size:14px;line-height:1.5}
  .choices{gap:7px}
  .choice{padding:11px;min-height:48px}
  .answer-input{max-width:none;font-size:16px;min-height:46px}
  .match-row{grid-template-columns:1fr;gap:6px;padding:10px 0;border-bottom:1px solid var(--line)}
  .match-row select{font-size:16px;min-height:46px}
  .order-item{min-height:48px;align-items:flex-start}
  .order-handle{padding:4px 6px;font-size:18px}
  .char-strip{display:grid;grid-template-columns:repeat(6,1fr)}
  .char-btn{min-width:0;width:100%;min-height:50px}

  .table-wrap{margin-left:-2px;margin-right:-2px}
  .table{min-width:560px}
  .table th,.table td{padding:10px;font-size:12px}

  .modal,.dialog,.modal-card{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;margin:12px!important}
  .modal-body,.dialog-body{overflow:auto;-webkit-overflow-scrolling:touch}

  .exam-shell,.exam-layout{grid-template-columns:1fr!important}
  .exam-timer{position:sticky;top:0;z-index:25}
  .exam-nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .exam-nav button{flex:0 0 44px}
}

@media (max-width:430px){
  .container{padding-left:10px;padding-right:10px}
  .hero-content{padding:24px 17px}
  .hero h1{font-size:38px}
  .hero p{font-size:14px}
  .card{padding:15px}
  .card h3{font-size:17px}
  .btn{width:100%;min-height:46px}
  .feature-card .btn{width:auto}
  .exercise-list{grid-template-columns:repeat(5,minmax(40px,1fr))}
  .char-strip{grid-template-columns:repeat(5,1fr)}
  .tabs{grid-template-columns:1fr}
}

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