:root {
  /* layout sizing tokens */
  --content-max-width: 1600px;
  --side-width: 320px;
  /* avatar initials should remain the same dark color even in dark mode */
  --avatar-initial: #2c3e50;
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-sidebar: #f5f5f5;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --border-color: #e0e0e0;
  --accent: #b3b3b3;
  --accent-hover: #b3b3b3;
  --shadow: rgba(0, 0, 0, 0.05);
  --shadow-hover: rgba(0, 0, 0, 0.1);
  /* surface variables for card and controls (used for dark mode overrides) */
  --surface: var(--bg-secondary);
  --surface-2: rgba(255, 255, 255, 0.92);
  --card-bg: var(--surface);
}

[data-theme="dark"] {
  --bg-primary: #07080a;
  /* much darker page base */
  --bg-secondary: #0f1113;
  /* darker container backgrounds */
  --bg-sidebar: #0b0b0d;
  /* darker sidebar */
  --text-primary: #e8e8e8;
  /* keep readable but slightly brighter */
  --text-secondary: #9aa0a6;
  /* subtle secondary tone */
  --border-color: #15171a;
  /* very dark borders */
  --accent: #9aa8ff;
  /* soft cool accent preserved */
  --accent-hover: #a7b6ff;
  --shadow: rgba(0, 0, 0, 0.6);
  --shadow-hover: rgba(0, 0, 0, 0.7);
  /* dark surfaces */
  --surface: rgba(10, 12, 14, 0.72);
  --surface-2: rgba(255, 255, 255, 0.02);
  --card-bg: var(--surface);
  /* keep avatar initials readable (same as light theme) */
  --avatar-initial: #2c3e50;
}

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

html,
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
  height: 100vh;
  overflow: auto;
}

/* Disable the page scroll on the teacher dashboard; each column will scroll internally */
body.teacher-dashboard {
  overflow: hidden;
}

/* Disable page-level scroll on index when class applied; keep internal column scrolling */
body.app-no-scroll {
  overflow: hidden;
}

/* Ensure the app container fits the viewport when page scrolling is disabled */
body.app-no-scroll .container {
  height: 100vh;
  min-height: 0;
  padding: 0.5rem 0.75rem 0.75rem 0.75rem;
  /* reduced top padding now header is removed; leave space for mini topbar */
  box-sizing: border-box;
  overflow: hidden;
}

/* When page scroll is disabled, ensure main content fills available space and manages its own scroll */
:root { --topbar-height: 72px; }

body.app-no-scroll .main-content {
  height: calc(100vh - var(--topbar-height));
  /* main content takes remaining viewport after compact topbar */
  overflow: hidden;
}

.container {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

/* Header */
.header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  width: 100%;
  /* use shared content width so header aligns with the dashboard grid */
  max-width: var(--content-max-width);
  margin: 1rem auto 0;
  box-sizing: border-box;
  border-radius: 14px 14px 0 0;
  background: var(--card-bg);
  border: 1px solid rgba(20, 20, 20, 0.04);
  position: relative;
  z-index: 100;
  /* keep header above main content to avoid overlays */
}

.logo {
  width: 175px;
  height: 50px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

/* Ensure header-like elements use Poppins for typographic consistency */
.logo,
.entry-preview,
.editor-date,
.entry-date,
.sidebar-header {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.logo img {
  width: 186px;
  height: auto;
  border-radius: 10px;
  float: left;
  margin-left: 1px;
  margin-top: 5px;
  margin-right: 20px;
  padding-left: 50px;
}

/* Subtle radial backing behind the logo for light / custom-light themes
   - Uses a pseudo-element on the image so the gradient is centered on the
     logo itself and does not affect layout or interactions. */
html[data-theme="light"] .header > .logo img,
html[data-theme="custom"]:not([data-custom-mode="dark"]) .header > .logo img {
  position: relative;
  z-index: 2;
  display: block;
}

html[data-theme="light"] .header > .logo img::before,
html[data-theme="custom"]:not([data-custom-mode="dark"]) .header > .logo img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  /* soft, low-opacity radial glow */
  background: radial-gradient(circle at center,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.32) 12%,
    rgba(0,0,0,0.14) 30%,
    transparent 70%);
  filter: blur(6px);
}

/* Top-left Scribblee menu button */
.mini-topbar {
  width: 100%;
  height: var(--topbar-height);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.mini-topbar-inner {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 8px 16px;
  display:flex; align-items:center; gap:12px;
}

.scribble-btn {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 330;
  width: 66px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 24px var(--shadow);
  cursor: pointer;
}
.scribble-btn img { width: 42px; height: 42px; display:block }

/* Slide-out drawer */
.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  max-width: 80%;
  background: var(--bg-secondary);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  transform: translateX(-102%);
  transition: transform 340ms cubic-bezier(.2,.9,.25,1);
  z-index: 300;
  padding-top: var(--topbar-height);
  display:flex;
  flex-direction:column;
}
.side-drawer.open { transform: translateX(0); }

.drawer-nav { display:flex; flex-direction:column; gap:8px; padding:12px; }
.drawer-item {
  display:flex; align-items:center; gap:10px; border:none; background:transparent; padding:12px; border-radius:8px; cursor:pointer; color:var(--text-primary); font-size:15px; text-align:left;
}
.drawer-item i { font-size:18px; color:var(--text-secondary); }
.drawer-item:hover { background: var(--surface); }

/* Drawer bottom area for logout */
.drawer-bottom { margin-top: auto; padding: 12px; border-top: 1px solid var(--border-color); }
.drawer-logout { width:100%; display:flex; align-items:center; gap:10px; justify-content:flex-start; }
.drawer-logout i { font-size:20px; color:var(--text-secondary); }

/* Overlay shown when drawer is open */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 280;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }


.header-buttons {
  margin-left: auto;
}

/* Ensure header buttons layout is stable and buttons don't overlap */
.header-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  /* keep it on the right */
}

/* Prevent account card from growing and covering adjacent controls */
.account-card {
  flex: 0 0 auto;
  max-width: 340px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  z-index: 200;
  /* ensure account card sits above theme toggle and other UI */
}

/* Ensure theme toggle sits above nearby elements so clicks hit it reliably */
.theme-toggle {
  position: relative;
  z-index: 150;
  /* keep toggle above main content but below account card */
}

.theme-toggle {
  background-color: var(--surface);
  color: var(--text-primary);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 14px;
}

