/* ==========================================================================
   🍏 Autohoteky Official macOS Design System (?theme=macos Dual-Mode)
   SSOT: E:\git\Autohoteky\DESIGN_GUIDE.md & autostart/common/ui/apple-theme.css
   Style: Pure Apple Light White Mode Default (Unified button scale & uncompressed layout)
   ========================================================================== */

/* --- 1. macOS Apple Light Mode Tokens (Pure White Base SSOT) --- */
html[data-theme-style="macos"],
html[data-theme-style="macos"][data-theme="dark"] {
  /* 🔤 표준 타이포그래피 */
  --apple-font-family: Pretendard, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Roboto, sans-serif;
  --font-sans: var(--apple-font-family);
  --font-serif: var(--apple-font-family);
  --font-japanese-sans: var(--apple-font-family);
  --font-japanese-serif: var(--apple-font-family);

  --apple-font-size-hero: 28px;
  --apple-font-size-display: 20px;
  --apple-font-size-title: 15px;
  --apple-font-size-body: 13px;
  --apple-font-size-caption: 11px;

  /* 📐 8px 기반 간격 시스템 */
  --apple-space-1: 4px;
  --apple-space-2: 8px;
  --apple-space-3: 12px;
  --apple-space-4: 16px;
  --apple-space-5: 20px;
  --apple-space-6: 24px;

  /* 📏 네이티브 컴포넌트 표준 높이 규격 (DESIGN_GUIDE.md SSOT) */
  --apple-height-topbar: 48px;
  --apple-height-btn: 28px;
  --apple-height-btn-lg: 34px;
  --apple-height-input: 28px;
  --apple-height-sidebar-row: 30px;
  --apple-height-table-row: 38px;

  /* 💎 0.5px 서브픽셀 헤어라인 림 섀도우 */
  --apple-rim-subtle: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --apple-window-shadow-layered: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 30px rgba(0, 0, 0, 0.12);
  --apple-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
  --apple-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* ☀️ 화이트 기본 서피스 토큰 (Apple Light SSOT) */
  --apple-canvas: #f5f5f7;
  --apple-surface: #ffffff;
  --apple-surface-border: #e5e5ea;
  --apple-text-primary: #1d1d1f;
  --apple-text-secondary: #6e6e73;
  --apple-text-muted: #86868b;

  /* Primary macOS 스퀴클 블루 버튼 */
  --apple-btn-primary-bg: linear-gradient(180deg, #3884f6 0%, #1e69e7 100%);
  --apple-btn-primary-border: #1a5ac8;
  --apple-btn-primary-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --apple-btn-primary-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(30, 105, 231, 0.38);
  --apple-btn-primary-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  --apple-btn-primary-hover: linear-gradient(180deg, #428cf8 0%, #2370ef 100%);

  /* Secondary macOS 시스템 보조 버튼 */
  --apple-btn-secondary-bg: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);
  --apple-btn-secondary-border: #d2d2d7;
  --apple-btn-secondary-text: #1d1d1f;
  --apple-btn-secondary-highlight: inset 0 1px 0 #ffffff;
  --apple-btn-secondary-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --apple-btn-secondary-hover: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);

  /* Destructive 레드 버튼 */
  --apple-btn-destructive-bg: linear-gradient(180deg, #ff453a 0%, #d70015 100%);
  --apple-btn-destructive-border: #b80012;
  --apple-btn-destructive-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(215, 0, 21, 0.35);

  /* 폼 컨트롤 및 액센트 */
  --apple-input-bg: #ffffff;
  --apple-input-border: #d2d2d7;
  --apple-accent: #0071e3;
  --apple-accent-blue: #0088ff;
  --apple-accent-green: #28cd41;
  --apple-accent-yellow: #ffcc00;
  --apple-accent-orange: #ff9500;
  --apple-accent-red: #ff3b30;
  --apple-accent-purple: #cb30e0;
  --apple-accent-indigo: #6155f5;

  /* 세그먼트 컨트롤 */
  --apple-segment-track-bg: #e5e5ea;
  --apple-segment-item-color: #6e6e73;
  --apple-segment-active-bg: #ffffff;
  --apple-segment-active-color: #1d1d1f;
  --apple-segment-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.06);

  /* 토글 스위치 */
  --apple-toggle-off: #e9e9ea;
  --apple-toggle-on: #34c759;

  /* 사이트 호환 변수 매핑 */
  --bg: var(--apple-canvas);
  --surface: var(--apple-surface);
  --surface-solid: var(--apple-surface);
  --ink: var(--apple-text-primary);
  --muted: var(--apple-text-secondary);
  --line: var(--apple-surface-border);
  --green-text: var(--apple-accent-green);
  --orange-text: var(--apple-accent-orange);
  --accent: var(--apple-accent);
  --accent-soft: rgba(0, 113, 227, 0.08);
  --accent-text: var(--apple-accent);
  --shadow: var(--apple-window-shadow-layered);
  --shadow-sm: var(--apple-card-shadow);
}

