/* MulVidya site-wide responsive layer
   Purpose: comfortable phone/tablet/desktop layouts without changing routes,
   tool logic, original branding, or premium-test-series.html. */

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
img{height:auto}
button,input,select,textarea{max-width:100%;font:inherit}

/* Safe page gutters for the common site shell. */
.container,.page-container,.main-container,.content-container,.page-shell,.site-container,.section-container,
.topbar-inner,.site-header-inner,.hero-inner,.main-inner{
  width:min(100% - 32px, 1120px);
  margin-left:auto;
  margin-right:auto;
}

/* Common content width + long-content readability. */
main,section,article,aside,.page-content,.main-content{min-width:0;max-width:100%}
.prose,.article-body,.legal-content{overflow-wrap:anywhere}

/* Common grids become genuinely responsive rather than merely shrinking. */
.grid,.tool-grid,.cat-grid,.category-grid,.feature-grid,.card-grid,.about-feature-grid,.contact-grid,
.subject-grid,.template-grid,.start-grid,.set-grid,.dest-grid,.exam-grid,.gl-grid,.ws-grid,
.fc-gen-row,.fc-library-row,.fc-export-row,.aig-gallery-grid,.vt-export-row,.vt-gen-row,
.db-creations-grid,.db-links-grid,.db-info-grid,.mv-shelf-grid,.mv-shelf-grid-2,
.uc-popular-grid,.uc-seo-grid,.pdf-tool-grid,.pt-grid{
  min-width:0;
}

/* Rows that are often too wide on phones. */
.field-row,.form-row,.form-grid,.design-row,.topic-row,.generate-row,.download-row,.email-panel,
.ai-mode-row,.ai-doubt-row,.ask-row,.word-row,.color-row,.pt-field-row,.db-field-row,
.db-account-row,.db-actions-row,.pw-row,.rv-form-row,.uc-input-row,.uc-context-row{
  min-width:0;
}

/* Tables: preserve content and allow horizontal scroll instead of page overflow. */
table,.data-table,.review-table,.match-table,.mv-table{max-width:100%}
table{border-collapse:collapse}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table,.review-table,.match-table,.mv-table{overflow-x:auto}

/* Inputs, controls and buttons should never force the viewport wider. */
input,select,textarea{width:100%;min-width:0}
textarea{resize:vertical}
.btn,.btn-primary,.btn-secondary,.btn-ghost,.primary-btn,.ghost-btn,.small-btn,
.ai-btn,.aig-btn,.copy-btn,.control-btn,.join-btn,.mode-toggle-btn,.fc-toolbar-btn,
.fc-icon-btn,.fc-nav-btn,.fc-rate-btn,.fc-speak-btn,.fc-voice-btn,.gl-mode-btn,
.mt-cat-btn,.mt-steps-chip,.page-btn,.seg-btn,.nav-auth-btn,.hero-cta,
.mv-btn,.mv-primary,.mv-secondary{max-width:100%}

/* Prevent text clipping in flexible controls. */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.primary-btn,.ghost-btn,.nav-auth-btn,
.hero-cta,.mv-btn,.mv-primary,.mv-secondary{white-space:normal;text-align:center}

/* Common header/nav. Desktop stays compact; phone gets an actual stacked menu. */
.topbar-inner{gap:10px}
.topbar-actions{min-width:0;display:flex;align-items:center;flex-wrap:wrap}
.topbar-links{min-width:0;display:flex;align-items:center;flex-wrap:wrap}
.brand{min-width:0}
.brand-text{min-width:0}
.brand-text strong,.brand-text small{max-width:100%;overflow:hidden;text-overflow:ellipsis}

.nav-dropdown-panel,.nav-dropdown-panel-wide,.feature-menu-panel{max-width:calc(100vw - 24px)}

/* Common hero layouts. */
.hero-inner,.about-hero,.legal-hero,.aig-hero,.fc-hero,.gl-hero,.mt-hero,.vt-hero,.ws-hero,
.wt-hero,.pt-hero,.db-hero,.uc-hero{min-width:0}
.hero-side,.hero-copy,.hero-card,.hero-visual,.hero-logo{min-width:0;max-width:100%}

