/* MulVidya AI — site-wide premium polish v2
   Applies to all normal pages. Premium Test Series is intentionally excluded.
   This layer improves composition, responsiveness, depth, readability and touch UX
   without changing routes or tool logic. */

:root{
  --mv-max: 1180px;
  --mv-gutter: 24px;
  --mv-surface-glass: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  --mv-ring: color-mix(in srgb, var(--accent, #6e5bd6) 24%, transparent);
  --mv-shadow-premium: 0 24px 70px rgba(18,20,45,.10), 0 4px 18px rgba(18,20,45,.06);
  --mv-shadow-dark: 0 28px 80px rgba(0,0,0,.34), 0 5px 22px rgba(0,0,0,.22);
}

html{scrollbar-gutter:stable;}
body{
  min-width:320px;
  text-rendering:optimizeLegibility;
}

/* Consistent readable content width without forcing tool workspaces narrow. */
main > section:not(.full-bleed),
main > .section,
.mv-section,
.mv-shell,
.about-wrap,
.vt-shell,
.fc-shell,
.ws-shell,
.pdf-shell,
.uc-shell,
.mt-shell,
.gl-shell,
.db-shell,
.pt-shell{
  max-width:var(--mv-max);
  margin-left:auto;
  margin-right:auto;
}

/* Premium surfaces. Only target common cards, never the protected product. */
.panel,.card,.tool-card,.feature-card,.info-card,.settings-card,.form-card,
.question-card,.result-card,.stats-card,.box,.toolbox,.workspace-card,
.vt-card,.fc-card,.ws-card,.pdf-tool-card,.pt-card,.mv-card,.uc-converter-card,
.mv-category,.mv-feature-card{
  border-color:color-mix(in srgb, var(--border, #ddd) 86%, var(--accent, #6e5bd6) 14%);
  box-shadow:var(--mv-shadow-premium);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease,background .24s ease;
}

@media (hover:hover) and (pointer:fine){
  .tool-card:hover,.feature-card:hover,.info-card:hover,.mv-feature-card:hover,.mv-category:hover,
  .vt-card:hover,.fc-card:hover,.ws-card:hover,.pdf-tool-card:hover,.pt-card:hover{
    transform:translateY(-3px);
    box-shadow:0 30px 85px rgba(18,20,45,.14),0 6px 22px rgba(18,20,45,.07);
    border-color:color-mix(in srgb, var(--accent, #6e5bd6) 32%, var(--border, #ddd));
  }
}

html[data-theme="dark"] .panel,html[data-theme="dark"] .card,html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .feature-card,html[data-theme="dark"] .info-card,html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .form-card,html[data-theme="dark"] .question-card,html[data-theme="dark"] .result-card,
html[data-theme="dark"] .stats-card,html[data-theme="dark"] .box,html[data-theme="dark"] .toolbox,
html[data-theme="dark"] .workspace-card,html[data-theme="dark"] .vt-card,html[data-theme="dark"] .fc-card,
html[data-theme="dark"] .ws-card,html[data-theme="dark"] .pdf-tool-card,html[data-theme="dark"] .pt-card,
html[data-theme="dark"] .mv-card,html[data-theme="dark"] .uc-converter-card,html[data-theme="dark"] .mv-category,
html[data-theme="dark"] .mv-feature-card{
  box-shadow:var(--mv-shadow-dark);
}

/* Headers: compact, stable, and never allowed to become a wrapped paragraph. */
.topbar,.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  background:color-mix(in srgb, var(--bg, #f6f7fb) 82%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--border, #ddd) 72%, transparent);
}
.topbar-inner,.site-header-inner{
  min-height:68px;
  width:min(calc(100% - 32px),var(--mv-max));
  margin:auto;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.brand{min-width:0;flex:0 1 auto;}
.brand-mark{flex:0 0 auto;}
.brand-mark img{display:block;object-fit:contain;}
.brand-text{min-width:0;}
.brand-text strong,.brand-text small{display:block;max-width:100%;}
.topbar-actions,.topbar-utility{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0;}
.topbar-links{min-width:0;}

/* Never show the removed global speaker control. */
.topbar #soundToggle,
.site-header #soundToggle,
.topbar .sound-toggle,
.site-header .sound-toggle{display:none !important;}

/* Buttons get a common tactile treatment without altering their colours. */
button,.btn,.nav-auth-btn,.ghost-link,.primary,.ghost-btn,.mv-btn,.mv-primary,.mv-secondary{
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--mv-ring);
  outline-offset:2px;
}

/* Long titles and descriptions must wrap rather than break the layout. */
h1,h2,h3,h4,p,a,span,strong,small,label{overflow-wrap:break-word;}

/* Responsive grids: never squeeze cards into unusable columns. */
@media (max-width:980px){
  .topbar-inner,.site-header-inner{min-height:64px;}
  .topbar-links{display:none;}
  .topbar-utility{gap:7px;}
  .topbar-actions{gap:7px;flex-wrap:wrap;justify-content:flex-end;}
  .hero,.hero-inner,.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:minmax(0,1fr) !important;
  }
}

@media (max-width:720px){
  :root{--mv-gutter:12px;}
  .topbar-inner,.site-header-inner{width:calc(100% - 20px);min-height:58px;gap:8px;}
  .brand{flex:1 1 auto;min-width:0;}
  .brand-mark{width:34px;height:34px;}
  .brand-mark img{width:34px;height:34px;}
  .brand-text strong{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brand-text small{display:none;}
  .topbar-actions,.topbar-utility{flex:0 0 auto;}
  .nav-auth-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;}
  .theme-toggle,.nav-toggle{width:42px;height:42px;min-width:42px;}

  /* Mobile sheets/panels should own their scrolling, not the page. */
  .mobile-nav,.mv-mobile-panel{
    max-width:100vw;
    width:100%;
    overscroll-behavior:contain;
  }
  .mobile-nav.open,.mv-mobile-panel.open{max-height:calc(100dvh - 58px);}

  .hero-copy,.hero-card,.hero-visual,.page-hero,.tool-hero{min-width:0;width:100%;}
  .hero-copy h1,.page-hero h1,.tool-hero h1{font-size:clamp(2rem,9vw,3.25rem);line-height:1.04;letter-spacing:-.035em;}

  /* Dense controls become vertical, but only when the row is genuinely a form/action row. */
  .form-row,.field-row,.design-row,.generate-row,.download-row,.uc-input-row,.uc-context-row,
  .pw-row,.rv-form-row,.db-field-row,.pt-field-row{grid-template-columns:minmax(0,1fr) !important;}

  .btn-row,.hero-cta-row,.modal-actions,.step-footer{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
  .btn-row>* ,.hero-cta-row>* ,.modal-actions>* ,.step-footer>*{width:100%;min-width:0;}

  /* Toolbars may wrap, but individual controls remain touch-sized. */
  .toolbar,.action-row,.converter-toolbar,.pdf-toolbar,.live-toolbar,.fc-toolbar,.fc-deck-toolbar,
  .fc-export-row,.fc-nav-row,.fc-rate-row{display:flex;flex-wrap:wrap;gap:8px;}
  .toolbar>* ,.action-row>* ,.converter-toolbar>* ,.pdf-toolbar>* ,.live-toolbar>* ,.fc-toolbar>*{min-height:42px;max-width:100%;}

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

  .mv-category,.mv-feature-card{box-shadow:0 18px 50px rgba(18,20,45,.08);}
  html[data-theme="dark"] .mv-category,html[data-theme="dark"] .mv-feature-card{box-shadow:0 22px 55px rgba(0,0,0,.28);}

  /* Decorative 3D objects become background accents, never content blockers. */
  .mv-orb,.hero-visual canvas,.hero-visual .orb,.hero-3d-object{max-width:72vw;max-height:48vh;}
  .mv-float-card,.uc-float-card,.hero-visual [class*="float"]{max-width:48vw;}

  /* Modals use the safe viewport height on modern phones. */
  .modal,.mv-modal,.quiz-modal,.gl-modal,.mt-modal{padding:8px !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 - 16px) !important;overflow:auto !important;
  }

  pre,.code-block,.json-output,.formula,.uc-formula{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:max-content;}
}

@media (max-width:430px){
  .topbar-inner,.site-header-inner{width:calc(100% - 14px);}
  .brand-mark,.brand-mark img{width:31px;height:31px;}
  .brand-text strong{font-size:.9rem;}
  .nav-auth-btn{padding:6px 9px;font-size:.82rem;}
  .theme-toggle,.nav-toggle{width:40px;height:40px;min-width:40px;}
  input,select,textarea{font-size:16px !important;}
  button,.btn,.nav-auth-btn,.ghost-btn,.primary,.mv-btn,.mv-primary,.mv-secondary{min-height:44px;}
}

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

/* Flagship navigation marker. Uses existing MulVidya accents, never replaces the logo palette. */
.nav-dropdown-item-flagship,.mobile-nav-link-flagship{
  font-weight:800;
}
.nav-dropdown-item-flagship{background:color-mix(in srgb,var(--accent,#6e5bd6) 8%,transparent);}
.mobile-nav-link-flagship{border-radius:12px;background:color-mix(in srgb,var(--accent,#6e5bd6) 8%,transparent);}