/* --- 2. Base Body & Anti-Slop Clean Surface --- */
html[data-theme-style="macos"] body {
  background-color: var(--apple-canvas) !important;
  color: var(--apple-text-primary) !important;
  font-family: var(--apple-font-family) !important;
  user-select: none;
  -webkit-user-select: none;
}

html[data-theme-style="macos"] .ambient {
  display: none !important;
}

/* Anti-Slop: Solid surfaces without body blur */
html[data-theme-style="macos"] .paper-card,
html[data-theme-style="macos"] .panel,
html[data-theme-style="macos"] .stat-card,
html[data-theme-style="macos"] .calendar-card,
html[data-theme-style="macos"] .settings-card,
html[data-theme-style="macos"] .hero-card,
html[data-theme-style="macos"] .meeting-access-card,
html[data-theme-style="macos"] .next-card,
html[data-theme-style="macos"] .modal-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
}

/* Anti-Slop: Korean keep-all & numbers tnum */
html[data-theme-style="macos"] p,
html[data-theme-style="macos"] .hero-sub,
html[data-theme-style="macos"] .modal-help,
html[data-theme-style="macos"] .timeline-content,
html[data-theme-style="macos"] .dashboard-assignment-body,
html[data-theme-style="macos"] .book-desc-content {
  word-break: keep-all !important;
}

html[data-theme-style="macos"] .next-date-big,
html[data-theme-style="macos"] .timeline-date strong,
html[data-theme-style="macos"] .session-date strong,
html[data-theme-style="macos"] .stat-card strong,
html[data-theme-style="macos"] .mini-progress,
html[data-theme-style="macos"] .day-number,
html[data-theme-style="macos"] .today-chip {
  font-feature-settings: "tnum" 1 !important;
}