/* Dense two-column forms collapse gracefully. */
@media (max-width: 980px){
  .form-row,.field-row,.design-row,.db-field-row,.pt-field-row,.pw-row,.rv-form-row,
  .generate-row,.download-row,.uc-input-row,.uc-context-row{grid-template-columns:1fr !important}

  .tool-grid,.cat-grid,.category-grid,.feature-grid,.card-grid,.about-feature-grid,.contact-grid,
  .subject-grid,.template-grid,.start-grid,.set-grid,.dest-grid,.exam-grid,.gl-grid,.ws-grid,
  .db-creations-grid,.db-links-grid,.db-info-grid,.mv-shelf-grid,.mv-shelf-grid-2,
  .uc-popular-grid,.uc-seo-grid,.pdf-tool-grid,.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}

  .hero-inner,.hero,.hero-card,.about-hero,.aig-hero,.fc-hero,.gl-hero,.mt-hero,.vt-hero,
  .ws-hero,.wt-hero,.pt-hero,.db-hero,.uc-hero{grid-template-columns:1fr !important}

  .hero-side,.hero-visual{order:0}
  .hero-visual{min-height:220px}

  .topbar-inner{padding-top:11px;padding-bottom:11px}
  .topbar-actions{gap:8px}

  .nav-dropdown-panel-wide{width:min(680px,calc(100vw - 24px))}
}

