@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent;
}

*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

html,
body,
.app,
.table-wrapper,
.layout-row,
.today-list,
.subject-table,
.schedule-grid,
.calendar-layout,
.calendar-scroll,
.timetable-table-wrap,
.timeline-wrap,
.timeline-cols {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

html {
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.app::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.layout-row::-webkit-scrollbar,
.today-list::-webkit-scrollbar,
.schedule-grid::-webkit-scrollbar,
.calendar-layout::-webkit-scrollbar,
.calendar-scroll::-webkit-scrollbar,
.timetable-table-wrap::-webkit-scrollbar,
.timeline-wrap::-webkit-scrollbar,
.timeline-cols::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent;
}

/* Allow scrollbars on Today list when explicitly enabled */
.today-scroll-visible {
  scrollbar-width: thin !important;
  -ms-overflow-style: auto !important;
}

.today-scroll-visible::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
  display: block !important;
}

.today-scroll-visible::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.9);
  border-radius: 10px;
}

.today-scroll-visible::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.5);
}

:root {
	      --page-bg: radial-gradient(120% 120% at 15% 10%, #e7f0ff 0%, #f5ecff 45%, #fdf7ec 80%);
	      --surface-bg: #fcfbf7;
	      --surface-subtle-bg: #f7f7ff;
      --border-subtle: #e4e7ef;
      --accent: #2f62f4;
      --accent-ink: #0f1c3d;
      --accent-soft: #e4ecff;
      --accent-soft-hover: #d7dfff;
      --ink: #0f172a;
      --ink-muted: #5f6a86;
      --radius-lg: 22px;
      --radius-md: 14px;
      --shadow-card: 0 20px 50px rgba(15, 23, 42, 0.08);
      --app-desktop-max: 1480px;
      --app-desktop-min: 980px;
      --ad-column-gap: 16px;
      --app-ultrawide-max: 2200px;
      --app-shell-width: min(95vw, var(--app-ultrawide-max));
      --app-aspect-ratio: 1.90;
      --meter-low: linear-gradient(90deg, #fb7185, #f97373);
      --meter-mid: linear-gradient(90deg, #fbbf24, #facc15);
	      --meter-high: linear-gradient(90deg, #22c55e, #16a34a);
	      --study-bar-bg: #e8ecf7;
	      --study-bar-radius: 999px;
	      --header-size: clamp(200px, 27dvh, 360px);
	      font-family: "Manrope", "Space Grotesk", sans-serif;
	      background: var(--page-bg);
	      color: var(--ink);
	    }

    /* Accessibility modes (set by JS via html[data-contrast] / html[data-cvd]) */
    html[data-contrast="high"] {
      --ink: #0b1220;
      --ink-muted: #1f2a44;
      --border-subtle: #cbd5e1;
      --accent-soft: #dbeafe;
      --accent-soft-hover: #bfdbfe;
      --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.14);
    }

    html[data-contrast="low"] {
      --ink: #1f2937;
      --ink-muted: #6b7280;
      --border-subtle: rgba(228, 232, 239, 0.65);
      --shadow-card: 0 16px 44px rgba(15, 23, 42, 0.06);
    }

    html[data-cvd="safe"] {
      --meter-low: linear-gradient(90deg, #D55E00, #D55E00);
      --meter-mid: linear-gradient(90deg, #E69F00, #E69F00);
      --meter-high: linear-gradient(90deg, #0072B2, #0072B2);
    }

html,
body {
  height: 100%;
  margin: 0;
  overflow-y: auto;
}

body {
  margin: 0;
  padding: 12px 0 24px;
  background: var(--page-bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ink);
  overflow-y: auto;
  overflow-x: visible;
  box-sizing: border-box;
}

.ad-column {
  position: fixed;
  top: 24px;
  bottom: 24px;
  width: var(--ad-column-width, 160px);
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  display: none;
}

html.ads-disabled .ad-column,
html.ads-disabled .top-ad-slot,
html.ads-disabled .review-ad,
html.ads-disabled .adsbygoogle,
html.ads-disabled ins.adsbygoogle {
  display: none !important;
}

.ad-column-left {
  left: calc(
    50% -
      (var(--app-shell-width) / 2) -
      var(--ad-column-width, 160px) -
      var(--ad-column-gap)
  );
}

.ad-column-right {
  right: calc(
    50% -
      (var(--app-shell-width) / 2) -
      var(--ad-column-width, 160px) -
      var(--ad-column-gap)
  );
}

@media (min-width: 1840px) {
  .ad-column {
    display: block;
  }
}

.top-ad-slot {
  display: none;
  border-radius: 18px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  min-height: 0;
}

.app {
  margin: 28px auto 36px;
  padding: 20px 22px 36px;
  width: var(--app-shell-width);
  min-width: min(var(--app-desktop-min), 95vw);
  max-width: var(--app-shell-width);
  min-height: calc(100vh - 24px);
  min-height: calc(100dvh - 24px);
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fffdf8);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(228, 232, 239, 0.9);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Keep the planner header from collapsing once its cards hit their minimum widths.
   When the viewport is narrower than this, the page will scroll horizontally instead of shrinking the cards. */
@media (min-width: 721px) {
  .app {
    min-width: 774px;
  }
}

@media (min-width: 1840px) {
  html:not(.ads-disabled) {
    --app-shell-width: min(
      var(--app-ultrawide-max),
      calc(100vw - (2 * (var(--ad-column-width, 160px) + var(--ad-column-gap))))
    );
  }
}

.plannerPage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 16px;
  isolation: isolate;
}

.plannerHeader,
.plannerLower {
  width: 100%;
  min-height: 0;
}

.plannerHeader {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: var(--header-size);
  padding-top: 6px;
  padding-bottom: 12px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.plannerHeader > .top-row {
  flex: 1 1 auto;
  min-height: 0;
}

.plannerLower {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  overflow: visible;
  position: relative;
  z-index: 1;
  margin-top: 0;
  transform: none;
}


.app.app-expanded {
  max-height: none;
  height: auto;
  overflow: visible;
}

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

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.header-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.header-menu-toggle {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--ink);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  font-weight: 800;
  letter-spacing: 2px;
}

.header-menu-toggle:hover {
  background: var(--accent-soft);
}

.header-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.2s ease, max-height 0.25s ease;
  max-height: 0;
  overflow: hidden;
  z-index: 15;
  min-width: 240px;
}

.header-menu.header-menu-open .header-menu-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  max-height: 1000px;
}

.header-menu-panel .btn,
.header-menu-panel .header-calendar-btn {
  width: 100%;
  justify-content: center;
}

.header-menu-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-menu-link,
.header-menu-item,
.header-menu-subitem {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.header-menu-link:hover,
.header-menu-item:hover,
.header-menu-subitem:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateX(-1px);
}

.header-menu-subgroup {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header-menu-subtitle {
  font-size: 0.82rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
  padding: 0 2px;
}

.header-menu-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 4px 0;
}

.settings-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.settings-modal.is-open {
  display: flex;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(4px);
}

.settings-dialog {
  position: relative;
  background: #ffffff;
  border: 1px solid #e4e7ef;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.15);
  padding: 18px 18px 20px;
  width: min(680px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}

.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.settings-label {
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  color: #6b7280;
  text-transform: uppercase;
  font-weight: 800;
}

.settings-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-ink);
}

.settings-subtitle {
  color: var(--ink-muted);
  margin-top: 2px;
}

.settings-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  min-height: 260px;
}

.settings-nav {
  background: #f7f8fc;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-nav-item {
  border: 1px solid #dfe4f0;
  background: linear-gradient(180deg, #ffffff, #f7f8fc);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  font-weight: 700;
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.settings-nav-item:hover {
  background: #e8edff;
  border-color: #cfd8ec;
}

.settings-nav-active {
  background: #e3e9ff;
  border-color: #bfcdfd;
  color: #1d4ed8;
}

.settings-panels {
  background: #fdfefe;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  padding: 12px;
  min-height: 240px;
}

.settings-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.settings-panel-active {
  display: flex;
}

.settings-panel-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-ink);
}

.settings-panel-text {
  color: var(--ink-muted);
  margin: 0;
}

.settings-theme-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.settings-theme-item {
  border: 1px solid #dfe4f0;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #fff;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.settings-theme-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: #cfd8ec;
}

.settings-theme-active {
  border-color: #bfcdfd;
  box-shadow: 0 12px 26px rgba(59, 130, 246, 0.12);
}

.settings-theme-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: var(--swatch, #dbeafe);
}

.settings-theme-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-theme-name {
  font-weight: 800;
  color: var(--accent-ink);
}

.settings-theme-subtitle {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.settings-colors-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.settings-color-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e4e7ef;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fff;
}

.settings-color-label {
  font-weight: 700;
  color: var(--accent-ink);
}

.settings-color-input {
  width: 58px;
  height: 36px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.settings-colors-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.settings-preview {
  margin-top: 10px;
  border: 1px solid #e4e7ef;
  border-radius: 12px;
  padding: 10px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-preview-title {
  font-weight: 800;
  color: var(--accent-ink);
}

.settings-preview-label {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.settings-pref-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.settings-pref-row label {
  font-weight: 700;
  color: var(--accent-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-pref-row select,
.settings-pref-row input {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 1rem;
  background: var(--surface-strong);
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-soft);
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      padding: 4px;
      box-shadow: var(--shadow-soft);
    }

.header-quick-dropdown {
  position: relative;
  margin-left: 8px;
}

.header-quick-trigger {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.header-quick-dropdown:hover .header-quick-trigger,
.header-quick-trigger:focus-visible,
.header-quick-dropdown.quick-open .header-quick-trigger {
  background: var(--surface-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.header-quick-caret {
  color: #6b7280;
  font-size: 0.9rem;
  transition: transform 0.12s ease;
}

.header-quick-dropdown.quick-open .header-quick-caret {
  transform: rotate(180deg);
}

.header-quick-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 180px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 20px 30px rgba(15, 23, 42, 0.12);
  padding: 8px;
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}

.header-quick-dropdown:hover .header-quick-panel,
.header-quick-dropdown.quick-open .header-quick-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.header-quick-item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  transition: background 0.12s ease, color 0.12s ease;
}

.header-quick-item:hover,
.header-quick-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.confidence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-soft);
}

.confidence-toggle-btn {
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.confidence-toggle-btn:hover {
  background: var(--accent-soft);
  transform: translateY(-0.5px);
}

.confidence-toggle-active {
  background: #ffffff;
  color: #234fce;
  box-shadow: 0 8px 16px rgba(35, 79, 206, 0.12);
}

    .view-toggle-btn {
      border: none;
      background: transparent;
      color: var(--accent-ink);
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
    }

    .view-toggle-btn:hover {
      background: var(--accent-soft);
      transform: translateY(-0.5px);
    }

    .view-toggle-active {
      background: #ffffff;
      color: #234fce;
      box-shadow: 0 8px 16px rgba(35, 79, 206, 0.12);
    }

    .view-menu-btn {
      border: 1px solid #dfe4f0;
      background: #ffffff;
      color: var(--accent-ink);
      border-radius: 12px;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .view-menu-btn:hover {
      background: var(--accent-soft);
    }

    .view-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      background: #ffffff;
      border: 1px solid #e4e7ef;
      border-radius: 10px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
      padding: 6px;
      display: grid;
      gap: 4px;
      min-width: 180px;
      z-index: 10;
    }

    .view-menu-item {
      border: none;
      background: transparent;
      border-radius: 8px;
      padding: 8px 10px;
      text-align: left;
      font-size: 0.86rem;
      color: var(--accent-ink);
      cursor: pointer;
    }

    .view-menu-item:hover {
      background: var(--accent-soft);
      color: #1d4ed8;
    }

    .theme-switcher {
      position: relative;
    }

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 12px;
      border: 1px solid var(--border-subtle);
      background: var(--surface-strong, #ffffff);
      color: var(--ink);
      padding: 8px 10px;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
      min-width: 170px;
    }

    .theme-toggle:hover {
      background: var(--accent-soft);
      border-color: var(--accent-soft-hover);
    }

    .theme-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 8px 14px rgba(15, 23, 42, 0.18);
      flex-shrink: 0;
    }

    .theme-label {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--accent-ink);
      flex: 1;
      min-width: 0;
      text-align: left;
    }

    .theme-caret {
      font-size: 0.7rem;
      color: var(--ink-muted);
    }

    .theme-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      background: var(--surface-strong, #ffffff);
      border: 1px solid var(--border-strong, #e4e7ef);
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
      padding: 6px;
      display: grid;
      gap: 6px;
      min-width: 220px;
      z-index: 12;
    }

    .theme-menu[hidden] {
      display: none !important;
    }

    .theme-option {
      border: 1px solid transparent;
      background: transparent;
      border-radius: 10px;
      padding: 8px 10px;
      text-align: left;
      font-size: 0.88rem;
      color: var(--ink);
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .theme-option:hover {
      background: var(--accent-soft);
      color: var(--accent-ink);
    }

    .theme-option-active {
      background: var(--surface-soft);
      border: 1px solid var(--accent-soft);
    }

    .theme-option-dot {
      width: 14px;
      height: 14px;
      border-radius: 999px;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    }

    .theme-option-subtitle {
      display: block;
      font-size: 0.75rem;
      color: var(--ink-muted);
      margin-top: 2px;
    }

    .theme-option-name {
      display: block;
      font-weight: 700;
      line-height: 1.2;
    }

    .header-main h1 {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 1.6rem;
      margin: 0 0 4px;
      color: var(--accent-ink);
      letter-spacing: 0.015em;
      font-weight: 600;
    }

.subtitle {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 2px 0 0;
}

.session-header {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 12px;
  margin: 12px auto 12px;
  width: min(1200px, 96vw);
}

.session-header .session-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.session-header .session-stat {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 2px;
}

.session-header .session-stat-label {
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.session-header .session-stat-value {
  font-weight: 700;
  font-size: 16px;
}

.session-card {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.session-card-left {
  display: grid;
  gap: 4px;
}

.session-card-label {
  color: var(--ink-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.session-card-title {
  font-size: 18px;
  font-weight: 700;
}

.session-card-subtitle {
  color: var(--ink-muted);
}

.session-card-right {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.session-card-timer {
  font-size: 28px;
  font-weight: 700;
}

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

.session-header-compact {
  grid-template-columns: 1fr;
}

body.session-header-mounted #focusCard {
  display: none;
}

    .header-stats-btn {
      padding-inline: 14px;
      border-radius: 14px;
    }

.btn {
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.08s ease;
  white-space: nowrap;
}

    .btn[disabled] {
      opacity: 0.42;
      cursor: not-allowed;
      box-shadow: none;
    }

.btn:not([disabled]):hover {
  background: color-mix(in srgb, var(--accent) 85%, #000000 15%);
  transform: translateY(-0.5px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

    .btn:not([disabled]):active {
      transform: translateY(0);
      box-shadow: none;
    }

.btn-secondary {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--ink);
}

    .btn-secondary:hover {
      background: var(--accent-soft);
      box-shadow: none;
    }

    @media (max-width: 720px) {
      .header-row {
        flex-direction: column;
        align-items: flex-start;
      }
      .header-actions {
        width: 100%;
        flex-wrap: wrap;
      }
      .theme-switcher,
      .theme-toggle {
        width: 100%;
      }
      .theme-menu {
        width: 100%;
        min-width: 0;
      }
      .view-toggle {
        width: 100%;
        justify-content: center;
      }
      .header-stats-btn {
        width: 100%;
      }
      .header-stats-btn {
        text-align: center;
      }
    }

    /* Top row: summary + focus */

			    .top-row {
			      display: grid;
			      grid-template-columns: repeat(2, minmax(0, 1fr));
			      grid-template-areas: "summary focus";
			      gap: 10px;
			      align-items: stretch;
			      min-height: 0;
			      overflow: visible;
			    }

	    .summary-card {
	      grid-area: summary;
	    }

	    .focus-card {
	      grid-area: focus;
	    }

	    .plannerHeader .summary-card,
	    .plannerHeader .focus-card {
	      min-height: 0;
	      min-width: 0;
	    }

	    .plannerHeader .summary-card {
	      overflow-x: hidden;
	      overflow-y: auto;
	    }

	    .plannerHeader .focus-card {
	      overflow: hidden;
	    }

	    .plannerHeader .focus-card .focus-main {
	      flex: 1 1 auto;
	      min-height: 0;
	      overflow-x: hidden;
	      overflow-y: auto;
	    }

    .top-ad-slot {
      grid-area: ad;
    }

	    @media (min-width: 1060px) and (max-width: 1839px) {
	      .top-row {
	        grid-template-columns: minmax(200px, 1fr) minmax(300px, 1fr) minmax(420px, 1fr);
	        grid-template-areas: "ad summary focus";
	      }

      .top-ad-slot {
        display: block;
      }
	    }

    @media (max-width: 960px) {
      .top-row {
        grid-template-columns: 1fr;
        grid-template-areas:
          "summary"
          "focus";
      }
    }

    @media (max-height: 720px) {
      /* header layout unchanged; preserve default top-row */
    }

    /* Summary card */

    .summary-card {
      flex: 1.3;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(239, 243, 255, 0.9), #ffffff);
      padding: 10px 12px 12px;
      border: 1px solid rgba(228, 232, 239, 0.9);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    }

    .summary-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 6px;
      flex-wrap: wrap;
    }

    .summary-metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .summary-block {
      min-width: 110px;
    }

    .summary-label {
      font-size: 0.68rem;
      color: var(--ink-muted);
      margin-bottom: 2px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .summary-value {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--ink);
    }

    .summary-progress {
      margin-top: 6px;
    }

    .summary-progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.78rem;
      color: var(--ink-muted);
      margin-bottom: 6px;
    }

    .summary-progress-bar {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: var(--surface-soft);
      overflow: hidden;
    }

    .summary-progress-fill {
      height: 100%;
      width: 0%;
      transition: width 0.2s ease;
    }

    .summary-goal {
      margin-top: 8px;
      padding: 8px 10px;
      border-radius: 14px;
      border: 1px dashed var(--panel-border);
      background: var(--panel-bg);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 70%, transparent);
    }

    .summary-goal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .summary-goal-line {
      display: flex;
      align-items: baseline;
      gap: 6px;
      font-size: 0.95rem;
      color: var(--accent-ink);
    }

    .summary-goal-amount {
      font-weight: 700;
    }

    .summary-goal-divider {
      color: var(--ink-muted);
      font-weight: 600;
    }

    .summary-goal-total {
      color: var(--ink-muted);
      font-weight: 600;
    }

    .summary-goal-track {
      margin-top: 6px;
      width: 100%;
      height: 10px;
      background: var(--surface-soft);
      border-radius: 999px;
      overflow: hidden;
      position: relative;
    }

    .summary-goal-fill {
      position: absolute;
      inset: 0;
      width: 0%;
      background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 75%, var(--surface-strong) 25%),
        color-mix(in srgb, var(--accent) 45%, var(--surface-strong) 55%)
      );
      box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent);
      transition: width 0.2s ease;
    }

    .summary-goal-footer {
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .summary-goal-hint {
      font-size: 0.78rem;
      color: var(--ink-muted);
    }

    .summary-streak {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 12px;
      background: var(--surface-strong);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-soft);
    }

    .summary-streak-icon {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: color-mix(in srgb, var(--accent) 16%, var(--surface-strong));
      font-size: 0.9rem;
    }

    .summary-streak-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .summary-streak-label {
      font-size: 0.68rem;
      color: var(--ink-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .summary-streak-value {
      font-size: 0.84rem;
      font-weight: 600;
      color: var(--accent-ink);
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .summary-streak-sep {
      color: #cbd5e1;
    }

    /* Today's study bar */

    .summary-study {
      margin-top: 8px;
    }

    .summary-study-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.76rem;
      color: var(--ink-muted);
      margin-bottom: 6px;
    }

.summary-study-bar {
  width: 100%;
  height: 8px;
  border-radius: var(--study-bar-radius, 999px);
  background: var(--study-bar-bg, #e8ecf7);
  overflow: hidden;
  display: flex;
  border: 1px solid rgba(99, 102, 241, 0);
  transition: border-color 0.08s ease, box-shadow 0.08s ease;
  cursor: pointer;
}

.summary-study-bar:hover {
  border-color: rgba(37, 99, 235, 0.7);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.summary-study-bar:focus-visible {
  outline: none;
  border-color: rgba(37, 99, 235, 0.85);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

    .summary-study-segment {
      height: 100%;
    }

    .summary-study-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px;
      font-size: 0.7rem;
      color: var(--ink-muted);
    }

    .summary-study-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .summary-study-legend-swatch {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #9ca3af;
    }

    /* Focus timer card */

    .focus-card {
      flex: 1;
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, #ffffff, rgba(244, 246, 255, 0.9));
      border: 1px solid rgba(228, 232, 239, 0.9);
      padding: 10px 12px 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 4px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* Colors for study / pause / break */

    #focusCard.focus-study-active {
      background: linear-gradient(145deg, #f1fbf6, #ffffff);
      border-color: #a7d7c5;
      box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.16), 0 12px 30px rgba(22, 163, 74, 0.16);
    }

    #focusCard.focus-study-paused {
      background: linear-gradient(145deg, #fff8ec, #ffffff);
      border-color: #fbbf24;
      box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), 0 12px 30px rgba(251, 191, 36, 0.16);
    }

    #focusCard.focus-break-active {
      background: linear-gradient(145deg, #eef6ff, #ffffff);
      border-color: #c4ddf4;
      box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 12px 30px rgba(59, 130, 246, 0.12);
    }

    .focus-main {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 12px;
    }

    .focus-left {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .focus-label {
      font-size: 0.72rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 2px;
    }

    .focus-title {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 0;
      word-break: break-word;
    }

    .focus-subtitle {
      font-size: 0.8rem;
      color: var(--ink-muted);
      word-break: break-word;
    }

    .focus-session-controls {
      display: flex;
      justify-content: flex-start;
      gap: 8px;
      flex-wrap: wrap;
      min-height: 28px;
      margin-top: 4px;
    }

    .focus-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
      min-width: 180px;
    }

.focus-timer-box {
  width: 170px;
  height: 170px;
  border-radius: 16px;
      border: 1px solid var(--border-strong);
      background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent-soft) 45%, var(--surface-strong)), var(--surface-strong));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
  position: relative;
}

.focus-timer-label-small {
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
  margin-top: 2px;
}

.focus-timer-display {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 2.3rem;
  font-weight: 650;
  color: var(--accent-ink);
  line-height: 1.1;
}

.focus-timer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow-soft);
}

.focus-timer-mode-btn {
  border: none;
  background: transparent;
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
}

.focus-timer-mode-btn:hover {
  background: var(--accent-soft);
  transform: translateY(-0.5px);
}

.focus-timer-active {
  background: var(--surface-strong);
  color: var(--accent-ink);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent);
}

.focus-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 4px;
}

.focus-card.settings-open .focus-main,
.focus-card.settings-open .focus-bottom {
  opacity: 0;
  pointer-events: none;
}

.focus-card.settings-open .focus-inline-settings {
  display: flex !important;
}

.focus-break-buttons {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

    .focus-break-btn {
      border-radius: 12px;
      border: 1px solid var(--border-strong);
      background: var(--surface-soft);
      color: var(--ink);
      font-size: 0.74rem;
      padding: 6px 10px;
      cursor: pointer;
      transition: background 0.08s ease, border-color 0.08s ease, color 0.08s ease, transform 0.08s ease;
    }

    .focus-break-btn:hover {
      background: var(--surface-strong);
      border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
      color: var(--accent-ink);
      transform: translateY(-0.5px);
    }

    /* Bigger Pause / Stop buttons in focus card */

    .focus-main-btn {
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 0.8rem;
      font-weight: 500;
      border: 1px solid var(--border-strong);
      background: var(--surface-soft);
      color: var(--ink);
      cursor: pointer;
      transition: background 0.1s ease, border-color 0.1s ease, transform 0.08s ease, box-shadow 0.08s ease;
    }

    .focus-main-btn:hover {
      background: var(--surface-strong);
      border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
      transform: translateY(-0.5px);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
    }

    .focus-main-btn:active {
      transform: translateY(0);
      box-shadow: none;
    }

    .focus-main-btn-primary {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
    }

    .focus-main-btn-primary:hover {
      background: color-mix(in srgb, var(--accent) 80%, var(--ink));
      border-color: color-mix(in srgb, var(--accent) 80%, var(--ink));
    }

    .focus-main-btn-danger {
      background: #ef4444;
      color: #ffffff;
      border-color: #b91c1c;
    }

    .focus-main-btn-danger:hover {
      background: #b91c1c;
      border-color: #7f1d1d;
    }

    @media (max-width: 900px) {
      .focus-main {
        flex-direction: row;
      }

      .focus-right {
        align-items: flex-end;
      }
    }

@media (max-width: 640px) {
  .focus-main {
    flex-direction: column;
  }
      .focus-right {
        align-items: center;
        width: 100%;
        min-width: 0;
      }
      .focus-timer-box {
        width: min(220px, 100%);
        height: 170px;
      }
  .focus-timer-display {
    font-size: 2.3rem;
  }
}

/* Laptop-friendly (14–16\") layout tuning */
@media (max-width: 1440px) {
  .app {
    width: 95%;
    max-width: 95%;
    min-width: min(var(--app-desktop-min), 95%);
  }

  .layout-row {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
  }

  .today-sidebar {
    width: 330px;
    max-width: 330px;
  }

  .subject-table {
    grid-auto-columns: minmax(240px, 260px);
    gap: 8px;
  }
}

@media (max-width: 1280px) {
  .layout-row {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
  }

  .today-sidebar {
    width: 300px;
    max-width: 300px;
    top: 8px;
  }

  .subject-table {
    grid-auto-columns: minmax(220px, 240px);
    gap: 6px;
  }

  .table-wrapper {
    padding: 6px;
  }
}

    /* Focus MAX mode (app-wide) */

    .app.focus-maximized .summary-card {
      display: none;
    }

    .app.focus-maximized .focus-card {
      flex: 1 1 100%;
    }

    .app.focus-maximized .focus-timer-box {
      width: 260px;
      height: 260px;
    }

    .app.focus-maximized .focus-timer-display {
      font-size: 3.1rem;
    }

    /* Controls row placeholder */

    .controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin-bottom: 14px;
    }

    /* Main + sidebar layout */

.layout-row {
  display: grid;
  grid-template-columns: minmax(0, 2.7fr) clamp(240px, 24vw, 360px);
  gap: clamp(12px, 1.2vw, 18px);
  align-items: stretch;
  padding-bottom: 12px;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
}

/* Keep Subjects + Today's focus side-by-side on non-phone layouts.
   When the viewport gets narrow, preserve proportions and allow horizontal overflow instead of stacking. */
.app:not(.subjects-maximized) #layoutRow.layout-row:not(.today-wide):not(.today-full) {
  grid-template-columns: minmax(0, 2.7fr) clamp(240px, 24vw, 360px);
  gap: clamp(12px, 1.2vw, 18px);
}

