/*
 * Binder — Your Homeschool Binder
 * Kinetic Atelier design system
 */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Surface hierarchy — warm sand, muted amber */
  --surface:               #faf6f0;
  --surface-container-low: #f5efe4;
  --surface-container:     #efe7d8;
  --surface-container-high:#e8dece;
  --surface-lowest:        #ffffff;
  --surface-variant:       #e5d9c3;

  /* Brand — warm brown / teal / purple triad */
  --primary:               #7b5a20;
  --primary-hover:         #6a4e1a;
  --primary-dim:           #6a4e1a;
  --primary-container:     #e8b44a;
  --primary-fixed:         #e8b44a;
  --on-primary:            #fdf6ec;
  --secondary:             #006571;
  --secondary-container:   #58e7fb;
  --tertiary:              #912da3;
  --tertiary-container:    #f189ff;
  --tertiary-light:        #e37af2;

  /* On-surface text — warm brown, never pure black */
  --on-surface:            #3c2c00;
  --on-surface-mid:        #6e5922;
  --on-surface-subtle:     #8b743a;

  /* Outline */
  --outline-variant:       rgba(197, 170, 107, 0.22);
  --outline:               #8b743a;

  /* Ambient shadow base — warm tinted (slightly stronger for crisper lift) */
  --shadow:                rgba(60, 44, 0, 0.075);

  /* Data / badge colors — vibrant palette */
  --terracotta:            #ac2c00;
  --terra-pale:            #fff0ec;
  --gold:                  #755700;
  --gold-pale:             #fff8e6;
  --sky:                   #0049e6;
  --sky-pale:              #eef2ff;
  --rose:                  #b41340;
  --rose-pale:             #fff0f3;
  --sage-pale:             #f2efff;

  /* Error */
  --error:                 #b41340;
  --error-container:       #f74b6d;

  /* Nature / community module aliases */
  --nc-surface:            var(--surface-lowest);
  --nc-bg:                 var(--surface);
  --nc-border:             var(--outline-variant);
  --nc-surface-hover:      var(--surface-container-low);
  --nc-text:               var(--on-surface);
  --nc-text-secondary:     var(--on-surface-mid);
  --nc-text-muted:         var(--on-surface-subtle);
  --nc-forest:             #2d8a4e;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  /* Type scale */
  --text-xs:   0.65rem;
  --text-sm:   0.75rem;
  --text-base: 0.85rem;
  --text-md:   0.95rem;
  --text-lg:   1.15rem;
  --text-xl:   1.4rem;
  --text-2xl:  2rem;
  --text-3xl:  2.8rem;

  /* Radius scale — tighter corners read sharper without changing layout */
  --radius-sm:   0.3125rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1.125rem;
  --radius-full: 9999px;

  /* Shadow scale — less blur, clearer edge */
  --shadow-sm: 0 1px 2px var(--shadow);
  --shadow-md: 0 2px 10px var(--shadow);
  --shadow-lg: 0 4px 18px var(--shadow);
}

/* ─── THEME: Meadow (light, green/sage) ─── */
body.theme-meadow {
  --surface:               #f4f8f2;
  --surface-container-low: #e8f0e4;
  --surface-container:     #dce6d6;
  --surface-container-high:#d0dcc8;
  --surface-lowest:        #ffffff;
  --surface-variant:       #c6d4bc;
  --primary:               #2d6a3e;
  --primary-hover:         #245832;
  --primary-dim:           #245832;
  --primary-container:     #6bc486;
  --primary-fixed:         #6bc486;
  --on-primary:            #f0faf2;
  --secondary:             #5a7052;
  --secondary-container:   #b8ddb0;
  --tertiary:              #3b6b8a;
  --tertiary-container:    #a3d4f0;
  --tertiary-light:        #7bbde0;
  --on-surface:            #1a2e1e;
  --on-surface-mid:        #3d5c3a;
  --on-surface-subtle:     #5e7a58;
  --outline-variant:       rgba(93, 122, 88, 0.22);
  --outline:               #5e7a58;
  --shadow:                rgba(30, 60, 30, 0.075);
}

body.theme-meadow {
  background: linear-gradient(180deg, #f4f8f2 0%, #e8f0e4 100%);
}

/* ─── THEME: Chalk Dust (light, gray-blue academic) ─── */
body.theme-chalk_dust {
  --surface:               #f2f4f7;
  --surface-container-low: #e8ebf0;
  --surface-container:     #dde1e8;
  --surface-container-high:#d2d7e0;
  --surface-lowest:        #ffffff;
  --surface-variant:       #c8ced8;
  --primary:               #3a4a6b;
  --primary-hover:         #2e3d5a;
  --primary-dim:           #2e3d5a;
  --primary-container:     #7a9bc8;
  --primary-fixed:         #7a9bc8;
  --on-primary:            #eef2f8;
  --secondary:             #5c6b82;
  --secondary-container:   #b0c4de;
  --tertiary:              #8b5e3c;
  --tertiary-container:    #e0c4a8;
  --tertiary-light:        #d0a87a;
  --on-surface:            #1c2433;
  --on-surface-mid:        #3d4a5e;
  --on-surface-subtle:     #5a6578;
  --outline-variant:       rgba(90, 101, 120, 0.22);
  --outline:               #5a6578;
  --shadow:                rgba(28, 36, 51, 0.075);
}

body.theme-chalk_dust {
  background: linear-gradient(180deg, #f2f4f7 0%, #e8ebf0 100%);
}

/* ─── THEME: Ember (dark, warm orange) ─── */
body.theme-ember {
  --surface:               #1c1410;
  --surface-container-low: #261c16;
  --surface-container:     #30241c;
  --surface-container-high:#3a2c22;
  --surface-lowest:        #140e0a;
  --surface-variant:       #44342a;
  --primary:               #e89040;
  --primary-hover:         #d07a2e;
  --primary-dim:           #d07a2e;
  --primary-container:     #a06020;
  --primary-fixed:         #a06020;
  --on-primary:            #1c1410;
  --secondary:             #d4a574;
  --secondary-container:   #5c3d22;
  --tertiary:              #e07060;
  --tertiary-container:    #6b2e28;
  --tertiary-light:        #c45040;
  --on-surface:            #f0e4d8;
  --on-surface-mid:        #c4aa8e;
  --on-surface-subtle:     #8e7460;
  --outline-variant:       rgba(142, 116, 96, 0.2);
  --outline:               #8e7460;
  --shadow:                rgba(0, 0, 0, 0.2);
  --error:                 #ff6b6b;
  --error-container:       #a02020;
}

body.theme-ember {
  background: linear-gradient(180deg, #1c1410 0%, #261c16 100%);
  color: #f0e4d8;
}

body.theme-ember .sidebar-shell {
  background: #261c16;
  box-shadow: 24px 0 32px rgba(0, 0, 0, 0.15);
}

body.theme-ember .sidebar-logo-icon {
  background: #a06020;
}

body.theme-ember .sidebar-logo-text h1 {
  color: #e89040;
}

body.theme-ember .sidebar-nav-item {
  color: #c4aa8e;
}

body.theme-ember .sidebar-nav-item--active {
  background: linear-gradient(135deg, #a06020, #e89040);
  color: #1c1410;
}

body.theme-ember .content-search-input {
  background: #30241c;
  color: #f0e4d8;
  border: 1px solid #44342a;
}

body.theme-ember ::selection {
  background: rgba(232, 144, 64, 0.3);
}

/* ─── THEME: Midnight Garden (dark, navy/lavender) ─── */
body.theme-midnight_garden {
  --surface:               #12141e;
  --surface-container-low: #1a1d2a;
  --surface-container:     #222636;
  --surface-container-high:#2a2f42;
  --surface-lowest:        #0c0e16;
  --surface-variant:       #32384e;
  --primary:               #a78bfa;
  --primary-hover:         #8b6ff0;
  --primary-dim:           #8b6ff0;
  --primary-container:     #6d4ed4;
  --primary-fixed:         #6d4ed4;
  --on-primary:            #12141e;
  --secondary:             #7dd3fc;
  --secondary-container:   #1e4060;
  --tertiary:              #f0abfc;
  --tertiary-container:    #6b2080;
  --tertiary-light:        #e07af0;
  --on-surface:            #e4e2f0;
  --on-surface-mid:        #a8a4be;
  --on-surface-subtle:     #6e6a88;
  --outline-variant:       rgba(110, 106, 136, 0.2);
  --outline:               #6e6a88;
  --shadow:                rgba(0, 0, 0, 0.25);
  --error:                 #ff7eb3;
  --error-container:       #801050;
}

body.theme-midnight_garden {
  background: linear-gradient(180deg, #12141e 0%, #1a1d2a 100%);
  color: #e4e2f0;
}

body.theme-midnight_garden .sidebar-shell {
  background: #1a1d2a;
  box-shadow: 24px 0 32px rgba(0, 0, 0, 0.2);
}

body.theme-midnight_garden .sidebar-logo-icon {
  background: #6d4ed4;
}

body.theme-midnight_garden .sidebar-logo-text h1 {
  color: #a78bfa;
}

body.theme-midnight_garden .sidebar-nav-item {
  color: #a8a4be;
}

body.theme-midnight_garden .sidebar-nav-item--active {
  background: linear-gradient(135deg, #6d4ed4, #a78bfa);
  color: #12141e;
}

body.theme-midnight_garden .content-search-input {
  background: #222636;
  color: #e4e2f0;
  border: 1px solid #32384e;
}

body.theme-midnight_garden ::selection {
  background: rgba(167, 139, 250, 0.3);
}

/* ─── THEME PICKER (settings) ─── */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .theme-picker { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .theme-picker { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
}

.theme-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-preview {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 2px solid var(--surface-container);
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}

.theme-option--active .theme-preview,
.theme-radio:checked ~ .theme-preview {
  border-color: var(--primary);
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(60, 44, 0, 0.12);
}

.theme-preview-bar {
  height: 30%;
}

.theme-preview-content {
  flex: 1;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
}

.theme-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.theme-preview-line {
  height: 4px;
  border-radius: 2px;
  width: 80%;
}

.theme-preview-line--short {
  width: 50%;
}

/* Theme preview colors */
.theme-preview--binder {
  background: #faf6f0;
}
.theme-preview--binder .theme-preview-bar { background: #e8b44a; }
.theme-preview--binder .theme-preview-dot { background: #7b5a20; }
.theme-preview--binder .theme-preview-line { background: #e5d9c3; }

.theme-preview--meadow {
  background: #f4f8f2;
}
.theme-preview--meadow .theme-preview-bar { background: #6bc486; }
.theme-preview--meadow .theme-preview-dot { background: #2d6a3e; }
.theme-preview--meadow .theme-preview-line { background: #c6d4bc; }

.theme-preview--chalk_dust {
  background: #f2f4f7;
}
.theme-preview--chalk_dust .theme-preview-bar { background: #7a9bc8; }
.theme-preview--chalk_dust .theme-preview-dot { background: #3a4a6b; }
.theme-preview--chalk_dust .theme-preview-line { background: #c8ced8; }

.theme-preview--ember {
  background: #1c1410;
}
.theme-preview--ember .theme-preview-bar { background: #a06020; }
.theme-preview--ember .theme-preview-dot { background: #e89040; }
.theme-preview--ember .theme-preview-line { background: #44342a; }

.theme-preview--midnight_garden {
  background: #12141e;
}
.theme-preview--midnight_garden .theme-preview-bar { background: #6d4ed4; }
.theme-preview--midnight_garden .theme-preview-dot { background: #a78bfa; }
.theme-preview--midnight_garden .theme-preview-line { background: #32384e; }

.theme-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--on-surface);
}

.theme-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.35rem;
  border-radius: 0.2rem;
  background: var(--on-surface-subtle);
  color: var(--surface-lowest);
}


/* ─── RESET ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.88), rgba(255,255,255,0) 36%),
    linear-gradient(180deg, #faf6f0 0%, #f5efe4 100%);
  background-attachment: fixed;
  color: var(--on-surface);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(123, 84, 0, 0.14);
  color: var(--on-surface);
}

/* ─── UTILITY CLASSES ─── */

/* Flex layouts */
.u-flex            { display: flex; }
.u-flex-col        { display: flex; flex-direction: column; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-items-center    { align-items: center; }
.u-items-start     { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-ml-auto         { margin-left: auto; }

/* Gaps */
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }

/* Margin-top */
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }

/* Margin-bottom */
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }

/* Text sizes */
.u-text-xs   { font-size: var(--text-xs); }
.u-text-sm   { font-size: var(--text-sm); }
.u-text-base { font-size: var(--text-base); }
.u-text-md   { font-size: var(--text-md); }

/* Common label pattern */
.u-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

/* Page action button groups */
.page-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* Empty state button spacing */
.empty-state .btn,
.empty-state .btn-ghost { margin-top: var(--space-4); }

/* ─── COLOR CLASSES (child/subject dots) ─── */
.color-blue        { background: #0049e6; color: white; }
.color-lavender    { background: #7c5ce0; color: white; }
.color-teal        { background: #0e7c6b; color: white; }
.color-sage        { background: #2d8a4e; color: white; }
.color-coral       { background: #e05c3c; color: white; }
.color-rose        { background: var(--rose); color: white; }
.color-gold        { background: #c49000; color: white; }
.color-sunset      { background: #d4620a; color: white; }
.color-berry       { background: #9b2d86; color: white; }
.color-slate       { background: #5a6078; color: white; }
/* legacy */
.color-forest      { background: var(--secondary); color: white; }
.color-terracotta  { background: var(--terracotta); color: white; }
.color-sky         { background: var(--sky); color: white; }

.color-dot-blue       { background: #0049e6; }
.color-dot-lavender   { background: #7c5ce0; }
.color-dot-teal       { background: #0e7c6b; }
.color-dot-sage       { background: #2d8a4e; }
.color-dot-coral      { background: #e05c3c; }
.color-dot-rose       { background: var(--rose); }
.color-dot-gold       { background: #c49000; }
.color-dot-sunset     { background: #d4620a; }
.color-dot-berry      { background: #9b2d86; }
.color-dot-slate      { background: #5a6078; }
/* legacy */
.color-dot-forest     { background: var(--secondary); }
.color-dot-terracotta { background: var(--terracotta); }
.color-dot-sky        { background: var(--sky); }

.color-fill-forest     { background: var(--secondary); }
.color-fill-terracotta { background: var(--terracotta); }
.color-fill-sky        { background: var(--sky); }
.color-fill-rose       { background: var(--rose); }
.color-fill-gold       { background: var(--gold); }

.color-nc-forest     { color: var(--secondary); }
.color-nc-terracotta { color: var(--terracotta); }
.color-nc-sky        { color: var(--sky); }
.color-nc-rose       { color: var(--rose); }
.color-nc-gold       { color: var(--gold); }

/* ─── MATERIAL SYMBOLS ─── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── APP SHELL ─── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── SIDEBAR NAVIGATION ─── */
.sidebar-shell {
  display: flex;
  flex-direction: column;
  width: 288px;
  min-width: 288px;
  height: 100vh;
  padding: 2rem 1rem;
  background: var(--surface-container-low);
  border-radius: 0 3rem 3rem 0;
  box-shadow: 24px 0 32px rgba(60, 44, 0, 0.06);
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile sidebar */
.sidebar-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--on-surface);
  cursor: pointer;
  padding: 0.25rem;
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-mobile-toggle { display: flex; }

  .sidebar-shell {
    position: fixed;
    left: -300px;
    top: 0;
    bottom: 0;
    transition: left 0.3s ease;
    z-index: 100;
  }

  .sidebar-open .sidebar-shell {
    left: 0;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content {
    width: 100% !important;
  }
}

.sidebar-logo {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 0;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.sidebar-logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: opacity 0.2s;
}

.sidebar-logo:hover .sidebar-logo-img {
  opacity: 0.75;
}

.sidebar-logo-img svg {
  height: 140px;
  width: auto;
}

.sidebar-logo-text h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sidebar-logo-text p {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  font-weight: 500;
  opacity: 0.6;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-surface);
  text-decoration: none;
  opacity: 0.7;
  transition: all 0.2s ease;
  margin: 0 0.5rem;
}

.sidebar-nav-item:hover {
  opacity: 1;
  background: var(--surface);
}

.sidebar-nav-item--active {
  opacity: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: white;
  box-shadow: var(--shadow-md);
}

.sidebar-nav-item--active:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: white;
}

.sidebar-nav-item--active .material-symbols-outlined {
  color: white;
}

.sidebar-children {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
  margin-top: 1rem;
}

.sidebar-children-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0 1rem;
  margin-bottom: 0.15rem;
}

.sidebar-child-avatar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.15s;
}

.sidebar-child-avatar:hover {
  background: var(--surface);
}

.sidebar-child-avatar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-child-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
}

.sidebar-bottom {
  margin-top: auto;
  padding: 1.5rem 1rem 0;
}

.sidebar-new-entry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(123, 84, 0, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
}

.sidebar-new-entry-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(123, 84, 0, 0.3);
}

.sidebar-new-entry-btn:active {
  transform: scale(0.95);
}

.sidebar-signout-link {
  display: block;
  text-align: center;
  padding: 0.75rem 0 0;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color 0.15s;
}

.sidebar-signout-link:hover {
  color: var(--on-surface);
}

/* ─── NEW ENTRY POPOVER ─── */
.sidebar-new-entry {
  position: relative;
}

.sidebar-new-entry-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 16px 48px rgba(60, 44, 0, 0.14), 0 0 0 1px rgba(60, 44, 0, 0.04);
  padding: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-new-entry-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.sidebar-new-entry-option:hover {
  background: var(--surface);
}

.sidebar-new-entry-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.sidebar-new-entry-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.2;
}

.sidebar-new-entry-desc {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  line-height: 1.3;
  margin-top: 1px;
}

/* ─── CONTENT HEADER ─── */
.content-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
}

.content-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.content-header-search {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.content-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-subtle);
  opacity: 0.4;
  font-size: 1.2rem;
}

.content-search-input {
  width: 100%;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem 0.625rem 3rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  color: var(--on-surface);
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
  box-shadow: var(--shadow-sm);
}

.content-search-input:focus {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--outline-variant));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}

.content-search-input::placeholder {
  color: var(--on-surface-subtle);
  opacity: 0.5;
}

.content-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.content-week-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--on-surface-subtle);
  padding: 0.25rem 0.6rem;
  background: var(--surface-container-low);
  border-radius: 9999px;
}

.content-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  color: var(--on-surface-subtle);
  opacity: 0.6;
  transition: all 0.15s;
  text-decoration: none;
}

.content-header-icon:hover {
  opacity: 1;
  background: var(--surface-container-low);
}

.content-user-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface);
}

/* Legacy topbar classes kept for backward compatibility */
.nav-bar {
  display: none;
}

.avatar {
  width: 28px; height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.avatar:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ─── LAYOUT ─── */
.app-body {
  display: flex;
  flex: 1;
}

/* ─── SIDEBAR ─── */
.sidebar-wrapper {
  width: 240px;
  min-width: 240px;
  position: sticky;
  top: 0.75rem;
  height: calc(100vh - 64px - 1.5rem);
  margin: 0.75rem 0 0.75rem 0.75rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.sidebar {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 0 32px rgba(42, 43, 81, 0.1);
  flex: 1;
  min-height: 0;
}

/* Sidebar category tabs */
.sidebar-category-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem;
  background: var(--surface);
  border-radius: 9999px;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 32px rgba(42, 43, 81, 0.1);
}

.sidebar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  border: none;
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--on-surface-subtle);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.sidebar-tab span {
  line-height: 1;
}

.sidebar-tab:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.sidebar-tab--active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(123, 84, 0, 0.03);
}

.sidebar-tab--active:hover {
  background: var(--primary);
  color: var(--on-primary);
}

.sidebar-signout {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0;
}

.sidebar-signout-btn {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  transition: color 0.15s, background 0.15s;
}

.sidebar-signout-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

.sidebar-section {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ─── NAV ITEMS ─── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background: var(--surface-variant);
  transform: translateX(2px);
}

.nav-item.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(123, 84, 0, 0.3);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Override SVG icon colors for active state */
.nav-item.active .nav-icon { color: white; }
.nav-item.active .nav-icon svg { stroke: white; }

.nav-text {
  white-space: nowrap;
  overflow: hidden;
}

/* ─── SIDEBAR LABEL ─── */
.sidebar-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0 1rem;
  margin-bottom: 0.15rem;
  margin-top: 0.5rem;
}

/* ─── BADGES ─── */
.nav-badge {
  margin-left: auto;
  background: var(--tertiary-container);
  color: #601400;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}

/* ─── METHOD-AWARE WEIGHTS ─── */
.nav-item--core::before {
  display: none;
}


/* Week ring */
.week-ring {
  margin: 0;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 1rem;
  margin-top: auto;
  white-space: nowrap;
}

.ring-title {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.7rem;
  font-weight: 700;
}

.ring-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.ring-row { display: flex; align-items: center; gap: 0.6rem; }

.ring-name {
  font-size: 0.8rem;
  color: var(--on-surface-mid);
  width: 55px;
  flex-shrink: 0;
  font-weight: 500;
}

.ring-track {
  flex: 1;
  height: 6px;
  background: var(--surface-container);
  border-radius: 9999px;
  overflow: hidden;
}

.ring-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s ease;
  width: 0;
}

.ring-pct {
  font-size: 0.65rem;
  color: var(--on-surface-subtle);
  width: 28px;
  text-align: right;
  font-weight: 600;
}

/* ─── MAIN CONTENT ─── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.main-canvas {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Legacy .main class for views not yet migrated */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
.main--hub {
  max-width: 1200px;
  padding-top: 2rem;
}

/* ─── HUB TABS ─── */
.hub-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: rgba(247, 244, 238, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 64px;
  z-index: 150;
}

.hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  border: 1px solid rgba(60, 44, 0, 0.10);
}
.hub-tab svg {
  flex-shrink: 0;
}
.hub-tab:hover {
  color: var(--on-surface);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(60, 44, 0, 0.14);
}
.hub-tab--active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(60, 44, 0, 0.14);
}
.hub-tab--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
  transform: none;
}
.hub-tab--active svg {
  stroke: var(--on-primary);
}

/* ─── HUB GRID ─── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* ─── HUB CARDS ─── */
.hub-card {
  display: block;
  background: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: none;
  box-shadow: 0 6px 20px rgba(60, 44, 0, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  text-decoration: none;
  color: inherit;
}
.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(60, 44, 0, 0.08);
}
.hub-card:active {
  transform: translateY(-1px);
}

.hub-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  user-select: none;
}

.hub-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.85rem;
  background: rgba(37, 57, 212, 0.06);
  flex-shrink: 0;
}
.hub-card-icon svg {
  width: 20px;
  height: 20px;
}

.hub-card-info {
  flex: 1;
  min-width: 0;
}

.hub-card-title {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.2;
}

.hub-card-summary {
  display: block;
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
}

.hub-card-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--on-surface-subtle);
  transition: transform 0.25s ease, color 0.25s ease;
}
.hub-card:hover .hub-card-chevron {
  transform: translateX(3px);
  color: var(--primary);
}

/* Topbar sign-out button */
.topbar-signout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.topbar-signout-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

/* ─── RECORD LIST (shared tool-view styles) ─── */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.record-date-group {
  margin-bottom: 1.5rem;
}

.record-date-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--outline-variant);
}

.record-list .record-item {
  text-align: left;
  background: rgba(255, 255, 255, 0.82);
  border: none;
  border-radius: 1rem;
  padding: 0.85rem 1.15rem;
  box-shadow: 0 3px 10px rgba(60, 44, 0, 0.03);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.record-list .record-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(60, 44, 0, 0.06);
}

.record-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.record-item-title {
  font-weight: 600;
  font-size: 0.875rem;
}

a.record-item-title--link {
  color: var(--on-surface);
  text-decoration: none;
}
a.record-item-title--link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.record-item-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: var(--surface-variant);
  color: var(--on-surface-mid);
}

.record-item-actions {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.record-list .record-item:hover .record-item-actions {
  opacity: 1;
}

/* Template list */
.tpl-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.tpl-days {
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.tpl-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.tpl-status--active {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.tpl-status--inactive {
  background: var(--surface-variant);
  color: var(--on-surface-subtle);
}

.tpl-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

.btn-ghost--danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

.btn-ghost--danger:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}

.record-item-body {
  font-size: 0.8rem;
  color: var(--on-surface-mid);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ─── CARD GRID (shared) ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.card-grid .card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.card-grid .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.card-grid .card-title {
  font-weight: 700;
  font-size: 1rem;
}

.habit-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem;
  border-radius: 0.25rem;
  transition: background 0.15s;
}
.habit-toggle-btn:hover {
  background: var(--surface-container);
}

/* ─── PAGE HEADER ─── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1.5rem;
}

.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--on-surface);
}

.page-subtitle {
  font-size: 0.92rem;
  color: var(--on-surface-subtle);
  margin-top: 0.45rem;
  letter-spacing: 0em;
  line-height: 1.6;
  max-width: 62ch;
}

.page-subtitle-link {
  color: var(--primary);
  font-style: italic;
}

.lesson-page-kicker {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.lesson-ai-card-intro {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.lesson-ai-card-icon {
  font-size: 1.75rem;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.lesson-ai-card-title {
  margin: 0 0 0.35rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.lesson-ai-card-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--on-surface-mid);
}

.lesson-ai-card .btn-ghost {
  margin-top: 0.15rem;
}

.page-subtitle strong {
  color: var(--on-surface);
  font-weight: 600;
}

/* ─── BUTTONS ─── */
.btn {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  padding: 0.68rem 1.2rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 650;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-block;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-0.5px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.88);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  padding: 0.62rem 1.05rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  display: inline-block;
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--surface-lowest);
  border-color: color-mix(in srgb, var(--outline) 35%, var(--outline-variant));
  color: var(--on-surface);
  transform: translateY(-0.5px);
}
.btn-ghost:active {
  transform: translateY(0);
}

/* After base .btn-ghost: dark themes use light --on-surface for body text; ghost
   keeps a light fill, so use dark ink. Placed here so this wins over `a { color: inherit }`. */
body.theme-ember .btn-ghost,
body.theme-midnight_garden .btn-ghost {
  color: var(--on-primary);
}

body.theme-ember .btn-ghost:hover,
body.theme-midnight_garden .btn-ghost:hover {
  color: var(--on-surface);
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
}

.btn-danger:hover {
  background: var(--error);
  color: white;
}

.btn-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── DASHBOARD WELCOME ─── */
.dash-welcome {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.dash-welcome-left { flex: 1; min-width: 0; }

.dash-greeting {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--on-surface);
}

.dash-greeting-name {
  color: var(--method-accent, var(--primary));
  font-style: normal;
}

.dash-tagline {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  color: var(--method-accent, var(--on-surface-mid));
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

.dash-subtitle {
  font-size: 0.9rem;
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
}

/* ── Method Motto Banner ── */
.dash-motto-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--method-accent-pale, var(--surface-container-low));
  border-radius: 1.25rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.dash-motto-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--method-accent, var(--primary));
  border-radius: 4px 0 0 4px;
}
.dash-motto-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  font-style: italic;
  color: var(--on-surface);
  line-height: 1.5;
  flex: 1;
}
.dash-motto-badge {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--method-accent, var(--primary));
  background: rgba(255,255,255,0.7);
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Daily Tip Card ── */
.dash-aside-card--tip {
  background: var(--method-accent-pale, var(--surface-container-low));
  position: relative;
}
.dash-aside-card--tip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--method-accent, var(--primary));
  border-radius: 3px 0 0 3px;
}
.dash-tip-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--method-accent, var(--on-surface-subtle));
  margin-bottom: 0.35rem;
}
.dash-tip-text {
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
}

/* ── Method-Themed Stats ── */
.dash-stat-num--method     { color: var(--method-accent, var(--secondary)); }
.dash-stat-num--method-alt { color: var(--method-accent, var(--primary)); opacity: 0.7; }

/* ── Progress Orbs ── */
.dash-orbs {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
}

.dash-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  position: relative;
  transition: transform 0.2s;
}
.dash-orb:hover { transform: scale(1.05); }