@media (max-width: 720px){
  .container,.page-container,.main-container,.content-container,.page-shell,.site-container,.section-container,
  .topbar-inner,.site-header-inner,.hero-inner,.main-inner{
    width:min(100% - 24px, 680px);
  }

  body{font-size:15px}

  .topbar-inner{min-height:60px;padding-top:9px;padding-bottom:9px}
  .topbar-actions{gap:7px}
  .topbar-links{display:none}
  .brand{gap:9px}
  .brand-mark{width:34px;height:34px}
  .brand-text strong{font-size:.98rem}
  .brand-text small{display:none}

  .nav-auth-btn{padding:7px 11px;font-size:.82rem}
  .nav-toggle,.theme-toggle{flex:0 0 auto}

  .mobile-nav.open{max-height:calc(100dvh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch}

  h1{font-size:clamp(1.95rem,8vw,3rem);line-height:1.08}
  h2{font-size:clamp(1.4rem,6vw,2rem);line-height:1.12}
  h3{line-height:1.18}

  .hero{padding-left:0;padding-right:0}
  .hero-inner{gap:18px}
  .hero-copy{width:100%;min-width:0}
  .hero-cta-row,.btn-row,.aig-btn-row,.fc-toolbar-row,.fc-toolbar-btns,.modal-actions,
  .pw-submit-row,.live-banner-actions,.quiz-nav,.step-footer{display:grid;grid-template-columns:1fr;gap:10px}
  .hero-cta,.hero-cta-secondary,.btn-row>* , .hero-cta-row>* , .modal-actions>* , .step-footer>*{width:100%;margin:0}

  .hero-benefits{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-benefits li{font-size:.78rem}

  .tool-grid,.cat-grid,.category-grid,.feature-grid,.card-grid,.about-feature-grid,.contact-grid,
  .subject-grid,.template-grid,.start-grid,.set-grid,.dest-grid,.exam-grid,.gl-grid,.ws-grid,
  .db-creations-grid,.db-links-grid,.db-info-grid,.mv-shelf-grid,.mv-shelf-grid-2,
  .uc-popular-grid,.uc-seo-grid,.pdf-tool-grid,.pt-grid{grid-template-columns:1fr !important}

  .stat-grid,.mv-stat-grid,.hist-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .gl-grid,.mt-shelf-grid,.aig-gallery-grid{grid-template-columns:1fr !important}

  .panel,.card,.tool-card,.feature-card,.info-card,.settings-card,.form-card,.question-card,
  .result-card,.stats-card,.box,.toolbox,.workspace-card,.db-panel,.db-card,.fc-card,.vt-card,
  .ws-card,.pdf-tool-card,.pt-card,.mv-card,.uc-converter-card{border-radius:14px;padding-left:14px;padding-right:14px}

  .panel,.card,.tool-card,.feature-card,.info-card,.settings-card,.form-card,.question-card,
  .result-card,.stats-card,.box,.toolbox,.workspace-card{overflow-wrap:anywhere}

  /* Side-by-side fields become comfortable stacked fields. */
  .field-row,.form-row,.design-row,.db-field-row,.pt-field-row,.pw-row,.rv-form-row,
  .generate-row,.download-row,.uc-input-row,.uc-context-row,.word-row,.color-row{gap:10px !important}

  /* Toolbars wrap rather than horizontally overflowing. */
  .toolbar,.fc-toolbar,.fc-deck-toolbar,.fc-export-row,.fc-nav-row,.fc-rate-row,
  .fc-voice-btns,.live-toolbar,.pdf-toolbar,.converter-toolbar,.action-row{display:flex;flex-wrap:wrap;gap:8px}
  .toolbar>*,.fc-toolbar>*,.fc-deck-toolbar>*,.fc-export-row>*,.fc-nav-row>*,.fc-rate-row>*,
  .fc-voice-btns>*,.live-toolbar>*,.pdf-toolbar>*,.converter-toolbar>*,.action-row>*{max-width:100%}

  /* Modals fill the phone comfortably while preserving scroll. */
  .modal,.quiz-modal,.gl-modal,.mt-modal,.mv-modal{
    padding:10px !important;
    align-items:flex-start !important;
  }
  .modal-card,.modal-content,.modal-dialog,.mv-modal-card,.gl-modal-card,.mt-modal-card{
    width:100% !important;max-width:none !important;max-height:calc(100dvh - 20px) !important;
    overflow:auto !important;border-radius:16px !important;
  }

  /* Long equations / code / JSON stay inside the viewport. */
  pre,code,.formula,.uc-formula,.code-block,.json-output{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

  /* Canvas workspaces stay usable on small screens. */
  canvas{max-width:100%;height:auto}
  .workspace,.board-shell,.live-board-shell,.canvas-shell{max-width:100%;overflow:hidden}

  /* Floating decorative UI should not block the primary controls. */
  .hero-visual [class*="float"],.mv-float-card,.uc-hero-3d .uc-float-card{max-width:42vw}

  .site-footer,.mv-footer{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .site-footer .footer-inner,.mv-footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .site-footer .footer-links,.mv-footer-links{flex-wrap:wrap;gap:10px}
}

@media (max-width: 440px){
  .container,.page-container,.main-container,.content-container,.page-shell,.site-container,.section-container,
  .topbar-inner,.site-header-inner,.hero-inner,.main-inner{width:calc(100% - 18px)}

  body{font-size:14px}
  .topbar-inner{min-height:58px}
  .brand-mark{width:31px;height:31px}
  .brand-text strong{font-size:.93rem}
  .nav-auth-btn{padding:6px 9px;font-size:.78rem}

  .hero-benefits{grid-template-columns:1fr}
  .stat-grid,.mv-stat-grid,.hist-stat-grid{grid-template-columns:1fr !important}

  input,select,textarea{font-size:16px !important;} /* prevents iOS/Android auto-zoom */
  .btn,.btn-primary,.btn-secondary,.btn-ghost,.primary-btn,.ghost-btn,.nav-auth-btn,
  .hero-cta,.mv-btn,.mv-primary,.mv-secondary{min-height:44px}

  .table-wrap,table,.data-table,.review-table,.match-table,.mv-table{font-size:12px}
  .step-card,.q-card,.result-card,.fc-card,.vt-card,.ws-card,.pt-card{padding:12px !important}
}

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


/* ==========================================================================
   Final mobile polish: consistent shell, cards and controls across pages
   ========================================================================== */
@media (max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{line-height:1.45}
  main{width:100%;min-width:0}
  .page-container,.main-container,.content-container,.page-shell,.site-container,.section-container,
  .about-wrap,.legal-wrap,.contact-wrap,.dashboard-wrap{max-width:100%;padding-left:12px;padding-right:12px}
  .topbar-inner,.site-header-inner{width:100%;padding-left:12px;padding-right:12px}
  .card,.panel,.tool-card,.feature-card,.info-card,.settings-card,.form-card,.question-card,.result-card,
  .stats-card,.box,.toolbox,.workspace-card,.db-panel,.db-card,.fc-card,.vt-card,.ws-card,.pdf-tool-card,
  .pt-card,.mv-card,.uc-converter-card{max-width:100%;min-width:0;overflow:hidden}
  .card h2,.panel h2,.tool-card h2,.feature-card h2,.card h3,.panel h3{overflow-wrap:anywhere}
  .toolbar,.action-row,.btn-row,.hero-cta-row,.generate-row,.download-row{min-width:0}
  .toolbar>* ,.action-row>* ,.btn-row>*{min-width:0;max-width:100%}
  .topbar-actions{justify-content:flex-end;min-width:0}
  .topbar-actions>*{max-width:45vw}
  .site-footer,.mv-footer{margin-top:14px}
}
@media (max-width:440px){
  .topbar-inner,.site-header-inner{padding-left:9px;padding-right:9px}
  .page-container,.main-container,.content-container,.page-shell,.site-container,.section-container,
  .about-wrap,.legal-wrap,.contact-wrap,.dashboard-wrap{padding-left:9px;padding-right:9px}
  .card,.panel,.tool-card,.feature-card,.info-card,.settings-card,.form-card,.question-card,.result-card,
  .stats-card,.box,.toolbox,.workspace-card{border-radius:13px}
}