/* Design preview 4 — refined Peak learning workspace.
   This file is inert unless app-peak.js marks the /design4 route. */
:root[data-peak-preview="design4"] {
  --ink: #0a0a0a;
  --muted: #1c1c1c;
  --placeholder: #8995a7;
  --line: #d7dee8;
  --line-strong: #bec9d8;
  --canvas: #f3f6fa;
  --surface: #ffffff;
  --surface-raised: #fbfcfe;
  --surface-muted: #eef3f8;
  --surface-inset: #f7f9fc;
  --popover-surface: #ffffff;
  --input: #f8fafc;
  --blue: #287df0;
  --blue-deep: #1467d3;
  --mint: #35b77c;
  --danger: #c94055;
  --accent-soft: #e8f1ff;
  --accent-soft-hover: #dceaff;
  --danger-soft: #fcebed;
  --success-soft: #e4f5ed;
  --side: #17253a;
  --side-soft: #293c5a;
  --side-ink: #f4f7fc;
  --side-muted: #b7c4d8;
  --focus-ring: #6ca7fa;
  --overlay: #172238a6;
  --card-shadow: 0 .8rem 2rem #1722380d;
  --popover-shadow: 0 .9rem 2.25rem #1722381c;
  --ui-motion: 180ms;
  --ui-ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light;
}

:root[data-peak-preview="design4"][data-theme="dark"] {
  --ink: #f2f1ed;
  --muted: #aaa9a3;
  --placeholder: #85857f;
  --line: #343538;
  --line-strong: #48494d;
  --canvas: #17181a;
  --surface: #222326;
  --surface-raised: #17181a;
  --surface-muted: #2b2c2f;
  --surface-inset: #17181a;
  --popover-surface: #222326;
  --input: #17181a;
  --blue: #287df0;
  --blue-deep: #1467d3;
  --mint: #35b77c;
  --danger: #c94055;
  --accent-soft: #287df017;
  --accent-soft-hover: #287df02b;
  --danger-soft: #4a252b;
  --success-soft: #183c2e;
  --side: #101113;
  --side-soft: #292a2d;
  --side-ink: #ffffff;
  --side-muted: #aaa9a3;
  --focus-ring: #83b6ff;
  --overlay: #17181abf;
  --card-shadow: 0 .8rem 2rem #00000020;
  --popover-shadow: 0 .75rem 2rem #00000018;
  color-scheme: dark;
}

:root[data-peak-preview="design4"] body { overflow-x: clip; }
:root[data-peak-preview="design4"] .app-area { min-width: 0; }

/* Keep the entry point on the same plain surface as the application. */
:root[data-peak-preview="design4"] .peak-login {
  background: var(--canvas);
}
:root[data-peak-preview="design4"] .login-card {
  border-radius: .95rem;
  box-shadow: 0 1.5rem 4rem rgb(8 26 52 / 17%);
}
:root[data-peak-preview="design4"] .login-card h1 { text-wrap: balance; }