.dash-orb-ring {
  width: 72px;
  height: 72px;
}

.dash-orb-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 6px));
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--on-surface);
}

.dash-orb-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  margin-top: 0.3rem;
}

/* ── Bento Layout ── */
/* ── Dashboard: Date Badge ── */
.dash-date-badge {
  display: inline-block;
  width: fit-content;
  padding: 0.35rem 1rem;
  background: var(--tertiary-container);
  color: var(--tertiary);
  border-radius: var(--radius-full);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Dashboard: Hero Title ── */
.dash-hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.dash-hero-subtitle {
  font-size: 1.05rem;
  color: var(--on-surface-subtle);
  max-width: 32rem;
  margin-top: var(--space-1);
}

/* ── Dashboard: Bento Grid ── */
.dash-bento-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.dash-bento-col-8 {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.dash-bento-col-4 {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.dash-bento-col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .dash-bento-12 { grid-template-columns: 1fr; }
  .dash-bento-col-8 { grid-column: span 1; grid-template-columns: 1fr; }
  .dash-bento-col-4 { grid-column: span 1; }
}

/* ── Dashboard: Student Progress Card ── */
.dash-student-card {
  background: var(--surface-lowest);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.dash-student-card-deco {
  position: absolute;
  top: 0; right: 0;
  width: 8rem; height: 8rem;
  border-radius: 50%;
  margin-right: -4rem;
  margin-top: -4rem;
  opacity: 0.08;
}
.dash-student-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.dash-student-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dash-student-avatar-ring {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-student-name {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--on-surface);
}
.dash-student-grade {
  font-size: 0.8rem;
  opacity: 0.5;
}
.dash-status-pill {
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dash-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.dash-progress-track {
  height: 0.75rem;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.dash-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}
.dash-student-metrics {
  display: flex;
  gap: var(--space-2);
}
.dash-student-metric {
  flex: 1;
  background: var(--surface-container-low);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
}
.dash-student-metric-label {
  font-size: var(--text-xs);
  opacity: 0.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}
.dash-student-metric-value {
  font-size: 1.1rem;
  font-weight: 900;
  margin: 0.25rem 0 0;
}
.dash-student-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Dashboard: What's Next Card ── */
.dash-whats-next {
  background: var(--surface-container-high);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(60,44,0,0.06);
  flex: 1;
}
.dash-whats-next-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: var(--space-5);
}
.dash-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  padding-left: var(--space-6);
}
.dash-timeline-line {
  position: absolute;
  left: 0.35rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: rgba(123,84,0,0.15);
}
.dash-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.dash-timeline-dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  margin-top: 0.3rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dash-timeline-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}
.dash-timeline-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin: 0.1rem 0 0;
}
.dash-whats-next-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px dashed rgba(123,84,0,0.15);
}
.dash-planner-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-4);
  background: linear-gradient(135deg, var(--tertiary), #b84dcc);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(145,45,163,0.25);
}
.dash-planner-link:hover { opacity: 0.9; }

/* ── Dashboard: Sidebar Cards ── */
.dash-sidebar-card {
  background: var(--surface-lowest);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dash-sidebar-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dash-sidebar-card-title {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--primary);
}
.dash-coop-link {
  display: block;
  padding: 0.6rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 600;
}
.dash-coop-link:hover { background: var(--surface-container); }
.dash-coop-count {
  opacity: 0.5;
  font-size: var(--text-sm);
  margin-left: var(--space-2);
}
.dash-tip-section-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.dash-tip-body {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.5;
}

/* ── Dashboard: Journal Prompt ── */
.dash-journal-prompt {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dash-journal-prompt-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary);
  margin: 0;
}
.dash-journal-prompt-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin: 0.15rem 0 0;
}
.dash-accent-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tertiary);
  text-decoration: none;
  white-space: nowrap;
}
.dash-accent-link:hover { opacity: 0.7; }

/* ── Dashboard: Export Buttons ── */
.dash-export-btn {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  background: var(--surface-container-low);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-align: center;
  display: block;
}
.dash-export-btn:hover { background: var(--surface-container); }
.dash-export-btn--disabled {
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Dashboard: Outside Time ── */
.dash-outside-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.dash-outside-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--surface-container-low);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  background: var(--surface);
}
.dash-outside-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--secondary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.dash-outside-btn:hover { opacity: 0.9; }

/* ── Dashboard: Feature Card Items ── */
.dash-feature-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 600;
}
.dash-feature-link:hover { background: var(--surface-container); }
.dash-lesson-empty {
  text-align: center;
  padding: var(--space-7) 0;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.dash-bento { margin-bottom: 2.5rem; }

.dash-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.dash-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
}

/* ── Quick Links ── */
.dash-quick-links {
  margin-bottom: 2rem;
}

.dash-quick-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dash-customize-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.15s;
}
.dash-customize-link:hover {
  color: var(--on-surface);
}

.dash-quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.dash-quick-links-grid--add {
  opacity: 0.6;
}

.quick-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(26, 26, 46, 0.06);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  font-family: 'Plus Jakarta Sans', sans-serif;
  /* reset button styles for button_to */
  width: 100%;
  font-size: inherit;
}
.quick-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--method-accent-glow, rgba(37, 57, 212, 0.08));
  border-color: var(--method-accent, rgba(37, 57, 212, 0.15));
  border-color: color-mix(in srgb, var(--method-accent, #2539d4) 20%, transparent);
}

.quick-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.quick-link-icon svg {
  width: 22px;
  height: 22px;
}

.quick-link-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  line-height: 1.2;
}

/* Edit mode */
.quick-link-card--editing {
  border-style: dashed;
  border-color: rgba(26, 26, 46, 0.15);
}
.quick-link-card--editing:hover {
  border-color: #d50000;
  background: rgba(213, 0, 0, 0.03);
}
.quick-link-card--editing:hover .quick-link-remove {
  color: #d50000;
}

.quick-link-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #9ca3af;
  line-height: 1;
}

/* Add mode */
.quick-link-card--add {
  border-style: dashed;
  border-color: rgba(26, 26, 46, 0.1);
  background: rgba(255, 255, 255, 0.3);
}
.quick-link-card--add:hover {
  border-color: rgba(37, 57, 212, 0.3);
  background: rgba(37, 57, 212, 0.04);
  opacity: 1;
}

.quick-link-add-icon {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #9ca3af;
  line-height: 1;
}

.dash-quick-links-add {
  margin-top: 1.25rem;
}

.dash-subsection-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

/* ─── Dashboard home: quieter visual hierarchy (same features) ─── */
.dashboard-home {
  --dash-quiet-radius: var(--radius-xl);
  --dash-quiet-border: 1px solid var(--outline-variant);
  --dash-quiet-shadow: var(--shadow-md);
}

.dashboard-home .dash-welcome {
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.dashboard-home .dash-date-badge {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--surface-container-high) 75%, var(--surface-lowest));
  color: var(--on-surface-mid);
  border: 1px solid var(--outline-variant);
}

.dashboard-home .dash-date-badge__meta {
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.dashboard-home .dash-hero-title {
  font-weight: 700;
  font-size: clamp(1.45rem, 3.5vw, 1.8rem);
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.dashboard-home .dash-hero-subtitle {
  font-size: 0.95rem;
  color: var(--on-surface-mid);
  max-width: 36rem;
  line-height: 1.5;
}

.dashboard-home .dash-motto-banner {
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.5rem;
  border-radius: var(--dash-quiet-radius);
  background: color-mix(in srgb, var(--method-accent-pale, var(--surface-container-low)) 65%, var(--surface-lowest));
  border: var(--dash-quiet-border);
  box-shadow: none;
}

.dashboard-home .dash-motto-banner::before {
  width: 3px;
  opacity: 0.55;
}

.dashboard-home .dash-motto-text {
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  color: var(--on-surface-mid);
}

.dashboard-home .dash-motto-badge {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--surface-lowest) 90%, var(--method-accent, var(--primary)) 10%);
  color: var(--on-surface-mid);
}

.dashboard-home .dash-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.015em;
}

.dashboard-home .dash-quick-links {
  margin-top: 1.75rem;
  margin-bottom: 1.5rem;
}

.dashboard-home .quick-link-card {
  background: var(--surface-lowest);
  border: var(--dash-quiet-border);
  box-shadow: none;
  padding: 0.85rem 0.45rem;
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .quick-link-card:hover {
  transform: translateY(-0.5px);
  box-shadow: var(--dash-quiet-shadow);
  border-color: color-mix(in srgb, var(--method-accent, var(--outline)) 22%, var(--outline-variant));
}

.dashboard-home .quick-link-icon {
  color: color-mix(in srgb, var(--method-accent, var(--on-surface-mid)) 40%, var(--on-surface-mid));
  opacity: 0.95;
}

.dashboard-home .quick-link-label {
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--on-surface-mid);
}

.dashboard-home .dash-bento-12 {
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.dashboard-home .dash-bento-col-8 {
  gap: 1.25rem;
}

.dashboard-home .dash-bento-col-4 {
  gap: 1.25rem;
}

.dashboard-home .dash-student-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  padding: 1.35rem 1.2rem;
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .dash-student-card-deco {
  opacity: 0.035;
}

.dashboard-home .dash-student-name {
  font-weight: 700;
  font-size: 1rem;
}

.dashboard-home .dash-status-pill--student {
  background: var(--dash-pill-bg);
  color: var(--dash-pill-fg);
}

.dashboard-home .dash-status-pill {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
}

.dashboard-home .dash-progress-label,
.dashboard-home .dash-progress-pct {
  color: var(--on-surface-mid);
  font-weight: 500;
  font-size: 0.8125rem;
}

.dashboard-home .dash-progress-pct {
  font-variant-numeric: tabular-nums;
}

.dashboard-home .dash-progress-track--student {
  background: color-mix(in srgb, var(--dash-student-progress, var(--primary)) 14%, transparent);
}

.dashboard-home .dash-progress-fill--student {
  background: var(--dash-student-progress, var(--primary));
  box-shadow: none !important;
}

/* Remove glow on progress bars inside dashboard feature cards */
.dashboard-home .dash-card .dash-progress-fill {
  box-shadow: none !important;
}

.dashboard-home .dash-student-metric {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
  padding: 0.65rem 0.5rem;
}

.dashboard-home .dash-student-metric-label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 0.7rem;
  opacity: 0.55;
}

.dashboard-home .dash-student-metric-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--on-surface);
}

.dashboard-home .dash-whats-next {
  background: var(--surface-lowest);
  border: var(--dash-quiet-border);
  box-shadow: var(--dash-quiet-shadow);
  border-radius: var(--dash-quiet-radius);
  padding: 1.3rem 1.1rem;
}

.dashboard-home .dash-whats-next-title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--on-surface-mid);
  margin-bottom: 1rem;
}

.dashboard-home .dash-timeline-line {
  background: color-mix(in srgb, var(--outline-variant) 80%, transparent);
}

.dashboard-home .dash-timeline-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.dashboard-home .dash-whats-next-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 65%, transparent);
}

.dashboard-home .dash-planner-link {
  background: var(--primary);
  color: var(--on-primary, #fff);
  box-shadow: none;
  font-weight: 600;
  font-size: 0.8125rem;
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.55rem 1rem;
}

.dashboard-home .dash-planner-link:hover {
  opacity: 0.94;
  filter: brightness(1.03);
}

.dashboard-home .dash-sidebar-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
  padding: 1.1rem 1rem;
}

.dashboard-home .dash-sidebar-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-surface);
}

.dashboard-home .dash-tip-section-title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--on-surface-mid);
}

.dashboard-home .dash-tip-body {
  font-size: 0.9rem;
  line-height: 1.55;
}

.dashboard-home .dash-accent-link {
  font-weight: 600;
  color: var(--on-surface-mid);
}

.dashboard-home .dash-accent-link:hover {
  color: var(--primary);
  opacity: 1;
}

.dashboard-home .schedule-grid {
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.dashboard-home .child-col {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .child-header {
  background: color-mix(in srgb, var(--surface-container-low) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
  padding: 0.75rem 1rem;
  border-radius: var(--dash-quiet-radius) var(--dash-quiet-radius) 0 0;
}

.dashboard-home .child-name {
  font-weight: 600;
}

.dashboard-home .child-grade {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.65rem;
}

.dashboard-home .dash-stats.stats-bar {
  margin-top: 2rem;
  gap: 0.75rem;
}

.dashboard-home .dash-stat-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
  padding: 1rem 0.85rem;
}

.dashboard-home .dash-stat-num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--on-surface) !important;
}

.dashboard-home .dash-stat-label {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

.dashboard-home .dash-cards-grid {
  gap: 1.1rem;
}

.dashboard-home .dash-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .dash-card-head {
  background: transparent;
  border-bottom: 1px solid var(--outline-variant);
  padding: 0.85rem 1.1rem;
}

.dashboard-home .dash-card-title {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--on-surface-mid);
}

.dashboard-home .u-mb-5 {
  margin-bottom: 1rem !important;
}

.dashboard-home .u-mt-8 {
  margin-top: 2rem !important;
}

.dash-bento-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.dash-bento-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}

.dash-bento-main { min-width: 0; }

.dash-bento-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dash-aside-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
}

.dash-aside-card--reading { background: var(--surface-container-low); }
.dash-aside-card--journal { background: var(--surface-container-low); }

.dash-aside-icon {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.dash-aside-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.dash-reading-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.dash-reading-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: color 0.1s;
}
.dash-reading-item:hover { color: var(--primary); }

.dash-aside-link {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dash-aside-link:hover { opacity: 0.7; }

/* ── Stats Strip ── */
.dash-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.dash-stat-card {
  flex: 1;
  min-width: 120px;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.dash-stat-card--export {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.dash-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

.dash-stat-num--gold   { color: var(--secondary); }
.dash-stat-num--sky    { color: var(--primary); }
.dash-stat-num--forest { color: #2d8a4e; }
.dash-stat-num--rose   { color: var(--rose); }

.dash-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

/* ── Bottom Cards Grid ── */
.dash-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dash-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.dash-card-head {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-low);
}

.dash-card-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  flex: 1;
}

.dash-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* ─── TODAY'S SCHEDULE ─── */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.child-col {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.child-header {
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.child-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.85;
}

.child-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-surface);
}

.child-grade {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.08em;
  margin-left: auto;
  font-weight: 500;
}

.add-lesson-btn {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-left: 0.4rem;
  opacity: 0;
  transition: opacity 0.1s;
  flex-shrink: 0;
  font-weight: 700;
}
.child-header:hover .add-lesson-btn { opacity: 1; }

.lesson-list { padding: 0; }

.lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem;
  margin-bottom: 0;
  transition: background 0.08s;
  position: relative;
  user-select: none;
  border-radius: 0;
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover {
  background: var(--surface-container-low);
}

.lesson-check-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.lesson-check {
  width: 19px; height: 19px;
  border: 2px solid var(--surface-container-high);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}
.lesson-check-btn:hover .lesson-check {
  border-color: var(--primary);
  transform: scale(1.08);
}
.lesson-check-btn:active .lesson-check {
  transform: scale(0.9);
}

.lesson-item.done .lesson-check {
  background: var(--primary);
  border-color: var(--primary);
}
.lesson-item.done .lesson-check::after {
  content: '✓';
  color: white;
  font-size: 0.55rem;
}
.lesson-item.done .lesson-title {
  text-decoration: line-through;
  color: var(--on-surface-subtle);
}

.lesson-body { flex: 1; }

.lesson-subject {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

/* Subject color tokens */
.subj-grammar   { color: var(--secondary); }
.subj-math      { color: var(--sky); }
.subj-history   { color: var(--terracotta); }
.subj-reading   { color: var(--gold); }
.subj-nature    { color: #2d8a4e; }
.subj-latin     { color: var(--rose); }
.subj-rhetoric  { color: var(--secondary); }
.subj-science   { color: #2d8a4e; }
.subj-composer  { color: #7c5ce0; }
.subj-art       { color: var(--tertiary); }
.subj-literature { color: var(--terracotta); }
.subj-pre-algebra { color: var(--sky); }

.lesson-title {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-surface);
}

.lesson-duration {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
  font-weight: 500;
}

.lesson-empty {
  padding: 1.75rem 0.7rem;
  font-size: 0.85rem;
  color: var(--on-surface-subtle);
  font-style: italic;
  text-align: center;
}

/* ─── RECORD STRIP ─── */
.record-strip {
  background: var(--primary);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.record-item { text-align: center; }

.record-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.record-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 249, 246, 0.55);
  margin-top: 0.25rem;
  font-weight: 600;
}

.record-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
}

.record-export {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.record-export-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  color: rgba(252, 249, 246, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.export-btns { display: flex; gap: 0.5rem; }

.export-btn {
  background: rgba(255,255,255,0.1);
  color: rgba(252, 249, 246, 0.9);
  border: none;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.1s;
}
.export-btn:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.export-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── CARD ─── */
.card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.card-head {
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid var(--outline-variant);
}

.card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.card-action {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  border: none;
  background: none;
  transition: opacity 0.08s;
}
.card-action:hover { opacity: 0.7; }

/* ─── MODERN SKELETON LOADER ─── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-container-high);
  border-radius: 6px;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 1.5s infinite;
}

.skeleton-text { height: 1rem; width: 100%; margin-bottom: 0.5rem; }
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 120px; width: 100%; border-radius: var(--radius-xl); }

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* ─── OUTSIDE TRACKER (CARD VARIANT) ─── */
.outside-progress {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.outside-track {
  flex: 1;
  height: 12px;
  background: var(--surface-container-high);
  border-radius: 6px;
  overflow: hidden;
}
.outside-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-container));
  border-radius: 6px;
  transition: width 0.4s ease;
}
.outside-stats {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  color: var(--on-surface);
  font-style: italic;
  font-weight: 500;
  width: 90px;
  text-align: right;
}
.outside-form {
  display: flex;
  gap: 0.6rem;
}
.outside-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 9999px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  background: var(--surface-container-low);
  color: var(--on-surface);
}
.outside-input:focus {
  outline: 2px solid var(--secondary);
  border-color: transparent;
}
.outside-btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 9999px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0 1.4rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  box-shadow: 0 4px 16px rgba(123, 84, 0, 0.25);
}
.outside-btn:hover {
  background: var(--primary-hover);
}
.outside-btn:active {
  transform: scale(0.95);
}

.card-body { padding: 1rem 1.5rem 1.5rem; }

.term-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.term-list-heading {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.term-card,
.term-spotlight {
  margin-bottom: 0;
}

.term-spotlight {
  background: var(--surface-container-low);
  box-shadow: inset 4px 0 0 var(--primary);
}

.term-card-curriculum {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.term-card-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.term-status-badge {
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.term-status-badge--current {
  background: var(--sage-pale);
  color: var(--secondary);
  border-color: var(--secondary);
}

.term-status-badge--upcoming {
  background: var(--gold-pale);
  color: var(--gold);
  border-color: var(--gold);
}

.term-status-badge--past {
  background: var(--terra-pale);
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.term-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.term-summary-grid--wide {
  margin-bottom: 2rem;
}

.term-summary-stat {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1.15rem 1.25rem;
}

.term-summary-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.term-summary-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.4rem;
  font-weight: 600;
}

.term-form-hint {
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
  line-height: 1.5;
  padding-top: 1.8rem;
}

.term-week-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.term-week-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(180px, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border-radius: 1rem;
  padding: 1rem;
  background: var(--surface-lowest);
  box-shadow: 0 1px 6px var(--shadow);
}

.term-week-row--current {
  background: var(--surface-container-low);
  box-shadow: 0 2px 12px rgba(64, 92, 101, 0.1);
}

.term-week-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.term-week-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--on-surface);
}

.term-week-range {
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
  font-style: italic;
}

.term-week-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.term-week-metric {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.term-week-metric-value {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface);
  font-weight: 600;
}

.term-week-metric-label {
  font-size: 0.82rem;
  color: var(--on-surface-subtle);
}

.term-week-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.term-week-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-container-high);
  border-radius: 999px;
  overflow: hidden;
}

.term-week-progress-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: inherit;
}

.term-week-progress-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  color: var(--on-surface-subtle);
  min-width: 34px;
  text-align: right;
  font-weight: 600;
}

.term-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 1.2rem;
}

.term-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.term-recent-item {
  display: block;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  background: var(--surface-lowest);
  box-shadow: 0 1px 6px var(--shadow);
  transition: background 0.12s, box-shadow 0.12s;
}

.term-recent-item:hover {
  background: var(--surface-container-low);
  box-shadow: 0 4px 16px var(--shadow);
}

.term-recent-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.45rem;
  font-weight: 600;
}

.term-recent-child {
  font-weight: 700;
}

.term-recent-title {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--on-surface);
}

.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.subject-card {
  height: 100%;
}

.subject-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.subject-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.subject-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: start;
}

.subject-stat {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 0.85rem 0.9rem;
  min-height: 84px;
}

.subject-stat--full {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.35rem);
}

.subject-card-actions {
  margin-top: auto;
  align-items: center;
}

.subject-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.subject-swatch-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.subject-swatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-container-low);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
  position: relative;
}

.subject-swatch-btn:hover {
  background: var(--surface-container);
}

.subject-swatch-btn--active,
.subject-swatch-btn:has(input:checked) {
  background: var(--surface-container);
  box-shadow: 0 0 0 2px var(--on-surface);
}

.subject-swatch-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
}

.subject-inline-note {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-weight: 600;
}

.subj-dot-grammar   { background: var(--secondary); }
.subj-dot-math      { background: var(--sky); }
.subj-dot-history   { background: var(--terracotta); }
.subj-dot-reading   { background: var(--gold); }
.subj-dot-nature    { background: #2d8a4e; }
.subj-dot-latin     { background: var(--rose); }
.subj-dot-rhetoric  { background: var(--secondary); }
.subj-dot-science   { background: #2d8a4e; }
.subj-dot-composer  { background: #7c5ce0; }
.subj-dot-art       { background: var(--tertiary); }
.subj-dot-literature { background: var(--terracotta); }
.subj-dot-pre-algebra { background: var(--sky); }

/* ─── NARRATIONS ─── */
.narration-item {
  padding: 1rem 0;
}
.narration-item + .narration-item {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1rem;
  margin-top: 0.5rem;
}

.narration-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.narration-child {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.narration-subject {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
}

.narration-date {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  color: var(--on-surface-subtle);
  margin-left: auto;
}

.narration-delete {
  font-size: 0.6rem;
  color: var(--on-surface-subtle);
  opacity: 0;
  transition: opacity 0.08s;
  margin-left: 0.5rem;
}
.narration-item:hover .narration-delete { opacity: 0.6; }
.narration-delete:hover { opacity: 1 !important; color: var(--terracotta); }

.narration-text {
  font-size: 0.92rem;
  color: var(--on-surface-mid);
  line-height: 1.65;
  font-style: italic;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ─── STATS BAR (unified) ─── */
.stats-bar {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.stats-bar--bordered {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.4rem;
}
.stats-bar--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-4);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.stat--card {
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  min-width: 130px;
}
.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--on-surface);
}
.stat-num--lg {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
}
.stat-divider {
  width: 1px;
  height: 2rem;
  background: var(--outline-variant);
  align-self: center;
}

/* ─── DETAIL GRID ─── */
.detail-grid {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.detail-item-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.25rem;
}
.detail-item-value {
  font-size: var(--text-md);
  font-weight: 600;
}

/* ─── CARD ACTIONS (unified) ─── */
.card-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ─── TERM GRID ─── */
.term-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.term-week {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 0.6rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
}
.term-week:hover { background: var(--surface-container); }
.term-week.current { background: var(--surface-container); outline: 2px solid var(--secondary); }
.term-week.completed { opacity: 0.45; }

.term-week-num {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  font-weight: 600;
}

.term-week-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 0.3rem;
}

.t-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--secondary);
  opacity: 0.25;
}
.t-dot.on { opacity: 1; }

/* ─── PILLARS ─── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.pillar {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.pillar-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--on-surface);
}

.pillar-desc {
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.pillar-features {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pillar-feature {
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}

.pillar-feature::before {
  content: '→';
  color: var(--secondary);
  flex-shrink: 0;
  font-size: 0.75rem;
  margin-top: 0.05rem;
}

/* ─── FORMS ─── */
.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 2rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.binder-form { display: flex; flex-direction: column; gap: 1.2rem; }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.form-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-surface);
}

.form-input, .form-select, .form-textarea {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.1rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--on-surface);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  width: 100%;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--outline));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
  background: var(--surface-lowest);
}

/* Dark themes: light input fill + light --on-surface was unreadable; focus uses dark fill again. */
body.theme-ember .form-input,
body.theme-ember .form-select,
body.theme-ember .form-textarea,
body.theme-midnight_garden .form-input,
body.theme-midnight_garden .form-select,
body.theme-midnight_garden .form-textarea {
  color: var(--on-primary);
}

body.theme-ember .form-input::placeholder,
body.theme-ember .form-textarea::placeholder,
body.theme-midnight_garden .form-input::placeholder,
body.theme-midnight_garden .form-textarea::placeholder {
  color: color-mix(in srgb, var(--on-primary) 48%, transparent);
}

body.theme-ember .form-input:focus,
body.theme-ember .form-select:focus,
body.theme-ember .form-textarea:focus,
body.theme-midnight_garden .form-input:focus,
body.theme-midnight_garden .form-select:focus,
body.theme-midnight_garden .form-textarea:focus {
  color: var(--on-surface);
}

body.theme-ember .form-input:focus::placeholder,
body.theme-ember .form-textarea:focus::placeholder,
body.theme-midnight_garden .form-input:focus::placeholder,
body.theme-midnight_garden .form-textarea:focus::placeholder {
  color: color-mix(in srgb, var(--on-surface) 45%, transparent);
}

/* Native date controls: host `color` often does not style the inner value (term onboarding). */
body.theme-ember .form-input[type="date"],
body.theme-ember .form-input[type="datetime-local"],
body.theme-ember .form-input[type="month"],
body.theme-midnight_garden .form-input[type="date"],
body.theme-midnight_garden .form-input[type="datetime-local"],
body.theme-midnight_garden .form-input[type="month"] {
  color-scheme: light;
}

body.theme-ember .form-input[type="date"]:focus,
body.theme-ember .form-input[type="datetime-local"]:focus,
body.theme-ember .form-input[type="month"]:focus,
body.theme-midnight_garden .form-input[type="date"]:focus,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus,
body.theme-midnight_garden .form-input[type="month"]:focus {
  color-scheme: dark;
}

body.theme-ember .form-input[type="date"]::-webkit-datetime-edit,
body.theme-ember .form-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.theme-ember .form-input[type="date"]::-webkit-datetime-edit-text,
body.theme-ember .form-input[type="date"]::-webkit-datetime-edit-month-field,
body.theme-ember .form-input[type="date"]::-webkit-datetime-edit-day-field,
body.theme-ember .form-input[type="date"]::-webkit-datetime-edit-year-field,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-text,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-month-field,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-day-field,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-year-field,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
body.theme-ember .form-input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
body.theme-ember .form-input[type="month"]::-webkit-datetime-edit,
body.theme-midnight_garden .form-input[type="date"]::-webkit-datetime-edit,
body.theme-midnight_garden .form-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.theme-midnight_garden .form-input[type="date"]::-webkit-datetime-edit-text,
body.theme-midnight_garden .form-input[type="date"]::-webkit-datetime-edit-month-field,
body.theme-midnight_garden .form-input[type="date"]::-webkit-datetime-edit-day-field,
body.theme-midnight_garden .form-input[type="date"]::-webkit-datetime-edit-year-field,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-text,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-month-field,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-day-field,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-year-field,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
body.theme-midnight_garden .form-input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
body.theme-midnight_garden .form-input[type="month"]::-webkit-datetime-edit {
  color: var(--on-primary);
}