.app:not(.subjects-maximized) #todaySidebar.today-sidebar {
  width: auto;
  max-width: none;
}

.app.app-expanded .layout-row {
  align-items: stretch;
}
.subjects-maximized .plannerHeader {
  display: none;
}
.subjects-maximized .layout-row {
  grid-template-columns: minmax(0, 1fr);
}
.subjects-maximized .top-row {
  display: none;
}

    .layout-row.today-wide {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .layout-row.today-full {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Due soon lane */

    .due-soon-card {
      margin-bottom: 10px;
      padding: 8px 10px;
      border-radius: var(--radius-md);
      background: #ffffff;
      border: 1px solid #edf0f7;
      box-shadow: none;
    }

    .due-soon-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
    }

    .due-soon-title {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-weight: 650;
      color: var(--accent-ink);
      font-size: 0.9rem;
    }

    .due-soon-subtitle {
      font-size: 0.82rem;
      color: var(--ink-muted);
      margin-top: 2px;
    }

    .due-soon-hint {
      font-size: 0.76rem;
      color: var(--ink-muted);
      padding: 2px 6px;
      border-radius: 8px;
      background: #f7f8fb;
      border: 1px solid #edf0f7;
      white-space: nowrap;
    }

    .due-soon-list {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .due-soon-empty {
      font-size: 0.84rem;
      color: var(--ink-muted);
      padding: 6px 2px;
    }

    .due-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 12px;
      background: #f9fafb;
      border: 1px solid #eaeef5;
      box-shadow: none;
      min-width: 0;
    }

    .due-chip-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
      flex-shrink: 0;
    }

    .due-chip-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-width: 0;
    }

    .due-chip-label {
      font-weight: 650;
      color: var(--ink);
      font-size: 0.88rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 220px;
    }

    .due-chip-meta {
      font-size: 0.78rem;
      color: var(--ink-muted);
      display: flex;
      gap: 6px;
      align-items: center;
      white-space: nowrap;
    }

    .due-chip-due {
      padding: 2px 6px;
      border-radius: 8px;
      background: #eef2ff;
      color: #1d4ed8;
      border: 1px solid #dfe4f0;
      font-size: 0.72rem;
      font-weight: 650;
    }

    .due-chip-add {
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid #eaeef5;
      background: #ffffff;
      color: var(--accent-ink);
      cursor: pointer;
      font-weight: 600;
      transition: background 0.12s ease, transform 0.08s ease;
    }

    .due-chip-add:hover {
      background: #f5f7fb;
    }

    .due-chip-add:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .main-area {
      min-width: 0;
      min-height: 0;
      padding-bottom: 16px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }

.today-sidebar {
  min-width: 0;
  width: 100%;
  max-width: none;
  position: static;
  top: auto;
  align-self: stretch;
  max-height: none;
  min-height: 0;
  height: auto;
  display: flex;
      flex-direction: column;
      overflow: visible;
    }

    .layout-row.today-full .main-area {
      display: none;
    }

    .layout-row.today-full .today-sidebar {
      width: 100%;
      max-width: none;
      position: static;
      max-height: none;
      height: auto;
      overflow: visible;
    }

.subjects-maximized .layout-row.today-full .main-area {
  display: block;
}

