:root {
  /* Soft Blue + Lavender palette */
  --primary: #5b9bd5;
  --primary-dark: #3a7abf;
  --primary-light: #dbeaf7;
  --accent: #8b6be8;
  --accent-dark: #7055d1;
  --accent-soft: #ede8ff;

  /* Background tones */
  --cream: #f8faff;
  --cream-2: #eef4fb;

  /* Repurposed semantic aliases */
  --pink: #ede8ff;
  --pink-strong: #8b6be8;
  --sage: #dbeaf7;
  --sage-dark: #5b9bd5;
  --blue: #dbeaf7;
  --tan: #d5e3f0;

  /* Text */
  --ink: #1a2b4a;
  --muted: #536280;

  /* Borders */
  --line: #d5e3f0;
  --white: #ffffff;

  /* Shadows - cooled down */
  --shadow: 0 18px 42px rgba(26, 43, 74, 0.10);
  --soft-shadow: 0 10px 24px rgba(26, 43, 74, 0.07);
  --radius: 8px;

  /* Landing page palette (kept) */
  --lavender: #9d85ff;
  --lavender-dark: #7b5fe8;
  --lavender-soft: #ede8ff;
  --mint: #4dd4a8;
  --mint-dark: #2eaf89;
  --mint-soft: #e0f7f1;

  /* Shell chrome metrics (synced by JS when possible) */
  --llh-topbar-height: 64px;
  --llh-editor-sticky-height: 56px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

[data-admin-nav] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(219, 234, 248, 0.50), rgba(237, 232, 255, 0.30) 60%, rgba(255, 255, 255, 0.95)),
    #f8faff;
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 304px 1fr;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand,
.mobile-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #dbeaf7, #ede8ff 48%, #d5e3f0);
  border: 1px solid rgba(91, 155, 213, 0.28);
  box-shadow: var(--soft-shadow);
}

.brand-mark span {
  color: #5b9bd5;
  font-weight: 800;
  letter-spacing: 0;
}

.brand-mark.small {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.brand h1 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.brand p,
.page-title p,
.hero p,
.price-card p,
.admin-note li,
.resource-card p {
  color: var(--muted);
}

.brand p {
  margin: 4px 0 0;
  font-size: 12px;
}

.nav-list {
  display: grid;
  gap: 18px;
  margin: 28px 0 18px;
}

.nav-section {
  display: grid;
  gap: 6px;
}

.nav-section + .nav-section {
  padding-top: 14px;
  border-top: 1px solid rgba(213, 227, 240, 0.86);
}

.nav-section > p {
  margin: 0 0 4px;
  color: #536280;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-link {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-align: left;
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.nav-link:hover {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--soft-shadow);
}

.nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, #8b6be8, #7055d1);
  border-color: rgba(139, 107, 232, 0.6);
  box-shadow: 0 14px 30px rgba(139, 107, 232, 0.22);
}

.nav-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #5b9bd5;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(213, 227, 240, 0.86);
  border-radius: 10px;
}

.nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link.active .nav-icon {
  color: #8b6be8;
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.62);
}

.nav-pill {
  padding: 3px 8px;
  color: #5b9bd5;
  background: rgba(219, 234, 247, 0.62);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.plan-card,
.sidebar-dashboard-card,
.section-block,
.admin-note,
.price-card,
.locked-tool,
.modal-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.plan-card {
  padding: 16px;
}

.sidebar-dashboard-card {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
}

.sidebar-user-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.sidebar-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #5b9bd5;
  background: linear-gradient(135deg, #dbeaf7, #ede8ff 48%, #d5e3f0);
  border: 1px solid rgba(91, 155, 213, 0.28);
  border-radius: 12px;
  font-weight: 900;
}

.sidebar-user-row strong,
.sidebar-user-row span {
  display: block;
}

.sidebar-user-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.sidebar-dashboard-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.sidebar-glance {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.42), rgba(237, 232, 255, 0.28));
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: var(--radius);
}

.sidebar-glance h3 {
  margin: 0 0 2px;
  color: #5b9bd5;
  font-size: 14px;
}

.sidebar-glance div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-glance strong {
  color: #5b9bd5;
  font-size: 14px;
}

.plan-card strong {
  display: block;
  margin: 4px 0;
  font-size: 24px;
  color: #5b9bd5;
}

.plan-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.main {
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 30px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.mobile-brand {
  display: none;
  min-width: 0;
}

.mobile-menu-toggle,
.mobile-nav-backdrop {
  display: none;
}

.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  place-items: center;
  align-content: center;
  gap: 4px;
  box-shadow: var(--soft-shadow);
}

.mobile-menu-toggle span {
  width: 20px;
  height: 2px;
  display: block;
  background: #5b9bd5;
  border-radius: 999px;
}

.resource-viewer-card {
  width: min(860px, 100%);
}

.resource-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.resource-viewer-toolbar .ghost-button,
.resource-viewer-toolbar .primary-button {
  min-height: 44px;
}

.resource-viewer-body {
  max-height: 62vh;
  overflow: auto;
  margin-top: 16px;
  padding: 18px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.resource-viewer-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

.printable-resource-page {
  color: var(--ink);
  background: var(--white);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.print-section {
  margin: 0 0 18px;
  padding: 16px;
  background: #f8faff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  break-inside: avoid;
  page-break-inside: avoid;
}

.print-section h3 {
  margin: 0 0 10px;
  color: #3a7abf;
  font-size: 18px;
}

.print-section p {
  margin: 6px 0;
  line-height: 1.55;
}

.print-cover {
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.55), rgba(237, 232, 255, 0.40));
}

.printable-professional-section {
  background: #ffffff;
}

.worksheet-preview-page {
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(48, 42, 38, 0.28);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(26, 43, 74, 0.07);
}

.worksheet-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #5b9bd5;
  color: #5b9bd5;
  font-weight: 800;
}

.worksheet-preview-header span {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.worksheet-preview-title h3 {
  margin: 14px 0 4px;
  color: #1a2b4a;
  font-size: 24px;
}

.worksheet-preview-title p {
  color: #403935;
  font-size: 13px;
}

.worksheet-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr);
  gap: 12px;
  margin: 14px 0;
}

.worksheet-preview-panel {
  padding: 12px;
  border: 1px solid rgba(48, 42, 38, 0.18);
  border-radius: 8px;
  background: #ffffff;
}

.worksheet-preview-panel span,
.worksheet-preview-practice span {
  display: block;
  margin-bottom: 8px;
  color: #5b9bd5;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.worksheet-preview-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.worksheet-preview-panel ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.worksheet-preview-practice {
  padding: 12px;
  border: 1px solid rgba(48, 42, 38, 0.18);
  border-radius: 8px;
}

.worksheet-dotted-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.worksheet-dotted-row i {
  display: grid;
  place-items: center;
  min-height: 42px;
  color: #536280;
  border: 1px dashed rgba(48, 42, 38, 0.42);
  border-radius: 6px;
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
}

.worksheet-line-row {
  height: 28px;
  border-bottom: 1px solid rgba(48, 42, 38, 0.65);
}

.worksheet-cut-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.worksheet-cut-row b {
  display: block;
  height: 24px;
  border-top: 2px dashed rgba(48, 42, 38, 0.65);
}

.worksheet-preview-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.worksheet-preview-footer span {
  padding: 5px 8px;
  color: #1a2b4a;
  background: #eef4fb;
  border: 1px solid rgba(48, 42, 38, 0.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.printable-quality-check {
  background: #f5f8fd;
  border-color: rgba(91, 155, 213, 0.22);
}

.printable-quality-check.needs-review {
  background: #f8faff;
  border-color: rgba(198, 111, 42, 0.28);
}

.printable-cartoon-section {
  background: #ffffff;
}

.worksheet-cartoon-scene {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(48, 42, 38, 0.18);
  border-radius: 14px;
}

.worksheet-cartoon-scene svg {
  width: 100%;
  height: auto;
  display: block;
}

.worksheet-cartoon-scene .cartoon-line {
  stroke: #1a2b4a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.worksheet-cartoon-scene .cartoon-line path,
.worksheet-cartoon-scene .cartoon-line circle,
.worksheet-cartoon-scene .cartoon-line ellipse,
.worksheet-cartoon-scene .cartoon-line rect,
.worksheet-cartoon-scene .cartoon-line polygon {
  vector-effect: non-scaling-stroke;
}

.worksheet-cartoon-scene .worksheet-caption {
  fill: #5b9bd5;
  font-size: 24px;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
}

.printable-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

.printable-list li {
  margin: 6px 0;
  line-height: 1.45;
}

.printable-checkbox {
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: center;
}

.printable-checkbox span {
  width: 14px;
  height: 14px;
  display: inline-block;
  border: 1.5px solid #1a2b4a;
  background: #fff;
}

.printable-field-row,
.printable-writing-line {
  min-height: 24px;
  overflow-wrap: anywhere;
}

.printable-writing-line {
  border-bottom: 1px solid #1a2b4a;
}

.printable-drawing-box-line {
  margin: 0;
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.resource-viewer-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.search-wrap {
  position: relative;
  display: block;
}

.search-wrap span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.search-wrap input {
  width: min(720px, 100%);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  outline: none;
  box-shadow: 0 8px 20px rgba(26, 43, 74, 0.04);
}

.search-wrap input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.16);
}

body.home-view:not(.user-authenticated) .topbar .search-wrap {
  display: none;
}

/* Scheduling surfaces open into content — no global “What do you need today?” bar */
body.scheduling-focus .topbar .search-wrap {
  display: none !important;
}

body.scheduling-focus .main {
  overflow-x: clip;
}

/* Documentation Helpers: keep focus on choosing a helper, not global search */
body.doc-helpers-view .topbar .search-wrap {
  display: none !important;
}

/* Lesson Plan Library: reclaim topbar space for search/filters/results.
   Keep Log In / Sign Up visible for guests — otherwise library browse has no signup chrome. */
body.lessons-view .topbar .search-wrap {
  display: none !important;
}

body.lessons-view.user-authenticated .topbar .account-actions {
  display: none !important;
}

body.lessons-view .topbar {
  grid-template-columns: minmax(0, 1fr);
  padding: 10px 14px;
}

body.lessons-view:not(.user-authenticated) .topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

body.lessons-view:not(.user-authenticated) .topbar .account-actions {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
}

body.lessons-view:not(.user-authenticated) .topbar #signupButton {
  white-space: nowrap;
}

body.lessons-view .mobile-brand {
  display: flex;
}

.lesson-library-header {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.lesson-library-back {
  justify-self: start;
  min-height: 44px;
}

.lesson-library-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.lesson-library-title {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink);
}

.lesson-library-subtitle {
  margin: 0;
}

.lesson-library-info-toggle {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  font-size: 1.1rem;
  line-height: 1;
}

.lesson-library-notice-compact {
  margin: 0;
  grid-template-columns: 1fr;
  padding: 12px 14px;
}

.lesson-library-notice-compact .lesson-update-notice-copy p {
  font-size: 0.92rem;
}

.lesson-library-secondary-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.lesson-library-secondary-row .ghost-button,
.lesson-library-secondary-row .primary-button,
.lesson-library-filters-btn {
  min-height: 44px;
}

.lesson-library-saved-link {
  flex: 1 1 180px;
}

.lesson-library-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
}

.lesson-filter-chip {
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #eef4fb;
  color: var(--ink);
  font-size: 0.9rem;
}

.lesson-library-filter-drawer {
  display: grid;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92);
}

.lesson-library-filter-group .eyebrow {
  margin: 0 0 8px;
}

.lesson-library-filter-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lesson-library-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.lesson-plan-card {
  min-height: 0;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  outline: none;
}

.lesson-plan-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.35), 0 12px 30px rgba(26, 43, 74, 0.07);
}

.lesson-plan-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.lesson-plan-card-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.lesson-plan-card-heading h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  line-height: 1.25;
}

.lesson-plan-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-plan-save-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #8a96a8;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.lesson-plan-save-btn.is-saved {
  color: #d4a017;
}

.lesson-plan-card-theme {
  margin: 0;
  color: #4a5d7a;
  font-size: 0.92rem;
  font-weight: 600;
}

.lesson-plan-card-domains {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.lesson-plan-card-domains .tag {
  font-size: 0.78rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.lesson-plan-card h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.lesson-library-age-filters {
  gap: 8px;
}

.lesson-library-age-filters button {
  min-height: 44px;
  min-width: 72px;
  padding: 8px 14px;
}

.lesson-plan-search-bar input {
  min-height: 48px;
}

.lesson-plan-card-overview {
  margin: 0;
  color: #40506a;
  font-size: 0.92rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lesson-plan-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.lesson-plan-card-actions .primary-button {
  width: 100%;
  min-height: 44px;
}

.lesson-plan-card.is-calendar-pick {
  border-color: rgba(91, 155, 213, 0.45);
  box-shadow: 0 0 0 1px rgba(91, 155, 213, 0.2);
}

.lesson-plan-card-hint {
  margin: 2px 0 0;
  color: #6b7c96;
  font-size: 0.85rem;
}

.tag.free-badge {
  background: #e7f6ea;
  color: #1f6b3a;
}

.tag.pro-badge {
  background: #efe8ff;
  color: #5b3f9c;
}

.tag.assigned-tag {
  background: #e8f1ff;
  color: #2457a0;
}

@media (max-width: 1100px) {
  .lesson-library-grid {
    grid-template-columns: 1fr;
  }

  .lesson-plan-card {
    padding: 14px;
  }
}

@media (min-width: 700px) and (max-width: 1100px) {
  .lesson-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lesson-library-age-filters button {
  min-height: 44px;
  padding: 10px 14px;
}

@media (max-width: 1100px) {
  body.lessons-view .topbar {
    padding: 8px 12px;
  }

  body.lessons-view .topbar .mobile-brand strong {
    font-size: 14px;
  }

  .lesson-library-header {
    gap: 6px;
    margin-bottom: 10px;
  }

  .lesson-library-title {
    font-size: 1.35rem;
  }

  #view-lessons .page-title {
    display: none;
  }
}

.account-actions,
.hero-actions,
.resource-actions,
.filter-row,
.quick-prompts,
.tool-tabs,
.output-toolbar,
.output-actions,
.auth-secondary-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.primary-button,
.ghost-button,
.small-button,
.download-button,
.favorite-button,
.prompt-chip {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.primary-button,
.download-button {
  color: var(--white);
  background: linear-gradient(135deg, #8b6be8, #7055d1);
  border-color: #8b6be8;
  box-shadow: 0 9px 18px rgba(139, 107, 232, 0.18);
}

.ghost-button,
.small-button,
.favorite-button,
.prompt-chip {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
}

.primary-button:hover,
.download-button:hover,
.ghost-button:hover,
.small-button:hover,
.favorite-button:hover,
.prompt-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--soft-shadow);
}

.small-button {
  width: 100%;
  margin-top: 14px;
}

.view {
  display: none;
  padding: 30px;
}

.active-view {
  display: block;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 380px;
  gap: 28px;
  align-items: stretch;
  padding: 38px;
  background:
    linear-gradient(135deg, rgba(248, 250, 255, 0.98), rgba(219, 234, 247, 0.70) 52%, rgba(237, 232, 255, 0.55)),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h2,
.page-title h2 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: 0;
}

.hero p {
  max-width: 740px;
  font-size: 17px;
  line-height: 1.6;
}

.hero-panel {
  min-height: 290px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(219, 234, 247, 0.72), rgba(237, 232, 255, 0.55)),
    var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.mini-window {
  width: 82%;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(26, 43, 74, 0.10);
}

.window-dots {
  display: flex;
  gap: 7px;
}

.window-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
}

.mini-row,
.mini-card,
.mini-lines span,
.mini-grid span {
  display: block;
  border-radius: 6px;
  background: var(--sage);
}

.mini-row {
  height: 34px;
  margin: 18px 0;
}

.mini-row.strong {
  width: 72%;
  background: #5b9bd5;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mini-grid span {
  height: 58px;
  background: var(--blue);
}

.mini-card {
  height: 72px;
  margin: 12px 0;
  background: var(--cream-2);
}

.mini-lines {
  display: grid;
  gap: 8px;
}

.mini-lines span {
  height: 12px;
}

.mini-lines span:nth-child(2) {
  width: 80%;
}

.mini-lines span:nth-child(3) {
  width: 55%;
}

.landing-home {
  max-width: 1180px;
  margin: 0 auto;
}

.landing-founding-slot {
  margin: 0 0 26px;
}

.founding-hero-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 26px 24px 22px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(255, 238, 226, 0.96), rgba(255, 248, 239, 0.98) 48%, rgba(255, 229, 218, 0.86)),
    var(--white);
  border: 1px solid rgba(239, 199, 192, 0.9);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(26, 43, 74, 0.07);
}

.founding-hero-card h2 {
  margin: 0;
  color: #d9534f;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.1;
  text-transform: none;
}

.founding-hero-card .eyebrow {
  color: #d9534f;
}

.founding-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #536280;
}

.founding-price-row > span {
  font-size: clamp(18px, 2vw, 24px);
}

.founding-price-row strong {
  color: #111;
  font-size: clamp(44px, 7vw, 72px);
  line-height: 0.9;
  letter-spacing: 0;
}

.founding-price-row em {
  color: #111;
  font-size: clamp(18px, 2vw, 27px);
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
}

.founding-price-row em span {
  display: block;
}

.founding-remaining {
  margin: 0;
  color: #111;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 800;
}

.founding-remaining strong {
  color: #d9534f;
}

.founding-live-meter {
  width: min(420px, 100%);
  display: grid;
  gap: 7px;
  margin: 2px auto 4px;
}

.founding-live-meter span {
  height: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(217, 83, 79, 0.16);
  border-radius: 999px;
}

.founding-live-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #d9534f, #74b0e0);
  border-radius: inherit;
}

.founding-live-meter small {
  color: #536280;
  font-size: 13px;
  font-weight: 800;
}

.founding-cta-button {
  min-width: min(280px, 100%);
  min-height: 48px;
  padding: 11px 18px;
  background: linear-gradient(135deg, #e95f55, #d9534f);
  border-color: #d9534f;
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(217, 83, 79, 0.2);
}

.founding-star {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  background: #f6b544;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(246, 181, 68, 0.26);
}

.founding-star::before {
  content: "";
  width: 34px;
  height: 34px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 34%, 97% 34%, 68% 55%, 79% 90%, 50% 69%, 21% 90%, 32% 55%, 3% 34%, 39% 34%);
}

.confetti {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #74b0e0;
  transform: rotate(45deg);
}

.confetti-one {
  top: 96px;
  left: 9%;
  background: #9d85ff;
}

.confetti-two {
  top: 116px;
  right: 13%;
  background: #74b0e0;
}

.confetti-three {
  bottom: 70px;
  right: 7%;
  background: #ede8ff;
}

.mobile-signup-pitch {
  margin: 0 0 24px;
}

.mobile-signup-card {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(91, 155, 213, 0.22);
  border-radius: 16px;
  box-shadow: 0 14px 28px rgba(26, 43, 74, 0.06);
}

.mobile-signup-card h2 {
  margin: 0;
  color: #3a7abf;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
}

.mobile-signup-card p {
  max-width: 780px;
  margin: 0;
  color: var(--ink);
  line-height: 1.48;
}

.mobile-signup-card ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-signup-card li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.28;
}

.mobile-signup-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #5b9bd5;
  font-weight: 900;
}

.mobile-signup-card .primary-button {
  justify-self: start;
  min-height: 46px;
}

.free-plan-section {
  margin-top: 20px;
}

.free-plan-content {
  padding: 24px;
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.74), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(91, 155, 213, 0.3);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(26, 43, 74, 0.07);
}

.free-plan-content h2 {
  margin: 0 0 10px;
  color: #3a7abf;
  font-size: clamp(24px, 3vw, 32px);
  text-align: center;
}

.free-plan-content > p {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.free-features-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.free-feature-card {
  padding: 16px 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(91, 155, 213, 0.30);
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(26, 43, 74, 0.04);
}

.free-feature-card strong {
  display: block;
  color: #5b9bd5;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.1;
}

.free-feature-card p {
  margin: 8px 0 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}

.free-plan-perks {
  margin-top: 14px;
  display: grid;
  gap: 6px;
  justify-items: center;
}

.free-plan-perks p {
  margin: 0;
  color: #3a7abf;
  font-weight: 800;
}

.free-plan-actions {
  margin-top: 16px;
  display: grid;
  justify-content: center;
}

.how-it-works-section {
  margin-top: 24px;
}

.how-it-works-content {
  padding: 24px;
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.78), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(91, 155, 213, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(26, 43, 74, 0.07);
}

.how-it-works-content h2 {
  margin: 0 0 18px;
  color: #3a7abf;
  font-size: clamp(24px, 3vw, 32px);
  text-align: center;
}

.how-it-works-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.how-it-works-steps li {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(91, 155, 213, 0.25);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(26, 43, 74, 0.05);
}

.step-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #8b6be8;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
}

.how-it-works-steps p {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}

.landing-value-strip,
.landing-testimonials,
.comparison-section,
.provider-needs-section,
.landing-final-cta,
.landing-start-free-cta,
.landing-story-card,
.tracker-showcase {
  margin-top: 24px;
}

.landing-value-strip h2,
.landing-testimonials h2,
.comparison-section h2,
.provider-needs-section h2 {
  margin: 0 0 18px;
  color: #3a7abf;
  font-size: clamp(24px, 3vw, 32px);
  text-align: center;
}

.landing-stat-grid,
.provider-needs-grid,
.testimonial-grid {
  display: grid;
  gap: 14px;
}

.landing-stat-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.landing-stat-grid article,
.provider-needs-grid article,
.testimonial-grid article {
  padding: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(91, 155, 213, 0.20);
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(26, 43, 74, 0.05);
}

.landing-stat-grid article {
  min-height: 174px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.landing-stat-grid strong {
  display: block;
  margin-top: 12px;
  color: #111;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.05;
}

.landing-stat-grid p,
.provider-needs-grid p,
.testimonial-grid p {
  margin: 8px 0 0;
  color: var(--ink);
  line-height: 1.42;
}

.stat-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
}

.stat-green { background: #74b0e0; }
.stat-orange { background: #f2ad68; }
.stat-purple { background: #9b85d3; }
.stat-coral { background: #e86f82; }
.stat-teal { background: #65bdb9; }
.stat-sage { background: #9ecb7f; }

.landing-story-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 28px 34px;
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.58), rgba(237, 232, 255, 0.48));
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: 14px;
}

.landing-story-card h2,
.tracker-showcase h2,
.landing-final-cta h2 {
  margin: 0;
  color: #3a7abf;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.12;
}

.landing-story-card p,
.landing-final-cta p {
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
}

.landing-story-card strong {
  display: block;
  margin-top: 12px;
  line-height: 1.45;
}

.provider-desk-visual {
  position: relative;
  width: 230px;
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  background: linear-gradient(145deg, #dbeaf7, #ede8ff);
  border: 8px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  box-shadow: 0 18px 30px rgba(26, 43, 74, 0.09);
}

.binder {
  position: absolute;
  bottom: 72px;
  width: 48px;
  height: 112px;
  border-radius: 8px;
  background: #e97872;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.34);
}

.binder-one {
  left: 45px;
  transform: rotate(-8deg);
}

.binder-two {
  left: 92px;
  background: #74b0e0;
  transform: rotate(5deg);
}

.mug {
  position: absolute;
  right: 38px;
  bottom: 46px;
  width: 86px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #536280;
  text-align: center;
  background: #ffffff;
  border: 4px solid #9d85ff;
  border-radius: 0 0 22px 22px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}

.mug::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 16px;
  width: 30px;
  height: 30px;
  border: 5px solid #9d85ff;
  border-left: 0;
  border-radius: 0 18px 18px 0;
}

.tracker-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: center;
  padding: 12px 10px 8px;
}

.tracker-copy {
  padding: 10px;
}

.landing-check-list {
  display: grid;
  gap: 14px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.landing-check-list li {
  position: relative;
  padding-left: 38px;
  font-size: 18px;
  line-height: 1.35;
}

.landing-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: #5b9bd5;
  border-radius: 50%;
}

.landing-check-list li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.tracker-mockup {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(83, 62, 42, 0.14);
}

.mockup-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.mockup-toolbar span {
  color: #3a7abf;
  font-weight: 800;
}

.mockup-toolbar button {
  min-height: 34px;
  padding: 8px 12px;
  color: #fff;
  background: #8b6be8;
  border: 0;
  border-radius: 7px;
  font-weight: 800;
}

.mockup-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 250px;
}

.mockup-body aside {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
  background: #f5f8fd;
  border-right: 1px solid var(--line);
}

.mockup-body aside span {
  padding: 9px 10px;
  border-radius: 8px;
  font-weight: 700;
}

.mockup-body aside .active-child {
  background: #dbeaf7;
  color: #3a7abf;
}

.mockup-body main {
  padding: 18px;
}

.mockup-body h3 {
  margin: 0 0 14px;
}

.mockup-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mockup-metrics div {
  padding: 16px 10px;
  text-align: center;
  background: #f4f1fb;
  border-radius: 10px;
}

.mockup-metrics div:nth-child(2) {
  background: #dbeaf7;
}

.mockup-metrics div:nth-child(3) {
  background: #fde9e6;
}

.mockup-metrics strong {
  display: block;
  font-size: 28px;
}

.mockup-metrics small {
  color: var(--muted);
  font-weight: 700;
}

.mockup-note {
  margin-top: 18px;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(26, 43, 74, 0.07);
}

.mockup-note p {
  margin: 4px 0 8px;
  color: var(--muted);
}

.mockup-note span {
  padding: 5px 8px;
  color: #3a7abf;
  background: #dbeaf7;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.landing-testimonials {
  padding: 26px;
  background: linear-gradient(135deg, rgba(237, 232, 255, 0.45), rgba(248, 250, 255, 0.98));
  border: 1px solid rgba(139, 107, 232, 0.15);
  border-radius: 14px;
}

.testimonial-cta {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.testimonial-stars {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.testimonial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.testimonial-grid article {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(213, 227, 240, 0.9);
}

.testimonial-grid span {
  color: var(--lavender);
  font-size: 28px;
  font-weight: 900;
}

.testimonial-grid strong {
  display: block;
  margin-top: 14px;
  color: var(--muted);
}

.comparison-section {
  text-align: center;
}

.comparison-table-wrap {
  overflow-x: auto;
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(26, 43, 74, 0.05);
}

.comparison-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: #fff;
  text-align: left;
}

.comparison-table th,
.comparison-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}

.comparison-table th {
  text-align: center;
  background: #eef4fb;
  font-size: 16px;
}

.comparison-table th:nth-child(3) {
  background: #dbeaf7;
}

.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3) {
  text-align: center;
}

.comparison-table td:nth-child(3) {
  color: #3a7abf;
  font-weight: 800;
  background: rgba(219, 234, 247, 0.42);
}

.provider-needs-section {
  padding: 24px;
  background: linear-gradient(135deg, rgba(248, 250, 255, 0.95), rgba(237, 232, 255, 0.38));
  border: 1px solid rgba(91, 155, 213, 0.20);
  border-radius: 14px;
}

.provider-needs-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.provider-needs-grid article {
  min-height: 154px;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  box-shadow: none;
  border: 0;
  border-right: 1px solid rgba(213, 227, 240, 0.65);
}

.provider-needs-grid article:last-child {
  border-right: 0;
}

.provider-needs-grid strong {
  margin-top: 10px;
}

.provider-needs-grid p {
  color: var(--muted);
  font-size: 13px;
}

.landing-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(237, 232, 255, 0.60), rgba(219, 234, 247, 0.90));
  border: 1px solid rgba(139, 107, 232, 0.22);
  border-radius: 14px;
}

.landing-start-free-cta {
  margin-top: 24px;
  padding: 38px 28px;
  background: linear-gradient(135deg, rgba(91, 155, 213, 0.07), rgba(139, 107, 232, 0.08));
  border: 1px solid rgba(91, 155, 213, 0.20);
  border-radius: 16px;
  text-align: center;
}

.start-free-cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.landing-start-free-cta h2 {
  margin: 0 0 10px;
  color: #3a7abf;
  font-size: clamp(26px, 3.2vw, 36px);
}

.landing-start-free-cta p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 17px;
}

.start-free-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: inline-grid;
  gap: 8px;
  text-align: left;
}

.start-free-checklist li {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}

.section-block,
.page-title {
  margin-top: 24px;
}

.section-block {
  padding: 24px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
}

.section-heading h3,
.resource-card h3,
.admin-note h3,
.price-card h3,
.locked-tool h3,
.ai-tool-card h3,
.future-tool-card h3,
.ai-chat-header h3 {
  margin: 0;
}

.home-stats,
.library-stats,
.trust-grid,
.love-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.home-stats div,
.library-stats div,
.trust-grid div,
.love-stats div {
  min-height: 94px;
  padding: 16px;
  background: linear-gradient(135deg, var(--white), rgba(219, 234, 247, 0.40));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(26, 43, 74, 0.05);
}

.home-stats strong,
.library-stats strong,
.trust-grid strong,
.love-stats strong {
  display: block;
  color: #5b9bd5;
  font-size: 26px;
  line-height: 1;
}

.home-stats span,
.library-stats span,
.trust-grid span,
.love-stats span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.trust-grid strong {
  font-size: 17px;
  line-height: 1.25;
}

.provider-love-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.provider-love-grid article {
  min-height: 136px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 22px rgba(26, 43, 74, 0.05);
}

.provider-love-grid strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.provider-love-grid span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.love-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 0;
}

.success-stories-section[hidden] {
  display: none;
}