body.theme-ember .form-input[type="date"]:focus::-webkit-datetime-edit,
body.theme-ember .form-input[type="date"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-ember .form-input[type="date"]:focus::-webkit-datetime-edit-text,
body.theme-ember .form-input[type="date"]:focus::-webkit-datetime-edit-month-field,
body.theme-ember .form-input[type="date"]:focus::-webkit-datetime-edit-day-field,
body.theme-ember .form-input[type="date"]:focus::-webkit-datetime-edit-year-field,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-text,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
body.theme-ember .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field,
body.theme-ember .form-input[type="month"]:focus::-webkit-datetime-edit,
body.theme-midnight_garden .form-input[type="date"]:focus::-webkit-datetime-edit,
body.theme-midnight_garden .form-input[type="date"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-midnight_garden .form-input[type="date"]:focus::-webkit-datetime-edit-text,
body.theme-midnight_garden .form-input[type="date"]:focus::-webkit-datetime-edit-month-field,
body.theme-midnight_garden .form-input[type="date"]:focus::-webkit-datetime-edit-day-field,
body.theme-midnight_garden .form-input[type="date"]:focus::-webkit-datetime-edit-year-field,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-text,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
body.theme-midnight_garden .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field,
body.theme-midnight_garden .form-input[type="month"]:focus::-webkit-datetime-edit {
  color: var(--on-surface);
}

/* Slightly higher specificity for onboarding ghost links (e.g. term Back). */
body.onboarding-body.theme-ember .btn-ghost,
body.onboarding-body.theme-midnight_garden .btn-ghost {
  color: var(--on-primary);
}

body.onboarding-body.theme-ember .btn-ghost:hover,
body.onboarding-body.theme-midnight_garden .btn-ghost:hover {
  color: var(--on-surface);
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-top: 0.75rem;
}

.form-errors {
  background: rgba(172, 44, 0, 0.08);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
}

.form-error-item {
  font-size: 0.85rem;
  color: var(--tertiary);
}

/* Color picker */
.color-picker {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.color-swatch {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.15s;
}

.color-preset-btn {
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s;
}
.color-preset-btn:hover { transform: scale(1.15); }
.color-preset-btn--active .color-swatch {
  border-color: var(--on-surface);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--surface-lowest), 0 0 0 4px var(--on-surface);
}

.color-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 3px 10px 3px 3px;
  border-radius: 9999px;
  background: var(--surface-container-low);
  transition: background 0.12s;
}
.color-custom-btn:hover { background: var(--surface-container); }
.color-custom-btn--active { outline: 2px solid var(--on-surface); outline-offset: 1px; }

.color-native-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.color-custom-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  transition: background 0.1s;
}

.color-custom-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
  font-weight: 600;
}

.color-option input:checked + .color-choice {
  background: var(--surface-container);
  outline: 2px solid var(--on-surface);
}

.color-option input:checked + .color-choice .color-swatch {
  border-color: var(--on-surface);
  transform: scale(1.1);
}

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  background: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-xl);
  border: none;
  box-shadow: 0 8px 24px rgba(60, 44, 0, 0.04);
}

.empty-icon { font-size: 2rem; margin-bottom: 1.2rem; opacity: 0.45; }

.empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.empty-desc {
  font-size: 0.85rem;
  color: var(--on-surface-subtle);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.65;
}

.child-pillar {
  display: flex;
  flex-direction: column;
}

.child-pillar-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.child-card-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.child-profile-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border: 1.5px solid rgba(26, 26, 46, 0.06);
}

.child-profile-id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.child-profile-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.1rem;
  border: none;
}

.child-profile-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface);
}

.child-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 1.2rem;
}

.child-record-item {
  display: block;
  padding: 0.8rem 0;
}

.child-record-item + .child-record-item {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 0.8rem;
  margin-top: 0.4rem;
}

.child-record-link:hover .child-record-title {
  text-decoration: underline;
}

.child-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.child-record-title {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-surface);
}

/* ─── FLASH MESSAGES ─── */
.flash {
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
}

.flash-notice {
  background: rgba(219, 234, 254, 0.78);
  color: #1e40af;
  border: 1px solid rgba(29, 78, 216, 0.16);
}

.flash-alert {
  background: rgba(248, 220, 206, 0.68);
  color: var(--tertiary);
  border: 1px solid rgba(160, 75, 33, 0.14);
}

/* ─── FILTER PILLS ─── */
.filter-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.filter-pill {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(60, 44, 0, 0.08);
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(60, 44, 0, 0.15);
  color: var(--on-surface);
}

.filter-pill--active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.filter-pill--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}

/* ─── FILE MANAGER ─── */
.fm-storage-bar {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.fm-storage-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  margin-bottom: 0.4rem;
}

.fm-storage-percent {
  font-weight: 700;
}

.fm-storage-track {
  height: 6px;
  background: var(--surface-container);
  border-radius: 3px;
  overflow: hidden;
}

.fm-storage-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.fm-storage-fill[style*="width: 9"],
.fm-storage-fill[style*="width: 100"] {
  background: var(--error, #d32f2f);
}

.fm-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fm-search-icon {
  position: absolute;
  left: 0.85rem;
  font-size: 1.1rem;
  color: var(--on-surface-subtle);
  pointer-events: none;
}

.fm-search-input {
  padding-left: 2.5rem !important;
  width: 100%;
}

.fm-upload-card {
  padding: 0;
  overflow: hidden;
}

.uppy-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  border: 2px dashed rgba(60, 44, 0, 0.12);
  border-radius: 1.25rem;
  margin: 0.75rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.uppy-drop-zone:hover,
.uppy-DragDrop--is-dragover .uppy-drop-zone,
.uppy-drop-zone.is-dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.uppy-drop-zone--hero {
  margin-top: 2rem;
  padding: 3rem 2rem;
  border-radius: var(--radius-xl);
}

.uppy-drop-zone--hero .uppy-drop-zone__icon {
  font-size: 2.5rem;
  opacity: 0.3;
}

.uppy-drop-zone--compact {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.75rem;
  border-radius: 1rem;
}

.uppy-drop-zone--compact .uppy-drop-zone__icon {
  font-size: 1.35rem;
  opacity: 0.35;
}

.uppy-drop-zone__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-surface);
}

.uppy-drop-zone--compact .uppy-drop-zone__title {
  font-size: 0.88rem;
}

.uppy-drop-zone__hint {
  font-size: 0.85rem;
  color: var(--on-surface-subtle);
  width: 100%;
  text-align: center;
}

.uppy-drop-zone--compact .uppy-drop-zone__hint {
  font-size: 0.75rem;
  width: auto;
  flex: 1 1 100%;
  text-align: center;
}

.fm-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: 1rem;
  font-size: 0.8rem;
}

.fm-sort-label {
  color: var(--on-surface-subtle);
  font-weight: 600;
  margin-right: 0.25rem;
}

.fm-sort-link {
  color: var(--on-surface-subtle);
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border-radius: 2rem;
  transition: background 0.15s, color 0.15s;
}

.fm-sort-link:hover {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.fm-sort-link--active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight: 600;
}

.fm-sort-chevron {
  margin-left: 0.15rem;
  opacity: 0.85;
}

.fm-file-details {
  margin-top: 1.5rem;
  max-width: 32rem;
}

.fm-file-details .form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* Hide Uppy's default DragDrop button — we use our own UI */
.uppy-DragDrop-container {
  display: contents !important;
}

.uppy-DragDrop-inner {
  display: none !important;
}

.uppy-StatusBar,
[class*="uppy-StatusBar"] {
  background: var(--surface-container-low) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--on-surface-mid) !important;
  border: none !important;
  margin-top: 0.5rem;
}

.uppy-StatusBar-progress {
  background: var(--primary) !important;
  border-radius: 4px !important;
}

.uppy-StatusBar-actionBtn--retry {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: 0.35rem 1rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer;
}

.uppy-StatusBar-actionBtn--dismissError {
  background: none !important;
  border: none !important;
  color: var(--on-surface-subtle) !important;
  cursor: pointer;
  font-size: 1rem !important;
}

.uppy-StatusBar.is-error {
  background: color-mix(in srgb, var(--error, #d32f2f) 8%, transparent) !important;
  color: var(--error, #d32f2f) !important;
}

.uppy-StatusBar-statusPrimary {
  color: inherit !important;
  font-weight: 600 !important;
}

.uppy-StatusBar-statusSecondary {
  color: var(--on-surface-subtle) !important;
}

.uppy-StatusBar-actionBtn--close,
.uppy-StatusBar-close {
  color: var(--on-surface-subtle) !important;
}

.uppy-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem;
}

.uppy-file-list:empty {
  display: none;
}

.uppy-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: 2rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.direct-upload-status {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.direct-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.direct-upload-row:last-child {
  border-bottom: none;
}

.direct-upload-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-surface);
}

.direct-upload-row__track {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--on-surface) 10%, transparent);
  overflow: hidden;
}

.direct-upload-row__fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.12s ease-out;
}

.direct-upload-row__status {
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  text-align: right;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.direct-upload-row--done .direct-upload-row__status {
  color: var(--primary);
}

.direct-upload-row--error .direct-upload-row__status {
  color: var(--danger, #c62828);
  max-width: none;
  white-space: normal;
  text-align: left;
  grid-column: 1 / -1;
}

.direct-upload-row--error {
  grid-template-columns: minmax(0, 1fr);
}

.direct-upload-error {
  font-size: 0.8rem;
  color: var(--danger, #c62828);
  padding: 0.35rem 0;
}

.direct-upload-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem;
}

.direct-upload-file-list:empty {
  display: none;
}

.direct-upload-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: 2rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.fm-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
}

.fm-item-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--on-surface);
  flex: 1;
  min-width: 0;
}

a.fm-item-link:hover .fm-item-name {
  color: var(--primary);
}

.fm-item-icon {
  font-size: 1.25rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.fm-item-icon--folder {
  color: var(--primary);
}

.fm-item-name {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.fm-item-meta {
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  margin-top: 0.1rem;
}

.fm-item-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* ─── UPGRADE GATEWAY ─── */
.upgrade-gateway {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.upgrade-gateway-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.upgrade-gateway-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.upgrade-gateway-icon .material-symbols-outlined {
  font-size: 2rem;
  color: var(--primary);
}

.upgrade-gateway-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.upgrade-gateway-desc {
  font-size: 0.95rem;
  color: var(--on-surface-subtle);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.upgrade-gateway-plan {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
  text-align: left;
  margin-bottom: 2rem;
}

.upgrade-gateway-plan-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 1rem;
}

.upgrade-gateway-plan-name .material-symbols-outlined {
  font-size: 1.25rem;
}

.upgrade-gateway-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upgrade-gateway-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--on-surface-mid);
}

.upgrade-gateway-feature .material-symbols-outlined {
  font-size: 1rem;
  color: var(--primary);
}

.upgrade-gateway-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.upgrade-gateway-actions .btn {
  width: 100%;
  max-width: 280px;
  text-align: center;
}

/* ─── DATA EXPORT PICKER ─── */
.export-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
  max-width: 100%;
  overflow: hidden;
}

.export-section-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(60, 44, 0, 0.06);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.export-section-item:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(60, 44, 0, 0.12);
}

.export-section-item:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}

.export-section-item input[type="checkbox"] {
  flex-shrink: 0;
}

.export-section-icon {
  font-size: 1.1rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.export-section-item:has(input:checked) .export-section-icon {
  color: var(--primary);
}

.export-section-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
}

.export-section-desc {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
  line-height: 1.3;
}

/* ─── SHARE LINK ─── */
.share-link-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 2rem;
  padding: 0.3rem 0.3rem 0.3rem 0.75rem;
}

.share-link-badge .material-symbols-outlined {
  color: var(--primary);
}

.share-link-input {
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: var(--on-surface);
  width: 180px;
  cursor: pointer;
  font-family: inherit;
}

.share-link-input:focus {
  outline: none;
}

/* ─── CHAT SHARED FILES ─── */
.chatroom-msg-shared-files {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.chatroom-shared-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: 0.6rem;
  border: 1px solid var(--surface-container);
  text-decoration: none;
  color: var(--on-surface);
  transition: background 0.15s;
}

.chatroom-shared-file:hover {
  background: var(--surface-container);
}

.chatroom-shared-file .material-symbols-outlined {
  color: var(--primary);
}

.chatroom-shared-file-name {
  font-size: 0.82rem;
  font-weight: 600;
}

.chatroom-shared-file-meta {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
}

/* ─── FILE SHARE PICKER (chat) ─── */
.file-share-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1000;
  width: 300px;
  max-height: 320px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(60, 44, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.file-share-header {
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-bottom: 1px solid var(--surface-container);
  color: var(--on-surface);
}

.file-share-list {
  overflow-y: auto;
  flex: 1;
  padding: 0.35rem;
}

.file-share-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.1s;
}

.file-share-item:hover {
  background: var(--surface-container-low);
}

.file-share-item input[type="checkbox"] {
  flex-shrink: 0;
}

.file-share-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-surface);
}

.file-share-size {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

/* ─── LINKED FILES ─── */
.linked-files-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.linked-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.linked-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  border: 1px solid rgba(60, 44, 0, 0.04);
}

.linked-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.linked-file-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linked-file-name:hover {
  color: var(--primary);
}

.linked-file-meta {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.linked-files-picker-list {
  margin-top: 0.5rem;
  max-height: 250px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.75rem;
  border: 1px solid rgba(60, 44, 0, 0.06);
  padding: 0.5rem;
}

.linked-files-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(60, 44, 0, 0.03);
}

.linked-files-picker-item:last-child {
  border-bottom: none;
}

/* ─── FILE PREVIEW ─── */
.file-preview-pdf {
  width: 100%;
  height: 80vh;
  border: none;
  display: block;
}

.file-preview-image {
  padding: 1.5rem;
  background: var(--surface-container-low);
}

.file-preview-text {
  padding: 1.5rem;
  overflow-x: auto;
}

.file-preview-text pre {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-surface);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

.file-preview-video {
  width: 100%;
  display: block;
  background: #000;
}

.file-preview-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
}

.file-preview-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: 0.9rem;
}

.file-preview-docx {
  padding: 2rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--on-surface);
}

.file-preview-docx p { margin-bottom: 0.75rem; }
.file-preview-docx h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.75rem; }
.file-preview-docx h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.file-preview-docx h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.file-preview-docx ul, .file-preview-docx ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.file-preview-docx table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
.file-preview-docx td, .file-preview-docx th { border: 1px solid var(--surface-container); padding: 0.5rem; }

.file-preview-xlsx {
  padding: 1.5rem;
}

.file-preview-sheet-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 1.5rem 0 0.5rem;
}

.file-preview-sheet-name:first-child {
  margin-top: 0;
}

.file-preview-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.file-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.82rem;
}

.file-preview-table td,
.file-preview-table th {
  border: 1px solid var(--surface-container);
  padding: 0.4rem 0.6rem;
  text-align: left;
  color: var(--on-surface);
}

.file-preview-table th {
  background: var(--surface-container-low);
  font-weight: 600;
}

.file-preview-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.3);
}

/* ─── JOIN MODAL ─── */
.join-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.join-overlay[hidden] {
  display: none;
}

.join-modal-content {
  background: var(--surface-lowest);
  border-radius: 1.25rem;
  padding: 1.75rem;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.join-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.join-modal-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--on-surface);
  margin: 0;
}

.join-modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
}

.join-modal-close:hover {
  color: var(--on-surface);
}

/* ─── APP TOUR ─── */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  pointer-events: none;
}

.tour-highlight {
  position: relative;
  z-index: 9999;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 4px var(--primary), 0 0 0 8px color-mix(in srgb, var(--primary) 25%, transparent);
  pointer-events: auto;
}

.tour-tooltip {
  position: fixed;
  z-index: 10000;
  width: 320px;
  pointer-events: auto;
}

.tour-tooltip--right { }
.tour-tooltip--left { }
.tour-tooltip--bottom { }
.tour-tooltip--top { }

.tour-tooltip-content {
  background: var(--surface);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.tour-tooltip-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.tour-tooltip-body {
  font-size: 0.88rem;
  color: var(--on-surface-subtle);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour-tooltip-counter {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--on-surface-subtle);
  opacity: 0.6;
}

.tour-tooltip-actions {
  display: flex;
  gap: 0.5rem;
}

.tour-tooltip-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 2rem;
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: var(--on-primary);
  transition: transform 0.15s, box-shadow 0.15s;
}

.tour-tooltip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.tour-tooltip-btn--ghost {
  background: transparent;
  color: var(--on-surface-subtle);
  border: 1.5px solid var(--surface-container);
}

.tour-tooltip-btn--ghost:hover {
  background: var(--surface-container-low);
  box-shadow: none;
  transform: none;
}

/* ─── AI RESPONSES ─── */
.ai-response {
  border-radius: 0.75rem;
  margin-top: 1rem;
}

.ai-response-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--surface-container-low);
  border-radius: 0.75rem;
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
}

.ai-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: aiPulse 1.4s ease-in-out infinite;
}

@keyframes aiPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.ai-response-content {
  padding: 1.25rem;
  background: var(--surface-container-low);
  border-radius: 0.75rem;
  border-left: 3px solid var(--primary);
}

.ai-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
}

.ai-response-meta {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
}

.ai-response-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--on-surface);
}

.ai-response-body p {
  margin-bottom: 0.75rem;
}

.ai-response-body p:last-child {
  margin-bottom: 0;
}

.ai-response-error {
  padding: 1.25rem;
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-radius: 0.75rem;
  font-size: 0.88rem;
  color: var(--on-surface-subtle);
}

.ai-response-error p {
  margin: 0 0 0.75rem;
}

.ai-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-variant);
}

.lesson-plan-ai-panel {
  margin-top: 0.75rem;
}

.lesson-plan-ai-generate {
  width: 100%;
  text-align: center;
}

.lesson-plan-notes-hint,
.lesson-plan-ai-disabled-hint {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--on-surface-mid);
  margin: 0 0 0.5rem;
}

.lesson-plan-textarea {
  min-height: 16rem;
  line-height: 1.55;
}

/* ─── DEVISE AUTH PAGES ─── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-container-low) 100%);
}

.auth-split {
  display: flex;
  width: 100%;
  max-width: 820px;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(60, 44, 0, 0.1);
}

.auth-brand {
  flex: 1;
  background: var(--primary);
  color: var(--on-primary);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-brand-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-brand-icon .material-symbols-outlined {
  color: var(--on-primary);
}

.auth-brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.auth-brand-tagline {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0 0 2rem;
  line-height: 1.5;
}

.auth-brand-features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.auth-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  opacity: 0.85;
}

.auth-feature .material-symbols-outlined {
  font-size: 18px;
  opacity: 0.7;
}

.auth-card {
  flex: 1;
  background: #ffffff;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--on-surface);
  margin: 0 0 0.25rem;
}

.auth-card-subtitle {
  font-size: 0.88rem;
  color: var(--on-surface-subtle);
  margin: 0 0 1.5rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-submit-btn {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--on-surface-subtle);
  font-size: 0.78rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--surface-container);
}

.auth-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.auth-alt-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.auth-alt-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .auth-split {
    flex-direction: column;
  }
  .auth-brand {
    padding: 2rem 2rem 1.5rem;
  }
  .auth-brand-features {
    display: none;
  }
}

:focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.18);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.auth-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 0.3rem;
  color: var(--primary);
}

.auth-tagline {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 600;
}

.auth-signup-prompt {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(37, 57, 212, 0.04);
  border-radius: 0.75rem;
  border: 1.5px solid rgba(37, 57, 212, 0.1);
  font-size: 0.88rem;
  color: var(--on-surface-subtle);
}

.auth-signup-btn {
  font-weight: 700;
  color: #2539d4;
  text-decoration: none;
  transition: color 0.2s;
}

.auth-signup-btn:hover {
  color: #1a2bb0;
}

.auth-links {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.auth-link {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--primary);
  font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }

/* ─── RESOURCES ─── */
.resource-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 0;
  align-items: flex-start;
}
.resource-item + .resource-item {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 0.9rem;
  margin-top: 0.4rem;
}

.resource-icon {
  width: 34px; height: 34px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
  background: var(--gold-pale);
}

.resource-title {
  font-size: 0.88rem;
  color: var(--on-surface);
  line-height: 1.3;
}
.resource-title a { color: var(--primary); }
.resource-title a:hover { text-decoration: underline; }

.resource-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.resource-tag {
  display: inline-block;
  background: var(--surface-container);
  color: var(--on-surface-mid);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  margin-left: 0.4rem;
}

.resource-filter-card {
  margin-bottom: 1.2rem;
}

.resource-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 1fr) minmax(150px, 1fr) minmax(220px, auto);
  gap: 1rem;
  align-items: end;
}

.resource-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.resource-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-mid);
  font-size: 0.85rem;
}

.resource-free-toggle {
  justify-content: flex-end;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}

.resource-card {
  height: 100%;
}

.resource-card-title {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.resource-description {
  color: var(--on-surface-mid);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.resource-description--empty {
  color: var(--on-surface-subtle);
  font-style: italic;
}

.resource-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resource-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: var(--surface-container-low);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
}

.resource-meta-pill a { color: var(--primary); }
.resource-meta-pill a:hover { text-decoration: underline; }

/* ─── DECORATIVE RULE ─── */
.rule {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.5rem 0;
  color: var(--on-surface-subtle);
  font-size: 0.8rem;
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--outline-variant);
}

/* ─── REPORTS ─── */
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
}

.stat-card-header {
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface-container-low);
}

.stat-card-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  flex: 1;
  color: var(--on-surface);
}

.stat-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stat-item {
  padding: 1rem 1.2rem;
  text-align: center;
  background: var(--surface-lowest);
}
.stat-item:nth-child(even) { background: var(--surface-container-low); }
.stat-item:nth-child(3),
.stat-item:nth-child(4) { }

.stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--on-surface);
  line-height: 1;
}

.stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
  font-weight: 600;
}

/* CSS bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 0.55rem; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bar-label {
  width: 110px;
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  text-align: right;
}

.bar-track {
  flex: 1;
  height: 7px;
  background: var(--surface-container-high);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.bar-value {
  width: 52px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  color: var(--on-surface-subtle);
  font-weight: 600;
}

/* Week trend — vertical bars */
.week-trend {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 110px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.wk-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 30px;
  cursor: default;
}

.wk-bar-track {
  width: 18px;
  height: 72px;
  background: var(--surface-container-high);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.wk-bar-fill {
  width: 100%;
  background: var(--secondary);
  border-radius: 6px;
  transition: height 0.5s ease;
  min-height: 0;
}

.wk-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.44rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* School days dots */
.school-days-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.school-day-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
}

.sd-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--secondary);
}

.sd-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.44rem;
  color: var(--on-surface-subtle);
  font-weight: 600;
}

/* ─── PLANNER (Google Calendar style) ─── */
.main:has(.gcal-toolbar) {
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Toolbar ── */
.gcal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.gcal-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gcal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gcal-today-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #dadce0;
  background: #fff;
  text-decoration: none;
  transition: background 0.1s, box-shadow 0.1s;
}
.gcal-today-btn:hover {
  background: #f1f3f4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gcal-nav-arrows {
  display: flex;
  gap: 0;
}

.gcal-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #5f6368;
  transition: background 0.15s;
}
.gcal-nav-arrow:hover {
  background: #f1f3f4;
}

.gcal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: #3c4043;
  margin: 0;
  letter-spacing: 0;
}

.gcal-action-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5f6368;
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid #dadce0;
  background: #fff;
  cursor: pointer;
  transition: background 0.1s, box-shadow 0.1s;
  text-decoration: none;
  display: inline-block;
}
.gcal-action-btn:hover {
  background: #f1f3f4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Week view (days as columns) ── */
.gcal-week {
  border: 1px solid #dadce0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.gcal-week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #dadce0;
}

.gcal-week-col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem 0.25rem 0.6rem;
  background: #fff;
}
.gcal-week-col-head + .gcal-week-col-head {
  border-left: 1px solid #dadce0;
}
.gcal-week-col-head--today {
  background: transparent;
}

.gcal-week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 450px;
}

.gcal-week-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.4rem;
  background: #fff;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.1s;
}
.gcal-week-col:hover {
  background: #f8f9fa;
}
.gcal-week-col + .gcal-week-col {
  border-left: 1px solid #dadce0;
}
.gcal-week-col--today {
  background: #e8f0fe;
}
.gcal-week-col--today:hover {
  background: #d2e3fc;
}

.gcal-child-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #70757a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 0 0.1rem;
}
.gcal-child-label:first-child { padding-top: 0; }

.gcal-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gcal-col-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #70757a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gcal-day-abbr {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70757a;
}

.gcal-day-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #3c4043;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gcal-day-num--today {
  background: #1a73e8;
  color: #fff;
  font-weight: 500;
}

/* Day view add button */
.gcal-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #5f6368;
  transition: background 0.15s, color 0.15s;
  margin-top: auto;
  align-self: flex-end;
}
.gcal-add-btn:hover {
  background: #e8eaed;
  color: #1a73e8;
}

/* ── Event chips (Google Calendar style) ── */
.gcal-event {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.3;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.15s, filter 0.15s;
  white-space: nowrap;
  overflow: hidden;
  min-height: 24px;
  /* default color if no subject class matches */
  background: #039be5;
}
.gcal-event:hover {
  filter: brightness(0.92);
}

.gcal-event--done {
  opacity: 0.45;
}
.gcal-event--done .gcal-event-title {
  text-decoration: line-through;
}