/* User selectable text in data areas */
html[data-theme-style="macos"] p,
html[data-theme-style="macos"] strong,
html[data-theme-style="macos"] h1,
html[data-theme-style="macos"] h2,
html[data-theme-style="macos"] h3,
html[data-theme-style="macos"] input,
html[data-theme-style="macos"] textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* --- 3. macOS Finder Style Split View & Sidebar (240px) --- */
html[data-theme-style="macos"] .app-shell {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  max-width: 100vw !important;
  background: var(--apple-canvas) !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .sidebar {
  width: 240px !important;
  background: #ebebee !important;
  border-right: 1px solid #dcdce0 !important;
  padding: 16px 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  z-index: 200 !important;
}

/* macOS Traffic Light Buttons */
html[data-theme-style="macos"] .brand {
  position: relative !important;
  padding-top: 24px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html[data-theme-style="macos"] .brand::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 2px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ff5f56 !important;
  box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f !important;
}

html[data-theme-style="macos"] .brand-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  background: var(--apple-btn-primary-bg) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html[data-theme-style="macos"] .brand-jp {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

html[data-theme-style="macos"] .brand-ko {
  font-size: 10px !important;
  color: var(--apple-text-muted) !important;
  margin: 0 !important;
}

/* Sidebar Language Switcher */
html[data-theme-style="macos"] .language-switch {
  background: rgba(0, 0, 0, 0.06) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  display: flex !important;
  gap: 2px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

html[data-theme-style="macos"] .language-switch button {
  flex: 1 !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--apple-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html[data-theme-style="macos"] .language-switch button.active {
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06) !important;
}

/* Sidebar Navigation Items */
html[data-theme-style="macos"] .nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html[data-theme-style="macos"] .nav-item {
  height: var(--apple-height-sidebar-row) !important;
  border-radius: 6px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--apple-text-primary) !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
  transition: background 0.1s ease !important;
}

html[data-theme-style="macos"] .nav-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

html[data-theme-style="macos"] .nav-item.active {
  background: var(--apple-accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

html[data-theme-style="macos"] .nav-item .nav-icon {
  font-size: 13px !important;
  width: 16px !important;
  text-align: center !important;
  color: inherit !important;
  opacity: 0.9 !important;
}

html[data-theme-style="macos"] .nav-group-toggle {
  background: transparent !important;
  border: 0 !important;
  color: var(--apple-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 10px 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Sidebar Footer Mini Card */
html[data-theme-style="macos"] .sidebar-card {
  margin-top: auto !important;
  background: #ffffff !important;
  border: 1px solid var(--apple-surface-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: var(--apple-card-shadow) !important;
}

html[data-theme-style="macos"] .sidebar-card-kicker {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--apple-accent) !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 4px !important;
}

html[data-theme-style="macos"] .sidebar-card-date {
  font-size: 11px !important;
  color: var(--apple-text-secondary) !important;
  margin: 0 0 2px !important;
}

html[data-theme-style="macos"] .sidebar-card-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 0 8px !important;
}

html[data-theme-style="macos"] .mini-progress {
  height: 4px !important;
  border-radius: 2px !important;
  background: #e5e5ea !important;
  overflow: hidden !important;
}

html[data-theme-style="macos"] .mini-progress span {
  display: block !important;
  height: 100% !important;
  background: var(--apple-accent) !important;
  border-radius: 2px !important;
}

html[data-theme-style="macos"] .sidebar-card-meta {
  font-size: 10px !important;
  color: var(--apple-text-muted) !important;
  margin: 6px 0 0 !important;
  text-align: right !important;
}

html[data-theme-style="macos"] .sidebar-foot {
  font-size: 10px !important;
  color: var(--apple-text-muted) !important;
  text-align: center !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 4px 0 !important;
}

/* --- 4. macOS Unified Window Toolbar (48px Topbar) --- */
html[data-theme-style="macos"] .main-content {
  background: var(--apple-canvas) !important;
  padding: 0 24px 32px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html[data-theme-style="macos"] .topbar {
  height: var(--apple-height-topbar) !important;
  min-height: var(--apple-height-topbar) !important;
  background: rgba(245, 245, 247, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--apple-surface-border) !important;
  margin: 0 -24px 20px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

html[data-theme-style="macos"] .topbar-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme-style="macos"] .eyebrow {
  display: none !important;
}

html[data-theme-style="macos"] #viewTitle {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 !important;
}

html[data-theme-style="macos"] .topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Hide theme toggles in macOS mode */
html[data-theme-style="macos"] #themeToggle,
html[data-theme-style="macos"] #mobileThemeToggle {
  display: none !important;
}

html[data-theme-style="macos"] .today-chip {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--apple-text-secondary) !important;
  background: rgba(0, 0, 0, 0.05) !important;
  padding: 0 10px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 9999px !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .sync-status {
  font-size: 11px !important;
  padding: 0 8px !important;
  height: 26px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--apple-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
}

html[data-theme-style="macos"] .sync-status[data-sync-state="synced"] {
  color: var(--apple-accent-green) !important;
}

html[data-theme-style="macos"] .sync-status[data-sync-state="syncing"] {
  color: var(--apple-accent-orange) !important;
}

/* --- 5. Unified Button & Input Sizing Scale (28px Standard, 34px Large) --- */
html[data-theme-style="macos"] .primary-btn,
html[data-theme-style="macos"] #quickAddBtn,
html[data-theme-style="macos"] #addStudentBtn,
html[data-theme-style="macos"] #addSessionBtn,
html[data-theme-style="macos"] #saveBookBtn,
html[data-theme-style="macos"] #saveZoomBtn {
  height: var(--apple-height-btn) !important;
  min-height: var(--apple-height-btn) !important;
  max-height: var(--apple-height-btn) !important;
  border-radius: 7px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: var(--apple-btn-primary-bg) !important;
  border: 1px solid var(--apple-btn-primary-border) !important;
  box-shadow: var(--apple-btn-primary-shadow) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: filter 0.1s ease !important;
}

html[data-theme-style="macos"] .primary-btn:hover,
html[data-theme-style="macos"] #quickAddBtn:hover {
  filter: brightness(1.05) !important;
}

html[data-theme-style="macos"] .secondary-btn,
html[data-theme-style="macos"] #dashboardGuideAction,
html[data-theme-style="macos"] #bulkDateBtn,
html[data-theme-style="macos"] #addBookBtn,
html[data-theme-style="macos"] #addChapterBtn {
  height: var(--apple-height-btn) !important;
  min-height: var(--apple-height-btn) !important;
  max-height: var(--apple-height-btn) !important;
  border-radius: 7px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--apple-btn-secondary-text) !important;
  background: var(--apple-btn-secondary-bg) !important;
  border: 1px solid var(--apple-btn-secondary-border) !important;
  box-shadow: var(--apple-btn-secondary-shadow) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

html[data-theme-style="macos"] .ghost-btn,
html[data-theme-style="macos"] #todayBtn {
  height: var(--apple-height-btn) !important;
  min-height: var(--apple-height-btn) !important;
  max-height: var(--apple-height-btn) !important;
  border-radius: 7px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--apple-text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .danger-btn,
html[data-theme-style="macos"] #resetBtn {
  height: var(--apple-height-btn) !important;
  min-height: var(--apple-height-btn) !important;
  max-height: var(--apple-height-btn) !important;
  border-radius: 7px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  background: var(--apple-btn-destructive-bg) !important;
  border: 1px solid var(--apple-btn-destructive-border) !important;
  box-shadow: var(--apple-btn-destructive-shadow) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .icon-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid var(--apple-surface-border) !important;
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Form Inputs Standardization (28px height) */
html[data-theme-style="macos"] input[type="text"],
html[data-theme-style="macos"] input[type="search"],
html[data-theme-style="macos"] input[type="date"],
html[data-theme-style="macos"] input[type="url"],
html[data-theme-style="macos"] select {
  height: var(--apple-height-input) !important;
  min-height: var(--apple-height-input) !important;
  border-radius: 6px !important;
  border: 1px solid var(--apple-input-border) !important;
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  outline: none !important;
}

html[data-theme-style="macos"] input:focus,
html[data-theme-style="macos"] select:focus,
html[data-theme-style="macos"] textarea:focus {
  border-color: var(--apple-accent) !important;
  outline: 2px solid rgba(0, 113, 227, 0.2) !important;
}

/* --- 6. View Visibility & Switching --- */
html[data-theme-style="macos"] .view {
  display: none !important;
}

html[data-theme-style="macos"] .view.active {
  display: block !important;
  animation: none !important;
}

/* --- 7. Full-Featured macOS Dashboard (Rich & Balanced Layout) --- */
html[data-theme-style="macos"] #dashboardView.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  gap: 16px !important;
  grid-template-areas:
    "next zoom"
    "assign assign"
    "upcoming chapter"
    "vocab chapter" !important;
}