.theme-toggle:hover {
  background-color: var(--accent-hover);
  transform: translateY(-1px);
}

/* Main Content */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: 100vh;
  /* make main content fill the viewport */
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  /* allow inner children to control scrolling */
}

/* Sidebar */
.sidebar {
  width: 280px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s;
}

/* Expand sidebar on desktop (PC) by 50px */
@media (min-width: 769px) {
  .sidebar {
    width: 330px;
    /* 280 + 50 */
  }
}

.sidebar-header {
  /* match toolbar padding so the bottom border lines up perfectly */
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-toggle {
  width: 53px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 6px 18px var(--shadow);
}

.search-toggle i,
.search-toggle box-icon {
  font-size: 18px;
}

/* Icon color should follow theme text color; in dark mode make it white for contrast */
.search-toggle i,
.search-toggle .bxr {
  color: var(--text-primary);
  transition: color 200ms ease;
}

[data-theme="dark"] .search-toggle i,
[data-theme="dark"] .search-toggle .bxr,
[data-theme="dark"] .search-toggle box-icon {
  color: #fff;
}


.search-expand {
  position: absolute;
  top: 56px;
  /* below header-actions row */
  left: 8px;
  width: 220px;
  /* hidden by scaling to 0; keeps it out of layout and animatable */
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(.2, .9, .2, 1), opacity 160ms ease;
  z-index: 40;
}

.search-expand.open {
  transform: scaleX(1);
  opacity: 1;
  pointer-events: auto;
}

/* make the expanding search overlap the new-entry button visually */
.search-expand .search-box {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 60;
}

.search-toggle.open {
  background: var(--surface-2);
}

.search-toggle .bxr {
  transition: transform 300ms ease;
}

.search-toggle.open .bxr.rotate {
  transform: rotate(90deg);
}

.new-entry-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--accent);
  color: white;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: background-color 0.3s;
}

.new-entry-btn:hover {
  background-color: var(--accent-hover);
}

/* Delete icon styling: follow theme colors */
.delete-entry-btn i.bxr,
.delete-entry-btn .bxr {
  color: var(--text-secondary);
  transition: color 180ms ease;
}

[data-theme="dark"] .delete-entry-btn i.bxr,
[data-theme="dark"] .delete-entry-btn .bxr {
  color: #fff;
}

/* Student avatar: keep white circle and initials using text-primary so they don't turn white in dark mode */
.student-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-right: 8px;
  border: 1px solid var(--border-color);
}

.student-avatar .initial {
  color: var(--avatar-initial);
}

.search-box {
  margin-top: 1rem;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary);
  font-size: 14px;
}

.entries-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.entry-item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: var(--bg-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.entry-item:hover {
  box-shadow: 0 2px 8px var(--shadow-hover);
}

.entry-item.active {
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--shadow-hover);
}

.entry-date {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.entry-preview {
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Editor */
.editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-secondary);
}

.toolbar {
  display: flex;
  gap: 1.6rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  align-items: center;
}

.toolbar-btn {
  padding: 0.5rem 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-primary);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
}

.toolbar-btn:hover {
  background-color: var(--accent);
  color: white;
  border-color: var(--accent);
}

.toolbar-btn.active {
  background-color: var(--accent);
  color: white;
  border-color: var(--accent);
}

.toolbar-separator {
  width: 1px;
  height: 24px;
  background-color: var(--border-color);
  margin: 0 0.5rem;
}

.editor-area {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
}

/* Ensure these two main columns on index.html scroll independently of the page */
.entries-list {
  /* Limit to viewport height minus header and top/bottom chrome */
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.editor-area {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.editor-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-primary);
  width: 100%;
  outline: none;
}

/* Ensure the editor title uses Poppins explicitly */
.editor-title {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
}

/* Title input placeholder should look like the editor content placeholder */
.editor-title::placeholder {
  color: var(--text-secondary);
  font-style: italic;
}

/* Prevent title from clipping on small screens: allow wrapping and multi-line */
.editor-title {
  white-space: normal;
  overflow-wrap: break-word;
}

/* List indentation inside editor to avoid clipping on mobile */
.editor-content ul,
.editor-content ol {
  padding-left: 1.25rem;
  /* standard indent */
  margin-left: 0.5rem;
}

/* Make the title slightly smaller on narrow screens and allow two lines comfortably */
@media (max-width: 480px) {
  .editor-title {
    font-size: 22px;
  }
}

/* Slightly smaller title on very small screens */
@media (max-width: 360px) {
  .editor-title {
    font-size: 18px;
  }
}

.editor-date {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;

  /* Move header controls into the sidebar on mobile */
  .sidebar-mobile-header {
    display: none;
  }

  @media (max-width: 768px) {

    /* hide the top header on small screens */
    header.header {
      display: none !important;
    }

    .sidebar-mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0.75rem 1rem;
      background: var(--surface);
      border-bottom: 1px solid var(--border-color);
    }

    .sidebar-mobile-header .logo {
      width: auto;
      height: auto;
      margin: 0;
    }

    .sidebar-mobile-header .logo img {
      width: 140px;
      height: auto;
      margin: 0;
      padding: 0;
      float: none;
    }

    .sidebar-mobile-header .header-buttons {
      margin-left: 0;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .sidebar-divider {
      height: 1px;
      background: var(--border-color);
      margin: 0;
    }
  }
}

.editor-content {
  min-height: 300px;
  font-size: 16px;
  line-height: 1.6;
  outline: none;
  color: var(--text-primary);
}

/* Ensure editor content wraps and long words can break instead of forcing
   the container to grow horizontally. Also allow flex children to shrink. */
.editor-area,
.editor-content {
  min-width: 0;
}

.editor-content {
  white-space: pre-wrap;
  /* respect newlines and wrap long lines */
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  width: 100%;
}

/* Firefox sometimes requires stronger breaking rules for very long
   unbroken strings. Allow breaking anywhere if needed to avoid expanding
   the editor horizontally. */
.editor-content {
  word-break: break-word;
  /* aggressive fallback for very long tokens */
  word-break: break-all;
  overflow-wrap: anywhere;
}

.editor-content:focus {
  outline: none;
}

/* Editor heading sizes: H3 = smallest, H2 = medium, H1 = largest */
.editor-content h3 {
  font-size: 18px;
  /* smallest heading */
  font-weight: 600;
  line-height: 1.3;
  margin: 0.6rem 0;
}