.gcal-event-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.gcal-event-time {
  font-size: 0.7rem;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Subject event colors (Google Calendar palette) */
.subj-bg-grammar     { background: #7986cb; }
.subj-bg-math        { background: #4285f4; }
.subj-bg-history     { background: #e67c73; }
.subj-bg-reading     { background: #f4b400; color: #3c4043; }
.subj-bg-nature      { background: #0b8043; }
.subj-bg-latin       { background: #8e24aa; }
.subj-bg-rhetoric    { background: #795548; }
.subj-bg-science     { background: #33b679; }
.subj-bg-composer    { background: #7c5ce0; }
.subj-bg-art         { background: #d50000; }
.subj-bg-literature  { background: #e67c73; }
.subj-bg-pre-algebra { background: #4285f4; }

/* ── View Switcher ── */
.gcal-view-switcher {
  display: flex;
  border: 1px solid #dadce0;
  border-radius: 0.5rem;
  overflow: hidden;
}

.gcal-view-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5f6368;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  border-right: 1px solid #dadce0;
  transition: background 0.1s, color 0.1s;
  background: #fff;
}
.gcal-view-btn:last-child { border-right: none; }
.gcal-view-btn:hover { background: #f1f3f4; }
.gcal-view-btn--active {
  background: #e8f0fe;
  color: #1a73e8;
}
.gcal-view-btn--active:hover {
  background: #d2e3fc;
}

/* ── Day View ── */
.gcal-day-view-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem 0 1rem;
}

.gcal-day-columns {
  display: grid;
  grid-template-columns: repeat(var(--child-count), 1fr);
  gap: 1px;
  border: 1px solid #dadce0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #dadce0;
}

.gcal-day-column {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.gcal-day-col-head {
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-bottom: 1px solid #dadce0;
  background: #fff;
}

.gcal-day-lessons {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.gcal-day-add-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #5f6368;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  margin-top: auto;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.gcal-day-add-btn:hover {
  background: #f1f3f4;
  color: #1a73e8;
}

/* ── Month View ── */
.gcal-month {
  border: 1px solid #dadce0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 130px);
}

.gcal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #dadce0;
  flex-shrink: 0;
}

.gcal-month-day-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70757a;
  text-align: center;
  padding: 0.5rem 0;
}

.gcal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
}

.gcal-month-cell {
  border-top: 1px solid #dadce0;
  border-right: 1px solid #dadce0;
  padding: 0.25rem;
  background: #fff;
}
.gcal-month-cell:nth-child(7n) { border-right: none; }

.gcal-month-cell--other {
  background: #f8f9fa;
}
.gcal-month-cell--other .gcal-month-num {
  color: #b0b0b0;
}

.gcal-month-cell--today {
  background: #e8f0fe;
}

.gcal-month-cell-head {
  padding: 0.2rem 0.3rem;
  display: flex;
  justify-content: flex-end;
}

.gcal-month-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #3c4043;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gcal-month-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gcal-month-event {
  display: block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.1s;
  background: #039be5;
}
.gcal-month-event:hover { opacity: 0.85; }

.gcal-month-more {
  font-size: 0.65rem;
  font-weight: 600;
  color: #70757a;
  padding: 1px 4px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.1s;
}
.gcal-month-more:hover {
  background: #f1f3f4;
}

/* ─── LESSON NOTES ─── */
.lesson-notes {
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.15rem;
}

/* ─── READING BANNER (dashboard) ─── */
.reading-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--gold-pale);
  border-radius: 1rem;
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
}

.reading-banner-icon { font-size: 1.2rem; flex-shrink: 0; }
.reading-banner-body { flex: 1; }

.reading-banner-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.reading-banner-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.reading-title-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.reading-title {
  font-size: 0.88rem;
  color: var(--on-surface);
  font-style: italic;
}
.reading-title-link:hover .reading-title { text-decoration: underline; }

.reading-banner-link {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.reading-banner-link:hover { text-decoration: underline; }

/* ─── READ-ALOUDS ─── */
.ra-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.3rem;
}
.ra-row + .ra-row {
  background: var(--surface-container-low);
  border-radius: 1rem;
  margin-top: 0.4rem;
}
.ra-row--dim { opacity: 0.5; }
.ra-row-link { flex: 1; }

.ra-title {
  font-size: 0.95rem;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
  font-style: italic;
}
.ra-row-link:hover .ra-title { text-decoration: underline; }

.ra-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.03em;
}

.ra-sep { color: var(--surface-container-high); }
.ra-child-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ra-child-name { font-size: 0.55rem; }
.ra-section { font-style: italic; }

.ra-action {
  font-size: 0.6rem;
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}

.ra-participants {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.ra-participants-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  font-weight: 700;
}

.ra-participant {
  font-size: 0.85rem;
  opacity: 0.3;
}
.ra-participant--active { opacity: 1; font-weight: 600; }

.ra-current-section {
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  font-style: italic;
  margin-bottom: 1rem;
}

.ra-section-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-right: 0.4rem;
  font-style: normal;
}

.card-head-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.ra-session {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 1.3rem;
}
.ra-session + .ra-session {
  background: var(--surface-container-low);
  border-radius: 1rem;
  margin-top: 0.4rem;
}

.ra-session-date {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 0.1rem;
  min-width: 76px;
}

.ra-session-body { flex: 1; }

.ra-session-section {
  font-size: 0.85rem;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}

.ra-session-notes {
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  font-style: italic;
  line-height: 1.5;
}

.ra-session-duration {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.52rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
}

.ra-session-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  opacity: 0;
  transition: opacity 0.08s;
}
.ra-session:hover .ra-session-actions { opacity: 1; }

.ra-child-checks {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.ra-check-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.88rem;
}

.ra-check-name { font-size: 0.88rem; }

/* ─── PRINT STYLES ─── */
@media print {
  .topbar, .sidebar-wrapper,
  .page-header > div:last-child,
  .btn, .btn-ghost, .card-action { display: none !important; }

  .app-body { display: block; }
  .main { padding: 0; max-width: none; overflow: visible; }

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

  .bar-fill, .wk-bar-fill, .ring-fill, .sd-dot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card { break-inside: avoid; page-break-inside: avoid; }
  .stat-card { break-inside: avoid; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .dash-welcome { flex-direction: column; align-items: flex-start; }
  .dash-greeting { font-size: 2rem; }
  .dash-tagline { font-size: 0.9rem; }
  .dash-motto-banner { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .dash-orbs { align-self: flex-start; }
  .dash-bento-grid { grid-template-columns: 1fr; }
  .dash-bento-aside { flex-direction: row; flex-wrap: wrap; }
  .dash-aside-card { flex: 1; min-width: 200px; }
  .dash-stats { gap: 0.75rem; }
  .dash-stat-card { min-width: 80px; padding: 1rem; }
  .dash-stat-num { font-size: 1.5rem; }
  .dash-bento-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .main {
    padding: 1.2rem;
    width: 100%;
    max-width: none;
  }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-bar { padding: 0 1rem; }
  .nav-avatars { display: none; }
  .nav-week-label { display: none; }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .page-header > div:last-child {
    width: 100%;
  }
  .page-header .term-card-actions,
  .page-header > div:last-child[style] {
    width: 100%;
  }
  .term-card-actions {
    width: 100%;
  }
  .record-strip {
    gap: 1.25rem;
  }
  .record-divider {
    display: none;
  }
  .record-item,
  .record-export {
    width: calc(50% - 0.7rem);
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
  }
  .export-btns {
    flex-wrap: wrap;
  }
  .term-detail-grid,
  .child-detail-grid {
    grid-template-columns: 1fr;
  }
  .resource-filters {
    grid-template-columns: 1fr;
  }
  .resource-filter-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
  .child-profile-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .gcal-week-head { grid-template-columns: repeat(7, 1fr); }
  .gcal-week-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .gcal-week-head { display: none; }
  .gcal-week-col {
    border-left: none;
    border-top: 1px solid #dadce0;
    min-height: 60px;
    padding: 0.5rem;
  }
  .gcal-week-col + .gcal-week-col { border-left: none; }
  .gcal-week-col::before {
    content: attr(data-day-label);
    font-size: 0.65rem;
    font-weight: 700;
    color: #70757a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
  }
  .gcal-toolbar { flex-wrap: wrap; }
  .gcal-toolbar-right { flex-wrap: wrap; }
  .gcal-title { font-size: 1.1rem; }
  .gcal-day-columns { grid-template-columns: 1fr; }
  .gcal-day-column { min-height: 150px; }
  .gcal-month-cell { min-height: 60px; }
  .gcal-month-event { font-size: 0.55rem; }
  .gcal-view-btn { padding: 0.35rem 0.6rem; font-size: 0.7rem; }
  .term-week-row {
    grid-template-columns: 1fr;
  }
  .term-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .main {
    padding: 1rem;
    width: 100%;
  }
  .hub-grid { grid-template-columns: 1fr; }
  .dash-greeting { font-size: 1.6rem; }
  .dash-tagline { font-size: 0.82rem; }
  .dash-motto-banner { padding: 0.85rem 1.25rem; }
  .dash-motto-text { font-size: 0.82rem; }
  .dash-orbs { gap: 1rem; }
  .dash-orb-ring { width: 56px; height: 56px; }
  .dash-orb-pct { font-size: 0.75rem; }
  .dash-stats { flex-direction: column; }
  .dash-stat-card { min-width: 0; }
  .dash-cards-grid { grid-template-columns: 1fr; }
  .dash-bento-aside { flex-direction: column; }
  .dash-aside-card { min-width: 0; }
  .record-item,
  .record-export {
    width: 100%;
  }
  .form-card {
    padding: 1.25rem;
  }
  .card-head,
  .card-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .resource-card-title,
  .child-profile-id {
    align-items: flex-start;
  }
}

/* ─── BREADCRUMBS ─── */
.breadcrumb {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color 0.12s;
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--surface-container-high); font-weight: 300; }

/* ─── SIGN OUT BUTTON ─── */
.signout-btn {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  border: none;
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  text-decoration: none;
  transition: all 0.1s;
  cursor: pointer;
  display: inline-block;
  align-self: center;
}
.signout-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

/* ─── NARRATION EDIT LINK ─── */
.narration-edit {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  opacity: 0;
  transition: opacity 0.08s;
  margin-left: 0.5rem;
  text-decoration: none;
}
.narration-item:hover .narration-edit { opacity: 0.6; }
.narration-edit:hover { opacity: 1 !important; color: var(--primary); }

/* ─── ONBOARDING ─── */
.onboarding-body {
  background: var(--surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.onboarding-body {
  overflow-x: hidden;
}

.ob-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.5rem 3rem;
  gap: 2rem;
  min-height: 0;
}

.ob-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.ob-brand--fixed {
  padding: 2rem 0 0.5rem;
  text-align: center;
}

.ob-brand-logo {
  color: var(--primary);
}

.ob-brand-logo svg {
  height: 10rem;
  width: auto;
}

/* Onboarding page content — slide transitions handled by ob-transition controller */
.ob-page-content {
  width: 100%;
}

@keyframes obSlideIn {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes obSlideOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(-60px);
  }
}

.ob-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.ob-logo-sub {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.ob-card {
  background: var(--surface-lowest);
  border-radius: 1.75rem;
  padding: 2.75rem 3rem;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 40px rgba(28, 28, 26, 0.07);
  position: relative;
}

/* ── Siri-style AI halo ── */
@property --halo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ob-card--ai-halo {
  --halo-angle: 0deg;
  animation: halo-spin 4s linear infinite;
}

.ob-card--ai-halo::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(1.75rem + 3px);
  padding: 3px;
  background: conic-gradient(
    from var(--halo-angle),
    #ff6b8a, #ff8a65, #ffd54f,
    #81c784, #4dd0e1, #7986cb,
    #ba68c8, #f06292, #ff6b8a
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  animation: halo-fade-in 0.6s ease forwards;
  filter: blur(1px);
}

.ob-card--ai-halo::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: calc(1.75rem + 12px);
  background: conic-gradient(
    from var(--halo-angle),
    #ff6b8a44, #ff8a6544, #ffd54f44,
    #81c78444, #4dd0e144, #7986cb44,
    #ba68c844, #f0629244, #ff6b8a44
  );
  pointer-events: none;
  opacity: 0;
  animation: halo-fade-in 0.8s ease 0.1s forwards;
  filter: blur(18px);
  z-index: -1;
}

@keyframes halo-spin {
  to { --halo-angle: 360deg; }
}

@keyframes halo-fade-in {
  to { opacity: 1; }
}

.ob-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.ob-step {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.ob-step--active {
  color: var(--primary);
}

.ob-step--done {
  color: var(--secondary);
}

.ob-step-sep {
  color: var(--surface-container-high);
  font-size: 0.75rem;
}

.ob-step-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.ob-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin-bottom: 1.25rem;
}

.ob-title em {
  font-style: italic;
  color: var(--primary);
}

.ob-desc {
  font-size: 0.95rem;
  color: var(--on-surface-mid);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.ob-form {
  margin-top: 1.75rem;
}

.ob-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 2rem;
}

.ob-btn-primary {
  font-size: 0.88rem;
  padding: 0.75rem 1.75rem;
}

.ob-skip {
  margin-top: 1.25rem;
  text-align: center;
}

.ob-skip-link {
  background: none;
  border: none;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.ob-skip-link:hover { color: var(--on-surface-mid); }

.ob-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 360px;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--on-surface-subtle);
  line-height: 1.6;
}

.ob-quote-attr {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
}

/* ── Founder letter ── */
.ob-letter {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--on-surface);
}

.ob-letter p {
  margin: 0 0 1rem;
}

.ob-letter p:first-child {
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.ob-letter-closing {
  margin-bottom: 0.25rem !important;
}

.ob-letter-signature {
  font-family: 'Alex Brush', cursive;
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 0 !important;
  line-height: 1.2;
}

.ob-signature-protected {
  position: relative;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Transparent overlay prevents right-click on the image */
.ob-signature-protected::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ob-letter-signature-img {
  height: 3.5rem;
  width: auto;
  margin: 0.25rem 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ob-letter-role {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.03em;
  margin-top: 0 !important;
}

.ob-letter-contact {
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e0d8);
}

.ob-letter-contact a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.ob-letter-contact a:hover {
  text-decoration: underline;
}

/* ── Quiz result ── */
.ob-quiz-result-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.ob-quiz-result-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--on-surface-subtle);
  margin-bottom: 1.5rem;
}

.ob-quiz-result-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--on-surface);
  margin-bottom: 1.25rem;
}

/* ── Quiz CTA on method step ── */
.ob-quiz-cta {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface, #faf8f4);
  border: 2px dashed var(--primary);
  border-radius: 1rem;
}

.ob-quiz-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ob-quiz-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--on-surface);
}

.ob-quiz-cta-text strong {
  font-size: 1rem;
  color: var(--primary);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  white-space: nowrap;
}

.btn--outline:hover {
  background: var(--primary);
  color: var(--on-primary, #fff);
}

.ob-quiz-result-good-for {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-surface-subtle);
  padding: 1rem 1.25rem;
  background: var(--surface, #faf8f4);
  border-radius: 0.75rem;
}

/* ─── HABITS PAGE ─── */
.habits-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.habits-nav-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #3c4043;
}

.habits-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.habits-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fafafa;
}

.habits-card-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
}

.habits-card-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
}

.habits-table-wrap {
  overflow-x: auto;
}

.habits-table {
  width: 100%;
  border-collapse: collapse;
}

.habits-th-name {
  width: 180px;
  padding: 0.6rem 1rem;
  text-align: left;
}

.habits-th-day {
  padding: 0.5rem 0.25rem;
  text-align: center;
  min-width: 56px;
}

.habits-th-day--today {
  background: #e8f0fe;
}

.habits-day-abbr {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.habits-day-num {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  color: #3c4043;
  margin-top: 1px;
}

.habits-day-num--today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
}

.habits-row {
  border-top: 1px solid var(--outline-variant);
}
.habits-row:hover {
  background: #fafafa;
}

.habits-td-name {
  padding: 0.6rem 1rem;
}

.habits-habit-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
}
.habits-habit-link:hover {
  color: #1a73e8;
}

.habits-td-check {
  text-align: center;
  padding: 0.4rem;
}

.habits-td-check--today {
  background: #e8f0fe;
}

.habits-check-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}
.habits-check-btn:hover {
  background: #e5e7eb;
}

.habits-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background 0.15s, border-color 0.15s;
}

.habits-check--empty {
  border: 2px solid #d1d5db;
  background: #fff;
}
.habits-check-btn:hover .habits-check--empty {
  border-color: #1a73e8;
  background: #e8f0fe;
}

.habits-check--done {
  background: #1a73e8;
  color: #fff;
}

/* legacy compat */
.habit-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.habit-week-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-surface);
  min-width: 200px;
  text-align: center;
}

.habit-grid {
  margin-bottom: 0.5rem;
}

.habit-grid-header,
.habit-grid-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 48px) 64px;
  gap: 2px;
  align-items: center;
}

.habit-grid-header {
  padding: 0.4rem 0;
  margin-bottom: 0.25rem;
}

.habit-grid-name-col {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.habit-grid-row .habit-grid-name-col {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-surface);
}

.habit-name-actions {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.1s;
}

.habit-grid-row:hover .habit-name-actions {
  opacity: 1;
}

.habit-cat-emoji {
  font-size: 0.9rem;
}

.habit-grid-day-col {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.habit-grid-day-col--today {
  background: rgba(64, 92, 101, 0.06);
  border-radius: 0.4rem;
}

.habit-day-abbr {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.habit-day-num {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  color: var(--on-surface-mid);
}

.habit-grid-streak-col {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.habit-streak-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
}

.habit-streak-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  color: var(--on-surface-subtle);
}

.habit-grid-row {
  padding: 0.45rem 0;
  border-radius: 0.4rem;
  transition: background 0.1s;
}

.habit-grid-row:hover {
  background: var(--surface-container-low);
}

.habit-toggle-form {
  display: inline;
}

.habit-check {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.15rem;
  line-height: 1;
  transition: transform 0.1s;
}

.habit-check:hover {
  transform: scale(1.15);
}

.habit-check--future {
  color: var(--surface-container-high);
  cursor: default;
  font-size: 0.8rem;
}

.habit-check--future:hover {
  transform: none;
}

@media (max-width: 768px) {
  .habit-grid-header,
  .habit-grid-row {
    grid-template-columns: 1fr repeat(7, 36px) 48px;
  }
  .habit-day-abbr { font-size: 0.5rem; }
  .habit-name-actions { opacity: 1; }
}

/* ─── HABIT ENHANCEMENTS ─── */

.habits-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.habits-move-btns {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.habits-row:hover .habits-move-btns { opacity: 1; }

.habits-move-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  color: var(--on-surface-subtle);
  border-radius: 3px;
  transition: color 0.1s, background 0.1s;
}
.habits-move-btn:hover {
  color: var(--primary);
  background: rgba(37, 57, 212, 0.06);
}

.habits-streak-badge {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--secondary);
  white-space: nowrap;
}

.habits-note-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}

.habits-td-check { position: relative; }

/* Inactive habits section */
.habits-inactive-section {
  margin-bottom: 1.25rem;
}

.habits-inactive-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.5rem 0;
  list-style: none;
}

.habits-inactive-summary::-webkit-details-marker { display: none; }
.habits-inactive-summary::before {
  content: "\25B6";
  font-size: 0.55rem;
  transition: transform 0.15s;
}
details[open] > .habits-inactive-summary::before { transform: rotate(90deg); }

.habits-inactive-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0 0.5rem 1rem;
}

.habits-inactive-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--surface-container-low);
  opacity: 0.7;
}

.habits-inactive-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
}

.habits-inactive-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

.habits-inactive-actions {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
}

/* Show page: 30-day calendar */
.habits-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  max-width: 280px;
}

.habits-calendar-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.habits-calendar-cell--done {
  background: #1a73e8;
  color: #fff;
}

.habits-calendar-cell--today {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.habits-calendar-day {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
}

/* Show page: log history */
.habits-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.habits-log-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
}

.habits-log-row:nth-child(even) {
  background: var(--surface-container-low);
}

.habits-log-date {
  color: var(--on-surface-mid);
  min-width: 100px;
}

.habits-log-notes {
  color: var(--on-surface-subtle);
  font-size: 0.72rem;
}

.habits-log-note-form {
  margin-left: auto;
  display: flex;
}

.habits-log-note-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.2rem 0.5rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  width: 180px;
  transition: border-color 0.15s, background 0.15s;
}

.habits-log-note-input:focus {
  border-color: rgba(37, 57, 212, 0.3);
  background: rgba(255, 255, 255, 0.6);
  outline: none;
}

@media (max-width: 600px) {
  .habits-move-btns { opacity: 1; }
  .habits-calendar-grid { max-width: 100%; }
  .habits-log-note-input { width: 120px; }
}

/* ─── MEMORY WORK ─── */
.mw-due-section {
  margin-bottom: 2rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: rgba(176, 142, 62, 0.06);
}

.mw-section {
  margin-bottom: 2rem;
}

.mw-section-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.85rem;
}

.mw-due-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.mw-due-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mw-due-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  background: var(--surface-lowest);
}

.mw-due-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mw-due-card-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
}

.mw-due-card-rotation {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mw-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  transition: background 0.12s ease;
}

.mw-row:hover { background: var(--surface-container); }
.mw-row--mastered { opacity: 0.6; }

.mw-row-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.mw-row-emoji { font-size: 1.2rem; flex-shrink: 0; }

.mw-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mw-row-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mw-row-link {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
}

.mw-row-link:hover { text-decoration: underline; }

.mw-row-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

.mw-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Memory work show page */
.mw-body-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  margin-bottom: 1.5rem;
}

.mw-body-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--on-surface-mid);
  white-space: pre-wrap;
}

.mw-body-text p { margin: 0 0 0.75rem; }
.mw-body-text p:last-child { margin-bottom: 0; }

.mw-stats-bar {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.mw-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mw-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--on-surface);
}

.mw-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.mw-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mw-review-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
}

.mw-review-row:nth-child(even) {
  background: var(--surface-container-low);
}

.mw-review-date {
  color: var(--on-surface-mid);
  min-width: 100px;
}

.mw-review-confidence {
  font-weight: 600;
  color: var(--on-surface);
}

.mw-review-notes {
  color: var(--on-surface-subtle);
  font-size: 0.72rem;
}

/* Confidence picker (review form) */
.confidence-picker {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.confidence-option { cursor: pointer; }
.confidence-option input { display: none; }

.confidence-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.65rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all 0.12s ease;
}

.confidence-option input:checked + .confidence-label {
  border-color: var(--primary);
  background: var(--surface-container);
  color: var(--on-surface);
}

.confidence-label:hover {
  background: var(--surface-container);
}

.confidence-emoji { font-size: 0.9rem; }

@media (max-width: 600px) {
  .mw-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mw-row-actions { margin-top: 0.5rem; }
  .mw-stats-bar { flex-wrap: wrap; gap: 1rem; }
}

/* ─── CONFIDENCE TREND ─── */
.mw-trend {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 100px;
  padding: 0.5rem 0;
}

.mw-trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 18px;
  max-width: 32px;
}

.mw-trend-bar-track {
  width: 100%;
  height: 72px;
  background: var(--surface-container-high);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.mw-trend-bar-fill {
  width: 100%;
  border-radius: 4px;
  transition: height 0.5s ease;
}

.mw-trend-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
}

/* ─── PRACTICE SESSION ─── */
.mw-practice-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.mw-practice-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: opacity 0.3s ease;
}

.mw-practice-card--done { opacity: 0.5; }

.mw-practice-prompt {
  margin-bottom: 1.5rem;
}

.mw-practice-emoji { font-size: 2rem; margin-bottom: 0.5rem; }

.mw-practice-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 0.25rem;
}

.mw-practice-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  margin-bottom: 0;
}

.mw-practice-instruction {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.9rem;
  color: var(--on-surface-subtle);
  font-style: italic;
  margin-top: 1rem;
}

.mw-practice-body {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--surface-container);
  border-radius: 1rem;
  text-align: left;
  animation: mwFadeIn 0.3s ease;
}

.mw-practice-confidence {
  margin-top: 1.5rem;
  animation: mwFadeIn 0.3s ease;
}

.mw-practice-confidence p {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.mw-practice-confidence .confidence-picker {
  justify-content: center;
}

.mw-practice-summary {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}

.mw-practice-summary h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.mw-practice-summary p {
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--on-surface-mid);
  margin-bottom: 1.5rem;
}

@keyframes mwFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .mw-practice-card { padding: 1.5rem 1rem; }
  .mw-practice-title { font-size: 1.2rem; }
  .mw-trend { gap: 0.2rem; }
}

/* ─── TRANSCRIPTS ─── */
.transcript-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.transcript-card {
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.transcript-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.transcript-card-info {
  display: flex;
  flex-direction: column;
}

.transcript-card-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--on-surface);
}

.transcript-card-school {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.transcript-card-stats,
.transcript-summary-bar {
  display: flex;
  gap: 1.5rem;
}

.transcript-summary-bar {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.transcript-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.transcript-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.1;
}

.transcript-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.transcript-card-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
}

/* Course table */
.transcript-course-table {
  margin-bottom: 0.5rem;
}

.transcript-course-header,
.transcript-course-row {
  display: grid;
  grid-template-columns: 1fr 100px 70px 60px 100px;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
}

.transcript-course-header {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  border-bottom: none;
}

.transcript-course-row {
  border-radius: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
}

.transcript-course-row:nth-child(even) {
  background: var(--surface-container-low);
}

.tc-course-name {
  font-weight: 600;
  color: var(--on-surface);
  display: block;
}

.tc-course-desc {
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  display: block;
  margin-top: 0.15rem;
}

.tc-col--credits,
.tc-col--grade {
  text-align: center;
}

.tc-col--actions {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .transcript-course-header,
  .transcript-course-row {
    grid-template-columns: 1fr 60px 50px 50px;
  }
  .tc-col--actions { display: none; }
  .transcript-summary-bar { flex-wrap: wrap; }
}

/* ─── STATE COMPLIANCE ─── */
.compliance-state-picker {
  margin-bottom: 2rem;
}

.compliance-state-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.compliance-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.compliance-state-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--on-surface);
}

.compliance-reg-badge {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
}

.compliance-reg-badge--low {
  background: rgba(83, 98, 80, 0.12);
  color: var(--secondary);
}

.compliance-reg-badge--moderate {
  background: rgba(176, 142, 62, 0.12);
  color: var(--gold);
}

.compliance-reg-badge--high {
  background: rgba(168, 92, 58, 0.12);
  color: var(--terracotta);
}

.compliance-section-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  margin-bottom: 1rem;
}

.compliance-progress-section {
  margin-bottom: 2.5rem;
}

.compliance-progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.compliance-progress-card {
  padding: 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.compliance-progress-card--wide {
  grid-column: 1 / -1;
}

.compliance-progress-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.compliance-progress-nums {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.compliance-progress-current {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1;
}

.compliance-progress-goal {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.compliance-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-container-high);
  overflow: hidden;
}

.compliance-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.compliance-fill--days { background: var(--gold); }
.compliance-fill--hours { background: var(--sky); }

.compliance-subject-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.compliance-subject {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  background: var(--surface-container);
}

.compliance-subject--covered {
  color: var(--secondary);
  background: rgba(83, 98, 80, 0.08);
}

.compliance-subject-check {
  font-size: 0.7rem;
}

.compliance-details {
  margin-bottom: 2rem;
}

.compliance-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.compliance-detail-card {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.compliance-detail-icon {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.compliance-detail-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.compliance-detail-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
}

.compliance-notes {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.compliance-disclaimer {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem;
  margin-top: 2rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.compliance-disclaimer-icon {
  flex-shrink: 0;
  color: var(--primary);
}

.compliance-disclaimer-icon .material-symbols-outlined {
  font-size: 1.25rem;
}

.compliance-disclaimer-body {
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.compliance-disclaimer-body p {
  margin: 0 0 0.5rem;
}

.compliance-disclaimer-body p:last-child {
  margin-bottom: 0;
}

.compliance-disclaimer-body a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.compliance-disclaimer-body a:hover {
  text-decoration: underline;
}

.compliance-disclaimer-sources {
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
}

.compliance-report-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  margin-top: 0.25rem;
}

.compliance-notice {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  margin-bottom: 2rem;
}

.compliance-notice a {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 600px) {
  .compliance-progress-grid {
    grid-template-columns: 1fr;
  }
  .compliance-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── ATTENDANCE CALENDAR ─── */
.attendance-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.att-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  min-width: 170px;
}

.att-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}

.att-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
}

.att-stat-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.att-stat-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--surface-container-high);
  overflow: hidden;
}

.att-stat-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold);
  transition: width 0.4s ease;
}

.att-stat-goal {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  white-space: nowrap;
}

.att-calendar-shell {
  margin-bottom: 1.5rem;
}

.att-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.att-calendar-month {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--on-surface);
  min-width: 170px;
  text-align: center;
}

.att-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.att-cal-head {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  text-align: center;
  padding: 0.5rem 0;
}

.att-cal-cell {
  position: relative;
  min-height: 88px;
  padding: 0.5rem;
  border-radius: 0.75rem;
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  transition: background 0.15s ease;
  border-left: 3px solid transparent;
}