.success-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lead-capture-section,
.preview-feature {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.lead-capture-section h3,
.lead-capture-section p,
.preview-feature h3,
.preview-feature p {
  margin: 0;
}

.lead-capture-section p:not(.eyebrow),
.preview-feature p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.lead-form {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.lead-form label {
  display: grid;
  gap: 6px;
  min-width: min(320px, 100%);
  font-weight: 700;
}

.lead-form input {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.preview-grid,
.legal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.preview-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.preview-card h3,
.preview-card p,
.legal-card h3,
.legal-card p {
  margin: 0;
}

.preview-card p,
.legal-card p {
  color: var(--muted);
  line-height: 1.5;
}

.legal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.onboarding-panel {
  margin-top: 24px;
}

.onboarding-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.onboarding-item {
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 14px;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.onboarding-item span {
  width: fit-content;
  padding: 5px 8px;
  color: #5b4a9e;
  background: #fae9e5;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.onboarding-item.complete span {
  color: #3a7abf;
  background: var(--sage);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.category-button {
  min-height: 132px;
  padding: 18px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(26, 43, 74, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.category-button strong {
  display: block;
  margin: 12px 0 4px;
  font-size: 18px;
}

.category-button span {
  color: var(--muted);
  font-size: 13px;
}

.category-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(26, 43, 74, 0.10);
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.page-title {
  padding: 8px 0 4px;
}

.page-title p {
  max-width: 760px;
  line-height: 1.55;
}

.filter-row {
  margin: 18px 0;
}

.lesson-plan-search-bar {
  margin: 0;
}

#view-lessons .lesson-plan-search-bar {
  margin: 0 0 4px;
}

.lesson-plan-search-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.lesson-plan-search-bar input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  outline: none;
  box-shadow: 0 8px 20px rgba(26, 43, 74, 0.04);
  box-sizing: border-box;
}

.lesson-plan-search-bar input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91, 155, 213, 0.16);
}



.filter-row button {
  padding: 9px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-row button.active-filter {
  color: var(--white);
  background: #8b6be8;
  border-color: #8b6be8;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.resource-card {
  display: grid;
  gap: 12px;
  min-height: 235px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(26, 43, 74, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.resource-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(26, 43, 74, 0.09);
}

.resource-preview {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.resource-card.locked {
  background: rgba(255, 250, 241, 0.82);
}

.resource-card.locked h3,
.resource-card.locked p {
  opacity: 0.72;
}

.resource-card p {
  margin: 0;
  line-height: 1.45;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 5px 8px;
  color: #3a7abf;
  background: var(--sage);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.tag-visible {
  color: #166534;
  background: #dcfce7;
}

.admin-activity-thumb-preview {
  max-width: 120px;
  max-height: 90px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
  margin: 8px 0;
  object-fit: cover;
}

.access-tag {
  margin-left: auto;
  color: var(--accent);
  background: var(--accent-soft);
}

.resource-actions {
  align-self: end;
}

.download-button.disabled {
  pointer-events: none;
  color: var(--muted);
  background: var(--cream-2);
  border-color: var(--line);
}

.disabled-control {
  cursor: not-allowed;
  opacity: 0.62;
}

.access-notice {
  margin: 0 0 16px;
  padding: 13px 14px;
  color: #5b4a9e;
  background: var(--accent-soft);
  border: 1px solid rgba(139, 107, 232, 0.28);
  border-radius: var(--radius);
  font-weight: 700;
  line-height: 1.4;
}

.access-notice.pro {
  color: #3a7abf;
  background: var(--sage);
  border-color: rgba(91, 155, 213, 0.28);
}

.printable-refresh-notice {
  color: #3a7abf;
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.72), rgba(237, 232, 255, 0.45));
  border-color: rgba(91, 155, 213, 0.22);
}

.printable-refresh-notice strong {
  display: block;
  margin-bottom: 3px;
}

.lesson-library-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  color: #2c3f72;
  background: linear-gradient(135deg, rgba(237, 232, 255, 0.92), rgba(219, 234, 247, 0.88));
  border-color: rgba(91, 155, 213, 0.24);
  font-weight: 500;
}

.lesson-library-notice-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.lesson-update-notice-copy h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #1f2d55;
}

.lesson-update-notice-copy p {
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 640px) {
  .lesson-library-notice {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lesson-library-notice-actions {
    justify-content: flex-start;
  }
}

.lesson-helper-reminder-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.resource-list.compact {
  display: grid;
  gap: 10px;
}

.compact-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.compact-item > div {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.compact-item strong {
  display: block;
}

.compact-item span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.empty-state {
  padding: 18px;
  color: var(--muted);
  background: var(--cream);
  border: 1px dashed var(--tan);
  border-radius: var(--radius);
}

.admin-layout {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-section-nav {
  padding: 12px 0 0;
  margin-bottom: 0;
}

/* Keep old btn styles for any legacy references */
.admin-section-nav-btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-section-nav-btn:hover {
  background: var(--bg-soft, #f5f0eb);
  border-color: var(--accent, #386062);
}

.admin-section-nav-btn.active {
  background: var(--accent, #386062);
  color: #fff;
  border-color: var(--accent, #386062);
}

/* ── Admin 2.0 Group Navigation ───────────────────────────────────────────── */

.admin-group-nav {
  margin-bottom: 0;
}

.admin-back-btn {
  font-size: 13px;
  padding: 6px 12px;
  margin-bottom: 12px;
}

.admin-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

@media (min-width: 640px) {
  .admin-group-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.admin-group-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 64px;
}

.admin-group-btn:hover {
  background: var(--bg-soft, #f5f0eb);
  border-color: var(--accent, #386062);
}

.admin-group-btn.active {
  background: var(--accent, #386062);
  color: #fff;
  border-color: var(--accent, #386062);
  box-shadow: 0 2px 8px rgba(56,96,98,.22);
}

.admin-group-icon {
  font-size: 22px;
  line-height: 1;
}

.admin-group-label {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.admin-sub-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.admin-sub-nav::-webkit-scrollbar { display: none; }

.admin-sub-tab {
  flex-shrink: 0;
  padding: 6px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.admin-sub-tab:hover {
  background: var(--bg-soft, #f5f0eb);
  border-color: var(--accent, #386062);
}

.admin-sub-tab.active {
  background: var(--accent, #386062);
  color: #fff;
  border-color: var(--accent, #386062);
}

/* ── Visibility Dashboard ─────────────────────────────────────────────────── */

.admin-vis-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.admin-vis-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.admin-vis-card.is-hidden {
  background: rgba(245, 240, 235, 0.7);
  border-color: rgba(0,0,0,.08);
}

.admin-vis-card.is-archived {
  opacity: 0.76;
  background: linear-gradient(180deg, rgba(245, 240, 235, 0.98), rgba(236, 233, 240, 0.92));
}

.admin-vis-card-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.admin-vis-card-main > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.admin-vis-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.admin-vis-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.admin-vis-badge.badge-visible {
  background: rgba(46,125,50,.12);
  color: var(--success, #2e7d32);
}

.admin-vis-badge.badge-hidden {
  background: rgba(192,57,43,.10);
  color: var(--danger, #c0392b);
}

/* ── Users & Memberships Dashboard ───────────────────────────────────────── */

.admin-user-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.admin-user-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.admin-user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.admin-user-card-header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.admin-user-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
}

/* ── Users & Memberships Phase 4 ─────────────────────────────────────────── */

/* Insight stat cards */
.aup-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 500px) {
  .aup-insight-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.aup-insight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  text-align: center;
  gap: 2px;
}

.aup-insight-card strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}

.aup-insight-card span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.aup-card-meta,
.aup-card-usage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.aup-card-meta span,
.aup-card-usage span {
  background: #f4f7f8;
  border-radius: 999px;
  padding: 4px 10px;
}

.aup-card--disabled {
  opacity: 0.72;
  border-style: dashed;
}

.sidebar-help-block,
.auth-help-links {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.sidebar-help-block .ghost-button,
.auth-help-links .ghost-button {
  width: 100%;
  justify-content: center;
}

.admin-empty-callout {
  margin: 12px 0 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: #fffdf7;
}

.admin-feedback-list .ticket-card {
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .aup-card-meta,
  .aup-card-usage,
  .aup-card-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sidebar-help-block .ghost-button {
    font-size: 13px;
  }
  #feedbackModal .modal-card,
  #authModal .modal-card {
    max-height: 92vh;
    overflow: auto;
  }
}

.aup-insight--free     strong { color: #536280; }
.aup-insight--trial    strong { color: #5b9bd5; }
.aup-insight--pro      strong { color: var(--accent); }
.aup-insight--founding strong { color: #c9a84c; }
.aup-insight--canceled strong { color: #c0392b; }

/* Search */
.aup-search-wrap {
  margin-bottom: 12px;
}

.aup-search-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: 15px;
  background: var(--white);
  color: var(--ink);
  box-sizing: border-box;
  -webkit-appearance: none;
}

.aup-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 107, 232, 0.12);
}

/* Filter tabs */
.aup-filter-tabs {
  gap: 6px;
  margin-bottom: 14px;
}

/* Enhanced user cards */
.aup-list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.aup-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  display: grid;
  gap: 10px;
}

.aup-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.aup-card-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.aup-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aup-card-email {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aup-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.aup-card-dates {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

.aup-card-dates strong {
  color: var(--ink);
  font-weight: 600;
}

.aup-card-actions {
  display: flex;
  gap: 8px;
}

.aup-btn {
  flex: 1;
  min-height: 42px;
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 0;
}

/* Plan + status badges */
.aup-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.aup-badge--free     { background: var(--cream-2); color: var(--muted); }
.aup-badge--trial    { background: #dbeaf7; color: #3a7abf; }
.aup-badge--pro      { background: var(--accent-soft); color: var(--accent); }
.aup-badge--founding { background: #fef9e7; color: #c9a84c; }

.aup-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.aup-status--free     { background: var(--cream-2); color: var(--muted); }
.aup-status--trial    { background: #e3f2fd; color: #1565c0; }
.aup-status--active   { background: #e8f5e9; color: #2e7d32; }
.aup-status--canceled { background: #fdecea; color: #c0392b; }

/* User Profile Modal */
.aup-profile-modal {
  align-items: flex-end;
  padding: 0;
}

@media (min-width: 540px) {
  .aup-profile-modal {
    align-items: center;
    padding: 20px;
  }
}

.aup-profile-card {
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px;
  background: var(--white);
  box-shadow: var(--shadow);
}

@media (min-width: 540px) {
  .aup-profile-card {
    border-radius: 20px;
    max-height: 85dvh;
  }
}

.aup-modal-header {
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.aup-modal-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aup-modal-identity {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.aup-modal-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aup-modal-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

.aup-modal-email {
  font-size: 13px;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

.aup-modal-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Tabs inside the profile modal */
.aup-modal-tabs {
  display: flex;
  gap: 4px;
  background: var(--cream-2);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}

.aup-modal-tab {
  flex: 1;
  padding: 9px 4px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.aup-modal-tab.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* Info grid inside panels */
.aup-info-grid {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.aup-info-grid > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cream-2);
  font-size: 14px;
}

.aup-info-grid > div:last-child {
  border-bottom: none;
}

.aup-info-grid > div span {
  color: var(--muted);
  flex-shrink: 0;
}

.aup-info-grid > div strong {
  color: var(--ink);
  text-align: right;
  word-break: break-all;
}

/* Action row inside modal panels */
.aup-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.aup-action-btn {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  border-radius: 10px;
  min-width: 120px;
}

.aup-btn--danger {
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}

.aup-btn--danger:hover {
  background: #fdecea !important;
}

/* Founding member fieldset highlight */
.aup-founding-fieldset {
  border-color: #c9a84c !important;
  background: #fef9e7;
}

.aup-founding-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: #8d6e1b;
  background: #fef3cd;
  border-radius: 8px;
  padding: 8px 12px;
}

/* Trial fieldset highlight */
.aup-trial-fieldset {
  border-color: #5b9bd5 !important;
  background: rgba(91, 155, 213, 0.05);
}

/* Usage note */
.aup-usage-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Billing history rows */
.aup-billing-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--cream-2);
  font-size: 13px;
  flex-wrap: wrap;
}

.aup-billing-row:last-child { border-bottom: none; }
.aup-billing-row span { color: var(--muted); }
.aup-billing-row small { color: var(--muted); }

.admin-import-textarea {
  width: 100%;
  min-height: 260px;
  font-family: monospace;
  font-size: 13px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
  box-sizing: border-box;
}

.admin-import-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

.admin-manager-grid {
  display: grid;
  gap: 18px;
}

.admin-manager-section {
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.admin-mobile-toolbar,
.admin-stacked-form {
  display: grid;
  gap: 12px;
}

.admin-mobile-toolbar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.admin-mobile-toolbar label,
.admin-stacked-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.admin-mobile-toolbar span,
.admin-stacked-form span {
  font-size: 13px;
}

.curriculum-daily-editor {
  display: grid;
  gap: 14px;
  max-width: 100%;
  overflow-x: hidden;
}

.curriculum-premium-editor,
.curriculum-weekly-editor,
.curriculum-daily-day-body,
.curriculum-list-editor,
.curriculum-daily-item-row {
  max-width: 100%;
  overflow-x: hidden;
}

.curriculum-activity-sync-notice {
  margin: 0 0 12px;
}

.curriculum-weekly-editor,
.curriculum-daily-day {
  margin: 0;
}

.curriculum-daily-day-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}

.curriculum-daily-day-summary::-webkit-details-marker {
  display: none;
}

.curriculum-daily-day-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.curriculum-day-list-block {
  display: grid;
  gap: 8px;
}

.curriculum-day-list-block h5,
.curriculum-daily-items h5 {
  margin: 0;
  font-size: 14px;
}

.curriculum-list-editor,
.curriculum-list-rows,
.curriculum-daily-items {
  display: grid;
  gap: 12px;
  margin-bottom: 10px;
}

.curriculum-book-row,
.curriculum-song-row,
.curriculum-text-list-row,
.curriculum-daily-item-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.curriculum-list-row-actions,
.curriculum-activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.curriculum-activity-toolbar {
  justify-content: space-between;
}

.curriculum-activity-toolbar-label {
  font-size: 13px;
}

.curriculum-list-row-actions .ghost-button,
.curriculum-activity-toolbar .ghost-button {
  min-height: 40px;
  min-width: 40px;
}

.curriculum-domain-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.curriculum-daily-remove {
  justify-self: start;
}

.curriculum-premium-editor input,
.curriculum-premium-editor textarea,
.curriculum-premium-editor select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .curriculum-premium-editor,
  .curriculum-daily-editor,
  .curriculum-daily-day-body,
  .curriculum-book-row,
  .curriculum-song-row,
  .curriculum-text-list-row,
  .curriculum-daily-item-row {
    overflow-x: hidden;
  }

  .curriculum-daily-day-summary,
  .curriculum-activity-toolbar,
  .curriculum-list-row-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .curriculum-list-row-actions .ghost-button,
  .curriculum-activity-toolbar .ghost-button,
  .curriculum-premium-editor .form-actions button,
  .curriculum-premium-editor [data-curriculum-add-book],
  .curriculum-premium-editor [data-curriculum-add-song],
  .curriculum-premium-editor [data-curriculum-add-text-list],
  .curriculum-premium-editor [data-curriculum-add-row] {
    width: 100%;
    min-height: 44px;
  }

  .curriculum-domain-grid {
    grid-template-columns: 1fr;
  }
}

.curriculum-import-template {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.45;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 248, 250, 0.95);
  overflow: auto;
  max-height: 320px;
}

.curriculum-import-format-details {
  margin-bottom: 10px;
}

.curriculum-import-mode-fieldset {
  border: 1px solid rgba(123, 168, 201, 0.35);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  background: rgba(229, 241, 248, 0.45);
}

.curriculum-import-mode-row {
  display: grid;
  gap: 8px;
}

.curriculum-import-success-report {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(93, 184, 154, 0.35);
  background: linear-gradient(135deg, rgba(227, 246, 239, 0.95), rgba(255, 255, 255, 0.98));
}

.curriculum-import-success-report h5 {
  margin: 0;
  font-size: 1rem;
}

.curriculum-import-panel textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

.curriculum-import-preview {
  display: grid;
  gap: 16px;
  max-width: 100%;
  overflow-x: hidden;
}

.curriculum-import-preview-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.curriculum-import-format-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 600;
}

.curriculum-import-preview-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
}

.curriculum-import-preview-summary > div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 248, 250, 0.95);
  text-align: center;
}

.curriculum-import-preview-summary strong {
  font-size: 18px;
}

.curriculum-import-preview-summary span {
  font-size: 12px;
  color: var(--muted);
}

.curriculum-import-preview-section,
.curriculum-import-preview-day,
.curriculum-import-preview-activity,
.curriculum-import-duplicate-title {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  max-width: 100%;
}

.curriculum-import-preview-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.curriculum-import-preview-field {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.curriculum-import-preview-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.curriculum-import-preview-text,
.curriculum-import-preview-list,
.curriculum-import-issue-list {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.curriculum-import-preview-text {
  white-space: pre-wrap;
  line-height: 1.5;
}

.curriculum-import-preview-list,
.curriculum-import-issue-list {
  margin: 0;
  padding-left: 18px;
}

.curriculum-import-preview-activities {
  display: grid;
  gap: 12px;
}

.curriculum-import-preview-day > summary {
  cursor: pointer;
  font-weight: 600;
}

.curriculum-import-preview-day-body {
  margin-top: 12px;
}

.curriculum-import-issue-list.is-error strong {
  color: #b42318;
}

.curriculum-import-issue-list.is-warning strong {
  color: #b54708;
}

.curriculum-import-issue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.curriculum-import-preview-actions {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.curriculum-import-confirm-message {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 480px) {
  .curriculum-import-preview-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .curriculum-import-preview-actions {
    display: grid;
    gap: 8px;
  }

  .curriculum-import-preview-actions .primary-button,
  .curriculum-import-preview-actions .ghost-button {
    width: 100%;
    min-height: 44px;
  }
}

.curriculum-linked-resources {
  margin-top: 8px;
}

.curriculum-linked-resource-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.curriculum-linked-resource-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.curriculum-link-resource-row {
  align-items: end;
}

.admin-mobile-list {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.admin-mobile-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,250,0.92));
}

.admin-content-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,248,250,0.92));
}

.admin-mobile-card.is-hidden {
  opacity: 0.82;
}

.admin-content-card.is-hidden {
  opacity: 0.82;
}

/* 4-status card states */
.admin-content-card.is-draft {
  opacity: 0.82;
}

.admin-content-card.is-archived {
  opacity: 0.72;
  background: linear-gradient(180deg, rgba(245, 240, 235, 0.98), rgba(236, 233, 240, 0.92));
}

.admin-content-card.is-featured {
  border-color: #f0c060;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.99), rgba(254, 249, 220, 0.95));
}

/* Content status badge (used on cards and in edit forms) */
.content-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.content-status-draft {
  background: #fef9e7;
  color: #875a00;
  border-color: #f0d880;
}

.content-status-approved {
  background: #eaf6ed;
  color: #1a6b30;
  border-color: #86c990;
}

.content-status-featured {
  background: #fff8e0;
  color: #7a5300;
  border-color: #f0c040;
}

.content-status-archived {
  background: #f3eef8;
  color: #5a3d7a;
  border-color: #c4a8e0;
}

/* Content health dashboard */
.content-health-card .admin-mobile-stats {
  margin-top: 8px;
}

.admin-owner-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.admin-owner-section h4 {
  margin: 4px 0 8px;
}

.admin-mobile-card-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.admin-content-card-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.admin-content-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-content-card-copy p,
.admin-content-card-copy small {
  margin: 0;
}

.admin-content-card-actions {
  margin-top: 12px;
}

.admin-mobile-thumb,
.admin-mobile-thumb-placeholder,
.admin-mobile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--cream);
}

.admin-mobile-thumb-placeholder,
.admin-mobile-avatar {
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--ink);
}

.admin-select-row,
.admin-inline-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.admin-select-row {
  margin-bottom: 10px;
}

.admin-mobile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.admin-mobile-stats > div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.admin-mobile-stats strong {
  display: block;
  font-size: 22px;
  color: #5b9bd5;
}

.admin-fieldset {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.admin-fieldset legend {
  padding: 0 6px;
  font-weight: 700;
}

.curriculum-cover-editor {
  margin-top: 8px;
}

.curriculum-cover-preview-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

.curriculum-cover-preview {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f4f1fb;
  aspect-ratio: 16 / 9;
}

.curriculum-cover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curriculum-cover-library {
  margin-top: 10px;
}

.curriculum-cover-library summary {
  cursor: pointer;
  font-weight: 700;
  color: #5b4a9e;
}

.curriculum-cover-library-search {
  display: grid;
  gap: 4px;
  margin: 10px 0;
}

.curriculum-cover-library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.curriculum-cover-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding: 2px;
}

.curriculum-cover-library-item {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.curriculum-cover-library-item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  background: #efeaf8;
}

.curriculum-cover-library-item span {
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--ink);
}

.curriculum-cover-library-item.is-selected {
  border-color: #7b6bb5;
  box-shadow: 0 0 0 2px rgba(123, 107, 181, 0.25);
}

@media (max-width: 700px) {
  .curriculum-cover-preview-row {
    grid-template-columns: 1fr;
  }
}

.admin-lesson-editing-heading {
  margin: 2px 0 4px;
  color: #5b4a9e;
}

.admin-visibility-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-visibility-summary-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.admin-visibility-summary-card strong,
.admin-visibility-summary-card span {
  margin: 0;
}

.admin-visibility-bulk-actions {
  margin: 14px 0 16px;
}

#adminLessonPlanForm textarea {
  min-height: 110px;
  resize: vertical;
}

.admin-lesson-generator {
  background: linear-gradient(135deg, #fdf6ff 0%, #f0f8ff 100%);
  border: 1.5px solid #c9aff5;
  display: grid;
  gap: 12px;
}

.admin-lesson-generator legend {
  color: #7c3aed;
  font-size: 15px;
}

.admin-generator-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-generator-optional {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}

.admin-overwrite-confirm {
  background: #fff8e6;
  border: 1px solid #f5c842;
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.admin-overwrite-confirm p {
  margin: 0;
  font-size: 14px;
}

.lp-showcase-managed-image,
.lp-home-hero-image,
.lp-reviewer-image {
  width: 100%;
  object-fit: cover;
}

.lp-showcase-managed-image,
.lp-home-hero-image {
  border-radius: 18px;
  margin-bottom: 14px;
  max-height: 240px;
}

.lp-reviewer-image {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.form-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-stacked-form .form-actions button {
  min-height: 44px;
}

#adminCancelEdit {
  display: none;
}

.admin-manager {
  min-width: 0;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.admin-preview-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(219, 234, 247, 0.55), rgba(237, 232, 255, 0.40));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-preview-panel p,
.admin-preview-panel span {
  margin: 0;
}

.admin-preview-panel strong {
  display: block;
  margin: 4px 0;
}

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.account-panel {
  padding: 22px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.account-panel h3,
.account-panel p {
  margin: 0;
}

.account-panel p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.account-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.account-lists {
  margin-top: 24px;
}

.admin-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: end;
}

.admin-controls label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.admin-controls select {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-search input {
  width: 100%;
}

.admin-summary {
  display: grid;
  grid-template-columns: 130px 130px 1fr;
  gap: 12px;
  margin: 16px 0;
}

.admin-summary > div {
  padding: 12px;
  background: linear-gradient(135deg, var(--white), var(--cream));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(26, 43, 74, 0.04);
}

.admin-summary strong {
  display: block;
  color: #5b9bd5;
  font-size: 24px;
}

.admin-summary span {
  color: var(--muted);
  font-size: 13px;
}

.admin-category-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-content: center;
}

.admin-category-counts strong {
  display: inline;
  font-size: 13px;
}

.admin-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: var(--white);
}

.admin-table th,
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: #3a7abf;
  background: var(--sage);
  font-size: 13px;
}

.admin-table td span,
.admin-table td small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.admin-thumb {
  width: 74px;
  height: 52px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream);
}

.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-row-hidden {
  opacity: 0.6;
}

.tag-hidden {
  background: #f3e8f7;
  color: #7b4f8a;
  border-color: #d6b8e0;
}

.danger-button {
  min-height: 42px;
  padding: 10px 14px;
  color: #8a3f3a;
  background: #fae9e5;
  border: 1px solid #efc7c0;
  border-radius: var(--radius);
  font-weight: 700;
}

.link-button {
  padding: 0;
  color: #5b9bd5;
  background: transparent;
  border: 0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel-form {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel-form label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.panel-form input,
.panel-form select,
.panel-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.admin-note {
  padding: 22px;
}

.admin-note ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.admin-note li {
  margin: 9px 0;
}

.admin-lock-content,
.admin-unlocked-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: center;
}

.admin-lock-content h3,
.admin-lock-content p,
.admin-unlocked-bar p {
  margin: 0;
}

.admin-lock-content p:not(.eyebrow),
.admin-unlocked-bar span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.admin-unlock-form {
  display: grid;
  gap: 10px;
}

.admin-unlock-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.admin-unlock-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.form-message {
  min-height: 18px;
  color: #a33f3b;
  font-size: 13px;
}

.form-message.success,
.account-security-note.verified {
  color: var(--sage-dark);
}

/* Universal admin save — saving/success/error indicators */
.form-message.admin-saving {
  color: var(--muted);
  font-style: italic;
}

.hidden-field {
  display: none !important;
}

.account-security-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.auth-secondary-actions {
  justify-content: space-between;
}

.recovery-form {
  max-width: 560px;
}

.analytics-summary-grid,
.analytics-grid,
.admin-owner-grid,
.admin-owner-lists {
  display: grid;
  gap: 12px;
}

.analytics-summary-grid,
.admin-owner-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 16px;
}

.analytics-summary-grid div,
.admin-owner-grid div,
.analytics-summary-grid .admin-metric,
.admin-owner-grid .admin-metric,
.analytics-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 18px rgba(26, 43, 74, 0.05);
}

.admin-owner-grid .admin-metric,
.analytics-summary-grid .admin-metric {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: default;
}

.admin-owner-grid .admin-metric--clickable {
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.admin-owner-grid .admin-metric--clickable:hover,
.admin-owner-grid .admin-metric--clickable:focus-visible {
  border-color: #5b9bd5;
  box-shadow: 0 10px 22px rgba(26, 43, 74, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.admin-owner-grid .admin-metric--clickable.is-active {
  border-color: #5b9bd5;
  box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.25);
}

.admin-metric-hint {
  color: #5b9bd5 !important;
  font-weight: 600;
}

.admin-owner-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.admin-owner-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.admin-owner-jump a:hover,
.admin-owner-jump a:focus-visible {
  border-color: #5b9bd5;
  color: #2f6fa8;
}

.admin-owner-collapse {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

.admin-owner-collapse-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.admin-owner-collapse-summary::-webkit-details-marker {
  display: none;
}

.admin-owner-collapse-summary .eyebrow {
  margin: 0 0 4px;
}

.admin-owner-collapse-summary h3 {
  margin: 0;
}

.admin-owner-collapse-hint {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.admin-owner-collapse > .admin-owner-grid,
.admin-owner-collapse > .admin-owner-lists {
  padding: 0 16px 16px;
  margin-bottom: 0;
}

.admin-owner-drilldown {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #5b9bd5;
  border-radius: var(--radius);
  background: #f4f9fd;
  scroll-margin-top: 16px;
}

.admin-owner-drilldown-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
}

.admin-owner-drilldown-header h3,
.admin-owner-drilldown-header p {
  margin: 0;
}

.admin-owner-drilldown-header .muted-copy {
  margin-top: 6px;
}

.admin-owner-drilldown-filters {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.admin-owner-filter-field {
  display: grid;
  gap: 6px;
}

.admin-owner-filter-field span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.admin-owner-filter-field input,
.admin-owner-filter-field select {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font: inherit;
}

.admin-owner-drilldown-list {
  display: grid;
  gap: 10px;
}

.admin-drilldown-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.admin-drilldown-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-drilldown-identity strong,
.admin-drilldown-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-drilldown-identity span {
  color: var(--muted);
  font-size: 13px;
}

.admin-drilldown-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
}

.admin-drilldown-meta em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.admin-drilldown-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .admin-owner-drilldown-filters {
    grid-template-columns: 1fr 1fr;
  }

  .admin-drilldown-row {
    grid-template-columns: 1fr;
  }

  .admin-drilldown-actions {
    justify-content: stretch;
  }

  .admin-drilldown-actions .aup-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 1100px) {
  .admin-owner-jump {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 8px 0;
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 252, 247, 0.92));
  }

  .admin-owner-collapse:not([open]) .admin-owner-collapse-hint::after {
    content: "";
  }

  .admin-owner-drilldown-filters {
    grid-template-columns: 1fr;
  }
}

.analytics-summary-grid strong {
  display: block;
  color: #5b9bd5;
  font-size: 25px;
  line-height: 1;
}

.analytics-summary-grid span,
.admin-owner-grid span,
.admin-owner-grid small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.admin-owner-grid strong {
  display: block;
  color: #5b9bd5;
  font-size: 25px;
  line-height: 1;
}

.admin-owner-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.admin-owner-header h3,
.admin-owner-header p {
  margin: 0;
}

.admin-owner-header p:last-child {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.analytics-grid,
.admin-owner-lists {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-analytics-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--cream);
}

.admin-analytics-status span {
  font-weight: 700;
  color: #5b9bd5;
}

.admin-analytics-status small {
  color: var(--muted);
}

.analytics-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 150px;
  padding-top: 10px;
}

.analytics-bar {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  min-height: 140px;
}

.analytics-bar span {
  align-self: end;
  display: block;
  min-height: 8px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #74b0e0, #5b9bd5);
}

.analytics-bar small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-user-card {
  margin-top: 12px;
}

.analytics-user-table-wrap {
  max-height: 520px;
  overflow: auto;
}

.analytics-user-table td {
  vertical-align: top;
}

.analytics-card h4 {
  margin: 0 0 12px;
}

.analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.analytics-row:first-of-type {
  border-top: 0;
}

.analytics-row span,
.analytics-row small {
  color: var(--muted);
}

.analytics-row.stacked {
  grid-template-columns: 1fr;
  gap: 4px;
}

.readiness-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.readiness-summary div,
.readiness-item,
.next-build-order {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 18px rgba(26, 43, 74, 0.05);
}

.readiness-summary strong {
  display: block;
  color: #5b9bd5;
  font-size: 28px;
  line-height: 1;
}

.readiness-summary span,
.readiness-item span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.readiness-list {
  display: grid;
  gap: 10px;
}

.readiness-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.readiness-item em {
  justify-self: end;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(219, 234, 247, 0.65);
  color: #3a7abf;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.readiness-item.needed em {
  background: rgba(246, 216, 212, 0.72);
  color: #a33f3b;
}

.readiness-item.local em {
  background: rgba(219, 234, 247, 0.78);
  color: #3a7abf;
}

.next-build-order {
  margin-top: 16px;
}

.next-build-order ol {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.55;
}

.pricing-grid,
.generator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.pricing-grid--founding-open {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-grid--founding-open > :only-child {
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}

.pricing-grid--sold-out {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.founding-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--white), rgba(237, 232, 255, 0.35), rgba(219, 234, 247, 0.32));
  border: 1px solid rgba(139, 107, 232, 0.2);
  border-radius: var(--radius);
  box-shadow: 0 6px 14px rgba(26, 43, 74, 0.05);
}

.founding-banner--compact h3 {
  font-size: 1.05rem;
  line-height: 1.25;
}

.founding-banner--compact p:not(.eyebrow) {
  margin-top: 4px;
  font-size: 0.9rem;
}

.free-library-conversion-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: start;
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(91, 155, 213, 0.28);
  background: linear-gradient(135deg, #f7fbff, rgba(219, 234, 247, 0.4), rgba(255, 248, 240, 0.55));
  box-shadow: 0 8px 20px rgba(26, 43, 74, 0.06);
}

.free-library-conversion-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2f5f86;
  background: rgba(91, 155, 213, 0.18);
}

.free-library-conversion-banner h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink, #1a2b4a);
}

.free-library-conversion-body {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.95rem;
}

.free-library-conversion-benefits {
  margin: 8px 0 0;
  padding-left: 1.15rem;
  color: var(--ink, #1a2b4a);
  line-height: 1.45;
  font-size: 0.95rem;
}

.free-library-conversion-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(100%, 240px);
}

.free-library-conversion-banner-actions .primary-button,
.free-library-conversion-banner-actions .ghost-button {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.lesson-library-counts {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(26, 43, 74, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

.lesson-library-counts p {
  margin: 0 0 4px;
}

.lesson-library-counts p:last-child {
  margin-bottom: 0;
}

.library-upgrade-strip-copy {
  flex: 1;
  min-width: 0;
}

.library-upgrade-strip-copy p {
  margin: 0 0 4px;
}

.free-planner-upgrade-nudge,
.ai-lesson-pro-gate {
  margin-bottom: 14px;
}

.founding-upgrade-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(201, 122, 52, 0.28);
  background: linear-gradient(135deg, #fff8f1, rgba(255, 248, 240, 0.92), rgba(219, 234, 247, 0.35));
  box-shadow: 0 8px 20px rgba(26, 43, 74, 0.06);
}

.founding-upgrade-banner.is-sold-out {
  border-color: rgba(91, 155, 213, 0.28);
  background: linear-gradient(135deg, #f7fbff, rgba(219, 234, 247, 0.45));
}

.founding-upgrade-badge {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9a4e12;
  background: rgba(255, 186, 120, 0.35);
}

.founding-upgrade-banner.is-sold-out .founding-upgrade-badge {
  color: #2f5f86;
  background: rgba(91, 155, 213, 0.18);
}

.founding-upgrade-banner h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--ink, #1a2b4a);
}

.founding-upgrade-body,
.founding-upgrade-compare,
.founding-upgrade-spots {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.95rem;
}

.founding-upgrade-price {
  margin: 10px 0 0;
  color: #9a4e12;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
}

.founding-upgrade-banner.is-sold-out .founding-upgrade-price {
  color: #5b9bd5;
}

.founding-upgrade-price span {
  margin-left: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

.founding-upgrade-price em {
  font-style: normal;
  font-weight: 800;
  color: #9a4e12;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.founding-upgrade-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(100%, 240px);
}

.founding-upgrade-banner-actions .primary-button,
.founding-upgrade-banner-actions .ghost-button {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.founding-upgrade-banner--library,
.founding-upgrade-banner--settings,
.founding-upgrade-banner--billing {
  margin-top: 12px;
}

.home-founding-banner {
  grid-template-columns: minmax(0, 1fr) 160px auto;
  margin-top: 0;
}

.founding-banner h3,
.founding-banner p {
  margin: 0;
}

.founding-banner p:not(.eyebrow),
.muted-copy {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.promo-code-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 18px;
  align-items: end;
  margin: 18px 0;
  background: linear-gradient(135deg, #f8faff, rgba(219, 234, 247, 0.58));
  border: 2px solid rgba(91, 155, 213, 0.24);
  box-shadow: 0 16px 38px rgba(91, 155, 213, 0.12);
}

.promo-code-panel h3,
.promo-code-panel p {
  margin-bottom: 0;
}

.promo-code-panel h3 {
  color: #5b9bd5;
  font-size: 24px;
}

.promo-code-panel label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
}

.promo-code-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.promo-code-entry label {
  min-width: 0;
}

.promo-code-panel input {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  text-transform: uppercase;
}

.promo-code-panel input:focus {
  outline: 3px solid rgba(91, 155, 213, 0.16);
  border-color: #5b9bd5;
}

.promo-code-entry .ghost-button {
  min-height: 46px;
  white-space: nowrap;
}

.promo-code-message {
  grid-column: 1 / -1;
}

.spots-meter {
  min-height: 128px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.spots-meter strong {
  color: #5b9bd5;
  font-size: 42px;
  line-height: 1;
}

.spots-meter span,
.spots-meter small {
  color: var(--muted);
}

.spots-progress {
  width: 100%;
  height: 8px;
  overflow: hidden;
  background: #d5e3f0;
  border-radius: 999px;
}

.spots-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8b6be8, #5b9bd5);
  border-radius: inherit;
}

.spots-meter em {
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.spots-meter.sold-out strong {
  color: #b76561;
  font-size: 34px;
}

.feature-list {
  margin: 14px 0 18px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.45;
}

.billing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.billing-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.billing-summary-grid div {
  padding: 14px;
  background: linear-gradient(135deg, var(--white), rgba(220, 238, 245, 0.3));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.billing-summary-grid span,
.billing-history-item span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.billing-summary-grid strong {
  display: block;
  margin-top: 5px;
  color: #5b9bd5;
  font-size: 20px;
}

.billing-history-list {
  display: grid;
  gap: 10px;
}

.billing-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  padding: 16px;
  background: linear-gradient(135deg, var(--white), rgba(220, 238, 245, 0.24));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.faq-item h3,
.faq-item p {
  margin: 0;
}

.faq-item p,
.faq-item li {
  color: var(--muted);
  line-height: 1.5;
}

.faq-item p,
.faq-item ul {
  margin-top: 8px;
}

.faq-item ul {
  padding-left: 20px;
}

.contact-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 18px;
  align-items: start;
}

.contact-intro h3,
.contact-intro p {
  margin: 0;
}

.contact-intro p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.support-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-topic-list span {
  padding: 8px 10px;
  color: #3a7abf;
  background: var(--sage);
  border: 1px solid rgba(91, 155, 213, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.support-form h3 {
  margin: 0;
}

.ticket-list {
  display: grid;
  gap: 12px;
}

.ticket-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--white), rgba(219, 233, 220, 0.24));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ticket-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.ticket-card h3,
.ticket-card p {
  margin: 0;
}

.ticket-card p,
.ticket-card small {
  color: var(--muted);
  line-height: 1.45;
}

.ticket-status {
  flex: 0 0 auto;
  padding: 7px 9px;
  color: #3a7abf;
  background: var(--blue);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.ticket-status-complete {
  color: #3a7abf;
  background: var(--sage);
}

.ticket-status-in-progress {
  color: #76531f;
  background: #f6e6c8;
}

.ticket-reply {
  padding: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ticket-admin-actions {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ticket-admin-actions label,
.ticket-filter-label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.ticket-admin-actions select,
.ticket-admin-actions textarea,
.ticket-filter-label select {
  width: 100%;
  padding: 10px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.admin-ticket-panel {
  margin-top: 24px;
}

.admin-emails-panel {
  margin-top: 24px;
}

.admin-email-status {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.admin-email-status.is-ready {
  border-color: rgba(47, 111, 94, 0.35);
  background: linear-gradient(135deg, var(--white), rgba(47, 111, 94, 0.06));
}

.admin-email-status.is-pending {
  border-color: rgba(183, 140, 97, 0.35);
  background: linear-gradient(135deg, var(--white), rgba(183, 140, 97, 0.08));
}

.admin-email-controls,
.admin-email-onboarding,
.admin-email-preview,
.admin-email-events {
  margin-top: 20px;
}

.admin-email-step-list {
  margin: 8px 0 16px;
  padding-left: 18px;
}

.admin-email-test-send {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 0.95rem;
}

.checkout-test-panel,
.success-panel {
  border-color: rgba(91, 155, 213, 0.36);
  background: linear-gradient(135deg, var(--white), rgba(219, 234, 247, 0.40));
}

.failed-panel {
  border-color: rgba(183, 101, 97, 0.28);
  background: linear-gradient(135deg, var(--white), rgba(246, 216, 212, 0.36));
}

.ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}

.ai-chat-panel,
.preference-panel,
.ai-tool-card,
.future-tool-card,
.generator-panel,
.future-panel,
.ai-output-panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ai-chat-panel,
.preference-panel {
  padding: 22px;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ai-chat-header p,
.saved-preferences p,
.ai-tool-card p,
.future-tool-card p,
.locked-tool p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.quick-prompts {
  margin-bottom: 16px;
}

.prompt-chip {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
}

.chat-window {
  height: 360px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, var(--cream), rgba(219, 234, 247, 0.32));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.chat-message {
  max-width: 86%;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 6px 14px rgba(26, 43, 74, 0.05);
}

.chat-message.user {
  justify-self: end;
  background: var(--blue);
}

.chat-message.assistant {
  justify-self: start;
  background: var(--white);
}

.chat-message p {
  margin: 6px 0 0;
  color: var(--ink);
  line-height: 1.45;
}

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.chat-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.chat-form label span {
  color: var(--muted);
  font-size: 13px;
}

.chat-form textarea,
.mini-form input,
.mini-form select {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mini-form {
  display: grid;
  gap: 12px;
}

.mini-form label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

.saved-preferences {
  margin-top: 16px;
  padding: 12px;
  background: linear-gradient(135deg, var(--cream), rgba(219, 234, 247, 0.38));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.ai-tool-grid,
.future-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ai-tool-card,
.future-tool-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  min-height: 212px;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ai-tool-card::before,
.future-tool-card::before {
  content: "Doc";
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #5b9bd5;
  background: linear-gradient(135deg, var(--blue), var(--sage));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 800;
}

.future-tool-card::before {
  content: "PT";
}

.ai-tool-card:hover,
.future-tool-card:hover,
.future-tool-card.active-future-tool {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(26, 43, 74, 0.09);
}

.future-tool-card.active-future-tool {
  border-color: rgba(91, 155, 213, 0.36);
}

.ai-tool-card .primary-button,
.future-tool-card .primary-button {
  align-self: end;
}

.future-workspace {
  margin-top: 22px;
}

.tool-tabs {
  margin-bottom: 16px;
}

.tool-tabs button {
  padding: 9px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
}

.tool-tabs button.active-filter {
  color: var(--white);
  background: linear-gradient(135deg, #8b6be8, #7055d1);
  border-color: #8b6be8;
}

.generator-workspace {
  margin-top: 22px;
}

.generated-history-block {
  margin-top: 22px;
}

.generator-panel,
.future-panel {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
}

.generator-form h3,
.future-tool-form h3,
.ai-output-panel h3 {
  margin: 0;
}

.generator-form p,
.future-tool-form p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.tool-locked {
  background:
    linear-gradient(135deg, rgba(246, 220, 216, 0.34), rgba(220, 232, 220, 0.36)),
    rgba(255, 255, 255, 0.9);
}

.ai-output-panel {
  min-width: 0;
  padding: 18px;
}

.output-toolbar {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 14px;
}

.output-actions {
  justify-content: flex-end;
}

#generatorOutput,
#futureOutput,
#docHelperOutput {
  min-height: 420px;
  max-height: 680px;
  overflow: auto;
  margin: 0;
  padding: 18px 22px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--cream), rgba(220, 238, 245, 0.28));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  word-break: break-word;
  line-height: 1.6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.ai-output-rendered .md-h1,
.ai-output-rendered .md-h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 22px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

.ai-output-rendered .md-h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 6px;
}

.ai-output-rendered .md-h4,
.ai-output-rendered .md-h5,
.ai-output-rendered .md-h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-output-rendered .md-h1:first-child,
.ai-output-rendered .md-h2:first-child,
.ai-output-rendered .md-h3:first-child,
.ai-output-rendered .md-h4:first-child,
.ai-output-rendered .md-h5:first-child,
.ai-output-rendered .md-h6:first-child {
  margin-top: 0;
}

.ai-output-rendered .md-p {
  margin: 0 0 10px;
}

.ai-output-rendered .md-ul,
.ai-output-rendered .md-ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.ai-output-rendered .md-ul li,
.ai-output-rendered .md-ol li {
  margin-bottom: 5px;
  line-height: 1.5;
}

.lesson-workflow-panel .generator-form {
  gap: 14px;
}

.lesson-workflow-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lesson-step-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 10px;
  text-align: left;
}

.lesson-step-pill.active {
  border-color: var(--primary);
  background: #f0f6ff;
  color: var(--primary-dark);
}

.lesson-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-step-loading {
  min-height: 260px;
  align-content: center;
}

.lesson-step-review .ghost-button {
  justify-self: start;
}

@media (max-width: 560px) {
  .lesson-workflow-steps {
    grid-template-columns: 1fr;
  }
}

.generator-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.generated-item {
  background: linear-gradient(135deg, var(--white), rgba(219, 234, 247, 0.24));
}

.generated-item .ghost-button {
  min-width: 84px;
}

.ai-usage-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 320px);
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--white), rgba(219, 234, 247, 0.35));
}

.ai-usage-panel h4,
.ai-usage-panel p {
  margin: 0;
}

.ai-usage-panel span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.usage-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(26, 43, 74, 0.09);
}

.usage-bar span {
  display: block;
  height: 100%;
  margin: 0;
  background: linear-gradient(90deg, #5b9bd5, #8b6be8);
}

.planner-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}

.planner-summary,
.planner-form {
  grid-column: 1 / -1;
}

.planner-summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.planner-summary h3,
.planner-summary p {
  margin: 0;
}

.planner-summary p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
}

.planner-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 10px;
  min-width: min(520px, 100%);
}

.planner-metrics div {
  padding: 12px;
  background: linear-gradient(135deg, var(--white), rgba(220, 238, 245, 0.34));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.planner-metrics strong {
  display: block;
  color: #5b9bd5;
  font-size: 24px;
}

.planner-metrics span {
  color: var(--muted);
  font-size: 13px;
}

.planner-form {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.planner-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.planner-day {
  display: grid;
  gap: 10px;
  min-width: 210px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.planner-day h3 {
  margin: 0;
  color: #5b9bd5;
}

.planner-day label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.planner-day input,
.planner-day textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  resize: vertical;
}

.planner-suggestions {
  position: sticky;
  top: 92px;
}

.curriculum-planner-shell {
  display: grid;
  gap: 18px;
  max-width: 100%;
  overflow-x: hidden;
}

.curriculum-planner-setup,
.curriculum-planner-week-summary,
.curriculum-planner-empty,
.dashboard-curriculum-assigned,
.dashboard-curriculum-empty {
  display: grid;
  gap: 12px;
}

.curriculum-planner-assign-form {
  margin-top: 12px;
}

.curriculum-planner-day-board {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 100%;
}

.curriculum-planner-day-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  min-width: 0;
}

.curriculum-planner-day-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
}

.curriculum-planner-day-header::-webkit-details-marker {
  display: none;
}

.curriculum-planner-day-header strong {
  display: block;
}

.curriculum-planner-day-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.curriculum-planner-daily-note-label textarea,
.curriculum-planner-notes-section textarea,
.curriculum-planner-observation-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
}

.curriculum-planner-activity-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.curriculum-planner-notes-section,
.curriculum-planner-observations-section,
.curriculum-planner-parent-calendar-section,
.curriculum-planner-observations-body,
.curriculum-planner-events-body,
.curriculum-planner-observation-list,
.curriculum-planner-event-list {
  display: grid;
  gap: 12px;
}

.curriculum-planner-observations-panel,
.curriculum-planner-events-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.curriculum-planner-observations-panel > summary,
.curriculum-planner-events-panel > summary {
  cursor: pointer;
  font-weight: 700;
}

.curriculum-planner-observation-card,
.curriculum-planner-event-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(248, 248, 250, 0.95);
  min-width: 0;
}

.curriculum-planner-observation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.curriculum-planner-observation-note {
  margin: 0;
  white-space: pre-wrap;
}

.curriculum-planner-activity-warning {
  color: #9a3412;
}

.curriculum-planner-day-events,
.curriculum-planner-preview-events {
  display: grid;
  gap: 6px;
}

.curriculum-planner-event-chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.curriculum-planner-parent-preview {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.75);
  max-width: 100%;
}

.curriculum-planner-parent-message {
  white-space: pre-wrap;
  margin: 0;
}

.curriculum-planner-preview-days {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.curriculum-planner-preview-day {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-curriculum-meta,
.dashboard-curriculum-today {
  display: grid;
  gap: 4px;
}

.curriculum-planner-viewer-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .curriculum-planner-day-board {
    grid-template-columns: 1fr;
  }

  .curriculum-planner-day-header,
  .curriculum-planner-setup .dashboard-panel-heading,
  .curriculum-planner-week-summary .dashboard-panel-heading,
  .curriculum-planner-notes-section .dashboard-panel-heading,
  .curriculum-planner-observations-section .dashboard-panel-heading,
  .curriculum-planner-parent-calendar-section .dashboard-panel-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .curriculum-planner-shell .form-actions,
  .dashboard-curriculum-empty .form-actions,
  .dashboard-curriculum-assigned .form-actions,
  .curriculum-planner-observation-card .form-actions,
  .curriculum-planner-event-card .form-actions {
    display: grid;
    gap: 8px;
  }

  .curriculum-planner-shell .form-actions button,
  .dashboard-curriculum-empty .form-actions button,
  .dashboard-curriculum-assigned .form-actions button,
  .curriculum-planner-observation-card .form-actions button,
  .curriculum-planner-event-card .form-actions button {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .curriculum-planner-shell,
  .curriculum-planner-day-card,
  .curriculum-planner-day-board,
  .curriculum-planner-observation-card,
  .curriculum-planner-event-card,
  .curriculum-planner-parent-preview {
    overflow-x: hidden;
  }
}

.child-dashboard,
.child-layout,
.child-profile-grid {
  display: grid;
  gap: 22px;
}

.child-layout {
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
  margin-top: 22px;
}

.child-sidebar {
  position: sticky;
  top: 92px;
}

.child-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.child-list-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.child-list-item.active-child {
  border-color: rgba(91, 155, 213, 0.42);
  box-shadow: var(--soft-shadow);
}

.child-list-item img,
.child-profile-header img,
.child-avatar,
.child-list-item > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  object-fit: cover;
  color: #5b9bd5;
  background: linear-gradient(135deg, var(--pink), var(--blue));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 800;
}

.child-list-item small {
  color: var(--muted);
}

.child-profile-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}

.child-profile-header img,
.child-avatar {
  width: 78px;
  height: 78px;
  font-size: 28px;
}

.child-profile-header h3,
.child-profile-header p {
  margin: 0;
}

.child-profile-header p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
}

.child-profile-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.child-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 22px;
}

.progress-bar {
  height: 14px;
  overflow: hidden;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(135deg, #5b9bd5, #8b6be8);
  border-radius: inherit;
}

.weekly-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.weekly-lists div {
  padding: 14px;
  background: linear-gradient(135deg, var(--white), rgba(219, 234, 247, 0.28));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.weekly-lists p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.child-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 180px;
  gap: 10px;
  margin: 12px 0;
}

.child-filter-row input,
.child-filter-row select {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}

.weekly-planning-dashboard,
.child-intelligence-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(220, 238, 245, 0.42), rgba(219, 233, 220, 0.42));
}

.planning-dashboard-grid,
.recommendation-grid,
.elg-connection-grid {
  display: grid;
  gap: 12px;
}

.planning-dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planning-dashboard-grid article,
.recommendation-grid > div,
.elg-connection-grid article {
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.planning-dashboard-grid strong {
  display: block;
  color: #5b9bd5;
  font-size: 22px;
  line-height: 1.12;
}

.planning-dashboard-grid span,
.elg-connection-grid span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.recommendation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.recommendation-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.simple-child-page {
  display: grid;
  gap: 18px;
}

.child-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.child-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.child-page-header.compact {
  align-items: center;
}

.child-page-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.1;
}

.child-page-header p,
.monthly-goal-card p,
.profile-overview-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.child-need-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(244, 169, 122, 0.38);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff8f2, #ffffff);
}

.need-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #8b4b28;
  background: #ffe4cf;
  border-radius: var(--radius);
  font-weight: 900;
}

.need-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.need-list span,
.simple-child-card mark,
.portfolio-mini-list span {
  padding: 6px 9px;
  color: #3a7abf;
  background: rgba(219, 234, 247, 0.72);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.simple-child-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.simple-child-card {
  display: grid;
  gap: 16px;
  min-height: 286px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(26, 43, 74, 0.05);
}

.simple-child-card-head,
.simple-profile-hero {
  display: flex;
  gap: 12px;
  align-items: center;
}

.simple-child-card-head {
  flex-wrap: wrap;
}

.simple-child-card-head > div {
  min-width: 0;
  flex: 1 1 150px;
}

.simple-child-card h3,
.simple-profile-hero h2,
.simple-child-card p,
.simple-profile-hero p {
  margin: 0;
}

.simple-child-card-head p,
.child-card-section span,
.simple-profile-hero p,
.monthly-progress span,
.profile-info-list span,
.portfolio-mini-list {
  color: var(--muted);
  font-size: 13px;
}

.simple-child-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  object-fit: cover;
  color: #5b9bd5;
  background: linear-gradient(135deg, #dbeaf7, #ede8ff);
  border: 1px solid var(--line);
  border-radius: 18px;
  font-weight: 900;
}

.simple-child-avatar.small {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.child-card-section {
  display: grid;
  gap: 7px;
}

.child-card-section p {
  margin: 0;
}

.monthly-progress {
  display: grid;
  gap: 7px;
}

.monthly-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.monthly-progress strong {
  color: #c84949;
  font-size: 13px;
}

.child-card-actions,
.quick-action-list,
.observation-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.child-card-actions {
  margin-top: auto;
}

.child-card-actions > * {
  flex: 1 1 140px;
}

.back-button {
  justify-self: start;
}

.simple-form-card {
  max-width: 620px;
}

.wide-form-card {
  max-width: 980px;
}

.simple-child-form,
.simple-observation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.simple-observation-form textarea,
.mini-form textarea {
  width: 100%;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: 12px;
  box-sizing: border-box;
  line-height: 1.5;
  resize: vertical;
}

.simple-observation-form textarea {
  padding: 14px;
}

.mini-form textarea {
  padding: 12px;
}

.simple-observation-form textarea:focus,
.mini-form textarea:focus,
.child-tools-select select:focus {
  outline: 3px solid rgba(106, 69, 214, 0.16);
  border-color: rgba(106, 69, 214, 0.42);
}

.simple-child-form button,
.simple-observation-form .wide,
.simple-observation-form button.wide {
  grid-column: 1 / -1;
}

.locked-child-field {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.locked-child-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.locked-child-field strong {
  color: var(--ink);
}

.simple-profile-hero {
  justify-content: space-between;
}

.simple-profile-hero > div {
  min-width: 0;
  flex: 1 1 auto;
}

.profile-identity-hero {
  align-items: flex-start;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(219, 234, 247, 0.55), rgba(255, 255, 255, 0.92) 48%, rgba(245, 248, 252, 0.9)),
    radial-gradient(circle at top right, rgba(91, 155, 213, 0.12), transparent 42%);
}

.profile-identity-copy {
  display: grid;
  gap: 6px;
}

.profile-identity-copy .eyebrow {
  color: #3a7abf;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.profile-identity-meta {
  color: var(--muted);
  font-size: 14px;
}

.profile-observation-progress {
  display: grid;
  gap: 6px;
  max-width: 280px;
  margin-top: 4px;
}

.profile-observation-progress span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.profile-child-switcher select {
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.profile-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: flex-end;
  align-items: center;
}

#view-children:not([data-child-mode="list"]) > .children-list-title {
  display: none;
}

.profile-empty-state {
  display: grid;
  gap: 8px;
  padding: 18px 16px;
  background: linear-gradient(180deg, #f7fafc, #ffffff);
  border: 1px dashed rgba(91, 155, 213, 0.28);
  border-radius: var(--radius);
}

.profile-empty-state strong {
  color: var(--ink);
  font-size: 15px;
}

.profile-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.profile-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.profile-combined-tab {
  display: grid;
  gap: 16px;
}

.overview-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.overview-dash-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border: 1px solid rgba(91, 155, 213, 0.16);
  border-radius: var(--radius);
}

.overview-dash-card strong {
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}

.overview-dash-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  min-height: 2.6em;
}

.overview-dash-card .ghost-button {
  justify-self: start;
  margin-top: 4px;
}

.child-quick-entry-collapsed {
  margin-top: 8px;
}

.child-quick-entry-collapsed > summary {
  list-style: none;
  cursor: pointer;
}

.child-quick-entry-collapsed > summary::-webkit-details-marker {
  display: none;
}

.child-quick-entry-collapsed > summary::after {
  content: "Show";
  margin-left: auto;
  color: #3a7abf;
  font-size: 12px;
  font-weight: 800;
}

.child-quick-entry-collapsed[open] > summary::after {
  content: "Hide";
}

.child-quick-entry-collapsed .quick-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.child-quick-entry-collapsed[open] .quick-entry-header {
  margin-bottom: 12px;
}

.child-ai-output:empty {
  display: none;
}

.profile-check-section {
  display: grid;
  gap: 10px;
}

.profile-check-section > strong,
.profile-support-summary strong {
  color: var(--ink);
}

.profile-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.support-check-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-support-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.profile-support-summary.compact {
  margin: 0 0 14px;
}

.profile-support-summary > div {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.monthly-goal-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.simple-profile-tabs {
  display: flex;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.simple-profile-tabs button {
  flex: 1 0 132px;
  padding: 12px 10px;
  text-align: center;
  color: var(--muted);
  background: transparent;
  border-right: 1px solid var(--line);
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.simple-profile-tabs button.active {
  color: #7055d1;
  background: #f4efff;
}

.simple-profile-tabs button:last-child {
  border-right: 0;
}

.attention-tag {
  margin-left: auto;
  padding: 6px 9px;
  color: #3a7abf;
  background: rgba(219, 234, 247, 0.72);
  border: 1px solid rgba(91, 155, 213, 0.16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.attention-list,
.focused-suggestion-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.focused-suggestion-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.child-lesson-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.child-lesson-mini-card,
.child-lesson-context,
.todays-focus-section {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.child-lesson-mini-card {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.child-lesson-mini-card h4,
.child-lesson-mini-card p {
  margin: 0;
}

.child-lesson-mini-card div,
.lesson-card-context {
  display: grid;
  gap: 5px;
}

.child-lesson-mini-card span,
.lesson-card-context span,
.child-ai-context span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.lesson-card-context {
  padding: 10px;
  background: rgba(219, 234, 247, 0.45);
  border: 1px solid rgba(91, 155, 213, 0.12);
  border-radius: 10px;
}

.lesson-card-context strong {
  color: #3a7abf;
}

.lesson-card-context p {
  margin: 2px 0 0;
}

.child-lesson-context {
  display: grid;
  gap: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.child-lesson-context > div,
.child-ai-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}

.child-lesson-context strong {
  color: #3a7abf;
}

.child-lesson-context span {
  color: var(--muted);
  font-size: 13px;
}

.child-lesson-context p {
  margin: 0;
  line-height: 1.45;
}

.support-center-page {
  display: grid;
  gap: 18px;
}

.support-center-title p {
  max-width: 680px;
}

.support-category-grid,
.support-topic-grid {
  display: grid;
  gap: 14px;
}

.support-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.support-topic-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-search {
  display: grid;
  gap: 7px;
  max-width: 620px;
  font-weight: 800;
}

.support-search span {
  color: var(--muted);
  font-size: 13px;
}

.support-search input {
  width: 100%;
  padding: 13px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.support-category-card,
.support-topic-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(26, 43, 74, 0.05);
}

.support-category-card {
  min-height: 164px;
  padding: 18px;
}

.support-topic-card {
  min-height: 118px;
  padding: 15px;
}

.support-category-card:hover,
.support-topic-card:hover {
  border-color: rgba(91, 155, 213, 0.34);
  box-shadow: 0 16px 34px rgba(26, 43, 74, 0.08);
}

.support-category-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #5b9bd5;
  background: rgba(219, 234, 247, 0.78);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 900;
}

.support-category-card strong,
.support-topic-card strong,
.support-child-shortcuts h3,
.support-detail-panel h3,
.support-ai-card h3 {
  margin: 0;
  color: var(--ink);
}

.support-category-card p,
.support-topic-card span,
.support-detail-panel p,
.support-ai-card p,
.support-child-context span,
.support-child-picker small,
.support-child-picker span,
.support-mini-resource span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.support-child-shortcuts {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.support-shortcut-list,
.child-support-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.child-support-links {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  background: rgba(219, 234, 247, 0.34);
  border: 1px solid rgba(91, 155, 213, 0.12);
  border-radius: var(--radius);
}

.child-support-links strong {
  color: #3a7abf;
}

.support-topic-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 18px;
  align-items: start;
}

.support-topic-hero h2,
.support-topic-hero p {
  margin: 0;
}

.support-topic-hero h2 {
  font-size: 30px;
  line-height: 1.1;
}

.support-topic-hero p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.support-child-picker,
.support-child-context {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.support-child-picker select {
  width: 100%;
  padding: 11px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.support-tab-row {
  display: flex;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.support-tab-row button {
  flex: 1 0 128px;
  padding: 12px 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.support-tab-row button:last-child {
  border-right: 0;
}

.support-tab-row button.active {
  color: #5b9bd5;
  background: rgba(219, 234, 247, 0.74);
}

.support-detail-panel,
.support-ai-card {
  display: grid;
  gap: 14px;
}

.support-bullet-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 19px;
}

.support-bullet-list li {
  line-height: 1.45;
}

.support-simple-card-grid,
.support-resource-mini-grid,
.support-ai-grid {
  display: grid;
  gap: 10px;
}

.support-simple-card-grid,
.support-resource-mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-simple-card-grid article,
.support-mini-resource,
.support-ai-grid > div {
  padding: 13px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.support-simple-card-grid span,
.support-mini-resource strong {
  display: block;
  color: var(--ink);
  line-height: 1.4;
}

.support-resource-section {
  display: grid;
  gap: 9px;
}

.support-resource-section > strong {
  color: #5b9bd5;
}

.support-ai-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.support-ai-output {
  grid-column: 1 / -1;
}

.support-ai-output:empty {
  display: none;
}

.support-ai-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f8f4ff;
  border: 1px solid rgba(106, 69, 214, 0.2);
  border-radius: var(--radius);
}

.support-ai-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-ai-grid strong {
  color: #5b9bd5;
}

.observation-support-match {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: rgba(219, 233, 220, 0.46);
  border: 1px solid rgba(91, 155, 213, 0.12);
  border-radius: 10px;
}

.observation-support-match strong {
  color: #5b9bd5;
  font-size: 13px;
}

.attention-list > div,
.focused-suggestion-list > div,
.simple-add-record {
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.attention-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.attention-list strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  line-height: 1.3;
}

.simple-add-record {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.simple-add-record h4 {
  margin: 0;
  color: #5b9bd5;
}

.child-tools-layout {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.child-tools-side {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
}

.child-tools-selected {
  display: flex;
  gap: 12px;
  align-items: center;
}

.child-tools-selected span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.child-tools-select {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.child-tools-select select {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.child-tools-nav {
  display: grid;
  gap: 8px;
}

.child-tools-nav button {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.child-tools-nav button.active {
  color: #5b9bd5;
  background: linear-gradient(135deg, rgba(219, 233, 220, 0.86), rgba(220, 238, 245, 0.64));
  border-color: rgba(91, 155, 213, 0.28);
}

.child-tools-nav span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.child-tools-content .section-block {
  margin: 0;
}

/* ─── Daily Logs Center ─────────────────────────────────────────────────── */

.daily-logs-page .child-page-header {
  margin-bottom: 20px;
}

.dlc-home {
  display: grid;
  gap: 20px;
}

.dlc-prompt {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.dlc-action-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dlc-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.dlc-action-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(91, 155, 213, 0.15);
}

.dlc-card-group { border-top: 3px solid #5b9bd5; }
.dlc-card-individual { border-top: 3px solid #8b6be8; }
.dlc-card-quick { border-top: 3px solid #f59e42; }

.dlc-card-icon {
  font-size: 28px;
  line-height: 1;
}

.dlc-action-card strong {
  font-size: 15px;
  color: var(--ink);
}

.dlc-action-card > span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.dlc-card-list {
  margin: 6px 0 0;
  padding-left: 16px;
  list-style: disc;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.dlc-section {
  display: grid;
  gap: 16px;
}

.dlc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dlc-section-header h3 {
  margin: 0;
}

.dlc-sub {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}

.dlc-group-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dlc-group-action-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.dlc-group-action-btn:hover {
  border-color: var(--primary);
}

.dlc-group-action-btn > span:first-child {
  font-size: 22px;
}

.dlc-group-action-btn strong {
  font-size: 14px;
  color: var(--ink);
}

.dlc-group-action-btn > span:last-child {
  font-size: 12px;
  color: var(--muted);
}

.dlc-group-form {
  display: grid;
  gap: 14px;
}

.dlc-children-select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.dlc-children-select legend {
  font-weight: 700;
  font-size: 13px;
  padding: 0 6px;
}

.dlc-children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.dlc-child-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f7fafd;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
}

.dlc-child-check input[type="checkbox"] {
  accent-color: var(--primary);
}

.dlc-child-age {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}

.dlc-form-label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.dlc-form-label input,
.dlc-form-label textarea,
.dlc-form-label select {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}

.dlc-form-label textarea {
  resize: vertical;
}

.dlc-individual-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dlc-child-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dlc-child-info strong {
  display: block;
  color: var(--ink);
}

.dlc-child-info span {
  font-size: 12px;
  color: var(--muted);
}

.dlc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 10px;
}

.dlc-tab {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}

.dlc-tab.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.dlc-tab-content {
  margin-top: 6px;
}

.dlc-overview {
  display: grid;
  gap: 20px;
}

.dlc-overview-date {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}

.dlc-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.dlc-overview-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.dlc-overview-card:hover {
  border-color: var(--primary);
}

.dlc-overview-card--filled {
  border-color: #8bc4a8;
  background: #f4faf6;
}

.dlc-overview-icon {
  font-size: 18px;
}

.dlc-overview-card strong {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}

.dlc-overview-card > span:last-child {
  font-size: 12px;
  color: var(--muted);
}

.dlc-quick-actions {
  display: grid;
  gap: 10px;
}

.dlc-quick-actions strong {
  font-size: 13px;
  color: var(--ink);
}

.dlc-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dlc-quick-doc-section {
  max-width: 700px;
}

.dlc-quick-doc {
  display: grid;
  gap: 14px;
}

.dlc-quick-doc-types {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dlc-quick-doc-types legend {
  padding: 0 6px;
  font-size: 13px;
}

.dlc-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.dlc-check-label input[type="checkbox"] {
  accent-color: var(--primary);
}

.dlc-quick-doc-output {
  margin-top: 6px;
}

.dlc-doc-output {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  background: #f7fafd;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 10px 0;
  overflow-x: auto;
}

.dlc-report-actions {
  display: grid;
  gap: 10px;
}

/* ─── New Daily Log Flow ──────────────────────────────────────────────────── */

.dlc-step {
  display: grid;
  gap: 20px;
}

.dlc-step-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

/* Step 1 – child selection cards */
.dlc-sel-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .dlc-sel-cards {
    grid-template-columns: 1fr;
  }
}

.dlc-sel-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 20px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  text-align: left;
}

.dlc-sel-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(91, 155, 213, 0.15);
}

.dlc-sel-icon {
  font-size: 28px;
  line-height: 1;
}

.dlc-sel-card strong {
  font-size: 15px;
  color: var(--ink);
}

.dlc-sel-card > span:last-child {
  font-size: 13px;
  color: var(--muted);
}

/* Step 1 sub-views – child picker grid */
.dlc-step1-select .dlc-children-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dlc-one-pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.dlc-child-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dlc-child-pick:hover {
  border-color: var(--primary);
}

.dlc-child-pick.selected {
  border-color: var(--primary);
  background: #f0f6ff;
}

.dlc-confirm-btn {
  justify-self: start;
}

/* Step 2 – mode cards */
.dlc-sel-summary {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.dlc-sel-summary strong {
  color: var(--ink);
}

.dlc-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 560px) {
  .dlc-mode-cards {
    grid-template-columns: 1fr;
  }
}

.dlc-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.dlc-mode-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 18px rgba(91, 155, 213, 0.15);
}

.dlc-mode-recommended {
  border-top: 3px solid var(--primary);
}

.dlc-mode-badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: var(--primary);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0 0 6px 6px;
  letter-spacing: 0.03em;
}

.dlc-mode-card strong {
  font-size: 16px;
  color: var(--ink);
}

.dlc-mode-card > span:last-child {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Manual mode – accordion */
.dlc-manual {
  display: grid;
  gap: 16px;
}

.dlc-accordion {
  display: grid;
  gap: 8px;
}

.dlc-acc-item {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.dlc-acc-item.open {
  border-color: var(--primary);
}

.dlc-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  gap: 10px;
}

.dlc-acc-header:hover {
  background: #f7fafd;
}

.dlc-acc-item.open .dlc-acc-header {
  background: #f0f6ff;
}

.dlc-acc-arrow {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

.dlc-acc-body {
  padding: 16px 18px 20px;
  border-top: 1px solid var(--line);
}

.dlc-acc-form {
  display: grid;
  gap: 12px;
}

.dlc-acc-children {
  margin-bottom: 4px;
}

.dlc-manual-ai-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #f0f6ff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--ink);
  flex-wrap: wrap;
}

/* AI Input mode */
.dlc-ai-input {
  display: grid;
  gap: 16px;
}

.dlc-ai-box {
  display: grid;
  gap: 14px;
}

.dlc-ai-label {
  display: grid;
  gap: 6px;
}

.dlc-ai-label strong {
  font-size: 15px;
  color: var(--ink);
}

.dlc-ai-textarea {
  width: 100%;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.6;
}

.dlc-ai-textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.dlc-ai-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dlc-speak-btn {
  font-size: 13px;
}

.dlc-speak-status {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.dlc-organize-btn {
  justify-self: start;
}

.dlc-output-options,
.dlc-share-fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  margin: 0;
}

.dlc-output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
}

/* AI Suggestion cards */
.dlc-ai-suggestions {
  display: grid;
  gap: 16px;
}

.dlc-ai-review-note {
  margin: 0;
}

.dlc-sug-list {
  display: grid;
  gap: 14px;
}

.dlc-sug-card {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.dlc-sug-saved {
  border-color: #8bc4a8;
  background: #f4faf6;
  opacity: 0.75;
}

.dlc-sug-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}

.dlc-sug-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.dlc-sug-title {
  font-size: 15px;
  color: var(--ink);
  flex: 1;
}

.dlc-sug-saved-badge {
  font-size: 12px;
  font-weight: 700;
  color: #3d8b65;
  background: #d8f2e7;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.dlc-sug-body {
  padding: 0 16px 10px;
}

.dlc-sug-body p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 4px 0;
}

.dlc-sug-preview-text {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: #f7fafd;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.dlc-overview-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.dlc-timeline-list {
  display: grid;
  gap: 12px;
}

.dlc-timeline-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.dlc-timeline-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.dlc-timeline-content {
  display: grid;
  gap: 3px;
}

.dlc-timeline-content strong {
  font-size: 14px;
  color: var(--ink);
}

.dlc-timeline-content span {
  font-size: 13px;
  color: var(--muted);
}

.dlc-parent-summary-card {
  margin-top: 16px;
}

.dlc-parent-summary-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.dlc-parent-summary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.dlc-sug-share {
  padding: 6px 16px 10px;
}

.dlc-sug-actions {
  display: flex;
  gap: 8px;
  padding: 10px 16px 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.dlc-sug-ignore-btn {
  margin-left: auto;
  color: var(--muted);
}

.dlc-sug-save-all-row {
  display: flex;
  justify-content: flex-start;
  padding-top: 4px;
}

.dlc-sug-done {
  text-align: center;
  padding: 20px;
}

.dlc-sug-done p {
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}

/* Photo section */
.dlc-photo-section {
  display: grid;
  gap: 12px;
}

.dlc-photo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dlc-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 720px) {
  .dlc-overview-lower {
    grid-template-columns: 1fr;
  }

  .dlc-timeline-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .dlc-parent-summary-actions {
    align-items: stretch;
  }

  .dlc-parent-summary-actions .primary-button {
    width: 100%;
  }
}

.dlc-photo-btn:hover {
  border-color: var(--primary);
}

.dlc-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 0;
}

.dlc-photo-preview img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.dlc-photo-share {
  padding-top: 4px;
}

.dlc-ai-empty {
  text-align: center;
  padding: 24px;
}

/* ─── Daily Logs Dashboard ─────────────────────────────────── */

.dlc-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 0 32px;
}

.dlc-dashboard-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dlc-dashboard-date-label {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}

.dlc-date-input {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--ink);
}

/* Classroom Overview */

.dlc-classroom-overview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.dlc-overview-heading {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 12px;
  color: var(--ink);
}

.dlc-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
}

.dlc-stat-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}

.dlc-stat-card.dlc-stat-warn {
  border-color: #f5a623;
  background: #fffbf0;
}

.dlc-stat-card.dlc-stat-success {
  border-color: #27ae60;
  background: #f0fbf4;
}

.dlc-stat-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.dlc-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin: 2px 0 0;
}

.dlc-stat-label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  display: block;
  line-height: 1.2;
  margin-top: 2px;
}

/* Quick Documentation Box */

.dlc-quick-doc-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.dlc-quick-doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.dlc-quick-doc-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}

.dlc-quick-doc-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.dlc-dashboard-textarea {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
  background: var(--bg);
  color: var(--ink);
}

.dlc-dashboard-textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.dlc-speak-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.dlc-speak-btn:hover {
  background: var(--primary-light, #eef2ff);
}

.dlc-quick-doc-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.dlc-quick-doc-children {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.dlc-quick-doc-children label {
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.dlc-quick-doc-for-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

.dlc-inline-select {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}

.dlc-quick-doc-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dlc-dash-output {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* Dashboard action row */

.dlc-workflow-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dlc-workflow-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dlc-workflow-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dlc-workflow-card-future {
  background: var(--bg);
  opacity: 0.82;
}

.dlc-workflow-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dlc-workflow-step-number,
.dlc-workflow-step-tag,
.dlc-workflow-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 600;
}

.dlc-workflow-step-number {
  background: var(--primary-light, #eef2ff);
  color: var(--primary);
}

.dlc-workflow-step-tag,
.dlc-workflow-pill {
  background: var(--bg);
  color: var(--ink-muted);
  border: 1px solid var(--line);
}

.dlc-workflow-title {
  font-size: 0.98rem;
  color: var(--ink);
}

.dlc-workflow-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dlc-dashboard-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.dlc-section-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}

.dlc-dashboard-action-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Children section */

.dlc-children-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dlc-children-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.dlc-child-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Child status cards */

.dlc-child-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.15s;
}

.dlc-child-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dlc-child-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dlc-child-card-info {
  flex: 1;
  min-width: 0;
}

.dlc-child-card-info h4 {
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dlc-child-card-age {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0 0 4px;
}

.dlc-child-card-arrival {
  font-size: 0.78rem;
  color: var(--ink-muted);
}

.dlc-completion-row {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  text-align: left;
}

.dlc-completion-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
}

.dlc-completion-complete { color: #2f6b4f; }
.dlc-completion-in-progress { color: #8a6d1d; }
.dlc-completion-not-started { color: var(--muted); }

.dlc-completion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dlc-chip {
  font-size: 0.68rem;
  border-radius: 999px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
}

.dlc-chip.is-done {
  background: #e8f6ee;
  border-color: #b7dfc6;
  color: #2f6b4f;
}

.dlc-chip.is-missing {
  background: #f7f7f7;
}

.dlc-card-reminder {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: #8a6d1d;
}

/* Status badges */

.dlc-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dlc-status-not-started {
  background: #f1f3f5;
  color: #666;
}

.dlc-status-in-progress {
  background: #fff3cd;
  color: #856404;
}

.dlc-status-complete {
  background: #d4edda;
  color: #155724;
}

/* Quick action buttons on child cards */

.dlc-child-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dlc-quick-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.dlc-quick-btn:hover {
  background: var(--primary-light, #eef2ff);
  border-color: var(--primary);
}

.dlc-quick-btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.dlc-quick-btn-primary:hover {
  opacity: 0.88;
}

/* Hidden children section */

.dlc-hidden-section {
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.dlc-hidden-summary {
  font-size: 0.85rem;
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
}

.dlc-hidden-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dlc-hidden-child-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.dlc-hidden-child-row:last-child {
  border-bottom: none;
}

.dlc-hidden-child-row span {
  flex: 1;
  font-size: 0.88rem;
  color: var(--ink);
}

.dlc-unhide-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
}

/* Children page: visually dim hidden cards */

.child-card-hidden {
  opacity: 0.65;
}

/* ─── Responsive: Daily Logs Dashboard ─────────────────────── */

@media (max-width: 640px) {
  .dlc-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .dlc-child-cards-grid {
    grid-template-columns: 1fr;
  }

  .dlc-quick-doc-input-row {
    flex-direction: column;
  }

  .dlc-speak-btn {
    width: 100%;
    text-align: center;
  }

  .dlc-quick-doc-btns {
    width: 100%;
  }

  .dlc-quick-doc-btns button {
    flex: 1;
  }

  .dlc-dashboard-actions-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── End Daily Logs Dashboard ─────────────────────────────── */

.profile-info-list {
  display: grid;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.profile-info-list div {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.profile-info-list strong {
  color: var(--ink);
}

.simple-observation-list,
.simple-goal-list,
.simple-goals-list {
  display: grid;
  gap: 12px;
}

.simple-goals-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.simple-goals-list.one-column {
  grid-template-columns: 1fr;
  margin-top: 14px;
}

.goal-dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(244, 169, 122, 0.24), transparent 28%),
    linear-gradient(135deg, #f8faff, #ffffff 48%, rgba(219, 234, 247, 0.40));
  border: 1px solid rgba(91, 155, 213, 0.20);
  border-radius: 18px;
}

.goal-dashboard-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: 32px;
  line-height: 1.08;
}

.goal-dashboard-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.goal-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.goal-stat-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(26, 43, 74, 0.05);
}

.goal-stat-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  grid-row: span 2;
  place-items: center;
  color: #5b9bd5;
  background: rgba(219, 233, 220, 0.7);
  border-radius: 14px;
  font-size: 20px;
  font-weight: 900;
}

.goal-stat-card.edit > span {
  color: #a86211;
  background: #fff0c9;
}

.goal-stat-card.trend > span {
  color: #6a45d6;
  background: #f4efff;
}

.goal-stat-card.chat > span {
  color: #1e6ecf;
  background: #eaf3ff;
}

.goal-stat-card.star > span {
  color: #c73365;
  background: #ffe6ef;
}

.goal-stat-card strong {
  color: #5b9bd5;
  font-size: 25px;
  line-height: 1;
}

.goal-stat-card p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.goal-what-box {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 16px;
  color: #3a7abf;
  background: rgba(219, 234, 247, 0.55);
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: 14px;
}

.goal-what-box strong {
  flex: 0 0 auto;
}

.goal-what-box span {
  color: var(--ink);
  line-height: 1.45;
}

.todays-focus-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.todays-focus-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.todays-focus-head h3,
.todays-focus-head p,
.todays-focus-list p {
  margin: 0;
}

.todays-focus-head p {
  color: var(--muted);
}

.todays-focus-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.todays-focus-list article {
  display: grid;
  gap: 6px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.todays-focus-list article > span {
  color: #5b9bd5;
  font-size: 13px;
  font-weight: 800;
}

.todays-focus-list p {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.goal-need-picker {
  display: grid;
  gap: 14px;
}

.goal-child-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.goal-child-picker button,
.goal-area-picker button {
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

.goal-child-picker button {
  padding: 9px 12px;
  font-weight: 800;
}

.goal-child-picker button.active {
  color: #5b9bd5;
  background: rgba(219, 233, 220, 0.78);
  border-color: rgba(91, 155, 213, 0.3);
}

.goal-area-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.goal-area-picker button {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 13px;
  text-align: left;
}

.goal-area-picker button:hover {
  border-color: rgba(91, 155, 213, 0.34);
  box-shadow: 0 10px 24px rgba(66, 45, 24, 0.08);
}

.goal-area-picker strong {
  color: #5b9bd5;
}

.goal-area-picker span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.goal-dashboard-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(66, 45, 24, 0.07);
}

.goal-card-top {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(220px, 1fr) minmax(150px, auto);
  gap: 16px;
  align-items: center;
}

.goal-child-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.goal-child-summary h3,
.goal-child-summary p {
  margin: 0;
}

.goal-child-summary p,
.goal-progress-summary span,
.goal-updated span {
  color: var(--muted);
  font-size: 13px;
}

.goal-area-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: #5b9bd5;
  font-size: 13px;
  font-weight: 800;
}

.goal-area-dot::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #6a45d6;
  border-radius: 999px;
}

.goal-progress-summary {
  display: grid;
  gap: 7px;
}

.goal-progress-summary > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.goal-progress-summary .mini-progress {
  flex: 1 1 auto;
  margin: 0;
}

.goal-progress-summary strong,
.goal-updated strong {
  color: var(--ink);
}

.goal-updated {
  display: grid;
  gap: 5px;
}

.goal-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.goal-match-panel {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.goal-match-panel h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
}

.goal-match-panel p,
.goal-match-panel li {
  color: var(--ink);
  line-height: 1.45;
}

.goal-match-panel p {
  margin: 0;
}

.goal-match-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.goal-main-panel p {
  font-size: 15px;
}

.goal-empty-match,
.goal-match-note {
  color: var(--muted) !important;
  font-size: 13px;
}

.goal-observation-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(219, 233, 220, 0.62), rgba(220, 238, 245, 0.45));
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: 12px;
}

.goal-observation-strip strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
}

.goal-observation-strip p {
  margin: 4px 0 0;
  color: var(--ink);
  line-height: 1.45;
}

.goal-observation-strip > span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.goal-portfolio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.goal-portfolio-row span {
  padding: 7px 10px;
  color: #5b9bd5;
  background: rgba(220, 238, 245, 0.62);
  border: 1px solid rgba(91, 155, 213, 0.12);
  border-radius: 999px;
  font-size: 13px;
}

.goal-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.goal-ai-output {
  display: grid;
  gap: 10px;
}

.goal-ai-output:empty {
  display: none;
}

.goal-ai-output-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #f8f4ff;
  border: 1px solid rgba(106, 69, 214, 0.22);
  border-radius: 12px;
}

.goal-ai-output-inner div {
  display: grid;
  gap: 5px;
}

.goal-ai-output-inner div:first-child {
  grid-row: span 2;
}

.goal-ai-output-inner strong {
  color: #5b9bd5;
}

.goal-ai-output-inner p,
.goal-ai-output-inner ul {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.child-ai-suggestions-panel {
  display: grid;
  gap: 12px;
}

.child-ai-grid {
  background: #ffffff;
}

.simple-goal-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(26, 43, 74, 0.05);
}

.simple-goal-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.simple-goal-head h3,
.simple-goal-head p,
.simple-goal-body h4 {
  margin: 0;
}

.simple-goal-head p {
  color: var(--muted);
  font-size: 13px;
}

.simple-goal-body {
  display: grid;
  gap: 10px;
}

.simple-goal-body h4 {
  font-size: 18px;
  line-height: 1.3;
}

.goal-progress-line {
  display: grid;
  gap: 8px;
}

.goal-progress-line strong {
  color: #5b9bd5;
}

.activity-suggestion-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.activity-suggestion-list li {
  line-height: 1.35;
}

.simple-observation-card {
  display: grid;
  gap: 9px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.simple-observation-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.simple-observation-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.area-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.area-check {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 11px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 800;
}

.area-check input {
  width: 16px;
  height: 16px;
  accent-color: #6a45d6;
}

.observation-writing-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f8faff, #eef4fb);
  border: 1px solid rgba(91, 155, 213, 0.16);
  border-radius: 16px;
}

.observation-writing-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.observation-writing-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.observation-writing-head span {
  align-self: start;
  padding: 6px 9px;
  color: #5b9bd5;
  background: rgba(219, 233, 220, 0.75);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.observation-note-textarea {
  min-height: 190px;
  font-size: 16px;
}

.observation-next-step-field {
  display: grid;
  gap: 8px;
  font-weight: 800;
}

.observation-help-box,
.goal-support-box {
  padding: 16px;
  background: #f8f4ff;
  border: 1px solid rgba(106, 69, 214, 0.24);
  border-radius: var(--radius);
}

.observation-help-box p,
.goal-support-box p {
  margin: 6px 0 12px;
  color: var(--muted);
}

.observation-ideas-output {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.child-idea-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.child-idea-grid article {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.child-idea-grid p,
.child-idea-grid span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.portfolio-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.danger-link {
  color: #a33f3b;
  border-color: rgba(163, 63, 59, 0.28);
}

.portfolio-page {
  display: grid;
  gap: 22px;
}

.portfolio-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portfolio-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(219, 233, 220, 0.5));
}

.portfolio-hero img,
.portfolio-hero .child-avatar {
  width: 112px;
  height: 112px;
  border-radius: 22px;
  object-fit: cover;
}

.portfolio-hero h2 {
  margin: 0 0 8px;
  color: #5b9bd5;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
}

.portfolio-hero p {
  margin: 5px 0;
  color: var(--muted);
}

.portfolio-metric-grid,
.portfolio-detail-grid,
.portfolio-two-column,
.portfolio-resource-grid {
  display: grid;
  gap: 14px;
}

.portfolio-metric-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.portfolio-metric-grid article {
  min-width: 0;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.portfolio-metric-grid strong {
  display: block;
  color: #5b9bd5;
  font-size: 24px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.portfolio-metric-grid span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.portfolio-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-detail-grid p,
.portfolio-timeline-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.portfolio-detail-grid .wide {
  grid-column: 1 / -1;
}

.portfolio-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.portfolio-two-column h4,
.portfolio-recommendation-section h4 {
  margin: 0 0 10px;
  color: #5b9bd5;
}

.portfolio-timeline {
  display: grid;
  gap: 12px;
}

.portfolio-timeline-item {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.portfolio-timeline-item > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portfolio-timeline-item span {
  color: var(--muted);
  font-size: 13px;
}

.portfolio-recommendations {
  background: linear-gradient(135deg, rgba(255, 248, 242, 0.95), rgba(219, 233, 220, 0.42));
}

.portfolio-recommendation-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.portfolio-resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-resource-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.portfolio-resource-card strong,
.portfolio-resource-card p {
  overflow-wrap: anywhere;
}

.portfolio-resource-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.chip-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  color: #5b9bd5;
  background: rgba(219, 233, 220, 0.68);
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.elg-connection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.mini-progress {
  width: min(240px, 100%);
  height: 9px;
  margin: 8px 0;
  overflow: hidden;
  background: #efe7dc;
  border-radius: 999px;
}

.mini-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5b9bd5, #74b0e0);
  border-radius: inherit;
}

.price-card,
.locked-tool {
  padding: 22px;
}

.price-card.featured {
  border-color: rgba(91, 155, 213, 0.44);
  background: linear-gradient(180deg, var(--white), #eef4fb);
}

.price {
  margin: 14px 0;
  color: #5b9bd5;
  font-size: 42px;
  font-weight: 800;
}

.price span {
  color: var(--muted);
  font-size: 16px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(53, 47, 43, 0.42);
}

.modal.open {
  display: grid;
}

/* Auth must sit above dynamically-created resource viewer (z-index 70) and
   lesson-workspace action sheets (z-index 1200), or signup/upgrade CTAs look dead. */
#authModal {
  z-index: 1400;
}

#forcePasswordModal {
  z-index: 1500;
}

#forcePasswordModal.open {
  display: grid;
}

body.force-password-required .sidebar,
body.force-password-required .topbar,
body.force-password-required .main > *:not(#forcePasswordModal) {
  pointer-events: none;
  user-select: none;
}

body.force-password-required #forcePasswordModal,
body.force-password-required #forcePasswordModal * {
  pointer-events: auto;
  user-select: auto;
}

.force-password-card .muted-copy {
  margin: 0 0 14px;
}

#featurePreviewModal,
#proFeatureModal,
#installAppModal {
  z-index: 1300;
}

.modal-card {
  position: relative;
  width: min(460px, 100%);
  padding: 26px;
}

.modal-card .panel-form {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.pro-modal-body {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}

.pro-modal-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.pro-modal-body ol {
  margin: 0;
  padding-left: 22px;
  color: var(--ink);
  line-height: 1.55;
}

.install-instructions-grid {
  display: grid;
  gap: 12px;
}

.install-instructions-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(248, 250, 255, 0.9);
  padding: 14px 16px;
}

.install-instructions-card h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.install-instructions-card ol {
  margin: 0;
}

.close-button {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 24px;
}

@media (max-width: 1180px) {
  .resource-grid,
  .category-grid,
  .landing-stat-grid,
  .provider-needs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-stats,
  .library-stats,
  .trust-grid,
  .provider-love-grid,
  .love-stats,
  .planning-dashboard-grid,
  .recommendation-grid,
  .elg-connection-grid,
  .portfolio-metric-grid,
  .portfolio-resource-grid,
  .goal-dashboard-stats,
  .goal-card-grid,
  .goal-ai-output-inner,
  .success-story-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero,
  .two-column,
  .admin-layout,
  .admin-mobile-toolbar,
  .admin-lock-content,
  .admin-unlocked-bar,
  .account-layout,
  .planner-dashboard,
  .planner-form,
  .child-layout,
  .child-profile-grid,
  .admin-controls,
	  .admin-summary,
	  .pricing-grid,
	  .generator-grid,
	  .ai-layout,
	  .generator-panel,
	  .future-panel,
	  .founding-banner,
	  .billing-history-item,
	  .contact-intro,
	  .support-grid,
	  .preview-grid,
	  .legal-grid,
  .analytics-grid,
  .admin-owner-lists,
  .landing-story-card,
  .tracker-showcase,
  .landing-final-cta,
  .landing-start-free-cta,
  .portfolio-hero,
  .portfolio-detail-grid,
  .portfolio-two-column,
  .promo-code-panel,
  .promo-code-entry,
  .goal-card-top,
	  .onboarding-list {
	    grid-template-columns: 1fr;
	  }

  #adminLessonPlanForm .form-actions button {
    width: 100%;
  }

  .admin-vis-card-main {
    flex-direction: column;
  }

  .provider-needs-grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(213, 227, 240, 0.65);
  }

  .how-it-works-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .free-features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .provider-needs-grid article:last-child {
    border-bottom: 0;
  }

  .analytics-summary-grid,
  .admin-owner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .readiness-summary {
    grid-template-columns: 1fr;
  }

  .ai-tool-grid,
  .future-tool-grid,
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body.mobile-nav-open,
  body.auth-modal-open {
    overflow: hidden;
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(86vw, 340px);
    height: 100dvh;
    padding: 18px;
    overflow: auto;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: 16px 0 34px rgba(83, 62, 42, 0.18);
  }

  body.mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  .brand {
    display: none;
  }

  .sidebar .brand {
    display: flex;
  }

  .nav-list {
    grid-template-columns: 1fr;
    margin: 18px 0 0;
  }

  .nav-link {
    min-height: 56px;
    padding: 12px;
    line-height: 1.2;
  }

  .plan-card {
    display: none;
  }

  .topbar {
    grid-template-columns: 1fr;
    padding: 12px;
    z-index: 30;
  }

  .mobile-brand {
    display: flex;
    gap: 10px;
  }

  .mobile-menu-toggle {
    display: grid;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(53, 47, 43, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .search-wrap input,
  .panel-form input,
  .panel-form select,
  .panel-form textarea {
    width: 100%;
    min-height: 48px;
  }

  .view {
    padding: 12px;
  }

  .hero {
    padding: 22px;
  }

  .landing-founding-slot {
    margin: 0 0 8px;
  }

  .founding-hero-card {
    min-height: auto;
    gap: 7px;
    padding: 15px 12px 12px;
    border-radius: 14px;
  }

  .founding-star,
  .confetti {
    display: none;
  }

  .founding-hero-card h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.05;
    text-transform: none;
  }

  .founding-price-row {
    display: flex;
    gap: 4px;
    text-align: center;
  }

  .founding-price-prefix {
    display: none;
  }

  .founding-price-row strong {
    font-size: 39px;
  }

  .founding-price-row em {
    font-size: 15px;
    line-height: 1;
    text-align: center;
  }

  .founding-price-row em span {
    display: inline;
    font-size: inherit;
  }

  .founding-remaining {
    font-size: 15px;
    line-height: 1.15;
  }

  .founding-cta-button {
    min-height: 44px;
    min-width: 0;
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    box-shadow: 0 8px 16px rgba(217, 83, 79, 0.18);
  }

  .founding-live-meter {
    width: 100%;
    max-width: 300px;
    gap: 3px;
    margin: 0 auto;
  }

  .founding-live-meter span {
    height: 4px;
  }

  .founding-live-meter small {
    font-size: 12px;
    line-height: 1.1;
  }

  .mobile-signup-pitch {
    margin: 0 0 14px;
  }

  .mobile-signup-card {
    gap: 9px;
    padding: 14px;
    border-radius: 14px;
  }

  .mobile-signup-card h2 {
    font-size: 22px;
  }

  .mobile-signup-card p {
    font-size: 14px;
    line-height: 1.38;
  }

  .mobile-signup-card ul {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mobile-signup-card li {
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.22;
  }

  .mobile-signup-card .primary-button {
    justify-self: stretch;
    width: 100%;
    min-height: 44px;
  }

  .landing-value-strip {
    margin-top: 14px;
  }

  .landing-stat-grid,
  .how-it-works-steps,
  .free-features-grid,
  .provider-needs-grid,
  .testimonial-grid,
  .mockup-metrics {
    grid-template-columns: 1fr;
  }

  .landing-stat-grid article {
    min-height: 132px;
  }

  .landing-story-card,
  .free-plan-content,
  .how-it-works-content,
  .landing-testimonials,
  .provider-needs-section,
  .landing-final-cta,
  .landing-start-free-cta {
    padding: 18px;
  }

  .free-plan-actions .primary-button {
    width: 100%;
  }

  .provider-desk-visual {
    width: min(230px, 88vw);
  }

  .mockup-body {
    grid-template-columns: 1fr;
  }

  .mockup-body aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-panel {
    min-height: 220px;
  }

  .hero h2,
  .page-title h2 {
    font-size: 34px;
  }

  .category-grid,
  .resource-grid,
  .ai-tool-grid,
  .future-tool-grid,
  .home-stats,
  .library-stats,
  .trust-grid,
  .provider-love-grid,
  .love-stats,
  .landing-stat-grid,
  .provider-needs-grid,
  .testimonial-grid,
  .planning-dashboard-grid,
  .recommendation-grid,
  .elg-connection-grid,
  .success-story-grid,
  .analytics-summary-grid,
  .admin-owner-grid,
  .admin-owner-lists,
  .readiness-summary,
  .readiness-item,
  .billing-summary-grid,
  .security-grid {
    grid-template-columns: 1fr;
  }

  .readiness-item em {
    justify-self: start;
  }

  .lead-capture-section,
  .preview-feature,
  .ai-usage-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .output-toolbar {
    display: grid;
  }

  .output-actions {
    justify-content: stretch;
  }

  .output-actions button {
    flex: 1;
  }

  .account-actions {
    width: 100%;
  }

  body.auth-modal-open .topbar .account-actions {
    display: none;
  }

  .account-actions button {
    flex: 1;
    min-height: 48px;
  }

  .resource-actions,
  .hero-actions,
  .auth-secondary-actions,
  .account-actions-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-preview-panel {
    grid-template-columns: 1fr;
  }

  .resource-actions button,
  .resource-actions a,
  .hero-actions button,
  .auth-secondary-actions button,
  .account-actions-row button {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .modal {
    align-items: start;
    padding: 12px;
    overflow: auto;
  }

  .modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    padding: 22px;
  }

  .resource-viewer-body {
    max-height: 56vh;
    padding: 14px;
  }

  .resource-viewer-toolbar {
    display: grid;
  }

  .resource-viewer-toolbar button {
    width: 100%;
  }

  .section-block {
    padding: 18px;
  }

  .planner-summary {
    display: grid;
  }

  .planner-metrics,
  .planner-board {
    grid-template-columns: 1fr;
  }

  .planner-suggestions {
    position: static;
  }

  .child-sidebar {
    position: static;
  }

  .child-profile-header,
  .weekly-lists,
  .child-filter-row {
    grid-template-columns: 1fr;
  }

  .child-profile-actions,
  .portfolio-topbar {
    justify-content: stretch;
  }

  .child-profile-actions > *,
  .portfolio-topbar > * {
    width: 100%;
  }

  .portfolio-metric-grid,
  .portfolio-resource-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-hero img,
  .portfolio-hero .child-avatar {
    width: 88px;
    height: 88px;
  }

  .form-grid-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .child-page-header,
  .child-need-banner,
  .simple-profile-hero,
  .goal-dashboard-hero,
  .monthly-goal-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .child-page-header .primary-button,
  .child-header-actions,
  .child-header-actions > *,
  .simple-profile-hero .ghost-button {
    width: 100%;
  }

  .child-header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .need-list {
    justify-content: flex-start;
  }

  .simple-child-grid,
  .simple-goals-list,
  .child-tools-layout,
  .dlc-action-cards,
  .dlc-group-actions,
  .dlc-quick-doc-types,
  .simple-child-form,
  .simple-observation-form,
  .area-check-grid,
  .child-idea-grid,
  .attention-list,
  .focused-suggestion-list,
  .goal-dashboard-stats,
  .goal-card-grid,
  .goal-area-picker,
  .goal-observation-strip,
  .goal-card-actions,
  .goal-ai-output-inner,
  .worksheet-preview-grid,
  .profile-check-grid,
  .support-check-grid,
  .profile-support-summary,
  .todays-focus-list,
  .child-lesson-mini-grid,
  .support-category-grid,
  .support-topic-grid,
  .support-topic-hero,
  .support-simple-card-grid,
  .support-resource-mini-grid,
  .support-ai-grid,
  .profile-info-list div {
    grid-template-columns: 1fr;
  }

  .goal-dashboard-hero .primary-button,
  .goal-observation-strip .primary-button,
  .profile-hero-actions > *,
  .todays-focus-head .ghost-button,
  .support-ai-card .primary-button {
    width: 100%;
  }

  .profile-hero-actions,
  .todays-focus-head,
  .child-lesson-context > div,
  .child-ai-context,
  .support-child-shortcuts,
  .support-ai-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .goal-observation-strip > span {
    white-space: normal;
  }

  .simple-profile-tabs {
    overflow-x: auto;
  }

  .child-tools-side {
    position: static;
  }

  .simple-child-card {
    min-height: 0;
  }

  .child-card-actions,
  .quick-action-list,
  .observation-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .child-card-actions > *,
  .quick-action-list > *,
  .observation-card-actions > * {
    width: 100%;
  }

  .observation-writing-head {
    display: grid;
  }

  .observation-writing-head span {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .nav-list {
    grid-template-columns: 1fr;
  }

  .account-actions {
    gap: 8px;
  }

  .hero h2,
  .page-title h2 {
    font-size: 30px;
  }

  .free-feature-card p {
    font-size: 14px;
  }

  .mini-window {
    width: 92%;
  }

  .child-page-header h2,
  .simple-profile-hero h2 {
    font-size: 26px;
  }

  .simple-child-avatar {
    width: 62px;
    height: 62px;
    border-radius: 16px;
  }
}

@page {
  margin: 0.5in;
}

@media print {
  html,
  body {
    width: auto !important;
    min-height: auto !important;
    color: #111 !important;
    background: #fff !important;
  }

  body.printing-resource .app-shell,
  body.printing-resource .mobile-nav-backdrop,
  body.printing-resource .modal:not(#resourceViewerModal) {
    display: none !important;
  }

  body.printing-calendar-plan .app-shell,
  body.printing-calendar-plan .mobile-nav-backdrop,
  body.printing-calendar-plan .modal {
    display: none !important;
  }

  body.printing-calendar-plan .llh-calendar-print-host {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111 !important;
    background: #fff !important;
  }

  body.printing-resource #resourceViewerModal {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body.printing-resource #resourceViewerModal .modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #111 !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.printing-resource .close-button,
  body.printing-resource .resource-viewer-toolbar {
    display: none !important;
  }

  body.printing-resource #resourceViewerCategory {
    margin: 0 0 4px !important;
    color: #555 !important;
  }

  body.printing-resource #resourceViewerTitle {
    margin: 0 0 10px !important;
    color: #111 !important;
    font-size: 24pt !important;
    line-height: 1.15 !important;
  }

  body.printing-resource #resourceViewerTags {
    margin-bottom: 14px !important;
  }

  body.printing-resource .tag {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
  }

  body.printing-resource .resource-viewer-body {
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #111 !important;
    background: #fff !important;
    border: 0 !important;
  }

  body.printing-resource .printable-resource-page {
    color: #111 !important;
    background: #fff !important;
  }

  body.printing-resource .print-section {
    margin: 0 0 12pt !important;
    padding: 0 0 10pt !important;
    color: #111 !important;
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.printing-resource .print-section h3 {
    margin: 0 0 6pt !important;
    color: #111 !important;
    font-size: 14pt !important;
  }

  body.printing-resource .print-section p,
  body.printing-resource .printable-list li {
    color: #111 !important;
    font-size: 10.5pt !important;
    line-height: 1.35 !important;
  }

  body.printing-resource .printable-writing-line,
  body.printing-resource .printable-field-row {
    min-height: 20pt !important;
  }

  body.printing-resource .printable-writing-line {
    border-bottom: 1px solid #111 !important;
  }

  body.printing-resource .printable-checkbox span {
    border-color: #111 !important;
  }

  body.printing-resource .worksheet-preview-page {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body.printing-resource .worksheet-preview-header {
    color: #111 !important;
    border-bottom-color: #111 !important;
  }

  body.printing-resource .worksheet-preview-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  body.printing-resource .worksheet-preview-panel,
  body.printing-resource .worksheet-preview-practice {
    background: #fff !important;
    border-color: #111 !important;
  }

  body.printing-resource .worksheet-dotted-row i,
  body.printing-resource .worksheet-line-row,
  body.printing-resource .worksheet-cut-row b,
  body.printing-resource .worksheet-preview-footer span {
    color: #111 !important;
    border-color: #111 !important;
    background: #fff !important;
  }

  body.printing-resource .worksheet-cartoon-scene {
    background: #fff !important;
    border-color: #111 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  body.printing-resource .worksheet-cartoon-scene .cartoon-line {
    stroke: #111 !important;
  }

  body.printing-resource .worksheet-cartoon-scene .worksheet-caption {
    fill: #111 !important;
  }

  body.printing-resource .resource-viewer-image {
    max-width: 100% !important;
    max-height: 9in !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* ==========================================================
   REDESIGNED LANDING PAGE — Little Learner Hub
   Soft lavender + mint green palette, modern SaaS layout
   ========================================================== */

/* --- Section spacing ---------------------------------------- */
.lp-hero,
.lp-trust-section,
.lp-feature-showcase,
.lp-home-journey,
.lp-pricing-section,
.lp-why-section,
.lp-reviews-section,
.lp-founder-section,
.lp-final-cta {
  margin-top: 28px;
}

.lp-mid-cta {
  margin-top: 8px;
  padding: 28px 24px;
  background:
    linear-gradient(135deg, rgba(219, 234, 247, 0.72), rgba(255, 255, 255, 0.96)),
    radial-gradient(circle at top right, rgba(91, 155, 213, 0.16), transparent 48%);
  border: 1px solid rgba(91, 155, 213, 0.22);
  border-radius: 24px;
  text-align: center;
}

.lp-mid-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.lp-mid-cta h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--ink);
}

.lp-mid-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 46ch;
}

.lp-mid-cta .lp-btn-primary {
  margin-top: 4px;
  min-width: min(100%, 320px);
}

/* Hide landing signup CTAs once the visitor is already signed in */
body.user-authenticated .lp-hero-actions [data-action="start-free"],
body.user-authenticated .lp-hero-cta-note,
body.user-authenticated .lp-mid-cta,
body.user-authenticated .lp-final-cta [data-action="start-free"] {
  display: none;
}

/* --- Landing page buttons ----------------------------------- */
.lp-btn-primary {
  min-height: 50px;
  padding: 13px 30px;
  background: linear-gradient(135deg, var(--lavender-dark), var(--lavender));
  color: var(--white);
  border: none;
  border-radius: 14px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(123, 95, 232, 0.32);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.lp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(123, 95, 232, 0.42);
}

.lp-btn-secondary {
  min-height: 50px;
  padding: 13px 30px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lp-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--lavender);
  box-shadow: 0 8px 20px rgba(26, 43, 74, 0.07);
}

.lp-btn-outline {
  min-height: 50px;
  padding: 13px 30px;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.16s ease, background 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lp-btn-outline:hover {
  border-color: var(--sage-dark);
  background: rgba(91, 155, 213, 0.05);
}

.lp-btn-large {
  min-height: 58px;
  padding: 16px 44px;
  font-size: 18px;
  border-radius: 16px;
}

/* --- Section title / subtitle ------------------------------- */
.lp-section-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.5vw, 40px);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lp-section-sub {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.55;
}

.lp-section-header {
  text-align: center;
  margin-bottom: 40px;
}

/* ==========================================================
   PHASE 1 — HERO SECTION
   ========================================================== */
.lp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 56px 48px;
  background: linear-gradient(135deg, #eef4fb 0%, #ede8ff 55%, #dbeaf7 100%);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(123, 95, 232, 0.08);
  border: 1px solid rgba(157, 133, 255, 0.12);
}

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 18px;
  background: var(--lavender-soft);
  color: var(--lavender-dark);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  border: 1px solid rgba(123, 95, 232, 0.22);
}

.lp-hero-headline {
  margin: 0 0 18px;
  font-size: clamp(32px, 4.5vw, 50px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.lp-hero-sub {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
}

.lp-hero-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}

.lp-hero-benefits li {
  font-size: 15px;
  font-weight: 700;
  color: #3a7abf;
}

.lp-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: center;
}

.lp-hero-cta-note {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 700;
  color: #3a7abf;
}

.lp-social-proof {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lp-avatars {
  display: flex;
  flex-shrink: 0;
}

.lp-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--mint));
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--white);
  margin-right: -9px;
  flex-shrink: 0;
}