.editor-content h2 {
  font-size: 22px;
  /* medium heading */
  font-weight: 600;
  line-height: 1.3;
  margin: 0.65rem 0;
}

.editor-content h1 {
  font-size: 30px;
  /* largest heading */
  font-weight: 600;
  line-height: 1.2;
  margin: 0.75rem 0;
}

/* Placeholder text inside editor */
.editor-content .placeholder-text {
  color: #9aa0a6;
  /* gray */
  font-style: italic;
}

/* Status Bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  background-color: var(--surface);
  border-top: 1px solid var(--border-color);
  font-size: 13px;
  color: var(--text-secondary);
}

.save-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.save-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #27ae60;
}

.offline-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.offline-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #27ae60;
  display: inline-block;
}

.offline-indicator.offline .dot {
  background: #e74c3c;
}

.offline-indicator .label {
  font-size: 13px;
  color: var(--text-secondary);
}

.local-save-badge {
  margin-left: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 999px;
  border: 1px solid var(--border-color);
}

.local-save-badge.offline {
  background: rgba(231, 76, 60, 0.08);
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.12);
}

/* Mobile Toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 2rem;
  left: 1rem;
  background-color: var(--accent);
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 4px 12px var(--shadow-hover);
}

/* Overlay shown when sidebar is open on mobile to capture taps */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* top:0;right:0;bottom:0;left:0 */
  background: rgba(0, 0, 0, 0.32);
  /* place overlay above toolbar/status and other UI, but below the sidebar */
  z-index: 1099;
  transition: opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Confirmation dialog (small rectangle) used for delete confirmations */
.confirm-overlay {
  position: fixed;
  inset: 0;
  display: block;
  /* increase z-index so confirm sits above all other overlays (drawers, modals) */
  z-index: 99999;
  pointer-events: none;
  /* enable only the popup to receive events */
}

.confirm-overlay[aria-hidden="false"] {
  pointer-events: auto;
}

.confirm-overlay[aria-hidden="true"] .confirm-rect {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  visibility: hidden;
}

.confirm-overlay[aria-hidden="false"] .confirm-rect {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition: opacity 180ms ease, transform 200ms cubic-bezier(.2, .9, .2, 1);
}

/* Settings modal styles */
.settings-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.12);
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.settings-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.settings-modal {
  width: 420px;
  max-width: calc(100% - 32px);
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-6px) scale(.995);
  transition: transform 220ms cubic-bezier(.2, .9, .2, 1), opacity 180ms ease;
}

.settings-overlay[aria-hidden="false"] .settings-modal {
  transform: translateY(0) scale(1);
}

.settings-modal .settings-close.top {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--text-secondary);
}

.settings-modal .settings-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px
}

.settings-modal .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.settings-modal .setting-label {
  color: var(--text-primary);
  font-size: 14px
}

.settings-modal .setting-toggle .bx {
  font-size: 40px
}

/* Emphasize New Entry button per theme so it stands out */
.new-entry-btn {
  transition: background-color 220ms ease, box-shadow 220ms ease, color 220ms ease;
}

/* Dark: make button lighter to pop against dark background */
[data-theme="dark"] .new-entry-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.02) inset;
}

[data-theme="dark"] .new-entry-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 255, 255, 0.03) inset;
}

/* Light: make button slightly darker to stand out from light surfaces */
[data-theme="light"] .new-entry-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--text-primary) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .new-entry-btn:hover {
  background: rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.12);
}