.att-cal-cell:hover {
  background: var(--surface-container);
}

.att-cal-cell--outside {
  opacity: 0.25;
}

.att-cal-cell--today {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--sky-pale);
}

.att-cal-cell--weekend {
  background: var(--surface-container-high);
  opacity: 0.55;
}

.att-cal-cell--school_day { background: rgba(83, 98, 80, 0.16); border-left-color: #536250; }
.att-cal-cell--field_trip { background: rgba(0, 73, 230, 0.10); border-left-color: #0049e6; }
.att-cal-cell--holiday    { background: rgba(176, 142, 62, 0.18); border-left-color: #b08e3e; }
.att-cal-cell--sick_day   { background: rgba(168, 92, 58, 0.18); border-left-color: #a85c3a; }
.att-cal-cell--off_day    { background: rgba(115, 115, 158, 0.12); border-left-color: #73739e; }
.att-cal-cell--auto       { background: rgba(83, 98, 80, 0.08); }

.att-cal-date {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface);
}

.att-cal-status {
  font-size: 1.25rem;
  line-height: 1;
}

.att-cal-status--auto {
  opacity: 0.5;
}

.att-cal-actions {
  margin-top: auto;
  width: 100%;
}

.att-mark-form {
  display: block;
}

.att-mark-select {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--surface-container-high);
  border-radius: 0.4rem;
  background: var(--surface-lowest);
  color: var(--on-surface-mid);
  cursor: pointer;
  width: 100%;
}

.att-mark-select:hover {
  border-color: var(--primary);
  color: var(--on-surface);
}

.att-legend {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.att-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: 2rem;
  padding: 0.3rem 0.75rem;
}

.att-legend-dot {
  font-size: 0.9rem;
}

.att-legend-dot--auto {
  opacity: 0.5;
}

/* ─── Attendance Evidence ─── */
.att-evidence {
  margin-top: 1.5rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 1px 4px rgba(10, 10, 30, 0.04);
  overflow: hidden;
}

.att-evidence-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}

.att-evidence-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(37, 57, 212, 0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.att-evidence-info {
  display: inline-flex;
  color: rgba(26, 26, 46, 0.3);
  cursor: help;
  position: relative;
  transition: color 0.2s;
}

.att-evidence-info:hover {
  color: rgba(37, 57, 212, 0.6);
}

.att-evidence-list {
  padding: 0;
}

.att-evidence-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.04);
}

.att-evidence-item:last-child {
  border-bottom: none;
}

.att-evidence-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.att-evidence-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.att-evidence-emoji {
  font-size: 1rem;
}

.att-evidence-status {
  color: var(--on-surface-subtle);
  font-weight: 400;
}

.att-evidence-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.att-evidence-form {
  margin: 0;
}

.att-evidence-fields {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.att-evidence-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.att-evidence-field--grow {
  flex: 1;
  min-width: 180px;
}

.att-evidence-field--action {
  justify-content: flex-end;
}

.att-evidence-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.att-evidence-select,
.att-evidence-input {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  padding: 0.45rem 0.65rem;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--on-surface);
  transition: border-color 0.2s;
}

.att-evidence-select:focus,
.att-evidence-input:focus {
  outline: none;
  border-color: rgba(37, 57, 212, 0.4);
  box-shadow: 0 0 0 3px rgba(37, 57, 212, 0.08);
}

.att-evidence-file {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
}

.att-evidence-file::file-selector-button {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--on-surface);
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background 0.2s, border-color 0.2s;
}

.att-evidence-file::file-selector-button:hover {
  background: rgba(37, 57, 212, 0.06);
  border-color: rgba(37, 57, 212, 0.2);
}

.att-evidence-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: none;
  border-radius: 0.5rem;
  background: #2539d4;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}

.att-evidence-btn:hover {
  background: #3a50e0;
  transform: translateY(-1px);
}

.att-evidence-empty {
  padding: 1.5rem 1.25rem;
}

.att-evidence-empty p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--on-surface-subtle);
}

@media (max-width: 600px) {
  .att-cal-cell {
    min-height: 64px;
    padding: 0.35rem;
  }
  .att-attendance-stats {
    flex-direction: column;
  }
  .attendance-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ─── DAILY JOURNAL ─── */
.journal-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.journal-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 2rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  text-decoration: none;
  transition: all 0.12s ease;
}

.journal-filter:hover {
  background: var(--surface-container);
}

.journal-filter--active {
  background: var(--primary);
  color: white;
}

.journal-timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.journal-day {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.journal-day-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: none;
}

.journal-day-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-surface);
}

.journal-day-date {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
}

.journal-entry {
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.journal-entry-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.journal-entry-child {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-surface);
}

.journal-entry-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.journal-entry-badge {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--surface-container-high);
  color: var(--on-surface-subtle);
}

.journal-entry-notes {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--on-surface-mid);
  margin-bottom: 0.5rem;
}

.journal-entry-notes p {
  margin: 0 0 0.5rem;
}

.journal-entry-notes p:last-child {
  margin-bottom: 0;
}

.journal-entry-section {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--surface-container);
}

.journal-entry-section-label {
  font-weight: 700;
  color: var(--on-surface-subtle);
  margin-right: 0.3rem;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}

.journal-entry-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--surface-container);
}

/* Journal prompt on dashboard */
.journal-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.journal-prompt-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
}

.journal-prompt-link {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.journal-prompt-link:hover {
  text-decoration: underline;
}

/* ─── LESSON TEMPLATES ─── */
.section-block {
  margin-bottom: 2rem;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: none;
}

.section-head-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-surface);
}

.section-head-count {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  transition: background 0.12s ease;
}

.template-row:hover {
  background: var(--surface-container);
}

.template-row--paused {
  opacity: 0.55;
}

.template-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.template-row-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--on-surface);
}

.template-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.template-row-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.template-row-subject {
  font-weight: 600;
  color: var(--on-surface-mid);
}

.template-row-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
}

.template-row-badge--paused {
  background: var(--surface-container-high);
  color: var(--on-surface-subtle);
}

.template-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Weekday picker (template form) */
.weekday-picker {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.weekday-option {
  cursor: pointer;
}

.weekday-option input {
  display: none;
}

.weekday-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2.4rem;
  border-radius: 0.65rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all 0.12s ease;
}

.weekday-option input:checked + .weekday-label {
  border-color: var(--primary);
  background: var(--surface-container);
  color: var(--on-surface);
}

.weekday-label:hover {
  background: var(--surface-container);
}

@media (max-width: 600px) {
  .template-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .template-row-actions {
    margin-top: 0.5rem;
  }
  .weekday-picker {
    flex-wrap: wrap;
  }
}

/* ─── EXPERIENCE PICKER (onboarding) ─── */
.experience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.experience-card { cursor: pointer; }
.experience-card input { display: none; }

.experience-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all 0.15s ease;
}

.experience-card input:checked + .experience-card-inner {
  border-color: var(--primary);
  background: var(--surface-container);
}

.experience-card-inner:hover {
  background: var(--surface-container);
}

.experience-card-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.experience-card-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--on-surface);
  display: block;
  margin-bottom: 0.25rem;
}

.experience-card-desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
  display: block;
}

/* ─── METHOD PICKER (onboarding) ─── */
.ob-card--wide { max-width: 680px; }

.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.method-card { cursor: pointer; }
.method-card input { display: none; }

.method-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all 0.15s ease;
}

.method-card input:checked + .method-card-inner {
  border-color: var(--primary);
  background: var(--surface-container);
}

.method-card-inner:hover {
  background: var(--surface-container);
}

.method-card-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-surface);
}

.method-card-desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .method-grid { grid-template-columns: 1fr; }
  .ob-card--wide { max-width: 100%; }
}

/* ── Onboarding responsive: tablet ── */
@media (max-width: 768px) {
  .ob-shell { padding: 1rem 1rem 2rem; gap: 1.5rem; }
  .ob-card { padding: 2rem 1.75rem; max-width: 100%; border-radius: 1.25rem; }
  .ob-card--wide { max-width: 100%; }
  .ob-title { font-size: 2.2rem; }
  .ob-steps { gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
  .ob-step { font-size: 0.58rem; }
  .ob-step-sep { font-size: 0.65rem; }
  .ob-quiz-cta-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ob-quiz-cta-inner .btn--outline { align-self: stretch; text-align: center; }
  .ob-pref-card-body { flex-direction: column; gap: 1rem; }
}

/* ── Onboarding responsive: mobile ── */
@media (max-width: 480px) {
  .ob-shell { padding: 1.25rem 0.75rem; gap: 1rem; }
  .ob-card { padding: 1.5rem 1.25rem; border-radius: 1rem; }
  .ob-brand { gap: 0.2rem; }
  .ob-logo { font-size: 1.6rem; }
  .ob-logo-sub { font-size: 0.5rem; }
  .ob-title { font-size: 1.75rem; }
  .ob-title em { display: inline; }
  .ob-desc { font-size: 0.88rem; }
  .ob-steps { gap: 0.25rem; margin-bottom: 1.25rem; }
  .ob-step { font-size: 0.52rem; letter-spacing: 0.06em; }
  .ob-step-sep { font-size: 0.55rem; margin: 0 0.1rem; }
  .ob-form { margin-top: 1.25rem; }
  .ob-letter { font-size: 0.88rem; line-height: 1.65; }
  .ob-letter-signature { font-size: 2rem; }
  .ob-letter-contact { font-size: 0.75rem; }
  .ob-quote { max-width: 100%; }
  .ob-quote span { font-size: 0.8rem; }
  .form-row { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }
  .form-actions .btn,
  .form-actions .btn-ghost { width: 100%; text-align: center; }
  .btn { padding: 0.75rem 1.25rem; font-size: 0.85rem; }
  .btn-ghost { padding: 0.6rem 1rem; font-size: 0.82rem; }
  .experience-card-inner { padding: 0.9rem; }
  .experience-card-name { font-size: 0.82rem; }
  .experience-card-desc { font-size: 0.72rem; }
  .method-card-inner { padding: 0.85rem; }
  .method-guide-card-inner { padding: 1rem 1.15rem; }
  .method-guide-card-name { font-size: 0.95rem; }
  .method-guide-card-body { font-size: 0.85rem; }
  .quiz-question-title { font-size: 1.25rem; }
  .quiz-option-inner { padding: 0.75rem 1rem; }
  .quiz-option-text { font-size: 0.82rem; }
  .ob-quiz-cta { padding: 1rem 1.15rem; }
  .ob-quiz-cta-text { font-size: 0.82rem; }
  .ob-quiz-cta-text strong { font-size: 0.9rem; }
  .ob-quiz-result-body { font-size: 0.85rem; }
  .ob-quiz-result-tagline { font-size: 0.95rem; }
  .ob-quiz-result-good-for { font-size: 0.8rem; padding: 0.85rem 1rem; }
  .ob-pref-card-body { flex-direction: column; gap: 1rem; padding: 1.15rem; }
  .ob-pref-card-title { font-size: 0.85rem; }
  .ob-pref-card-desc { font-size: 0.72rem; }
  .color-picker { gap: 0.4rem; }
  .color-preset-btn { width: 2rem; height: 2rem; }
  .ob-method-loader-name { font-size: 1.6rem; }
  .ob-method-loader-message { font-size: 0.75rem; }
  .ob-child-item { padding: 0.6rem 0.75rem; }
}

/* ─── METHOD GUIDE (new-to-homeschooling expanded view) ─── */
.method-guide-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.method-guide-card { cursor: pointer; }
.method-guide-card input { display: none; }

.method-guide-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.4rem 1.5rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all 0.15s ease;
}

.method-guide-card input:checked + .method-guide-card-inner {
  border-color: var(--primary);
  background: var(--surface-container);
}

.method-guide-card-inner:hover {
  background: var(--surface-container);
}

.method-guide-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.method-guide-card-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--on-surface);
}

.method-guide-card-tagline {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.method-guide-card-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.97rem;
  color: var(--on-surface-mid);
  line-height: 1.7;
}

.method-guide-card-good-for {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  line-height: 1.55;
  border-top: 1px solid var(--surface-container-high);
  padding-top: 0.65rem;
}

.method-guide-card-good-for-label {
  font-weight: 700;
  color: var(--on-surface-mid);
  margin-right: 0.25rem;
}

/* ─── TEACHING STYLE QUIZ ─── */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quiz-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-container-high);
  border-radius: 3px;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.quiz-progress-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--on-surface-subtle);
  white-space: nowrap;
}

.quiz-question {
  animation: quizFadeIn 0.3s ease;
}

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-question-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--on-surface);
  margin-bottom: 0.4rem;
}

.quiz-question-desc {
  font-size: 0.85rem;
  color: var(--on-surface-subtle);
  margin-bottom: 1.25rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quiz-option {
  cursor: pointer;
}

.quiz-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz-option-inner {
  display: block;
  padding: 0.9rem 1.2rem;
  background: var(--surface-container-low);
  border-radius: 1rem;
  transition: background 0.15s, box-shadow 0.15s;
}

.quiz-option:hover .quiz-option-inner {
  background: var(--surface-container);
}

.quiz-option input:checked + .quiz-option-inner {
  background: var(--primary);
  box-shadow: 0 2px 12px rgba(64, 92, 101, 0.18);
}

.quiz-option input:checked + .quiz-option-inner .quiz-option-text {
  color: #fff;
}

.quiz-option-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.4;
}

/* ─── METHOD LOADER OVERLAY ─── */
.ob-method-loader {
  position: fixed;
  inset: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  overflow: hidden;
  visibility: hidden;
}

.ob-method-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.ob-method-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transform: translateY(10px);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ob-method-loader.is-visible .ob-method-loader-content {
  transform: translateY(0);
}

.ob-method-loader-logo {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.ob-method-loader-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ob-method-loader-ring-track {
  stroke: var(--surface-container-low);
  stroke-width: 1.5;
}

.ob-method-loader-ring-fill {
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  animation: ob-ring-fill 1.5s cubic-bezier(0.4, 0, 0.2, 1) 250ms forwards;
}

@keyframes ob-ring-fill {
  to { stroke-dashoffset: 0; }
}

.ob-method-loader-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.ob-method-loader-wordmark svg {
  max-width: 100%;
  max-height: 5.5rem;
  width: auto;
  height: auto;
  display: block;
}

.ob-method-loader-intro {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
}

.ob-method-loader-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ob-method-loader-message {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--on-surface-mid);
  max-width: 240px;
  text-align: center;
  line-height: 1.6;
  margin-top: 0.1rem;
}

.ob-method-loader-dots {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.25rem;
}

.ob-method-loader-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.25;
  animation: ob-dot-pulse 1.4s ease-in-out infinite;
}

.ob-method-loader-dots span:nth-child(2) { animation-delay: 0.22s; }
.ob-method-loader-dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes ob-dot-pulse {
  0%, 80%, 100% { transform: scale(0.65); opacity: 0.25; }
  40%            { transform: scale(1);    opacity: 0.9; }
}

/* ─── SHARE PREVIEW (public) ─── */
.share-preview {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.share-preview-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
}

.share-preview-glow--warm {
  background: radial-gradient(circle, rgba(168, 92, 58, 0.5), transparent 70%);
  top: -10%;
  left: -8%;
  animation: shareGlow 10s ease-in-out infinite alternate;
}

.share-preview-glow--cool {
  background: radial-gradient(circle, rgba(64, 92, 101, 0.45), transparent 70%);
  bottom: -15%;
  right: -8%;
  animation: shareGlow 10s ease-in-out infinite alternate-reverse;
}

@keyframes shareGlow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(20px, -15px) scale(1.1); opacity: 0.45; }
}

.share-preview-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1.5rem;
  position: relative;
  z-index: 1;
}

.share-preview-logo {
  text-decoration: none;
}

.share-preview-card {
  background: var(--surface-lowest);
  border-radius: 1.75rem;
  padding: 3rem 3.5rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 48px rgba(28, 28, 26, 0.08);
  text-align: center;
}

.share-preview-badge {
  display: inline-block;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--surface-container-low);
  padding: 0.35rem 0.9rem;
  border-radius: 2rem;
  margin-bottom: 1.5rem;
}

.share-preview-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin-bottom: 1rem;
}

.share-preview-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.share-preview-desc {
  font-size: 1rem;
  color: var(--on-surface-mid);
  margin-bottom: 2rem;
}

.share-preview-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
}

.share-preview-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.share-preview-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.share-preview-subjects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.share-preview-tag {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  background: var(--surface-container-low);
  color: var(--secondary);
}

.share-preview-lesson {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}

.share-preview-lesson-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.share-preview-lesson-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  display: flex;
  gap: 0.4rem;
}

.share-preview-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.share-preview-btn-primary {
  padding: 0.75rem 2rem;
  font-size: 0.9rem;
}

.share-preview-fine {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}

/* ─── SHARE LINK DISPLAY ─── */
.share-link-display {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}

.share-link-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.share-link-row {
  display: flex;
  gap: 0.5rem;
}

.share-link-input {
  flex: 1;
  font-size: 0.8rem;
  background: var(--surface-lowest);
}

.share-copy-btn {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.5rem 1.25rem;
}

/* ─── SHARE OWNER BADGE ─── */
.share-owner-badge {
  display: inline-block;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--surface-container-low);
  padding: 0.25rem 0.65rem;
  border-radius: 2rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ─── SHARE IMPORT MODAL ─── */
.share-modal {
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: 0 24px 80px rgba(28, 28, 26, 0.15);
  max-width: 480px;
  width: 90vw;
}

.share-modal::backdrop {
  background: rgba(28, 28, 26, 0.4);
  backdrop-filter: blur(4px);
}

.share-modal-content {
  padding: 2.5rem;
}

.share-modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.share-modal-desc {
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  margin-bottom: 1.5rem;
}

.share-child-mapping {
  margin-top: 1.25rem;
}

.share-map-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.share-map-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 120px;
}

.share-map-arrow {
  color: var(--on-surface-subtle);
  font-size: 1rem;
}

.share-map-select {
  flex: 1;
  font-size: 0.85rem;
}

.share-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (max-width: 600px) {
  .share-preview-card { padding: 2rem 1.5rem; }
  .share-preview-title { font-size: 2rem; }
  .share-preview-stats { gap: 1.5rem; }
  .share-map-row { flex-wrap: wrap; }
  .share-map-source { min-width: auto; }
}

/* ─── CURRICULUM LISTS (management) ─── */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.cl-card { border-radius: var(--radius-xl); }

.cl-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cl-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.cl-badge {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 2rem;
  flex-shrink: 0;
}

.cl-badge--published {
  background: rgba(61, 90, 71, 0.12);
  color: var(--secondary);
}

.cl-badge--draft {
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
}

.cl-card-desc {
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.cl-card-meta {
  display: flex;
  gap: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--on-surface-subtle);
}

.cl-items-section {
  margin-top: 2rem;
  border-top: 1px solid var(--surface-container-high);
  padding-top: 1.5rem;
}

.cl-item-row {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.cl-remove-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cl-remove-check {
  width: auto;
}

/* ─── REFERRALS ─── */
.ref-hero {
  margin-bottom: 2rem;
}

.ref-hero-inner {
  background: linear-gradient(145deg, var(--surface-container-low), var(--surface-container));
  border-radius: 1.75rem;
  padding: 3rem;
  text-align: center;
}

.ref-hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ref-hero-desc {
  font-size: 0.9rem;
  color: var(--on-surface-mid);
}

.ref-code-display {
  margin-top: 1rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
}

.ref-code-display strong {
  font-size: 1rem;
  color: var(--primary);
  letter-spacing: 0.06em;
}

.ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.ref-stat-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(28, 28, 26, 0.03);
}

.ref-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.ref-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.ref-how-it-works {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(28, 28, 26, 0.03);
}

.ref-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.ref-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ref-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ref-step-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  color: var(--primary);
  opacity: 0.35;
  min-width: 24px;
  line-height: 1.2;
}

.ref-step-text strong {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
}

.ref-step-text p {
  font-size: 0.85rem;
  color: var(--on-surface-mid);
  margin-top: 0.2rem;
}

.ref-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}

.ref-item:last-child { border-bottom: none; }

.ref-item-email {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  flex: 1;
}

.ref-item-date {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.referral-banner {
  background: linear-gradient(135deg, rgba(61, 90, 71, 0.08), rgba(64, 92, 101, 0.08));
  border: 1px solid rgba(61, 90, 71, 0.15);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  color: var(--secondary);
  text-align: center;
  line-height: 1.5;
}

.referral-banner-icon {
  margin-right: 0.4rem;
}

@media (max-width: 600px) {
  .ref-stats-grid { grid-template-columns: 1fr; }
}

/* ─── CO-OP HUB ─── */

/* Hero */
.coop-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.coop-hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.coop-hero-desc {
  font-size: 0.9rem;
  color: var(--on-surface-mid);
  max-width: 36rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.coop-hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.coop-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
}

.coop-copy-btn {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.coop-hero-members {
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.coop-hero-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Co-op hero with header image */
.coop-hero--with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  position: relative;
  border: none;
}

.coop-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 100%);
  border-radius: inherit;
}

.coop-hero--with-image .coop-hero-content {
  position: relative;
  z-index: 1;
}

.coop-hero--with-image .coop-hero-title,
.coop-hero--with-image .coop-hero-tagline,
.coop-hero--with-image .coop-hero-desc {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.coop-hero--with-image .coop-hero-members {
  color: rgba(255,255,255,0.8);
}

.coop-hero--with-image .coop-hero-badge {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.coop-hero--with-image .coop-copy-btn {
  color: rgba(255,255,255,0.9);
}

.coop-hero--with-image .btn-ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}

.coop-hero--with-image .btn-ghost:hover {
  background: rgba(255,255,255,0.15);
}

.coop-hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.coop-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.coop-hero-tagline {
  color: var(--on-surface-mid);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0.15rem 0 0.6rem;
}

/* Grid Layout */
.coop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .coop-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.coop-grid-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.coop-grid-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Board Card */
.coop-board-card {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  overflow: hidden;
}

.coop-board-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--on-surface);
}

.coop-board-body {
  padding: 0 1.5rem 1.5rem;
}

/* Post Form */
.coop-post-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.coop-post-input {
  resize: vertical;
  min-height: 4rem;
}

/* Posts List */
.coop-posts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.coop-post {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}

.coop-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.coop-post-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.coop-post-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--on-surface);
}

.coop-post-date {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
}

.coop-post-del {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.coop-post:hover .coop-post-del {
  opacity: 1;
}

.coop-post-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.coop-post-body {
  font-size: 0.88rem;
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.coop-post-body p {
  margin-bottom: 0.5rem;
}

.coop-post-body p:last-child {
  margin-bottom: 0;
}

.coop-empty-posts {
  color: var(--on-surface-subtle);
  font-size: 0.85rem;
  text-align: center;
  padding: 2rem 0;
}

/* Side Cards */
.coop-side-card {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  padding: 1.25rem;
}

.coop-side-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.coop-side-card-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--on-surface);
}

/* Events */
.coop-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coop-event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
}

.coop-event-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.4rem;
  background: var(--secondary-container);
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.coop-event-month {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--secondary);
  text-transform: uppercase;
}

.coop-event-day {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--secondary);
  line-height: 1;
}

.coop-event-info {
  flex: 1;
  min-width: 0;
}

.coop-event-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--on-surface);
  line-height: 1.3;
}

.coop-event-meta {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
}

/* Resources */
.coop-resources-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coop-resource-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.coop-resource-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coop-resource-info {
  flex: 1;
  min-width: 0;
}

.coop-resource-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--on-surface);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.coop-resource-name:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.coop-resource-meta {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

/* Delete button for items */
.coop-item-delete {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 9999px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  display: flex;
  align-items: center;
}

.coop-event-item:hover .coop-item-delete,
.coop-resource-item:hover .coop-item-delete {
  opacity: 1;
}

.coop-item-delete:hover {
  background: var(--surface-container);
  color: var(--error);
}

/* Empty text */
.coop-empty-text {
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
  text-align: center;
  padding: 1rem 0;
}

/* Add Form (collapsible) */
.coop-add-form-details {
  margin-top: 1rem;
}

.coop-add-form-details summary {
  list-style: none;
}

.coop-add-form-details summary::-webkit-details-marker {
  display: none;
}

.coop-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem;
  border: 2px dashed var(--outline-variant);
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  background: none;
}

.coop-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.coop-inline-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
}

/* ─── EVENT DETAIL PAGE ─── */
.event-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 768px) {
  .event-detail {
    grid-template-columns: 1fr;
  }
}

.event-detail-main { min-width: 0; }
.event-detail-sidebar { min-width: 0; }

.event-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.event-detail-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.6rem;
  background: var(--secondary-container);
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.event-detail-date-box .coop-event-month { font-size: 0.65rem; }
.event-detail-date-box .coop-event-day { font-size: 1.5rem; }

.event-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.event-type-badge--field_trip {
  background: #e8f5e9;
  color: #2e7d32;
}

.event-type-badge--class_session {
  background: #e3f2fd;
  color: #1565c0;
}

.event-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
}

.event-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--on-surface);
}

.event-detail-meta-item .material-symbols-outlined {
  font-size: 20px;
  color: var(--on-surface-subtle);
}

.event-detail-desc {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--on-surface-mid);
  line-height: 1.6;
}

/* RSVP Buttons */
.event-rsvp-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.event-rsvp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--outline-variant);
  border-radius: 0.75rem;
  background: var(--surface-lowest);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.event-rsvp-btn .material-symbols-outlined { font-size: 18px; }

.event-rsvp-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.event-rsvp-btn--active.event-rsvp-btn--going {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #2e7d32;
}

.event-rsvp-btn--active.event-rsvp-btn--maybe {
  border-color: #f9a825;
  background: #fff8e1;
  color: #f57f17;
}

.event-rsvp-btn--active.event-rsvp-btn--declined {
  border-color: var(--error);
  background: var(--rose-pale);
  color: var(--error);
}

/* Attendee List */
.event-attendee-group { margin-bottom: 0.75rem; }
.event-attendee-group:last-child { margin-bottom: 0; }

.event-attendee-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.event-attendee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  color: var(--on-surface);
}

.event-attendee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-attendee-dot--going { background: #2e7d32; }
.event-attendee-dot--maybe { background: #f9a825; }
.event-attendee-dot--declined { background: var(--error); }

/* ─── LOCATION AUTOCOMPLETE ─── */
.loc-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin-top: 0.25rem;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.loc-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
}

.loc-suggestion:hover,
.loc-suggestion--active {
  background: var(--surface-container-low);
}

.loc-suggestion + .loc-suggestion {
  border-top: 1px solid var(--outline-variant);
}

.loc-suggestion-icon {
  font-size: 20px;
  color: var(--primary);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.loc-suggestion-text {
  flex: 1;
  min-width: 0;
}

.loc-suggestion-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
}

.loc-suggestion-detail {
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── EVENT CALENDAR ─── */
.event-cal { max-width: 900px; }

.event-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.event-cal-month {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  min-width: 200px;
  text-align: center;
  margin: 0;
}

.event-cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: background 0.15s;
}

.event-cal-nav-btn:hover {
  background: var(--surface-container);
}

.event-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--outline-variant);
  border-radius: 0.75rem;
  overflow: hidden;
}

.event-cal-header {
  padding: 0.5rem;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}

