/* Shared screen refinements for public pages and the parent portal. */
body { min-height: 100svh; -webkit-tap-highlight-color: transparent; }
img, svg, canvas { max-width: 100%; }
button, a { touch-action: manipulation; }
:is(a, button, input, select, textarea):focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.container, .glass-card, .metric-box, .comfort-card, .card-3d { min-width: 0; }
@media (max-width: 768px) {
  .container { width: 100%; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  header { gap: 16px; flex-wrap: wrap; }
  .brand { min-width: 0; }
  .brand img { flex-shrink: 0; }
  .brand h1 { font-size: 1rem; overflow-wrap: anywhere; }
  .auth-box { margin: 24px auto; padding: 28px 20px; }
  .glass-card { padding: 20px 16px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .metric-box { padding: 14px; }
  .metric-value { font-size: 1.2rem; overflow-wrap: anywhere; }
  .student-title h2 { font-size: 1.2rem; }
  .custom-table { min-width: 520px; }
  .nav-link, .btn, .btn-zain { min-height: 44px; }
  input, select, textarea { font-size: 16px; min-height: 48px; }
  .zain-banner .btn-zain { width: 100%; justify-content: center; }
  .nav-wrap { gap: 14px; }
  .hero { padding-top: 130px; }
  .hero h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-actions, .cta-actions, .leader-actions { flex-wrap: wrap; }
  .steps-grid, .features-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-top { flex-wrap: wrap; gap: 24px; }
}
@media (max-width: 360px) { .metric-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}