@media (max-width: 1080px) {
  html[data-theme-style="macos"] #dashboardView.active {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "next"
      "zoom"
      "assign"
      "upcoming"
      "vocab"
      "chapter" !important;
  }
}

/* 1) Next Reading Card */
html[data-theme-style="macos"] .next-card {
  grid-area: next !important;
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  color: var(--apple-text-primary) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 150px !important;
  margin-bottom: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .next-card::after {
  content: none !important;
  display: none !important;
}

html[data-theme-style="macos"] .next-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--apple-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

html[data-theme-style="macos"] .next-card .status-dot {
  background: var(--apple-accent-green) !important;
  box-shadow: 0 0 0 3px rgba(40, 205, 65, 0.15) !important;
}

html[data-theme-style="macos"] .next-date-big {
  color: var(--apple-text-primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum" 1 !important;
  margin: 6px 0 2px !important;
}

html[data-theme-style="macos"] .next-card h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 0 2px !important;
}

html[data-theme-style="macos"] .next-card > p:not(.next-date-big) {
  font-size: 12px !important;
  color: var(--apple-text-secondary) !important;
  margin: 0 !important;
}

html[data-theme-style="macos"] .next-card-footer {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--apple-surface-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html[data-theme-style="macos"] .next-reading-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: var(--apple-text-secondary) !important;
}

html[data-theme-style="macos"] .next-reading-summary strong {
  color: var(--apple-text-primary) !important;
  font-weight: 600 !important;
}

/* 2) Zoom Meeting Card */
html[data-theme-style="macos"] #meetingAccessCard {
  grid-area: zoom !important;
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 150px !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .meeting-access-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--apple-btn-primary-bg) !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 6px !important;
}