.lp-social-proof p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 210px;
  line-height: 1.4;
  padding-left: 9px;
}

/* Dashboard Mockup */
.lp-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-dashboard-mockup {
  width: 100%;
  max-width: 620px;
  background: var(--white);
  border-radius: 20px;
  box-shadow:
    0 38px 96px rgba(123, 95, 232, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(157, 133, 255, 0.14);
}

.lp-dash-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #5b9bd5, #4a87c8);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}

.lp-dash-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  flex-shrink: 0;
}

.lp-dash-body {
  display: grid;
  grid-template-columns: 120px 1fr;
  min-height: 360px;
}

.lp-dash-sidebar {
  background: #f5f8fd;
  padding: 14px 8px;
  border-right: 1px solid #d5e3f0;
  display: grid;
  gap: 5px;
  align-content: start;
}

.lp-dash-nav-item {
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #536280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-dash-nav-item.active {
  background: linear-gradient(135deg, #5b9bd5, #4a87c8);
  color: var(--white);
}

.lp-dash-main {
  padding: 18px;
  background: #f8faff;
  display: grid;
  gap: 12px;
  align-content: start;
}

.lp-dash-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-dash-pill-row span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(91, 155, 213, 0.12);
  color: #3a7abf;
  font-size: 10px;
  font-weight: 700;
}

