html[data-theme="modern"] {
  --page: #f5f7f6;
  --surface: #ffffff;
  --surface-soft: #eef3f1;
  --ink: #17201d;
  --muted: #66736e;
  --line: #cbd7d2;
  --primary: #176b5f;
  --primary-dark: #0f4d44;
  --primary-soft: #dcebe8;
  --warning: #956313;
  --danger: #a33a3a;
  --success: #2d6f48;
  --shadow: 0 16px 38px rgba(23, 32, 29, 0.08);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-theme="modern"] .app-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}

html[data-theme="modern"] .brand-mark,
html[data-theme="modern"] .tile-number,
html[data-theme="modern"] .button,
html[data-theme="modern"] input,
html[data-theme="modern"] select,
html[data-theme="modern"] textarea,
html[data-theme="modern"] .panel,
html[data-theme="modern"] .empty-state,
html[data-theme="modern"] .placeholder-tile,
html[data-theme="modern"] .modal-dialog,
html[data-theme="modern"] .nav-menu-panel {
  border-radius: 8px;
}

html[data-theme="modern"] .panel,
html[data-theme="modern"] .empty-state,
html[data-theme="modern"] .placeholder-tile {
  box-shadow: 0 10px 24px rgba(23, 32, 29, 0.05);
}

html[data-theme="modern"] .button-primary {
  box-shadow: 0 8px 18px rgba(23, 107, 95, 0.16);
}

html[data-theme="modern"] .chart-image {
  box-shadow: 0 8px 20px rgba(23, 32, 29, 0.06);
}

html[data-theme="modern"] .chart-note {
  color: var(--muted);
}

html[data-theme="modern"] .collapsible-summary {
  box-shadow: 0 8px 18px rgba(23, 32, 29, 0.06);
}

html[data-theme="modern"] .collapsible-section[open] > .collapsible-summary {
  background: var(--primary-soft);
  color: var(--primary-dark);
}

html[data-theme="modern"] .data-table th.sortable-table-header:hover,
html[data-theme="modern"] .data-table th.sortable-table-header:focus-visible {
  background: var(--primary-soft);
}

html[data-theme="modern"] .data-table th.sortable-table-header.is-sort-active {
  color: var(--primary-dark);
}

html[data-theme="modern"] .data-table th.sortable-table-header::after {
  color: var(--primary);
}

html[data-theme="modern"] .grade-weight-toolbar {
  background: #f4f8f7;
}

html[data-theme="modern"] .grade-weight-select {
  font-weight: 750;
}

html[data-theme="modern"] .grade-entry-table tr.keyboard-row-active td {
  background: #e7f1ee;
}

html[data-theme="modern"] .grade-entry-table input.keyboard-cell-active {
  outline-color: rgba(23, 107, 95, 0.42);
}

html[data-theme="modern"] .goal-status {
  box-shadow: 0 8px 18px rgba(23, 32, 29, 0.05);
}

html[data-theme="modern"] .classification-card {
  background: #f4f8f7;
  box-shadow: 0 8px 18px rgba(23, 32, 29, 0.05);
}

html[data-theme="modern"] .goal-status.is-achieved {
  background: #e7f4ec;
}

html[data-theme="modern"] .goal-status.is-warning {
  background: #fff4dc;
}