html[data-theme-style="macos"] .meeting-access-copy {
  text-align: center !important;
}

html[data-theme-style="macos"] .meeting-access-copy h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: var(--apple-text-primary) !important;
}

html[data-theme-style="macos"] .meeting-access-copy p {
  font-size: 11px !important;
  color: var(--apple-text-secondary) !important;
  margin: 2px 0 0 !important;
}

html[data-theme-style="macos"] .meeting-access-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 10px !important;
}

/* 3) Full-Width Assignment Panel & Wide Student Responses */
html[data-theme-style="macos"] #dashboardAssignmentPanel {
  grid-area: assign !important;
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 20px 24px !important;
  margin-bottom: 0 !important;
}

html[data-theme-style="macos"] .panel-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

html[data-theme-style="macos"] .panel-head h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 !important;
}

html[data-theme-style="macos"] .dashboard-assignment-card {
  background: var(--apple-canvas) !important;
  border: 1px solid var(--apple-surface-border) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
}

html[data-theme-style="macos"] .dashboard-assignment-card:last-child {
  margin-bottom: 0 !important;
}

html[data-theme-style="macos"] .dashboard-assignment-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
}

html[data-theme-style="macos"] .dashboard-assignment-body {
  font-size: 13px !important;
  color: var(--apple-text-primary) !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
  margin-bottom: 14px !important;
}

/* Wide Responsive Student Responses */
html[data-theme-style="macos"] .dashboard-assignment-response-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
}

html[data-theme-style="macos"] .student-response-accordion {
  border: 1px solid var(--apple-surface-border) !important;
  border-radius: 10px !important;
  background: var(--apple-surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  overflow: hidden !important;
}

html[data-theme-style="macos"] .student-response-accordion.has-response {
  border-color: rgba(0, 113, 227, 0.25) !important;
}

html[data-theme-style="macos"] .student-response-accordion.expanded {
  border-color: var(--apple-accent) !important;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.1) !important;
}

html[data-theme-style="macos"] .student-response-toggle {
  width: 100% !important;
  min-height: 48px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
}

html[data-theme-style="macos"] .student-response-name {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme-style="macos"] .student-response-name > i {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: rgba(0, 113, 227, 0.1) !important;
  color: var(--apple-accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  font-style: normal !important;
}

html[data-theme-style="macos"] .student-response-name > strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
}

html[data-theme-style="macos"] .student-response-saved {
  background: rgba(52, 199, 89, 0.12) !important;
  color: #248a3d !important;
  padding: 2px 6px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html[data-theme-style="macos"] .student-response-empty {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--apple-text-muted) !important;
  padding: 2px 6px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
}

html[data-theme-style="macos"] .student-response-editor {
  padding: 8px 14px 14px !important;
  border-top: 1px solid var(--apple-surface-border) !important;
  display: grid !important;
  gap: 8px !important;
  background: #fafafa !important;
}

html[data-theme-style="macos"] .student-response-editor textarea {
  width: 100% !important;
  min-height: 90px !important;
  border-radius: 8px !important;
  border: 1px solid var(--apple-input-border) !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

/* 4) Upcoming Schedule & Vocabulary & Chapter Context (Restored) */
html[data-theme-style="macos"] #dashboardView .upcoming-panel {
  grid-area: upcoming !important;
  display: block !important;
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 18px 20px !important;
  margin-bottom: 0 !important;
}

html[data-theme-style="macos"] #dashboardView .dashboard-vocabulary-panel {
  grid-area: vocab !important;
  display: block !important;
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 18px 20px !important;
  margin-bottom: 0 !important;
}

html[data-theme-style="macos"] #dashboardView .book-chapter-context-card {
  grid-area: chapter !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 18px 20px !important;
  margin-bottom: 0 !important;
}

/* --- 8. Calendar View: FIX UNCOMPRESSED ROW LAYOUT (NOT 7-COLUMNS) --- */
html[data-theme-style="macos"] .calendar-card {
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 20px !important;
}