.subjects-maximized .layout-row.today-full .today-sidebar {
  display: none;
}

    .today-sidebar-full {
      width: 100%;
      max-width: none;
      position: static;
      max-height: none;
      height: auto;
      overflow: visible;
    }

    .today-suggestions {
      margin: 8px 0;
      padding: 8px 10px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid #edf0f7;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .today-suggestions-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .today-suggestions-title {
      font-weight: 650;
      color: var(--accent-ink);
      font-size: 0.9rem;
    }

    .today-suggestions-subtitle {
      font-size: 0.82rem;
      color: var(--ink-muted);
      margin-top: 2px;
    }

    .today-suggestions-cap {
      font-size: 0.78rem;
      color: var(--ink-muted);
    }

    .today-suggestions-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .suggestion-card {
      border: 1px solid #edf0f7;
      border-radius: 12px;
      background: #ffffff;
      padding: 6px 8px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
      box-shadow: none;
    }

    .suggestion-left {
      display: flex;
      gap: 8px;
      min-width: 0;
      align-items: flex-start;
    }

    .suggestion-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--accent);
      margin-top: 3px;
      flex-shrink: 0;
    }

    .suggestion-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .suggestion-title {
      font-weight: 650;
      color: var(--accent-ink);
      line-height: 1.2;
      word-break: break-word;
      font-size: 0.9rem;
    }

    .suggestion-meta {
      font-size: 0.78rem;
      color: var(--ink-muted);
    }

    .suggestion-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 6px;
      border-radius: 8px;
      background: #eef2ff;
      color: #1d4ed8;
      font-weight: 650;
      font-size: 0.72rem;
      width: fit-content;
    }

    .suggestion-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .suggestion-actions .chip-btn {
      padding-inline: 10px;
    }

    .suggestion-empty {
      font-size: 0.84rem;
      color: var(--ink-muted);
      padding: 6px 2px;
    }

    .layout-row.today-wide .main-area {
      max-height: none;
      overflow: visible;
    }

    .layout-row.today-wide .table-wrapper {
      max-height: none;
      overflow: visible;
    }

    @media (max-width: 1200px) {
      .layout-row {
        grid-template-columns: minmax(0, 1fr);
      }
      .today-sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
      }
    }

    @media (max-width: 960px) {
      .layout-row.today-wide .main-area,
      .layout-row.today-wide .table-wrapper {
        max-height: none;
        overflow: visible;
      }
    }

    /* Schedule view */

    .schedule-view {
      margin-top: 18px;
      border: 1px solid rgba(228, 232, 239, 0.9);
      background: linear-gradient(145deg, #ffffff, #f7f7ff);
      border-radius: var(--radius-md);
      padding: 14px 16px 18px;
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
      max-height: none;
      overflow: visible;
    }

    .schedule-bar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .schedule-title {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--accent-ink);
    }

    .schedule-subtitle {
      font-size: 0.86rem;
      color: var(--ink-muted);
      margin-top: 4px;
    }

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

    .schedule-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f4f6fb;
      border: 1px solid #dfe4f0;
      border-radius: 12px;
      padding: 6px 8px;
    }

    .schedule-nav-btn {
      border: 1px solid #dfe4f0;
      background: #ffffff;
      color: var(--accent-ink);
      border-radius: 10px;
      width: 34px;
      height: 34px;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    }

    .schedule-nav-btn:hover {
      background: var(--accent-soft);
    }

    .schedule-range {
      min-width: 160px;
      text-align: center;
      font-size: 0.88rem;
      color: var(--ink-muted);
      font-weight: 600;
    }

    .schedule-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(150px, 1fr));
      gap: 12px;
      margin-top: 6px;
    }

    .schedule-day {
      background: #ffffff;
      border: 1px solid #e6e9f2;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .schedule-day-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 6px;
      border-bottom: 1px solid #edf0f7;
      padding-bottom: 6px;
    }

    .schedule-day-date {
      font-weight: 700;
      color: var(--accent-ink);
    }

    .schedule-day-name {
      font-size: 0.82rem;
      color: var(--ink-muted);
    }

    .schedule-day-today .schedule-day-header {
      border-color: #c9d5ff;
    }

    .schedule-day-today .schedule-day-date {
      color: #1d4ed8;
    }

    .schedule-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background-image: repeating-linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.05) 0,
        rgba(15, 23, 42, 0.05) 1px,
        transparent 1px,
        transparent 30px
      );
      background-size: 100% 32px;
      padding: 4px;
      border-radius: 8px;
    }

    .schedule-day-today .schedule-list.drag-over {
      outline: 2px dashed #60a5fa;
      outline-offset: 2px;
      background-color: rgba(96, 165, 250, 0.08);
    }

    .schedule-focus-chip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 16px;
      font-size: 0.86rem;
      font-weight: 600;
      background: #f4f6fb;
      color: #0f172a;
      border: 1px solid #dfe4f0;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .schedule-add-chip {
      justify-content: center;
      cursor: pointer;
      user-select: none;
      background: #ffffff;
      border: 1px dashed #c9d5ff;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
      color: #1d4ed8;
      font-size: 1.05rem;
      padding: 8px 10px;
    }

    .schedule-add-chip:hover {
      background: #eef2ff;
    }

    .schedule-chip-muted {
      opacity: 0.65;
    }

    .schedule-chip-subject {
      background: var(--chip-bg, #f4f6fb);
      color: var(--chip-ink, #0f172a);
      border-color: var(--chip-border, #dfe4f0);
    }

    .schedule-chip-custom {
      background: var(--chip-bg, #f1f5f9);
      color: var(--chip-ink, #0f172a);
      border-color: var(--chip-border, #cbd5e1);
    }

    .schedule-deadline-chip {
      cursor: pointer;
    }

.focus-settings-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1rem;
  display: inline-grid;
  place-items: center;
}

.summary-ring-value {
  display: none;
}

#scheduleWeekendToggleBtn {
  display: none;
}

.scroll-top-btn {
  display: none;
}

    .schedule-deadline-chip:hover {
      filter: brightness(0.985);
    }

    .schedule-deadline-check {
      width: 18px;
      height: 18px;
      cursor: pointer;
      flex: none;
      accent-color: var(--accent);
    }

    .schedule-deadline-delete {
      border: 1px solid var(--border-strong);
      background: var(--surface-soft);
      color: var(--ink);
      border-radius: 10px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      flex: none;
    }

    .schedule-deadline-delete:hover {
      background: var(--surface-strong);
    }

    .schedule-day-alert .schedule-day-header {
      background: var(--accent-soft);
      border-color: var(--accent);
      border-radius: 10px;
      padding: 8px 10px;
      margin: -4px -4px 2px;
    }

    .schedule-day-alert .schedule-day-date {
      color: var(--accent-ink);
    }

    .schedule-day-alert .schedule-day-name {
      color: var(--accent-ink);
    }

    .schedule-deadline-deadline {
      --chip-bg: color-mix(in srgb, var(--accent) 16%, var(--surface-strong));
      --chip-border: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
      --chip-ink: var(--accent-ink);
    }

    .schedule-deadline-exam {
      --chip-bg: color-mix(in srgb, var(--accent) 20%, var(--surface-strong));
      --chip-border: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
      --chip-ink: var(--accent-ink);
    }

    .schedule-deadline-study {
      --chip-bg: color-mix(in srgb, var(--accent) 14%, var(--surface-strong));
      --chip-border: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
      --chip-ink: var(--accent-ink);
    }

    .schedule-deadline-reminder {
      --chip-bg: var(--surface-soft);
      --chip-border: var(--border-strong);
      --chip-ink: var(--ink);
    }

    .schedule-chip-label {
      flex: 1;
      min-width: 0;
      word-break: break-word;
    }

    .schedule-chip-study {
      border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-strong));
      background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
      color: var(--accent-ink);
      padding: 6px 10px;
      border-radius: 10px;
      font-size: 0.78rem;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: 0 6px 12px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    .schedule-chip-study:hover {
      background: color-mix(in srgb, var(--accent) 24%, var(--surface-strong));
    }

    .schedule-chip-active {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 16%, var(--surface-strong));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 20px color-mix(in srgb, var(--accent) 20%, transparent);
    }

    .schedule-chip-done {
      opacity: 0.45;
      filter: grayscale(0.3);
    }


    .schedule-focus-chip.dragging {
      opacity: 0.6;
    }

    .schedule-focus-chip.drag-over {
      outline: 2px dashed var(--accent);
      outline-offset: 2px;
    }

    .schedule-empty {
      font-size: 0.84rem;
      color: var(--ink-muted);
      padding: 8px 4px;
    }

    .schedule-task-subtasks {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .schedule-task-all {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 10px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: var(--surface-strong);
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
    }

    .schedule-task-all input {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    .schedule-task-row {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: var(--surface-soft);
    }

    .schedule-task-row-done .schedule-task-label {
      text-decoration: line-through;
      color: var(--ink-muted);
    }

    .schedule-task-label {
      font-size: 0.9rem;
      color: var(--ink);
      word-break: break-word;
    }

    .schedule-task-empty {
      font-size: 0.88rem;
      color: var(--ink-muted);
      padding: 6px 0;
    }

    /* Today list */

    .today-section {
      border: 1px solid rgba(228, 232, 239, 0.9);
      background: linear-gradient(145deg, #ffffff, rgba(246, 248, 255, 0.9));
      border-radius: calc(var(--radius-md) + 4px);
      padding: 14px 16px;
      margin-bottom: 16px;
      box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
      width: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow: visible;
      flex: 1;
      min-height: 0;
      padding-bottom: 16px;
    }

.today-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  position: static;
  padding: 6px 0 8px;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(228, 232, 239, 0.85);
}

.today-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.today-day-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  background: #f4f6fb;
  border: 1px solid #dfe4f0;
  border-radius: 12px;
  padding: 6px 8px;
}

.today-day-nav-btn {
  border: 1px solid #dfe4f0;
  background: #ffffff;
  color: var(--accent-ink);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.today-day-nav-btn:hover {
  background: var(--accent-soft);
}

.today-day-nav-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.today-day-nav-label {
  min-width: 0;
  width: 100%;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

    .today-header h2 {
      margin: 0;
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 1.1rem;
      color: var(--accent-ink);
    }

    .today-subtitle {
      margin: 4px 0 0;
      color: var(--ink-muted);
      font-size: 0.86rem;
    }

.today-dropzone {
  border: 1px dashed #cfd6ea;
  background: #f4f6fb;
  border-radius: 12px;
  padding: 14px;
      color: var(--ink-muted);
      text-align: center;
      transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
    }

.today-dropzone.today-dropzone-readonly {
  opacity: 0.75;
  cursor: not-allowed;
}

    .today-dropzone-active {
      border-color: #60a5fa;
      background: #e5ecff;
      color: #1d4ed8;
    }

.today-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

/* --- Layout safety overrides: prevent internal vertical scroll/overlap --- */
.plannerLower,
.plannerLower .layout-row,
.plannerLower .main-area,
.plannerLower .table-wrapper,
.plannerLower .today-sidebar,
.plannerLower .today-section,
.plannerLower #todayList,
.plannerLower #subjectTable {
  max-height: none !important;
  height: auto;
  overflow-y: visible !important;
}

.plannerLower .today-sidebar {
  position: static !important;
  top: auto !important;
  margin-top: 0 !important;
}

.plannerLower .table-wrapper {
  overflow-x: auto;
}

/* Guard against sticky/positioned elements from responsive overrides */
.plannerLower .today-sidebar,
.plannerLower .today-section,
.plannerLower .layout-row,
.plannerLower .main-area {
  position: static !important;
}

.plannerLower .layout-row {
  margin-top: 0 !important;
}


.today-list.today-list-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      grid-auto-rows: clamp(260px, 34vh, 360px);
      gap: 22px;
      align-items: stretch;
      padding: 2px 2px 18px;
      box-sizing: border-box;
    }

.expand-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--border-strong, #dfe4f0);
  background: var(--accent, #2f62f4);
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  z-index: 600;
}

.expand-btn:hover {
  background: var(--accent-ink, #234fce);
}

.today-list.today-list-grid .today-item {
      display: flex;
      flex-direction: column;
      min-height: 260px;
      height: 100%;
      max-height: none;
      overflow: hidden;
      writing-mode: horizontal-tb;
      word-wrap: break-word;
      white-space: normal;
      /* Keep shadows minimal in the tight grid to avoid “overlap” between rows. */
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    }

    .today-list.today-list-grid .today-item-top {
      flex-shrink: 0;
    }

    .today-list.today-list-grid .today-subtasks {
      flex: 1;
      min-height: 0;
      max-height: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* In the fixed-height grid, don't cap the subtasks wrapper itself; let the list inside scroll. */
    .today-list.today-list-grid .today-subtasks.today-subtasks-scroll {
      max-height: none;
      overflow: hidden;
    }

    .today-list.today-list-grid .today-subtasks-list {
      flex: 1;
      min-height: 0;
      overflow: auto;
      scrollbar-gutter: stable;
    }

    /* Make grid cards more compact; subtasks will scroll when they hit the height cap. */
    .today-list.today-list-grid .today-subtasks {
      padding: 8px;
      gap: 8px;
    }

    .today-list.today-list-grid .today-subtask-row {
      padding: 7px 9px;
    }

    .today-list.today-list-grid .today-actions .chip-btn,
    .today-list.today-list-grid .today-actions .today-remove-btn {
      padding: 9px 10px;
      font-size: 0.88rem;
      border-radius: 10px;
    }

    /* (intentionally no special-case layout for maximized Today grid) */

    .today-done-section {
      border: 1px solid var(--border-strong);
      border-radius: 12px;
      padding: 10px;
      background: var(--surface-soft);
      box-shadow: inset 0 6px 14px color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .today-done-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .today-done-title {
      font-weight: 600;
      color: #0f172a;
    }

    .today-done-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .today-done-list .today-item {
      padding: 10px;
      gap: 8px;
      border-radius: 10px;
      border-width: 1px;
      border-left-width: 4px;
      box-shadow: none;
      opacity: 0.8;
    }

    .today-done-list .today-item-top {
      grid-template-columns: minmax(0, 1fr);
    }

    .today-done-section.collapsed .today-done-list {
      display: none;
    }

    .today-empty {
      border: 1px dashed #d1d5db;
      border-radius: 10px;
      padding: 10px;
      color: #9ca3af;
      background: #fafaf9;
      text-align: center;
      font-size: 0.85rem;
    }

.today-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  position: relative;
  border-radius: 14px;
  border: 2px solid var(--border-strong);
  background: var(--surface-strong);
  box-shadow: var(--shadow-soft);
  border-left: 10px solid var(--todo-accent, #4f46e5);
  background-image: none;
}

.today-item.today-item-slim {
  gap: 8px;
  padding: 10px 12px;
}

.today-item.today-item-slim .today-item-top {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 10px;
  align-items: baseline;
}

.today-item.today-item-slim .today-actions {
  width: auto;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: baseline;
}

.today-item.today-item-slim .today-actions .today-timer {
  margin-right: 0;
  min-width: 0;
  text-align: right;
}

.today-slim-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 2px;
}

.today-item.today-item-slim .today-slim-footer .chip-btn {
  padding: 9px 12px;
  font-size: 0.86rem;
  border-radius: 10px;
}

.today-item.today-item-slim-expanded .today-subtasks {
  margin-top: 4px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  background: var(--surface-soft);
}

.today-item.today-item-slim.today-item-clickable {
  cursor: pointer;
}

.today-remove-x {
  border: none;
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  backdrop-filter: blur(4px);
  color: #6b7280;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 2px 6px;
  border-radius: 999px;
  transition: background 0.08s ease, color 0.08s ease;
}

.today-item.today-item-slim .today-remove-x {
  position: absolute;
  top: 10px;
  right: 12px;
}

.today-item.today-item-slim .today-actions input[type="checkbox"] {
  margin-top: 1px;
}

.today-remove-x:hover {
  background: rgba(254, 226, 226, 0.9);
  color: #b91c1c;
}

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

    .layout-row:not(.today-wide) .today-item-top {
      grid-template-columns: minmax(0, 1fr);
    }

    .today-item-done {
      opacity: 0.55;
      filter: grayscale(0.2);
      border-color: rgba(15, 23, 42, 0.12);
    }

    .today-item-missing {
      border-style: dashed;
      background: #f9fafb;
    }

    .today-item-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .today-color-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex-shrink: 0;
      border: 1px solid #e5e7eb;
    }

    .today-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

.today-title {
      font-size: 0.92rem;
      font-weight: 750;
      color: var(--accent-ink);
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      max-width: 100%;
    }

    .layout-row:not(.today-wide) .today-title {
      font-size: 1rem;
    }

    .today-meta {
      font-size: 0.78rem;
      color: var(--ink-muted);
      word-break: break-word;
    }

.today-actions {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      width: 100%;
      min-width: 0;
      max-width: none;
    }

    .today-actions .today-timer {
      margin-right: auto;
      min-width: 0;
      text-align: left;
    }

    .layout-row:not(.today-wide) .today-actions {
      width: 100%;
    }

.today-actions .chip-btn,
.today-actions .today-remove-btn {
      width: auto;
      text-align: center;
      padding: 10px 12px;
      font-size: 0.88rem;
      border-radius: 10px;
      flex: 0 0 auto;
    }

.today-note-box {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
  color: #92400e;
  display: grid;
  gap: 6px;
}

.today-note-title {
  font-weight: 700;
  font-size: 0.85rem;
}

.today-note-body {
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.today-note-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

.today-note-dismiss {
  align-self: start;
  border: none;
  background: #fef08a;
  color: #92400e;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 600;
}

.today-reorder-actions {
  display: inline-flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s ease, transform 0.12s ease, max-width 0.12s ease, max-height 0.12s ease;
}

.today-item:hover .today-reorder-actions,
.today-item:focus-within .today-reorder-actions {
  opacity: 1;
  pointer-events: auto;
  max-width: 200px;
  max-height: 44px;
  transform: translateY(0);
}

.today-reorder-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  box-shadow: none;
}

@keyframes studyFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(47, 98, 244, 0.0);
  }
  10% {
    box-shadow: 0 0 0 4px rgba(47, 98, 244, 0.28);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(47, 98, 244, 0.0);
  }
}

.study-flash {
  animation: studyFlash 0.9s ease-out;
}

@media (max-width: 1100px) {
  .today-item-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
  }

  .today-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: none;
  }

  .today-actions .chip-btn,
  .today-actions .today-remove-btn {
    flex: 1 1 48%;
    min-width: 140px;
  }
}