/* Custom: use card-bg so it respects custom translucency but still stands out */
[data-theme="custom"] .new-entry-btn {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

[data-theme="custom"] .new-entry-btn:hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

/* Starry: add a subtle glow to the edges */
[data-theme="starry"] .new-entry-btn {
  background: linear-gradient(180deg, rgba(40, 50, 70, 0.96), rgba(20, 30, 50, 0.96));
  color: #fff !important;
  border-color: rgba(180, 200, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(18, 28, 48, 0.5), 0 0 18px rgba(120, 155, 255, 0.08);
}

[data-theme="starry"] .new-entry-btn:hover {
  box-shadow: 0 10px 28px rgba(18, 28, 48, 0.6), 0 0 28px rgba(120, 155, 255, 0.18);
  transform: translateY(-3px) scale(1.02);
}

.confirm-rect {
  position: absolute;
  /* will be positioned by JS relative to viewport */
  width: 220px;
  max-width: calc(100% - 24px);
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  pointer-events: auto;
  /* allow clicks inside */
  /* ensure the confirm box renders above everything inside the overlay */
  z-index: 100000;
}

.confirm-close {
  position: absolute;
  right: 8px;
  top: 6px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}

.confirm-message {
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  font-size: 14px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Color palette used by color/highlight popups */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px 4px;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.color-swatch.selected { outline: 3px solid var(--accent); }

/* 'None' swatch box to clear styles */
.color-swatch.none-swatch {
  width: 36px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-image: linear-gradient(45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.03) 50%, rgba(0,0,0,0.03) 75%, transparent 75%, transparent);
  background-size: 8px 8px;
  position: relative;
}
.color-swatch.none-swatch::after {
  content: '×';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-secondary);
  font-weight: 700;
}

.confirm-btn {
  width: 40px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.confirm-ok {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    /* ensure the sidebar sits above the overlay */
    z-index: 1100;
    margin-left: -280px;
  }

  /* Make the sidebar opaque on mobile so it doesn't show through or blur content */
  .sidebar {
    background-color: var(--bg-sidebar) !important;
    backdrop-filter: none !important;
    border-right: 1px solid var(--border-color);
  }

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

  .sidebar-toggle {
    display: block;
  }

  /* Make the main editor container fill the whole viewport on mobile
     - fixed inset so it covers the screen
     - remove left/right/bottom padding, add top padding +24px per request
  */
  /* Mobile toolbar/status sizing variables */
  :root {
    --mobile-toolbar-height: 64px;
    --mobile-status-height: 56px;
  }

  .editor-container {
    /* Sit between the fixed toolbar (top) and fixed status bar (bottom) */
    position: fixed;
    top: var(--mobile-toolbar-height);
    left: 0;
    right: 0;
    bottom: var(--mobile-status-height);
    padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
    /* small breathing room under toolbar */
    padding-bottom: 12px;
    /* breathing room above status bar */
    box-sizing: border-box;
    z-index: 200;
    background: var(--card-bg);
    overflow: hidden;
    /* inner areas manage scrolling */
  }

  .editor-area {
    padding: 1rem;
  }

  /* When no text is selected on mobile, hide formatting and heading buttons
     Keep undo/redo, lists, and alignment visible at all times. */
  body:not(.selection-active) .toolbar-btn[onclick*="formatText('bold')"],
  body:not(.selection-active) .toolbar-btn[onclick*="formatText('italic')"],
  body:not(.selection-active) .toolbar-btn[onclick*="formatText('underline')"],
  body:not(.selection-active) .toolbar-btn[onclick*="toggleHeading('h1')"],
  body:not(.selection-active) .toolbar-btn[onclick*="toggleHeading('h2')"],
  body:not(.selection-active) .toolbar-btn[onclick*="toggleHeading('h3')"],
  body:not(.selection-active) .toolbar-separator.sep-format,
  body:not(.selection-active) .toolbar-separator.sep-headings {
    display: none !important;
  }
}

/* Mobile-specific toolbar: pin to bottom, horizontally scrollable like mobile word editors */
@media (max-width: 768px) {
  /* Hide the original (desktop-style) toolbar on mobile; we will
     present a floating, context-aware toolbar instead. */
  .toolbar { display: none !important; }

  /* Make each toolbar button a fixed-size inline block so they flow horizontally */
  .toolbar-btn {
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    scroll-snap-align: start;
    /* snap alignment for touch scroll */
  }

  /* Ensure editor content isn't hidden behind the fixed toolbar */
  .editor-area {
    /* provide room for toolbar and status bar using variables */
    padding-top: calc(var(--mobile-toolbar-height, 64px) + 12px);
    padding-bottom: calc(var(--mobile-status-height, 56px) + 12px);
  }

  /* Slightly reduce toolbar separators and spacing for small screens */
  .toolbar-separator {
    display: inline-block;
    height: 28px;
    margin: 0 0.35rem;
    vertical-align: middle;
  }
}

/* Put the status bar fixed to the bottom on mobile so it remains visible */
@media (max-width: 768px) {
  .status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mobile-status-height, 56px);
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    box-sizing: border-box;
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* -----------------------------
   Poppins-inspired UI overrides
   (soft card-like visuals inspired by provided login stylesheet)
   ----------------------------- */

/* Light: remove polka/tiled background pattern */
@media (prefers-color-scheme: light) {
  html,
  body {
    background-image: none;
    background-size: auto;
  }
}

/* Center the app inside a soft framed card */
.container {
  align-items: center;
  /* center horizontally */
  padding: 2rem;
  height: auto;
  min-height: 100vh;
  background: transparent;
}

.main-content {
  width: 100%;
  /* align main content with header and teacher grid */
  max-width: var(--content-max-width);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(20, 20, 20, 0.06);
  border: 1px solid rgba(20, 20, 20, 0.04);
  overflow: hidden;
  margin: 1rem 0;
  background: var(--card-bg);
}

/* Round the header corners to match the card */
.header {
  border-radius: 14px 14px 14px 14px;
  padding: 1rem 1.25rem;
}

/* Softened sidebar */
.sidebar {
  background-color: var(--surface);
  backdrop-filter: blur(6px);
  border-right: none;
  padding-bottom: 1rem;
}

.sidebar-header {
  padding: 0.865rem;
}

.entries-list {
  padding: 0.75rem;
}

.entry-item {
  border-radius: 12px;
  border: 1px solid rgba(20, 20, 20, 0.04);
  background-color: var(--surface-2);
}

.entry-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(20, 20, 20, 0.06);
}

/* Pills and rounded inputs */
.new-entry-btn,
.toolbar-btn,
.theme-toggle,
.sidebar-toggle {
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 20, 20, 0.06);
  border: 1px solid rgba(20, 20, 20, 0.06);
  background: var(--surface);
  color: var(--text-primary);
}

.new-entry-btn:hover,
.toolbar-btn:hover,
.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.08);
}

/* Theme toggle icon and label styling */
.theme-toggle i {
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 8px;
  color: var(--text-primary);
  transition: color 0.2s, transform 0.12s;
}

.theme-toggle .theme-label {
  font-size: 14px;
  vertical-align: middle;
  color: var(--text-primary);
}

.theme-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
  /* subtle focus ring */
}

.theme-toggle:hover i {
  transform: translateY(-1px);
}

/* visually-hidden helper (keeps text for screen readers) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Bigger circular theme button (icon-only) */
.theme-toggle {
  padding: 0.6rem;
  /* increase hit area */
  width: 80px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 18px;
}

.theme-toggle i {
  margin: 0;
  /* no label, so remove gap */
}

/* Account card in header */
.account-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.account-card i {
  font-size: 18px;
}

.account-card .account-text {
  font-size: 14px;
}

.account-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.06);
}

.account-card:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

/* Make the appearance button visually match the account button */
.appearance-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.45rem 0.75rem;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}

.appearance-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

@media (max-width: 1600px) {
  .account-card .account-text {
    display: none;
  }
}

.search-box,
.editor-title,
.input-box input {
  border-radius: 40px;
  border: 1px solid rgba(20, 20, 20, 0.06);
  padding: 0.6rem 1rem;
  background: var(--surface);
}

/* Rectangular rounded button matching design language (used in profile modal) */
.btn-rect {
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.04);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.btn-rect:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.06);
  background: var(--surface-2);
}

/* Styled select inputs using the section-title design language */
.select-wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.section-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: box-shadow 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.section-select:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.select-chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary);
  transition: transform 180ms ease, color 120ms ease;
}

.section-select:focus+.select-chev {
  color: var(--accent);
  transform: translateY(-50%) rotate(180deg);
}

/* Watermark styling (non-interactive) */
.app-watermark {
  position: fixed;
  left: 12px;
  bottom: 12px;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
  z-index: 1400;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

/* Small toast used to confirm appearance changes */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: var(--surface);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.12);
  border: 1px solid var(--border-color);
  z-index: 1600;
  opacity: 0;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.2, .9, .2, 1);
  font-size: 13px;
}

.app-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


.editor-area {
  padding: 1.5rem;
}

.editor-container {
  background: var(--card-bg);
}

.status-bar {
  border-radius: 0 0 14px 14px;
  border-top: 1px solid rgba(20, 20, 20, 0.03);
}