html[data-theme-style="macos"] .view-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

html[data-theme-style="macos"] .month-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme-style="macos"] .month-nav h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 !important;
  min-width: 90px !important;
  text-align: center !important;
}

/* FIX: Saturday Calendar is a vertical list of session cards, NEVER repeat(7, 1fr) */
html[data-theme-style="macos"] .saturday-calendar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

html[data-theme-style="macos"] .saturday-card {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border: 1px solid var(--apple-surface-border) !important;
  border-radius: 12px !important;
  background: var(--apple-surface) !important;
  color: var(--apple-text-primary) !important;
  box-shadow: var(--apple-card-shadow) !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
}

html[data-theme-style="macos"] .saturday-card:hover {
  background: #fafafa !important;
  border-color: #d2d2d7 !important;
  box-shadow: var(--apple-card-hover-shadow) !important;
}

html[data-theme-style="macos"] .saturday-card.today {
  border-color: var(--apple-accent) !important;
  box-shadow: inset 4px 0 0 var(--apple-accent) !important;
}

html[data-theme-style="macos"] .saturday-date {
  display: grid !important;
  gap: 3px !important;
  padding-right: 16px !important;
  border-right: 1px solid var(--apple-surface-border) !important;
}

html[data-theme-style="macos"] .saturday-date span {
  color: var(--apple-text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

html[data-theme-style="macos"] .saturday-date strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  font-family: var(--apple-font-family) !important;
  font-feature-settings: "tnum" 1 !important;
  color: var(--apple-text-primary) !important;
}

html[data-theme-style="macos"] .saturday-detail {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
}

html[data-theme-style="macos"] .saturday-book-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-theme-style="macos"] .saturday-session-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

html[data-theme-style="macos"] .saturday-action {
  color: var(--apple-accent) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* --- 9. Progress Records: macOS Grouped List & Segmented Control --- */
html[data-theme-style="macos"] .filter-row {
  display: inline-flex !important;
  background: var(--apple-segment-track-bg) !important;
  border: 1px solid var(--apple-surface-border) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  gap: 2px !important;
  margin-bottom: 16px !important;
}

html[data-theme-style="macos"] .filter-chip {
  height: 24px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--apple-segment-item-color) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html[data-theme-style="macos"] .filter-chip.active {
  background: var(--apple-segment-active-bg) !important;
  color: var(--apple-segment-active-color) !important;
  font-weight: 600 !important;
  box-shadow: var(--apple-segment-active-shadow) !important;
}

html[data-theme-style="macos"] .session-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html[data-theme-style="macos"] .session-item {
  border-radius: 10px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.12s ease !important;
}

html[data-theme-style="macos"] .session-item:hover {
  background: #fafafa !important;
  border-color: #d2d2d7 !important;
}

/* --- 10. macOS System Window / Sheet Modals (Wide 820px) --- */
html[data-theme-style="macos"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  z-index: 500 !important;
}

html[data-theme-style="macos"] .modal-backdrop[hidden] {
  display: none !important;
}

html[data-theme-style="macos"] .modal-card {
  width: 100% !important;
  max-width: 680px !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  border-radius: 18px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-window-shadow-layered) !important;
  padding: 22px 26px !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Session Detail Editor Modal: Expanded to 820px wide */
html[data-theme-style="macos"] .modal-card.session-detail-card {
  max-width: 820px !important;
  width: min(820px, 92vw) !important;
}

html[data-theme-style="macos"] .modal-card.compact-modal {
  max-width: 480px !important;
}

html[data-theme-style="macos"] .modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid var(--apple-surface-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
}

html[data-theme-style="macos"] .modal-head h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 !important;
}

html[data-theme-style="macos"] .close-modal,
html[data-theme-style="macos"] #closeDangerPreviewBtn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 50% !important;
  background: rgba(120, 120, 128, 0.14) !important;
  border: 0 !important;
  color: var(--apple-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
}

html[data-theme-style="macos"] .close-modal:hover,
html[data-theme-style="macos"] #closeDangerPreviewBtn:hover {
  background: rgba(120, 120, 128, 0.25) !important;
  color: var(--apple-text-primary) !important;
}