.event-cal-day {
  min-height: 5.5rem;
  padding: 0.35rem;
  border-right: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.event-cal-day:nth-child(7n+7) { border-right: none; }

.event-cal-day--other {
  background: var(--surface-container-low);
}

.event-cal-day--other .event-cal-day-num {
  color: var(--on-surface-subtle);
  opacity: 0.5;
}

.event-cal-day--today .event-cal-day-num {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-cal-day-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  margin-bottom: 0.15rem;
}

.event-cal-event {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
  text-decoration: none;
  font-size: 0.6rem;
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.1s;
}

.event-cal-event:hover { background: var(--surface-container); }

.event-cal-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-cal-event--field_trip .event-cal-event-dot { background: #2e7d32; }
.event-cal-event--class_session .event-cal-event-dot { background: #1565c0; }

.event-cal-event-title {
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-cal-more {
  font-size: 0.6rem;
  color: var(--on-surface-subtle);
  padding: 0 0.25rem;
}

.event-cal-upcoming {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline-variant);
}

@media (max-width: 600px) {
  .event-cal-day { min-height: 3.5rem; }
  .event-cal-event-title { display: none; }
  .event-cal-event-dot { width: 6px; height: 6px; }
}

/* Members */
.coop-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  gap: 0.5rem;
}

.coop-member-row + .coop-member-row {
  border-top: 1px solid var(--surface-container-low);
}

.coop-member-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.coop-member-email {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coop-member-badge {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: var(--primary-container);
  color: var(--primary);
}

.coop-remove-btn {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}

/* Chat Card in co-op */
.coop-chat-card {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  overflow: hidden;
}
.coop-chat-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.chat-messages-list {
  flex: 1;
  overflow-y: auto;
  max-height: 420px;
  min-height: 120px;
  padding: 1.25rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chat-message {
  display: flex;
}
.chat-message--mine {
  justify-content: flex-end;
}
.chat-message--theirs {
  justify-content: flex-start;
}
.chat-bubble {
  max-width: 70%;
  padding: 0.55rem 0.85rem;
  border-radius: 1.1rem;
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: 0.9rem;
  line-height: 1.45;
}
.chat-message--mine .chat-bubble {
  background: var(--primary);
  color: var(--on-primary);
  border-bottom-right-radius: 0.25rem;
}
.chat-message--theirs .chat-bubble {
  border-bottom-left-radius: 0.25rem;
}
.chat-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.chat-message--mine .chat-meta {
  justify-content: flex-end;
}
.chat-author {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
}
.chat-time {
  font-size: 0.7rem;
  opacity: 0.6;
}
.chat-body {
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-empty {
  color: var(--nc-text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 2rem 0;
}
.chat-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--nc-border);
  background: var(--surface-container-low);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.chat-input {
  flex: 1;
  resize: none;
  min-height: 2.4rem;
  max-height: 8rem;
  overflow-y: auto;
}
.chat-send-btn {
  flex-shrink: 0;
  align-self: flex-end;
}
.chat-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: inherit;
  opacity: 0.5;
  padding: 0 0.15rem;
  line-height: 1;
}
.chat-del-btn:hover { opacity: 1; }

/* ── Chat attachments (rendered in message bubble) ── */
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.chat-attachment-img-link {
  display: block;
  max-width: 220px;
}
.chat-attachment-img {
  width: 100%;
  max-width: 220px;
  max-height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
  display: block;
}
.chat-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0,0,0,.06);
  border-radius: 0.5rem;
  padding: 0.35rem 0.65rem;
  text-decoration: none;
  color: inherit;
  font-size: 0.82rem;
  max-width: 220px;
  overflow: hidden;
}
.chat-message--mine .chat-attachment-file {
  background: rgba(255,255,255,.18);
}
.chat-attachment-file:hover { text-decoration: underline; }
.chat-file-icon { flex-shrink: 0; }
.chat-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-file-size {
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.65;
}

/* ── File attach button in chat input bar ── */
.chat-attach-btn {
  flex-shrink: 0;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.35rem;
  border-radius: 0.4rem;
  opacity: 0.65;
  transition: opacity 0.15s;
  user-select: none;
  align-self: flex-end;
}
.chat-attach-btn:hover { opacity: 1; }

/* ── File preview strip (above input row) ── */
.chat-file-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 0.5rem;
}
.chat-file-preview-strip:empty { display: none; }
.chat-preview-item {
  position: relative;
  border-radius: 0.5rem;
  overflow: visible;
}
.chat-preview-thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--nc-border);
}
.chat-preview-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-container);
  border: 1px solid var(--nc-border);
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  max-width: 160px;
  font-size: 0.8rem;
}
.chat-preview-icon { flex-shrink: 0; }
.chat-preview-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}
.chat-preview-size { font-size: 0.72rem; opacity: 0.6; flex-shrink: 0; }
.chat-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error, #c0392b);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chat-form-error {
  color: var(--error, #c0392b);
  font-size: 0.85rem;
  padding: 0.3rem 1.25rem 0;
}

/* ─── FULL-PAGE CHAT (Campfire) ─── */
.fullchat {
  display: flex;
  height: calc(100vh - 4rem);
  gap: 0;
  position: relative;
}

.fullchat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-lowest);
  border-radius: 1rem 0 0 1rem;
}

.fullchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.fullchat-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fullchat-back {
  display: flex;
  align-items: center;
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color 0.15s;
}
.fullchat-back:hover { color: var(--on-surface); }

.fullchat-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.fullchat-online-count {
  font-size: 0.75rem;
  color: var(--secondary);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background: var(--secondary-container);
  border-radius: 9999px;
}

.fullchat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.fullchat-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fullchat-composer {
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--surface-container-low);
}

/* ── Typing Indicator ── */
.fullchat-typing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.5rem;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--on-surface-subtle);
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Sidebar ── */
.fullchat-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--surface-container-low);
  border-radius: 0 1rem 1rem 0;
  overflow-y: auto;
  padding: 1rem 0;
}

.fullchat-sidebar-section {
  padding: 0.5rem 1rem;
}

.fullchat-sidebar-section + .fullchat-sidebar-section {
  border-top: 1px solid var(--surface-container-low);
  margin-top: 0.5rem;
  padding-top: 1rem;
}

.fullchat-sidebar-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

.fullchat-members {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fullchat-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fullchat-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.fullchat-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.fullchat-online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--surface);
}

.fullchat-online-dot--offline {
  background: var(--on-surface-subtle);
  opacity: 0.3;
}

.fullchat-member-info {
  flex: 1;
  min-width: 0;
}

.fullchat-member-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  display: block;
}

.fullchat-member-role {
  font-size: 0.65rem;
  color: var(--secondary);
  font-weight: 600;
}

.fullchat-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  padding: 0.25rem 0;
}

.fullchat-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Message with avatar (Campfire style) ── */
.fullchat .chat-message {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  position: relative;
}

.fullchat .chat-message:hover {
  background: var(--surface-container-low);
  border-radius: 0.5rem;
  margin: 0 -0.5rem;
  padding: 0.5rem;
}

.chat-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.chat-message-content {
  flex: 1;
  min-width: 0;
}

.fullchat .chat-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.fullchat .chat-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--on-surface);
}

.fullchat .chat-time {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

.fullchat .chat-body {
  font-size: 0.88rem;
  color: var(--on-surface);
  line-height: 1.5;
  word-break: break-word;
}

.chat-reply-context {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  margin-bottom: 0.25rem;
  padding: 0.15rem 0.5rem;
  background: var(--surface-container-low);
  border-radius: 0.25rem;
  border-left: 3px solid var(--primary-container);
}

/* ── Message Actions (hover) ── */
.chat-message-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.15rem;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container-low);
  border-radius: 0.4rem;
  padding: 0.15rem;
  box-shadow: 0 2px 8px rgba(60, 44, 0, 0.08);
  opacity: 0;
  transition: opacity 0.15s;
}

.chat-message:hover .chat-message-actions {
  opacity: 1;
}

.chat-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--on-surface-subtle);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.chat-action-btn .material-symbols-outlined {
  font-size: 18px;
}

.chat-action-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.chat-action-btn--danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Reactions ── */
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  align-items: center;
}

.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--surface-container);
  border-radius: 9999px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.12s, border-color 0.12s;
}

.chat-reaction-pill:hover {
  background: var(--surface-container-low);
  border-color: var(--primary-container);
}

.chat-reaction-pill--active {
  background: var(--primary-container);
  border-color: var(--primary);
}

.chat-reaction-emoji {
  font-size: 0.9rem;
  line-height: 1;
}

.chat-reaction-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--on-surface-mid);
}

.chat-reaction-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px dashed var(--surface-container);
  border-radius: 9999px;
  background: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}

.chat-reaction-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Thread Link ── */
.chat-thread-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0;
  transition: opacity 0.15s;
}

.chat-thread-link:hover {
  opacity: 0.7;
}

/* ── Thread Panel ── */
.fullchat-thread {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface-lowest);
  border-left: 1px solid var(--surface-container-low);
  display: flex;
  flex-direction: column;
}

.fullchat-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.fullchat-thread-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.fullchat-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.fullchat-thread-composer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--surface-container-low);
}

.fullchat-thread-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Emoji Picker ── */
.emoji-picker {
  position: fixed;
  z-index: 1000;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(60, 44, 0, 0.12);
  padding: 0.5rem;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.15rem;
}

.emoji-picker-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.12s;
}

.emoji-picker-btn:hover {
  background: var(--surface-container-low);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .fullchat {
    flex-direction: column;
    height: calc(100vh - 2rem);
  }
  .fullchat-sidebar {
    display: none;
  }
  .fullchat-thread {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    border-radius: 0;
  }
  .fullchat-main {
    border-radius: 1rem;
  }
}

/* ─── DIRECT MESSAGES ─── */
.dm-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .dm-layout { grid-template-columns: 1fr; }
}

/* Conversations List */
.dm-conversations-list {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  overflow: hidden;
}

.dm-conversation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--surface-container-low);
  transition: background 0.12s;
}

.dm-conversation-item:last-child { border-bottom: none; }

.dm-conversation-item:hover {
  background: var(--surface-container-low);
}

.dm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dm-conversation-info {
  flex: 1;
  min-width: 0;
}

.dm-conversation-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--on-surface);
}

.dm-conversation-preview {
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.dm-conversation-time {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
  white-space: nowrap;
}

.dm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
  color: var(--on-surface-mid);
  font-size: 0.9rem;
}

/* Contacts Sidebar */
.dm-contacts {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  padding: 1.25rem;
}

.dm-contacts-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.75rem;
}

.dm-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.dm-contact-item + .dm-contact-item {
  border-top: 1px solid var(--surface-container-low);
}

.dm-contact-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-contact-btn {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  flex-shrink: 0;
}

/* DM Chat View */
.dm-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4rem);
  background: var(--surface-lowest);
  border-radius: 1rem;
  overflow: hidden;
}

.dm-chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.dm-chat-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.dm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.dm-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dm-empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  color: var(--on-surface-mid);
  font-size: 0.9rem;
  text-align: center;
}

.dm-chat-composer {
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--surface-container-low);
}

/* DM Message Bubble */
.dm-message {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.dm-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.dm-message-content {
  flex: 1;
  min-width: 0;
}

.dm-message-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.dm-message-author {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--on-surface);
}

.dm-message-time {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

.dm-message-body {
  font-size: 0.88rem;
  color: var(--on-surface);
  line-height: 1.5;
  word-break: break-word;
}

.dm-message-body p {
  margin: 0 0 0.35rem;
}

.dm-message-body p:last-child {
  margin-bottom: 0;
}

/* DM Form */
.dm-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dm-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.dm-input {
  flex: 1;
  min-height: 2.4rem;
  max-height: 8rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--surface-container);
  border-radius: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  resize: none;
  overflow-y: auto;
  outline: none;
  background: var(--surface);
  color: var(--on-surface);
  transition: border-color 0.15s;
}

.dm-input:focus {
  border-color: var(--primary);
}

.dm-send-btn {
  flex-shrink: 0;
  border-radius: 0.75rem;
  padding: 0.5rem 1rem;
}

/* ─── FRIENDS ─── */
.friends-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 640px;
}

.friends-card {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  overflow: hidden;
}

.friends-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.friends-card-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.friends-card-body {
  padding: 1.25rem;
}

.friends-code-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-container-low);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}

.friends-code {
  font-family: 'Plus Jakarta Sans', monospace;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.15em;
}

.friends-copy-btn {
  margin-left: auto;
  font-size: 0.78rem;
}

.friends-code-hint {
  font-size: 0.8rem;
  color: var(--on-surface-subtle);
}

.friends-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.friends-add-row {
  display: flex;
  gap: 0.5rem;
}

.friends-add-row .form-input {
  flex: 1;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.friends-list {
  display: flex;
  flex-direction: column;
}

.friends-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.friends-item:last-child { border-bottom: none; }

.friends-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.friends-item-info {
  flex: 1;
  min-width: 0;
}

.friends-item-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--on-surface);
  display: block;
}

.friends-item-meta {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
}

.friends-item-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

.friends-accept-btn {
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
}

.friends-msg-btn,
.friends-remove-btn {
  padding: 0.3rem;
  border-radius: 0.35rem;
}

.friends-remove-btn:hover {
  color: var(--error);
}

.friends-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
}

/* ─── CAMPFIRE CHAT ROOMS ─── */

/* Full-page layout */
.chatroom {
  display: flex;
  height: calc(100vh - 4rem);
  gap: 0;
  position: relative;
  background: var(--surface-lowest);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
}

.chatroom-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Header */
.chatroom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--surface-container-low);
  flex-shrink: 0;
}

.chatroom-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.chatroom-back {
  display: flex;
  align-items: center;
  color: var(--on-surface-subtle);
  text-decoration: none;
  padding: 0.25rem;
  border-radius: 0.35rem;
  transition: color 0.15s, background 0.15s;
}

.chatroom-back:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.chatroom-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chatroom-header-icon {
  color: var(--primary);
  font-size: 22px;
}

.chatroom-header-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.chatroom-online-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--secondary);
  padding: 0.15rem 0.5rem;
  background: var(--secondary-container);
  border-radius: 9999px;
  flex-shrink: 0;
}

.chatroom-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chatroom-involvement-select {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--surface-container);
  border-radius: 0.4rem;
  background: var(--surface);
  color: var(--on-surface-mid);
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Messages area */
.chatroom-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.chatroom-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chatroom-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  color: var(--on-surface-subtle);
  font-size: 0.9rem;
  gap: 0.5rem;
}

/* Individual message */
.chatroom-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  position: relative;
  border-radius: 0.5rem;
  transition: background 0.1s;
}

.chatroom-msg:hover {
  background: var(--surface-container-low);
}

.chatroom-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.chatroom-msg-content {
  flex: 1;
  min-width: 0;
}

.chatroom-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.1rem;
}

.chatroom-msg-author {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--on-surface);
}

.chatroom-msg-time {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
}

.chatroom-msg-body {
  font-size: 0.88rem;
  color: var(--on-surface);
  line-height: 1.55;
  word-break: break-word;
}

.chatroom-msg-body p {
  margin: 0 0 0.3rem;
}

.chatroom-msg-body p:last-child {
  margin-bottom: 0;
}

/* Attachments */
.chatroom-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.chatroom-msg-img {
  max-width: 240px;
  max-height: 200px;
  border-radius: 0.5rem;
  object-fit: cover;
}

.chatroom-msg-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--on-surface);
  font-size: 0.8rem;
  transition: background 0.12s;
}

.chatroom-msg-file:hover {
  background: var(--surface-container);
}

.chatroom-msg-filename {
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-msg-filesize {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

/* Message hover actions */
.chatroom-msg-actions {
  position: absolute;
  top: -0.25rem;
  right: 0.25rem;
  display: flex;
  gap: 0.1rem;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container-low);
  border-radius: 0.4rem;
  padding: 0.1rem;
  box-shadow: 0 2px 8px rgba(60, 44, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}

.chatroom-msg:hover .chatroom-msg-actions {
  opacity: 1;
  pointer-events: auto;
}

.chatroom-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--on-surface-subtle);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.chatroom-action-btn .material-symbols-outlined {
  font-size: 18px;
}

.chatroom-action-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.chatroom-action-btn--danger:hover {
  background: #fde8e8;
  color: #c53030;
}

/* Boosts / Reactions */
.chatroom-boosts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
  align-items: center;
  min-height: 0;
}

.chatroom-boost-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--surface-container);
  border-radius: 9999px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 0.1s, border-color 0.1s;
}

.chatroom-boost-pill:hover {
  background: var(--surface-container-low);
  border-color: var(--primary-container);
}

.chatroom-boost-emoji {
  font-size: 0.85rem;
  line-height: 1;
}

.chatroom-boost-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-surface-mid);
}

/* Typing indicator */
.chatroom-typing {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 1.5rem;
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  font-weight: 500;
  flex-shrink: 0;
}

.chatroom-typing[hidden] {
  display: none;
}

.chatroom-typing-dots {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.chatroom-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--on-surface-subtle);
  animation: chatroom-bounce 1.4s infinite ease-in-out both;
}

.chatroom-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.chatroom-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes chatroom-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Composer */
.chatroom-composer-wrap {
  padding: 0.6rem 1.5rem 1rem;
  border-top: 1px solid var(--surface-container-low);
  flex-shrink: 0;
}

.chatroom-composer {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chatroom-composer-row {
  display: flex;
  gap: 0.4rem;
  align-items: flex-end;
}

.chatroom-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.chatroom-attach-btn:hover {
  color: var(--primary);
  background: var(--surface-container-low);
}

.chatroom-attach-btn .material-symbols-outlined {
  font-size: 20px;
}

.chatroom-input {
  flex: 1;
  min-height: 2.2rem;
  max-height: 8rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--surface-container);
  border-radius: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  resize: none;
  overflow-y: auto;
  outline: none;
  background: var(--surface);
  color: var(--on-surface);
  transition: border-color 0.15s;
  line-height: 1.5;
}

.chatroom-input:focus {
  border-color: var(--primary);
}

.chatroom-send-btn {
  flex-shrink: 0;
  border-radius: 0.75rem;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
}

.chatroom-composer-error {
  font-size: 0.78rem;
  color: var(--error);
  padding: 0.25rem 0 0.5rem;
}

.chatroom-composer-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

.chatroom-preview-item {
  position: relative;
}

.chatroom-preview-thumb {
  width: 56px;
  height: 56px;
  border-radius: 0.4rem;
  object-fit: cover;
  border: 1px solid var(--surface-container);
}

.chatroom-preview-badge {
  padding: 0.3rem 0.5rem;
  background: var(--surface-container-low);
  border-radius: 0.4rem;
  font-size: 0.72rem;
  color: var(--on-surface-mid);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error);
  color: white;
  border: none;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Sidebar */
.chatroom-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--surface-container-low);
  overflow-y: auto;
  padding: 0.75rem 0;
}

.chatroom-sidebar-section {
  padding: 0.5rem 1rem;
}

.chatroom-sidebar-section + .chatroom-sidebar-section {
  border-top: 1px solid var(--surface-container-low);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.chatroom-sidebar-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.6rem;
}

.chatroom-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chatroom-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chatroom-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chatroom-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
}

.chatroom-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.chatroom-dot--online {
  background: #22c55e;
}

.chatroom-dot--offline {
  background: var(--on-surface-subtle);
  opacity: 0.25;
}

.chatroom-member-info {
  flex: 1;
  min-width: 0;
}

.chatroom-member-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatroom-member-role {
  font-size: 0.62rem;
  color: var(--secondary);
  font-weight: 600;
}

.chatroom-info-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--on-surface-mid);
  padding: 0.2rem 0;
}

.chatroom-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Emoji Picker */
.chatroom-emoji-picker {
  position: fixed;
  z-index: 1000;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(60, 44, 0, 0.12);
  padding: 0.5rem;
}

.chatroom-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.1rem;
}

.chatroom-emoji-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 1.15rem;
  transition: background 0.1s;
}

.chatroom-emoji-btn:hover {
  background: var(--surface-container-low);
}

/* ── Link Previews ── */
.chat-link-preview {
  display: flex;
  gap: 0.75rem;
  background: var(--surface-container-low);
  border-radius: 0.75rem;
  border-left: 3px solid var(--primary);
  padding: 0.75rem;
  margin-top: 0.5rem;
  text-decoration: none;
  color: var(--on-surface);
  transition: background 0.15s;
  overflow: hidden;
}

.chat-link-preview:hover {
  background: var(--surface-container);
}

.chat-link-preview-image {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 0.4rem;
  overflow: hidden;
}

.chat-link-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-link-preview-body {
  min-width: 0;
  flex: 1;
}

.chat-link-preview-domain {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 0.15rem;
}

.chat-link-preview-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-link-preview-desc {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Emoji Picker (full) ── */
.emoji-picker-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1000;
  width: 320px;
  max-height: 360px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(60, 44, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.emoji-picker-search {
  padding: 0.6rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--surface-container);
  background: transparent;
  font-size: 0.82rem;
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
}

.emoji-picker-grid {
  overflow-y: auto;
  padding: 0.5rem;
  flex: 1;
}

.emoji-grid-category {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  padding: 0.5rem 0.25rem 0.25rem;
}

.emoji-grid-row {
  display: flex;
  flex-wrap: wrap;
}

.emoji-grid-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: 0.3rem;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background 0.1s;
}

.emoji-grid-btn:hover {
  background: var(--surface-container-low);
}

.emoji-grid-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--on-surface-subtle);
  font-size: 0.82rem;
}

/* ── GIF Picker ── */
.gif-picker-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1000;
  width: 340px;
  max-height: 400px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 1rem;
  box-shadow: 0 12px 36px rgba(60, 44, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.gif-picker-search {
  padding: 0.6rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--surface-container);
  background: transparent;
  font-size: 0.82rem;
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
}

.gif-picker-results {
  overflow-y: auto;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  flex: 1;
}

.gif-picker-item {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 0.4rem;
  overflow: hidden;
  transition: transform 0.1s;
}

.gif-picker-item:hover {
  transform: scale(1.03);
}

.gif-picker-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: 0.4rem;
}

.gif-picker-attribution {
  text-align: center;
  font-size: 0.6rem;
  color: var(--on-surface-subtle);
  padding: 0.35rem;
  border-top: 1px solid var(--surface-container);
}

.gif-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem;
  color: var(--on-surface-subtle);
  font-size: 0.82rem;
}

/* Rooms Index */
.chatroom-index {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  overflow: hidden;
}

.chatroom-index-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--surface-container-low);
  transition: background 0.1s;
}

.chatroom-index-item:last-child { border-bottom: none; }
.chatroom-index-item:hover { background: var(--surface-container-low); }

.chatroom-index-item--contact {
  cursor: default;
}
.chatroom-index-item--contact:hover {
  background: transparent;
}

.chatroom-index-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chatroom-index-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chatroom-index-info {
  flex: 1;
  min-width: 0;
}

.chatroom-index-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--on-surface);
}

.chatroom-index-group {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
}

.chatroom-index-preview {
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatroom-index-time {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.chatroom-index-msg-btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  flex-shrink: 0;
}

.chatroom-index-divider {
  padding: 0.65rem 1.25rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface);
}

/* New DM Panel */
.new-dm-panel {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.06);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.new-dm-panel[hidden] { display: none; }

.new-dm-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.new-dm-panel-header h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.new-dm-panel-body {
  padding: 1rem 1.25rem;
}

.new-dm-panel-body .form-input {
  margin-bottom: 0.75rem;
}

.new-dm-friend-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}

.new-dm-friend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}

.new-dm-friend-item:last-child { border-bottom: none; }

.new-dm-friend-info {
  flex: 1;
  min-width: 0;
}

.new-dm-friend-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--on-surface);
}

.new-dm-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  flex-shrink: 0;
}

.new-dm-empty {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: 0.85rem;
}

.new-dm-empty a {
  color: var(--primary);
  font-weight: 600;
}

/* Chat preview on co-op page */
.chatroom-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chatroom-preview-msg {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
  padding: 0.25rem 0;
}

.chatroom-preview-author {
  font-weight: 700;
  color: var(--on-surface);
  flex-shrink: 0;
}

.chatroom-preview-text {
  color: var(--on-surface-mid);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-preview-time {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .chatroom {
    flex-direction: column;
    height: calc(100vh - 2rem);
  }
  .chatroom-sidebar { display: none; }
  .chatroom-main { border-radius: 1rem; }
}

/* ─── FIELD TRIPS & EXPERIENCES ─── */
.ft-year-group {
  margin-bottom: 2rem;
}

.ft-year-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.ft-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ft-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
}

.ft-card-left {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.ft-emoji {
  font-size: 1.6rem;
  line-height: 1;
}

.ft-card-body {
  flex: 1;
  min-width: 0;
}

.ft-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.ft-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nc-text-muted);
}

.ft-cat-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-forest);
  background: rgba(74, 103, 78, 0.1);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}

.ft-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nc-text);
  margin-bottom: 0.25rem;
}

.ft-location {
  font-size: 0.82rem;
  color: var(--nc-text-muted);
  margin-bottom: 0.25rem;
}

.ft-desc {
  font-size: 0.85rem;
  color: var(--nc-text-secondary);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.ft-subjects {
  font-size: 0.78rem;
  color: var(--nc-text-muted);
  font-style: italic;
}

.ft-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ft-card:hover .ft-card-actions {
  opacity: 1;
}

.ft-children-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.ft-child-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nc-text);
}

.ft-child-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--nc-forest);
  cursor: pointer;
}

@media (max-width: 600px) {
  .ft-card {
    flex-wrap: wrap;
  }
  .ft-card-actions {
    opacity: 1;
    flex-direction: row;
    width: 100%;
  }
}

/* ─── NATURE JOURNAL ─── */
.nj-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
}

.nj-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--space-3);
}
.nj-filter-row:last-of-type {
  margin-bottom: var(--space-6);
}

.nj-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nj-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.nj-filter-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--nc-text-secondary);
  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.nj-filter-pill:hover {
  background: var(--nc-surface-hover);
  color: var(--nc-text);
}

.nj-filter-pill.active {
  background: var(--nc-forest);
  color: #fff;
  border-color: var(--nc-forest);
}

.nj-month-group {
  margin-bottom: 2rem;
}

.nj-month-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.nj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.nj-entry-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 1rem 1.1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nj-entry-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}

.nj-emoji {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.nj-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.nj-entry-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nc-text-muted);
}

.nj-cat-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-forest);
  background: rgba(74, 103, 78, 0.1);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.nj-entry-title {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--nc-text);
  line-height: 1.3;
}

.nj-species {
  font-size: 0.82rem;
  color: var(--nc-text-muted);
}

.nj-detail {
  font-size: 0.8rem;
  color: var(--nc-text-muted);
}

.nj-observation {
  font-size: 0.85rem;
  color: var(--nc-text-secondary);
  line-height: 1.55;
  margin-top: 0.2rem;
}

.nj-entry-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.nj-entry-card:hover .nj-entry-actions {
  opacity: 1;
}

@media (max-width: 600px) {
  .nj-grid {
    grid-template-columns: 1fr;
  }
  .nj-entry-actions {
    opacity: 1;
  }
}

/* ─── ARTIST & COMPOSER STUDY ─── */
.cs-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.cs-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cs-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}

.cs-type-emoji {
  font-size: 1.3rem;
  line-height: 1;
}

.cs-card-meta {
  flex: 1;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.cs-type-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-rose, #7a3a4a);
  background: rgba(122, 58, 74, 0.1);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.cs-archive-pill {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--nc-text-muted);
  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.cs-card-actions {
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.cs-card:hover .cs-card-actions {
  opacity: 1;
}

.cs-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nc-text);
}

.cs-card-name a {
  color: inherit;
  text-decoration: none;
}

.cs-card-name a:hover {
  color: var(--nc-primary);
}

.cs-card-detail {
  font-size: 0.82rem;
  color: var(--nc-text-muted);
}

.cs-progress-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.cs-progress-track {
  flex: 1;
  height: 5px;
  background: var(--nc-border);
  border-radius: 999px;
  overflow: hidden;
}

