/* EduFlow academic polish: compact, professional, responsive */
:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-soft: #eef2f7;
  --text: #111827;
  --ink: #111827;
  --muted: #64748b;
  --line: #e2e8f0;
  --primary: #1d4ed8;
  --primary-dark: #1e3a8a;
  --primary-soft: #eff6ff;
  --success: #047857;
  --success-soft: #ecfdf5;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --shadow: 0 18px 44px rgba(15, 23, 42, .08);
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, .06);
  --radius-xl: 22px;
  --radius-lg: 20px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

html { font-size: 15px; }
body {
  background: linear-gradient(180deg, #f8fafc 0%, #f6f7fb 100%);
  color: var(--text);
}
.container { width: min(1140px, calc(100% - 28px)); }
.page { padding: 24px 0 40px; }
.stack { gap: 14px; }
p { line-height: 1.55; }
.lead { font-size: 1rem; line-height: 1.55; max-width: 54ch; }
h1 { font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.02; letter-spacing: -.045em; }
h2 { font-size: clamp(1.35rem, 2.7vw, 2.25rem); line-height: 1.08; }
h3 { font-size: 1.05rem; line-height: 1.2; }
.eyebrow { padding: 6px 10px; font-size: .68rem; letter-spacing: .075em; }
.card { border-radius: var(--radius-md); padding: 18px; box-shadow: var(--shadow-soft); }
.card-lg { border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); }
.btn { min-height: 40px; padding: 9px 14px; border-radius: 10px; font-size: .92rem; }
.btn-small { min-height: 32px; padding: 6px 10px; font-size: .82rem; }
.input, input, textarea, select { padding: 10px 12px; border-radius: 10px; font-size: .94rem; }
textarea { min-height: 104px; }
.badge, .status-pill { padding: 5px 9px; font-size: .72rem; }

/* Navigation */
.app-nav { background: rgba(255, 255, 255, .92); }
.nav-inner { min-height: 62px; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; }
.nav-link { padding: 8px 10px; font-size: .9rem; }

/* Home page: serious LMS presentation */
.home-page {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 46%, #f8fafc 100%);
}
.home-hero {
  min-height: auto;
  padding: 52px 0 42px;
  border-bottom: 1px solid var(--line);
}
.home-glow { display: none; }
.home-hero-grid {
  grid-template-columns: minmax(0, .95fr) minmax(320px, .82fr);
  gap: clamp(28px, 5vw, 56px);
}
.home-copy { gap: 16px; max-width: 620px; }
.home-copy h1 {
  font-size: clamp(2.35rem, 5.7vw, 4.65rem);
  line-height: .98;
  letter-spacing: -.06em;
}
.home-copy .lead { font-size: clamp(.96rem, 1.2vw, 1.06rem); max-width: 500px; }
.home-actions, .role-actions { gap: 10px; }
.home-actions .btn, .role-actions .btn { min-height: 40px; }
.home-trust-row span {
  padding: 7px 10px;
  font-size: .78rem;
  box-shadow: none;
  background: #fff;
}
.home-preview { min-height: 370px; }
.preview-card {
  width: min(380px, 100%);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
}
.main-preview-card { padding: 18px; }
.preview-chart { height: 150px; gap: 9px; padding: 22px 0 16px; }
.preview-list div { padding: 10px 12px; border-radius: 12px; }
.preview-list p { font-size: .88rem; }
.floating-card { padding: 11px 12px; border-radius: 16px; box-shadow: 0 12px 32px rgba(15,23,42,.10); }
.mini-icon { width: 34px; height: 34px; border-radius: 10px; }
.home-section { padding: 30px 0; }
.home-role-grid, .home-features-wrap { gap: 14px; }
.home-role-card {
  min-height: 210px;
  padding: 20px;
  border-radius: 20px;
  gap: 14px;
  box-shadow: var(--shadow-soft);
}
.home-role-card:before { width: 120px; height: 120px; opacity: .7; }
.role-icon { width: 46px; height: 46px; border-radius: 14px; font-size: 1rem; box-shadow: none; }
.home-role-card h3 { font-size: 1.18rem; }
.home-role-card p { font-size: .92rem; }
.feature-tile {
  min-height: 170px;
  padding: 20px;
  border-radius: 20px;
  align-content: start;
}
.feature-tile h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); line-height: 1.05; }
.feature-tile h3 { font-size: 1.08rem; }
.feature-icon { width: 40px; height: 40px; border-radius: 12px; }
.home-cta-panel {
  margin-top: 18px;
  margin-bottom: 34px;
  padding: 24px;
  border-radius: 22px;
}
.home-cta-panel h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); }