/* Modal Session Tabs */
html[data-theme-style="macos"] .session-tabs {
  display: flex !important;
  gap: 6px !important;
  background: var(--apple-segment-track-bg) !important;
  padding: 3px !important;
  border-radius: 8px !important;
  margin-bottom: 18px !important;
}

html[data-theme-style="macos"] .session-tabs button {
  flex: 1 !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--apple-segment-item-color) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html[data-theme-style="macos"] .session-tabs button.active {
  background: var(--apple-segment-active-bg) !important;
  color: var(--apple-segment-active-color) !important;
  font-weight: 600 !important;
  box-shadow: var(--apple-segment-active-shadow) !important;
}

/* Modal Vocabulary Tab (Spacious Grid) */
html[data-theme-style="macos"] .vocabulary-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html[data-theme-style="macos"] .vocabulary-grid-row {
  display: grid !important;
  grid-template-columns: 36px minmax(160px, 200px) 1fr 65px !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--apple-surface-border) !important;
  background: var(--apple-canvas) !important;
}

html[data-theme-style="macos"] .vocabulary-grid-row :is(input, textarea) {
  border: 1px solid var(--apple-input-border) !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
  color: var(--apple-text-primary) !important;
}

html[data-theme-style="macos"] .session-vocabulary-list {
  height: 420px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}

/* Modal Assignment Tab */
html[data-theme-style="macos"] #assignmentForm textarea {
  min-height: 140px !important;
  border: 1px solid var(--apple-input-border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 20px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--apple-surface-border) !important;
}

html[data-theme-style="macos"] .modal-actions-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* --- 11. Vocabulary View (macOS Books / Dictionary Style - Wide List) --- */
html[data-theme-style="macos"] .vocabulary-hero {
  border-radius: 10px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 14px !important;
}

html[data-theme-style="macos"] .vocabulary-hero .learning-kanji {
  display: none !important;
}