.lp-dash-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.lp-dash-stat {
  padding: 8px 6px;
  background: var(--white);
  border-radius: 8px;
  text-align: center;
  border: 1px solid #d5e3f0;
}

.lp-dash-stat strong {
  display: block;
  font-size: 20px;
  color: #5b9bd5;
  line-height: 1;
}

.lp-dash-stat span {
  font-size: 11px;
  color: #536280;
  line-height: 1.3;
  display: block;
  margin-top: 2px;
}

.lp-hero-testimonials {
  padding: 36px 44px;
  background: var(--white);
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(26, 43, 74, 0.05);
}

.lp-hero-testimonials-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.lp-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lp-proof-card {
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid rgba(157, 133, 255, 0.2);
  background: linear-gradient(135deg, rgba(157, 133, 255, 0.08), rgba(77, 212, 168, 0.08) 70%, var(--white));
}

.lp-proof-card strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
}

.lp-proof-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.lp-hero-testimonial-card {
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid rgba(157, 133, 255, 0.28);
  background: linear-gradient(135deg, rgba(157, 133, 255, 0.12), rgba(77, 212, 168, 0.12) 70%, var(--white));
}

.lp-hero-testimonial-card p {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
}

.lp-hero-testimonial-card strong {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}

.lp-hero-testimonial-card span {
  color: var(--muted);
  font-size: 13px;
}