.cs-progress-fill {
  height: 100%;
  background: var(--nc-forest);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.cs-progress-label {
  font-size: 0.75rem;
  color: var(--nc-text-muted);
  white-space: nowrap;
}

.cs-next-work {
  font-size: 0.82rem;
  color: var(--nc-text-secondary);
}

/* Show page */
.cs-show-type {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.25rem;
}

.cs-show-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: start;
}

.cs-work-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.cs-work-move {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.cs-work-row:hover .cs-work-move {
  opacity: 1;
}

.cs-move-btn {
  border: 1px solid var(--nc-border);
  background: var(--nc-bg, #fff);
  color: var(--nc-text-muted);
  border-radius: 6px;
  width: 1.5rem;
  height: 1.4rem;
  line-height: 1;
  cursor: pointer;
  font-size: 0.75rem;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.cs-move-btn:hover {
  color: var(--nc-primary, var(--primary));
  border-color: var(--nc-primary, var(--primary));
  background: rgba(37, 57, 212, 0.04);
}

.cs-works-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cs-works-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--nc-text);
}

.cs-works-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.cs-work-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--nc-surface);
  border-bottom: 1px solid var(--nc-border);
  transition: background 0.12s;
}

.cs-work-row:last-child {
  border-bottom: none;
}

.cs-work-row:hover {
  background: var(--nc-surface-hover, #f8f6f3);
}

.cs-work--done {
  opacity: 0.55;
}

.cs-work--current {
  background: rgba(74, 103, 78, 0.06);
  border-left: 3px solid var(--nc-forest);
}

.cs-work-num {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nc-text-muted);
  width: 1.5rem;
  text-align: right;
  margin-top: 0.1rem;
}

.cs-work-body {
  flex: 1;
  min-width: 0;
}

.cs-work-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nc-text);
}

.cs-work-meta {
  font-size: 0.78rem;
  color: var(--nc-text-muted);
}

.cs-work-notes {
  font-size: 0.82rem;
  color: var(--nc-text-secondary);
  font-style: italic;
  margin-top: 0.15rem;
}

.cs-work-studied-on {
  font-size: 0.75rem;
  color: var(--nc-forest);
  margin-top: 0.1rem;
}

.cs-work-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.cs-work-row:hover .cs-work-actions {
  opacity: 1;
}

.cs-mark-btn {
  color: var(--nc-forest) !important;
}

.cs-works-empty {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--nc-text-muted);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  margin-bottom: 1.25rem;
}

.cs-add-work-form {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
}

.cs-add-work-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.6rem;
}

.cs-inline-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.cs-work-title-input { flex: 2; min-width: 160px; }
.cs-work-year-input  { flex: 0 0 80px; }
.cs-work-medium-input { flex: 2; min-width: 140px; }

/* Bio sidebar */
.cs-bio-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.cs-bio-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nc-text);
  margin-bottom: 0.5rem;
}

.cs-bio-text {
  font-size: 0.85rem;
  color: var(--nc-text-secondary);
  line-height: 1.6;
}

.cs-side-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (max-width: 768px) {
  .cs-show-layout {
    grid-template-columns: 1fr;
  }
  .cs-work-actions {
    opacity: 1;
  }
  .cs-work-move {
    opacity: 1;
  }
}

/* ─── BOOK OF CENTURIES / TIMELINE ─── */
.tl-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
}

.tl-timeline {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.tl-century-block {
  position: relative;
}

.tl-century-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tl-century-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nc-border);
}

.tl-entries {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--nc-border);
}

.tl-entry {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.7rem 0;
  position: relative;
}

.tl-entry-dot {
  position: absolute;
  left: -1.65rem;
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--nc-bg, #fff);
  background: var(--nc-text-muted);
  flex-shrink: 0;
}

.tl-dot--person      { background: var(--nc-terracotta, #a85c3a); }
.tl-dot--event       { background: var(--nc-rose, #7a3a4a); }
.tl-dot--discovery   { background: var(--nc-sky, #2c5282); }
.tl-dot--invention   { background: var(--nc-gold, #9a7820); }
.tl-dot--art         { background: var(--nc-rose, #7a3a4a); }
.tl-dot--literature  { background: var(--nc-forest, #4a674e); }
.tl-dot--scripture   { background: var(--nc-gold, #9a7820); }
.tl-dot--other       { background: var(--nc-text-muted); }

.tl-entry-year {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nc-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 6rem;
  padding-top: 0.05rem;
}

.tl-entry-body {
  flex: 1;
  min-width: 0;
}

.tl-entry-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.tl-entry-emoji {
  font-size: 1rem;
  line-height: 1;
}

.tl-entry-name {
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--nc-text);
}

.tl-cat-pill {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.tl-entry-desc {
  font-size: 0.84rem;
  color: var(--nc-text-secondary);
  line-height: 1.5;
  margin-top: 0.2rem;
}

.tl-entry-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.35rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.tl-entry:hover .tl-entry-actions {
  opacity: 1;
}

@media (max-width: 600px) {
  .tl-entry-year {
    min-width: 4.5rem;
    font-size: 0.72rem;
  }
  .tl-entry-actions {
    opacity: 1;
  }
}

/* ─── COPYWORK & DICTATION ─── */
.cw-stats-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 0.9rem 1.4rem;
  margin-bottom: 1.25rem;
}

.cw-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cw-stat-num {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nc-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cw-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
}

.cw-stat-divider {
  width: 1px;
  height: 2rem;
  background: var(--nc-border);
}

.cw-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
}

.cw-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

.cw-month-group {
  margin-bottom: 2rem;
}

.cw-month-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
}

.cw-month-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--nc-text-muted);
  opacity: 0.7;
}

.cw-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cw-entry {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 0.9rem 1.1rem;
}

.cw-entry-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.cw-type-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 8px;
  padding: 0.15rem 0.45rem;
}

.cw-type--copywork {
  background: rgba(44, 82, 130, 0.1);
  color: var(--nc-sky, #2c5282);
}

.cw-type--dictation {
  background: rgba(154, 120, 32, 0.1);
  color: var(--nc-gold, #9a7820);
}

.cw-entry-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nc-text-muted);
}

.cw-score-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 0.1rem 0.35rem;
}

.cw-score--forest     { background: rgba(74,103,78,0.12); color: var(--nc-forest, #4a674e); }
.cw-score--sky        { background: rgba(44,82,130,0.12); color: var(--nc-sky, #2c5282); }
.cw-score--gold       { background: rgba(154,120,32,0.12); color: var(--nc-gold, #9a7820); }
.cw-score--terracotta { background: rgba(168,92,58,0.12); color: var(--nc-terracotta, #a85c3a); }

.cw-entry-actions {
  margin-left: auto;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.cw-entry:hover .cw-entry-actions {
  opacity: 1;
}

.cw-passage {
  font-size: 0.93rem;
  color: var(--nc-text);
  line-height: 1.65;
  font-style: italic;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cw-source {
  font-size: 0.8rem;
  color: var(--nc-text-muted);
  margin-top: 0.3rem;
}

.cw-notes {
  font-size: 0.82rem;
  color: var(--nc-text-secondary);
  margin-top: 0.3rem;
  font-style: normal;
}

/* Sticky form card */
.cw-form-col {
  position: sticky;
  top: 5rem;
}

.cw-form-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: 1rem;
  padding: 1.25rem 1.3rem;
}

.cw-form-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nc-text);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .cw-layout {
    grid-template-columns: 1fr;
  }
  .cw-form-col {
    position: static;
    order: -1;
  }
  .cw-entry-actions {
    opacity: 1;
  }
}


/* ─── APP SWITCHER ─── */
.topbar-left {
  display: flex;
  align-items: center;
}

.app-switcher {
  position: relative;
}

.hamburger-btn {
  background: none;
  border: none;
  color: var(--on-surface-mid);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.hamburger-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

/* Panel */
.app-switcher-panel {
  position: fixed;
  top: 64px;
  left: 76px;
  width: 300px;
  background: var(--surface-lowest);
  border-radius: 1.25rem;
  box-shadow: 0 12px 48px rgba(28, 28, 26, 0.16),
              0 4px 12px rgba(28, 28, 26, 0.06),
              0 0 0 1px var(--outline-variant);
  padding: 1.25rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top left;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1),
              transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.app-switcher-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.app-switcher-header {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: none;
}

.app-switcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Category tiles — M365-style */
.app-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  border: none;
  background: transparent;
  border-radius: 1rem;
  cursor: pointer;
  color: var(--on-surface-mid);
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
  text-align: center;
  position: relative;
}

.app-category-tile:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
  transform: translateY(-1px);
}

.app-category-tile:active {
  transform: scale(0.97);
}

.app-category-tile.active {
  background: var(--surface-container);
  color: var(--primary);
}

.app-category-tile.active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
}

.app-category-icon {
  width: 44px;
  height: 44px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.12s ease;
}

.app-category-tile:hover .app-category-icon {
  box-shadow: 0 4px 12px rgba(28, 28, 26, 0.08);
}

/* Colored icon backgrounds */
.app-category-tile[data-category="daily"] .app-category-icon {
  background: linear-gradient(135deg, #e8d5a3, #d4b96a);
  color: #6b5a2e;
}
.app-category-tile[data-category="planning"] .app-category-icon {
  background: linear-gradient(135deg, #e0c4c0, #c9a09a);
  color: #6b3f37;
}
.app-category-tile[data-category="resources"] .app-category-icon {
  background: linear-gradient(135deg, #c3d4bb, #97b58a);
  color: #3a5230;
}
.app-category-tile[data-category="records"] .app-category-icon {
  background: linear-gradient(135deg, #d4bfaa, #b8956e);
  color: #5a3a1e;
}

.app-category-tile[data-category] .app-category-icon svg {
  stroke: currentColor;
}

.app-category-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ─── DASHBOARD METHOD BAR ─── */
.dashboard-method-bar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Method name — text mark, no badge background */
.method-pill {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--on-surface-subtle);
}

.method-pill--forest     { color: var(--secondary); }
.method-pill--terracotta { color: var(--terracotta); }
.method-pill--sky        { color: var(--sky); }
.method-pill--gold       { color: var(--gold); }
.method-pill--rose       { color: var(--rose); }

/* Tagline — italic serif, em-dash separator built in */
.method-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--on-surface-subtle);
  flex: 1;
}
.method-tagline::before {
  content: "— ";
  font-style: normal;
}

.method-change-link {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  opacity: 0.5;
  margin-left: auto;
  transition: opacity 0.15s, color 0.15s;
  white-space: nowrap;
}
.method-change-link:hover { opacity: 1; color: var(--primary); }

/* ─── NO METHOD BANNER ─── */
.no-method-banner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-left: 3px solid var(--tertiary);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.1rem 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.no-method-icon {
  color: var(--primary);
  opacity: 0.6;
  flex-shrink: 0;
}

.no-method-body {
  flex: 1;
  min-width: 0;
}

.no-method-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.no-method-desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

/* ─── MEMORY WORK DUE WIDGET ─── */
.mw-due-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}
.mw-due-item:last-child { border-bottom: none; }

.mw-due-emoji {
  font-size: 1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.mw-due-info { flex: 1; min-width: 0; }

.mw-due-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-due-child {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: 0.1rem;
}

.mw-due-meta { flex-shrink: 0; }

.mw-due-days {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}

.mw-due-days--new {
  background: var(--gold-pale);
  color: var(--gold);
}

.mw-due-more {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  text-align: center;
  padding-top: 0.5rem;
}

/* ─── TRANSCRIPT TABLE ─── */
.transcript-table {
  width: 100%; border-collapse: collapse;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.82rem;
}
.transcript-table th {
  text-align: left; font-weight: 600; color: var(--on-surface-mid);
  padding: 0.5rem 0.6rem; border-bottom: 2px solid var(--outline-variant);
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.transcript-table td {
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
}
.transcript-table tr:last-child td { border-bottom: none; }

/* ─── MEMORY REVIEW PAGE ─── */
.review-card { max-width: 640px; }
.review-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.review-emoji { font-size: 2rem; }
.review-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--on-surface); }
.review-meta { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.75rem; color: var(--on-surface-mid); margin-top: 0.2rem; }
.review-body {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; line-height: 1.8;
  color: var(--on-surface); background: var(--surface-container-low);
  border-radius: 1rem; padding: 1.2rem 1.5rem; margin-bottom: 1.5rem;
  white-space: pre-wrap;
}
.review-quality-label { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--on-surface-mid); margin-bottom: 0.6rem; }
.review-quality-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.review-q-btn { flex: 1; min-width: 80px; text-align: center; }
.review-q-1 { border-color: #d32f2f; color: #d32f2f; }
.review-q-2 { border-color: #f57c00; color: #f57c00; }
.review-q-3 { border-color: #fbc02d; color: #795548; }
.review-q-4 { border-color: var(--secondary); color: var(--secondary); }
.review-q-5 { border-color: var(--primary); color: var(--primary); }
.review-mastered-row { margin-top: 0.5rem; }
.review-mastered-label { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.8rem; color: var(--on-surface-mid); display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

/* ─── HABITS TODAY WIDGET ─── */
.habits-child-group {
  margin-bottom: 0.9rem;
}
.habits-child-group:last-child { margin-bottom: 0; }

.habits-child-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.habit-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  color: var(--on-surface-mid);
}

.habit-row--done {
  color: var(--on-surface-subtle);
}

.habit-check {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.habit-row--done .habit-check {
  color: var(--secondary);
}

.habit-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
}

.habit-row--done .habit-name {
  text-decoration: line-through;
  opacity: 0.6;
}

.habit-check-btn {
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  width: 100%;
}
.habit-check-btn:hover .habit-check { color: var(--primary); }

/* ─── TOPBAR ACCOUNT BUTTON ─── */
.topbar-account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--on-surface-subtle);
  transition: background 0.1s, color 0.1s;
}
.topbar-account-btn:hover,
.topbar-account-btn--active {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* ─── ACCOUNT SETTINGS PAGE ─── */
.account-settings-form {
  max-width: 860px;
}

.settings-section {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  margin-bottom: 1.5rem;
}

.settings-section--muted {
  background: var(--surface-container-low);
  box-shadow: none;
  border: 1px solid var(--surface-container-high);
}

.settings-section--danger {
  background: var(--surface-lowest);
  box-shadow: none;
  border: 1px solid #fca5a5;
  padding: 1.5rem;
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  gap: 1rem;
}

.settings-section--muted .settings-section-header {
  padding: 1.25rem 1.5rem;
  align-items: center;
}

.settings-section-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}

.settings-section-title--danger {
  font-size: 0.82rem;
  color: #dc2626;
  margin-bottom: 0.75rem;
}

.settings-section-desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

/* ─── UI STYLE TOGGLE (Funky / Clean) ─── */
.style-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.style-toggle-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface-subtle);
  transition: color 0.2s;
}

.style-toggle-label--active {
  color: var(--primary);
}

/* ─── COLLAPSIBLE SETTINGS SECTIONS ─── */
.settings-collapsible {
  border: none;
}

.settings-collapsible summary {
  list-style: none;
}
.settings-collapsible summary::-webkit-details-marker {
  display: none;
}

.settings-collapsible-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 1rem;
}

.settings-collapsible-trigger:hover {
  background: var(--surface-container-low);
}

.settings-collapsible-current {
  margin-left: auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-container);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-collapsible-arrow {
  color: var(--on-surface-subtle);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.settings-collapsible[open] .settings-collapsible-arrow {
  transform: rotate(180deg);
}

.settings-collapsible-body {
  padding: 0 1.5rem 1.5rem;
}

.settings-method-grid {
  padding: 1.25rem 1.5rem 1.5rem;
}

.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.5rem;
}

.settings-radio-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.settings-radio-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  color: var(--on-surface-mid);
}

.settings-actions {
  max-width: 860px;
  margin-bottom: 1.5rem;
}

.settings-actions--sticky {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.25rem 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  border-top: 1px solid rgba(26, 26, 46, 0.08);
  z-index: 100;
  display: flex;
  align-items: center;
}

.settings-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
}
.settings-meta-row:last-child { padding-bottom: 1.25rem; }

.settings-meta-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  width: 80px;
  flex-shrink: 0;
}

.settings-meta-value {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  color: var(--on-surface-mid);
}

.settings-google-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
}

.settings-google-pane {
  border: 1px solid var(--surface-container-high);
  border-radius: 1rem;
  background: var(--surface-container-low);
  padding: 1rem;
}

.settings-google-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.settings-google-count {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--on-surface);
}

.settings-google-hint,
.settings-google-url {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

.settings-google-url {
  display: block;
  overflow-wrap: anywhere;
}

.settings-google-callout {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--surface-container-high);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  white-space: nowrap;
}

.settings-google-form,
.settings-google-fields,
.settings-google-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.settings-google-actions {
  display: flex;
  justify-content: flex-start;
}

.settings-google-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--surface-container-high);
}

.settings-google-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-google-item-main {
  min-width: 0;
  flex: 1;
}

.settings-google-item-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.3rem;
}

.settings-google-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--on-surface);
}

.settings-google-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e8f0fe;
  color: #1a73e8;
}

.settings-google-badge--sheet {
  background: #e6f4ea;
  color: #137333;
}

.settings-google-badge--doc {
  background: #e8f0fe;
  color: #1a73e8;
}

.settings-google-badge--slides {
  background: #fef7e0;
  color: #b06000;
}

.settings-google-badge--folder {
  background: #fff1e6;
  color: #c26401;
}

@media (max-width: 900px) {
  .settings-google-grid {
    grid-template-columns: 1fr;
  }

  .settings-google-item {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-google-status {
    flex-direction: column;
    align-items: stretch;
  }
}

.settings-danger-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.settings-danger-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.settings-danger-desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
  max-width: 480px;
}

.btn-danger {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-danger:hover { background: #fecaca; }

/* ─── TOGGLE SWITCH ─── */
.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  display: block;
  width: 40px;
  height: 22px;
  background: var(--surface-container-high);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-input:checked + .toggle-track {
  background: var(--secondary);
}

.toggle-input:checked + .toggle-track::after {
  transform: translateX(18px);
}

.toggle-switch--lg .toggle-track {
  width: 52px;
  height: 28px;
}

.toggle-switch--lg .toggle-track::after {
  width: 22px;
  height: 22px;
  top: 3px;
  left: 3px;
}

.toggle-switch--lg .toggle-input:checked + .toggle-track::after {
  transform: translateX(24px);
}

/* ─── SETTINGS TOGGLE ROW ─── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
}

.toggle-label-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.toggle-label-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface);
}

.toggle-label-hint {
  display: block;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  line-height: 1.4;
}

.nav-toggles-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toggle-label-status {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
}

.toggle-status {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.toggle-status--on  { color: var(--secondary); }
.toggle-status--off { color: var(--on-surface-subtle); }

/* ─── ONBOARDING PREFERENCES CARD ─── */
.ob-pref-card {
  background: var(--surface-container-low);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.ob-pref-card-body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.ob-pref-card-icon {
  color: var(--secondary);
  opacity: 0.7;
  flex-shrink: 0;
}

.ob-pref-card-text {
  flex: 1;
  min-width: 0;
}

.ob-pref-card-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.3rem;
}

.ob-pref-card-desc {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: modalFadeIn 0.15s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-panel {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: 1.25rem 1.5rem 0;
  position: relative;
}

.modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.modal-subtitle {
  font-size: 0.82rem;
  color: #9ca3af;
  margin-top: 0.15rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.modal-close:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.modal-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.75rem;
}

/* ─── CUSTOM TRACKERS ─── */
.tracker-column-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.tracker-column-row .form-input {
  flex: 2;
}
.tracker-column-row .form-select {
  flex: 1;
  min-width: 100px;
}
.tracker-col-remove {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 0.25rem;
}
.tracker-col-remove:hover {
  color: #d50000;
  background: #fff0f0;
}

.tracker-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
}

.tracker-table {
  width: 100%;
  border-collapse: collapse;
}
.tracker-table thead th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70757a;
  padding: 0.6rem 1rem;
  text-align: left;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
}
.tracker-table tbody td {
  font-size: 0.88rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface-mid);
}
.tracker-table tbody tr:last-child td {
  border-bottom: none;
}
.tracker-table tbody tr:hover {
  background: #fafafa;
}
.tracker-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* ─── CONFIRM DIALOG ─── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  animation: modalFadeIn 0.15s ease;
}

.confirm-panel {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 380px;
  padding: 1.5rem;
  animation: modalSlideIn 0.2s ease;
}

.confirm-message {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.confirm-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.confirm-btn:active {
  transform: scale(0.97);
}

.confirm-btn--cancel {
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}
.confirm-btn--cancel:hover {
  background: #e5e7eb;
}

.confirm-btn--ok {
  background: #2539d4;
  color: #fff;
}
.confirm-btn--ok:hover {
  background: #4a5ce6;
}

/* ─── HELP FAB ─── */
.help-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.help-fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28, 28, 26, 0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28, 28, 26, 0.22);
}

.help-popover {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(28, 28, 26, 0.14),
              0 2px 8px rgba(28, 28, 26, 0.06),
              0 0 0 1px var(--outline-variant);
  padding: 1.25rem 1.5rem;
}

.help-popover::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--surface-lowest);
  border-right: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  transform: rotate(45deg);
}

.help-popover-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.help-popover-body {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.84rem;
  color: var(--on-surface-mid);
  line-height: 1.6;
}

/* ─── NARRATION SHOW ─── */
.narration-source-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.75rem;
}

.narration-full-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--on-surface);
}

/* ─── FIELD TRIP SHOW ─── */
.ft-detail-row {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.88rem;
  color: var(--on-surface-mid);
  padding: 0.4rem 0;
}

.ft-detail-row + .ft-detail-row {
  border-top: 1px solid var(--surface-container-high);
}

.ft-description {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--on-surface);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-container-high);
}

/* ─── ENRICHMENT PAGES ─── */
.enrich-stats-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.enrich-stat {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}

.enrich-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--on-surface);
}

.enrich-stat-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.enrich-month-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.enrich-month-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--on-surface);
}

.enrich-summary-strip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.enrich-summary-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--on-surface-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.enrich-summary-pill {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.75rem;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}

.record-item-link {
  color: inherit;
  text-decoration: none;
}

.record-item-link:hover {
  color: var(--primary);
}

.record-item-meta {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  margin-top: 0.35rem;
}

.enrich-detail-card {
  background: var(--surface-lowest);
  border-radius: 1.35rem;
  box-shadow: 0 2px 12px var(--shadow);
  padding: 1.5rem;
}

.enrich-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.enrich-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: var(--surface-container-low);
}

.enrich-detail-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.enrich-detail-value {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--on-surface);
}

.enrich-detail-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--on-surface);
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
}

.enrich-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.enrich-check-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: var(--surface-container-low);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.82rem;
  color: var(--on-surface-mid);
}

@media (max-width: 600px) {
  .enrich-stats-bar {
    flex-direction: column;
  }
  .enrich-stat {
    min-width: 0;
  }
  .enrich-month-nav {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGE & BLOCK EDITOR
   ═══════════════════════════════════════════════════════ */

/* ─── PAGE INDEX ─── */
.page-index { max-width: 800px; margin: 0 auto; }
.page-index-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.page-index-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; font-weight: 700;
}
.page-index-list { display: flex; flex-direction: column; gap: 0.5rem; }

.page-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 1rem;
  background: var(--surface-container-low);
  text-decoration: none; color: var(--on-surface);
  transition: background 0.15s ease;
}
.page-card:hover { background: var(--surface-container); }
.page-card-icon { font-size: 1.5rem; flex-shrink: 0; }
.page-card-body { flex: 1; min-width: 0; }
.page-card-title {
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 0.95rem;
}
.page-card-meta {
  display: flex; gap: 0.5rem; font-size: 0.78rem; color: var(--on-surface-mid);
  margin-top: 0.15rem;
}
.page-card-badge {
  font-size: 0.72rem; background: var(--surface-container-high);
  padding: 0.15rem 0.5rem; border-radius: 0.75rem;
  color: var(--on-surface-mid);
}

/* ─── PAGE SHOW ─── */
.page-show { max-width: 800px; margin: 0 auto; }

.page-header { margin-bottom: 2rem; }
.page-header-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.page-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 700;
  outline: none; border: none; width: 100%;
  color: var(--on-surface); line-height: 1.3;
}
.page-title:focus { border-bottom: 2px solid var(--primary); }
.page-title:empty::before {
  content: 'Untitled'; color: var(--on-surface-subtle); font-style: italic;
}

.page-header-actions {
  display: flex; gap: 0.5rem; align-items: center;
  margin-top: 0.75rem; flex-wrap: wrap;
}
.page-header-type {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--on-surface-subtle); font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600;
}
.page-header-child {
  font-size: 0.8rem; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 500;
}

/* ─── BLOCKS ─── */
.page-blocks { display: flex; flex-direction: column; gap: 0.25rem; }

.block {
  display: flex; align-items: flex-start; gap: 0.25rem;
  padding: 0.35rem 0; position: relative;
  border-radius: 0.75rem; transition: background 0.1s ease;
}
.block:hover { background: var(--surface-container-lowest); }

.block-handle {
  opacity: 0; cursor: grab; color: var(--on-surface-subtle);
  font-size: 0.7rem; padding: 0.25rem 0.15rem; user-select: none;
  transition: opacity 0.1s ease; flex-shrink: 0; margin-top: 0.15rem;
}
.block-content { flex: 1; min-width: 0; }
.block-actions {
  opacity: 0; display: flex; gap: 0.25rem; flex-shrink: 0;
  transition: opacity 0.1s ease;
}
.block-action-btn {
  background: none; border: none; cursor: pointer; padding: 0.15rem 0.35rem;
  color: var(--on-surface-subtle); font-size: 0.85rem; border-radius: 0.25rem;
}
.block-action-btn:hover { background: var(--surface-container-high); color: var(--error); }

.block--dragging { opacity: 0.5; }
.block-placeholder {
  background: var(--primary-container); border-radius: 0.75rem;
  border: 2px dashed var(--primary); opacity: 0.4;
}

.block-children {
  margin-left: 1.5rem; padding-left: 0.75rem;
  border-left: 2px solid var(--surface-container-high);
}

/* ─── CONTENT BLOCKS ─── */
.block-text {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; line-height: 1.7;
  color: var(--on-surface); margin: 0;
}

.block-heading { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--on-surface); margin: 0; }
.block-heading-1 { font-size: 1.75rem; font-weight: 600; }
.block-heading-2 { font-size: 1.35rem; font-weight: 500; }
.block-heading-3 { font-size: 1.1rem; font-weight: 500; }

.block-todo { display: flex; align-items: center; gap: 0.5rem; }
.block-todo-check {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1.1rem; line-height: 1;
}
.block-todo-indicator { color: var(--on-surface-subtle); }
.block-todo-indicator.checked { color: var(--primary); }
.block-todo-text { font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.95rem; }
.block-todo-text.completed { text-decoration: line-through; color: var(--on-surface-subtle); }

.block-divider {
  border: none; height: 1px; background: var(--surface-container-high);
  margin: 0.5rem 0;
}