html[data-theme-style="macos"] .vocabulary-hero div {
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

html[data-theme-style="macos"] .vocabulary-hero p {
  color: var(--apple-accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

html[data-theme-style="macos"] .vocabulary-hero h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  margin: 0 !important;
}

html[data-theme-style="macos"] .vocabulary-hero strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: var(--apple-canvas) !important;
  border: 1px solid var(--apple-surface-border) !important;
  font-feature-settings: "tnum" 1 !important;
}

html[data-theme-style="macos"] .learning-controls {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

html[data-theme-style="macos"] .search-field {
  height: 28px !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  border: 1px solid var(--apple-surface-border) !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 200px !important;
  max-width: 320px !important;
}

html[data-theme-style="macos"] .search-field input {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: var(--apple-text-primary) !important;
  font-size: 12px !important;
  width: 100% !important;
}

html[data-theme-style="macos"] .segmented-control {
  background: var(--apple-segment-track-bg) !important;
  border: 1px solid var(--apple-surface-border) !important;
  border-radius: 7px !important;
  padding: 2px !important;
  display: inline-flex !important;
  gap: 2px !important;
}

html[data-theme-style="macos"] .segmented-control button {
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 5px !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--apple-segment-item-color) !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html[data-theme-style="macos"] .segmented-control button.active {
  background: var(--apple-segment-active-bg) !important;
  color: var(--apple-segment-active-color) !important;
  font-weight: 600 !important;
  box-shadow: var(--apple-segment-active-shadow) !important;
}

html[data-theme-style="macos"] #vocabularyList {
  display: block !important;
  width: 100% !important;
}

html[data-theme-style="macos"] .word-index {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

html[data-theme-style="macos"] .word-index-row {
  display: grid !important;
  grid-template-columns: minmax(160px, 220px) 1fr auto auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
}

html[data-theme-style="macos"] .word-index-row:hover {
  background: #fafafa !important;
  border-color: #d2d2d7 !important;
  box-shadow: var(--apple-card-hover-shadow) !important;
}

html[data-theme-style="macos"] .word-index-row strong {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  font-family: var(--apple-font-family) !important;
  white-space: nowrap !important;
}

html[data-theme-style="macos"] .word-index-row > div {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html[data-theme-style="macos"] .word-index-row small {
  color: var(--apple-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  word-break: keep-all !important;
}

html[data-theme-style="macos"] .word-index-row span {
  color: var(--apple-text-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

html[data-theme-style="macos"] .word-index-row i {
  color: var(--apple-accent) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* --- 12. Assignments View --- */
html[data-theme-style="macos"] .assignment-groups {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html[data-theme-style="macos"] .assignment-card {
  border-radius: 10px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 14px 18px !important;
  transition: all 0.12s ease !important;
}

html[data-theme-style="macos"] .assignment-card:hover {
  background: #fafafa !important;
  border-color: #d2d2d7 !important;
}

/* --- 13. Settings View: FIX CRAMPED GRID & SQUISHED STUDENT ROSTER --- */
html[data-theme-style="macos"] .settings-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap: 20px !important;
}

/* Student Roster Card gets Full Width in Top Row */
html[data-theme-style="macos"] .student-roster-card {
  grid-column: 1 / -1 !important;
}

html[data-theme-style="macos"] .settings-card {
  border-radius: 14px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 22px 24px !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .settings-card h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--apple-text-primary) !important;
  margin: 4px 0 8px !important;
}

html[data-theme-style="macos"] .settings-card > p:not(.eyebrow) {
  font-size: 12px !important;
  color: var(--apple-text-secondary) !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
}

/* Student Add Form Row */
html[data-theme-style="macos"] .student-add-form {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

html[data-theme-style="macos"] .student-add-form input {
  flex: 1 !important;
  height: 30px !important;
}

html[data-theme-style="macos"] .student-add-form button {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}

/* Student Roster Row: NO MORE SQUISHED VERTICAL NAMES */
html[data-theme-style="macos"] .student-roster-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html[data-theme-style="macos"] .student-roster-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: var(--apple-canvas) !important;
  border: 1px solid var(--apple-surface-border) !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .student-roster-row span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--apple-text-primary) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html[data-theme-style="macos"] .student-roster-row > div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

html[data-theme-style="macos"] .student-roster-row button {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: 1px solid var(--apple-surface-border) !important;
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

html[data-theme-style="macos"] .student-roster-row button:hover {
  background: var(--apple-canvas) !important;
  border-color: #d2d2d7 !important;
}

html[data-theme-style="macos"] .student-active-toggle {
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-right: 4px !important;
  cursor: pointer !important;
}

/* Settings Form Grid & Buttons */
html[data-theme-style="macos"] .form-grid.compact {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

html[data-theme-style="macos"] .settings-card .primary-btn,
html[data-theme-style="macos"] .settings-card .secondary-btn,
html[data-theme-style="macos"] .settings-card .danger-btn,
html[data-theme-style="macos"] .settings-card .file-btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

html[data-theme-style="macos"] .settings-card .file-btn {
  border: 1px solid var(--apple-surface-border) !important;
  background: #ffffff !important;
  color: var(--apple-text-primary) !important;
  cursor: pointer !important;
  box-shadow: var(--apple-btn-secondary-shadow) !important;
}

/* --- 14. Book Management View (macOS Books Library) --- */
html[data-theme-style="macos"] .book-library {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}

html[data-theme-style="macos"] .book-card {
  border-radius: 12px !important;
  background: var(--apple-surface) !important;
  border: 1px solid var(--apple-surface-border) !important;
  box-shadow: var(--apple-card-shadow) !important;
  padding: 16px !important;
}

/* --- 15. Minimal macOS Scrollbar --- */
html[data-theme-style="macos"] ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

html[data-theme-style="macos"] ::-webkit-scrollbar-track {
  background: transparent !important;
}

html[data-theme-style="macos"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 9999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

html[data-theme-style="macos"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* --- 16. Mobile Responsive (macOS/iOS Mode) --- */
@media (max-width: 768px) {
  html[data-theme-style="macos"] .app-shell {
    display: block !important;
  }
  html[data-theme-style="macos"] .sidebar {
    display: none !important;
  }
  html[data-theme-style="macos"] .main-content {
    padding: 0 16px 80px !important;
  }
  html[data-theme-style="macos"] .topbar {
    margin: 0 -16px 16px !important;
    padding: 0 16px !important;
  }
  html[data-theme-style="macos"] .saturday-card {
    grid-template-columns: 80px 1fr !important;
    gap: 12px !important;
  }
  html[data-theme-style="macos"] .saturday-action {
    display: none !important;
  }
  html[data-theme-style="macos"] .student-roster-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  html[data-theme-style="macos"] .student-roster-row > div {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}