.lp-dash-card {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid #d5e3f0;
  padding: 10px;
}

.lp-dash-card-title {
  font-size: 10px;
  font-weight: 800;
  color: #5b9bd5;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.lp-dash-obs-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 0;
  border-top: 1px solid #d5e3f0;
}

.lp-obs-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--mint));
  color: var(--white);
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lp-dash-obs-item div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lp-dash-obs-item strong {
  font-size: 11px;
  color: #1a2b4a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.lp-dash-obs-item small {
  font-size: 10px;
  color: #536280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.lp-dash-ai-banner {
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--lavender-soft), var(--mint-soft));
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--lavender-dark);
  text-align: center;
}

/* ==========================================================
   PHASE 2 — TRUST SECTION
   ========================================================== */
.lp-trust-section {
  padding: 48px 44px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(26, 43, 74, 0.05);
  border: 1px solid var(--line);
  text-align: center;
}

.lp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 36px;
}

.lp-trust-item {
  padding: 22px 14px;
  background: linear-gradient(135deg, var(--cream), var(--accent-soft));
  border-radius: 16px;
  border: 1px solid rgba(77, 212, 168, 0.22);
  display: grid;
  gap: 8px;
  justify-items: center;
}

.lp-trust-icon {
  font-size: 28px;
  line-height: 1;
}

.lp-trust-item strong {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  text-align: center;
}

.lp-testimonial-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}

.lp-testimonial-mini-card {
  padding: 22px 20px;
  background: linear-gradient(135deg, var(--cream), var(--white));
  border-radius: 16px;
  border: 1px solid var(--line);
}

.lp-testimonial-mini-card.featured {
  grid-column: 1 / -1;
  padding: 28px 24px;
  background: linear-gradient(135deg, rgba(157, 133, 255, 0.12), rgba(77, 212, 168, 0.12) 70%, var(--white));
  border-color: rgba(157, 133, 255, 0.28);
  box-shadow: 0 14px 34px rgba(26, 43, 74, 0.07);
}

.lp-mini-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--mint));
  color: var(--white);
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.lp-mini-stars {
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.lp-testimonial-mini-card p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  font-style: italic;
}

.lp-testimonial-mini-card strong {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

.lp-testimonial-mini-card span {
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================
   PHASE 3 — FEATURE SHOWCASE
   ========================================================== */
.lp-feature-section {
  padding: 56px 44px;
  background: linear-gradient(135deg, var(--lavender-soft), var(--primary-light) 60%, #f8faff);
  border-radius: 24px;
  border: 1px solid rgba(157, 133, 255, 0.1);
}

.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-feature-card {
  padding: 28px 24px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(26, 43, 74, 0.05);
  border: 1px solid rgba(157, 133, 255, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-feature-card[data-preview] {
  cursor: pointer;
}

.lp-feature-card:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, #ffffff, #faf7ff);
  border-color: rgba(123, 95, 232, 0.26);
  box-shadow: 0 16px 40px rgba(123, 95, 232, 0.12);
}

.lp-feature-card[data-preview]:focus-visible {
  outline: 3px solid rgba(123, 95, 232, 0.34);
  outline-offset: 4px;
}

.lp-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.lp-icon-purple { background: var(--lavender-soft); }
.lp-icon-mint   { background: var(--mint-soft); }
.lp-icon-gold   { background: #fff3e0; }

.lp-feature-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  color: var(--ink);
}

.lp-feature-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.lp-feature-card-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 8px 12px;
  color: var(--lavender-dark);
  background: rgba(237, 232, 255, 0.72);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.lp-pro-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: var(--white);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
  margin-left: 4px;
}

/* ==========================================================
   FEATURE SHOWCASE SECTION — "What Can I Actually Do"
   ========================================================== */
.lp-feature-showcase {
  margin-top: 28px;
  padding: 64px 44px;
  background: linear-gradient(160deg, #f5f3ff 0%, #eef4fb 50%, #f8faff 100%);
  border-radius: 24px;
  border: 1px solid rgba(157, 133, 255, 0.12);
}

.lp-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.lp-showcase-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(83, 62, 42, 0.09);
  border: 1px solid rgba(157, 133, 255, 0.12);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
}

.lp-showcase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(123, 95, 232, 0.14);
  border-color: rgba(123, 95, 232, 0.28);
}

.lp-showcase-card:focus-visible {
  outline: 3px solid rgba(123, 95, 232, 0.4);
  outline-offset: 4px;
}

/* The "screenshot" mockup area */
.lp-showcase-screen {
  background: #f0ecff;
  border-bottom: 1px solid rgba(157, 133, 255, 0.14);
  font-size: 11.5px;
  color: var(--ink);
  flex-shrink: 0;
}

.lp-sc-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  background: #e8e2ff;
  border-bottom: 1px solid rgba(157, 133, 255, 0.18);
}

.lp-sc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(123, 95, 232, 0.28);
  flex-shrink: 0;
}

.lp-sc-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--lavender-dark);
  margin-left: 6px;
  letter-spacing: 0.01em;
}

.lp-sc-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-sc-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.lp-sc-stat {
  background: var(--white);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid rgba(157, 133, 255, 0.16);
}

.lp-sc-stat strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--lavender-dark);
  line-height: 1.2;
}

.lp-sc-stat span {
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}

.lp-sc-card {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid rgba(157, 133, 255, 0.16);
  overflow: hidden;
}

.lp-sc-card-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--lavender-dark);
  background: rgba(237, 232, 255, 0.5);
  padding: 7px 12px;
  border-bottom: 1px solid rgba(157, 133, 255, 0.14);
  letter-spacing: 0.01em;
}

.lp-sc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(157, 133, 255, 0.08);
}

.lp-sc-row:last-child { border-bottom: 0; }

.lp-sc-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lavender-soft);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--lavender-dark);
  flex-shrink: 0;
}

.lp-sc-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.lp-sc-row strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.lp-sc-row small,
.lp-sc-row div small {
  font-size: 10px;
  color: var(--muted);
}

.lp-sc-row div {
  flex: 1;
  min-width: 0;
}

.lp-sc-tag {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  background: var(--mint-soft);
  color: #5b9bd5;
}

.lp-sc-tag-purple { background: var(--lavender-soft); color: var(--lavender-dark); }
.lp-sc-tag-gold   { background: #fff3e0; color: #b45309; }

.lp-sc-card-detail {
  font-size: 10.5px;
}

.lp-sc-field {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 4px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(157, 133, 255, 0.08);
  align-items: start;
}

.lp-sc-field:last-child { border-bottom: 0; }

.lp-sc-field label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 1px;
}

.lp-sc-field span {
  font-size: 10.5px;
  color: var(--ink);
  font-weight: 500;
}

.lp-sc-progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(157, 133, 255, 0.08);
}

.lp-sc-progress:last-child { border-bottom: 0; }

.lp-sc-progress label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lp-sc-bar-wrap {
  height: 6px;
  background: rgba(157, 133, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.lp-sc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--lavender-dark), var(--lavender));
  border-radius: 999px;
}

.lp-sc-ai-output p {
  padding: 8px 12px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Card text info below screenshot */
.lp-showcase-info {
  padding: 20px 24px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.lp-showcase-info h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.lp-showcase-info p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
}

.lp-showcase-btn {
  align-self: flex-start;
  padding: 9px 18px;
  background: linear-gradient(135deg, var(--lavender-dark), var(--lavender));
  color: var(--white);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s;
  pointer-events: none; /* card is the clickable element */
}

.lp-showcase-card:hover .lp-showcase-btn {
  opacity: 0.9;
}

.lp-home-journey {
  padding: 52px 44px;
  background: var(--white);
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(26, 43, 74, 0.05);
}

.lp-home-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.lp-journey-card {
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f8faff, #f5f3ff 60%, #eef4fb);
  border: 1px solid rgba(157, 133, 255, 0.14);
}

.lp-journey-card h3 {
  margin: 0 0 18px;
  font-size: 22px;
  color: var(--ink);
}

.lp-how-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.lp-step-card {
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid rgba(157, 133, 255, 0.16);
}

.lp-step-card span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--lavender-dark), var(--lavender));
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
}

.lp-step-card strong {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

.lp-coming-soon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-coming-soon-list span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid rgba(77, 212, 168, 0.24);
  color: #3a7abf;
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================
   PHASE 4 — FREE VS PRO PRICING
   ========================================================== */
.lp-pricing-section {
  padding: 56px 44px;
  text-align: center;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(26, 43, 74, 0.05);
  border: 1px solid var(--line);
}

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.lp-pricing-card {
  padding: 36px 32px;
  border-radius: 22px;
  text-align: left;
  position: relative;
}

.lp-free-card {
  background: linear-gradient(135deg, var(--cream), #f9fffe);
  border: 2px solid var(--line);
}

.lp-pro-card {
  background: linear-gradient(135deg, var(--lavender-soft), #dbeaf7);
  border: 2px solid var(--lavender);
  box-shadow: 0 16px 48px rgba(123, 95, 232, 0.15);
}

.lp-pro-highlight-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 18px;
  background: linear-gradient(135deg, var(--lavender-dark), var(--lavender));
  color: var(--white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(123, 95, 232, 0.3);
}

.lp-price-header h3 {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--ink);
}

.lp-price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 24px;
}

.lp-price-amount strong {
  font-size: 48px;
  color: var(--ink);
  line-height: 1;
}

.lp-price-amount span {
  font-size: 16px;
  color: var(--muted);
}

.lp-price-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 10px;
}

.lp-price-features li {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}

.lp-pro-card .lp-btn-primary {
  width: 100%;
}

.lp-price-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* ==========================================================
   PHASE 5 — WHY PROVIDERS LOVE IT
   ========================================================== */
.lp-why-section {
  padding: 56px 44px;
  background: linear-gradient(135deg, var(--mint-soft), var(--cream) 60%);
  border-radius: 24px;
  border: 1px solid rgba(77, 212, 168, 0.16);
  text-align: center;
}

.lp-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
  text-align: left;
}

.lp-why-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(77, 212, 168, 0.28);
  background: rgba(255, 255, 255, 0.72);
}

.lp-why-icon {
  font-size: 26px;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(26, 43, 74, 0.06);
}

.lp-why-item strong {
  display: block;
  font-size: 18px;
  margin-bottom: 0;
  color: var(--ink);
}

.lp-why-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================
   PHASE 6 — TESTIMONIAL / REVIEW SECTION
   ========================================================== */
.lp-reviews-section {
  padding: 56px 44px;
  background: var(--white);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(26, 43, 74, 0.05);
  border: 1px solid var(--line);
  text-align: center;
}

.lp-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 36px;
}

.lp-review-card {
  padding: 28px 24px;
  background: linear-gradient(135deg, var(--cream), var(--white));
  border-radius: 18px;
  border: 1px solid var(--line);
  text-align: left;
}

.lp-review-card.featured {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(157, 133, 255, 0.12), rgba(77, 212, 168, 0.12) 70%, var(--white));
  border-color: rgba(157, 133, 255, 0.28);
  box-shadow: 0 16px 36px rgba(26, 43, 74, 0.07);
}

.lp-review-stars {
  font-size: 18px;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.lp-review-card p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  font-style: italic;
}

.lp-reviewer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-reviewer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--mint));
  color: var(--white);
  font-size: 16px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.lp-reviewer strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 2px;
}

.lp-reviewer small {
  font-size: 12px;
  color: var(--muted);
}

/* ==========================================================
   PHASE 7 — FOUNDER STORY
   ========================================================== */
.lp-founder-section {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 56px 52px;
  background: linear-gradient(135deg, var(--lavender-soft), var(--cream) 60%);
  border-radius: 24px;
  border: 1px solid rgba(157, 133, 255, 0.14);
}

.lp-founder-photo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-founder-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lavender), var(--mint));
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 20px 50px rgba(123, 95, 232, 0.2);
  border: 5px solid var(--white);
  flex-shrink: 0;
}

.lp-founder-photo-img {
  object-fit: cover;
  object-position: center top;
}

.lp-founder-content h2 {
  margin: 0 0 20px;
  font-size: clamp(26px, 3.5vw, 36px);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.lp-founder-content p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
}

.lp-founder-content p:last-of-type {
  margin-bottom: 0;
}

.lp-founder-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.lp-founder-links:empty {
  display: none;
}

.lp-founder-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lavender-dark, #6b3fa0);
  text-decoration: none;
  padding: 6px 14px;
  border: 1.5px solid rgba(107, 63, 160, 0.25);
  border-radius: 20px;
  transition: background 0.18s, border-color 0.18s;
}

.lp-founder-link:hover {
  background: rgba(107, 63, 160, 0.07);
  border-color: rgba(107, 63, 160, 0.5);
}

.admin-founder-photo-preview {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--lavender, #9d85ff);
  margin-bottom: 12px;
}

.admin-founder-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--surface-2, #f3f0ff);
  color: var(--ink-muted, #888);
  font-size: 13px;
  border: 2px dashed var(--lavender, #9d85ff);
  margin-bottom: 12px;
  text-align: center;
  padding: 12px;
}

/* ==========================================================
   PHASE 8 — FINAL CTA
   ========================================================== */
.lp-final-cta {
  padding: 72px 48px;
  background: linear-gradient(135deg, var(--lavender-dark), var(--lavender) 50%, var(--mint-dark));
  border-radius: 26px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(123, 95, 232, 0.22);
}

.lp-final-cta h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lp-final-cta .lp-cta-body {
  margin: 0 auto 32px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 500px;
  line-height: 1.6;
}

.lp-final-cta .lp-btn-primary {
  background: var(--white);
  color: var(--lavender-dark);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  border: none;
}

.lp-final-cta .lp-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.lp-cta-subtext {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.feature-preview-card {
  width: min(980px, 100%);
  padding: 26px;
}

#featurePreviewBody {
  margin-top: 18px;
  max-height: min(70vh, 640px);
  overflow: auto;
}

.fp-locked-day {
  margin: 0 0 10px;
}

.fp-locked-day strong {
  display: block;
  margin-bottom: 4px;
}

.fp-locked-activity-list,
.fp-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.fp-locked-activity-list li,
.fp-preview-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line, #dfe7f0);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

.fp-lock-icon {
  flex: 0 0 auto;
  line-height: 1.35;
}

.fp-locked-note {
  margin-top: 10px;
}

.feature-preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 860px);
}

#featurePreviewBody {
  flex: 1 1 auto;
  min-height: 0;
}