/* Reduce visual noise on mobile */
@media (max-width: 768px) {
  .main-content {
    box-shadow: none;
    border: none;
    border-radius: 0;
  }

  .sidebar {
    background-color: var(--bg-sidebar);
    backdrop-filter: none;
  }
}

/* Dark theme overrides */
[data-theme="dark"] {
  --shadow-hover: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .main-content {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  /* use the shared border color and card background variable so dark mode follows theme variables */
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}

[data-theme="dark"] .sidebar {
  /* sidebar should use the surface variable so it responds to theme changes */
  background-color: var(--surface);
  backdrop-filter: none;
}

[data-theme="dark"] .entry-item {
  /* entry items use the light/dark surface token and the shared border color */
  background-color: var(--surface-2);
  border: 1px solid var(--border-color);
}

/* Small helper: slightly larger click targets */
.toolbar-btn,
.new-entry-btn {
  min-width: 44px;
  min-height: 40px;
}

/* ----------------------
   Teacher Dashboard styles
   ---------------------- */
.teacher-wrapper {
  width: 100%;
  /* align with header using shared content width */
  max-width: var(--content-max-width);
  margin: 1.5rem auto;
  display: grid;
  /* sidebar | entries list | entry view (right column fluid) */
  grid-template-columns: var(--side-width) var(--side-width) 1fr;
  gap: 1rem;
}

/* Make the teacher dashboard a fixed-height grid so columns can scroll independently */
.teacher-wrapper {
  /* reserve space for header + margins; using calc keeps it responsive */
  height: calc(100vh - 180px);
  min-height: 520px;
  overflow: hidden;
  /* prevent page scroll inside this area */
}

.teacher-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.25rem;
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 24px var(--shadow);
}

.teacher-header i {
  font-size: 22px;
}

.teacher-header .teacher-name {
  font-weight: 700;
  font-size: 18px;
}

.teacher-sidebar {
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.75rem;
  /* allow this column to scroll internally */
.mini-topbar {
  width: 100%;
  height: var(--topbar-height);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-bottom: 8px;
  position: relative;
  z-index: 320; /* keep above drawer overlay so menu button remains clickable */
}
.mini-topbar-inner {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 8px 16px;
  display:flex; align-items:center; gap:12px;
}
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.section-title:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.section-body {
  overflow: hidden;
  transition: max-height 220ms cubic-bezier(.2, .9, .2, 1), opacity 160ms ease;
  opacity: 1;
}

.section.collapsed .section-body {
  max-height: 0 !important;
  opacity: 0 !important;
}

/* Chevron icon on the right: visible on hover/focus of the title */
.section-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: transform 220ms ease, color 160ms ease, opacity 180ms ease;
  opacity: 0;
}

.section-title:hover .section-chev,
.section-title:focus .section-chev,
.section.chev-visible .section-chev {
  opacity: 1;
}

.section.collapsed .section-chev {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Make student list collapse/expand feel responsive: per-item spacing inside section body */
.section-body .student-item {
  padding: 8px;
}

.student-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.student-item:hover {
  background: var(--surface-2);
}

.student-item.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
  border: 1px solid rgba(99, 102, 241, 0.14);
}

.teacher-main {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  /* match sidebar/entry-view heights so columns align */
  min-height: 0;
  height: 100%;
  max-width: var(--side-width);
  overflow-y: auto;
  /* enable internal scrolling */
}

.entry-view {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  /* match sidebar/teacher-main heights */
  min-height: 0;
  height: 100%;
  /* Use column flex so content scrolls independently while comment footer stays fixed */
  display: flex;
  flex-direction: column;
}

.entry-view .meta {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 0.75rem;
}

.entry-view .meta .ts {
  background: var(--surface);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.entry-view .entry-content {
  margin-top: 12px;
  color: var(--text-primary);
  line-height: 1.55;
  flex: 1 1 auto;
  overflow-y: auto;
}

.entry-view .entry-content h1 {
  font-size: 20px;
  margin: 0.6rem 0;
}

.entry-view .entry-content h2 {
  font-size: 18px;
  margin: 0.5rem 0;
}

.entry-view .entry-content h3 {
  font-size: 16px;
  margin: 0.4rem 0;
}

.entry-view .entry-content p {
  margin: 0.5rem 0;
}

.entry-view .entry-content ul,
.entry-view .entry-content ol {
  margin: 0.5rem 0 0.5rem 1.1rem;
}

.entry-view .entry-content .align-left {
  text-align: left;
}

.entry-view .entry-content .align-center {
  text-align: center;
}

.entry-view .entry-content .align-right {
  text-align: right;
}


.student-detail h2 {
  margin-top: 0;
}

.student-entries {
  margin-top: 0.75rem;
}

.student-entry {
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 0.6rem;
  background: var(--surface);
}

/* Ensure student entry text wraps and long words break instead of overflowing */
.student-entry {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .teacher-wrapper {
    grid-template-columns: 1fr;
  }

  .teacher-sidebar {
    height: auto;
  }
}

/* Ensure sidebar entries list and editor area are scrollable
   - Use flex children with `min-height: 0` so overflow works inside flex containers
   - Make entries list and editor content fill available space and scroll independently
*/
.main-content {
  /* allow inner flex children to shrink and show their own scrollbars */
  min-height: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* important for child overflow to work in flex layout */
}

.entries-list {
  flex: 1 1 auto;
  min-height: 0;
  /* allow the element to shrink inside the sidebar */
  overflow-y: auto;
  /* show scrollbar when entries overflow */
}

.editor-container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* allow children to provide their own scrolling */
}

.editor-area {
  flex: 1 1 auto;
  min-height: 0;
  /* allow inner editor-content to scroll */
  overflow: hidden;
  /* keep scrolling inside .editor-content */
  display: flex;
  flex-direction: column;
}

.editor-content {
  flex: 1 1 auto;
  min-height: 0;
  /* let this element be scrollable inside flex */
  overflow-y: auto;
  /* show scrollbar when entry content is long */
}

/* Optional: ensure list and editor show native scrollbars on Windows/Chrome */
.entries-list::-webkit-scrollbar,
.editor-content::-webkit-scrollbar {
  width: 10px;
}

.entries-list::-webkit-scrollbar-thumb,
.editor-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 6px;
}

/* Profile modal */
.profile-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 15, 0.35);
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.profile-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.profile-modal {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 18px;
  width: 360px;
  max-width: calc(100% - 36px);
  box-shadow: 0 12px 40px rgba(20, 20, 20, 0.12);
  border: 1px solid var(--border-color);
  position: relative;
}