/* ─── DOMAIN BLOCKS ─── */
.block-lesson-header,
.block-narration-header,
.block-habit-header,
.block-memory-work-header,
.block-read-aloud-header,
.block-field-trip-header,
.block-copywork-header,
.block-cultural-header,
.block-nature-header,
.block-daily-log-header,
.block-template-header {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.block-lesson-toggle, .block-habit-toggle, .block-cultural-work-toggle {
  background: none; border: none; cursor: pointer; padding: 0; font-size: 1.1rem;
}
.block-lesson-check, .block-habit-check {
  color: var(--on-surface-subtle);
}
.block-lesson-check.completed, .block-habit-check.completed {
  color: var(--primary);
}

.block-lesson-title, .block-habit-name, .block-read-aloud-title,
.block-field-trip-title, .block-nature-title, .block-cultural-name,
.block-memory-work-title, .block-template-title {
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 0.95rem;
}
.block-lesson-title.completed { text-decoration: line-through; color: var(--on-surface-subtle); }

.block-lesson-meta, .block-habit-meta, .block-read-aloud-meta,
.block-field-trip-meta, .block-nature-meta, .block-memory-work-meta,
.block-template-meta {
  display: flex; gap: 0.5rem; font-size: 0.78rem; color: var(--on-surface-mid);
  margin-top: 0.2rem; font-family: 'Be Vietnam Pro', sans-serif;
}

.block-lesson-notes, .block-nature-observation, .block-field-trip-desc,
.block-cultural-bio, .block-memory-work-body {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; line-height: 1.6;
  color: var(--on-surface); margin-top: 0.35rem;
}

.block-copywork-passage {
  font-family: 'Plus Jakarta Sans', sans-serif; font-style: italic;
  font-size: 1.05rem; line-height: 1.7;
  margin: 0.5rem 0 0.25rem 0; padding-left: 1rem;
  border-left: 3px solid var(--primary-container);
  color: var(--on-surface);
}
.block-copywork-source {
  font-size: 0.82rem; color: var(--on-surface-mid);
  font-family: 'Be Vietnam Pro', sans-serif;
}

.block-timeline {
  display: flex; align-items: baseline; gap: 0.75rem;
}
.block-timeline-year {
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 0.85rem;
  color: var(--primary); min-width: 5rem; text-align: right;
}
.block-timeline-name {
  font-family: 'Be Vietnam Pro', sans-serif; font-weight: 600; font-size: 0.95rem;
}
.block-timeline-desc {
  font-size: 0.85rem; color: var(--on-surface-mid); margin-top: 0.15rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.block-transcript-course {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.88rem;
}
.block-transcript-course-name { font-weight: 600; flex: 1; }
.block-transcript-course-grade { font-weight: 700; color: var(--primary); }
.block-transcript-course-credits { color: var(--on-surface-mid); }

.block-daily-log-section {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; line-height: 1.6;
  margin-top: 0.25rem;
}

.block-book, .block-outside, .block-attendance, .block-read-session,
.block-habit-log, .block-memory-review, .block-cultural-work {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.88rem;
}

.block-book-title, .block-cultural-work-title { font-weight: 600; }
.block-book-author { color: var(--on-surface-mid); font-style: italic; }

.block-habit-streak {
  color: var(--primary); font-weight: 600;
}

/* ─── BLOCK INSERTER ─── */
.block-inserter {
  margin-top: 1rem; padding: 0.5rem 0;
}
.block-inserter-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer;
  color: var(--on-surface-subtle); padding: 0.35rem 0.5rem;
  border-radius: 0.75rem; width: 100%; text-align: left;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.88rem;
  transition: background 0.1s ease;
}
.block-inserter-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}
.block-inserter-plus {
  font-size: 1.25rem; font-weight: 300; width: 1.5rem; text-align: center;
}

/* ─── SLASH MENU ─── */
.slash-menu {
  position: absolute; z-index: 100; width: 280px;
  background: rgba(var(--surface-rgb, 246,243,240), 0.95);
  backdrop-filter: blur(12px);
  border-radius: 1rem; padding: 0.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  max-height: 320px; overflow-y: auto;
}
.slash-menu-search {
  width: 100%; border: none; background: var(--surface-container-low);
  padding: 0.5rem 0.75rem; border-radius: 0.75rem;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.85rem;
  outline: none; margin-bottom: 0.35rem;
}
.slash-menu-list { display: flex; flex-direction: column; }
.slash-menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.65rem; border: none; background: none;
  cursor: pointer; border-radius: 0.75rem; text-align: left;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.85rem;
  color: var(--on-surface); transition: background 0.1s ease;
}
.slash-menu-item:hover { background: var(--surface-container-low); }
.slash-menu-item-slash {
  font-size: 0.72rem; color: var(--on-surface-subtle);
  font-family: monospace;
}

/* ─── SIDEBAR V2 ─── */
.sidebar-v2 .sidebar-section--quick { margin-bottom: 0.5rem; }
.sidebar-v2 .sidebar-section--legacy {
  margin-top: auto; padding-top: 0.75rem;
  border-top: 1px solid var(--surface-container-high);
}

.sidebar-page-item {
  display: flex; align-items: center; gap: 0.15rem;
  min-height: 1.75rem;
}
.sidebar-page-toggle {
  background: none; border: none; cursor: pointer; padding: 0.15rem;
  color: var(--on-surface-subtle); border-radius: 0.25rem;
  display: flex; align-items: center;
}
.sidebar-page-toggle:hover { background: var(--surface-container-high); }
.sidebar-page-arrow { transition: transform 0.15s ease; }
.sidebar-page-spacer { width: 18px; flex-shrink: 0; }

.sidebar-page-link {
  display: flex; align-items: center; gap: 0.35rem;
  text-decoration: none; color: var(--on-surface);
  padding: 0.2rem 0.35rem; border-radius: 0.35rem;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 0.82rem;
  flex: 1; min-width: 0; transition: background 0.1s ease;
}
.sidebar-page-link:hover { background: var(--surface-container-low); }
.sidebar-page-link.active {
  background: var(--surface-container);
  font-weight: 600;
}
.sidebar-page-icon { font-size: 0.9rem; flex-shrink: 0; }
.sidebar-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-page-child { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sidebar-page-children { margin-top: 0.1rem; }

.nav-item--add {
  color: var(--on-surface-subtle); font-style: italic;
}
.nav-item--add:hover { color: var(--primary); }

/* ─── PAGE FORM ─── */
.page-form-container { max-width: 600px; margin: 0 auto; }
.page-form-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700;
  margin-bottom: 1.5rem;
}

/* ── Community ─────────────────────────────────────────── */
.community-header {
  margin-bottom: 2rem;
}
.community-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2rem; font-weight: 700;
  color: var(--on-surface);
}
.community-subtitle {
  color: var(--on-surface-mid); font-size: 0.95rem; margin-top: 0.25rem;
}
.community-filters { margin-bottom: 1.5rem; }
.community-filter-form .filter-row {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
}
.community-filter-form .filter-search { flex: 1; min-width: 200px; }
.community-filter-form .filter-select { min-width: 160px; }
.community-filter-form .filter-input {
  width: 100%; padding: 0.5rem 0.75rem; border: none;
  border-radius: 9999px; font-size: 0.875rem; background: var(--surface-container-low);
}
.community-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.community-card {
  border: none; border-radius: var(--radius-xl);
  background: var(--surface-lowest); transition: box-shadow 0.15s;
  box-shadow: 0 2px 12px var(--shadow);
}
.community-card:hover { box-shadow: var(--shadow-lg); }
.community-card-link {
  display: block; padding: 1.25rem; text-decoration: none; color: inherit;
}
.community-card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.community-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--on-surface);
}
.community-card-meta {
  font-size: 0.8rem; color: var(--on-surface-mid); margin-top: 0.25rem;
}
.community-card-sep { margin: 0 0.3rem; }
.community-card-author {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.75rem; font-size: 0.8rem; color: var(--on-surface-mid);
}
.community-card-stats {
  display: flex; gap: 0.75rem; margin-top: 0.75rem;
  font-size: 0.75rem; color: var(--on-surface-mid);
}
.community-card-forks { color: var(--secondary); font-weight: 500; }
.method-pill--sm { font-size: 0.7rem; padding: 0.15rem 0.5rem; }
.community-pagination {
  display: flex; gap: 1rem; justify-content: center; margin-top: 2rem;
}

/* Community page show */
.community-page-header { margin-bottom: 1.5rem; }
.community-page-icon { font-size: 2rem; }
.community-page-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; font-weight: 700;
  color: var(--on-surface); margin-top: 0.25rem;
}
.community-page-meta {
  font-size: 0.85rem; color: var(--on-surface-mid); margin-top: 0.25rem;
}
.community-page-actions {
  display: flex; gap: 0.75rem; margin-bottom: 2rem;
}
.community-page-blocks { max-width: 720px; }
.community-block {
  padding: 0.5rem 0; border-bottom: none;
}
.community-block-children {
  margin-left: 1.5rem; border-left: 2px solid var(--outline-variant);
  padding-left: 1rem;
}

/* ─── PRICING PAGE ─── */
.pricing-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}
.pricing-header-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.8rem;
}
.pricing-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-surface);
  margin-bottom: 0.8rem;
}
.pricing-subheadline {
  font-size: 0.92rem;
  color: var(--on-surface-mid);
  line-height: 1.5;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto 4rem;
  align-items: start;
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}

.pricing-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
.pricing-card:hover {
  box-shadow: 0 8px 32px var(--shadow);
  transform: translateY(-2px);
}

.pricing-card--featured {
  border: 2px solid var(--primary);
  box-shadow: 0 4px 24px rgba(64, 92, 101, 0.12);
}
.pricing-card--featured:hover {
  box-shadow: 0 12px 40px rgba(64, 92, 101, 0.18);
}

.pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 1rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.pricing-card-head { margin-bottom: 1.5rem; }

.pricing-plan-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}
.pricing-plan-desc {
  font-size: 0.82rem;
  color: var(--on-surface-mid);
}

.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1.5rem;
}
.pricing-amount {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1;
}
.pricing-period {
  font-size: 0.82rem;
  color: var(--on-surface-mid);
}

.pricing-card-action { margin-bottom: 1.5rem; }
.pricing-btn {
  width: 100%;
  text-align: center;
  display: block;
}

.pricing-current-badge {
  display: block;
  text-align: center;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--secondary);
  background: var(--sage-pale);
  padding: 0.6rem 1rem;
  border-radius: 9999px;
}

.pricing-features { border-top: 1px solid var(--outline-variant); padding-top: 1.2rem; }
.pricing-feature-group-label {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.8rem;
}
.pricing-feature-list { list-style: none; }
.pricing-feature {
  font-size: 0.84rem;
  color: var(--on-surface);
  padding: 0.3rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.pricing-check {
  color: var(--secondary);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}
.pricing-check--accent { color: var(--primary); }

/* ── Feature Comparison Table ── */
.pricing-comparison {
  max-width: 960px;
  margin: 0 auto 4rem;
}
.pricing-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--on-surface);
  text-align: center;
  margin-bottom: 2rem;
}
.pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.pricing-table th,
.pricing-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
}
.pricing-table thead th {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  position: sticky;
  top: 0;
}
.pricing-table-feature { width: 40%; }
.pricing-table-plan { width: 20%; text-align: center; }
.pricing-table-plan--featured {
  background: rgba(64, 92, 101, 0.04);
  color: var(--primary);
}
.pricing-table td:not(:first-child) { text-align: center; color: var(--on-surface-mid); }
.pricing-table td:nth-child(3) { background: rgba(64, 92, 101, 0.03); font-weight: 500; color: var(--on-surface); }

.pricing-table-section td {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding-top: 1.2rem;
  border-bottom: none;
}

/* ── FAQ ── */
.pricing-faq {
  max-width: 760px;
  margin: 0 auto 3rem;
}
.pricing-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .pricing-faq-grid { grid-template-columns: 1fr; }
}
.pricing-faq-item {
  background: var(--surface-container-low);
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
}
.pricing-faq-q {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.pricing-faq-a {
  font-size: 0.82rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
}

/* ─── DISCOVER (community pin board) ─────────────────────────────── */

/* ── Filter pills ── */
.discover-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.discover-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  background: var(--surface-container);
  color: var(--on-surface-mid);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s;
}
.discover-filter-pill:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.discover-filter-pill--active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.discover-filter-count {
  font-size: 0.72rem;
  opacity: 0.75;
}
.discover-filter-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--outline-variant);
  margin: 0 0.2rem;
}

/* ── Masonry grid ── */
.discover-grid {
  columns: 3 220px;
  column-gap: 1rem;
}

/* ── Pin card ── */
.pin-card {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius-card, 0.75rem);
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.pin-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.pin-card-img-link { display: block; }
.pin-card-img-wrap {
  width: 100%;
  min-height: 140px;
  max-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-card-img-wrap--terracotta { background: var(--terracotta-soft, #f5e6e0); }
.pin-card-img-wrap--sky        { background: var(--sky-soft, #e0eff8); }
.pin-card-img-wrap--forest     { background: var(--forest-soft, #e0ece4); }
.pin-card-img-wrap--gold       { background: var(--gold-soft, #f5f0e0); }
.pin-card-img-wrap--rose       { background: var(--rose-soft, #f8e6ec); }
.pin-card-img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.pin-card-img-placeholder {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-mid);
  padding: 2rem;
  text-align: center;
}
.pin-card-body { padding: 0.75rem 0.85rem 0.85rem; }
.pin-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.pin-category-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pin-category-badge--terracotta { background: var(--terracotta-soft, #f5e6e0); color: #7a3a20; }
.pin-category-badge--sky        { background: var(--sky-soft, #e0eff8);        color: #1a5276; }
.pin-category-badge--forest     { background: var(--forest-soft, #e0ece4);     color: #1a4a2e; }
.pin-category-badge--gold       { background: var(--gold-soft, #f5f0e0);       color: #6b5a1e; }
.pin-category-badge--rose       { background: var(--rose-soft, #f8e6ec);       color: #7a2040; }
.pin-vis-badge {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-left: auto;
}
.pin-card-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.pin-card-title:hover { text-decoration: underline; }
.pin-card-desc {
  font-size: 0.8rem;
  color: var(--on-surface-mid);
  margin: 0 0 0.5rem;
  line-height: 1.45;
}
.pin-card-footer { margin-top: 0.5rem; }
.pin-card-author {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  text-decoration: none;
  font-weight: 500;
}
.pin-card-author:hover { text-decoration: underline; }

/* ── Pin show page ── */
.pin-show-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .pin-show-layout { grid-template-columns: 1fr; }
}
.pin-show-img-wrap {
  border-radius: var(--radius-card, 0.75rem);
  overflow: hidden;
  background: var(--surface-container);
}
.pin-show-img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;
}
.pin-show-img-placeholder {
  border-radius: var(--radius-card, 0.75rem);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--on-surface-mid);
}
.pin-show-img-placeholder--terracotta { background: var(--terracotta-soft, #f5e6e0); }
.pin-show-img-placeholder--sky        { background: var(--sky-soft, #e0eff8); }
.pin-show-img-placeholder--forest     { background: var(--forest-soft, #e0ece4); }
.pin-show-img-placeholder--gold       { background: var(--gold-soft, #f5f0e0); }
.pin-show-img-placeholder--rose       { background: var(--rose-soft, #f8e6ec); }
.pin-show-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.pin-show-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.pin-show-desc {
  font-size: 0.95rem;
  color: var(--on-surface-mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.pin-show-desc p { margin: 0 0 0.5rem; }
.pin-show-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--primary);
  text-decoration: none;
  background: var(--surface-container);
  border-radius: 0.5rem;
  padding: 0.4rem 0.75rem;
  margin-bottom: 1rem;
  word-break: break-all;
}
.pin-show-link:hover { text-decoration: underline; }
.pin-show-author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nc-border);
}
.pin-show-author-link { text-decoration: none; }
.pin-show-author-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--on-surface);
}
.pin-show-date {
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
}

/* ── Pin form ── */
.pin-image-upload-area {
  position: relative;
  border: 2px dashed var(--nc-border);
  border-radius: var(--radius-card, 0.75rem);
  overflow: hidden;
  cursor: pointer;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.pin-image-upload-area:hover { border-color: var(--primary); }
.pin-image-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.pin-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-subtle);
  font-size: 0.88rem;
  padding: 2rem;
}
.pin-image-placeholder-icon { font-size: 2rem; }
.pin-image-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-card, 0.75rem);
}
.form-hint {
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  margin-top: 0.3rem;
}

/* ── Visibility picker ── */
.vis-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vis-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.vis-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  border: 2px solid var(--nc-border);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.vis-option:hover { border-color: var(--primary); background: var(--surface-container-low); }
.vis-option--active,
.vis-option:has(.vis-radio:checked) {
  border-color: var(--primary);
  background: var(--surface-container-low);
}
.vis-option-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; }
.vis-option-label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--on-surface); }
.vis-option-desc { display: block; font-size: 0.78rem; color: var(--on-surface-subtle); margin-top: 0.1rem; }

/* ─── DOCS ─── */
.docs-toolbar {
  margin-bottom: 1rem;
}

.docs-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.doc-note-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 1rem;
  box-shadow: 0 6px 20px rgba(10, 10, 30, 0.04);
  padding: 1rem;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.doc-note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 10, 30, 0.08);
  border-color: rgba(37, 57, 212, 0.14);
}

.doc-note-card-top,
.doc-note-card-title-wrap,
.doc-note-card-footer,
.doc-form-meta {
  display: flex;
  align-items: center;
}

.doc-note-card-top,
.doc-note-card-footer {
  justify-content: space-between;
}

.doc-note-card-top {
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.doc-note-card-title-wrap {
  align-items: flex-start;
  min-width: 0;
}

.doc-note-card-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.35;
}

.doc-list-preview {
  font-size: 0.82rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
  min-height: 4.8em;
}

.doc-note-card-footer {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
}

.docs-empty-state {
  margin-top: 1rem;
}

.doc-list-time {
  font-size: 0.72rem;
  color: var(--on-surface-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.doc-show-card {
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border-radius: 1rem;
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 10px 24px rgba(10, 10, 30, 0.05);
  padding: 2rem;
  margin-top: 1.5rem;
}

.doc-show-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.74rem;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.doc-content {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--on-surface);
}

.doc-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem; }
.doc-content blockquote {
  border-left: 3px solid rgba(37, 57, 212, 0.3);
  padding-left: 1rem;
  color: var(--on-surface-subtle);
  margin: 1rem 0;
}
.doc-content ul, .doc-content ol { padding-left: 1.5rem; }
.doc-content a { color: #2539d4; }

/* Doc form */
.doc-form {
  margin-top: 1rem;
}

.doc-form-header {
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border-radius: 1rem;
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 8px 20px rgba(10, 10, 30, 0.04);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.doc-form-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.55rem;
}

.doc-title-input {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  border: none;
  outline: none;
  width: 100%;
  color: var(--on-surface);
  background: transparent;
  padding: 0;
  margin-bottom: 0.75rem;
}

.doc-title-input::placeholder {
  color: var(--on-surface-subtle);
  opacity: 0.5;
}

.doc-form-meta {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.doc-meta-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.doc-meta-select {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.8);
  color: var(--on-surface);
}

.doc-editor-wrap {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 8px 20px rgba(10, 10, 30, 0.04);
  overflow: hidden;
  margin-bottom: 1rem;
}

.doc-editor-tip {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  padding: 0.85rem 1rem 0;
}

.doc-editor-wrap trix-toolbar {
  background: rgba(248, 246, 240, 0.9);
  border-bottom: 1px solid rgba(26, 26, 46, 0.05);
  padding: 0.45rem 0.7rem 0.55rem;
}

.doc-editor-wrap trix-editor {
  min-height: 320px;
  padding: 1.25rem;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--on-surface);
  border: none;
}

.doc-editor-wrap trix-editor:focus {
  outline: none;
  box-shadow: none;
}

.doc-form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─── SHEETS (Spreadsheet Grid) ─── */
.sheet-grid-wrap {
  overflow-x: auto;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(10, 10, 30, 0.04);
}

.sheet-table {
  width: 100%;
  border-collapse: collapse;
}

.sheet-table thead th {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  padding: 0.6rem 0.75rem;
  text-align: left;
  background: rgba(240, 236, 250, 0.4);
  border-bottom: 1px solid rgba(26, 26, 46, 0.08);
  white-space: nowrap;
  user-select: none;
}

.sheet-cell {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.04);
  border-right: 1px solid rgba(26, 26, 46, 0.04);
  color: var(--on-surface);
  cursor: cell;
  min-width: 120px;
  height: 38px;
  vertical-align: middle;
  transition: background 0.1s;
}

.sheet-cell:hover {
  background: rgba(37, 57, 212, 0.03);
}

.sheet-cell:last-of-type {
  border-right: none;
}

.sheet-check {
  font-size: 1rem;
}

.sheet-cell-input {
  width: 100%;
  border: none;
  outline: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  color: var(--on-surface);
  background: rgba(37, 57, 212, 0.06);
  padding: 0.4rem 0.5rem;
  margin: -0.4rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 38px;
  box-sizing: border-box;
  border-radius: 0;
}

.sheet-cell-input:focus {
  background: rgba(37, 57, 212, 0.08);
  box-shadow: inset 0 0 0 2px #2539d4;
}

.sheet-actions-th {
  width: 36px;
}

.sheet-actions-td {
  width: 36px;
  text-align: center;
  border-bottom: 1px solid rgba(26, 26, 46, 0.04);
}

.sheet-row-delete {
  background: none;
  border: none;
  color: var(--on-surface-subtle);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  padding: 0.25rem;
}

tr:hover .sheet-row-delete {
  opacity: 1;
}

.sheet-row-delete:hover {
  color: #dc2626;
}

.sheet-table tbody tr:last-child td {
  border-bottom: none;
}

/* Sheet header */
.sheet-title-form {
  margin: 0;
}

.sheet-title-input {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--on-surface);
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  width: 100%;
  letter-spacing: -0.02em;
}

.sheet-title-input:focus {
  background: rgba(37, 57, 212, 0.04);
  border-radius: 0.35rem;
  padding: 0.15rem 0.35rem;
  margin: -0.15rem -0.35rem;
}

.sheet-header-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}

.sheet-action-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  background: rgba(255, 255, 255, 0.6);
  color: var(--on-surface);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
}

.sheet-action-btn:hover {
  background: rgba(37, 57, 212, 0.06);
  border-color: rgba(37, 57, 212, 0.2);
}

.sheet-action-btn--danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.15);
}

.sheet-action-btn--danger:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
}

/* Editable column headers */
.sheet-col-label-input {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  width: 100%;
  min-width: 60px;
}

.sheet-col-label-input:focus {
  color: var(--on-surface);
  background: rgba(37, 57, 212, 0.06);
  border-radius: 0.25rem;
  padding: 0.15rem 0.3rem;
  margin: -0.15rem -0.3rem;
}

/* Portfolio evidence */
.portfolio-evidence-group {
  margin-bottom: 1.5rem;
}

.portfolio-evidence-subject {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.portfolio-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.portfolio-evidence-card {
  background: var(--surface-lowest);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(60, 44, 0, 0.04);
  position: relative;
}

.portfolio-evidence-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--surface-container-low);
}

.portfolio-evidence-info {
  padding: 0.6rem 0.75rem;
}

.portfolio-evidence-title {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-evidence-meta {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  display: block;
  margin-top: 0.15rem;
}

.portfolio-evidence-type {
  font-weight: 600;
  text-transform: capitalize;
}

.portfolio-evidence-link {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  color: var(--primary);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.portfolio-evidence-card:hover .portfolio-evidence-link {
  opacity: 1;
}

/* Co-op resource folders */
.coop-resources-categorized {
  display: flex;
  flex-direction: column;
}

.coop-resource-category {
  border-bottom: 1px solid var(--outline-variant);
}

.coop-resource-category:last-child { border-bottom: none; }

.coop-resource-category summary {
  list-style: none;
}
.coop-resource-category summary::-webkit-details-marker { display: none; }

.coop-resource-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--on-surface-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.coop-resource-category-header:hover {
  background: var(--surface-container-low);
}

.coop-resource-category-count {
  font-size: 0.68rem;
  background: var(--surface-container);
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  color: var(--on-surface-subtle);
}

/* Google Drive Picker */
.gdp-trigger {
  border: 1px dashed var(--outline-variant);
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: var(--primary);
  transition: border-color 0.15s;
}

.gdp-trigger:hover {
  border-color: var(--primary);
}

.gdp-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(60, 44, 0, 0.12);
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
}

.gdp-dropdown[hidden] { display: none; }

.gdp-dropdown--up {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

.gdp-list {
  display: flex;
  flex-direction: column;
}

.gdp-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-container-low);
  transition: background 0.1s;
  width: 100%;
  font-family: inherit;
}

.gdp-file:last-child { border-bottom: none; }
.gdp-file:hover { background: var(--surface-container-low); }

.gdp-file-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.gdp-file-info {
  flex: 1;
  min-width: 0;
}

.gdp-file-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gdp-file-meta {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
  text-transform: capitalize;
}

.gdp-loading, .gdp-empty {
  padding: 1.25rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--on-surface-subtle);
}

.gdp-empty a {
  color: var(--primary);
  font-weight: 600;
}

.gdp-providers-row {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.gdp-provider-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  color: var(--on-surface-mid);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gdp-provider-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.gdp-provider-btn--active {
  background: var(--primary-container);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

/* ─── FILE VIEWER ─── */
.viewer {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4rem);
  background: var(--surface-lowest);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
}

.viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
  flex-shrink: 0;
}

.viewer-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.viewer-back {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.35rem;
  transition: color 0.15s, background 0.15s;
}

.viewer-back:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.viewer-filename {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--on-surface);
}

.viewer-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.viewer-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
}

.viewer-content {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
}

.viewer-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
}

.viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
}

.viewer-pdf {
  width: 100%;
  height: 100%;
  border: none;
}

.viewer-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.viewer-video-player {
  max-width: 100%;
  max-height: 100%;
  border-radius: 0.5rem;
}

.viewer-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--on-surface-subtle);
  background: var(--surface);
  border-radius: 1rem;
  text-align: center;
}

/* ─── NOTIFICATIONS ─── */

/* Bell icon in header */
.notif-bell {
  position: relative;
}

.notif-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--on-surface-subtle);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background 0.15s;
}

.notif-bell-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.notif-bell-btn .material-symbols-outlined {
  font-size: 22px;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--error, #dc2626);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-badge[hidden] { display: none; }

/* Dropdown */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 340px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: 0.75rem;
  box-shadow: 0 12px 36px rgba(60, 44, 0, 0.12);
  z-index: 500;
  overflow: hidden;
}

.notif-dropdown[hidden] { display: none; }

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.notif-dropdown-list {
  max-height: 320px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--surface-container-low);
}

.notif-item:last-child { border-bottom: none; }

.notif-item:hover {
  background: var(--surface-container-low);
}

.notif-item--unread {
  background: var(--primary-container);
  background: rgba(232, 180, 74, 0.08);
}

.notif-item-icon {
  font-size: 18px;
  color: var(--primary);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-text {
  font-size: 0.82rem;
  color: var(--on-surface);
  display: block;
  line-height: 1.4;
}

.notif-item-time {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
}

.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: 0.85rem;
}

.notif-dropdown-footer {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-top: 1px solid var(--surface-container-low);
}

.notif-dropdown-footer:hover {
  background: var(--surface-container-low);
}

/* Notifications page */
.notif-page-list {
  background: var(--surface-lowest);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(60, 44, 0, 0.04);
  overflow: hidden;
}

.notif-page-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.notif-page-item:last-child { border-bottom: none; }

.notif-page-item--unread {
  background: rgba(232, 180, 74, 0.06);
}

.notif-page-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-container-low);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-page-icon {
  font-size: 18px;
  color: var(--primary);
}

.notif-page-content {
  flex: 1;
  min-width: 0;
}

.notif-page-text {
  font-size: 0.88rem;
  color: var(--on-surface);
  line-height: 1.4;
}

.notif-page-meta {
  font-size: 0.75rem;
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
}

.notif-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.notif-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  color: var(--on-surface-subtle);
  font-size: 0.9rem;
  text-align: center;
}