/* A quiet, high-information shell: course work stays central, navigation recedes. */
:root[data-peak-preview="design4"] .shell { grid-template-columns: 18.25rem minmax(0, 1fr); }
:root[data-peak-preview="design4"] .shell.sidebar-collapsed { grid-template-columns: 3.75rem minmax(0, 1fr); }
:root[data-peak-preview="design4"] .sidebar {
  padding: 1.05rem .8rem .9rem;
  border-right: 1px solid rgb(255 255 255 / 7%);
  box-shadow: inset -1px 0 rgb(0 0 0 / 14%);
}
:root[data-peak-preview="design4"] .sidebar-header { padding-bottom: 1.8rem; }
:root[data-peak-preview="design4"] .sidebar .brand-lockup { padding: .65rem .72rem; }
:root[data-peak-preview="design4"] .brand-orbit {
  width: 2.3rem;
  height: 2.3rem;
  background: var(--blue);
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 16%), 0 .35rem .8rem rgb(0 0 0 / 18%);
}
:root[data-peak-preview="design4"] .nav { gap: .22rem; }
:root[data-peak-preview="design4"] .nav-section-title {
  margin: 1.05rem .72rem .25rem;
  color: color-mix(in srgb, var(--side-muted) 78%, transparent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
:root[data-peak-preview="design4"] .nav button,
:root[data-peak-preview="design4"] .nav-support { min-height: 2.78rem; border-radius: .62rem; padding: .7rem .72rem; }
:root[data-peak-preview="design4"] .nav button { border: 1px solid transparent; }
:root[data-peak-preview="design4"] .nav button[aria-current="page"] {
  border-color: color-mix(in srgb, var(--blue) 28%, transparent);
  background: color-mix(in srgb, var(--blue) 20%, transparent);
}
:root[data-peak-preview="design4"] .nav button:hover,
:root[data-peak-preview="design4"] .nav-support:hover { background: rgb(255 255 255 / 8%); }
:root[data-peak-preview="design4"] .nav .nav-mark { color: #8eaef3; }
:root[data-peak-preview="design4"] .sidebar-bottom { gap: .5rem; border-top: 1px solid rgb(255 255 255 / 9%); padding-top: .85rem; }

:root[data-peak-preview="design4"] .topbar {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 4.4rem;
  border-bottom-color: color-mix(in srgb, var(--line) 76%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  backdrop-filter: blur(14px);
}
:root[data-peak-preview="design4"] .topbar .crumb {
  position: absolute;
  left: 48.5%;
  transform: translateX(-50%);
  white-space: nowrap;
}
:root[data-peak-preview="design4"] .topbar .mobile-menu { opacity: .5; }
:root[data-peak-preview="design4"] .topbar .mobile-menu:hover,
:root[data-peak-preview="design4"] .topbar .mobile-menu:focus-visible { opacity: 1; }
:root[data-peak-preview="design4"] .support-fab {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-muted);
  box-shadow: 0 .25rem .7rem rgb(15 39 70 / 10%);
}
@media (hover: hover) and (pointer: fine) {
  :root[data-peak-preview="design4"] .support-fab:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--surface-muted) 86%, var(--ink));
    box-shadow: 0 .45rem 1.1rem rgb(15 39 70 / 12%);
    transform: translateY(-.1rem);
  }
}
:root[data-peak-preview="design4"] .profile-theme-settings {
  display: grid;
  gap: .55rem;
  grid-column: 2;
  margin-top: .4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
}
:root[data-peak-preview="design4"] .profile-theme-settings h2 { margin: 0; font-size: 1rem; }
:root[data-peak-preview="design4"] .profile-theme-settings .profile-theme-toggle {
  justify-content: space-between;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding-inline: .15rem;
}
:root[data-peak-preview="design4"] .profile-theme-settings .notification-channel-label {
  display: inline;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 750;
}
:root[data-peak-preview="design4"] .page { width: min(77rem, 100%); padding-top: clamp(2rem, 4.8vw, 4.6rem); }
:root[data-peak-preview="design4"] .page h1 {
  max-width: 19ch;
  font-size: clamp(2.15rem, 4.8vw, 3.7rem);
  font-weight: 780;
  letter-spacing: -.065em;
  line-height: 1.01;
  text-wrap: balance;
}
:root[data-peak-preview="design4"] .page-lede { max-width: 62ch; margin-top: 1.1rem; font-size: 1.03rem; line-height: 1.65; }
:root[data-peak-preview="design4"] .eyebrow, :root[data-peak-preview="design4"] .module-count {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Keep the established catalogue layout: equal, responsive course cards. */
:root[data-peak-preview="design4"] .course-grid { width: clamp(80%, calc(63.3% + 183.5px), 100%); margin-inline: auto; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
:root[data-peak-preview="design4"] .course-card {
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-color: var(--line);
  border-radius: 1.25rem;
  padding: 1rem 1.3rem .65rem;
  background: linear-gradient(145deg, #10243e, #294b82);
  box-shadow: none;
}
:root[data-peak-preview="design4"] .course-card:not(.locked) { padding-top: .45rem; }
:root[data-peak-preview="design4"] .course-card.has-cover {
  background-position: center;
  background-size: contain;
}
:root[data-peak-preview="design4"] .course-card::before { background: radial-gradient(circle at 80% 20%, #7eafff77, transparent 17rem), linear-gradient(120deg, transparent 45%, #0a1428a8); }
:root[data-peak-preview="design4"] .course-card.has-cover::before { background: linear-gradient(120deg, transparent 35%, #000000a8); }
:root[data-peak-preview="design4"] .course-card.locked.has-cover::before { background: rgb(0 0 0 / 40%); }
:root[data-peak-preview="design4"] .course-card h2 { max-width: none; margin: .3rem 0; font-size: 1.45rem; line-height: 1.12; text-wrap: wrap; }
:root[data-peak-preview="design4"] .course-card p { max-width: none; line-height: 1.3; }
:root[data-peak-preview="design4"] .course-card .card-action { margin-top: .65rem; }
:root[data-peak-preview="design4"] .course-meta { font-size: .8rem; font-weight: inherit; letter-spacing: normal; }
:root[data-peak-preview="design4"] .course-progress { display: grid; width: 100%; min-width: 0; flex: 0 0 auto; gap: .25rem; margin-bottom: auto; }
:root[data-peak-preview="design4"] .course-progress-label { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; margin: 0; overflow: hidden; color: rgb(255 255 255 / 88%); font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 800; line-height: 1.2; white-space: nowrap; }
:root[data-peak-preview="design4"] .course-progress-label strong { color: inherit; font: inherit; }
:root[data-peak-preview="design4"] .course-progress-label strong { justify-self: end; }
:root[data-peak-preview="design4"] .progress-track { width: 100%; height: .32rem; margin: 0; background: #ffffff42; }
:root[data-peak-preview="design4"] .progress-track i { background: #81e3bd; }
:root[data-peak-preview="design4"] .course-card.locked { border-color: var(--line); box-shadow: none; }

:root[data-peak-preview="design4"] .module-grid { gap: .85rem; }
:root[data-peak-preview="design4"] .module-card {
  min-height: 13.25rem;
  border-radius: .9rem;
  padding: 1.25rem;
  box-shadow: 0 1px 0 rgb(15 39 70 / 3%);
}
:root[data-peak-preview="design4"] .module-card.complete { border-color: color-mix(in srgb, var(--mint) 45%, var(--line)); }
:root[data-peak-preview="design4"] .module-card h2 { max-width: 18ch; font-size: 1.42rem; line-height: 1.1; text-wrap: balance; }
:root[data-peak-preview="design4"] .module-card p { margin-bottom: 0; }
:root[data-peak-preview="design4"] .lesson-list { gap: .48rem; }
:root[data-peak-preview="design4"] .lesson-row {
  min-height: 4.15rem;
  border-radius: .72rem;
  padding: .9rem 1rem;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
:root[data-peak-preview="design4"] .lesson-row:hover { border-color: color-mix(in srgb, var(--blue) 48%, var(--line)); background: var(--surface-raised); box-shadow: 0 .4rem .9rem rgb(15 43 80 / 6%); transform: translateY(-1px); }
:root[data-peak-preview="design4"] .lesson-check { width: 1.55rem; height: 1.55rem; border-width: 1.5px; }

/* A reading-first lesson view, with a distinct action and discussion hierarchy. */
:root[data-peak-preview="design4"] .lesson-content { font-size: 1.035rem; line-height: 1.72; }
:root[data-peak-preview="design4"] .lesson-content h1, :root[data-peak-preview="design4"] .lesson-content h2 { text-wrap: balance; }
:root[data-peak-preview="design4"] .lesson-content blockquote { border-left-width: 2px; padding-left: 1.15rem; }
:root[data-peak-preview="design4"] .video, :root[data-peak-preview="design4"] .yandex-video { border-radius: .9rem; box-shadow: 0 .8rem 2.2rem rgb(0 0 0 / 20%); }
:root[data-peak-preview="design4"] .lesson-complete { margin-block: 1.8rem 2.5rem; border: 1px solid var(--line); border-radius: .75rem; padding: .85rem 1rem; background: var(--surface-muted); }
:root[data-peak-preview="design4"] .assignment { margin-block: 2.4rem; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-peak-preview="design4"] .assignment h2, :root[data-peak-preview="design4"] .discussion h2 { text-wrap: balance; }
:root[data-peak-preview="design4"] .discussion { margin-top: 2.8rem; }
:root[data-peak-preview="design4"] .comment-form { border-radius: .85rem; padding: 1.1rem; box-shadow: 0 1px 0 rgb(15 39 70 / 3%); }
:root[data-peak-preview="design4"] .comment { padding: 1.15rem 0; }
:root[data-peak-preview="design4"] .comment.reply { margin-left: clamp(1rem, 4vw, 2.5rem); padding-left: .9rem; border-left: 2px solid var(--line); }
:root[data-peak-preview="design4"] .comment-avatar { width: 2.25rem; height: 2.25rem; }
:root[data-peak-preview="design4"] .comment-like { border: 1px solid transparent; }
:root[data-peak-preview="design4"] .comment-like:hover { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }

/* Forms and operations use a measured surface hierarchy, not a generic card stack. */
:root[data-peak-preview="design4"] textarea,
:root[data-peak-preview="design4"] input,
:root[data-peak-preview="design4"] select { min-height: 2.8rem; border-radius: .62rem; }
:root[data-peak-preview="design4"] textarea { min-height: 6rem; }
:root[data-peak-preview="design4"] .profile-editor,
:root[data-peak-preview="design4"] .notification-preferences,
:root[data-peak-preview="design4"] .admin-profile-learning,
:root[data-peak-preview="design4"] .admin-profile-contact,
:root[data-peak-preview="design4"] .assignment-form,
:root[data-peak-preview="design4"] .form-builder { border-radius: .9rem; box-shadow: var(--card-shadow); }
:root[data-peak-preview="design4"] .assignment-form,
:root[data-peak-preview="design4"] .page[data-screen="form"] .response-form { border-radius: 0; box-shadow: none; }
:root[data-peak-preview="design4"] .profile-fields { border: 1px solid var(--line); border-radius: .75rem; padding: 1rem; }
:root[data-peak-preview="design4"] .profile-input,
:root[data-peak-preview="design4"] .profile-textarea { border: 1px solid var(--line); border-radius: .58rem; }
:root[data-peak-preview="design4"] .profile-stat { border: 1px solid var(--line); border-radius: .7rem; }
:root[data-peak-preview="design4"] .notification-settings-matrix { border-radius: .8rem; }
:root[data-peak-preview="design4"] .notification-setting { min-height: 4.6rem; }
:root[data-peak-preview="design4"] .notification-setting:hover { background: color-mix(in srgb, var(--blue) 4%, var(--surface)); }
:root[data-peak-preview="design4"] .course-admin-card,
:root[data-peak-preview="design4"] .module-admin-card,
:root[data-peak-preview="design4"] .admin-learning-course,
:root[data-peak-preview="design4"] .admin-learning-module,
:root[data-peak-preview="design4"] .submission-review { border-radius: .8rem; }
:root[data-peak-preview="design4"] .module-admin-card,
:root[data-peak-preview="design4"] .admin-learning-module { border-left: 3px solid color-mix(in srgb, var(--blue) 45%, var(--line)); }
:root[data-peak-preview="design4"] .management-toolbar { padding-bottom: 1rem; }
:root[data-peak-preview="design4"] .review-section { border: 1px solid var(--line); border-radius: .8rem; padding: .25rem; background: var(--surface); }
:root[data-peak-preview="design4"] .review-section-heading { min-height: 3.8rem; border-radius: .58rem; background: var(--surface-muted); }
:root[data-peak-preview="design4"] .review-section-body { padding: .45rem .55rem .6rem; }
:root[data-peak-preview="design4"] .empty { border-radius: .8rem; border-style: solid; background: var(--surface-muted); }
:root[data-peak-preview="design4"] .page-skeleton { width: min(52rem, 100%); }
:root[data-peak-preview="design4"] .skeleton-card { border-radius: .85rem; background: var(--surface); }

/* Controls share clear priority and deliberate feedback. */
:root[data-peak-preview="design4"] .primary,
:root[data-peak-preview="design4"] .secondary,
:root[data-peak-preview="design4"] .ghost,
:root[data-peak-preview="design4"] .danger-button { min-height: 2.7rem; border-radius: .62rem; }
:root[data-peak-preview="design4"] .primary { box-shadow: 0 .38rem .9rem color-mix(in srgb, var(--blue) 26%, transparent); }
:root[data-peak-preview="design4"] .primary:hover { box-shadow: 0 .55rem 1.15rem color-mix(in srgb, var(--blue) 31%, transparent); transform: translateY(-1px); }
:root[data-peak-preview="design4"] .primary:active,
:root[data-peak-preview="design4"] .secondary:active,
:root[data-peak-preview="design4"] .ghost:active,
:root[data-peak-preview="design4"] .danger-button:active { transform: translateY(0) scale(.97); }
:root[data-peak-preview="design4"] .secondary { border: 1px solid transparent; }
:root[data-peak-preview="design4"] .ghost:hover { background: var(--surface-muted); }
:root[data-peak-preview="design4"] .theme-switch,
:root[data-peak-preview="design4"] .comment-sort-button { border-radius: .62rem; }
:root[data-peak-preview="design4"] .action-menu,
:root[data-peak-preview="design4"] .comment-sort-menu { border-radius: .72rem; padding: .38rem; }
:root[data-peak-preview="design4"] .action-menu button,
:root[data-peak-preview="design4"] .comment-sort-option { border-radius: .46rem; }
:root[data-peak-preview="design4"] .modal-backdrop { padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); }
:root[data-peak-preview="design4"] .modal { border: 1px solid color-mix(in srgb, var(--line) 90%, transparent); border-radius: .95rem; box-shadow: 0 1.8rem 4.5rem rgb(0 0 0 / 34%); }
:root[data-peak-preview="design4"] .toast { border-radius: .72rem; box-shadow: var(--popover-shadow); }

@media (hover: hover) and (pointer: fine) {
  :root[data-peak-preview="design4"] .course-card:hover { transform: translateY(-.25rem); box-shadow: 0 1.2rem 2rem #12264b2b; }
  :root[data-peak-preview="design4"] .module-card:hover { border-color: color-mix(in srgb, var(--blue) 36%, var(--line)); box-shadow: 0 .6rem 1.5rem rgb(15 43 80 / 8%); transform: translateY(-.12rem); }
}

/* Screen-specific product patterns. Each view uses its own information model. */
:root[data-peak-preview="design4"] .page-heading {
  display: grid;
  max-width: 64rem;
  gap: .5rem;
  margin-bottom: 2.1rem;
}
:root[data-peak-preview="design4"] .page-heading .eyebrow,
:root[data-peak-preview="design4"] .page-heading h1,
:root[data-peak-preview="design4"] .page-heading .page-lede { margin: 0; }

/* The heading stays stacked; the catalogue uses the established equal-card grid. */
:root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading {
  display: block;
  max-width: none;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid var(--line);
}
:root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading h1 { margin: 0; }
:root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading .page-lede { margin: 1.1rem 0 0; }

/* Course/module: from programme overview to an ordered learning checklist. */
:root[data-peak-preview="design4"] .page[data-screen="course"] .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="module"] .page-heading { max-width: 48rem; }
/* Numbered module titles need their visible gap after the period. */
:root[data-peak-preview="design4"] .page[data-screen="module"] .page-heading h1 {
  letter-spacing: normal;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card { min-height: 12rem; display: grid; align-content: start; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card p { align-self: end; }
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-list {
  width: min(48rem, 100%);
  gap: 0;
  border-top: 1px solid var(--line);
  counter-reset: lesson;
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row {
  position: relative;
  min-height: 4.65rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .85rem .2rem .85rem 1.1rem;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row::before {
  position: absolute;
  left: .05rem;
  color: var(--muted);
  content: counter(lesson, decimal-leading-zero);
  counter-increment: lesson;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .07em;
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row .lesson-check { position: absolute; left: 1.55rem; }
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row:hover { padding-left: 3.55rem; background: color-mix(in srgb, var(--blue) 4%, transparent); box-shadow: none; transform: none; }

/* Lesson: focused reading with a clearly separated practice and community area. */
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-title-divider { margin-top: 1.55rem; }
:root[data-peak-preview="design4"] .lesson-secondary { display: grid; gap: 2.4rem; margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
:root[data-peak-preview="design4"] .lesson-secondary-slot { min-width: 0; }
:root[data-peak-preview="design4"] .lesson-secondary .assignment { margin: 0; }
:root[data-peak-preview="design4"] .lesson-secondary .discussion { width: 100%; margin: 0; }
:root[data-peak-preview="design4"] .lesson-secondary .discussion > h2::before,
:root[data-peak-preview="design4"] .lesson-secondary .assignment > h2::before {
  display: block;
  margin-bottom: .45rem;
  color: var(--blue);
  content: "Практика и сообщество";
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
:root[data-peak-preview="design4"] .lesson-secondary .discussion > h2::before { content: "Обсуждение урока"; }

/* Page kickers and editorial labels add no navigation value in the focused learning flow. */
:root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading .eyebrow,
:root[data-peak-preview="design4"] .page[data-screen="course"] .page-heading .eyebrow,
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-intro .eyebrow,
:root[data-peak-preview="design4"] .lesson-secondary .discussion > h2::before,
:root[data-peak-preview="design4"] .lesson-secondary .assignment > h2::before { display: none; }

/* Keep the original Peak reachability rhythm above every page title. */
:root[data-peak-preview="design4"] .page { padding-top: clamp(1.5rem, 5vw, 4rem); }

/* Feed and settings: notifications scan as a timeline; preferences stay matrix-like. */
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list { width: min(44rem, 100%); display: grid; gap: 1rem; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list > .secondary { justify-self: start; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface); }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows .lesson-row {
  min-height: 5.2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 1rem 1.05rem;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows .lesson-row:last-of-type { border-bottom: 0; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows .lesson-row:hover { background: var(--surface-muted); box-shadow: none; transform: none; }
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-preferences { width: min(50rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-actions { position: sticky; bottom: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: .72rem; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }

/* Profiles centre identity first; content is grouped into compact, legible panels. */
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-intro { margin-bottom: 1.75rem; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor { width: min(52rem, 100%); grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); align-items: start; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor-hero { grid-column: 1; position: sticky; top: 6.1rem; grid-template-columns: 1fr; justify-items: center; text-align: center; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-identity-preview { justify-items: center; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-fields,
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions { grid-column: 2; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions {
  justify-content: center;
  border: 0;
  padding: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card { width: min(52rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses { padding-top: .3rem; }

/* Forms and assignments use a task-flow instead of a generic settings card. */
:root[data-peak-preview="design4"] .page[data-screen="form"] .assignment-form,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .assignment-form-builder,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .standalone-form-builder,
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor,
:root[data-peak-preview="design4"] .page[data-screen="course-builder"] .course-builder { width: min(52rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="form"] .assignment-question { padding-top: 0; }
:root[data-peak-preview="design4"] .page[data-screen="form"] .assignment-question legend { font-size: 1.02rem; }
:root[data-peak-preview="design4"] .page[data-screen="forms"] .lesson-list,
:root[data-peak-preview="design4"] .page[data-screen="form-manager"] .standalone-form-list,
:root[data-peak-preview="design4"] .page[data-screen="form-submissions"] .reports-list { width: min(52rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="forms"] .lesson-row,
:root[data-peak-preview="design4"] .page[data-screen="form-manager"] .lesson-row { min-height: 4.4rem; }
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .form-builder-section,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .form-builder-section { border-radius: .85rem; }
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor textarea { min-height: 23rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; line-height: 1.65; }
:root[data-peak-preview="design4"] .page[data-screen="course-builder"] .course-cover-preview { min-height: 14rem; border-radius: .85rem; }

/* Admin: course → module → lesson becomes an operations tree, not a card pile. */
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-list { width: min(76rem, 100%); gap: .85rem; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-card { border-radius: .9rem; padding: 1.1rem; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-summary { min-height: 3.25rem; align-content: center; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-tree { gap: .55rem; padding: .9rem 0 0 1.15rem; border-top: 1px solid var(--line); border-left: 2px solid var(--surface-muted); }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-card { border-left-color: var(--blue); border-radius: .72rem; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .62rem; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree .admin-lesson { min-height: 3.6rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree .admin-lesson:last-child { border-bottom: 0; }

/* Review and moderation: grouped queues with readable, action-oriented rows. */
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .reports-list,
:root[data-peak-preview="design4"] .page[data-screen="reports"] .reports-list { width: min(66rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review { grid-template-columns: minmax(0, 1fr) auto; gap: .8rem 1.2rem; padding: 1.15rem; }
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > .submission-author,
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > .form-actions { grid-column: 2; }
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > textarea,
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > .assignment-answer-blocks,
:root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > .submission-review-origin { grid-column: 1 / -1; }
:root[data-peak-preview="design4"] .page[data-screen="reports"] .report-card { grid-template-columns: minmax(0, 1fr) auto; padding: 1.15rem; }
:root[data-peak-preview="design4"] .page[data-screen="reports"] .report-target,
:root[data-peak-preview="design4"] .page[data-screen="reports"] .report-card > .form-actions { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  :root[data-peak-preview="design4"] .shell { grid-template-columns: 16rem minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .topbar { backdrop-filter: none; }
  :root[data-peak-preview="design4"] .page { padding-top: clamp(1.5rem, 5vw, 4rem); }
  :root[data-peak-preview="design4"] .page h1 { max-width: 100%; font-size: clamp(2rem, 10vw, 2.75rem); }
  :root[data-peak-preview="design4"] .course-grid,
  :root[data-peak-preview="design4"] .module-grid { grid-template-columns: 1fr; }
  :root[data-peak-preview="design4"] .course-card { min-height: 15rem; aspect-ratio: auto; }
  :root[data-peak-preview="design4"] .module-card { min-height: 11.5rem; }
  :root[data-peak-preview="design4"] .comment.reply { margin-left: .65rem; padding-left: .65rem; }
  :root[data-peak-preview="design4"] .notification-settings-header,
  :root[data-peak-preview="design4"] .notification-setting { grid-template-columns: minmax(0, 1fr) 4.4rem 4.4rem; }
  :root[data-peak-preview="design4"] .notification-settings-header { padding-inline: .65rem; }
  :root[data-peak-preview="design4"] .notification-setting { padding-inline: .65rem; }
}

/* Keep the visually hidden upload picker out of the preview form scale. */
:root[data-peak-preview="design4"] input.attachment-picker-input { min-height: 1px; max-height: 1px; border: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  :root[data-peak-preview="design4"] *,
  :root[data-peak-preview="design4"] *::before,
  :root[data-peak-preview="design4"] *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .page-heading,
  :root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading { display: grid; grid-template-columns: 1fr; gap: .65rem; margin-bottom: 1.55rem; padding-bottom: 1.25rem; }
  :root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading .eyebrow,
  :root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading h1,
  :root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading .page-lede { grid-column: 1; grid-row: auto; margin: 0; }
  :root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row { min-height: 4.3rem; }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor { grid-template-columns: 1fr; }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor-hero { position: static; grid-column: 1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-identity-preview { justify-items: start; }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-fields,
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions,
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-theme-settings { grid-column: 1; }
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-actions { position: static; padding: 0; border: 0; background: transparent; backdrop-filter: none; }
  :root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review,
  :root[data-peak-preview="design4"] .page[data-screen="reports"] .report-card { grid-template-columns: 1fr; }
  :root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > .submission-author,
  :root[data-peak-preview="design4"] .page[data-screen="reviews"] .submission-review > .form-actions { grid-column: 1; }
  :root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-tree { padding-left: .7rem; }
  :root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor textarea { min-height: 17rem; }
}

/* Social product patterns: identity, conversation, activity and dialogs. */
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] { width: min(72rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile {
  width: min(56rem, 100%);
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card {
  position: relative;
  gap: 1.2rem;
  overflow: hidden;
  padding: 0 clamp(1.15rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.8rem);
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card::before {
  display: block;
  height: clamp(7rem, 18vw, 10.5rem);
  margin-inline: calc(clamp(1.15rem, 4vw, 2rem) * -1);
  background:
    radial-gradient(circle at 78% 12%, rgb(133 184 255 / 53%), transparent 31%),
    linear-gradient(135deg, #193d78, #286fd6 62%, #639aff);
  content: "";
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero {
  z-index: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: clamp(-3.35rem, -6vw, -4.6rem);
  padding: 0 .35rem;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-avatar {
  width: clamp(5.75rem, 12vw, 7rem);
  height: clamp(5.75rem, 12vw, 7rem);
  border: .28rem solid var(--surface);
  box-shadow: 0 .45rem 1.1rem rgb(12 32 65 / 18%);
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-identity { padding-right: .5rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-identity h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-bio {
  grid-column: 1 / -1;
  margin-top: .75rem !important;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stats {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding-top: .2rem;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stat {
  min-height: 4.8rem;
  border-radius: .65rem;
  background: var(--surface-muted);
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor {
  position: relative;
  overflow: hidden;
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 11%, transparent), transparent 38%);
  content: "";
  pointer-events: none;
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor > * { position: relative; }

/* Conversations are a feed: author, context, reply branch and lightweight actions. */
:root[data-peak-preview="design4"] .lesson-secondary .discussion { max-width: none; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-form {
  gap: .65rem;
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: .9rem;
  background: var(--surface-muted);
  box-shadow: none;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form:focus-within {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  background: var(--surface);
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--blue) 10%, transparent);
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form textarea { min-height: 4.8rem; background: transparent; }
:root[data-peak-preview="design4"] .lesson-secondary .comments { gap: .75rem; margin-top: 1.2rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-thread { gap: .55rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment {
  border: 1px solid var(--line);
  border-radius: .82rem;
  padding: .9rem 1rem;
  background: var(--surface);
  box-shadow: 0 1px 0 rgb(15 39 70 / 3%);
}
:root[data-peak-preview="design4"] .lesson-secondary .comment.reply { margin: 0; border-left: 1px solid var(--line); background: var(--surface); }
:root[data-peak-preview="design4"] .lesson-secondary .reply-branch {
  gap: .55rem;
  margin-left: clamp(.75rem, 4vw, 2.4rem);
  border-left-color: color-mix(in srgb, var(--blue) 35%, var(--line));
  padding-left: .8rem;
}
:root[data-peak-preview="design4"] .lesson-secondary .reply-branch .reply-branch { margin-left: 0; padding-left: 0; border-left: 0; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-head { min-height: 2.25rem; gap: .55rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-avatar { width: 2.25rem; height: 2.25rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-body { padding-left: 2.8rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-actions {
  min-height: 1.75rem;
  margin-top: .45rem;
  padding-left: 2.8rem;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-action { color: var(--muted); font-size: .76rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-action:hover { color: var(--blue); }
:root[data-peak-preview="design4"] .lesson-secondary .comment-like { border-radius: .45rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-pinned { margin-left: .15rem; }

/* Event centre: a social activity stream with the action kept out of the feed. */
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .page-heading { margin-bottom: 1.25rem; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list { position: relative; width: min(48rem, 100%); padding-top: .4rem; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list > .secondary {
  position: absolute;
  top: -5.7rem;
  right: 0;
  justify-self: auto;
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows {
  border-radius: .9rem;
  box-shadow: 0 1px 0 rgb(15 39 70 / 4%);
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows .lesson-row {
  position: relative;
  align-items: start;
  padding: 1rem 1.15rem 1rem 1.45rem;
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-rows .lesson-row.notification-unread::before {
  position: absolute;
  top: 1.28rem;
  left: .6rem;
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 68%, transparent);
  content: "";
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-content { gap: .32rem; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-content strong { line-height: 1.35; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-content .muted { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .notification-time { order: -1; color: var(--blue); font-size: .72rem; font-weight: 750; }

/* Dialogs have one clear decision path; small viewports use a familiar bottom sheet. */
:root[data-peak-preview="design4"] .modal-backdrop {
  align-items: center;
  background: color-mix(in srgb, var(--overlay) 84%, transparent);
  backdrop-filter: blur(5px);
}
:root[data-peak-preview="design4"] .modal {
  width: min(31rem, 100%);
  border-radius: 1rem;
  padding: clamp(1.2rem, 4vw, 1.7rem);
}
:root[data-peak-preview="design4"] .modal h2 { max-width: 21ch; font-size: clamp(1.3rem, 3vw, 1.65rem); text-wrap: balance; }
:root[data-peak-preview="design4"] .modal .actions,
:root[data-peak-preview="design4"] .modal .form-actions { justify-content: flex-end; margin-top: 1.45rem; }
:root[data-peak-preview="design4"] .modal .actions > .primary,
:root[data-peak-preview="design4"] .modal .form-actions > .primary { order: 2; }
:root[data-peak-preview="design4"] .support-confirmation-modal .support-confirmation-actions,
:root[data-peak-preview="design4"] .bot-confirmation-modal .support-confirmation-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  justify-content: initial;
}
:root[data-peak-preview="design4"] .support-confirmation-modal .support-confirmation-actions > *,
:root[data-peak-preview="design4"] .bot-confirmation-modal .support-confirmation-actions > * { width: 100%; }
:root[data-peak-preview="design4"] .bot-confirmation-modal > h2 { margin-inline: auto; text-align: center; }
:root[data-peak-preview="design4"] .bot-confirmation-modal > p { text-align: center; }
:root[data-peak-preview="design4"] .bot-confirmation-modal .support-confirmation-actions > .primary { order: 0; }

@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card::before { height: 7.5rem; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero { grid-template-columns: auto minmax(0, 1fr); margin-top: -3.1rem; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-actions { top: .1rem; right: 0; }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-body,
  :root[data-peak-preview="design4"] .lesson-secondary .comment-actions { padding-left: 0; }
  :root[data-peak-preview="design4"] .lesson-secondary .reply-branch { margin-left: .4rem; padding-left: .6rem; }
  :root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list > .secondary { position: static; justify-self: start; margin-bottom: .15rem; }
  :root[data-peak-preview="design4"] .modal-backdrop { align-items: end; padding: 0; }
  :root[data-peak-preview="design4"] .modal {
    width: 100%;
    max-height: min(88dvh, 48rem);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 1.15rem 1.15rem 0 0;
    padding: 1.2rem max(1rem, env(safe-area-inset-right)) max(1.2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }
  :root[data-peak-preview="design4"] .modal::before { display: block; width: 2.4rem; height: .28rem; margin: -.45rem auto 1rem; border-radius: 999px; background: var(--line-strong); content: ""; }
  :root[data-peak-preview="design4"] .modal .actions,
  :root[data-peak-preview="design4"] .modal .form-actions { display: grid; grid-template-columns: 1fr; }
  :root[data-peak-preview="design4"] .modal .actions > *,
  :root[data-peak-preview="design4"] .modal .form-actions > * { width: 100%; }
}

/* Seamless revision: information flows in sections instead of floating cards. */
:root[data-peak-preview="design4"] .page[data-screen="profile"],
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] { width: min(64rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-intro { max-width: 44rem; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor {
  display: grid;
  width: min(44rem, 100%);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor::before { content: none; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor-hero {
  position: static;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding: 0 0 1.35rem;
  text-align: left;
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-identity-preview { justify-items: start; align-content: center; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-avatar-preview { width: 5.5rem; height: 5.5rem; box-shadow: none; }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-fields {
  grid-column: 1 / -1;
  gap: .6rem;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-input,
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-textarea { background: var(--surface); }
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions {
  grid-column: 1 / -1;
  padding: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-theme-settings {
  grid-column: 1 / -1;
  width: 100%;
}

:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile { width: min(44rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card {
  gap: 1.35rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card::before { content: none; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero {
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 1.35rem;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-avatar {
  width: 5.5rem;
  height: 5.5rem;
  border: 0;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-bio {
  margin-top: .35rem !important;
  border: 0;
  padding: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stats { gap: 0; border-bottom: 1px solid var(--line); padding: 0 0 1.15rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stat {
  min-height: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: .25rem 1rem;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stat:first-child { border-left: 0; padding-left: 0; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses { display: grid; gap: .75rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses h2 { margin: 0; font-size: 1rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses .profile-stats { display: grid; grid-template-columns: 1fr; gap: 0; border-bottom: 0; padding: 0; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses .profile-stat { border-top: 1px solid var(--line); border-left: 0; padding: .95rem 0; }

/* Course, lesson and comments inherit the same continuous learning flow. */
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-grid {
  width: min(52rem, 100%);
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card {
  min-height: 0;
  grid-template-columns: minmax(9rem, .75fr) minmax(0, 1.25fr);
  gap: .3rem 2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 1.15rem 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card .module-count { grid-column: 1; grid-row: 1; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card h2 { grid-column: 1; grid-row: 2; margin: 0; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card p { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card:hover { padding-inline: .65rem; background: color-mix(in srgb, var(--blue) 4%, transparent); box-shadow: none; transform: none; }
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row:hover { padding-left: 3.35rem; background: color-mix(in srgb, var(--blue) 4%, transparent); }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .video,
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .yandex-video { border-radius: .55rem; box-shadow: none; }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-complete {
  border-width: 1px 0;
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .lesson-secondary { gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; }
:root[data-peak-preview="design4"] .lesson-secondary .assignment {
  border-width: 1px 0;
  border-radius: 0;
  padding: 1.35rem 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form {
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0 0 1rem;
  background: transparent;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form:focus-within { box-shadow: none; }
:root[data-peak-preview="design4"] .lesson-secondary .comments { gap: 0; border-top: 1px solid var(--line); }
:root[data-peak-preview="design4"] .lesson-secondary .comment-thread { gap: 0; border-bottom: 1px solid var(--line); }
:root[data-peak-preview="design4"] .lesson-secondary .comment {
  border: 0;
  border-radius: 0;
  padding: 1.05rem 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment.reply { border-left: 0; background: transparent; }
:root[data-peak-preview="design4"] .lesson-secondary .reply-branch { margin-left: 1.2rem; border-left: 1px solid var(--line); padding-left: 1rem; }

/* Management is a dense, continuous outline with depth supplied by indentation. */
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-list { gap: 0; border-top: 1px solid var(--line); }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-card {
  gap: .8rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 1.05rem 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-tree { gap: 0; border-left: 1px solid var(--line); padding: .4rem 0 0 1.1rem; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-card {
  gap: .6rem;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: .9rem 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree { border: 0; border-radius: 0; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree .admin-lesson { padding-inline: 0; background: transparent; }

/* Modal remains a centred dialog on every viewport. */
@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor-hero { grid-template-columns: auto minmax(0, 1fr); }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions { grid-column: 1 / -1; justify-content: stretch; }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions .primary { width: 100%; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero { margin: 0; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-actions { top: auto; right: auto; }
  :root[data-peak-preview="design4"] .page[data-screen="course"] .module-card { grid-template-columns: 1fr; gap: .45rem; }
  :root[data-peak-preview="design4"] .page[data-screen="course"] .module-card .module-count,
  :root[data-peak-preview="design4"] .page[data-screen="course"] .module-card h2,
  :root[data-peak-preview="design4"] .page[data-screen="course"] .module-card p { grid-column: 1; grid-row: auto; }
  :root[data-peak-preview="design4"] .page[data-screen="course"] .module-card p { align-self: auto; }
  :root[data-peak-preview="design4"] .lesson-secondary .reply-branch { margin-left: .65rem; padding-left: .75rem; }
  :root[data-peak-preview="design4"] .modal-backdrop { align-items: center; padding: 1rem; }
  :root[data-peak-preview="design4"] .modal {
    width: min(31rem, 100%);
    max-height: calc(100dvh - 2rem);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
    border-radius: 1rem;
    padding: 1.2rem;
  }
  :root[data-peak-preview="design4"] .modal::before { content: none; }
}

/* Keep the learning flow quiet: only real sections get their own surface. */
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-title-divider { display: none; }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-complete {
  border: 0;
  padding-block: .5rem;
}
:root[data-peak-preview="design4"] .lesson-secondary {
  gap: 1.7rem;
  margin-top: 2rem;
  border-top: 0;
  padding-top: 0;
}
:root[data-peak-preview="design4"] .lesson-secondary .assignment {
  border: 1px solid var(--line);
  border-radius: .85rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form { border-bottom: 0; padding-bottom: .7rem; }
:root[data-peak-preview="design4"] .lesson-secondary .comments { gap: 1rem; border-top: 0; }
:root[data-peak-preview="design4"] .lesson-secondary .comment-thread { gap: .65rem; border-bottom: 0; }
:root[data-peak-preview="design4"] .lesson-secondary .reply-branch { border-left: 0; padding-left: .7rem; }

/* Module lessons retain their list pattern, but no longer touch the page edge. */
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-list {
  width: min(50rem, 100%);
  margin-inline: 0;
  padding-inline: .8rem;
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row { padding-right: 1rem; }

/* Management needs stable cards for scanning a dense editing hierarchy. */
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-list { gap: .85rem; border-top: 0; }
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-card {
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: 1.1rem;
  background: var(--surface);
  box-shadow: 0 1px 0 rgb(15 39 70 / 3%);
}
:root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-tree {
  gap: .55rem;
  border-top: 1px solid var(--line);
  border-left: 0;
  padding: .9rem 0 0;
}
:root[data-peak-preview="design4"] .page[data-screen="admin"] .module-admin-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: .72rem;
  padding: .9rem;
  background: var(--surface-muted);
}
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .62rem;
}
:root[data-peak-preview="design4"] .page[data-screen="admin"] .lesson-admin-tree .admin-lesson {
  border-bottom: 1px solid var(--line);
  padding-inline: .8rem;
  background: var(--surface);
}

/* A public profile has space, not a stack of rules. */
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero,
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stats { border-bottom: 0; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stats { gap: .7rem; padding: 0; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stat {
  border: 0;
  border-radius: .65rem;
  padding: .8rem .9rem;
  background: var(--surface-muted);
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stat:first-child { padding-left: .9rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses .profile-stat {
  border-top: 0;
  margin-top: .2rem;
  padding: .9rem;
}

/* Refinement pass: reduce visual weight while keeping circles and progress affordances intact. */
:root[data-peak-preview="design4"] .course-card,
:root[data-peak-preview="design4"] .module-card,
:root[data-peak-preview="design4"] .lesson-row,
:root[data-peak-preview="design4"] .assignment,
:root[data-peak-preview="design4"] .comment-form,
:root[data-peak-preview="design4"] .reply-form,
:root[data-peak-preview="design4"] .profile-editor,
:root[data-peak-preview="design4"] .notification-settings-matrix,
:root[data-peak-preview="design4"] .course-admin-card,
:root[data-peak-preview="design4"] .module-admin-card,
:root[data-peak-preview="design4"] .lesson-admin-tree,
:root[data-peak-preview="design4"] .submission-review,
:root[data-peak-preview="design4"] .report-card,
:root[data-peak-preview="design4"] .modal,
:root[data-peak-preview="design4"] .form-builder-section,
:root[data-peak-preview="design4"] .assignment-form { border-radius: .55rem; }
:root[data-peak-preview="design4"] .primary,
:root[data-peak-preview="design4"] .secondary,
:root[data-peak-preview="design4"] .ghost,
:root[data-peak-preview="design4"] .danger-button,
:root[data-peak-preview="design4"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-peak-preview="design4"] select,
:root[data-peak-preview="design4"] textarea,
:root[data-peak-preview="design4"] .profile-stat,
:root[data-peak-preview="design4"] .notification-toggle { border-radius: .45rem; }

/* Module selection has a readable gutter; the lesson picker itself stays flush. */
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card {
  padding-inline: clamp(.9rem, 2vw, 1.25rem);
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card:hover {
  padding-inline: clamp(.9rem, 2vw, 1.25rem);
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-list { padding-inline: 0; }

/* Replies retain a quiet thread rail without reintroducing card separators. */
:root[data-peak-preview="design4"] .lesson-secondary .reply-branch {
  border-left: 2px solid color-mix(in srgb, var(--blue) 44%, var(--line));
  padding-left: .8rem;
}

/* Notification preferences read as one continuous settings surface. */
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-preferences {
  width: min(48rem, 100%);
  margin-inline: auto;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-preferences {
  gap: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-settings-matrix {
  overflow: visible;
  border-width: 1px 0;
  border-radius: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-settings-header {
  padding-inline: 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-setting {
  padding-inline: 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-setting:hover { background: transparent; }
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-actions {
  position: static;
  margin-top: 1rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

/* A public profile is an identity header followed by compact, scannable learning facts. */
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile { width: min(42rem, 100%); }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card { gap: 1.6rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero {
  align-items: start;
  gap: 1rem;
  padding: .2rem 0 0;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-avatar {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.55rem;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-identity { gap: .25rem; padding-right: .5rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-identity h1 { font-size: clamp(1.35rem, 4vw, 1.7rem); }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-actions { align-self: start; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-stats { grid-template-columns: 1fr; gap: 0; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile > .public-profile-card > .profile-stats .profile-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .75rem;
  padding: .85rem 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses { gap: .65rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses .profile-stats { gap: .5rem; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses .profile-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem 1rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: .55rem;
  padding: .8rem .9rem;
  background: var(--surface);
}
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .profile-courses .progress-track { grid-column: 1 / -1; }
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card > .profile-stats,
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-card > .profile-divider { display: none; }

/* On phones the actual comment composer moves with the visual viewport and keeps its real attachment action. */
@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-settings-header { display: none; }
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-setting { padding-block: .8rem; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-avatar { width: 4rem; height: 4rem; }
  :root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile-identity { padding-right: 0; }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form:focus-within,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form:focus-within {
    position: fixed;
    right: .7rem;
    bottom: calc(.7rem + var(--peak-visual-viewport-inset, 0px));
    left: .7rem;
    z-index: 35;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: .55rem;
    padding: .7rem;
    background: var(--surface);
    box-shadow: 0 .75rem 2rem rgb(15 39 70 / 18%);
  }
  :root[data-peak-preview="design4"] .modal.comment-edit-dialog:focus-within {
    position: fixed;
    right: .7rem;
    bottom: calc(.7rem + var(--peak-visual-viewport-inset, 0px));
    left: .7rem;
    width: auto;
    max-height: min(70dvh, 30rem);
    margin: 0;
    overflow: auto;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form:focus-within textarea,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form:focus-within textarea { min-height: 3.8rem; }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-composer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-attachment-button {
    order: 1;
    width: 3.25rem;
    height: 3.25rem;
    min-height: 3.25rem;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-composer-actions > .primary {
    order: 2;
    width: auto;
    min-width: 9rem;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-attachment-previews {
    display: flex;
    overflow-x: auto;
    gap: .5rem;
    padding-bottom: .15rem;
    scroll-snap-type: x proximity;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-attachment-previews > * { flex: 0 0 5rem; scroll-snap-align: start; }
}

/* A submitted assignment stays a readable sequence of answers, not a pile of nested cards. */
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-answer-blocks { gap: 0; }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-answer-block {
  border-left: 0;
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-answer-block:first-child {
  border-top: 0;
  padding-top: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-answer-block .assignment-answer { margin: .45rem 0 0; }

/* Every action row uses the same 44px control rhythm, including the assignment editor. */
:root[data-peak-preview="design4"] .form-actions > :is(button, a),
:root[data-peak-preview="design4"] .modal .actions > :is(button, a),
:root[data-peak-preview="design4"] .course-admin-actions > :is(button, a),
:root[data-peak-preview="design4"] .course-admin-actions .order-button,
:root[data-peak-preview="design4"] .course-admin-actions .admin-action-menu > .icon-button {
  display: inline-flex;
  min-height: 2.75rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .assignment-form-actions > :is(button, a),
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .standalone-form-actions > :is(button, a) {
  min-width: 11rem;
  flex: 1 1 11rem;
}
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-question-controls,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-question-controls {
  grid-template-columns: minmax(10rem, 13rem) max-content max-content max-content max-content;
  align-items: stretch;
  justify-content: start;
}
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-question-controls > select,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-question-controls > select,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-required-toggle,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-required-toggle,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-question-actions > .icon-button,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-question-actions > .icon-button,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-question-remove,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-question-remove {
  min-height: 2.75rem;
  box-sizing: border-box;
}
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-required-toggle,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-required-toggle {
  justify-content: center;
  padding-inline: .2rem;
  white-space: nowrap;
}
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-question-remove,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-question-remove {
  align-self: stretch;
  border: 1px solid var(--line);
  border-radius: .45rem;
  padding-inline: .7rem;
  background: var(--surface);
}

@media (max-width: 620px) {
  :root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .builder-question-controls,
  :root[data-peak-preview="design4"] .page[data-screen="form-builder"] .builder-question-controls { align-items: center; }
}

/* Design 4 has one gentle corner family; pills, switches and avatars intentionally stay circular. */
:root[data-peak-preview="design4"] { --design4-radius: .65rem; }
:root[data-peak-preview="design4"] .course-card,
:root[data-peak-preview="design4"] .module-card,
:root[data-peak-preview="design4"] .lesson-row,
:root[data-peak-preview="design4"] .assignment,
:root[data-peak-preview="design4"] .comment-form,
:root[data-peak-preview="design4"] .reply-form,
:root[data-peak-preview="design4"] .profile-editor,
:root[data-peak-preview="design4"] .profile-fields,
:root[data-peak-preview="design4"] .public-profile-card,
:root[data-peak-preview="design4"] .profile-stat,
:root[data-peak-preview="design4"] .notification-rows,
:root[data-peak-preview="design4"] .notification-settings-matrix,
:root[data-peak-preview="design4"] .course-admin-card,
:root[data-peak-preview="design4"] .module-admin-card,
:root[data-peak-preview="design4"] .lesson-admin-tree,
:root[data-peak-preview="design4"] .submission-review,
:root[data-peak-preview="design4"] .report-card,
:root[data-peak-preview="design4"] .modal,
:root[data-peak-preview="design4"] .form-builder-section,
:root[data-peak-preview="design4"] .assignment-form,
:root[data-peak-preview="design4"] .attachment-card,
:root[data-peak-preview="design4"] .attachment-preview,
:root[data-peak-preview="design4"] .action-menu,
:root[data-peak-preview="design4"] .comment-sort-menu,
:root[data-peak-preview="design4"] .toast,
:root[data-peak-preview="design4"] .empty,
:root[data-peak-preview="design4"] .video,
:root[data-peak-preview="design4"] .yandex-video,
:root[data-peak-preview="design4"] .course-cover-preview,
:root[data-peak-preview="design4"] .primary,
:root[data-peak-preview="design4"] .secondary,
:root[data-peak-preview="design4"] .ghost,
:root[data-peak-preview="design4"] .danger-button,
:root[data-peak-preview="design4"] .icon-button,
:root[data-peak-preview="design4"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-peak-preview="design4"] select,
:root[data-peak-preview="design4"] textarea { border-radius: var(--design4-radius); }

/* Mobile input follows one calm, TikTok-like dock pattern using the real comment controls. */
@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form .comment-composer-actions > .primary {
    min-width: 9rem;
  }
  /* Keep the lesson composer in the page flow: actions stay centred, not docked beside the field. */
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active {
    position: static;
    z-index: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: .65rem;
    width: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0 0 1rem;
    background: transparent;
    box-shadow: none;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active textarea {
    grid-column: auto;
    grid-row: auto;
    min-height: 4.8rem;
    max-height: none;
    border: 1px solid var(--line);
    padding: .7rem .75rem;
    background: transparent;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-picker {
    display: grid;
    grid-column: auto;
    grid-row: auto;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    align-items: center;
    justify-content: center;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions > .primary {
    grid-column: auto;
    grid-row: auto;
    order: 1;
    width: auto;
    min-width: 6.6rem;
    min-height: 2.5rem;
    border-radius: var(--design4-radius);
    padding: .6rem .9rem;
    font-size: inherit;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions > .primary::before { content: none; }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-button {
    grid-column: auto;
    grid-row: auto;
    order: 2;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    min-height: 2.5rem;
    border-radius: var(--design4-radius);
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form:not(.mobile-input-dock-active) .comment-composer-actions,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form:not(.mobile-input-dock-active) .comment-composer-actions { display: none; }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active {
    position: fixed;
    right: .7rem;
    bottom: calc(.4rem + env(safe-area-inset-bottom) + var(--peak-visual-viewport-inset, 0px));
    left: .7rem;
    z-index: 35;
    width: auto;
    max-height: 15rem;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem 2.5rem;
    align-items: end;
    gap: .4rem;
    border: 1px solid var(--line-strong);
    padding: .4rem;
    background: var(--surface);
    box-shadow: 0 .75rem 2rem rgb(15 39 70 / 18%);
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active textarea,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active textarea {
    grid-column: 1;
    grid-row: 1;
    min-height: 2.35rem;
    max-height: 6.5rem;
    border: 0;
    padding: .55rem .65rem;
    background: transparent;
    box-shadow: none;
    resize: none;
    overflow-y: auto;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-picker,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-attachment-picker,
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-composer-actions { display: contents; }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-button,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-attachment-button {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    width: 2.35rem;
    min-height: 2.35rem;
    border: 0;
    border-radius: 50%;
    padding: 0;
    color: var(--muted);
    background: transparent;
    box-shadow: none;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions > .primary,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-composer-actions > .primary {
    grid-column: 3;
    grid-row: 1;
    order: 0;
    width: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    margin: 0;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    box-shadow: none;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions > .primary::before,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-composer-actions > .primary::before {
    content: "↑";
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-previews,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-attachment-previews {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    overflow-x: auto;
    gap: .45rem;
    padding: .15rem 0 .05rem;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-previews > *,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active .comment-attachment-previews > * { flex: 0 0 4.6rem; }
  :root[data-peak-preview="design4"] .modal.comment-edit-dialog.mobile-input-dock-active {
    position: fixed;
    right: .7rem;
    bottom: calc(.4rem + var(--peak-visual-viewport-inset, 0px));
    left: .7rem;
    z-index: 35;
    width: auto;
    max-height: calc(100vh - var(--peak-visual-viewport-inset, 0px) - 1rem);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    padding: .75rem;
    background: var(--surface);
    box-shadow: 0 .75rem 2rem rgb(15 39 70 / 18%);
  }
  :root[data-peak-preview="design4"] .modal.comment-edit-dialog.mobile-input-dock-active .profile-form { min-height: 0; }
  :root[data-peak-preview="design4"] .modal.comment-edit-dialog.mobile-input-dock-active textarea {
    min-height: 4.25rem;
    max-height: 7rem;
    overflow-y: auto;
  }

  /* Keep the page still while the dock owns the visual viewport. This prevents
     Chrome's address bar from moving the focused field during a conversation. */
  :root[data-peak-preview="design4"].peak-mobile-composer-open {
    overflow: hidden;
    overscroll-behavior-y: contain;
  }

  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-preferences {
    width: min(29rem, 100%);
  }
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-setting {
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    min-height: auto;
    padding: .85rem 0;
  }
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-event-name { margin-bottom: .25rem; }
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-toggle {
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding-inline: .15rem;
  }
  :root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-channel-label {
    display: inline;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 750;
  }
}

/* The assignment already has its own surface; its questions do not need a second one. */
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-secondary .assignment-form {
  gap: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-secondary .assignment-title {
  margin: .5rem 0 0;
  padding-bottom: 2rem;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-secondary .assignment > .assignment-copy {
  margin: 0;
  line-height: 1.4;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-secondary .assignment > .assignment-copy > :is(p, ul, ol) { margin: .1rem 0; }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question legend {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question-condition {
  margin-bottom: var(--question-control-gap);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.2;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question > legend { margin-bottom: var(--question-control-gap); }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question > .assignment-copy {
  margin: 0 0 var(--question-control-gap);
  line-height: 1.4;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question > .assignment-copy > :is(p, ul, ol) { margin: 0; }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question .choice-list { gap: 0; }
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question .choice-option {
  display: grid;
  grid-template-columns: 1.18rem minmax(0, 1fr);
  align-items: start;
  min-height: 2.5rem;
  gap: .55rem;
  padding-block: .25rem;
  line-height: 1.45;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question .choice-option input {
  box-sizing: border-box;
  width: 1.18rem !important;
  height: 1.18rem;
  min-height: 1.18rem;
  margin: .1rem 0 0;
  padding: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-question:not(:first-child) {
  margin-top: 1.25rem;
  border-top: 0;
  padding-top: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .assignment-form > .form-actions--centered { margin-top: .85rem; }

/* Comment media is the content itself, not another card inside the conversation. */
:root[data-peak-preview="design4"] .lesson-secondary .comment .attachment-card {
  gap: .3rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment .attachment-preview { background: transparent; }

/* A lesson editor has one intentional action group; notification controls align to their feed. */
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  justify-content: stretch;
}
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor-actions > * {
  width: 100%;
  min-height: 2.75rem;
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list {
  display: grid;
  gap: .85rem;
  padding-top: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list > .secondary {
  position: static;
  justify-self: stretch;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .notification-actions > .primary { width: 100%; }

/* Module selection uses the same ordered, checked list language as lessons. */
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-grid {
  width: min(50rem, 100%);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  counter-reset: module;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card {
  position: relative;
  min-height: 4.65rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .15rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: .85rem .2rem .85rem 2.1rem;
  background: transparent;
  box-shadow: none;
  text-align: left;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card::before {
  position: absolute;
  top: calc(50% - .45rem);
  left: .05rem;
  color: var(--muted);
  content: counter(module, decimal-leading-zero);
  counter-increment: module;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .07em;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card::after { content: none; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card .lesson-check {
  position: absolute;
  top: calc(50% - .725rem);
  right: .2rem;
  left: auto;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card { padding-right: 3.15rem; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card .lesson-check.done {
  border-color: var(--mint);
  background: var(--mint);
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card .module-count {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 3;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  color: var(--muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card .module-count strong { color: inherit; font: inherit; }
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card h2 {
  grid-column: 1;
  grid-row: 1;
  max-width: none;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.35;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card p {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-progress {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
  height: .38rem;
  margin-top: .15rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-card:hover {
  padding-right: 3.15rem;
  padding-left: 2.1rem;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  box-shadow: none;
  transform: none;
}

/* Keep the learning flow centred while preserving readable left-aligned copy. */
:root[data-peak-preview="design4"] .page[data-screen="course"] .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="module"] .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-grid,
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-list,
:root[data-peak-preview="design4"] .page[data-screen="lesson"] .lesson-layout {
  margin-inline: auto;
}
/* Keep the lesson's loading state in the same reading column as its content. */
:root[data-peak-preview="design4"] .page[data-screen="lesson"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="lesson"] > .page-skeleton {
  width: min(44rem, 100%);
  margin-inline: auto;
}
/* A public profile and its loading/admin details share one identity column. */
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] > .page-skeleton,
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .public-profile,
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .admin-profile-contact,
:root[data-peak-preview="design4"] .page[data-screen="public-profile"] .admin-profile-learning {
  width: min(42rem, 100%);
  margin-inline: auto;
}
/* Admin keeps its broader operations column, including its heading and toolbar. */
:root[data-peak-preview="design4"] .page[data-screen="admin"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="admin"] .management-toolbar,
:root[data-peak-preview="design4"] .page[data-screen="admin"] .course-admin-list {
  width: min(68.75rem, 100%);
  margin-inline: auto;
}
/* Completion lives at the end of a row: scan title first, status second. */
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row {
  padding: .85rem 3.15rem .85rem 1.7rem;
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row .lesson-check {
  top: calc(50% - .775rem);
  right: .2rem;
  left: auto;
}
:root[data-peak-preview="design4"] .page[data-screen="module"] .lesson-row:hover {
  padding-right: 3.15rem;
  padding-left: 1.7rem;
}

@media (max-width: 760px) {
  /* Every learning back action shares one centred, thumb-friendly control. */
  :root[data-peak-preview="design4"] .support-fab {
    bottom: 1.5rem;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  :root[data-peak-preview="design4"] .learning-back-control {
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: 5.15rem;
    bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 3.65rem);
    left: auto;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    min-height: 3.25rem;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 0;
    border-color: var(--line);
    border-radius: 50%;
    padding: 0;
    background: var(--surface-muted);
    box-shadow: 0 .25rem .7rem rgb(15 39 70 / 10%);
    transform: none;
    transition: transform 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out;
  }
  :root[data-peak-preview="design4"] .learning-back-control-arrow {
    position: static;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 900;
    text-shadow: .025rem 0 currentColor, -.025rem 0 currentColor;
    transform: translateY(-.21rem) scaleX(1.18);
  }
  :root[data-peak-preview="design4"] .learning-back-control-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  :root[data-peak-preview="design4"] .learning-back-control:active {
    transform: scale(.98);
  }
  @media (hover: hover) and (pointer: fine) {
    :root[data-peak-preview="design4"] .learning-back-control:hover {
      border-color: var(--line);
      background: color-mix(in srgb, var(--surface-muted) 86%, var(--ink));
    }
  }
  /* The active composer is an edge-to-edge, keyboard-attached input — not a floating card. */
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active {
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + var(--peak-visual-viewport-inset, 0px));
    left: 0;
    max-height: 16.5rem;
    border: 0;
    border-radius: 0;
    padding: .5rem .65rem calc(.65rem + env(safe-area-inset-bottom));
    box-shadow: none;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active textarea,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form.mobile-input-dock-active textarea {
    min-height: 3.2rem;
    max-height: 7.5rem;
  }
}

/* Reply fields stay in the page flow; mobile JavaScript provides enough trailing space to scroll them above the keyboard. */
/* The real attachment and submit controls share one compact, aligned action row. */
:root[data-peak-preview="design4"] .lesson-secondary .comment-composer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form .comment-attachment-picker {
  gap: .5rem;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
:root[data-peak-preview="design4"] .modal.comment-edit-dialog .profile-form {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-attachment-button {
  order: 2;
  grid-column: 3;
  justify-self: start;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 2.5rem;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-composer-actions > .primary {
  order: 1;
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  width: auto;
  min-width: 6.6rem;
}
@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: normal;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-button {
    grid-column: 3;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    aspect-ratio: 1;
    padding: 0;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form .comment-composer-actions > .primary,
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions > .primary {
    grid-column: 2;
    justify-self: center;
    min-width: 9rem;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form:not(.mobile-input-dock-active) .comment-composer-actions,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form:not(.mobile-input-dock-active) .comment-composer-actions {
    display: flex;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form:focus-within,
  :root[data-peak-preview="design4"] .lesson-secondary .reply-form:focus-within {
    position: static;
    z-index: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0 0 1rem;
    background: transparent;
    box-shadow: none;
  }
  :root[data-peak-preview="design4"].peak-mobile-reply-input-open .page[data-screen="lesson"] {
    padding-bottom: max(
      calc(7.5rem + var(--peak-visual-viewport-inset, 0px)),
      calc(6rem + env(safe-area-inset-bottom) + var(--peak-visual-viewport-inset, 0px))
    );
  }
}

@media (max-width: 620px) {
  :root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor-actions { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions { justify-content: center; }
  :root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-actions .primary { width: auto; }
}

/* Keep the compact account and activity views centred in the workspace. */
:root[data-peak-preview="design4"] .page[data-screen="notifications"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="notifications"] .lesson-list,
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-intro,
:root[data-peak-preview="design4"] .page[data-screen="profile"] .profile-editor {
  margin-inline: auto;
}
:root[data-peak-preview="design4"] .page[data-screen="notifications"] > .page-heading {
  width: min(48rem, 100%);
}
:root[data-peak-preview="design4"] .page[data-screen="catalog"] .page-heading {
  width: clamp(80%, calc(63.3% + 183.5px), 100%);
  margin-inline: auto;
}

/* Focused editors share one centred reading column inside the wide workspace. */
:root[data-peak-preview="design4"] .page[data-screen="form"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="form-manager"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="form-submissions"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="course-builder"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="form"] .assignment-form,
:root[data-peak-preview="design4"] .page[data-screen="form-manager"] .standalone-form-list,
:root[data-peak-preview="design4"] .page[data-screen="form-submissions"] .reports-list,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .standalone-form-builder,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .assignment-form-builder,
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .lesson-editor,
:root[data-peak-preview="design4"] .page[data-screen="course-builder"] .course-builder {
  width: min(52rem, 100%);
  margin-inline: auto;
}
:root[data-peak-preview="design4"] .page[data-screen="form"] .form-actions,
:root[data-peak-preview="design4"] .page[data-screen="form-builder"] .form-actions,
:root[data-peak-preview="design4"] .page[data-screen="assignment-builder"] .form-actions,
:root[data-peak-preview="design4"] .page[data-screen="lesson-editor"] .form-actions,
:root[data-peak-preview="design4"] .page[data-screen="course-builder"] .form-actions,
:root[data-peak-preview="design4"] .page[data-screen="notification-settings"] .form-actions {
  justify-content: center;
}

/* A course keeps the same centred column while its outline is loading. */
:root[data-peak-preview="design4"] .page[data-screen="course"] > .page-heading,
:root[data-peak-preview="design4"] .page[data-screen="course"] > .page-skeleton,
:root[data-peak-preview="design4"] .page[data-screen="course"] .module-grid {
  margin-inline: auto;
}

/* Learner work keeps one quiet surface per form or conversation item. */
:root[data-peak-preview="design4"] .page[data-screen="form"] .response-form {
  display: grid;
  gap: 1.1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form:not(.mobile-input-dock-active) {
  border: 1px solid var(--line);
  border-radius: .9rem;
  padding: .9rem;
  background: var(--surface-muted);
  box-shadow: none;
}
:root[data-peak-preview="design4"] .lesson-secondary .comment-form:not(.mobile-input-dock-active) textarea {
  background: var(--canvas);
}
:root[data-peak-preview="design4"] .lesson-secondary .comment {
  border: 1px solid var(--line);
  border-radius: .82rem;
  padding: .9rem 1rem;
  background: var(--surface);
  box-shadow: 0 1px 0 rgb(15 39 70 / 3%);
}

@media (max-width: 760px) {
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form .comment-composer-actions,
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form .comment-composer-actions > .primary,
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-composer-actions > .primary {
    flex: 0 0 9rem;
    width: 9rem;
    min-width: 9rem;
  }
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form .comment-attachment-button,
  :root[data-peak-preview="design4"] .lesson-secondary .comment-form.mobile-input-dock-active .comment-attachment-button {
    position: absolute;
    left: calc(50% + 4.85rem);
    top: 50%;
    transform: translateY(-50%);
  }

}