.profile-modal .profile-close {
  position: absolute;
  right: 12px;
  top: 8px;
  background: transparent;
  border: 0;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
}

.profile-modal .profile-body {
  position: relative;
}

.profile-modal h3 {
  margin: 0 0 8px 0;
}

/* Comments UI */
.comment-footer {
  border-top: none;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  /* vertically center controls next to textarea */
  background: var(--surface);
}

/* When comments are hidden via the toggle, hide the comments list and input
   but keep the footer visible so the toggle remains accessible. Center the
   remaining footer controls (toggle + any compact actions). */
.entry-view.comments-hidden .comment-list {
  display: none !important;
}

.entry-view.comments-hidden .comment-textarea {
  display: none !important;
}

.entry-view.comments-hidden .comment-actions> :not(.comment-floating-toggle) {
  display: none !important;
}

/* Mobile header spacing fixes: keep branding separate from profile and actions
   Treat the logo + app title as a distinct top block and push user/actions below.
   These rules only affect screens up to 768px (mobile). */
@media (max-width: 768px) {
  .sidebar-mobile-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px;
    box-sizing: border-box;
    z-index: 1150; /* ensure header sits above other UI */
  }

  /* Logo area becomes a compact row with stacked app title beside the icon */
  .sidebar-mobile-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* Override desktop negative margins so the image doesn't shift in mobile */
  .sidebar-mobile-header .logo img {
    width: 56px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border-radius: 8px;
  }

  /* Stacked brand text to the right of the icon (keeps two-line layout)
     Use the Poppins font and bold weight to match branding. */
  .sidebar-mobile-header .logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    margin-left: 4px;
  }

  /* Put profile/account controls and action buttons into their own row below branding */
  .sidebar-mobile-header .header-buttons,
  .sidebar-mobile-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding-top: 6px;
    border-top: 0; /* keep visual separation clean */
    justify-content: flex-start;
  }

  /* Ensure the search toggle and new entry button don't expand to full width on mobile header
     (they retain their pill shape but are pushed lower than the branding block). */
  .sidebar-mobile-header .search-toggle,
  .sidebar-mobile-header .new-entry-btn {
    flex: 0 0 auto;
  }

  /* Slightly increase spacing on very small screens to avoid compression */
  @media (max-width: 420px) {
    .sidebar-mobile-header { gap: 12px; padding-top: 14px; padding-bottom: 12px; }
    .sidebar-mobile-header .logo-text { font-size: 14px; }
  }
}

.entry-view.comments-hidden .comment-actions {
  justify-content: center;
}

.comment-toggle-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.comment-toggle-btn:hover {
  background: var(--surface-2);
}

.comment-textarea {
  flex: 1;
  min-height: 40px;
  /* a little shorter by default */
  max-height: calc(1.45em * 6 + 18px);
  /* allow up to ~6 lines before scrolling */
  resize: none;
  /* auto-resize handled by JS */
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  overflow-y: auto;
}

.comment-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.comment-btn {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.comment-btn.primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
}

.comment-list {
  /* height set dynamically by JS based on comment count (up to 4 visible) */
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 18px var(--shadow);
}

.comment-list.scrollable {
  overflow-y: auto;
}

.comment-item {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--avatar-initial);
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
}

.comment-author {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
}

.comment-time {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

.comment-text {
  margin-top: 6px;
  color: var(--text-primary);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.comment-delete {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}

.comment-delete:hover {
  color: var(--accent);
}

/* Reply UI for student replies */
.comment-reply-btn {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  font-size: 13px;
}

.comment-reply-btn:hover {
  color: var(--accent);
}

.comment-reply-box {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.comment-reply-input {
  flex: 1;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 14px;
}

.comment-reply-actions {
  display: flex;
  gap: 8px;
}

.comment-reply-actions .btn-rect,
.comment-reply-actions .new-entry-btn {
  height: 36px;
  padding: 6px 12px;
}

.comment-reply-nested {
  margin-top: 8px;
  margin-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-reply-nested .comment-item {
  background: var(--surface);
  padding: 8px;
  border-radius: 8px;
}

/* Bottom reply bar: large textarea anchored to modal bottom */
.comment-reply-bottom {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.comment-reply-bottom .comment-reply-textarea {
  flex: 1;
  min-height: 68px;
  max-height: 240px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 15px;
  resize: vertical;
}

.reply-send-small {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reply-close-small {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.reply-close-small:hover {
  color: var(--accent);
}

/* Inline reply row under a comment */
.comment-reply-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  margin-left: 6px;
}

.comment-reply-icon {
  width: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.comment-reply-wrap .comment-item {
  flex: 1;
  margin: 0;
}

/* Force rotate the reply icon 180deg for consistent display */
.comment-reply-icon i {
  transform: rotate(180deg);
  display: inline-block;
}

/* Notification button in header */
.notification-btn {
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.notification-btn:hover {
  background: var(--surface);
}

.notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 12px;
}

.notif-list {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
}

.notif-item {
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.notif-item .notif-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.notif-item .notif-text {
  margin-top: 6px;
  color: var(--text-primary);
}

.notif-link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex: 1;
}

.notif-unread {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Notification modal overlay */
.notif-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 64px;
  background: rgba(10, 12, 15, 0.45);
  z-index: 2000;
}

.notif-modal {
  width: 420px;
  max-width: calc(100% - 36px);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
  max-height: 80vh;
  overflow: hidden;
}

.notif-modal h3 {
  margin: 0 0 8px 0;
}

.notif-modal .notif-close {
  position: absolute;
  right: 18px;
  top: 14px;
  background: transparent;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}

.notif-highlight {
  outline: 3px solid rgba(255, 200, 60, 0.16);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 200, 60, 0.02));
}

/* Floating bottom-right toggle for comments (used by teachers) */
.comment-floating-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  cursor: pointer;
}

.comment-floating-toggle i,
.comment-floating-toggle svg {
  font-size: 18px;
  line-height: 1;
}

.comment-floating-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

/* Comments modal for students viewing comments */
.comments-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 15, 0.45);
  z-index: 1350;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.comments-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.comments-modal {
  width: 520px;
  max-width: calc(100% - 36px);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.comments-modal .comments-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-color);
}

.comments-modal .comments-body {
  padding: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Status bar comment toggle (student view) adjustments */
.status-bar .comment-floating-toggle.comments-open-btn {
  position: relative;
  /* for badge positioning */
  margin-left: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Small numeric badge shown at top-left of comment toggle */
.comment-count-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--surface);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  display: inline-block;
  min-width: 20px;
  text-align: center;
}

/* Make the created/modified/wordcount lines sit horizontally */
.entry-meta-dates {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.entry-meta-dates>div {
  font-size: 13px;
  color: var(--text-secondary);
}

.entry-meta-dates .ts {
  background: var(--surface);
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.comments-open-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 18px;
  padding: 6px 8px;
  border-radius: 8px;
}

.comments-open-btn:hover {
  background: var(--surface);
}

/* Account menu (small dropdown anchored to account button) */
.account-menu {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12);
  min-width: 160px;
  /* sit above the sidebar overlay so profile/logout remain clickable */
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
}

/* Ensure the account menu appears above overlays */
.account-menu {
  z-index: 99999;
  position: absolute; /* allow JS to set top/left while CSS ensures stacking */
}

.account-menu.visible {
  display: flex;
}

/* Make menu items look like native UI buttons */
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-weight: 700;
  cursor: pointer;
}

.account-menu-item i {
  font-size: 18px;
  color: var(--text-secondary);
}

.account-menu-item span {
  line-height: 1;
}

.account-menu-item:hover {
  background: var(--surface-2);
}

/* Notification button in header */
.notif-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
}
.notif-btn i { font-size: 18px; }
.notif-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  margin-left: 6px;
}
.notif-btn.has-unread i.bx-tada { /* keep animation visible */ }