/* Auth and role selection */
.auth-shell { padding: 18px; }
.auth-card { width: min(460px, 100%); }
.auth-brand-card { min-height: 360px; }
.role-card, .auth-brand-card { border-radius: 22px; }
.role-card { min-height: 132px; padding: 18px; }
.role-symbol { width: 58px; height: 58px; border-radius: 16px; font-size: 1.5rem; }
.form { gap: 13px; }
.field { gap: 6px; }
.field span, .field label { font-size: .84rem; }
.help { font-size: .8rem; }

/* Dashboards */
.dashboard-page { padding-top: 0; }
.app-page-shell { padding-top: 20px; }
.dashboard-hero,
.dashboard-hero.pro-hero,
.course-hero-panel,
.premium-hero,
.pro-hero {
  border-radius: 22px;
  padding: 22px;
}
.dashboard-hero { gap: 16px; margin-bottom: 18px; }
.dashboard-hero.pro-hero h1,
.premium-hero h1,
.pro-hero h1,
.dashboard-page h1,
.course-hero-panel h1 {
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.05;
}
.dashboard-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-kpi-card { border-radius: 20px; padding: 18px; gap: 10px; }
.dashboard-strip { gap: 14px; margin: 14px 0 20px; }
.dashboard-strip .stat-card, .stat-card { min-height: 96px; padding: 16px; }
.stat-icon { width: 38px; height: 38px; border-radius: 12px; }
.stat-value { font-size: clamp(1.45rem, 3vw, 2.1rem); }
.stat-label, .status-card span { font-size: .84rem; }
.focus-panel { min-height: auto; }
.section-head { gap: 12px; margin-bottom: 16px; }
.compact-head h2 { font-size: clamp(1.25rem, 2vw, 1.8rem); }

/* Course and module pages */
.course-top { gap: 14px; margin-bottom: 16px; }
.module-layout, .learning-layout { gap: 16px; grid-template-columns: 300px minmax(0, 1fr); }
.module-sidebar { border-radius: 20px; }
.module-list { gap: 8px; margin-top: 10px; }
.module-item { padding: 11px; border-radius: 12px; grid-template-columns: 28px 1fr; }
.module-number { width: 26px; height: 26px; border-radius: 8px; font-size: .82rem; }
.module-content { line-height: 1.65; font-size: .95rem; max-width: 76ch; }
.module-detail-card { min-height: 320px; border-radius: 20px; }
.resource-list { gap: 8px; }

/* Course cards and tables */
.course-card { min-height: 222px; gap: 10px; }
.course-card > :not(.course-cover) { margin-left: 16px; margin-right: 16px; }
.course-card > .course-footer { margin-bottom: 16px; }
.course-cover { height: 96px; border-radius: 16px 16px 0 0; }
.cover-fallback { font-size: 2rem; }
.course-title h3 { font-size: 1rem; }
.course-summary { min-height: 34px; font-size: .9rem; }
.course-meta { gap: 7px; font-size: .8rem; }
.progress-track { height: 8px; }
.table-wrap { border-radius: 14px; }
th, td { padding: 11px 10px; font-size: .9rem; }
th { font-size: .7rem; }

/* Builder and forms */
.editor-layout, .quiz-builder-layout { gap: 16px; }
.builder-item { border-radius: 16px; padding: 16px; }
.professional-form { gap: 14px; }
.sticky-form { top: 76px; }

/* Quiz display */
.professional-quiz { max-width: 1040px; }
.quiz-hero { border-radius: 22px; padding: 22px; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; margin-bottom: 18px; }
.quiz-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.75rem); }
.quiz-score-card { border-radius: 18px; padding: 16px; }
.quiz-score-card strong { font-size: 1.8rem; }
.quiz-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 16px; }
.quiz-sidebar { top: 76px; }
.quiz-dots { gap: 6px; }
.quiz-dot { min-height: 32px; border-radius: 10px; font-size: .82rem; }
.quiz-form { gap: 14px; }
.quiz-question { border-radius: 18px; }
.quiz-question legend { padding: 18px 18px 12px; gap: 7px; }
.question-number { font-size: .68rem; padding: 5px 8px; }
.quiz-question legend strong { font-size: .98rem; line-height: 1.4; }
.quiz-options { padding: 0 18px 18px; gap: 8px; }
.professional-option { padding: 11px 12px; border-radius: 12px; gap: 10px; }
.option-letter { width: 28px; height: 28px; border-radius: 9px; font-size: .82rem; }
.option-text { font-weight: 650; font-size: .92rem; }
.quiz-submit-card { border-radius: 18px; }
.result-card h2 { font-size: clamp(1.9rem, 4vw, 3rem); }