.fp-pro-upgrade-card {
  margin-top: 1.25rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(91, 155, 213, 0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.fp-pro-upgrade-eyebrow,
.fp-founding-offer-eyebrow {
  margin: 0 0 0.35rem;
  font-weight: 700;
  color: var(--ink, #1a2b4a);
}

.fp-pro-upgrade-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.fp-pro-upgrade-benefits {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.fp-pro-upgrade-benefits li {
  line-height: 1.4;
}

.fp-founding-offer {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #dfe7f0);
}

.fp-founding-regular-price {
  margin: 0.75rem 0 0;
  color: var(--muted, #536280);
}

.fp-founding-regular-price span {
  text-decoration: line-through;
}

.fp-pro-upgrade-actions {
  margin-top: 1rem;
  justify-content: flex-start;
}

.fp-pro-upgrade-note {
  margin: 0.65rem 0 0;
}

.fp-sticky-upgrade {
  display: none;
}

.fp-has-sticky-upgrade .fp-sticky-upgrade {
  display: flex;
  position: sticky;
  bottom: 0;
  z-index: 3;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin: 0 -26px -26px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, #dfe7f0);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px rgba(26, 43, 74, 0.08);
}

.fp-sticky-upgrade[hidden] {
  display: none !important;
}

.fp-sticky-upgrade-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.fp-sticky-upgrade-copy strong {
  font-size: 0.95rem;
}

.fp-sticky-upgrade-copy span {
  font-size: 0.8rem;
  color: var(--muted, #536280);
}

.fp-sticky-upgrade .primary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  .fp-has-sticky-upgrade .fp-sticky-upgrade {
    display: none;
  }
}

@media (max-width: 1100px) {
  .fp-has-sticky-upgrade #featurePreviewBody {
    max-height: none;
    padding-bottom: 0.5rem;
  }

  .fp-has-sticky-upgrade .fp-pro-upgrade-actions {
    display: none;
  }
}

.fp-screen {
  overflow: hidden;
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
  border: 1px solid rgba(91, 155, 213, 0.18);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.fp-screen-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #3a7abf, #5b9bd5 55%, #8b6be8);
  color: rgba(255, 255, 255, 0.92);
}

.fp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.fp-screen-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-screen-body {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  min-height: 420px;
}

.fp-sidebar {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px 14px;
  background: #f5f8fd;
  border-right: 1px solid rgba(213, 227, 240, 0.88);
}

.fp-nav {
  padding: 11px 12px;
  color: #536280;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(213, 227, 240, 0.88);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}

.fp-nav.active {
  color: var(--white);
  background: linear-gradient(135deg, var(--lavender-dark), var(--lavender));
  border-color: rgba(123, 95, 232, 0.35);
  box-shadow: 0 10px 20px rgba(123, 95, 232, 0.18);
}

.fp-main {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
}

.fp-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fp-stat,
.fp-card,
.fp-field-value,
.fp-ai-output {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(234, 220, 201, 0.92);
  border-radius: 16px;
}

.fp-stat {
  padding: 14px 12px;
  text-align: center;
}

.fp-stat strong {
  display: block;
  color: #3a7abf;
  font-size: 22px;
  line-height: 1;
}

.fp-stat span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.fp-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  box-shadow: 0 10px 24px rgba(26, 43, 74, 0.05);
}

.fp-card-title {
  color: #3a7abf;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fp-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  color: var(--ink);
}

.fp-row small,
.fp-desc {
  color: var(--muted);
  line-height: 1.5;
}

.fp-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--white);
  background: linear-gradient(135deg, var(--lavender), var(--mint));
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.fp-tag {
  align-self: start;
  padding: 6px 10px;
  color: #3a7abf;
  background: rgba(219, 234, 247, 0.8);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.fp-tag.purple {
  color: var(--lavender-dark);
  background: rgba(237, 232, 255, 0.92);
}

.fp-tag.gold {
  color: #b56617;
  background: rgba(255, 243, 224, 0.95);
}

.fp-field {
  display: grid;
  gap: 6px;
}

.fp-field label {
  color: #536280;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fp-field-value,
.fp-ai-output {
  padding: 12px 14px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.fp-progress-bar-wrap {
  overflow: hidden;
  height: 12px;
  background: #d5e3f0;
  border-radius: 999px;
}

.fp-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--lavender-dark), var(--mint));
}

/* ==========================================================
   RESPONSIVE — TABLET (≤ 960px)
   ========================================================== */
@media (max-width: 960px) {
  .lp-hero {
    grid-template-columns: 1fr;
    padding: 40px 28px;
  }

  .lp-trust-section,
  .lp-hero-testimonials,
  .lp-feature-showcase,
  .lp-home-journey,
  .lp-pricing-section,
  .lp-why-section,
  .lp-reviews-section,
  .lp-founder-section,
  .lp-final-cta {
    padding: 40px 28px;
  }

  .lp-proof-grid,
  .lp-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-why-grid {
    grid-template-columns: 1fr;
  }

  .lp-testimonial-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-showcase-grid {
    grid-template-columns: 1fr;
  }

  .lp-home-journey-grid,
  .lp-how-grid {
    grid-template-columns: 1fr;
  }

  .lp-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .lp-why-grid {
    grid-template-columns: 1fr;
  }

  .lp-reviews-grid {
    grid-template-columns: 1fr;
  }

  .lp-founder-section {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ==========================================================
   RESPONSIVE — MOBILE (≤ 600px)
   ========================================================== */
@media (max-width: 600px) {
  body.home-view .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 14px;
  }

  body.home-view .topbar .search-wrap {
    display: none;
  }

  body.home-view .mobile-brand strong {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    line-height: 1.1;
  }

  body.home-view .account-actions {
    width: auto;
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* Keep Sign Up visible above the fold on mobile — this was previously hidden */
  body.home-view #signupButton {
    display: inline-flex;
    font-weight: 800;
    min-width: 96px;
    box-shadow: 0 6px 16px rgba(91, 155, 213, 0.28);
  }

  body.home-view #signinButton {
    min-width: 72px;
    padding-inline: 12px;
  }

  body.home-view .account-actions button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 14px;
  }

  .lp-hero-cta-note {
    text-align: center;
  }

  .lp-mid-cta {
    padding: 24px 16px;
    border-radius: 18px;
  }

  .lp-mid-cta .lp-btn-primary {
    width: 100%;
  }

  .lp-hero,
  .lp-trust-section,
  .lp-hero-testimonials,
  .lp-mid-cta,
  .lp-feature-showcase,
  .lp-home-journey,
  .lp-pricing-section,
  .lp-why-section,
  .lp-reviews-section,
  .lp-founder-section,
  .lp-final-cta {
    padding: 30px 18px;
    border-radius: 16px;
  }

  .lp-showcase-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .lp-proof-grid,
  .lp-trust-grid,
  .lp-home-journey-grid,
  .lp-how-grid {
    grid-template-columns: 1fr;
  }

  .lp-section-header {
    margin-bottom: 24px;
    text-align: left;
  }

  .lp-section-sub,
  .lp-founder-content p,
  .lp-final-cta .lp-cta-body {
    font-size: 16px;
    line-height: 1.55;
  }

  .lp-hero-headline {
    font-size: clamp(30px, 10vw, 38px);
  }

  .lp-hero-sub {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.55;
  }

  .lp-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-social-proof {
    align-items: flex-start;
  }

  .lp-social-proof p {
    max-width: none;
  }

  .lp-btn-primary,
  .lp-btn-secondary {
    width: 100%;
  }

  .lp-btn-large {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 16px;
  }

  .lp-final-cta h2 {
    font-size: 26px;
  }

  .lp-founder-section {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .lp-journey-card {
    padding: 22px 18px;
  }

  .lp-coming-soon-list span {
    width: 100%;
    justify-content: center;
  }

  .lp-dashboard-mockup {
    max-width: none;
  }

  .lp-dash-body {
    grid-template-columns: 1fr;
    min-height: 260px;
  }

  .lp-dash-main {
    padding: 12px;
  }

  .lp-dash-sidebar {
    display: none;
  }

  .lp-dash-stat strong {
    font-size: 16px;
  }

  .lp-feature-card,
  .lp-pricing-card,
  .lp-review-card {
    padding: 22px 18px;
  }

  .lp-founder-photo {
    width: 120px;
    height: 120px;
    font-size: 26px;
  }

  .feature-preview-card {
    padding: 18px;
  }

  .fp-screen-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .fp-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(234, 220, 201, 0.88);
  }

  .fp-main {
    padding: 14px;
  }

  .fp-card {
    padding: 14px;
  }

  .fp-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .fp-row > :last-child.fp-tag {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 420px) {
  body.home-view .mobile-brand {
    gap: 8px;
  }

  body.home-view .mobile-brand strong {
    font-size: 14px;
    line-height: 1.1;
  }

  .lp-hero {
    gap: 24px;
    padding: 26px 16px;
  }

  .lp-trust-section,
  .lp-hero-testimonials,
  .lp-feature-showcase,
  .lp-home-journey,
  .lp-pricing-section,
  .lp-why-section,
  .lp-reviews-section,
  .lp-founder-section,
  .lp-final-cta {
    padding: 26px 16px;
  }

  .lp-dashboard-mockup {
    border-radius: 16px;
  }

  .lp-dash-body {
    grid-template-columns: 1fr;
  }

  .lp-dash-sidebar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid #d5e3f0;
  }

  .lp-dash-nav-item {
    text-align: center;
  }

  .fp-screen-bar,
  .fp-main,
  .fp-sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .fp-stat-row {
    grid-template-columns: 1fr;
  }
}

/* ─── User Dashboard ─────────────────────────────────────────────────────── */

.user-dashboard {
  max-width: 900px;
  padding: 0 0 48px;
}

.dashboard-welcome {
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  margin-bottom: 24px;
}

.dashboard-welcome h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 4px;
}

.dashboard-date {
  color: var(--text-muted, #6b7280);
  font-size: 0.9rem;
  margin: 0;
}

.dashboard-quick-doc {
  background: linear-gradient(135deg, var(--accent-light, #eff6ff) 0%, var(--bg-card, #fff) 100%);
  border: 1px solid var(--accent, #5b9bd5);
  border-radius: 12px;
  margin-bottom: 20px;
}

.platform-install-card-host:empty,
.platform-install-card-host[hidden] {
  display: none;
}

.platform-install-card-host {
  margin: 0 0 12px;
}

.dashboard-install-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, rgba(91, 155, 213, 0.12) 0%, rgba(139, 124, 246, 0.08) 100%);
  border: 1px solid rgba(91, 155, 213, 0.35);
  margin-bottom: 20px;
}

.dashboard-install-copy h3 {
  margin: 0 0 6px;
}

.dashboard-install-copy p:last-child {
  margin-bottom: 0;
  color: var(--text-muted, #6b7280);
}

.dashboard-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dashboard-quick-doc-header h3 {
  font-size: 1.15rem;
  margin: 0 0 4px;
}

.dashboard-quick-doc-sub {
  color: var(--text-muted, #6b7280);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

.dashboard-quick-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-quick-doc-actions .primary-button,
.dashboard-quick-doc-actions .ghost-button {
  font-size: 0.85rem;
  padding: 8px 14px;
}

.dashboard-teasers {
  margin-bottom: 20px;
}

.dashboard-teaser-copy {
  margin: 0 0 16px;
  color: var(--text-muted, #6b7280);
}

.dashboard-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dashboard-today h3,
.dashboard-recent h3,
.dashboard-calendar h3,
.dashboard-reminders h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 14px;
}

.dashboard-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-panel-heading h3 {
  margin-bottom: 4px;
}

.dashboard-grid-secondary {
  margin-top: 16px;
}

.dashboard-calendar-list,
.dashboard-reminder-group {
  display: grid;
  gap: 10px;
}

.dashboard-calendar-row,
.dashboard-reminder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.dashboard-calendar-row.is-today {
  border-color: rgba(91, 155, 213, 0.45);
  background: rgba(91, 155, 213, 0.08);
}

.dashboard-calendar-row div,
.dashboard-reminder-row {
  min-width: 0;
}

.dashboard-calendar-row strong,
.dashboard-reminder-row span {
  display: block;
  margin-bottom: 2px;
}

.dashboard-calendar-row small,
.dashboard-reminder-row small {
  color: var(--text-muted, #6b7280);
}

.dashboard-calendar-row span,
.dashboard-reminder-row small:last-child {
  flex-shrink: 0;
}

.dashboard-reminders {
  display: grid;
  gap: 14px;
}

.dashboard-reminder-group strong {
  font-size: 0.95rem;
}

.account-install-panel .account-actions-row {
  margin-top: 14px;
}

.account-install-copy {
  margin: 0;
  color: var(--text-muted, #6b7280);
}

.dashboard-stat-alert {
  color: var(--danger, #dc2626);
}

.dashboard-obs-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.dashboard-obs-row:last-of-type {
  border-bottom: none;
}

.dashboard-obs-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent, #5b9bd5);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dashboard-obs-row strong {
  display: block;
  font-size: 0.875rem;
}

.dashboard-obs-row small {
  color: var(--text-muted, #6b7280);
  font-size: 0.8rem;
}

.link-button {
  background: none;
  border: none;
  color: var(--accent, #5b9bd5);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-doc-actions {
    flex-direction: column;
  }

  .dashboard-quick-doc-actions .primary-button,
  .dashboard-quick-doc-actions .ghost-button {
    width: 100%;
    text-align: center;
  }

  .dashboard-install-card,
  .dashboard-panel-heading,
  .dashboard-calendar-row,
  .dashboard-reminder-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-install-actions {
    width: 100%;
    justify-content: stretch;
  }

  .dashboard-install-actions .primary-button,
  .dashboard-install-actions .ghost-button,
  .dashboard-panel-heading .ghost-button {
    width: 100%;
  }
}

/* ─── Auth State: Logged-Out (Guest) ─────────────────────────────────────── */

/* When not authenticated, collapse the sidebar and give main full width */
body:not(.user-authenticated) .app-shell {
  grid-template-columns: 1fr;
}

body:not(.user-authenticated) .sidebar {
  display: none;
}

/* ─── Auth State: Logged-In (Authenticated) ──────────────────────────────── */

/* Pro-locked nav items — show a "Pro" badge for Free users */
body.user-authenticated:not(.user-pro) .nav-link[data-pro-nav]::after {
  content: "Pro";
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--accent, #5b9bd5);
  color: #fff;
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
  pointer-events: none;
}

body.user-authenticated:not(.user-pro) .nav-link[data-pro-nav] {
  opacity: 0.72;
}

/* ─── Pro Modal Two-Button Layout ────────────────────────────────────────── */

.pro-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.pro-modal-actions .ghost-button {
  width: 100%;
  text-align: center;
}

/* ─── Program Settings Page ───────────────────────────────────────────────── */

.settings-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.settings-card > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}

.settings-card > summary::-webkit-details-marker,
.settings-card > summary::marker {
  display: none;
}

.settings-card > summary:hover {
  background: var(--cream-2);
}

.settings-card-header-text {
  display: grid;
  gap: 4px;
}

.settings-card-header-text h3 {
  margin: 0;
}

.settings-card-toggle {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--muted);
  margin-top: 2px;
  transition: transform 0.2s;
}

.settings-card[open] .settings-card-toggle {
  transform: rotate(180deg);
}

.settings-card-body {
  display: grid;
  gap: 14px;
  padding: 4px 22px 22px;
}

.settings-card-body label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}

.settings-card-body input:not([type="checkbox"]):not([type="file"]),
.settings-card-body select,
.settings-card-body textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
}

.settings-card-body input[type="file"] {
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}

.settings-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.settings-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400 !important;
  cursor: pointer;
}

.settings-check-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.settings-coming-soon {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-coming-soon h3 {
  margin: 0;
}

.badge-coming-soon {
  display: inline-block;
  padding: 3px 9px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.settings-save-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 6px;
}

.settings-save-note {
  text-align: center;
  margin-top: 6px;
}

.program-logo-preview {
  max-width: 180px;
  max-height: 80px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
  margin-top: 6px;
  object-fit: contain;
}

.settings-signature-preview {
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.settings-signature-name {
  font-weight: 700;
  margin: 4px 0 2px;
  color: var(--ink);
}

.settings-signature-title {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 600px) {
  .settings-checkboxes {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .settings-card-body {
    padding: 4px 14px 18px;
  }

  .settings-card > summary {
    padding: 14px;
  }

  .settings-save-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Phase 3: Simplified Child Workflow ─────────────────────────────────── */

/* Coming Soon nav link */
.nav-link-coming-soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.nav-link-label-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}

.nav-coming-soon-tag,
.nav-legacy-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a6bb5;
}

.platform-placeholder-hero {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(90, 110, 140, 0.14);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.platform-placeholder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.platform-placeholder-card {
  display: grid;
  gap: 8px;
}

.platform-placeholder-card strong {
  color: #2f3a4a;
  font-size: 1.02rem;
}

.behavior-support-current-tools {
  margin-top: 8px;
}

@media (min-width: 720px) {
  .platform-placeholder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .platform-placeholder-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* AI Quick Entry Box */
.child-quick-entry {
  border: 1px solid rgba(91, 155, 213, 0.22);
  background: linear-gradient(135deg, #f7fafc, #ffffff);
}

.quick-entry-header {
  margin-bottom: 12px;
}

.quick-entry-header strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
  margin-top: 4px;
}

.quick-entry-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  background: var(--white);
  color: var(--ink);
}

.quick-entry-textarea:focus {
  outline: none;
  border-color: #7055d1;
  box-shadow: 0 0 0 3px rgba(112, 85, 209, 0.12);
}

.quick-entry-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quick-entry-preview-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.quick-entry-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(112, 85, 209, 0.16);
  border-radius: 16px;
}

.quick-entry-preview-row strong {
  display: block;
  margin-top: 8px;
}

.quick-entry-preview-row p {
  margin: 6px 0 0;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}

.quick-entry-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.quick-entry-btn {
  font-size: 13px;
  padding: 8px 14px;
}

.quick-entry-output {
  display: none;
  margin-top: 16px;
}

.quick-entry-result {
  margin-bottom: 0;
}

.ai-result-text {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* After-action AI prompt banner */
.after-action-prompt {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 40px));
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid rgba(112, 85, 209, 0.3);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(26, 43, 74, 0.14);
  max-width: 580px;
  width: calc(100% - 48px);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.after-action-prompt.visible {
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.after-action-text {
  flex: 1 1 200px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}

/* Child Overview redesign */
.overview-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.overview-info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.overview-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.overview-info-item strong {
  font-size: 14px;
  color: var(--ink);
}

.overview-goals-summary {
  margin: 12px 0;
}

.overview-goals-summary strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.overview-recent-item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.overview-recent-item p {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.5;
}

@media (max-width: 980px) {
  .overview-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .overview-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .profile-identity-hero {
    padding: 16px;
  }

  .profile-hero-actions {
    width: 100%;
  }

  .profile-hero-actions > .primary-button,
  .profile-hero-actions > .ghost-button,
  .profile-child-switcher,
  .profile-child-switcher select {
    width: 100%;
  }
}

/* Daily log tab grid */
.daily-log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.daily-log-section h4 {
  margin: 0 0 12px;
  font-size: 15px;
}

/* Portfolio summary inside reports tab */
.portfolio-summary-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.portfolio-summary-block h4 {
  margin: 6px 0 4px;
}

@media (max-width: 640px) {
  .quick-entry-buttons {
    gap: 6px;
  }

  .quick-entry-preview-row {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-entry-preview-actions {
    justify-content: flex-start;
  }

  .quick-entry-btn {
    flex: 1 1 calc(50% - 6px);
    text-align: center;
  }

  .after-action-prompt {
    flex-direction: column;
    align-items: flex-start;
  }

  .overview-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-log-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Admin AI Testing Center ─────────────────────────────────────────────── */

.admin-ai-test-panel {
  margin-top: 24px;
}

.aitc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 20px;
  align-items: start;
}

.aitc-left,
.aitc-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aitc-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
}

.aitc-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text, #1a1a1a);
}

.aitc-hint {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
  margin: 0 0 12px;
}

.aitc-form .panel-form {
  padding: 0;
  border: none;
  box-shadow: none;
}

.aitc-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aitc-optional {
  font-size: 0.75rem;
  color: var(--color-muted, #6b7280);
  font-weight: 400;
}

.aitc-required {
  color: var(--color-danger, #ef4444);
  font-weight: 600;
}

.aitc-sample-notes {
  margin-top: 4px;
}

.aitc-label {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
  margin: 0 0 6px;
}

.aitc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.aitc-chip {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg, #f9fafb);
  cursor: pointer;
  color: var(--color-text, #1a1a1a);
  transition: background 0.15s, border-color 0.15s;
}

.aitc-chip:hover {
  background: var(--color-primary-light, #eff6ff);
  border-color: var(--color-primary, #2563eb);
}

.aitc-layers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.aitc-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: var(--color-bg, #f9fafb);
}

.aitc-layer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
}

.aitc-layer-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.aitc-layer-toggle span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.aitc-layer-toggle strong {
  font-size: 0.85rem;
  font-weight: 600;
}

.aitc-layer-toggle small {
  font-size: 0.73rem;
  color: var(--color-muted, #6b7280);
}

.aitc-layer-preview {
  background: var(--color-bg, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 0.8rem;
}

.aitc-custom-prompt-row {
  padding: 8px 0;
  border-top: 1px solid var(--color-border, #e5e7eb);
  margin-top: 4px;
  margin-bottom: 8px;
}

.aitc-prompt-textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px;
  font-size: 0.82rem;
  font-family: monospace;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  resize: vertical;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.aitc-prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.aitc-prompt-preview {
  margin-top: 12px;
  background: var(--color-bg, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
}

.aitc-prompt-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.aitc-prompt-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.78rem;
  font-family: monospace;
  line-height: 1.5;
  margin: 0;
  max-height: 280px;
  overflow-y: auto;
  color: var(--color-text, #1a1a1a);
}

.aitc-version-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.aitc-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.82rem;
}

.aitc-version-row > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.aitc-version-row strong {
  font-size: 0.85rem;
}

.aitc-version-row small {
  color: var(--color-muted, #6b7280);
  font-size: 0.73rem;
}

.aitc-version-actions {
  display: flex;
  gap: 6px;
}

.aitc-slot-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.aitc-slot-tab {
  padding: 6px 18px;
  border-radius: 20px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg, #f9fafb);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

.aitc-slot-tab.active {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: var(--color-primary, #2563eb);
}

.aitc-slot-badge {
  font-size: 0.65rem;
  margin-left: 4px;
  opacity: 0.85;
}

.aitc-generate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.aitc-inline-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  cursor: pointer;
}

.aitc-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}

.aitc-result-header h4 {
  margin: 0;
}

.aitc-result-actions {
  display: flex;
  gap: 6px;
}

.aitc-result-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.aitc-result-tab {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg, #f9fafb);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text, #1a1a1a);
}

.aitc-result-tab.active {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: var(--color-primary, #2563eb);
}

.aitc-output {
  margin-bottom: 16px;
}

.aitc-output-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.6;
  background: var(--color-bg, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 14px;
  margin: 0;
  max-height: 520px;
  overflow-y: auto;
}

.aitc-empty-slot {
  text-align: center;
  color: var(--color-muted, #6b7280);
  padding: 32px 20px;
  font-size: 0.9rem;
}

.aitc-scores {
  border-top: 1px solid var(--color-border, #e5e7eb);
  padding-top: 14px;
  margin-top: 4px;
}

.aitc-scores-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.aitc-score-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary, #2563eb);
}

.aitc-score-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aitc-score-item {
  display: grid;
  grid-template-columns: 160px 1fr 28px;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.aitc-score-label {
  color: var(--color-text, #1a1a1a);
}

.aitc-score-bar-wrap {
  background: var(--color-border, #e5e7eb);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.aitc-score-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.aitc-score-bar.aitc-score-high { background: #22c55e; }
.aitc-score-bar.aitc-score-mid  { background: #f59e0b; }
.aitc-score-bar.aitc-score-low  { background: #ef4444; }

.aitc-score-val {
  font-weight: 700;
  text-align: right;
}

.aitc-score-val.aitc-score-high { color: #22c55e; }
.aitc-score-val.aitc-score-mid  { color: #f59e0b; }
.aitc-score-val.aitc-score-low  { color: #ef4444; }

.aitc-score-badge {
  font-size: 0.72rem;
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 700;
}

.aitc-comparison {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.aitc-compare-col {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}

.aitc-compare-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.aitc-compare-header strong {
  font-size: 0.9rem;
}

.aitc-compare-layers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.aitc-compare-pre {
  max-height: 400px;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .aitc-grid {
    grid-template-columns: 1fr;
  }

  .aitc-score-item {
    grid-template-columns: 130px 1fr 24px;
  }

  .aitc-comparison {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Lesson Plan Printables & Resources ──────────────────────────────────── */

.lp-resources-fieldset {
  margin-top: 24px;
}

.lp-resource-category {
  border: 1px solid var(--border, #e4ddd6);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.lp-resource-category summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  background: var(--surface-alt, #faf7f4);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lp-resource-category summary::-webkit-details-marker { display: none; }
.lp-resource-category summary::before { content: "▶"; font-size: 0.7rem; transition: transform 0.2s; }
.lp-resource-category[open] > summary::before { transform: rotate(90deg); }

.lp-resource-count {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

.lp-resource-category-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-resource-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border, #e4ddd6);
  border-radius: 6px;
  background: #fff;
}

.lp-resource-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border, #e4ddd6);
  flex-shrink: 0;
}

.lp-resource-pdf-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 52px;
  text-align: center;
}

.lp-resource-title {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
}

.lp-resource-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.lp-resource-actions .ghost-button,
.lp-resource-actions .danger-button {
  padding: 4px 8px;
  font-size: 0.78rem;
}

/* Add resource panel */
.lp-add-resource-panel {
  border: 1px dashed var(--border, #e4ddd6);
  border-radius: 8px;
  margin-top: 10px;
}

.lp-add-resource-panel > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--accent, #386062);
  user-select: none;
  list-style: none;
}
.lp-add-resource-panel > summary::-webkit-details-marker { display: none; }

.lp-add-resource-form {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-add-resource-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Viewer-side resource display */
.lp-resources-section {
  margin-top: 24px;
}

.lp-resource-category-viewer {
  border: 1px solid var(--border, #e4ddd6);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.lp-resource-category-viewer > summary {
  cursor: pointer;
  padding: 10px 14px;
  background: var(--surface-alt, #faf7f4);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lp-resource-category-viewer > summary::-webkit-details-marker { display: none; }
.lp-resource-category-viewer > summary::before { content: "▶"; font-size: 0.7rem; transition: transform 0.2s; }
.lp-resource-category-viewer[open] > summary::before { transform: rotate(90deg); }

.lp-resource-viewer-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.lp-resource-viewer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border, #e4ddd6);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.lp-resource-viewer-img {
  width: 100%;
  max-width: 140px;
  height: 120px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border, #e4ddd6);
}

.lp-resource-viewer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lp-resource-viewer-meta strong {
  font-size: 0.85rem;
}

.lp-resource-open-btn {
  font-size: 0.8rem;
  padding: 4px 10px;
}

@media (max-width: 640px) {
  .curriculum-day-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .curriculum-day-tab {
    flex: 0 0 auto;
  }
}

@media print {
  .lp-resource-category-viewer > summary::before { display: none; }
  .lp-resource-viewer-img { max-width: 100%; height: auto; }
}

@media print {
  .lp-resource-category-viewer > summary::before { display: none; }
  .lp-resource-viewer-img { max-width: 100%; height: auto; }
}

/* ─── Curriculum Lesson & Activity Viewers ─────────────────────────────────── */
.curriculum-lesson-viewer,
.curriculum-activity-viewer {
  display: grid;
  gap: 20px;
}

.curriculum-lesson-header h3,
.curriculum-lesson-daily-section > h3 {
  margin: 0 0 10px;
}

.curriculum-lesson-domains {
  margin-top: 8px;
}

.curriculum-lesson-section {
  border: 1px solid var(--border, #e8e2dc);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
}

.curriculum-lesson-section > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 12px 14px;
  list-style: none;
}

.curriculum-lesson-section > summary::-webkit-details-marker { display: none; }

.curriculum-lesson-section > summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.curriculum-lesson-section[open] > summary::before {
  transform: rotate(90deg);
}

.curriculum-lesson-section-body {
  padding: 0 14px 14px;
}

.curriculum-lesson-daily {
  display: grid;
  gap: 14px;
}

.curriculum-day-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.curriculum-day-tab {
  border: 1px solid var(--border, #e8e2dc);
  background: #faf8f6;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
}

.curriculum-day-tab.is-active {
  background: var(--accent, #c97b63);
  border-color: var(--accent, #c97b63);
  color: #fff;
}

.curriculum-day-panel {
  display: none;
  gap: 12px;
}

.curriculum-day-panel.is-active {
  display: grid;
}

.curriculum-activity-card {
  border: 1px solid var(--border, #e8e2dc);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}

.curriculum-activity-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.curriculum-activity-card-head h4 {
  margin: 0;
  flex: 1 1 180px;
}

.curriculum-activity-field strong,
.curriculum-activity-field h4 {
  display: block;
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.curriculum-goal-list {
  margin: 0;
  padding-left: 1.2rem;
}

.curriculum-book-entry,
.curriculum-song-entry {
  margin-bottom: 10px;
}

.curriculum-book-author {
  margin-left: 6px;
  color: #6d645c;
}

.curriculum-activity-header {
  display: grid;
  gap: 8px;
}

.curriculum-activity-parent {
  margin: 0;
}

.curriculum-activity-body {
  display: grid;
  gap: 16px;
}

.curriculum-activity-actions {
  margin-top: 8px;
}

.activity-lesson-filter-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

@media print {
  .curriculum-day-panel { display: grid !important; }
  .curriculum-day-tabs { display: none; }
  .curriculum-lesson-section { break-inside: avoid; }
  .curriculum-activity-card,
  .curriculum-print-day,
  .curriculum-day-panel-section,
  .lesson-workspace-materials-block,
  .lesson-print-variant-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .curriculum-lesson-print .curriculum-open-activity-button,
  .curriculum-lesson-print .curriculum-activity-actions,
  .curriculum-lesson-print .ghost-button {
    display: none !important;
  }
  .curriculum-lesson-overview-lead {
    margin-top: 10px;
  }
}

.curriculum-lesson-overview-lead {
  margin-top: 12px;
  line-height: 1.55;
}

.curriculum-day-panel-section {
  display: grid;
  gap: 12px;
}

.curriculum-print-day {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e8e2dc);
}

.curriculum-print-day h4 {
  margin: 0 0 10px;
}

.curriculum-numbered-line {
  margin: 0 0 6px;
}

@media (max-width: 480px) {
  .curriculum-lesson-viewer,
  .curriculum-activity-viewer,
  .curriculum-import-preview {
    max-width: 100%;
    overflow-x: hidden;
  }

  .curriculum-activity-field,
  .curriculum-import-preview-text,
  .curriculum-activity-card {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .curriculum-day-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .curriculum-day-tab {
    min-height: 44px;
  }

  .curriculum-open-activity-button {
    width: 100%;
    min-height: 44px;
  }
}

/* ─── Site Announcement Banner ───────────────────────────────────────────── */
.site-announcement-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent, #386062);
  color: #fff;
  font-size: 0.9rem;
  padding: 10px 16px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-announcement-banner[hidden] { display: none; }
.site-announcement-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  opacity: 0.8;
  flex-shrink: 0;
}
.site-announcement-close:hover { opacity: 1; }

/* ─── Admin Site Editor ──────────────────────────────────────────────────── */
.se-status-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-subtle, #f3ede7);
  vertical-align: middle;
  margin-left: 6px;
}
.se-status-badge.se-live { background: #d4edda; color: #1a6b2f; }
.se-status-badge.se-draft { background: #fff3cd; color: #856404; }

.se-accordion {
  border: 1px solid var(--border, #e4ddd6);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.se-accordion-summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--bg-subtle, #f9f5f1);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.se-accordion-summary::before { content: "▶"; font-size: 0.65rem; transition: transform 0.2s; }
.se-accordion[open] > .se-accordion-summary::before { transform: rotate(90deg); }
.se-accordion-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.se-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e4ddd6);
}
.se-draft-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
}
.se-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* FAQ admin cards */
.admin-se-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border, #e4ddd6);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  margin-bottom: 8px;
}
.admin-se-card.se-hidden { opacity: 0.55; }
.admin-se-card.active { border-color: var(--accent, #386062); background: #f0f9f8; }
.admin-se-card-main { flex: 1; min-width: 0; }
.admin-se-card-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
.admin-se-card-meta { font-size: 0.78rem; color: var(--text-muted, #6b7280); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.admin-se-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.xs-button { font-size: 0.78rem !important; padding: 3px 8px !important; }
.danger-button { color: var(--danger, #dc3545) !important; }

/* Green tag (Visible) */
.green-tag { background: #d4edda; color: #1a6b2f; }

/* ── Phase 5: AI Prompt Manager ─────────────────────────────────────────── */
.ai-pm-loading {
  color: var(--muted, #6b7280);
  font-size: 0.9rem;
  padding: 24px 0;
}
.ai-pm-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.ai-pm-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 16px;
}
.ai-pm-tool-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, #e4ddd6);
  background: var(--white, #fff);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.ai-pm-tool-btn:hover { background: var(--bg-light, #f9fafb); border-color: var(--accent, #386062); }
.ai-pm-tool-btn.active { background: var(--accent, #386062); color: #fff; border-color: var(--accent, #386062); }
.ai-pm-tool-btn.active .ai-pm-customized-badge { background: rgba(255,255,255,0.2); color: #fff; }
.ai-pm-customized-badge {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: #dbeafe;
  color: #1d4ed8;
  white-space: nowrap;
}
.ai-pm-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ai-pm-tool-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #e4ddd6);
}
.ai-pm-meta { color: var(--muted, #6b7280); font-size: 0.78rem; }
.ai-pm-form { display: flex; flex-direction: column; gap: 12px; }
.ai-pm-layer {
  border: 1px solid var(--line, #e4ddd6);
  border-radius: 10px;
  overflow: hidden;
}
.ai-pm-layer-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--bg-light, #f9fafb);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.ai-pm-layer-summary::-webkit-details-marker { display: none; }
.ai-pm-layer-summary strong { font-size: 0.88rem; }
.ai-pm-layer-summary small { font-size: 0.75rem; color: var(--muted, #6b7280); }
.ai-pm-layer-body { padding: 10px 12px; }
.ai-pm-textarea { min-height: 160px; }
.ai-pm-actions { display: flex; gap: 8px; padding-top: 4px; }
.ai-pm-history {
  padding: 16px;
  border: 1px solid var(--line, #e4ddd6);
  border-radius: 10px;
  background: var(--bg-light, #f9fafb);
}
.ai-pm-default-preview {
  border: 1px dashed var(--line, #e4ddd6);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
}

/* ── Phase 5: AI Settings ──────────────────────────────────────────────── */
.ai-settings-master {
  padding: 16px;
  border: 1px solid var(--line, #e4ddd6);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--white, #fff), rgba(219,234,247,0.3));
  margin-bottom: 4px;
}
.ai-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ai-settings-tool-card {
  border: 1px solid var(--line, #e4ddd6);
  border-radius: 10px;
  overflow: hidden;
}
.ai-settings-tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-light, #f9fafb);
  border-bottom: 1px solid var(--line, #e4ddd6);
}
.ai-tool-status-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-on { background: #d4edda; color: #1a6b2f; }
.badge-off { background: #fee2e2; color: #991b1b; }
.ai-settings-tool-fields {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field-small { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; }
.form-field-small input { font-size: 0.82rem; padding: 5px 8px; }

/* ── Phase 5: AI Usage Monitor ─────────────────────────────────────────── */
.ai-usage-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.ai-usage-stat-card {
  padding: 14px;
  border: 1px solid var(--line, #e4ddd6);
  border-radius: 10px;
  background: var(--white, #fff);
}
.ai-usage-stat-card.ai-stat-success { border-color: #a7f3d0; background: #f0fdf4; }
.ai-usage-stat-card.ai-stat-failed  { border-color: #fca5a5; background: #fef2f2; }
.ai-stat-label { font-size: 0.75rem; color: var(--muted, #6b7280); margin: 0 0 4px; }
.ai-stat-value { font-size: 1.4rem; font-weight: 700; margin: 0; }
.ai-stat-note  { font-size: 0.7rem; color: var(--muted, #6b7280); margin: 4px 0 0; }
.ai-usage-by-tool { margin-bottom: 24px; }
.ai-usage-tool-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ai-usage-tool-name { font-size: 0.84rem; font-weight: 500; }
.ai-usage-tool-bar-wrap { height: 10px; border-radius: 5px; background: rgba(26,43,74,0.08); overflow: hidden; }
.ai-usage-tool-bar { height: 100%; background: var(--accent, #386062); border-radius: 5px; transition: width 0.3s; }
.ai-usage-tool-count { font-size: 0.82rem; text-align: right; }
.ai-usage-tool-count small { color: var(--muted, #6b7280); }
.ai-usage-log-section { margin-top: 8px; }
.ai-usage-log-table-wrap { overflow-x: auto; }
.ai-usage-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.ai-usage-log-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 2px solid var(--line, #e4ddd6);
  font-weight: 600;
  white-space: nowrap;
  color: var(--muted, #6b7280);
}
.ai-usage-log-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--line, #e4ddd6);
  vertical-align: middle;
}
.ai-log-row-failed td { background: #fef2f2; }
.ai-log-email { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-success { color: #1a6b2f; background: #d4edda; padding: 8px 12px; border-radius: 6px; font-size: 0.85rem; margin: 0; }

@media (max-width: 1100px) {
  .ai-pm-grid { grid-template-columns: 1fr; }
  .ai-pm-sidebar { flex-direction: row; flex-wrap: wrap; position: static; }
  .ai-pm-tool-btn { flex: 1 1 auto; min-width: 120px; }
  .ai-usage-tool-row { grid-template-columns: 1fr 1fr; }
  .ai-usage-tool-bar-wrap { display: none; }
}

/* ─── Lesson Plan Workspace (mobile-first viewer) ─────────────────────────── */
.resource-viewer-modal.lesson-workspace-mode .resource-viewer-card {
  width: min(860px, 100%);
  max-height: calc(100dvh - 16px);
  display: flex;
  flex-direction: column;
  padding: 16px 12px 12px;
  overflow: visible;
}

.resource-viewer-modal.lesson-workspace-mode .close-button {
  display: inline-flex !important;
  z-index: 5;
  top: 10px;
  right: 10px;
}

.resource-viewer-modal.lesson-workspace-mode > .modal-card > .eyebrow,
.resource-viewer-modal.lesson-workspace-mode > .modal-card > h2#resourceViewerTitle[hidden],
.resource-viewer-modal.lesson-workspace-mode > .modal-card > .tag-row,
.resource-viewer-modal.lesson-workspace-mode .resource-viewer-toolbar {
  display: none !important;
}

.resource-viewer-modal.lesson-workspace-mode .resource-viewer-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.lesson-workspace-article {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: transparent;
}

.lesson-workspace {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  gap: 0;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.lesson-workspace-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 0 2px 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.96);
}

.lesson-workspace-back {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: 8px 10px;
}

.lesson-workspace-title-block {
  min-width: 0;
}

.lesson-workspace-save-btn {
  justify-self: end;
  align-self: start;
  min-height: 44px;
  white-space: nowrap;
}

.lesson-workspace-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lesson-workspace-meta {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--muted, #6b6560);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lesson-workspace-action-bars {
  display: grid;
  gap: 8px;
  padding: 10px 2px calc(10px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 28%);
  border-top: 1px solid rgba(213, 227, 240, 0.9);
  margin-top: auto;
}

.lesson-workspace-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  align-items: stretch;
}

.lesson-workspace-primary-actions .lesson-workspace-use-plan-btn {
  flex: 1 1 100%;
  min-height: 48px;
  margin: 0;
  order: 0;
}

.lesson-workspace-primary-actions .lesson-workspace-secondary-btn {
  flex: 1 1 calc(33.33% - 8px);
  min-height: 44px;
  margin: 0;
  min-width: 88px;
}

.lesson-workspace-primary-actions .primary-button,
.lesson-workspace-primary-actions .ghost-button {
  min-height: 44px;
  margin: 0;
}

.lesson-workspace-more-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  min-width: 72px;
}

.lesson-workspace-more-wrap > .lesson-workspace-more-btn {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.lesson-workspace-more-btn {
  flex: 0 0 auto !important;
  min-width: 72px;
}

.lesson-workspace-more-menu .lesson-workspace-danger {
  color: #9b3b3b;
}

.lesson-workspace-more-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  top: auto;
  right: 0;
  left: auto;
  z-index: 80;
  display: grid;
  gap: 2px;
  min-width: min(280px, calc(100vw - 32px));
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 420px);
  overflow: auto;
  padding: 6px;
  background: var(--white, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(40, 52, 71, 0.14);
}

.lesson-workspace-more-group + .lesson-workspace-more-group {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.lesson-workspace-more-label {
  margin: 4px 8px 2px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b6560);
}

.lesson-workspace-more-menu button {
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.lesson-workspace-more-menu button:hover,
.lesson-workspace-more-menu button:focus-visible {
  background: var(--cream-2, #f5f1ec);
}

.lesson-workspace-use-plan-choices {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.lesson-workspace-use-plan-choices .primary-button,
.lesson-workspace-use-plan-choices .ghost-button,
.lesson-workspace-use-plan-choices .link-button {
  min-height: 48px;
  width: 100%;
}

.lesson-workspace-week-overview {
  margin-bottom: 18px;
}

.lesson-workspace-week-days-heading {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.lesson-workspace-activity-card {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lesson-workspace-activity-card.is-static {
  cursor: default;
}

.lesson-workspace-activity-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lesson-workspace-activity-card .lesson-workspace-activity-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.lesson-workspace-activity-desc,
.lesson-workspace-activity-field {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted, #6b6560);
  line-height: 1.45;
}

.lesson-print-brand {
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3a7abf;
}

@media (min-width: 760px) {
  .lesson-workspace-primary-actions .lesson-workspace-use-plan-btn {
    flex: 1 1 auto;
    min-width: 160px;
    order: 0;
  }

  .lesson-workspace-primary-actions .lesson-workspace-secondary-btn {
    flex: 0 1 auto;
    min-width: 100px;
  }

  .lesson-workspace-more-wrap {
    flex: 0 0 auto;
  }

  .lesson-workspace-more-wrap > .lesson-workspace-more-btn {
    width: auto;
    min-width: 88px;
  }

  .lesson-workspace-more-menu {
    bottom: auto;
    top: calc(100% + 4px);
  }
}

.lesson-workspace-save-btn.is-saved {
  border-color: #c9a227;
  color: #8a6d12;
}

.lesson-workspace-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  scrollbar-width: none;
}

.lesson-workspace-tabs::-webkit-scrollbar {
  display: none;
}

.lesson-workspace-tab {
  flex: 1 1 0;
  min-width: 72px;
  min-height: 44px;
  padding: 10px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted, #6b6560);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.lesson-workspace-tab.is-active {
  color: #3a7abf;
  border-bottom-color: #3a7abf;
}

.lesson-workspace-panels {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.lesson-workspace-panel {
  display: none;
  padding: 14px 2px 20px;
}

.lesson-workspace-panel.is-active {
  display: block;
}

.lesson-workspace-week-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.lesson-workspace-week-actions .ghost-button {
  min-height: 44px;
  flex: 1 1 auto;
}

.lesson-workspace-day-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  padding-bottom: 2px;
}

.lesson-workspace-day-tab {
  flex: 1 1 0;
  min-width: 52px;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.lesson-workspace-day-tab.is-active {
  background: #3a7abf;
  border-color: #3a7abf;
  color: #fff;
}

.lesson-workspace-day-panel {
  display: none;
}

.lesson-workspace-day-panel.is-active {
  display: block;
}

.lesson-workspace-day-theme {
  margin: 0 0 10px;
  font-weight: 600;
  color: #3a7abf;
}

.lesson-workspace-activity-list {
  display: grid;
  gap: 8px;
}

.lesson-workspace-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white, #fff);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}

.lesson-workspace-activity-row.is-static {
  cursor: default;
}

.lesson-workspace-activity-list-all .lesson-workspace-activity-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.lesson-workspace-activity-day {
  font-size: 0.8rem;
  font-weight: 700;
  color: #3a7abf;
  white-space: nowrap;
}

.lesson-workspace-activity-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lesson-workspace-activity-cat {
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cream-2, #f5f1ec);
  color: var(--muted, #6b6560);
  white-space: nowrap;
}

.lesson-workspace-materials-block {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white, #fff);
}

.lesson-workspace-materials-block h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #3a7abf;
}

.lesson-workspace-materials-sub {
  margin-top: 10px;
}

.lesson-print-variant-header {
  margin-bottom: 16px;
}

.lesson-print-variant-section {
  display: grid;
  gap: 12px;
}

.lesson-week-schedule-print {
  display: grid;
  gap: 16px;
  overflow-wrap: anywhere;
  color: #1b2a3a;
}

.lesson-week-schedule-header {
  padding: 18px 18px 16px;
  border: 1.5px solid #c9d6e4;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
}

.lesson-week-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.lesson-week-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.lesson-week-brand-copy {
  display: grid;
  gap: 2px;
}

.lesson-week-brand-copy .eyebrow {
  margin: 0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #3a7abf;
  font-weight: 700;
}

.lesson-week-day-section-label {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #3a7abf;
}

.lesson-week-day-domains,
.lesson-week-day-materials,
.lesson-week-day-notes {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #3d4b5c;
}

.lesson-week-calendar-footer-summary {
  margin-top: 10px;
  font-size: 0.88rem;
  color: #3d4b5c;
}

.lesson-week-planning-lines {
  display: grid;
  gap: 4px;
  padding: 8px 10px 12px;
}

.lesson-week-planning-item,
.lesson-week-planning-blank {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}

.lesson-week-schedule-header .eyebrow {
  margin: 0 0 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: #3a7abf;
  font-weight: 700;
}

.lesson-week-schedule-header h3 {
  margin: 4px 0 12px;
  color: #17324d;
  font-size: 1.4rem;
  line-height: 1.25;
}

.lesson-week-schedule-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.lesson-week-schedule-meta div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.lesson-week-schedule-meta dt {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5a6b80;
  font-weight: 700;
}

.lesson-week-schedule-meta dd {
  margin: 0;
  color: #17324d;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lesson-week-schedule-week-of {
  letter-spacing: 0.08em;
  color: #667487;
  font-weight: 500;
}

.lesson-week-snapshot,
.lesson-week-teacher-prep,
.lesson-week-materials-summary,
.lesson-week-schedule-section,
.lesson-week-resources,
.lesson-week-teacher-notes {
  padding: 16px;
  border: 1.5px solid #cfd9e6;
  border-radius: 14px;
  background: #fff;
}

.lesson-week-snapshot h3,
.lesson-week-teacher-prep h3,
.lesson-week-materials-summary h3,
.lesson-week-schedule-section h3,
.lesson-week-resources h3,
.lesson-week-teacher-notes h3 {
  margin: 0 0 12px;
  color: #234f70;
  font-size: 1.05rem;
}

.lesson-week-materials-summary p,
.lesson-week-teacher-prep p {
  margin: 0;
  color: #2f3f55;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lesson-week-print-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #d5deea;
  color: #667487;
  font-size: 0.82rem;
}

.lesson-week-snapshot-block {
  margin: 0 0 12px;
}

.lesson-week-snapshot-block:last-child {
  margin-bottom: 0;
}

.lesson-week-snapshot-block h4 {
  margin: 0 0 6px;
  color: #3a516b;
  font-size: 0.9rem;
}

.lesson-week-objective-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 4px;
}

.lesson-week-day-stack {
  display: grid;
  gap: 14px;
}

.lesson-week-day-block {
  border: 1.5px solid #c5d2e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fcfbf8;
  break-inside: avoid-page;
  page-break-inside: avoid;
}

.lesson-week-day-block h4 {
  margin: 0;
  padding: 10px 12px;
  background: #234f70;
  color: #fff;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

.lesson-week-schedule-theme {
  margin: 8px 12px 0;
  color: #5a6575;
  font-size: 0.84rem;
  font-weight: 700;
}

.lesson-week-activity-cards {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.lesson-week-activity-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(55, 70, 90, 0.14);
  border-radius: 10px;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}

.lesson-week-activity-title {
  margin: 0;
  color: #17324d;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lesson-week-activity-category {
  margin: 0;
  color: #667487;
  font-size: 0.82rem;
  font-weight: 600;
}

.lesson-week-activity-desc,
.lesson-week-activity-materials,
.lesson-week-resources p,
.lesson-week-teacher-notes p {
  margin: 0;
  color: #2f3f55;
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lesson-week-activity-materials {
  color: #40506a;
}

.lesson-week-resources p,
.lesson-week-teacher-notes p {
  margin: 0 0 8px;
}

.lesson-week-resources p:last-child,
.lesson-week-teacher-notes p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .lesson-week-schedule-meta {
    grid-template-columns: 1fr;
  }
}

.lesson-workspace-plan-weekly {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.lesson-workspace-plan-section {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.lesson-workspace-plan-section h3 {
  margin: 0 0 8px;
  color: #234f70;
  font-size: 1rem;
}

.lesson-workspace-plan-section-body {
  color: #2f3f55;
  line-height: 1.45;
}

.lesson-workspace-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: end;
}

.lesson-workspace-action-sheet[hidden] {
  display: none !important;
}

.lesson-workspace-action-sheet-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(24, 28, 36, 0.45);
  cursor: pointer;
}

.lesson-workspace-action-sheet-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--white, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(24, 28, 36, 0.18);
}

.lesson-workspace-action-sheet-title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.05rem;
}

.lesson-workspace-action-sheet-panel .ghost-button,
.lesson-workspace-action-sheet-panel .link-button,
.lesson-workspace-action-sheet-panel .primary-button {
  min-height: 44px;
  width: 100%;
}

.lesson-workspace-action-sheet-note {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.lesson-workspace-main-calendar-form {
  display: grid;
  gap: 10px;
}

.lesson-workspace-main-calendar-form label {
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
}

.lesson-workspace-main-calendar-form input,
.lesson-workspace-main-calendar-form select {
  min-height: 44px;
}

.lesson-workspace-action-sheet-actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

@media (min-width: 640px) {
  .lesson-workspace-action-sheet {
    align-items: center;
    justify-items: center;
  }

  .lesson-workspace-action-sheet-panel {
    width: min(380px, calc(100% - 32px));
    border-radius: var(--radius);
    padding-bottom: 16px;
  }
}

@page {
  margin: 0.55in 0.55in 0.7in 0.55in;

  @bottom-left {
    content: "Little Learner Hub";
    font-size: 8pt;
    color: #667487;
  }

  @bottom-right {
    content: "Page " counter(page);
    font-size: 8pt;
    color: #667487;
  }
}

@media print {
  body.printing-resource {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.printing-resource .lesson-week-schedule-print {
    gap: 10pt;
    width: 100%;
    padding-bottom: 18pt;
  }

  body.printing-resource .lesson-week-schedule-header,
  body.printing-resource .lesson-week-snapshot,
  body.printing-resource .lesson-week-teacher-prep,
  body.printing-resource .lesson-week-materials-summary,
  body.printing-resource .lesson-week-schedule-section,
  body.printing-resource .lesson-week-resources,
  body.printing-resource .lesson-week-teacher-notes,
  body.printing-resource .lesson-week-day-block,
  body.printing-resource .lesson-week-activity-card {
    color: #111 !important;
    background: #fff !important;
    border-color: #bbb !important;
    box-shadow: none !important;
  }

  body.printing-resource .lesson-week-schedule-header {
    break-after: avoid;
    page-break-after: avoid;
  }

  body.printing-resource .lesson-week-day-stack {
    gap: 8pt !important;
  }

  body.printing-resource .lesson-week-day-block {
    border-radius: 0 !important;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  body.printing-resource .lesson-week-day-block h4 {
    background: #5b3a9e !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    padding: 7pt 8pt !important;
    font-size: 10pt !important;
  }

  /* Weekly Calendar print: landscape Mon–Fri columns */
  @page lesson-week-landscape {
    size: letter landscape;
    margin: 0.4in;
  }

  body.printing-lesson-week .lesson-week-schedule-print {
    page: lesson-week-landscape;
  }

  body.printing-lesson-week .lesson-week-teacher-prep,
  body.printing-lesson-week .lesson-week-materials-summary,
  body.printing-lesson-week .lesson-week-resources,
  body.printing-lesson-week .lesson-week-teacher-notes,
  body.printing-lesson-week .lesson-week-print-footer {
    display: none !important;
  }

  body.printing-lesson-week .lesson-week-snapshot {
    display: block !important;
    margin-bottom: 8pt;
  }

  body.printing-lesson-week .lesson-week-snapshot-block {
    break-inside: avoid;
    margin-bottom: 4pt !important;
  }

  body.printing-lesson-week .lesson-week-snapshot-block h4 {
    font-size: 8pt !important;
    margin: 0 0 2pt !important;
    color: #5b3a9e !important;
  }

  body.printing-lesson-week .lesson-week-snapshot-block p,
  body.printing-lesson-week .lesson-week-snapshot-block li {
    font-size: 7.5pt !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  body.printing-lesson-week .lesson-week-calendar-footer-summary {
    display: block !important;
    margin-top: 6pt;
    font-size: 8pt !important;
  }

  body.printing-lesson-week .lesson-week-day-domains,
  body.printing-lesson-week .lesson-week-day-materials,
  body.printing-lesson-week .lesson-week-day-notes,
  body.printing-lesson-week .lesson-week-day-section-label {
    display: block !important;
    font-size: 7.5pt !important;
    line-height: 1.25 !important;
    margin: 2pt 0 !important;
  }

  body.printing-lesson-detail .lesson-week-day-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10pt !important;
  }

  body.printing-lesson-detail .lesson-week-day-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.printing-lesson-planning .lesson-week-day-stack {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8pt !important;
  }

  body.printing-lesson-planning .lesson-week-planning-blank {
    min-height: 28pt;
    border-bottom: 0.5pt solid #c5d0de;
    margin: 2pt 0 6pt !important;
  }

  body.printing-lesson-planning .lesson-week-snapshot-block h4,
  body.printing-lesson-detail .lesson-week-snapshot-block h4 {
    margin: 0 0 4pt !important;
    font-size: 10pt !important;
  }

  body.printing-lesson-week .lesson-week-schedule-header {
    padding: 8pt 10pt !important;
    border-radius: 0 !important;
    margin-bottom: 8pt;
  }

  body.printing-lesson-week .lesson-week-schedule-header h3 {
    font-size: 14pt !important;
    margin: 2pt 0 6pt !important;
  }

  body.printing-lesson-week .lesson-week-schedule-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6pt !important;
  }

  body.printing-lesson-week .lesson-week-schedule-section h3 {
    display: none !important;
  }

  body.printing-lesson-week .lesson-week-day-stack {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6pt !important;
    align-items: stretch;
  }

  body.printing-lesson-week .lesson-week-day-block {
    break-inside: avoid;
    page-break-inside: avoid;
    min-height: 0;
  }

  body.printing-lesson-week .lesson-week-activity-cards {
    gap: 4pt !important;
    padding: 6pt !important;
  }

  body.printing-lesson-week .lesson-week-activity-card {
    padding: 4pt 5pt !important;
  }

  body.printing-lesson-week .lesson-week-activity-desc,
  body.printing-lesson-week .lesson-week-activity-materials {
    font-size: 8pt !important;
  }

  body.printing-resource .lesson-week-activity-cards {
    gap: 6pt !important;
    padding: 8pt !important;
  }

  body.printing-resource .lesson-week-activity-card {
    padding: 6pt 8pt !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body.printing-resource .lesson-week-activity-title {
    font-size: 9.5pt !important;
  }

  body.printing-resource .lesson-week-activity-category,
  body.printing-resource .lesson-week-activity-desc,
  body.printing-resource .lesson-week-activity-materials,
  body.printing-resource .lesson-week-resources p,
  body.printing-resource .lesson-week-teacher-notes p,
  body.printing-resource .lesson-week-teacher-prep p,
  body.printing-resource .lesson-week-materials-summary p,
  body.printing-resource .lesson-week-schedule-theme {
    font-size: 8.5pt !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }

  body.printing-resource .lesson-week-resources,
  body.printing-resource .lesson-week-teacher-notes,
  body.printing-resource .lesson-week-teacher-prep,
  body.printing-resource .lesson-week-materials-summary {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  body.printing-resource .lesson-week-schedule-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.printing-resource .lesson-week-print-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 4pt 0 0;
    border-top: 0.5pt solid #c5d0de;
    background: #fff;
    font-size: 8pt !important;
  }

  body.printing-resource .lesson-week-print-page-num::after {
    content: "Page " counter(page);
  }

  body.printing-resource .lesson-week-brand-logo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

@media (max-width: 760px) {
  .resource-viewer-modal.lesson-workspace-mode.open {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .resource-viewer-modal.lesson-workspace-mode .resource-viewer-card {
    max-height: 100dvh;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    overflow-x: hidden;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 0;
  }

  .resource-viewer-modal.lesson-workspace-mode .resource-viewer-body,
  .lesson-workspace-article,
  .lesson-workspace {
    max-width: 100%;
    min-width: 0;
    height: 100%;
  }

  /* Header/tabs stay pinned; content scrolls; actions stick to bottom. */
  .lesson-workspace-header {
    position: relative;
    z-index: 2;
    padding-top: 2px;
    border-bottom: 1px solid rgba(213, 227, 240, 0.85);
  }

  .lesson-workspace-back {
    width: 100%;
    justify-self: stretch;
    justify-content: center;
  }

  .resource-viewer-modal.lesson-workspace-mode .close-button {
    top: calc(8px + env(safe-area-inset-top, 0px));
  }
}

/* ========== Unified Schedule + Design System surfaces ========== */
.llh-schedule-page-title h2 {
  font-family: var(--llh-font-display, Georgia, serif);
  color: var(--llh-ink, #2a2a35);
}

.llh-ds-card {
  background: var(--llh-surface, #fff);
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: var(--llh-radius-md, 12px);
  box-shadow: var(--llh-shadow-soft, 0 8px 24px rgba(42, 42, 53, 0.06));
  padding: var(--llh-space-5, 24px);
}

.llh-main-calendar,
.llh-weekly-execution,
.llh-dash-week-card {
  max-width: 1100px;
}

.llh-calendar-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.llh-calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.llh-calendar-month {
  margin: 0;
  font-family: var(--llh-font-display, Georgia, serif);
  font-size: clamp(1.4rem, 2vw + 1rem, 2rem);
  color: var(--llh-ink, #2a2a35);
}

.llh-calendar-layout {
  display: grid;
  grid-template-columns: 1.45fr 0.9fr;
  gap: 16px;
  align-items: start;
}

.llh-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--llh-line, #e4e1ea);
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 12px;
  overflow: hidden;
}

/* Sun-Sat month grid with a leading "View Week" gutter column. */
.llh-calendar-grid-7 {
  grid-template-columns: 30px repeat(7, minmax(0, 1fr));
}

.llh-cal-head {
  background: var(--llh-primary-soft, #ede8f7);
  color: var(--llh-primary-deep, #5a4d8a);
  font-size: 12px;
  font-weight: 600;
  padding: 8px;
  text-align: center;
}

.llh-cal-head-gutter {
  background: var(--llh-surface, #fff);
}

.llh-cal-head.is-weekend-head {
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 60%, var(--llh-surface, #fff));
}

.llh-cal-week-jump {
  background: var(--llh-surface, #fff);
  border: 0;
  border-right: 1px solid var(--llh-line, #e4e1ea);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  color: var(--llh-primary-deep, #5a4d8a);
  padding: 2px;
}

.llh-cal-week-jump:disabled {
  visibility: hidden;
}

.llh-cal-week-jump-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.llh-cal-cell {
  background: #fff;
  min-height: 92px;
  border: 0;
  text-align: left;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: inherit;
  color: inherit;
}

.llh-cal-cell.is-empty {
  background: #faf9fc;
  cursor: default;
}

.llh-cal-cell.is-selected {
  outline: 2px solid var(--llh-primary, #7b6bb5);
  outline-offset: -2px;
  z-index: 1;
}

/* Weekends stay fully clickable and never look disabled — a soft tint
   distinguishes Sat/Sun without a "Weekend" text banner. Lesson plans still
   run Monday–Friday; weekends remain usable for notes and events. */
.llh-cal-cell.is-weekend {
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 35%, #fff);
}

.llh-cal-cell.is-weekend:hover,
.llh-cal-cell.is-weekend:focus-visible {
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 55%, #fff);
}

.llh-cal-chip-day_note {
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 70%, #fff);
  color: var(--llh-primary-deep, #5a4d8a);
}

.llh-cal-day-notes-card textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.llh-cal-day-note-label {
  display: block;
  margin: 8px 0 12px;
}

.llh-cal-day-note-hint {
  margin-top: 8px;
}

.llh-cal-day-note-hint.is-error {
  color: var(--llh-danger, #c56b6b);
}

.llh-cal-daynum {
  font-size: 12px;
  color: var(--llh-muted, #6b6b7b);
}

.llh-cal-weekbar {
  display: block;
  background: var(--llh-primary-soft, #ede8f7);
  color: var(--llh-primary-deep, #5a4d8a);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.llh-cal-chip {
  display: inline-block;
  width: fit-content;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
}

.llh-cal-chip-reminder,
.llh-cal-chip-classroom_event {
  background: var(--llh-accent-soft, #fbece3);
  color: #9a5a38;
}

.llh-cal-chip-closure {
  background: var(--llh-danger-soft, #f8e8e8);
  color: var(--llh-danger, #c56b6b);
}

.llh-calendar-detail h3 {
  margin: 0 0 6px;
  font-family: var(--llh-font-display, Georgia, serif);
}

.llh-calendar-detail-events {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--llh-line, #e4e1ea);
}

.llh-dash-week-card {
  margin-bottom: 16px;
}

.llh-dash-upcoming-list {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.7;
  color: var(--llh-muted, #6b6b7b);
}

.llh-execution-day {
  padding: 12px 0;
  border-top: 1px solid var(--llh-line, #e4e1ea);
}

.llh-execution-day:first-of-type {
  border-top: 0;
}

.llh-check-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0;
  font-size: 14px;
}

.llh-execution-notes {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .llh-calendar-layout {
    grid-template-columns: 1fr;
  }

  .llh-cal-cell {
    min-height: 72px;
    padding: 4px;
  }

  .llh-calendar-grid-7 {
    grid-template-columns: 18px repeat(7, minmax(0, 1fr));
  }

  .llh-cal-week-jump-label {
    display: none;
  }

  .llh-cal-week-strip {
    grid-template-columns: repeat(7, minmax(56px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .llh-cal-day-item {
    flex-direction: column;
  }

  .llh-cal-day-item-actions {
    width: 100%;
  }

  .llh-cal-day-item-actions .ghost-button {
    flex: 1 1 auto;
  }

  .llh-calendar-toolbar .form-actions {
    width: 100%;
  }

  .llh-calendar-toolbar .form-actions .primary-button,
  .llh-calendar-toolbar .form-actions .ghost-button {
    flex: 1 1 auto;
  }
}

.brand-mark.brand-mark-hub {
  display: grid;
  place-items: center;
  background: var(--llh-primary-soft, #ede8f7);
  border: 1px solid var(--llh-line, #e4e1ea);
}

.brand-mark.brand-mark-hub span { display: none; }

/* ========== Teacher experience pass: Weekly Classroom + Dashboard ========== */
.llh-dashboard-clean .llh-dash-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.llh-dash-weekstrip {
  margin-bottom: 16px;
  padding: 16px 18px;
}

.llh-dash-weekstrip-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.llh-dash-weekstrip-head h3 {
  margin: 0 0 4px;
  font-family: var(--llh-font-display, Georgia, serif);
  font-size: 1.2rem;
}

.llh-dash-weekstrip-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.llh-dash-weekstrip-day {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px 6px 8px;
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-height: 76px;
}

.llh-dash-weekstrip-day:hover {
  border-color: color-mix(in srgb, var(--llh-primary, #7b6bb5) 40%, white);
}

.llh-dash-weekstrip-day.is-today {
  outline: 2px solid var(--llh-primary, #7b6bb5);
  outline-offset: -1px;
  background: var(--llh-primary-soft, #ede8f7);
}

.llh-dash-weekstrip-day.has-lesson {
  background: linear-gradient(180deg, #f7f4fc 0%, #fff 55%);
}

.llh-dash-weekstrip-dow {
  font-size: 11px;
  font-weight: 650;
  color: var(--llh-primary-deep, #5a4d8a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.llh-dash-weekstrip-num {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--llh-font-display, Georgia, serif);
  line-height: 1;
}

.llh-dash-weekstrip-marks {
  display: flex;
  gap: 3px;
  min-height: 8px;
  align-items: center;
}

.llh-dash-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.llh-dash-mark-lesson { background: var(--llh-primary, #7b6bb5); }
.llh-dash-mark-event { background: var(--llh-accent, #e8a07a); }
.llh-dash-mark-closure { background: var(--llh-danger, #c56b6b); }
.llh-dash-mark-reminder { background: var(--llh-secondary, #7ba8c9); }
.llh-dash-mark-birthday { background: var(--llh-highlight, #e8c96a); }

.llh-dash-weekstrip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--llh-muted, #6b6b7b);
}

.llh-dash-weekstrip-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.llh-dash-primary .llh-ds-card h3 {
  font-family: var(--llh-font-display, Georgia, serif);
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.llh-dashboard-more {
  margin-top: 8px;
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 12px;
  background: var(--llh-surface, #fff);
  padding: 0;
}

.llh-dashboard-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--llh-primary-deep, #5a4d8a);
}

.llh-dashboard-more > summary::-webkit-details-marker { display: none; }

.llh-dashboard-more-body {
  padding: 0 18px 18px;
  display: grid;
  gap: 16px;
}

.llh-week-classroom {
  display: grid;
  gap: 14px;
  max-width: 1180px;
  min-width: 0;
}

.llh-week-board-wrap {
  min-width: 0;
  max-width: 100%;
}

.llh-week-classroom-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 4px 2px 2px;
}

.llh-week-classroom-hero h3 {
  margin: 0 0 4px;
  font-family: var(--llh-font-display, Georgia, serif);
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.7rem);
}

.llh-week-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.llh-week-workspace:has(.llh-week-notes-panel.is-open) {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
}

.llh-week-day-tabs {
  display: none;
}

.llh-week-day-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.llh-day-card {
  background: var(--llh-surface, #fff);
  border: 1px solid var(--llh-line, #e4e1ea);
  border-top: 3px solid var(--llh-primary, #7b6bb5);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--llh-shadow-soft, 0 8px 24px rgba(42,42,53,.06));
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  cursor: pointer;
}

.llh-day-card.is-active {
  outline: 2px solid var(--llh-primary, #7b6bb5);
  outline-offset: -1px;
}

.llh-day-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.llh-day-card-head h3 {
  margin: 0;
  font-size: 0.95rem;
  font-family: var(--llh-font-display, Georgia, serif);
  line-height: 1.25;
}

.llh-day-edit-btn {
  flex-shrink: 0;
  font-size: 12px;
  min-height: 32px;
  padding: 4px 8px;
}

.llh-week-copy-banner {
  margin: 8px 0 0;
  font-size: 0.92rem;
  color: var(--llh-muted, #6b6b7b);
}

.llh-week-edit-panel {
  background: var(--llh-surface, #fff);
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: var(--llh-shadow-soft, 0 8px 24px rgba(42,42,53,.06));
  position: sticky;
  top: 12px;
}

.llh-week-edit-field {
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
}

.llh-week-edit-field input {
  width: 100%;
}

.llh-week-edit-activities {
  display: grid;
  gap: 12px;
}

.llh-week-edit-activity-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 10px;
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 35%, #fff);
}

.llh-week-edit-status.is-error {
  color: var(--llh-danger, #c56b6b);
}

.llh-week-workspace:has(.llh-week-edit-panel.is-open) {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.llh-day-card-section .eyebrow {
  margin-bottom: 4px;
}

.llh-day-activity-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.llh-day-activity-list .llh-check-row {
  margin: 2px 0;
  font-size: 13px;
}

.llh-day-materials-line,
.llh-day-more-count {
  margin: 0;
  font-size: 12px;
  color: var(--llh-muted, #6b6b7b);
  line-height: 1.35;
}

.llh-day-notes-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  min-height: 36px;
  font-size: 12px;
}

.llh-day-notes-btn.has-notes {
  background: var(--llh-primary-soft, #ede8f7);
  border-color: color-mix(in srgb, var(--llh-primary, #7b6bb5) 30%, white);
  color: var(--llh-primary-deep, #5a4d8a);
}

.llh-week-notes-panel {
  background: var(--llh-surface, #fff);
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 14px;
  padding: 14px;
  display: none;
  gap: 12px;
  box-shadow: var(--llh-shadow-soft, 0 8px 24px rgba(42,42,53,.06));
  position: sticky;
  top: 12px;
}

.llh-week-notes-panel.is-open {
  display: grid;
}

.llh-week-notes-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: start;
}

.llh-week-notes-head h3 {
  margin: 0;
  font-family: var(--llh-font-display, Georgia, serif);
  font-size: 1.15rem;
}

.llh-week-notes-day {
  display: none;
  gap: 10px;
}

.llh-week-notes-day.is-active {
  display: grid;
}

.llh-day-note-label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--llh-muted, #6b6b7b);
}

.llh-day-note-label textarea {
  width: 100%;
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
  min-height: 88px;
  background: var(--llh-bg, #f7f6f9);
  line-height: 1.45;
}

.llh-week-classroom-empty .llh-ds-card {
  padding: 28px;
  max-width: 520px;
}

.llh-schedule-page-title {
  margin-bottom: 10px;
}

.llh-schedule-page-title h2 {
  margin: 0;
}

.llh-schedule-page-title p:not(.eyebrow) {
  display: none;
}

.llh-dashboard-clean .dashboard-welcome {
  margin-bottom: 4px;
}

.llh-dashboard-clean .dashboard-welcome h2 {
  font-family: var(--llh-font-display, Georgia, serif);
  font-size: clamp(1.45rem, 1.2vw + 1rem, 1.85rem);
  margin: 0 0 2px;
}

@media (max-width: 980px) {
  .llh-week-workspace:has(.llh-week-notes-panel.is-open),
  .llh-week-workspace {
    grid-template-columns: 1fr;
  }

  .llh-week-day-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    position: sticky;
    top: var(--llh-topbar-height, calc(56px + env(safe-area-inset-top, 0px)));
    z-index: 3;
    padding: 6px 0;
    background: color-mix(in srgb, var(--llh-bg, #f7f6f9) 90%, white);
  }

  .llh-week-day-tab {
    border: 1px solid var(--llh-line, #e4e1ea);
    background: #fff;
    border-radius: 999px;
    min-height: 40px;
    font-weight: 600;
    color: var(--llh-muted, #6b6b7b);
  }

  .llh-week-day-tab.is-active {
    background: var(--llh-primary-soft, #ede8f7);
    color: var(--llh-primary-deep, #5a4d8a);
    border-color: var(--llh-primary, #7b6bb5);
  }

  .llh-week-day-board {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82%, 320px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .llh-day-card {
    scroll-snap-align: center;
    min-height: auto;
    max-height: none;
  }

  .llh-day-card:not(.is-active) {
    opacity: 0.72;
  }

  .llh-week-notes-panel {
    position: static;
  }

  .llh-week-notes-panel.is-open {
    border-radius: 16px 16px 0 0;
  }
}

.llh-schedule-event-modal {
  max-width: 420px;
  width: calc(100% - 24px);
  margin: 10vh auto;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}

.llh-schedule-event-modal .modal-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

#scheduleEventModal.open {
  display: grid;
  place-items: start center;
  background: rgba(42, 42, 53, 0.45);
}

@media (max-width: 980px) {
  .llh-dashboard-clean .llh-dash-primary {
    grid-template-columns: 1fr;
  }

  .llh-dash-weekstrip-day {
    min-height: 68px;
    padding: 8px 4px;
  }

  .llh-dash-weekstrip-legend {
    gap: 8px 10px;
  }
}

/* Legacy 5-column Mon-Fri override — no longer used by renderMainCalendar
   (Phase A restored the full Sun-Sat grid), kept only in case any older
   cached markup still references it. */
.llh-calendar-grid-weekdays {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.nav-legacy-tag {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--llh-muted, #6b6b7b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.curriculum-planner-retired .nav-link[data-view="curriculum-planner"] {
  display: none !important;
}

.llh-calendar-retire-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--llh-highlight-soft, #fbf5de);
  border: 1px solid color-mix(in srgb, var(--llh-highlight, #e8c96a) 40%, white);
}

.llh-calendar-retire-banner p {
  margin: 0;
  max-width: 62ch;
}

/* ========== Phase 1 polish pass ========== */
.llh-calendar-toolbar-hint {
  margin: 4px 0 0;
  max-width: 36ch;
  font-size: 0.92rem;
}

.llh-calendar-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.llh-calendar-month-nav {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 999px;
  background: var(--llh-surface, #fff);
}

.llh-calendar-month-nav .ghost-button {
  min-width: 40px;
  border: 0;
  box-shadow: none;
}

.llh-calendar-empty-banner {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--llh-highlight-soft, #fbf5de);
  border: 1px solid color-mix(in srgb, var(--llh-highlight, #e8c96a) 35%, white);
  color: var(--llh-ink, #2a2a35);
}

.llh-calendar-empty-banner p { margin: 0; }

.llh-cal-cell.has-lesson {
  background: linear-gradient(180deg, #f7f4fc 0%, #fff 48%);
}

.llh-cal-cell.is-today .llh-cal-daynum {
  color: var(--llh-primary-deep, #5a4d8a);
  font-weight: 700;
}

.llh-cal-today-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--llh-primary, #7b6bb5);
  vertical-align: middle;
}

.llh-cal-weekbar {
  background: var(--llh-primary, #7b6bb5);
  color: #fff;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llh-cal-lesson-stripe {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--llh-primary, #7b6bb5);
  opacity: 0.55;
  margin: 2px 0 4px;
}

.llh-cal-chip {
  display: flex;
  gap: 4px;
  align-items: baseline;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 600;
}

.llh-cal-chip-type {
  opacity: 0.75;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 9px;
}

.llh-cal-chip-reminder {
  background: var(--llh-secondary-soft, #e5f1f8);
  color: #3f6f8c;
}

.llh-cal-chip-classroom_event {
  background: var(--llh-accent-soft, #fbece3);
  color: #9a5a38;
}

.llh-cal-more {
  font-size: 10px;
  color: var(--llh-muted, #6b6b7b);
}

/* ========== Calendar category colors (filters, chips, day-view items) ========== */
.llh-cal-chip-curriculum,
.llh-cal-day-item-curriculum {
  background: var(--llh-primary-soft, #ede8f7);
  color: var(--llh-primary-deep, #5a4d8a);
}

.llh-cal-chip-child,
.llh-cal-day-item-child {
  background: #fde6ef;
  color: #a8386b;
}

.llh-cal-chip-classroom,
.llh-cal-day-item-classroom {
  background: var(--llh-accent-soft, #fbece3);
  color: #9a5a38;
}

.llh-cal-chip-director,
.llh-cal-day-item-director {
  background: var(--llh-secondary-soft, #e5f1f8);
  color: #2f6685;
}

.llh-cal-chip-family,
.llh-cal-day-item-family {
  background: var(--llh-danger-soft, #f8e8e8);
  color: var(--llh-danger, #c56b6b);
}

/* ========== Calendar filter bar ========== */
.llh-cal-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.llh-cal-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--llh-line, #e4e1ea);
  background: var(--llh-surface, #fff);
  color: var(--llh-muted, #6b6b7b);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.llh-cal-filter-chip.is-active {
  background: var(--llh-primary-soft, #ede8f7);
  color: var(--llh-primary-deep, #5a4d8a);
  border-color: var(--llh-primary, #7b6bb5);
}

.llh-cal-filter-chip[aria-pressed="false"] {
  text-decoration: line-through;
  opacity: 0.75;
}

/* ========== Month/Year jump ========== */
.llh-cal-jump-label {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  color: var(--llh-muted, #6b6b7b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.llh-cal-jump-label select {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid var(--llh-line, #e4e1ea);
  padding: 4px 8px;
  font: inherit;
  color: var(--llh-ink, #2a2a35);
  background: var(--llh-surface, #fff);
}

/* ========== Day View ========== */
.llh-cal-day-body {
  display: grid;
  gap: 16px;
}

.llh-cal-day-item-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.llh-cal-day-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--llh-line, #e4e1ea);
}

.llh-cal-day-item p.eyebrow {
  margin: 0 0 4px;
}

.llh-cal-day-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.llh-day-activity-list {
  margin: 8px 0;
  padding-left: 18px;
}

/* ========== Week View ========== */
.llh-calendar-assign-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--llh-primary, #7b6bb5) 30%, var(--llh-line, #e4e1ea));
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 55%, #fff);
}

.llh-calendar-assign-notice p {
  margin: 0;
  flex: 1;
  min-width: 180px;
}

.llh-calendar-assign-notice-copy {
  flex: 1;
  min-width: 180px;
}

.llh-calendar-assign-notice-actions {
  margin-top: 8px;
}

.llh-cal-week-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.llh-cal-week-empty-next,
.llh-cal-print-hint {
  margin-top: 8px;
}

.llh-cal-print-status {
  margin: 0 0 10px;
}

.llh-cal-print-status.is-error {
  color: var(--llh-danger, #c56b6b);
}

.llh-calendar-print-host {
  display: none;
}

.llh-cal-week-glance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: var(--llh-muted, #6b6b7b);
}

.llh-cal-week-glance-inline {
  margin-top: 6px;
}

.llh-cal-week-empty-hint {
  margin: 6px 0 0;
}

.llh-cal-week-empty {
  border: 1px dashed color-mix(in srgb, var(--llh-primary, #7b6bb5) 35%, var(--llh-line, #e4e1ea));
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 45%, #fff);
}

.llh-cal-week-empty h3 {
  margin: 4px 0 8px;
  font-family: var(--llh-font-display, Georgia, serif);
}

.llh-cal-week-empty-actions {
  margin-top: 12px;
}

.llh-cal-week-day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.llh-cal-meta-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--llh-line, #e4e1ea) 70%, #fff);
  color: var(--llh-muted, #6b6b7b);
}

.llh-cal-week-lesson {
  background: var(--llh-primary-soft, #ede8f7);
}

.llh-cal-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.llh-cal-week-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-height: 110px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--llh-line, #e4e1ea);
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.llh-cal-week-day.is-weekend {
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 35%, #fff);
}

.llh-cal-week-day.is-today {
  outline: 2px solid var(--llh-primary, #7b6bb5);
  outline-offset: -2px;
}

.llh-cal-week-day .llh-cal-chip {
  max-width: 100%;
}

/* ========== Add/Edit event modal ========== */
.llh-schedule-event-allday {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;
}

.llh-schedule-event-time-fields {
  display: flex;
  gap: 10px;
}

.llh-schedule-event-time-fields label {
  flex: 1;
}

.llh-schedule-event-delete {
  color: var(--llh-danger, #c56b6b);
  border-color: color-mix(in srgb, var(--llh-danger, #c56b6b) 40%, white);
}

.llh-calendar-lesson-block,
.llh-calendar-empty-week {
  margin-bottom: 12px;
}

.llh-calendar-lesson-block {
  padding: 12px;
  border-radius: 12px;
  background: var(--llh-primary-soft, #ede8f7);
}

.llh-cal-event-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}

.llh-cal-event-card {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--llh-line, #e4e1ea);
  background: #fff;
}

.llh-cal-event-card .eyebrow { margin: 0; }
.llh-cal-event-card strong { font-size: 0.95rem; }
.llh-cal-event-card small { color: var(--llh-muted, #6b6b7b); }

.llh-cal-event-card-closure {
  background: var(--llh-danger-soft, #f8e8e8);
  border-color: color-mix(in srgb, var(--llh-danger, #c56b6b) 25%, white);
}

.llh-cal-event-card-reminder {
  background: var(--llh-secondary-soft, #e5f1f8);
}

.llh-cal-event-card-classroom_event {
  background: var(--llh-accent-soft, #fbece3);
}

.llh-dashboard-clean .llh-dash-primary {
  gap: 18px;
  padding: 4px 0 8px;
}

.llh-dash-primary .llh-ds-card {
  padding: 18px;
  border: 1px solid var(--llh-line, #e4e1ea);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fbfafe 100%);
  box-shadow: none;
}

.llh-dash-today {
  border-top: 3px solid var(--llh-primary, #7b6bb5);
}

.llh-dash-week {
  border-top: 3px solid var(--llh-secondary, #7ba8c9);
}

.llh-dash-upcoming {
  border-top: 3px solid var(--llh-accent, #e8a07a);
}

.llh-dash-theme {
  margin: 0 0 10px;
  color: var(--llh-muted, #6b6b7b);
}

.llh-dash-activity-list {
  margin: 0 0 12px;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--llh-ink, #2a2a35);
}

.llh-dash-today-meta {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--llh-line, #e4e1ea);
}

.llh-dash-meta-line {
  margin: 0;
  font-size: 0.92rem;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
}

.llh-dash-meta-line span {
  font-weight: 650;
  color: var(--llh-ink, #2a2a35);
}

.llh-dash-upcoming-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 10px;
}

.llh-dash-upcoming-list li {
  display: grid;
  gap: 2px;
}

.llh-dash-upcoming-list small {
  color: var(--llh-muted, #6b6b7b);
}

.llh-dashboard-more {
  border-style: dashed;
  background: transparent;
}

.llh-dashboard-more > summary {
  color: var(--llh-muted, #6b6b7b);
  font-weight: 500;
}

@media (max-width: 980px) {
  .llh-calendar-toolbar-hint {
    display: block;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .llh-calendar-toolbar-actions {
    width: 100%;
  }

  .llh-calendar-toolbar-actions .primary-button,
  .llh-calendar-toolbar-actions .ghost-button {
    flex: 1 1 auto;
  }

  .llh-cal-week-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .llh-cal-week-actions .primary-button {
    grid-column: 1 / -1;
  }

  .llh-cal-week-actions .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .llh-cal-week-strip {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .llh-cal-week-day {
    scroll-snap-align: start;
  }

  .llh-calendar-assign-notice {
    flex-direction: column;
    align-items: stretch;
  }

  .llh-calendar-assign-notice-actions {
    flex-wrap: wrap;
  }

  .llh-calendar-month-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .llh-cal-jump-label select {
    min-height: 40px;
    font-size: 0.85rem;
  }

  .llh-cal-filter-chip {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  .llh-cal-cell {
    min-height: 78px;
    padding: 6px;
  }

  .llh-cal-weekbar {
    font-size: 10px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .llh-cal-chip-type { display: none; }

  .llh-day-card {
    padding: 14px;
    gap: 10px;
  }

  .llh-day-card-head h3 {
    font-size: 1.05rem;
  }

  .llh-dash-meta-line {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* ── Lesson Plan Editor (Create vs Edit separation) ── */

.lesson-editor-form-wrap[hidden] {
  display: none !important;
}

.lesson-editor-success {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f7fbf8 0%, #fff 100%);
}

.lesson-editor-success h3 {
  margin: 0;
  font-size: 1.25rem;
}

.lesson-editor-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-editor-success-actions .primary-button,
.lesson-editor-success-actions .ghost-button {
  min-height: 44px;
  flex: 1 1 calc(50% - 4px);
}

.lesson-editor-leave-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
}

.lesson-editor-leave-dialog[hidden] {
  display: none !important;
}

.lesson-editor-leave-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(40, 52, 71, 0.45);
}

.lesson-editor-leave-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 40px rgba(40, 52, 71, 0.18);
}

.lesson-editor-leave-panel h3 {
  margin: 0;
  font-size: 1.15rem;
}

.lesson-editor-leave-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lesson-editor-leave-actions .primary-button,
.lesson-editor-leave-actions .ghost-button,
.lesson-editor-leave-actions .link-button {
  min-height: 44px;
  flex: 1 1 calc(33% - 6px);
}

@media (max-width: 900px) {
  .lesson-editor-success-actions .primary-button,
  .lesson-editor-success-actions .ghost-button,
  .lesson-editor-leave-actions .primary-button,
  .lesson-editor-leave-actions .ghost-button,
  .lesson-editor-leave-actions .link-button {
    flex: 1 1 100%;
  }
}


body.lesson-editor-view .topbar .search-wrap,
body.lesson-editor-view .topbar .account-actions {
  display: none !important;
}

body.lesson-editor-view .topbar {
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--llh-topbar-height, 56px);
  padding: 10px 14px;
  position: sticky;
  top: 0;
  z-index: 25;
}

body.lesson-editor-view .mobile-brand {
  display: flex;
}

body.lesson-editor-view .main {
  overflow-x: clip;
}

.lesson-editor-shell {
  display: grid;
  gap: 12px;
  padding: 8px 0 96px;
  max-width: 920px;
  overflow-x: clip;
  width: 100%;
}

.lesson-editor-sticky-bar {
  position: sticky;
  top: var(--llh-topbar-height, 64px);
  z-index: 24;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: var(--llh-editor-sticky-height, 56px);
  padding: 10px 12px;
  margin: 0 -4px 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(40, 52, 71, 0.08);
  backdrop-filter: blur(10px);
}

.lesson-editor-sticky-bar .ghost-button,
.lesson-editor-sticky-bar .primary-button {
  min-height: 44px;
}

.lesson-editor-save-status {
  flex: 1 1 140px;
  font-size: 0.92rem;
  color: var(--muted, #6b6560);
}

.lesson-editor-form {
  display: grid;
  gap: 16px;
}

.lesson-editor-header h2 {
  margin: 4px 0 8px;
  font-size: 1.45rem;
  line-height: 1.25;
}

.lesson-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.lesson-editor-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  background: #f7fafc;
}

.lesson-editor-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 4px;
}

.lesson-editor-jump-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink, #2f2a25);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.lesson-editor-jump-link:hover,
.lesson-editor-jump-link:focus-visible {
  border-color: #7BA8C9;
  outline: none;
}

#lesson-editor-weekly,
[id^="lesson-editor-day-"] {
  scroll-margin-top: calc(
    var(--llh-topbar-height, 64px)
    + var(--llh-editor-sticky-height, 56px)
    + 12px
  );
}

.lesson-editor-inline-actions {
  padding-bottom: 24px;
}

@media (max-width: 900px) {
  body.lesson-editor-view .topbar {
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
  }

  body.lesson-editor-view .topbar .mobile-brand strong {
    font-size: 14px;
  }

  body.lesson-editor-view .main {
    padding-top: 0;
    overflow-x: clip;
  }

  .lesson-editor-shell {
    padding: 4px 0 calc(112px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }

  .lesson-editor-sticky-bar {
    /* Measured --llh-topbar-height already includes safe-area top padding when present. */
    top: var(--llh-topbar-height, calc(56px + env(safe-area-inset-top, 0px)));
    z-index: 26;
    margin: 0 0 10px;
    border-radius: 12px;
  }

  .lesson-editor-sticky-bar .ghost-button,
  .lesson-editor-sticky-bar .primary-button {
    flex: 1 1 calc(50% - 4px);
    width: 100%;
    max-width: 100%;
  }

  .lesson-editor-save-status {
    flex: 1 1 100%;
    order: -1;
  }

  .lesson-editor-jump-link {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .lesson-editor-form .form-grid-two {
    grid-template-columns: 1fr;
  }

  .lesson-editor-form input,
  .lesson-editor-form select,
  .lesson-editor-form textarea,
  .lesson-editor-form button {
    width: 100%;
    max-width: 100%;
  }

  #lesson-editor-weekly,
  [id^="lesson-editor-day-"] {
    scroll-margin-top: calc(
      var(--llh-topbar-height, calc(56px + env(safe-area-inset-top, 0px)))
      + var(--llh-editor-sticky-height, 56px)
      + 12px
    );
  }
}

/* ========== Shared item action menu + confirm dialog (Delete/Remove/Archive) ========== */
.llh-item-menu {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.llh-item-menu-toggle {
  min-width: 40px;
  min-height: 40px;
  padding: 0 8px;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.llh-item-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 2px;
  min-width: min(240px, calc(100vw - 32px));
  padding: 6px;
  background: var(--white, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius, 10px);
  box-shadow: 0 10px 28px rgba(40, 52, 71, 0.14);
}

.llh-item-menu-panel[hidden] {
  display: none !important;
}

.llh-item-menu-action {
  min-height: 44px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.llh-item-menu-action:hover,
.llh-item-menu-action:focus-visible {
  background: color-mix(in srgb, var(--llh-primary-soft, #ede8f7) 70%, #fff);
  outline: none;
}

.llh-item-menu-danger {
  color: var(--danger, #dc3545);
}

.llh-item-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

.compact-item {
  align-items: flex-start;
  gap: 10px;
}

.compact-item .llh-item-menu,
.goal-card-actions {
  margin-left: auto;
}

.goal-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.compact-item.is-archived,
.simple-observation-card.is-archived {
  opacity: 0.72;
}

.llh-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 16px;
}

.llh-confirm-dialog[hidden] {
  display: none !important;
}

.llh-confirm-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(40, 52, 71, 0.45);
}

.llh-confirm-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 16px 40px rgba(40, 52, 71, 0.18);
}

.llh-confirm-panel h3 {
  margin: 0;
  font-size: 1.15rem;
}

.llh-confirm-panel .muted-copy {
  margin: 0;
}

.llh-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.llh-confirm-actions .primary-button,
.llh-confirm-actions .ghost-button,
.llh-confirm-actions .danger-button {
  min-height: 44px;
}

.llh-cal-day-item-actions {
  align-items: flex-start;
}

@media (max-width: 720px) {
  .llh-item-menu-panel {
    right: auto;
    left: 0;
  }
}

.dlc-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dlc-timeline-item .llh-item-menu {
  margin-left: auto;
}

/* Platform nav + Resources / Settings hubs (Phase 2) */
.nav-section-core,
.nav-section-manage,
.nav-section-account {
  padding-top: 4px;
}

.nav-section-manage:not([hidden]) {
  border-top: 1px solid rgba(123, 107, 181, 0.12);
  margin-top: 8px;
  padding-top: 12px;
}

.nav-section-account {
  border-top: 1px solid rgba(123, 107, 181, 0.12);
  margin-top: 8px;
  padding-top: 12px;
}

.resources-hub-page,
.settings-hub-page,
.platform-placeholder-page {
  display: grid;
  gap: 20px;
}

.resources-hub-grid,
.settings-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.resources-hub-card,
.settings-hub-card,
.platform-placeholder-card {
  border: 1px solid rgba(90, 110, 140, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  padding: 18px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(40, 60, 90, 0.04);
}

.resources-hub-card h3,
.settings-hub-card strong {
  margin: 4px 0 8px;
  font-size: 1.1rem;
  color: #2f3a4a;
}

.resources-hub-card p,
.settings-hub-card span,
.platform-placeholder-card p {
  margin: 0;
  color: #5b6675;
  line-height: 1.45;
}

.resources-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.platform-manage-page,
.platform-placeholder-page {
  display: grid;
  gap: 20px;
}

.platform-manage-actions {
  margin-top: 0;
}

.platform-manage-card h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: #2f3a4a;
}

.platform-manage-list {
  display: grid;
  gap: 10px;
}

.platform-manage-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(90, 110, 140, 0.14);
  border-radius: 12px;
  background: #fff;
}

.platform-manage-row-stack {
  display: grid;
  gap: 10px;
}

.platform-manage-row p,
.platform-manage-card .muted-copy {
  margin: 4px 0 0;
  color: #5b6675;
  line-height: 1.4;
}

.platform-manage-row-actions,
.platform-family-children {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-manage-form {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.platform-enrollment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.settings-hub-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.settings-hub-card:hover,
.settings-hub-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(40, 60, 90, 0.08);
  outline: none;
}

.settings-hub-card strong {
  display: block;
}

@media (max-width: 720px) {
  .resources-hub-grid,
  .settings-hub-grid {
    grid-template-columns: 1fr;
  }
}

/* Daily Logs attendance-first workspace (Phase 4) */
.dlc-dashboard-attendance {
  display: grid;
  gap: 20px;
}

.dlc-home-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dlc-att-section {
  display: grid;
  gap: 12px;
}

.dlc-att-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dlc-att-section-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.dlc-att-count {
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef3f8;
  color: #3d4b5c;
  font-weight: 700;
  font-size: 0.85rem;
}

.dlc-att-empty {
  margin: 0;
  color: #6b7785;
}

.dlc-att-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(90, 110, 140, 0.16);
  border-radius: 16px;
  background: #fff;
}

.dlc-att-card-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.dlc-att-badge {
  font-size: 1.35rem;
  line-height: 1;
}

.dlc-att-card.dlc-att-checked-in {
  border-color: rgba(46, 160, 110, 0.35);
  background: linear-gradient(180deg, #f4fbf7 0%, #ffffff 70%);
}

.dlc-att-card.dlc-att-absent {
  border-color: rgba(200, 90, 90, 0.28);
  background: linear-gradient(180deg, #fff7f7 0%, #ffffff 70%);
}

.dlc-att-card.dlc-att-checked-out {
  opacity: 0.92;
}

.dlc-att-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dlc-att-primary {
  min-height: 44px;
  min-width: 120px;
}

.dlc-day-workspace {
  display: grid;
  gap: 16px;
}

.dlc-day-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.dlc-day-header h3 {
  margin: 4px 0;
}

.dlc-day-times {
  display: flex;
  gap: 18px;
}

.dlc-day-times div {
  display: grid;
  gap: 4px;
  min-width: 90px;
}

.dlc-day-times span {
  color: #6b7785;
  font-size: 0.85rem;
}

.dlc-day-times strong {
  font-size: 1.15rem;
}

.dlc-day-attendance-actions,
.dlc-day-quick-actions .dlc-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dlc-optional-ai,
.dlc-optional-ai-inline {
  border-radius: 14px;
  border: 1px dashed rgba(90, 110, 140, 0.25);
  padding: 12px 14px;
  background: #fafbfc;
}

.dlc-optional-ai > summary,
.dlc-optional-ai-inline > summary {
  cursor: pointer;
  font-weight: 600;
  color: #3d4b5c;
}

.dlc-day-timeline .dlc-timeline-list {
  display: grid;
  gap: 10px;
}

@media (max-width: 720px) {
  .dlc-att-card-main {
    grid-template-columns: auto 1fr;
  }

  .dlc-att-card-main .dlc-status-badge {
    grid-column: 2;
  }

  .dlc-day-times {
    width: 100%;
  }
}

/* Settings hub groups (Phase 5) */
.settings-hub-identity {
  margin-top: 6px;
  text-transform: capitalize;
}

.settings-hub-groups {
  display: grid;
  gap: 24px;
}

.settings-hub-group-header h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.settings-hub-group-header p {
  margin: 0 0 12px;
  color: #6b7785;
}

.settings-hub-card-disabled {
  opacity: 0.72;
  cursor: default;
}

/* Documentation Helpers hub — clean, mobile-first helper picker */
.doc-helpers-page-title {
  margin-bottom: 8px;
}

.doc-helpers-page-title h2 {
  margin: 0 0 8px;
}

.doc-helpers-page-title p {
  margin: 0;
  max-width: 36rem;
  color: var(--muted, #5b6675);
  line-height: 1.5;
}

.doc-helpers-child-step {
  margin-top: 18px;
  max-width: 420px;
}

.doc-helpers-child-picker {
  display: grid;
  gap: 8px;
}

.doc-helpers-child-picker select {
  min-height: 48px;
  width: 100%;
}

.doc-helpers-section-heading {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #35506b;
}

.doc-helpers-child-picker .doc-helpers-section-heading {
  margin: 0;
}

.doc-helpers-most-used,
.doc-helpers-hub {
  margin-top: 22px;
}

.doc-helpers-card-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.doc-helper-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid rgba(90, 110, 140, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(40, 60, 90, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.doc-helper-card:hover,
.doc-helper-card:focus-visible {
  border-color: rgba(91, 155, 213, 0.55);
  background: #f7fbff;
  outline: none;
  transform: translateY(-1px);
}

.doc-helper-card.is-selected {
  border-color: rgba(91, 155, 213, 0.7);
  background: linear-gradient(180deg, #f4f9ff 0%, #eef6fc 100%);
  box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.18);
}

.doc-helper-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(91, 155, 213, 0.12);
  color: var(--primary-dark, #3a7abf);
  flex-shrink: 0;
}

.doc-helper-card-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doc-helper-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.doc-helper-card-copy strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink, #1a2b4a);
}

.doc-helper-card-copy span {
  color: #5b6675;
  line-height: 1.4;
  font-size: 0.92rem;
}

.doc-helper-card-arrow {
  color: #7a8aa0;
  font-size: 1.15rem;
  font-weight: 600;
}

.doc-helpers-compose {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid rgba(90, 110, 140, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.doc-helpers-compose-header {
  margin-bottom: 14px;
}

.doc-helpers-compose-header h3 {
  margin: 0 0 6px;
}

.doc-helpers-compose-header .muted-copy {
  margin: 0;
}

.doc-helpers-optional-label {
  font-weight: 500;
  color: #7a8aa0;
}

.doc-helpers-type-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.doc-helpers-form {
  display: grid;
  gap: 14px;
}

.doc-helpers-optional-note {
  margin-top: 2px;
}

.doc-helpers-results {
  margin-top: 24px;
}

.doc-helpers-more-tools {
  margin-top: 28px;
}

.doc-helpers-more-tools > summary {
  cursor: pointer;
  font-weight: 700;
  color: #35506b;
}

.doc-helpers-more-tools[open] > summary {
  margin-bottom: 10px;
}

@media (min-width: 720px) {
  .doc-helpers-card-list-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .doc-helpers-hub .doc-helpers-card-list {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .doc-helpers-compose {
    max-width: 720px;
  }
}

@media (min-width: 980px) {
  .doc-helpers-child-step,
  .doc-helpers-most-used,
  .doc-helpers-hub,
  .doc-helpers-compose,
  .doc-helpers-results,
  .doc-helpers-more-tools {
    max-width: 760px;
  }
}

.settings-subpage,
.settings-subpage-form {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.settings-subpage-form .settings-check-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Admin preview simulator badge + analytics states */
.admin-preview-badge {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(47, 95, 138, 0.28);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(26, 43, 74, 0.16);
  font-size: 0.92rem;
  font-weight: 600;
  color: #2f5f8a;
}

.admin-preview-badge.is-simulating {
  border-color: rgba(196, 112, 74, 0.4);
  background: linear-gradient(180deg, #fff8f3 0%, #ffefe6 100%);
  color: #8a4b28;
}

.admin-preview-badge .ghost-button {
  min-height: 36px;
  padding: 6px 10px;
}

.admin-preview-active-chip {
  margin: 10px 0 0;
  font-size: 0.9rem;
  color: #40506a;
}

.admin-analytics-state {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(91, 155, 213, 0.28);
  background: #f4f9fd;
}

.admin-analytics-state.is-loading {
  background: linear-gradient(180deg, #f4f9fd 0%, #eef6fb 100%);
}

.admin-analytics-state.is-error {
  border-color: rgba(196, 112, 74, 0.35);
  background: linear-gradient(180deg, #fff8f3 0%, #ffefe6 100%);
}

.admin-analytics-state.is-success {
  border-color: rgba(46, 125, 50, 0.28);
  background: #f3faf4;
}

.admin-analytics-state p {
  margin: 0 0 4px;
}

.admin-analytics-state .muted-copy {
  margin: 0 0 8px;
}

body.admin-preview-simulating .sidebar .brand h1::after {
  content: " · Preview";
  font-size: 0.7em;
  font-weight: 600;
  color: #8a4b28;
}

@media (max-width: 760px) {
  .admin-preview-badge {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    justify-content: space-between;
  }
}

/* ── Signup conversion wizard ───────────────────────────────────────── */
#authModal .auth-modal-card {
  width: min(460px, 100%);
}

#authModal .auth-modal-card--plans {
  width: min(980px, 100%);
  max-height: min(92vh, 920px);
  overflow: auto;
}

.signup-wizard-progress {
  margin: 0 0 14px;
}

.signup-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signup-wizard-step {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f4ef;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.signup-wizard-step.is-active,
.signup-wizard-step.is-done {
  border-color: #5b9bd5;
  color: #245f8f;
  background: #eef6fc;
}

.signup-step-lede {
  margin: 0 0 12px;
  color: var(--muted);
}

.signup-persona-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.signup-persona-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.signup-persona-card strong {
  font-size: 1.05rem;
}

.signup-persona-card span:last-child {
  color: var(--muted);
  font-size: 0.92rem;
}

.signup-persona-card.is-selected,
.signup-persona-card:hover,
.signup-persona-card:focus-visible {
  border-color: #5b9bd5;
  box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.18);
  outline: none;
}

.signup-persona-icon {
  font-size: 1.35rem;
}

.signup-program-name-field {
  margin-top: 4px;
}

.signup-plan-intro {
  margin: 0 0 10px;
  text-align: center;
  font-weight: 600;
  color: #3d4f66;
}

.signup-founding-urgency {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid rgba(196, 92, 62, 0.35);
  border-radius: 10px;
  background: #fff7f2;
  color: #7a3a24;
  font-size: 0.92rem;
}

.signup-founding-urgency strong {
  white-space: nowrap;
}

.signup-founding-urgency.is-sold-out {
  border-color: var(--line);
  background: #f6f7f9;
  color: var(--muted);
}

.signup-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: stretch;
}

.signup-plan-grid--founding-open {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
}

.signup-plan-grid--sold-out {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
}

.signup-plan-card--pro-featured {
  border: 2px solid #5b9bd5;
  box-shadow: 0 14px 28px rgba(47, 95, 134, 0.12);
}

.signup-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
}

.signup-plan-card h3,
.signup-plan-card p {
  margin: 0;
}

.signup-plan-subtitle {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.signup-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px !important;
}

.signup-plan-price strong {
  font-size: 1.7rem;
  color: #2f5f86;
  line-height: 1;
}

.signup-plan-price span {
  color: var(--muted);
  font-size: 0.9rem;
}

.signup-plan-price-compare {
  color: var(--muted);
  font-size: 0.9rem;
}

.signup-plan-price--founding strong {
  color: #8a4b28;
  font-size: 1.9rem;
}

.signup-plan-preferred-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(56, 96, 98, 0.08);
  color: var(--ink, #243041);
  font-size: 0.95rem;
  line-height: 1.4;
}

.signup-plan-card--founding.is-preferred {
  box-shadow: 0 0 0 2px rgba(56, 96, 98, 0.45), 0 14px 28px rgba(122, 58, 36, 0.12);
}

.signup-plan-card--founding {
  border: 2px solid #c45c3e;
  background: linear-gradient(180deg, #fffaf6 0%, #ffffff 42%);
  box-shadow: 0 14px 28px rgba(122, 58, 36, 0.12);
  transform: scale(1.02);
  z-index: 1;
}

.llh-public-preview-cta {
  position: relative;
  z-index: 40;
  pointer-events: auto;
}

.llh-public-preview-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 41;
  pointer-events: auto;
}

.llh-public-preview-cta-actions .primary-button,
.llh-public-preview-cta-actions .ghost-button {
  position: relative;
  z-index: 42;
  pointer-events: auto;
  min-height: 44px;
}

.signup-plan-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #c45c3e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.signup-plan-lock,
.signup-plan-spots,
.signup-plan-provider-note {
  color: #5a4638;
  font-size: 0.9rem;
  line-height: 1.4;
}

.signup-plan-includes,
.signup-plan-excludes {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: 0.88rem;
}

.signup-plan-includes li::before {
  content: "✅ ";
}

.signup-plan-excludes li {
  color: var(--muted);
}

.signup-plan-excludes li::before {
  content: "❌ ";
}

.signup-plan-card .primary-button,
.signup-plan-card .ghost-button {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

.signup-plan-card--free {
  background: #fbfbfa;
}

@media (max-width: 900px) {
  #authModal .auth-modal-card--plans {
    width: min(560px, 100%);
  }

  .signup-plan-grid {
    grid-template-columns: 1fr;
  }

  .signup-plan-card--founding {
    order: -1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .founding-banner,
  .home-founding-banner {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }

  .founding-upgrade-banner,
  .free-library-conversion-banner {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .founding-upgrade-banner-actions,
  .free-library-conversion-banner-actions {
    min-width: 0;
  }

  .founding-upgrade-price {
    font-size: 1.35rem;
  }

  .signup-founding-urgency {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* LLH View Weekly Plan / Edit Week + Settings account cleanup */
.sidebar-account-anchor { display: none !important; }
.llh-weekly-plan { display: grid; gap: 1.25rem; }
.llh-weekly-plan-hero {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}
.llh-weekly-plan-actions { flex-wrap: wrap; gap: 0.65rem; }
.llh-weekly-plan-days {
  display: grid;
  gap: 1rem;
}
.llh-weekly-plan-day,
.llh-weekly-plan-edit-day {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.85rem;
}
.llh-weekly-plan-day-head h3,
.llh-weekly-plan-edit-day h3 {
  margin: 0.15rem 0;
}
.llh-weekly-plan-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.llh-weekly-plan-activity-list li {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: var(--cream);
}
.llh-weekly-plan-edit-form {
  display: grid;
  gap: 1rem;
}
.llh-week-edit-activity-row {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
}
@media (min-width: 900px) {
  .llh-weekly-plan-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llh-week-edit-activity-row {
    grid-template-columns: 1.4fr 1fr 0.8fr 1.2fr auto;
    align-items: end;
  }
}
.settings-hub-badge {
  display: inline-flex;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #e8f3ff;
  color: #255f96;
  font-size: 0.75rem;
  font-weight: 700;
}
.settings-hub-card-danger {
  border-color: #efc2c2;
  background: #fff7f7;
}
.settings-hub-card-danger strong { color: #9b2c2c; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tablet / mid-size responsive polish (phones → iPads → small laptops)
   Keeps the same visual language; only adjusts layout density & overflow.
   Shell hamburger + drawer activates at max-width: 1100px (see above).
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  overflow-x: clip;
  max-width: 100%;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.main,
.view,
.section-block,
.modal-card,
.llh-calendar-shell,
.lesson-workspace,
.resource-viewer-card {
  min-width: 0;
  max-width: 100%;
}

/* Prefer contained table scroll over page-level horizontal scroll. */
.admin-table-wrap,
.comparison-table-wrap,
.ai-usage-log-table-wrap,
.llh-cal-week-strip {
  max-width: 100%;
}

@media (max-width: 1100px) {
  /* Comfortable content padding on tablets once the sidebar becomes a drawer. */
  .view {
    padding: 16px 18px 28px;
  }

  .topbar {
    padding: 12px 16px;
  }

  .topbar .search-wrap {
    width: 100%;
    min-width: 0;
  }

  .account-actions {
    width: 100%;
  }

  .account-actions .ghost-button,
  .account-actions .primary-button {
    flex: 1 1 auto;
    min-height: 44px;
  }

  /* Stack side-by-side page shells that fight narrow content widths. */
  .admin-layout,
  .child-layout,
  .child-profile-grid,
  .account-layout,
  .planner-dashboard,
  .planner-form,
  .ai-layout,
  .generator-grid,
  .generator-panel,
  .two-column,
  .hero {
    grid-template-columns: 1fr !important;
  }

  .child-sidebar,
  .planner-suggestions {
    position: static;
  }

  .empty-state,
  .profile-empty-state {
    width: 100%;
    max-width: 100%;
  }

  /* Cards & grids: 2 columns when space allows, else stack. */
  .lesson-library-grid,
  .resource-grid,
  .category-grid,
  .ai-tool-grid,
  .future-tool-grid,
  .home-stats,
  .library-stats,
  .recommendation-grid,
  .planning-dashboard-grid,
  .support-simple-card-grid,
  .support-category-grid,
  .dlc-action-cards,
  .analytics-summary-grid,
  .admin-owner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-plan-card,
  .resource-card,
  .price-card,
  .section-block {
    min-width: 0;
  }

  /* Forms, buttons, modals */
  .primary-button,
  .ghost-button,
  .small-button,
  .download-button,
  .favorite-button,
  .prompt-chip,
  .nav-link {
    min-height: 44px;
  }

  .modal {
    align-items: flex-start;
    padding: 12px;
    overflow: auto;
  }

  .modal-card,
  #authModal .modal-card,
  #feedbackModal .modal-card,
  .resource-viewer-modal .resource-viewer-card,
  .llh-schedule-event-modal {
    width: min(720px, 100%);
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    margin: 0 auto;
  }

  .founding-banner,
  .home-founding-banner,
  .founding-upgrade-banner {
    grid-template-columns: 1fr;
  }

  .founding-banner .form-actions,
  .home-founding-banner .form-actions,
  .founding-upgrade-banner-actions,
  .dashboard-install-actions {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  .founding-banner .form-actions .primary-button,
  .founding-banner .form-actions .ghost-button,
  .home-founding-banner .form-actions .primary-button,
  .home-founding-banner .form-actions .ghost-button,
  .founding-upgrade-banner-actions .primary-button,
  .founding-upgrade-banner-actions .ghost-button,
  .dashboard-install-actions .primary-button,
  .dashboard-install-actions .ghost-button {
    width: 100%;
    min-height: 44px;
  }

  .dashboard-install-card {
    flex-direction: column;
    align-items: stretch;
  }

  /* Calendar tablet denseness */
  .llh-calendar-toolbar,
  .llh-calendar-toolbar-actions {
    width: 100%;
  }

  .llh-calendar-month-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .llh-calendar-month-nav .ghost-button,
  .llh-calendar-month-nav .primary-button,
  .llh-calendar-toolbar-actions .primary-button,
  .llh-calendar-toolbar-actions .ghost-button,
  .llh-calendar-add-row .primary-button {
    min-height: 44px;
  }

  .llh-calendar-grid,
  .llh-calendar-grid-7 {
    width: 100%;
    max-width: 100%;
  }

  .llh-calendar-grid-7 {
    grid-template-columns: 22px repeat(7, minmax(0, 1fr));
  }

  .llh-cal-cell {
    min-height: 72px;
    padding: 6px 4px;
    min-width: 0;
  }

  .llh-cal-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .llh-cal-filter-chip {
    min-height: 40px;
    padding: 8px 12px;
  }

  .llh-cal-week-strip {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Lesson workspace action bars */
  .lesson-workspace-primary-actions .lesson-workspace-secondary-btn {
    min-width: 0;
    flex: 1 1 calc(50% - 8px);
  }

  .lesson-library-header,
  .page-title {
    min-width: 0;
  }

  .page-title h2,
  .lesson-library-title,
  .llh-schedule-page-title h2 {
    overflow-wrap: anywhere;
  }

  /* Documentation helpers / activity / behavior cards */
  .doc-helpers-most-used .doc-helpers-card-list,
  .doc-helpers-card-list-compact,
  .doc-helpers-hub .doc-helpers-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Weekly planner */
  .llh-weekly-plan-days {
    grid-template-columns: 1fr;
  }

  .llh-weekly-plan-actions,
  .llh-weekly-plan-hero {
    flex-wrap: wrap;
  }

  .llh-weekly-plan-actions .primary-button,
  .llh-weekly-plan-actions .ghost-button {
    min-height: 44px;
  }

  /* Settings / admin tables stay in their scroll containers */
  .admin-table {
    min-width: 640px;
  }

  .admin-sub-nav,
  .admin-vis-tabs,
  .admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .admin-sub-tab {
    min-height: 40px;
  }

  .settings-hub-grid,
  .settings-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Keep form fields usable */
  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }
}

/* Mid tablets: allow roomier 2-col planning cards once the drawer frees horizontal space. */
@media (min-width: 768px) and (max-width: 1100px) {
  .view {
    padding: 18px 22px 32px;
  }

  .lesson-library-grid,
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .llh-weekly-plan-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-helpers-most-used .doc-helpers-card-list,
  .doc-helpers-card-list-compact,
  .doc-helpers-hub .doc-helpers-card-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modal-card,
  #authModal .modal-card {
    width: min(560px, 100%);
  }

  #authModal .auth-modal-card--plans {
    width: min(720px, 100%);
  }

  .llh-cal-cell {
    min-height: 84px;
  }
}

/* Phones: collapse remaining 2-col card grids. */
@media (max-width: 640px) {
  .lesson-library-grid,
  .resource-grid,
  .category-grid,
  .ai-tool-grid,
  .future-tool-grid,
  .home-stats,
  .library-stats,
  .recommendation-grid,
  .planning-dashboard-grid,
  .support-simple-card-grid,
  .support-category-grid,
  .dlc-action-cards,
  .analytics-summary-grid,
  .admin-owner-grid,
  .doc-helpers-most-used .doc-helpers-card-list,
  .doc-helpers-card-list-compact,
  .doc-helpers-hub .doc-helpers-card-list,
  .settings-hub-grid,
  .settings-card-grid,
  .llh-weekly-plan-days {
    grid-template-columns: 1fr;
  }

  .lesson-workspace-primary-actions .lesson-workspace-secondary-btn {
    flex: 1 1 100%;
  }

  .llh-calendar-grid-7 {
    grid-template-columns: 18px repeat(7, minmax(0, 1fr));
  }

  .llh-cal-cell {
    min-height: 64px;
    padding: 4px 2px;
  }

  .llh-cal-chip {
    font-size: 9px;
  }

  .view {
    padding: 12px;
  }
}

/* Landscape phones / short tablets */
@media (max-width: 1100px) and (max-height: 520px) {
  .modal-card,
  .resource-viewer-modal .resource-viewer-card {
    max-height: calc(100dvh - 16px);
  }

  .llh-cal-cell {
    min-height: 56px;
  }
}