/* Notification drawer */
.notif-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 12000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.notif-drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.notif-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  max-width: 100%;
  background: var(--surface);
  box-shadow: -16px 0 32px rgba(0,0,0,0.32);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.2,.8,.2,1);
  z-index: 12001;
  display: flex;
  flex-direction: column;
}
.notif-drawer.visible {
  transform: translateX(0%);
}
.notif-drawer .drawer-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.notif-drawer .drawer-body {
  padding: 12px 12px 24px 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  display:flex;flex-direction:column;gap:8px;
}
.notif-empty { color:var(--text-secondary); padding:12px }

/* Force opaque drawer background for clarity */
:root[data-theme="dark"] .notif-drawer {
  background-color: rgba(12,12,12,0.98) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .notif-drawer {
  background-color: rgba(255,255,255,0.98) !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}
.notif-item { cursor:pointer }
.notif-item.notif-unread { background: var(--surface-2); border-radius:8px }
.notif-item.notif-deleted { opacity: 0.6; }
.notif-clear-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
}
.notif-clear-btn:hover { color: var(--text-primary); }

/* Force opaque background for the account menu depending on theme */
:root[data-theme="dark"] .account-menu {
  background-color: rgba(12,12,12,0.98) !important;
  color: var(--text-primary);
  backdrop-filter: none !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .account-menu {
  background-color: rgba(255,255,255,0.98) !important;
  color: var(--text-primary);
  backdrop-filter: none !important;
  opacity: 1 !important;
}

.account-menu-item:hover {
  background: var(--surface-2);
}

/* Inline settings panel inside account menu */
.account-settings {
  margin-top: 6px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
}

.settings-title {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px
}

.settings-close {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px
}

.setting-label {
  font-size: 13px;
  color: var(--text-primary);
  max-width: 160px
}

.setting-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px
}

.setting-toggle .bx {
  font-size: 22px;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2, .9, .2, 1);
  color: var(--text-primary);
  line-height: 1
}

.toggle-fade-in {
  animation: toggleFade 200ms ease;
}

@keyframes toggleFade {
  from {
    opacity: 0;
    transform: scale(.92)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

/* Appearance customization modal + cards */
.appearance-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 15, 0.45);
  z-index: 1300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.appearance-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.appearance-modal {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 18px;
  width: 520px;
  max-width: calc(100% - 36px);
  box-shadow: 0 18px 48px rgba(20, 20, 20, 0.18);
  border: 1px solid var(--border-color);
}

.appearance-close {
  position: absolute;
  right: 14px;
  top: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-secondary);
}

.appearance-desc {
  margin-top: 6px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 13px;
}

.appearance-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.appearance-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.appearance-card:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.appearance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 20, 20, 0.08);
}

.appearance-card[aria-pressed="true"] {
  border-color: rgba(99, 102, 241, 0.9);
  box-shadow: 0 18px 40px rgba(99, 102, 241, 0.06);
}