@media (max-width: 640px) {
  .today-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .today-header-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .today-actions {
    justify-content: flex-start;
    align-items: stretch;
    max-width: none;
    min-width: 0;
  }
  .today-actions .chip-btn,
  .today-actions .today-remove-btn {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
      .today-item-top {
        grid-template-columns: minmax(0, 1fr);
      }
      .today-actions {
        max-width: 100%;
      }
    }

    .today-subtasks {
      border: 1px solid var(--border-strong);
      border-radius: 14px;
      padding: 10px;
      background: var(--surface-soft);
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: max-height 0.15s ease, opacity 0.15s ease;
    }

    .today-subtasks.today-subtasks-scroll {
      max-height: 220px;
      overflow: auto;
    }

    .today-subtasks.collapsed {
      display: none;
    }

    .today-subtasks-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .today-subtasks-empty {
      color: var(--ink-muted);
      font-size: 0.82rem;
    }

    .today-subtask-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 12px;
      background: var(--surface-strong);
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow-soft);
    }

    .today-subtask-done .today-subtask-label {
      text-decoration: line-through;
      color: var(--ink-muted);
    }

    .today-subtask-label {
      font-size: 0.9rem;
      color: var(--ink);
      word-break: break-word;
    }

    .today-subtask-remove {
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      font-size: 1rem;
      padding: 4px 8px;
      border-radius: 999px;
      transition: background 0.08s ease, color 0.08s ease;
    }

    .today-subtask-remove:hover {
      background: #fee2e2;
      color: #b91c1c;
    }

    .today-subtask-add {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 6px;
      align-items: center;
    }

    .today-subtask-add input {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #0f172a;
      font-size: 0.88rem;
      outline: none;
    }

    .today-subtask-add input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    .today-subtask-add-btn {
      border-radius: 10px;
      padding: 8px 12px;
      border: 1px solid #d1d5db;
      background: #e0e7ff;
      color: #1d4ed8;
      cursor: pointer;
      font-weight: 700;
      transition: background 0.08s ease, border-color 0.08s ease, transform 0.08s ease;
    }

    .today-subtask-add-btn:hover {
      background: #cbd5ff;
      border-color: #a5b4fc;
      transform: translateY(-0.5px);
    }

    .today-subtasks-toggle {
      align-self: flex-start;
      border: 1px solid #dfe4f0;
      background: #e0e7ff;
      color: #1d4ed8;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 0.82rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .today-subtasks-toggle:hover {
      background: #cbd5ff;
    }

    .today-remove-btn {
      border: 1px solid #e5e7eb;
      background: #f9fafb;
      color: #4b5563;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 0.78rem;
      cursor: pointer;
      transition: background 0.08s ease, border-color 0.08s ease, transform 0.08s ease;
      white-space: nowrap;
    }

    .today-remove-btn:hover {
      background: #fee2e2;
      border-color: #fecaca;
      color: #b91c1c;
      transform: translateY(-0.5px);
    }

    .today-timer {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 0.78rem;
      color: #6b7280;
      min-width: 70px;
      text-align: right;
    }

    /* Filter row */

    .filter-row {
      margin-bottom: 10px;
    }

    .filter-row-inner {
      max-width: 280px;
    }

    .filter-row-inner input[type="text"] {
      width: 100%;
    }

    label {
      font-size: 0.7rem;
      color: #6b7280;
      display: block;
      margin-bottom: 2px;
    }

    input[type="text"],
    input[type="number"] {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 8px;
      border-radius: 7px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #111827;
      font-size: 0.82rem;
      outline: none;
    }

    /* Keep native pickers usable for time/datetime-local */
    input[type="time"],
    input[type="datetime-local"] {
      appearance: auto;
      -webkit-appearance: auto;
      -moz-appearance: auto;
      pointer-events: auto;
      color: inherit;
      background: #ffffff;
    }

    input[type="time"]::-webkit-calendar-picker-indicator,
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
      opacity: 1;
      display: block;
      pointer-events: auto;
      cursor: pointer;
    }

    input[type="text"]:focus,
    input[type="number"]:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    /* Rounded checkboxes */
    input[type="checkbox"] {
      appearance: none;
      width: 16px;
      height: 16px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      background: #ffffff;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    }

    input[type="checkbox"]::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: #ffffff;
      transform: scale(0);
      transition: transform 0.12s ease;
    }

    input[type="checkbox"]:checked {
      background: #2563eb;
      border-color: #1d4ed8;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
    }

    input[type="checkbox"]:checked::after {
      transform: scale(1);
    }

    input[type="checkbox"]:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    }

    /* Table / columns */

	.table-wrapper {
	  margin-top: 4px;
	  border-radius: var(--radius-md);
	  background: #ffffff;
	  border: 1px solid #e5e7eb;
  overflow-x: auto;
  overflow-y: visible;
  box-sizing: border-box;
  padding: 4px;
  width: 100%;
  cursor: grab;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
	  min-height: 0;
	}

.subject-scroll-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  z-index: 8;
}

.subject-scroll-nav.is-hidden {
  display: none;
}

.subject-scroll-btn {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-weight: 800;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transition: opacity 0.12s ease, transform 0.12s ease, background 0.12s ease;
  opacity: 0.0;
}

.table-wrapper:hover .subject-scroll-btn,
.table-wrapper:focus-within .subject-scroll-btn {
  opacity: 1;
}

.subject-scroll-btn:disabled {
  opacity: 0;
  cursor: default;
}

.subject-scroll-btn:not(:disabled):hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

@media (max-width: 960px) {
  .subject-scroll-nav {
    display: none !important;
  }
}

.table-wrapper.dragging-scroll {
  cursor: grabbing;
}

/* Subjects table: horizontal movement via header arrows only (no grab cursor). */
.table-wrapper[data-section="subjects-table"],
.table-wrapper[data-section="subjects-table"].dragging-scroll {
  cursor: default;
}

.subject-settings-modal {
  max-width: 520px;
}

.subject-settings-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.subject-settings-label {
  font-weight: 650;
  color: var(--accent-ink);
  font-size: 0.9rem;
}

.subject-settings-row input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dfe4f0;
  background: #ffffff;
  color: #0f172a;
  outline: none;
}

.subject-settings-row input[type="text"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.subject-settings-color {
  display: grid;
  gap: 10px;
}

.subject-settings-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.subject-settings-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: #d1d5db;
}

.subject-settings-preview-text {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.subject-swatch-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}

.subject-swatch-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 8px 14px rgba(15, 23, 42, 0.06);
  position: relative;
}

.subject-swatch-btn.is-selected::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.25);
}

.subject-settings-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.subject-settings-custom label {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.subject-settings-custom input[type="color"] {
  width: 44px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
}

.subject-scroll {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100%;
  width: max-content;
  flex: 1;
  min-height: 0;
}

.subject-table {
  display: grid;
  grid-auto-flow: column;
  gap: clamp(6px, 0.8vw, 12px);
  grid-auto-columns: minmax(260px, 280px);
  width: max-content;
  min-width: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--surface-soft) 85%, var(--surface-strong)) 0,
      color-mix(in srgb, var(--surface-soft) 85%, var(--surface-strong)) 36px,
      color-mix(in srgb, var(--surface-soft) 65%, var(--surface-strong)) 37px
    );
  min-height: 260px;
  overflow: visible;
}

/* Desktop: dynamic subject sizing (set via JS on non-phone, non-maximized view). */
.subject-table.subject-table-dynamic {
  grid-auto-columns: auto;
}

.subject-table.subject-table-dynamic .subject-column {
  scroll-snap-align: unset;
}

.subject-table.subject-table-dynamic .subject-column {
  min-width: 0;
  max-width: none;
  width: 100%;
}

.section-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 4px 8px;
  min-width: max-content;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface-soft);
  z-index: 6;
}

.section-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink);
}

.section-title-meta {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  display: none;
}

.section-subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.section-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: sticky;
  right: 0;
  top: 4px;
  background: var(--surface-soft);
  padding-left: 8px;
  z-index: 5;
}

.subject-scroll-head-btn {
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
  transition: background 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
}

.subject-scroll-head-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

.subject-scroll-head-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.subject-scroll-head-btn.is-hidden {
  display: none;
}

