/* EduFlow full-page responsive polish */
:root {
  --page-gutter: clamp(14px, 3vw, 32px);
}

body { overflow-x: hidden; }
.app-page-shell { padding-top: clamp(22px, 3vw, 38px); }
.panel-zone { min-width: 0; }
.responsive-card-grid { align-items: stretch; }

.dashboard-hero.pro-hero,
.course-hero-panel {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: stretch;
}
.student-hero { --role-accent: #2454ff; }
.instructor-hero { --role-accent: #0f8f5f; }
.admin-hero { --role-accent: #7c3aed; }
.dashboard-hero.pro-hero:before,
.course-hero-panel:before { background: color-mix(in srgb, var(--role-accent, #2454ff) 14%, transparent); }
.dashboard-hero.pro-hero .eyebrow,
.course-hero-panel .eyebrow { color: var(--role-accent, var(--primary)); background: color-mix(in srgb, var(--role-accent, #2454ff) 12%, white); }

.focus-panel { min-height: 240px; }
.side-panel { min-width: 0; }
.course-list-shell { display: grid; gap: 16px; }
.course-list-shell .course-card { min-height: 0; }

.course-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(36,84,255,.18); }
.course-title h3 { line-height: 1.2; }
.course-footer .actions { justify-content: flex-end; }

.course-hero-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,244,255,.95));
}
.course-hero-panel:before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  top: -100px;
  right: -80px;
  border-radius: 999px;
}
.course-hero-panel > * { position: relative; z-index: 1; }
.course-hero-panel h1 { font-size: clamp(2rem, 4vw, 3.6rem); }

.learning-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.module-sidebar { border-radius: 26px; }
.module-item { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
.module-item strong { line-height: 1.28; }
.module-item .course-meta { grid-column: 2; }
.module-item.active { border-color: rgba(36,84,255,.34); background: var(--primary-soft); box-shadow: 0 12px 30px rgba(36,84,255,.08); }
.module-item.completed { border-color: rgba(15,143,95,.20); }
.module-content-zone { min-width: 0; }
.module-detail-card { border-radius: 28px; }
.module-content {
  white-space: pre-wrap;
  line-height: 1.72;
  color: #344054;
  max-width: 78ch;
}
.resource-list { display: flex; flex-wrap: wrap; gap: 10px; }

.professional-form { gap: 18px; }
.professional-form > .field,
.professional-form .form-grid,
.professional-form .builder-panel { min-width: 0; }
.professional-form textarea { min-height: 132px; }
.builder-page .dashboard-grid { align-items: start; }
.editor-layout { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
.sticky-form { position: sticky; top: 92px; }
.builder-item { border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.92)); }
.question-builder { border-left-color: var(--primary); }
.quiz-builder-layout { align-items: start; }
.offline-note {
  background: radial-gradient(circle at top right, rgba(36,84,255,.12), transparent 42%), rgba(255,255,255,.94);
}

.table-wrap {
  width: 100%;
  border-radius: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { white-space: nowrap; }
td:first-child, th:first-child { white-space: normal; min-width: 220px; }

.auth-layout { align-items: stretch; }
.auth-card, .auth-brand-card { min-width: 0; }
.auth-brand-card p { max-width: 28ch; }
.role-card { min-height: 150px; }

@media (max-width: 1180px) {
  .grid-3.responsive-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-hero.pro-hero, .course-hero-panel { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .container { width: min(100% - 28px, 1200px); }
  .nav-inner { min-height: 66px; }
  .nav-links { inset: 74px 14px auto 14px; max-height: calc(100vh - 90px); overflow: auto; }
  .nav-links .btn, .nav-links .nav-link, .nav-links .status-pill { width: 100%; justify-content: center; }
  .dashboard-grid, .editor-layout, .learning-layout, .module-layout, .grid-2.quiz-builder-layout { grid-template-columns: 1fr; }
  .side-panel, .sticky-form, .module-sidebar { position: static; }
  .module-sidebar { max-height: none; }
  .course-top { align-items: stretch; }
  .course-top .actions, .dashboard-hero-actions { align-items: stretch; }
}

@media (max-width: 720px) {
  h1 { font-size: clamp(2.05rem, 11vw, 3.3rem); }
  h2 { font-size: clamp(1.45rem, 7vw, 2.25rem); }
  .page { padding-bottom: 42px; }
  .grid-3.responsive-card-grid, .dashboard-strip, .analytics-metrics, .form-grid, .grid-2 { grid-template-columns: 1fr; }
  .dashboard-hero.pro-hero, .course-hero-panel, .card-lg { padding: 22px; border-radius: 24px; }
  .hero-kpi-card { border-radius: 22px; padding: 18px; }
  .dashboard-ring { width: 132px; height: 132px; }
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .section-head { gap: 12px; }
  .search-box { width: 100%; min-width: 0; }
  .course-title, .analytics-top, .preview-topbar { flex-direction: column; align-items: flex-start; }
  .course-footer { align-items: stretch; }
  .course-footer .actions, .actions, .dashboard-hero-actions { width: 100%; }
  .course-footer .btn, .actions .btn, .dashboard-hero-actions .btn { flex: 1 1 140px; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand-card { min-height: 260px; }
  .role-card-grid { grid-template-columns: 1fr; }
  .home-role-card, .feature-tile { min-height: 210px; }
}

@media (max-width: 460px) {
  .container { width: min(100% - 20px, 1200px); }
  .card, .card-lg { padding: 16px; border-radius: 20px; }
  .btn { width: 100%; }
  .status-pill, .badge { white-space: normal; text-align: center; justify-content: center; }
  .dashboard-strip .stat-card { min-height: 104px; }
  .stat-card { align-items: flex-start; }
  .course-cover { height: 112px; }
  .module-item { grid-template-columns: 1fr; }
  .module-item .module-number { margin-bottom: 2px; }
  .module-item .course-meta { grid-column: 1; }
  .professional-option { padding: 12px; }
  .option-letter { width: 30px; height: 30px; }
}