.appearance-card .preview {
  width: 78px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.appearance-card .card-label {
  font-size: 13px;
  color: var(--text-primary);
}

.preview-dark {
  background: linear-gradient(180deg, #111, #2b2b2b);
}

.preview-light {
  background: linear-gradient(180deg, #fff, #f4f4f4);
  border: 1px solid rgba(20, 20, 20, 0.04);
}

.appearance-card .preview {
  width: 78px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.preview-starry {
  background-image: url("magicpattern-starry-night-1764596909063.png"), linear-gradient(180deg, #07102a, #123049);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-color);
}

.preview-ocean {
  display: none;
}

/* Starry full-page background for the "starry" theme */
[data-theme="starry"] {
  /* Monochrome (black) hierarchy tokens for UI surfaces and text */
  --bg-primary: #040507;
  /* page base (near-black) */
  --bg-secondary: #0a0a0a;
  /* container backgrounds */
  --text-primary: #e6e6e6;
  /* primary text (not pure white) */
  --text-secondary: #b3b3b3;
  /* secondary text for hierarchy */
  --border-color: #2e2e2e;
  /* subtle light gray on dark background */
  --accent: #8a8a8a;
  /* neutral accent for controls */
  --surface: rgba(14, 14, 14, 0.5);
  /* semi-transparent surfaces */
  --surface-2: rgba(20, 20, 20, 0.5);
  /* semi-transparent stacked surfaces */
  --card-bg: var(--surface);
}

[data-theme="starry"] html,
[data-theme="starry"] body {
  background-color: var(--bg-primary);
  /* use the provided PNG as the star layer; apply a soft monochrome vignette on top */
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.04) 100%),
    url("magicpattern-starry-night-1764596909063.png");
  background-size: cover, auto;
  background-position: center center;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed;
  color: var(--text-primary);
}

.preview-sepia {
  background: linear-gradient(180deg, #f4ecd8, #e6d3b3);
}

@media (max-width: 640px) {
  .appearance-modal {
    width: 92%;
  }

  .appearance-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Custom preview (shows uploaded image or placeholder) */
.preview-custom {
  background: linear-gradient(180deg, #f0f0f0, #e8e8e8);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-color);
}

/* Ensure modal can expand and scroll when custom panel is revealed */
.appearance-modal {
  max-height: 80vh;
  overflow: auto;
}

.appearance-custom-panel {
  background: transparent;
}

.appearance-custom-panel .image-uploader {
  min-height: 72px;
}

.appearance-custom-panel input[type="range"] {
  width: 100%;
}

/* Apply custom background when theme is custom. JS sets --custom-bg-image to url('...') if present. */
[data-theme="custom"] html,
[data-theme="custom"] body {
  background-color: var(--bg-primary);
  background-image: var(--custom-bg-image, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-primary);
}

/* Provide a CSS var for custom blur which JS will set. Apply backdrop-filter to main containers so blur affects surface fills. */
[data-theme="custom"] .sidebar,
[data-theme="custom"] .editor-container,
[data-theme="custom"] .header,
[data-theme="custom"] .teacher-sidebar,
[data-theme="custom"] .entry-view,
[data-theme="custom"] .main-content {
  backdrop-filter: blur(var(--custom-blur, 0px));
}

/* Ensure commonly-used UI surfaces respect the custom theme's translucent
   variables so the custom background image and blur show through. Use
   explicit backgrounds here to override any solid fills that prevent
   translucency (keeps text and borders unchanged). */
[data-theme="custom"] .editor-area,
[data-theme="custom"] .editor-content,
[data-theme="custom"] .search-box,
[data-theme="custom"] .profile-modal,
[data-theme="custom"] .comments-modal,
[data-theme="custom"] .comment-list,
[data-theme="custom"] .comment-item,
[data-theme="custom"] .comment-avatar,
[data-theme="custom"] .entry-item,
[data-theme="custom"] .account-card,
[data-theme="custom"] .new-entry-btn,
[data-theme="custom"] .toolbar-btn,
[data-theme="custom"] .appearance-modal,
[data-theme="custom"] .section-body,
[data-theme="custom"] .section-title {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Ensure the editable area itself (the contenteditable div) uses the
   same surface color as its container so it doesn't appear as a different
   shade in dark/custom themes. */
[data-theme="custom"] .editor-content {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Apply backdrop-filter to some of the inner surfaces so blur affects fills
   while leaving text sharp. */
[data-theme="custom"] .editor-area,
[data-theme="custom"] .comment-list,
[data-theme="custom"] .profile-modal,
[data-theme="custom"] .comments-modal {
  backdrop-filter: blur(var(--custom-blur, 0px));
}

/* New Entry button variants
   - Light variant: default + [data-theme="light"] + fallback for custom
   - Dark/Starry variant: [data-theme="dark"], [data-theme="starry"], and custom when JS marks it dark via `data-custom-mode="dark"` */

/* Light variant: lighter gradient and black text */
.new-entry-btn,
[data-theme="light"] .new-entry-btn,
[data-theme="custom"] .new-entry-btn {
  /* slightly darker light gradient so it reads better against pale backgrounds */
  background: linear-gradient(180deg, #eef4ff, #d7e8ff) !important;
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 6px 20px rgba(20, 20, 20, 0.08) !important;
  transform: none !important;
}

.new-entry-btn:hover,
[data-theme="light"] .new-entry-btn:hover,
[data-theme="custom"] .new-entry-btn:hover {
  box-shadow: 0 14px 32px rgba(20, 20, 20, 0.10) !important;
  transform: translateY(-2px) !important;
}

/* Dark/starry variant: strong starry gradient with white text */
[data-theme="dark"] .new-entry-btn,
[data-theme="starry"] .new-entry-btn,
[data-theme="custom"][data-custom-mode="dark"] .new-entry-btn,
[data-theme="custom"][data-custom-mode="starry"] .new-entry-btn {
  background: linear-gradient(180deg, rgba(40, 50, 70, 0.96), rgba(20, 30, 50, 0.96)) !important;
  color: #fff !important;
  border-color: rgba(180, 200, 255, 0.12) !important;
  box-shadow: 0 6px 20px rgba(18, 28, 48, 0.5), 0 0 18px rgba(120, 155, 255, 0.08) !important;
}

[data-theme="dark"] .new-entry-btn:hover,
[data-theme="starry"] .new-entry-btn:hover,
[data-theme="custom"][data-custom-mode="dark"] .new-entry-btn:hover,
[data-theme="custom"][data-custom-mode="starry"] .new-entry-btn:hover {
  /* preserve the Starry gradient on hover and apply glow */
  background: linear-gradient(180deg, rgba(40, 50, 70, 0.96), rgba(20, 30, 50, 0.96)) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(18, 28, 48, 0.6), 0 0 28px rgba(120, 155, 255, 0.18) !important;
  transform: translateY(-3px) scale(1.02) !important;
}

/* Show account menu when toggled visible */
.account-menu.visible {
  display: flex;
}

/* Floating mobile toolbar (Word-style) — shown only on mobile breakpoints
   and when the editor is focused. This toolbar is positioned above the
   on-screen keyboard and does not affect layout or editor size. */
@media (max-width: 768px) {
  #mobileFloatingToolbar {
    position: fixed;
    left: 12px;
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px;
    padding: 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    align-items: center;
    justify-content: center;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease, left 120ms ease, right 120ms ease;
    transform: translateY(110%);
    opacity: 0;
    max-width: calc(100% - 24px);
    touch-action: none;
    /* allow vertical stacking; avoid horizontal scrolling */
  }

  #mobileFloatingToolbar.visible {
    transform: translateY(0);
    opacity: 1;
  }

  #mobileFloatingToolbar .toolbar-btn {
    min-width: 48px;
    height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  /* Make buttons flow vertically inside each column (stacked look) */
  #mobileFloatingToolbar .toolbar-btn { display: inline-flex; }

  /* When toolbar would overflow to the right, allow it to be centered via JS
     by setting left and adjusting translateX; default left is set in JS. */

  /* slightly larger hit target on mobile */
  #mobileFloatingToolbar .toolbar-btn > * { pointer-events: none; }

  /* Ensure the mobile toolbar never pushes or resizes content */
  .editor-container { bottom: auto; top: 0; position: relative; }
}

/* Dark theme: ensure no polka/tiled background image is applied by default */
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-image: none;
}