.section-max-btn {
  border: 1px solid var(--border-strong, #dfe4f0);
  background: var(--accent, #2f62f4);
  color: #ffffff;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.section-max-btn[aria-pressed="true"] {
  background: var(--accent-ink, #234fce);
}

    .subject-column {
      border: 1px solid var(--border-strong);
      padding: 10px 10px 12px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      background: var(--surface-soft);
      border-radius: 10px;
      min-width: 260px;
      max-width: 280px;
    }

    .subject-add-column {
      padding: 0;
    }

    .subject-header {
      font-family: "Space Grotesk", "Manrope", sans-serif;
      font-size: 0.86rem;
      font-weight: 600;
      color: var(--ink);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
    }

    .subject-color-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      flex-shrink: 0;
      cursor: pointer;
      outline: 2px solid transparent;
      outline-offset: 2px;
      position: relative;
      overflow: hidden;
    }

    .subject-color-dot:hover {
      outline-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
    }

    .subject-color-dot .subject-color-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      border: 0;
      padding: 0;
      margin: 0;
    }

    /* Subject color popover */
    .subject-color-popover {
      position: fixed;
      z-index: 999;
      width: 260px;
      max-width: calc(100vw - 24px);
      background: var(--surface-strong);
      border: 1px solid var(--border-strong);
      border-radius: 14px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
      padding: 12px;
    }

    .subject-color-popover-title {
      font-weight: 800;
      color: var(--ink);
      margin-bottom: 10px;
      font-size: 0.92rem;
    }

    .subject-color-swatch-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
    }

    .subject-color-swatch {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 10px;
      border: 1px solid var(--border-strong);
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .subject-color-swatch.is-active {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    .subject-color-custom-row {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 1px solid rgba(228, 232, 239, 0.95);
      border-radius: 12px;
      padding: 8px 10px;
      background: #f8fafc;
    }

    .subject-color-custom-label {
      font-weight: 700;
      font-size: 0.86rem;
      color: var(--accent-ink);
    }

    .subject-color-custom-input {
      width: 44px;
      height: 28px;
      border: 1px solid rgba(15, 23, 42, 0.14);
      border-radius: 10px;
      padding: 0;
      background: transparent;
    }

    .subject-color-strength {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px 10px;
      align-items: center;
    }

    .subject-color-strength-label {
      grid-column: 1 / -1;
      font-weight: 700;
      font-size: 0.86rem;
      color: var(--ink);
    }

    .subject-color-strength-range {
      width: 100%;
    }

    .subject-color-strength-value {
      font-weight: 800;
      color: var(--ink-muted);
      font-size: 0.85rem;
      min-width: 42px;
      text-align: right;
    }

.subject-header small {
  font-size: 0.74rem;
  color: var(--ink-muted);
  font-weight: 400;
}

.subject-max-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--ink);
  border-radius: 10px;
  padding: 4px 8px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.subject-max-btn:hover {
  background: var(--accent-soft);
}

    .subject-delete-btn {
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      font-size: 0.8rem;
      padding: 2px 6px;
      border-radius: 999px;
      transition: background 0.08s ease, color 0.08s ease;
    }

    .subject-delete-btn:hover {
      background: #fee2e2;
      color: #b91c1c;
    }

    .subject-meter {
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .subject-meter-fill {
      height: 100%;
      width: 0%;
      transition: width 0.2s ease;
    }

    .subject-column .subject-meter-fill.meter-low {
      background: var(--meter-low, linear-gradient(90deg, #f97373, #fb7185));
    }

    .subject-column .subject-meter-fill.meter-mid {
      background: var(--meter-mid, linear-gradient(90deg, #fbbf24, #facc15));
    }

    .subject-column .subject-meter-fill.meter-high {
      background: var(--meter-high, linear-gradient(90deg, #22c55e, #16a34a));
    }

    /* Subject sort controls */

    .subject-sort {
      margin-bottom: 6px;
    }

    .subject-sort-select {
      width: 100%;
      font-size: 0.72rem;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #374151;
      outline: none;
    }

    .subject-sort-select:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    .file-list {
      flex: 1;
      padding: 2px 0 4px;
      overflow-y: visible;
      scrollbar-width: thin;
      scrollbar-color: #d4d4d8 transparent;
    }

    /* Soft scrollbars */
    *::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    *::-webkit-scrollbar-thumb {
      background: rgba(15, 23, 42, 0.16);
      border-radius: 999px;
      border: 1px solid transparent;
      background-clip: content-box;
    }

    *::-webkit-scrollbar-thumb:hover {
      background: rgba(15, 23, 42, 0.22);
      background-clip: content-box;
    }

    *::-webkit-scrollbar-track {
      background: transparent;
    }

    * {
      scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
      scrollbar-width: thin;
    }

    .file-row {
      padding: 5px 6px 4px;
      margin-bottom: 3px;
      border-radius: 6px;
      background: transparent;
      border: 1px solid transparent;
      display: flex;
      flex-direction: column;
      gap: 2px;
      cursor: move;
      transition:
        background 0.06s ease,
        border-color 0.06s ease,
        transform 0.06s ease,
        opacity 0.06s ease;
    }

    .file-row:hover {
      background: #eff6ff;
      border-color: #bfdbfe;
      transform: translateY(-0.5px);
    }

    .file-row.dragging {
      opacity: 0.4;
      border-style: dashed;
      border-color: #9ca3af;
      background: #e5e7eb;
    }

    .file-row.drag-over {
      border-color: #60a5fa;
      background: #dbeafe;
    }

	    .file-row.studying {
	      background: #dcfce7;
	      border-color: #22c55e;
	    }

	    .file-row.studying .file-actions-row {
	      opacity: 0 !important;
	      pointer-events: none !important;
	      max-height: 0 !important;
	      transform: translateY(-2px) !important;
	    }

	    .app:not(.subjects-maximized) .file-row.studying .file-meta {
	      padding-right: 0;
	    }

	    .app:not(.subjects-maximized) .file-row.studying .file-actions {
	      width: 100%;
	    }

	    .file-study-actions-row {
	      display: grid;
	      grid-template-columns: 1fr 1fr;
	      gap: 6px;
	      width: 100%;
	    }

	    .file-study-actions-row .chip-btn {
	      width: 100%;
	      min-width: 0;
	      padding: 10px 12px;
	    }

	    .subjects-maximized .file-actions-row {
	      display: none !important;
	    }

	    .app:not(.subjects-maximized) .file-action-btn.file-action-add {
	      background: rgba(220, 252, 231, 0.95);
	      border-color: rgba(34, 197, 94, 0.45);
	      color: #166534;
	    }

	    .app:not(.subjects-maximized) .file-action-btn.file-action-add:hover {
	      background: rgba(187, 247, 208, 0.95);
	      border-color: rgba(34, 197, 94, 0.7);
	    }

	    .app:not(.subjects-maximized) .file-action-btn.file-action-remove {
	      background: rgba(254, 226, 226, 0.95);
	      border-color: rgba(239, 68, 68, 0.45);
	      color: #b91c1c;
	    }

	    .app:not(.subjects-maximized) .file-action-btn.file-action-remove:hover {
	      background: rgba(254, 202, 202, 0.95);
	      border-color: rgba(239, 68, 68, 0.7);
	    }


    .file-row.in-today {
      border-color: #22c55e;
      background: #ecfdf3;
    }

    .subjects-maximized .file-row.in-today {
      background: #d1fae5;
      border-color: #16a34a;
      box-shadow: 0 0 0 1px #bbf7d0;
    }

    .file-name {
      font-size: 0.8rem;
      color: #111827;
      word-break: break-word;
      font-weight: 500;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .file-notes {
      font-size: 0.74rem;
      color: #6b7280;
      word-break: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .file-time {
      font-size: 0.72rem;
      color: #9ca3af;
      word-break: break-word;
    }

	    .file-meta {
	      display: flex;
	      flex-direction: column;
	      gap: 6px;
	      font-size: 0.72rem;
	      color: #6b7280;
	      margin-top: 4px;
	    }

	    /* Compact subjects (non-maximized): keep hover actions from changing row height. */
	    .app:not(.subjects-maximized) .file-meta {
	      position: relative;
	      padding-right: 90px;
	    }

    .confidence-badge {
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 0.7rem;
      border: 1px solid transparent;
      cursor: pointer;
    }

    .conf-low {
      background: #fee2e2;
      color: #b91c1c;
      border-color: #fecaca;
    }

    .conf-mid {
      background: #fef3c7;
      color: #92400e;
      border-color: #fde68a;
    }

    .conf-high {
      background: #dcfce7;
      color: #166534;
      border-color: #bbf7d0;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      font-size: 0.68rem;
      color: #4b5563;
    }

    .pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #22c55e;
    }

    .chip-btn {
      border: none;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 0.78rem;
      cursor: pointer;
      transition: background 0.08s ease, color 0.08s ease, transform 0.08s ease;
      white-space: nowrap;
    }

    .chip-btn-danger {
      background: #fee2e2;
      color: #b91c1c;
      min-width: 60px;
      text-align: center;
    }

    .chip-btn-danger:hover {
      background: #fecaca;
      transform: translateY(-0.5px);
    }

    .chip-btn-primary {
      background: #e0f2fe;
      color: #1d4ed8;
      min-width: 80px;
      text-align: center;
    }

    .chip-btn-primary:hover {
      background: #bfdbfe;
      transform: translateY(-0.5px);
    }

    .chip-btn-success {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #a7f3d0;
    }

    .chip-btn-success:hover {
      background: #bbf7d0;
      transform: none;
    }

    .file-actions {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
    }

	.file-actions-row {
	      display: flex;
	      gap: 6px;
	      justify-content: flex-end;
	      opacity: 0;
	      pointer-events: none;
	      max-height: 0;
	      overflow: hidden;
	      transform: translateY(-2px);
	      transition: opacity 0.12s ease, transform 0.12s ease, max-height 0.12s ease;
	    }

	    .app:not(.subjects-maximized) .file-actions-row {
	      position: absolute;
	      top: 0;
	      right: 0;
	      gap: 4px;
	      max-height: none;
	      overflow: visible;
	      transform: translateY(-1px);
	      transition: opacity 0.12s ease, transform 0.12s ease;
	    }

    .file-row:hover .file-actions-row,
    .file-row:focus-within .file-actions-row {
      opacity: 1;
      pointer-events: auto;
      max-height: 44px;
      transform: translateY(0);
    }

	    .file-action-btn {
	      width: 32px;
	      height: 32px;
	      border-radius: 10px;
	      box-shadow: none;
	    }

	    .app:not(.subjects-maximized) .file-action-btn {
	      width: 24px;
	      height: 24px;
	      border-radius: 9px;
	      font-size: 0.9rem;
	    }

    .add-file-slot {
      margin-top: 6px;
      width: 100%;
      padding: 6px 4px;
      border-radius: 6px;
      border: 1px dashed #d1d5db;
      background: #f9fafb;
      color: #6b7280;
      font-size: 0.76rem;
      text-align: center;
      cursor: pointer;
      box-sizing: border-box;
    }

    .add-file-slot:hover {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }

    .empty-hint {
      font-size: 0.74rem;
      color: #9ca3af;
      margin: 8px 0 0;
      text-align: center;
    }

    /* Slim Add Subject column */

    .subject-add-column {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0;
      box-sizing: border-box;
    }

    .subject-add-box {
      width: 48px;
      height: 48px;
      max-width: none;
      border-radius: 10px;
      border: 1px dashed #cdd4e3;
      background: #f4f6fb;
      padding: 4px;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08) inset;
      min-height: 0;
    }

    .subject-add-inline {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .subject-add-input {
      display: none;
    }

    .subject-add-btn {
      font-size: 1.1rem;
      padding: 8px 10px;
      border-radius: 8px;
      width: 100%;
      height: 100%;
      background: #1d4ed8;
      color: #ffffff;
      border: none;
      box-shadow: 0 10px 22px rgba(29, 78, 216, 0.25);
    }

    .subject-add-btn:hover {
      background: #234fce;
    }

    /* Meter colors */

.meter-low {
      background: var(--meter-low, linear-gradient(90deg, #fb7185, #f97373));
    }

    .meter-mid {
      background: var(--meter-mid, linear-gradient(90deg, #fbbf24, #facc15));
    }

    .meter-high {
      background: var(--meter-high, linear-gradient(90deg, #22c55e, #16a34a));
    }

    /* Modal base */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
}

    .modal {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
      width: 100%;
      max-width: 420px;
      padding: 12px 14px 12px;
      box-sizing: border-box;
    }

    .suggestion-modal {
      max-width: 720px;
    }

    .suggestion-modal-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 4px;
    }

    .suggestion-modal-section {
      border: 1px solid #edf0f7;
      border-radius: 12px;
      padding: 10px;
      background: #ffffff;
    }

    .suggestion-modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .modal-title-sm {
      font-weight: 650;
      color: #111827;
      font-size: 0.9rem;
    }

    .modal-subtle {
      font-size: 0.78rem;
      color: #6b7280;
    }

    /* Toasts */

    .toast-container {
      position: fixed;
      right: 18px;
      bottom: 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 50;
      pointer-events: none;
    }

    .toast {
      min-width: 200px;
      max-width: 320px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #0f172a;
      color: #ffffff;
      font-size: 0.9rem;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.2s ease, transform 0.2s ease;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
      pointer-events: auto;
    }

    .toast-visible {
      opacity: 0.96;
      transform: translateY(0);
    }

    .toast-warn {
      background: #fbbf24;
      color: #0f172a;
    }

    .toast-success {
      background: #22c55e;
    }

    .notice-modal {
      max-width: 380px;
    }

    .notice-input {
      width: 100%;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      font-size: 0.9rem;
      box-sizing: border-box;
    }

    .notice-input:focus {
      outline: none;
      border-color: #1d4ed8;
      box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.25);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .modal-title {
      font-size: 0.95rem;
      font-weight: 600;
      color: #111827;
    }

    .modal-subtitle {
      font-size: 0.75rem;
      color: #6b7280;
    }

    .modal-close-btn {
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      font-size: 0.95rem;
      padding: 2px 6px;
      border-radius: 999px;
      transition: background 0.08s ease, color 0.08s ease;
    }

    .modal-close-btn:hover {
      background: #f3f4f6;
      color: #374151;
    }

.modal-body {
  padding: 4px 0 8px;
}

.modal-field-label {
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 4px;
}

.modal-field-row {
  margin-bottom: 8px;
}

.modal-row-inline {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    select {
      width: 100%;
      box-sizing: border-box;
      padding: 6px 8px;
      border-radius: 7px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #111827;
      font-size: 0.82rem;
      outline: none;
    }

    select:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    .subtask-input-row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 8px;
    }

    .subtask-input-row input[type="text"] {
      flex: 1;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      font-size: 0.9rem;
      outline: none;
    }

    .subtask-input-row input[type="text"]:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    .subtask-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      min-height: 10px;
    }

    .subtask-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 8px;
      border-radius: 10px;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      font-size: 0.82rem;
      color: #374151;
    }

    .subtask-chip-remove {
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      font-size: 0.82rem;
      padding: 2px 4px;
      border-radius: 6px;
    }

    .subtask-chip-remove:hover {
      background: #e5e7eb;
      color: #111827;
    }

    textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid #d1d5db;
      font-size: 0.86rem;
      resize: vertical;
      min-height: 80px;
      outline: none;
    }

    textarea:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    input[type="range"] {
      width: 100%;
    }

    .range-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 52px;
      gap: 6px;
      align-items: center;
    }

    .range-value {
      font-size: 0.76rem;
      text-align: right;
      color: #111827;
    }

    .modal-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 4px;
    }

    .modal-footer .spacer {
      flex: 1;
    }

    .modal-delete-btn {
      font-size: 0.78rem;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #fecaca;
      background: #fee2e2;
      color: #b91c1c;
      cursor: pointer;
      transition: background 0.08s ease, transform 0.08s ease;
    }

    .modal-delete-btn:hover {
      background: #fecaca;
      transform: translateY(-0.5px);
    }

    .modal-delete-btn[hidden] {
      display: none;
    }

    /* Stats modal */

    .stats-modal {
      max-width: 900px;
      max-height: 80vh;
      overflow-y: auto;
    }

    .stats-summary {
      font-size: 0.8rem;
      color: #4b5563;
      margin-bottom: 6px;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }

    .stats-card {
      border: 1px solid #e4e7ef;
      border-radius: 12px;
      background: linear-gradient(145deg, #ffffff, #f7f8ff);
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .stats-range-row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 6px;
    }

    .stats-hero {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }

    .stats-hero-card {
      border: 1px solid #e4e7ef;
      border-radius: 12px;
      padding: 10px 12px;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .stats-hero-title {
      font-size: 0.72rem;
      color: var(--ink-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 2px;
    }

    .stats-hero-value {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--accent-ink);
      line-height: 1.2;
    }

    .stats-hero-sub {
      font-size: 0.8rem;
      color: var(--ink-muted);
      margin-top: 2px;
    }

    .stats-hero-goal {
      background: linear-gradient(145deg, #eef3ff, #ffffff);
      border-color: #cdd8ff;
      box-shadow: 0 12px 26px rgba(47, 98, 244, 0.12);
    }

    .stats-hero-progress {
      margin-top: 6px;
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
    }

    .stats-hero-progress span {
      display: block;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #2f62f4, #4ec58a);
      box-shadow: 0 8px 18px rgba(47, 98, 244, 0.16);
    }

    .stats-meta-row {
      font-size: 0.78rem;
      color: var(--ink-muted);
      margin: 6px 0 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .stats-card-title {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--accent-ink);
    }

    .stats-card-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
    }

    .stats-range-card {
      background: #ffffff;
    }

    .stats-range {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .stats-range-btn {
      border: 1px solid #dfe4f0;
      background: #f4f6fb;
      color: var(--accent-ink);
      border-radius: 12px;
      padding: 7px 12px;
      font-size: 0.78rem;
      cursor: pointer;
      transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease, transform 0.08s ease;
    }

    .stats-range-btn:hover {
      background: var(--accent-soft);
      border-color: #c9d5ff;
      color: #1d4ed8;
      transform: translateY(-0.5px);
    }

    .stats-range-btn-active {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
    }

    .stats-label {
      font-size: 0.72rem;
      color: var(--text-muted);
    }

    .stats-value {
      font-size: 1rem;
      font-weight: 600;
      color: var(--accent-ink);
    }

    .stats-conf-bars {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .stats-conf-row {
      display: grid;
      grid-template-columns: auto auto 1fr auto;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      color: #4b5563;
    }

    .conf-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
    }

    .stats-conf-track {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
    }

    .stats-conf-fill {
      height: 100%;
      width: 0%;
    }

    .stats-conf-num {
      font-size: 0.78rem;
      color: #6b7280;
    }

    .stats-section {
      margin-top: 6px;
    }

    .stats-grid-balanced {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }

    .stats-chart {
      margin-top: 4px;
    }

    .stats-chart-bars {
      display: flex;
      gap: 8px;
      align-items: flex-end;
      height: 140px;
    }

    .stats-bar {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      height: 100%;
    }

    .stats-bar-fill-vertical {
      width: 100%;
      height: 100%;
      border-radius: 12px 12px 6px 6px;
      background: linear-gradient(180deg, #4f8bff, #2f62f4);
      min-height: 6px;
    }

    .stats-bar-label {
      font-size: 0.72rem;
      color: var(--ink-muted);
    }

    .stats-chart-footer {
      margin-top: 6px;
      font-size: 0.78rem;
      color: var(--ink-muted);
    }

    .stats-highlight {
      margin-top: 6px;
      padding: 8px 10px;
      border: 1px dashed #dfe4f0;
      border-radius: 10px;
      background: #f4f7ff;
      color: var(--accent-ink);
      font-size: 0.82rem;
    }

    .stats-empty {
      padding: 10px 2px;
      color: var(--ink-muted);
      font-size: 0.85rem;
    }

    .stats-section-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 6px;
    }

    .stats-list {
      margin-top: 4px;
    }

    .stats-row {
      margin-bottom: 8px;
    }

    .stats-row-header {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 0.8rem;
    }

    .stats-row-title {
      font-weight: 600;
      color: var(--accent-ink);
    }

    .stats-row-subtitle {
      font-size: 0.72rem;
      color: var(--text-muted);
    }

    .stats-row-time {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--accent-ink);
      white-space: nowrap;
    }

    .stats-bar-track {
      margin-top: 3px;
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
    }

    .stats-bar-fill {
      height: 100%;
      width: 0%;
      background: #8fb3ff;
    }

    /* === Paper-like visual refresh ======================================= */

    :root {
      --page-bg: radial-gradient(120% 120% at 15% 10%, #e7f0ff 0%, #f5ecff 45%, #fdf7ec 80%);
      --surface-bg: #fcfbf7;
      --surface-subtle-bg: #f7f7ff;
      --surface-soft: #f4f6fb;
      --surface-strong: #ffffff;
      --surface-strong-hover: #f4f7ff;
      --app-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fffdf8);
      --card-surface: linear-gradient(135deg, rgba(239, 243, 255, 0.9), #ffffff);
      --card-surface-2: linear-gradient(145deg, #ffffff, rgba(244, 246, 255, 0.9));
      --panel-bg: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
      --panel-border: color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
      --panel-contrast: var(--accent-ink);
      --panel-shadow: var(--shadow-soft);
      --border-subtle: #e4e7ef;
      --border-strong: #e5e7eb;
      --accent: #2f62f4;
      --accent-ink: #0f1c3d;
      --accent-soft: #e4ecff;
      --accent-soft-hover: #d7dfff;
      --ink: #0f172a;
      --ink-muted: #5f6a86;
      --text-muted: var(--ink-muted);
      --chip-bg: #f4f6fb;
      --chip-border: #dfe4f0;
      --chip-ink: #0f172a;
      --shadow-card: 0 20px 50px rgba(15, 23, 42, 0.08);
      --shadow-soft: 0 10px 22px rgba(15, 23, 42, 0.05);
    }

    body {
      background: var(--page-bg);
    }

    .app {
      margin: 28px auto 36px;
      padding: 20px 22px 24px;
      max-width: var(--app-shell-width);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fffdf8);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(228, 232, 239, 0.9);
      box-shadow: var(--shadow-card);
    }

    .summary-card {
      background: linear-gradient(135deg, rgba(239, 243, 255, 0.9), #ffffff);
    }

    .table-wrapper {
      background: #ffffff;
      border-radius: 12px;
    }

    .subject-table {
      background:
        repeating-linear-gradient(
          to bottom,
          #fafaf9 0,
          #fafaf9 36px,
          #f5f5f4 37px
        );
    }

    .subject-column {
      padding: 10px 10px 12px;
    }

    .file-list {
      padding-top: 4px;
    }

    .file-row {
      padding: 9px 9px 8px;
      margin-bottom: 8px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid #edf0f7;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
      gap: 4px;
      transition:
        background 0.1s ease,
        border-color 0.1s ease,
        box-shadow 0.12s ease,
        transform 0.06s ease,
        opacity 0.06s ease;
    }

    .file-row:hover {
      background: #f4f7ff;
      border-color: #d7def1;
      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
      transform: translateY(-1px);
    }

    .file-row.studying {
      background: #f0fbf6;
      border-color: #a7d7c5;
      box-shadow: 0 10px 22px rgba(16, 185, 129, 0.12);
    }

    .file-row.dragging {
      background: #eef0f7;
    }

    .file-row.drag-over {
      background: #e5ecff;
    }

    .confidence-badge {
      background: #f5f7ff;
      border: 1px solid #dfe4f0;
      color: var(--accent-ink);
    }

    .conf-low {
      border-color: #fca5a5;
      color: #b91c1c;
    }

    .conf-mid {
      border-color: #fbbf24;
      color: #92400e;
    }

    .conf-high {
      border-color: #22c55e;
      color: #166534;
    }

    .pill-dot {
      background: #9ca3af;
    }

.meter-low {
      background: var(--meter-low, linear-gradient(90deg, #fce0df, #f7b4af));
}

.meter-mid {
      background: var(--meter-mid, linear-gradient(90deg, #f7e5bf, #f1d397));
}

.meter-high {
      background: var(--meter-high, linear-gradient(90deg, #cfe9d9, #a7d7c5));
}

    .focus-card {
      background: linear-gradient(145deg, #ffffff, rgba(244, 246, 255, 0.9));
      border-radius: var(--radius-md);
      position: relative;
      overflow: hidden;
    }

    #focusCard.focus-study-active {
      background: linear-gradient(145deg, #f1fbf6, #ffffff);
      border-color: #a7d7c5;
      box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.12), 0 12px 30px rgba(22, 163, 74, 0.16);
    }

    #focusCard.focus-study-paused {
      background: linear-gradient(145deg, #fff8ec, #ffffff);
      border-color: #fbbf24;
      box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18);
    }

    #focusCard.focus-break-active {
      background: linear-gradient(145deg, #eef6ff, #ffffff);
      border-color: #c4ddf4;
      box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12);
    }

    .focus-timer-box {
      background: radial-gradient(circle at 25% 20%, #f4f6ff, #e8ebf5);
    }

    .focus-break-btn {
      background: #f4f6fb;
      border-color: #dfe4f0;
      color: var(--accent-ink);
    }

    .focus-break-btn:hover {
      background: var(--accent-soft);
      border-color: #c9d5ff;
      color: #1d4ed8;
      transform: translateY(-0.5px);
    }

    .focus-main-btn {
      background: #f4f6fb;
      border-color: #dfe4f0;
      color: var(--accent-ink);
    }

    .focus-main-btn:hover {
      background: var(--accent-soft);
      border-color: #c9d5ff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
    }

    .focus-main-btn-primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #ffffff;
    }

    .focus-main-btn-primary:hover {
      background: #234fce;
      border-color: #234fce;
    }

    .focus-main-btn-danger {
      background: #fef2f2;
      border-color: #fecaca;
      color: #b91c1c;
    }

.focus-main-btn-danger:hover {
  background: #fee2e2;
  border-color: #fecaca;
}

.focus-inline-settings {
  position: absolute;
  inset: 10px;
  padding: 14px;
  border: 1px solid rgba(228, 232, 239, 0.9);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  display: none;
  flex-direction: column;
  gap: 12px;
  z-index: 2;
}

.focus-inline-title {
  font-weight: 600;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.focus-inline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.focus-inline-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.86rem;
  color: #4b5563;
}

.focus-inline-grid input {
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.95rem;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.focus-inline-grid input:focus {
  outline: none;
  border-color: #c9d5ff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.focus-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.focus-inline-actions .btn,
.focus-inline-actions .btn-secondary {
  border-radius: 14px;
  min-width: 110px;
  box-shadow: 0 10px 22px rgba(35, 79, 206, 0.14);
}

    .chip-btn-primary {
      background: var(--accent-soft);
      color: #234fce;
      min-width: 80px;
      text-align: center;
    }

    .chip-btn-primary:hover {
      background: var(--accent-soft-hover);
      transform: translateY(-0.5px);
    }

    .add-file-slot:hover {
      background: #f3f4f6;
      border-color: #d4d4d8;
      color: #111827;
    }

    .subject-add-box {
      background: #f6f7ff;
    }

    .stats-bar-fill {
      background: #8fb3ff;
    }
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #dfe4f0;
  background: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  color: #1f2937;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent, #2f62f4);
  outline-offset: 2px;
}

.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;
}

.icon-btn:hover {
  background: #eef2ff;
  border-color: #c9d5ff;
  transform: translateY(-1px);
}

.today-maximize-btn::before {
  content: attr(data-icon);
  font-size: 1.1rem;
  line-height: 1;
}

/* === Theme palettes ===================================================== */

:root[data-theme="breeze"] {
  --page-bg: radial-gradient(120% 120% at 15% 10%, #e7f0ff 0%, #f5ecff 45%, #fdf7ec 80%);
  --surface-bg: #fcfbf7;
  --surface-subtle-bg: #f7f7ff;
  --surface-soft: #f4f6fb;
  --surface-strong: #ffffff;
  --surface-strong-hover: #f4f7ff;
  --app-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.9), #fffdf8);
  --card-surface: linear-gradient(135deg, rgba(239, 243, 255, 0.9), #ffffff);
  --card-surface-2: linear-gradient(145deg, #ffffff, rgba(244, 246, 255, 0.9));
  --border-subtle: #e4e7ef;
  --border-strong: #e5e7eb;
  --accent: #2f62f4;
  --accent-ink: #0f1c3d;
  --accent-soft: #e4ecff;
  --accent-soft-hover: #d7dfff;
  --ink: #0f172a;
  --ink-muted: #5f6a86;
  --text-muted: var(--ink-muted);
  --chip-bg: #f4f6fb;
  --chip-border: #dfe4f0;
  --chip-ink: #0f172a;
  --shadow-card: 0 20px 50px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 10px 22px rgba(15, 23, 42, 0.05);
}

:root[data-theme="sunrise"] {
  --page-bg: radial-gradient(120% 120% at 15% 10%, #fff2df 0%, #ffe3d7 45%, #fff7ec 80%);
  --surface-bg: #fffaf4;
  --surface-subtle-bg: #fff4ec;
  --surface-soft: #fff1e6;
  --surface-strong: #fff8f2;
  --surface-strong-hover: #ffeede;
  --app-surface: linear-gradient(180deg, rgba(255, 250, 245, 0.95), #fff2e6);
  --card-surface: linear-gradient(140deg, rgba(255, 249, 241, 0.95), #fff3e6);
  --card-surface-2: linear-gradient(145deg, #fff8f2, #fff1e0);
  --border-subtle: #f2ddce;
  --border-strong: #e9cfbb;
  --accent: #f97316;
  --accent-ink: #311709;
  --accent-soft: #ffe3d0;
  --accent-soft-hover: #ffd5b8;
  --ink: #2e1a13;
  --ink-muted: #94644d;
  --text-muted: var(--ink-muted);
  --chip-bg: #fff4ec;
  --chip-border: #f0d8c7;
  --chip-ink: #311709;
  --shadow-card: 0 20px 50px rgba(132, 70, 20, 0.14);
  --shadow-soft: 0 10px 22px rgba(132, 70, 20, 0.12);
}

:root[data-theme="forest"] {
  --page-bg: radial-gradient(115% 120% at 15% 10%, #e4f4ea 0%, #f0fff5 45%, #eaf4de 80%);
  --surface-bg: #f6fdf9;
  --surface-subtle-bg: #eaf6ef;
  --surface-soft: #eef7f1;
  --surface-strong: #f7fffa;
  --surface-strong-hover: #edf7ef;
  --app-surface: linear-gradient(180deg, rgba(246, 253, 248, 0.95), #f1fbf4);
  --card-surface: linear-gradient(140deg, rgba(238, 249, 242, 0.95), #f8fff8);
  --card-surface-2: linear-gradient(145deg, #f5fff7, #ecf6ef);
  --border-subtle: #cfe5d7;
  --border-strong: #c1d9ca;
  --accent: #2f9e62;
  --accent-ink: #0f2c1e;
  --accent-soft: #d6f4e4;
  --accent-soft-hover: #c4e8d4;
  --ink: #12281b;
  --ink-muted: #4b6455;
  --text-muted: var(--ink-muted);
  --chip-bg: #eaf6ef;
  --chip-border: #c9dece;
  --chip-ink: #0f2c1e;
  --shadow-card: 0 20px 50px rgba(16, 94, 60, 0.14);
  --shadow-soft: 0 10px 22px rgba(16, 94, 60, 0.1);
}

:root[data-theme="midnight"] {
  --page-bg: radial-gradient(120% 130% at 15% 10%, #1e1e1e 0%, #191a20 45%, #13141a 80%);
  --surface-bg: #1e1e1e;
  --surface-subtle-bg: #1a1b20;
  --surface-soft: #252730;
  --surface-strong: #1c1e26;
  --surface-strong-hover: #252a36;
  --app-surface: linear-gradient(180deg, rgba(30, 30, 30, 0.95), #1c1e26);
  --card-surface: linear-gradient(140deg, #232733, #1c1e26);
  --card-surface-2: linear-gradient(145deg, #1f2330, #181a22);
  --border-subtle: #2c313d;
  --border-strong: #3a4050;
  --accent: #569cd6;
  --accent-ink: #dbeafe;
  --accent-soft: rgba(86, 156, 214, 0.16);
  --accent-soft-hover: rgba(86, 156, 214, 0.24);
  --ink: #f2f4f8;
  --ink-muted: #c0cadb;
  --text-muted: var(--ink-muted);
  --chip-bg: #232733;
  --chip-border: #3a4050;
  --chip-ink: #f2f4f8;
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
}

:root[data-theme="nocturne"] {
  --page-bg: radial-gradient(120% 120% at 15% 10%, #17130f 0%, #14100c 45%, #0f0c0a 85%);
  --surface-bg: #191410;
  --surface-subtle-bg: #16100d;
  --surface-soft: #1f1813;
  --surface-strong: #1b1510;
  --surface-strong-hover: #241d16;
  --app-surface: linear-gradient(180deg, rgba(25, 20, 16, 0.95), #1b1510);
  --card-surface: linear-gradient(140deg, #201a15, #1b1510);
  --card-surface-2: linear-gradient(145deg, #241e18, #16100c);
  --border-subtle: #2d241d;
  --border-strong: #3a2e24;
  --accent: #d7ba7d;
  --accent-ink: #f5ede0;
  --accent-soft: rgba(215, 186, 125, 0.18);
  --accent-soft-hover: rgba(215, 186, 125, 0.26);
  --ink: #f6f0e6;
  --ink-muted: #cfbfaa;
  --text-muted: var(--ink-muted);
  --chip-bg: #221b16;
  --chip-border: #3a2e24;
  --chip-ink: #f6f0e6;
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.35);
}

:root[data-theme="amber"] {
  --page-bg: radial-gradient(120% 120% at 15% 10%, #f8eddc 0%, #f6e3c2 45%, #f2d8a8 80%);
  --surface-bg: #f7f0e4;
  --surface-subtle-bg: #f8f3e9;
  --surface-soft: #f6ecdb;
  --surface-strong: #f2e3ce;
  --surface-strong-hover: #ead9c2;
  --app-surface: linear-gradient(180deg, rgba(247, 240, 228, 0.92), #f6ebdb);
  --card-surface: linear-gradient(145deg, #fff8ec, #f4e4cc);
  --card-surface-2: linear-gradient(145deg, #f8efde, #f0dec0);
  --border-subtle: #e5d5c0;
  --border-strong: #d9c5ad;
  --accent: #d97706;
  --accent-ink: #291504;
  --accent-soft: rgba(217, 119, 6, 0.18);
  --accent-soft-hover: rgba(217, 119, 6, 0.26);
  --ink: #1f150a;
  --ink-muted: #6b543c;
  --text-muted: var(--ink-muted);
  --chip-bg: #fff1dc;
  --chip-border: #e9cfac;
  --chip-ink: #1f150a;
  --shadow-card: 0 18px 46px rgba(88, 60, 21, 0.22);
  --shadow-soft: 0 12px 30px rgba(88, 60, 21, 0.16);
}

[data-theme] body {
  background: var(--page-bg);
  color: var(--ink);
}

[data-theme] .app {
  background: var(--app-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

[data-theme] .summary-card,
[data-theme] .today-section,
[data-theme] .schedule-view {
  background: var(--card-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

[data-theme] .focus-card,
[data-theme] .focus-inline-settings {
  background: var(--card-surface-2);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

[data-theme] .table-wrapper,
[data-theme] .subject-column,
[data-theme] .schedule-day,
[data-theme] .today-item,
[data-theme] .today-done-section,
[data-theme] .today-subtasks,
[data-theme] .today-subtask-row,
[data-theme] .today-subtask-add input,
[data-theme] .today-subtasks-toggle,
[data-theme] .today-subtask-add-btn,
[data-theme] .today-remove-btn,
[data-theme] .schedule-task-row,
[data-theme] .schedule-focus-chip,
[data-theme] .file-row,
[data-theme] .add-file-slot,
[data-theme] .modal,
[data-theme] .stats-card,
[data-theme] .stats-range-btn,
[data-theme] .schedule-nav,
[data-theme] .schedule-nav-btn,
[data-theme] .notice-input,
[data-theme] select,
[data-theme] input[type="text"],
[data-theme] input[type="number"],
[data-theme] .view-menu,
[data-theme] .view-menu-btn,
[data-theme] .view-toggle,
[data-theme] .focus-main-btn,
[data-theme] .focus-break-btn,
[data-theme] .icon-btn {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme] .subject-table {
  background: var(--surface-soft);
}

[data-theme] .subject-meter,
[data-theme] .summary-progress-bar,
[data-theme] .summary-study-bar {
  background: var(--study-bar-bg, var(--surface-soft));
}

[data-theme] .schedule-day,
[data-theme] .today-item,
[data-theme] .file-row,
[data-theme] .modal,
[data-theme] .stats-card {
  color: var(--ink);
}

[data-theme] .today-dropzone {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--ink-muted);
}

[data-theme] .today-dropzone-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme] .view-toggle {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

[data-theme] .view-toggle-btn {
  color: var(--ink);
}

[data-theme] .view-toggle-active {
  background: var(--surface-strong);
  color: var(--accent-ink);
}

[data-theme] .btn-secondary {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: none;
}

[data-theme] .btn-secondary:hover {
  background: var(--accent-soft);
  border-color: var(--border-subtle);
  color: var(--accent-ink);
}

[data-theme] .chip-btn {
  background: var(--chip-bg);
  border-color: var(--chip-border);
  color: var(--chip-ink);
}

[data-theme] .chip-btn-primary {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme] .chip-btn-primary:hover {
  background: var(--accent-soft-hover);
}

[data-theme] .schedule-chip-study {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme] .confidence-badge {
  background: var(--accent-soft);
  border-color: var(--border-strong);
  color: var(--accent-ink);
}

[data-theme] .focus-timer-box {
  background: var(--surface-soft);
}

[data-theme] input[type="text"],
[data-theme] input[type="number"],
[data-theme] select,
[data-theme] .notice-input {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme] input[type="text"]:focus,
[data-theme] input[type="number"]:focus,
[data-theme] select:focus,
[data-theme] .notice-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

[data-theme] input[type="checkbox"] {
  border-color: var(--border-strong);
  background: var(--surface-strong);
}

[data-theme] input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

[data-theme] input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-soft-hover);
}

[data-theme] .file-name,
[data-theme] .modal-title,
[data-theme] .range-value,
[data-theme] .today-title,
[data-theme] .today-done-title,
[data-theme] .focus-inline-title,
[data-theme] .schedule-day-date,
[data-theme] .schedule-chip-label,
[data-theme] .stats-row-title,
[data-theme] .summary-value,
[data-theme] .focus-title,
[data-theme] .add-file-slot {
  color: var(--ink);
}

[data-theme] .file-notes,
[data-theme] .file-time,
[data-theme] .today-meta,
[data-theme] .subtitle,
[data-theme] .schedule-subtitle,
[data-theme] .modal-subtitle,
[data-theme] .summary-label,
[data-theme] .summary-progress-header,
[data-theme] .summary-study-header,
[data-theme] label,
[data-theme] .today-subtasks-empty,
[data-theme] .today-timer,
[data-theme] .today-empty,
[data-theme] .schedule-empty,
[data-theme] .focus-inline-grid label,
[data-theme] .stats-label,
[data-theme] .stats-row-subtitle {
  color: var(--ink-muted);
}

[data-theme] .schedule-nav {
  background: var(--surface-soft);
}

[data-theme] .schedule-focus-chip {
  background: var(--chip-bg, var(--surface-soft));
  border-color: var(--chip-border, var(--border-strong));
  color: var(--chip-ink, var(--ink));
}

[data-theme] .stats-card {
  background: var(--card-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

[data-theme] .stats-summary,
[data-theme] .stats-meta-row,
[data-theme] .stats-chart-footer,
[data-theme] .stats-bar-label {
  color: var(--ink-muted);
}

[data-theme] .stats-card-title,
[data-theme] .stats-value,
[data-theme] .stats-hero-title,
[data-theme] .stats-hero-value,
[data-theme] .stats-row-title,
[data-theme] .stats-row-time,
[data-theme] .stats-section-title {
  color: var(--ink);
}

[data-theme] .stats-range-btn-active {
  color: var(--accent-ink);
}

[data-theme] .stats-range-btn {
  background: var(--surface-soft);
}

[data-theme] .today-done-section {
  background: var(--surface-soft);
}

[data-theme] .today-item {
  border-left-color: var(--todo-accent, #d1d5db);
}

[data-theme] .today-subtask-add-btn,
[data-theme] .today-subtasks-toggle {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme] .today-subtask-add-btn:hover,
[data-theme] .today-subtasks-toggle:hover {
  background: var(--accent-soft-hover);
}

[data-theme] .focus-break-btn {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme] .focus-break-btn:hover {
  background: var(--surface-strong);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  color: var(--accent-ink);
}

[data-theme] .modal-backdrop {
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}

[data-theme] .modal {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

[data-theme] .modal-title,
[data-theme] .modal-title-sm,
[data-theme] .stats-section-title {
  color: var(--ink);
}

[data-theme] .modal-subtitle,
[data-theme] .modal-subtle,
[data-theme] .modal-field-label {
  color: var(--ink-muted);
}

[data-theme] .modal-close-btn {
  color: var(--ink-muted);
}

[data-theme] .modal-close-btn:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

[data-theme] .suggestion-modal-section {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

[data-theme] .subtask-chip {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme] .subtask-chip-remove:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

[data-theme] .stats-hero-card {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

[data-theme] .stats-hero-goal {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  box-shadow: var(--shadow-soft);
}

[data-theme] .stats-hero-progress,
[data-theme] .stats-conf-track,
[data-theme] .stats-bar-track {
  background: var(--surface-soft);
}

[data-theme] .stats-hero-progress span,
[data-theme] .stats-bar-fill-vertical,
[data-theme] .stats-bar-fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--surface-strong)));
}

[data-theme] .stats-conf-row {
  color: var(--ink-muted);
}

[data-theme] .stats-conf-num {
  color: var(--ink-muted);
}

[data-theme] .stats-highlight {
  background: var(--surface-soft);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme] .settings-backdrop {
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}

[data-theme] .settings-dialog {
  background: var(--card-surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

[data-theme] .settings-label {
  color: var(--ink-muted);
}

[data-theme] .settings-title {
  color: var(--ink);
}

[data-theme] .settings-nav {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

[data-theme] .settings-nav-item {
  background: var(--surface-strong);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme] .settings-nav-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

[data-theme] .settings-nav-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

[data-theme] .settings-panels {
  background: var(--surface-strong);
  border-color: var(--border-strong);
}

[data-theme] .settings-panel-title {
  color: var(--ink);
}

[data-theme] .settings-panel-text {
  color: var(--ink-muted);
}

[data-theme] .settings-theme-item {
  background: var(--surface-strong);
  border-color: var(--border-strong);
}

[data-theme] .settings-theme-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
}

[data-theme] .settings-theme-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
}

[data-theme] .settings-theme-dot {
  border-color: var(--border-strong);
}

[data-theme] .settings-theme-name {
  color: var(--ink);
}

[data-theme] .settings-color-row {
  background: var(--surface-strong);
  border-color: var(--border-strong);
}

[data-theme] .settings-color-label {
  color: var(--ink);
}

[data-theme] .settings-preview {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

[data-theme] .settings-preview-title {
  color: var(--ink);
}

[data-theme] .settings-pref-row label {
  color: var(--ink);
}

[data-theme] .file-row.studying {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-strong));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

[data-theme] #focusCard.focus-study-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--card-surface-2));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), var(--shadow-card);
}

[data-theme] #focusCard.focus-study-paused {
  background: color-mix(in srgb, var(--accent) 10%, var(--card-surface-2));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-card);
}

[data-theme] #focusCard.focus-break-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--card-surface-2));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-card);
}

[data-theme] .file-row.in-today {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-strong));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong));
}

/* Calendar page */
body.calendar-page {
  overflow: hidden;
  padding: 12px 0 24px;
}

.calendar-shell {
  width: min(1260px, 98vw);
  margin: 22px auto 32px;
  background: var(--app-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px 28px;
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.calendar-header h1 {
  margin: 6px 0 4px;
}

.calendar-hero {
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.calendar-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent-soft-hover);
}

.calendar-hero-title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  margin-top: 8px;
  margin-bottom: 4px;
  color: var(--accent-ink);
}

.calendar-hero-subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.96rem;
}

.calendar-scroll {
  flex: 1;
  overflow: auto;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calendar-layout {
  display: grid;
  grid-template-columns: 1.55fr 0.9fr;
  gap: 16px;
  margin-top: 0;
  align-items: start;
}

.calendar-month-card {
  background: var(--surface-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: 14px 14px 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.calendar-month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.calendar-month-label {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent-ink);
}

.calendar-month-subtitle {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.calendar-month-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin-bottom: 8px;
  padding-inline: 2px;
}

.calendar-weekdays span {
  text-align: center;
}

.calendar-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-day {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--surface-strong);
  min-height: 104px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.calendar-day:hover {
  border-color: var(--accent-soft-hover);
  transform: translateY(-1px);
}

.calendar-day-outside {
  opacity: 0.55;
  background: var(--surface-subtle-bg);
}

.calendar-day-top {
  font-weight: 700;
  color: var(--accent-ink);
}

.calendar-day-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.calendar-day-selected {
  border-color: var(--accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 25%, transparent);
}

.calendar-day-today {
  outline: 2px dashed var(--accent-soft-hover);
  outline-offset: 2px;
}

.calendar-day-has .calendar-day-top {
  color: var(--accent-ink);
}

.calendar-card {
  background: var(--surface-strong);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.form-card {
  background: var(--card-surface);
  border-color: var(--panel-border);
  box-shadow: var(--shadow-soft);
}

.form-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.form-card-title {
  font-weight: 800;
  color: var(--accent-ink);
  letter-spacing: 0.01em;
}

.form-card-subtitle {
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.calendar-side {
  display: grid;
  gap: 12px;
}

.side-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-side-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-date {
  font-weight: 700;
  font-size: 1.05rem;
}

.side-meta,
.side-subtitle {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.calendar-day-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.calendar-event-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
}

.calendar-event-done {
  opacity: 0.65;
}

.calendar-event-left input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.calendar-event-body {
  min-width: 0;
}

.calendar-event-title {
  font-weight: 700;
  font-size: 0.98rem;
}

.calendar-event-meta {
  color: var(--ink-muted);
  font-size: 0.86rem;
}

.calendar-event-notes {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 0.88rem;
}

.calendar-event-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calendar-upcoming {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.calendar-upcoming-row {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-soft));
  display: grid;
  gap: 4px;
}

.calendar-upcoming-title {
  font-weight: 700;
}

.calendar-upcoming-meta {
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.calendar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.calendar-chip-deadline {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.calendar-chip-exam {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.calendar-chip-study {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.calendar-chip-reminder {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.calendar-chip-more {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--border-strong);
}

.calendar-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendar-form label {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.calendar-form input,
.calendar-form select,
.calendar-form textarea {
  width: 100%;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  padding: 11px 12px;
  font-family: "Manrope", "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  box-sizing: border-box;
  background: var(--surface-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 65%, transparent), 0 6px 16px rgba(15, 23, 42, 0.06);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

.calendar-form textarea {
  resize: vertical;
}

.calendar-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 38px;
  cursor: pointer;
}

.calendar-form select:hover {
  border-color: var(--accent-soft-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.calendar-form input::placeholder,
.calendar-form textarea::placeholder {
  color: #9ca3af;
}

.calendar-form input:focus,
.calendar-form select:focus,
.calendar-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.form-row {
  width: 100%;
}

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

.calendar-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-form-status {
  min-height: 18px;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.calendar-form-status[data-tone="error"] {
  color: color-mix(in srgb, #b91c1c 80%, var(--ink));
}

.calendar-form-status[data-tone="success"] {
  color: color-mix(in srgb, #15803d 75%, var(--ink));
}

.calendar-form-buttons {
  display: inline-flex;
  gap: 8px;
}

.calendar-empty {
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink-muted);
}

.eyebrow {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-size: 0.8rem;
  margin: 0;
}

.header-calendar-btn {
  text-decoration: none;
}

.icon-btn-ghost {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

.calendar-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.calendar-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
}

.calendar-modal-dialog {
  position: relative;
  width: min(720px, 90vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--surface-strong);
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.2);
  padding: 18px 18px 20px;
  z-index: 1;
}

.calendar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.modal-label {
  font-weight: 700;
  color: var(--accent-ink);
  font-size: 0.95rem;
}

.modal-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: 4px;
  color: var(--accent-ink);
}

.modal-subtitle {
  color: var(--ink-muted);
  margin-top: 2px;
}

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

/* Stundenplan page */
body.timetable-page {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 0 24px;
}

.timetable-shell {
  width: min(1260px, 98vw);
  margin: 22px auto 32px;
  background: var(--app-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 20px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100vh - 44px);
  box-sizing: border-box;
  overflow: visible;
}

.timetable-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

.timetable-board {
  background: var(--card-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}

.timetable-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.timetable-board-title {
  font-weight: 700;
  color: var(--accent-ink);
}

.timetable-board-subtitle {
  color: var(--ink-muted);
  margin-top: 4px;
}

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

.timetable-week-grid {
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.timetable-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
}

.timetable-tab-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
}

.timetable-tab {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  border-radius: 12px 12px 8px 8px;
  padding: 8px 12px;
  font-weight: 700;
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.timetable-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.timetable-tab-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 18%, transparent);
}

.timetable-tab-label {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timetable-tab-close {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-weight: 800;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  transition: background 0.1s ease, color 0.1s ease;
}

.timetable-tab-close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.timetable-tab-close:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.timetable-tab-actions {
  position: relative;
}

.tab-icon-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--accent-ink);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  font-weight: 800;
}

.tab-icon-btn:hover {
  background: var(--accent-soft);
}

.timetable-tab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: grid;
  gap: 6px;
  min-width: 150px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 10;
}

.tab-menu-open .timetable-tab-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tab-menu-btn {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-ink);
}

.tab-menu-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.timetable-week-row {
  align-items: center;
  gap: 8px;
}

.timetable-week-meta {
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.timetable-table-wrap {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 70%, transparent), 0 12px 24px rgba(15, 23, 42, 0.06);
  padding: 8px;
  margin-top: 6px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
}

.timetable-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 960px;
}

.timetable-table thead th {
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-strong);
}

.timetable-time-head {
  width: 92px;
  text-align: left;
}

.timetable-day-head {
  text-align: left;
}

.timetable-day-label {
  font-weight: 700;
}

.timetable-day-count {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.timetable-table td {
  padding: 0;
  border-bottom: 0.5px solid var(--border-strong);
  vertical-align: top;
  height: 0.2px;
  line-height: 1;
}

.timetable-time-cell {
  background: var(--surface-soft);
  font-weight: 700;
  color: var(--ink);
  border-right: 1px solid var(--border-strong);
  position: sticky;
  left: 0;
  z-index: 1;
}

.timetable-time-ghost {
  color: transparent;
  visibility: hidden;
}

.timetable-row-ghost td {
  border-bottom-color: color-mix(in srgb, var(--border-strong) 40%, transparent);
}

.timetable-cell {
  min-height: 0.2px;
}

.timetable-empty-cell {
  background: var(--surface-subtle-bg);
}

.timetable-empty-placeholder {
  color: var(--ink-muted);
  text-align: center;
  font-size: 0.92rem;
}

.timetable-slot-lesson {
  --lesson-color: var(--accent);
  position: relative;
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  max-width: none;
}

.timetable-slot-lesson + .timetable-slot-lesson {
  margin-top: 0;
}

.timetable-slot-lesson::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 6px;
  width: 4px;
  border-radius: 999px;
  background: var(--lesson-color);
  box-shadow: none;
}

.timetable-slot-title {
  font-weight: 700;
  color: var(--ink);
  padding-left: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timetable-slot-meta {
  color: var(--ink-muted);
  font-size: 0.92rem;
  padding-left: 0;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timetable-slot-notes {
  margin-top: 6px;
  color: var(--ink);
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timetable-slot-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.timetable-slot-actions .timetable-slot-menu-toggle {
  position: relative;
}

/* Timeline layout (absolute positioned lessons) */
.timeline-wrap {
  position: relative;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 70%, transparent), 0 12px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0;
}

.timeline-rail {
  position: relative;
  border-right: 1px solid var(--border-strong);
  background: repeating-linear-gradient(
    to bottom,
    var(--surface-subtle-bg) 0,
    var(--surface-subtle-bg) 1px,
    transparent 1px,
    transparent var(--timeline-hour-height)
  );
}

.timeline-rail-head {
  position: sticky;
  top: 0;
  padding: 6px 8px;
  font-weight: 800;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border-strong);
  z-index: 2;
}

.timeline-rail-label {
  position: absolute;
  left: 8px;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.85rem;
  transform: translateY(-50%);
}

.timeline-cols-head {
  display: grid;
  grid-template-columns: repeat(var(--tt-days, 7), 1fr);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border-strong);
}

.timeline-day-head {
  padding: 8px 10px;
  font-weight: 800;
  color: var(--ink);
  border-left: 1px solid var(--border-strong);
  text-align: center;
}

.timeline-cols {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--tt-days, 7), 1fr);
  gap: 0;
}

.timeline-day {
  position: relative;
  border-left: 1px solid var(--border-strong);
  overflow: visible;
  background-image: repeating-linear-gradient(
      to bottom,
      var(--border-strong) 0,
      var(--border-strong) 1px,
      transparent 1px,
      transparent calc(var(--timeline-hour-height) / 2 - 1px),
      var(--border-subtle) calc(var(--timeline-hour-height) / 2),
      var(--border-subtle) calc(var(--timeline-hour-height) / 2 + 1px),
      transparent calc(var(--timeline-hour-height) / 2 + 1px),
      transparent var(--timeline-hour-height)
    );
}

.timeline-day-empty {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.timeline-lesson-block {
  position: absolute;
  left: 8px;
  width: calc(100% - 16px);
  min-height: 22px;
  max-width: calc(100% - 16px);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-strong));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-sizing: border-box;
  padding: 6px 8px;
  z-index: 1;
  overflow: visible;
}

.classic-timetable-wrap {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-strong);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 70%, transparent);
  overflow: auto;
  max-height: calc(100vh - 240px);
}

.classic-timetable {
  width: 100%;
  border-collapse: collapse;
  min-width: 1080px;
}

.classic-timetable th,
.classic-timetable td {
  border: 1px solid var(--border-strong);
}

.classic-timetable thead th {
  background: var(--surface-soft);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 8px;
  text-align: center;
}

.classic-time-head {
  width: 120px;
  text-align: left;
  background: var(--surface-soft);
}

.classic-day-head {
  font-weight: 700;
  padding: 10px 8px;
  background: var(--surface-soft);
}

.classic-time-cell {
  background: var(--surface-soft);
  font-weight: 700;
  color: var(--ink);
  padding: 12px 10px;
  text-align: left;
  white-space: nowrap;
}

.classic-slot-cell {
  min-height: 96px;
  padding: 8px;
  background: var(--surface-strong);
  vertical-align: top;
  position: relative;
}

.classic-slot-empty {
  background: var(--surface-subtle-bg);
}

.classic-lesson-block {
  box-shadow: none;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px 12px 14px;
  background: var(--surface-strong);
  position: relative;
}

.classic-slot-cell .timetable-slot-lesson + .timetable-slot-lesson {
  margin-top: 8px;
}

.classic-lesson-block::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 10px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-strong) 80%, var(--ink-muted));
  box-shadow: none;
}

.classic-lesson-block .timetable-slot-notes {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
}

.classic-lesson-block .timetable-slot-meta {
  color: var(--ink-muted);
}

.classic-lesson-block .timetable-slot-title {
  color: var(--ink);
}

.classic-slot-cell .timetable-slot-actions {
  position: absolute;
  top: 8px;
  right: 8px;
}

.timetable-slot-menu-toggle {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--accent-ink);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  font-weight: 800;
  font-size: 12px;
}

.timetable-slot-menu-toggle:hover {
  background: var(--accent-soft);
}

.timetable-slot-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: grid;
  gap: 6px;
  min-width: 150px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 12;
}

.slot-menu-open .timetable-slot-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.timetable-slot-menu button {
  border: 1px solid var(--border-strong);
  background: var(--surface-strong);
  color: var(--accent-ink);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 700;
  text-align: left;
}

.timetable-slot-menu button:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.timetable-card {
  background: var(--surface-strong);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timetable-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timetable-subject-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timetable-subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 70%, transparent);
}

.timetable-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--chip-color, var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.timetable-empty {
  background: var(--surface-subtle-bg);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 10px;
  color: var(--ink-muted);
  text-align: center;
}

.timetable-form-actions {
  justify-content: flex-end;
}

.timetable-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.flashcards-page {
  padding: 12px 0 24px;
  background: var(--page-bg);
  color: var(--ink);
}

.flashcards-shell {
  width: clamp(1000px, 94vw, 1500px);
  margin: 28px auto 36px;
  padding: 18px 18px 32px;
  background: var(--app-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  overflow: visible;
}

.flashcards-session {
  width: 100%;
}

.flashcards-shell .session-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.flashcards-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  align-items: start;
}

.flashcards-full-review .flashcards-layout {
  grid-template-columns: 1fr;
}

.flashcards-full-review .deck-column,
.flashcards-full-review .cards-grid,
.flashcards-full-review .review-head > .deck-card-label,
.flashcards-full-review .review-head > .flashcards-meta {
  display: none;
}

.flashcards-full-review .review-panel {
  grid-column: 1 / -1;
}

.review-quick-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.flashcards-full-review .flashcards-layout {
  grid-template-columns: 1fr;
}

.flashcards-full-review .deck-column,
.flashcards-full-review .cards-grid,
.flashcards-full-review .review-head > .deck-card-label,
.flashcards-full-review .review-head > .flashcards-meta {
  display: none;
}

.flashcards-full-review .review-panel {
  grid-column: 1 / -1;
}

.review-quick-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.deck-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deck-card {
  background: var(--surface-strong);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: var(--shadow-soft);
}

.deck-card-head,
.card-editor-head,
.card-editor-list-head,
.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deck-card-label {
  color: var(--ink-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.deck-card-title {
  font-size: 20px;
  font-weight: 700;
}

.deck-card-subtitle {
  color: var(--ink-muted);
  margin: 4px 0 10px;
}

.deck-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.deck-list-item {
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-soft);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.deck-list-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-shadow: var(--shadow-soft);
}

.deck-list-item-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-strong));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 18%, transparent);
}

.deck-list-title {
  font-weight: 700;
}

.deck-list-subtitle {
  color: var(--ink-muted);
  font-size: 13px;
  margin: 2px 0 6px;
}

.deck-list-meta {
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
}

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

.deck-modal-row {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-soft);
  cursor: pointer;
  display: grid;
  gap: 4px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.deck-modal-row:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-shadow: var(--shadow-soft);
}

.deck-modal-title {
  font-weight: 700;
}

.deck-modal-meta {
  color: var(--ink-muted);
  font-size: 13px;
}

.deck-list-empty {
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink-muted);
  text-align: center;
  background: var(--surface-soft);
}

.deck-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deck-form input,
.import-input input,
.import-input select,
.card-form textarea,
.card-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  background: var(--surface-soft);
}

.deck-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

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

.import-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.import-status {
  color: var(--ink-muted);
  font-size: 13px;
  margin-top: 6px;
  min-height: 18px;
}

.flashcards-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.active-deck-inline {
  margin-top: 10px;
  display: grid;
  gap: 3px;
}

.active-deck-label {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 12px;
}

.active-deck-title {
  font-weight: 700;
}

.flashcards-meta {
  color: var(--ink-muted);
}

.mode-toggle {
  display: inline-flex;
  background: var(--surface-soft);
  border-radius: 999px;
  padding: 4px;
  gap: 6px;
}

.mode-btn {
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-muted);
}

.mode-btn-active {
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}

.card-editor {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 12px;
}

.card-editor-inline-note {
  margin-top: 8px;
  padding: 12px;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-editor-inline-note p {
  margin: 0;
  color: var(--ink-muted);
}

.card-editor-form,
.card-editor-list,
.review-panel {
  background: var(--surface-strong);
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.card-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-list-item {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--surface-soft);
  position: relative;
}

.card-list-front {
  font-weight: 700;
  margin-bottom: 6px;
}

.card-list-back {
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.card-list-meta {
  color: var(--ink-muted);
  font-size: 13px;
}

.card-list-empty {
  border: 1px dashed var(--border-subtle);
  border-radius: 14px;
  padding: 14px;
  color: var(--ink-muted);
  text-align: center;
}

.card-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

.review-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card {
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 85%, var(--accent-soft)), var(--surface-strong));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-strong) 80%, transparent);
}

.review-card-body {
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.review-face {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed var(--border-subtle);
  background: var(--surface-strong);
  font-size: 18px;
}

.review-back {
  display: none;
  background: var(--surface-soft);
}

.review-back-visible {
  display: block;
}

.review-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

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

.review-actions-compact {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.interval-actions .chip-btn {
  background: var(--surface-soft);
  border: 1px solid var(--border-strong);
}

.review-card-empty {
  color: var(--ink-muted);
  text-align: center;
}

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

  .card-editor {
    grid-template-columns: 1fr;
  }

  .flashcards-shell {
    width: 96vw;
    padding: 14px;
  }
}

@media (max-width: 720px) {
  .flashcards-header {
    flex-direction: column;
  }

  .review-actions-compact {
    justify-content: flex-start;
  }
}

@media (max-width: 1024px) {
  .timetable-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .timetable-week-grid {
    grid-template-columns: 1fr;
  }
  .timetable-lesson-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1080px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }
}

/* Extra guard for very short heights: keep timer actions aligned without overflow */
@media (max-height: 740px) {
  .focus-bottom {
    gap: 6px;
  }

  #openTimerSettingsBtn {
    width: 30px;
    height: 30px;
  }

  .focus-break-buttons {
    gap: 6px;
  }

  .focus-break-buttons .focus-break-btn {
    font-size: 0.62rem;
  }

  .focus-break-buttons {
    justify-content: center;
  }

  #openTimerSettingsBtn {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .calendar-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .calendar-month-card {
    padding: 12px;
  }

  .calendar-day {
    min-height: 80px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================
   Site footer + legal pages
   ========================= */

.site-footer {
  width: min(var(--app-desktop-max), 92vw);
  margin: 16px auto 24px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-soft);
  box-sizing: border-box;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.site-footer-meta {
  display: grid;
  gap: 2px;
  min-width: 200px;
}

.site-footer-title {
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.site-footer-subtitle {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
}

.site-footer-links a {
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(79, 139, 255, 0.22);
  background: rgba(79, 139, 255, 0.08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.site-footer-links a:hover {
  background: rgba(79, 139, 255, 0.12);
  border-color: rgba(79, 139, 255, 0.35);
}

.site-footer-links a:focus-visible {
  outline: 3px solid rgba(79, 139, 255, 0.35);
  outline-offset: 2px;
}

body.legal-page {
  padding: 12px 0 24px;
}

.legal-page .legal-app {
  width: min(980px, 94vw);
  max-width: 980px;
  min-width: 0;
  min-height: auto;
}

@media (min-width: 721px) {
  .legal-page .legal-app {
    min-width: 0;
  }
}

.legal-content {
  max-width: 860px;
}

.legal-section {
  margin: 18px 0 0;
}

.legal-content h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: var(--ink);
}

.legal-content p {
  margin: 0 0 10px;
  line-height: 1.6;
  color: var(--ink);
}

.legal-content ul,
.legal-content ol {
  margin: 8px 0 12px;
  padding-left: 18px;
  line-height: 1.6;
}

.legal-content li {
  margin: 6px 0;
}

.legal-meta {
  margin-top: 22px;
}

.legal-meta p {
  color: var(--ink-muted);
}

.legal-form {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

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

@media (max-width: 720px) {
  .legal-form-grid {
    grid-template-columns: 1fr;
  }
}

.legal-form-field {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.legal-form .input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(219, 224, 236, 1);
  background: #ffffff;
  padding: 10px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  box-sizing: border-box;
}

.legal-form .input:focus-visible {
  outline: 3px solid rgba(79, 139, 255, 0.35);
  outline-offset: 2px;
}

.legal-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.legal-form-status {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.legal-form-status[data-kind="error"] {
  color: #b91c1c;
}

.legal-form-status[data-kind="ok"] {
  color: #065f46;
}

.legal-hint {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 10px;
}