/* Mobile rules */
@media (max-width: 980px) {
  .home-hero { padding: 34px 0 30px; }
  .home-hero-grid, .home-features-wrap { grid-template-columns: 1fr; }
  .home-preview { min-height: 320px; }
  .home-role-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-hero.pro-hero, .course-hero-panel, .dashboard-hero { grid-template-columns: 1fr; }
  .module-layout, .learning-layout, .editor-layout, .quiz-builder-layout, .dashboard-grid { grid-template-columns: 1fr; }
  .sticky-form, .module-sidebar, .side-panel, .quiz-sidebar { position: static; }
}

@media (max-width: 760px) {
  html { font-size: 14px; }
  .container { width: min(100% - 22px, 1140px); }
  .page { padding: 18px 0 30px; }
  h1 { font-size: clamp(1.75rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.2rem, 5.5vw, 1.85rem); }
  .lead { font-size: .94rem; }
  .nav-inner { min-height: 58px; }
  .nav-links { inset: 66px 11px auto 11px; }

  .home-copy h1 { font-size: clamp(2rem, 10.5vw, 3.1rem); line-height: 1.03; }
  .home-copy { gap: 13px; }
  .home-trust-row { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .home-trust-row span { justify-content: flex-start; }
  .home-preview { min-height: 0; display: block; }
  .preview-card { width: 100%; border-radius: 18px; }
  .preview-chart { height: 118px; }
  .floating-card { position: static; width: 100%; margin-top: 10px; box-shadow: var(--shadow-soft); }
  .home-section { padding: 22px 0; }
  .home-role-grid { grid-template-columns: 1fr; }
  .home-role-card, .feature-tile { min-height: auto; padding: 16px; border-radius: 18px; }
  .role-actions { align-items: stretch; }
  .role-actions .btn, .home-actions .btn { width: auto; flex: 1 1 135px; }
  .home-cta-panel { padding: 18px; border-radius: 18px; }

  .card, .card-lg, .dashboard-hero.pro-hero, .course-hero-panel, .premium-hero, .pro-hero { padding: 16px; border-radius: 18px; }
  .dashboard-hero.pro-hero h1, .dashboard-page h1, .course-hero-panel h1 { font-size: clamp(1.55rem, 7vw, 2.35rem); }
  .dashboard-strip, .grid-3.responsive-card-grid, .form-grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .dashboard-strip .stat-card, .stat-card { min-height: 82px; }
  .course-card { min-height: auto; }
  .course-cover { height: 82px; }
  .course-footer, .course-title, .analytics-top, .preview-topbar { align-items: flex-start; }
  .search-box { width: 100%; }
  .module-detail-card { min-height: auto; }
  .module-content { font-size: .92rem; line-height: 1.6; }

  .quiz-hero, .quiz-layout { grid-template-columns: 1fr; }
  .quiz-hero { padding: 16px; border-radius: 18px; }
  .quiz-score-card { padding: 13px; }
  .quiz-dots { grid-template-columns: repeat(6, minmax(30px, 1fr)); }
  .quiz-question legend, .quiz-options { padding-left: 14px; padding-right: 14px; }
  .quiz-submit-card { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .container { width: min(100% - 18px, 1140px); }
  .btn { width: auto; min-height: 38px; padding: 8px 11px; }
  .actions .btn, .dashboard-hero-actions .btn, .course-footer .btn { flex: 1 1 120px; }
  .home-actions .btn, .role-actions .btn { flex-basis: 100%; width: 100%; }
  .home-copy h1 { font-size: clamp(1.85rem, 11vw, 2.75rem); letter-spacing: -.045em; }
  .home-copy .lead { font-size: .92rem; }
  .main-preview-card { padding: 14px; }
  .preview-chart { height: 96px; gap: 6px; }
  .preview-list div { padding: 8px 10px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .status-pill, .badge { white-space: normal; line-height: 1.2; }
  .module-item { grid-template-columns: 26px minmax(0, 1fr); }
  .professional-option { align-items: flex-start; padding: 10px; }
  .professional-option input { width: 16px; height: 16px; }
  .option-letter { width: 26px; height: 26px; }
  .quiz-dots { grid-template-columns: repeat(5, minmax(28px, 1fr)); }
  th, td { padding: 9px 8px; }
}