@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --st-bg: #f8fbff;
  --st-surface: #fffefd;
  --st-surface-soft: #f2f8f6;
  --st-surface-softer: #f5f1fb;
  --st-ink: #20222f;
  --st-text: #4a5262;
  --st-muted: #758093;
  --st-line: #e8eef2;
  --st-line-strong: #d9e3e7;
  --st-purple: #746fb6;
  --st-purple-dark: #565192;
  --st-purple-soft: #eceaff;
  --st-purple-mid: #d8d4f6;
  --st-mint: #9bdccf;
  --st-mint-dark: #2f7d72;
  --st-mint-soft: #e8f8f4;
  --st-rose: #fde8ec;
  --st-rose-dark: #a75262;
  --st-amber: #f7eac7;
  --st-amber-dark: #94651f;
  --st-radius-xl: 34px;
  --st-radius-lg: 26px;
  --st-radius-md: 18px;
  --st-radius-sm: 12px;
  --st-shadow: 0 24px 70px rgba(87, 103, 136, .09);
  --st-shadow-sm: 0 12px 34px rgba(87, 103, 136, .07);
  --st-shadow-xs: 0 4px 14px rgba(87, 103, 136, .055);

  --bg: var(--st-bg);
  --surface: var(--st-surface);
  --surface-2: var(--st-surface-soft);
  --surface-3: var(--st-surface-softer);
  --surface-4: #eaf2f0;
  --border: var(--st-line-strong);
  --border-soft: var(--st-line);
  --text-primary: var(--st-ink);
  --text-secondary: var(--st-text);
  --text-muted: var(--st-muted);
  --accent: var(--st-purple);
  --accent-dark: var(--st-purple-dark);
  --accent-soft: var(--st-purple-soft);
  --accent-mid: var(--st-purple-mid);
  --primary-container: #b9c7ff;
  --success: var(--st-mint-dark);
  --success-soft: var(--st-mint-soft);
  --success-mid: var(--st-mint);
  --info: #58799a;
  --info-soft: #edf5ff;
  --warn: var(--st-amber-dark);
  --warn-soft: var(--st-amber);
  --danger: var(--st-rose-dark);
  --danger-soft: var(--st-rose);
  --sidebar-w: 260px;
  --radius: var(--st-radius-lg);
  --radius-sm: var(--st-radius-md);
  --radius-xs: var(--st-radius-sm);
  --shadow: var(--st-shadow-sm);
  --shadow-md: var(--st-shadow);
  --shadow-sm: var(--st-shadow-xs);
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

html,
body {
  background: var(--st-bg) !important;
}

body {
  color: var(--st-ink);
  font-family: var(--font-body);
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(236, 234, 255, .58), rgba(232, 248, 244, .5) 48%, rgba(253, 232, 236, .36));
  z-index: -1;
}

button,
input,
select,
textarea {
  font-family: var(--font-body);
  letter-spacing: 0 !important;
}

.sidebar {
  left: 20px !important;
  top: 20px !important;
  bottom: 20px !important;
  width: var(--sidebar-w) !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 0 !important;
  border-radius: var(--st-radius-xl) !important;
  box-shadow: var(--st-shadow) !important;
  overflow: hidden;
  backdrop-filter: blur(18px);
}

.sidebar-brand {
  gap: 12px;
  padding: 26px 24px 16px !important;
  border-bottom: 0 !important;
}

.brand-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: #fffefd !important;
  color: var(--st-purple) !important;
  border: 1px solid var(--st-line-strong) !important;
  overflow: hidden !important;
  box-shadow: 0 12px 28px rgba(116, 111, 182, .2) !important;
}

.brand-logo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  transform: scale(1.34);
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--st-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.brand-text::after {
  content: "Seu ritmo de estudo";
  color: var(--st-muted);
  font-size: 11px;
  font-weight: 700;
}

.sidebar-nav {
  gap: 6px !important;
  padding: 14px 16px 18px !important;
}

.nav-item {
  min-height: 42px;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  color: #6b778d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.nav-item:hover {
  background: var(--st-surface-soft) !important;
  color: var(--st-ink) !important;
}

.nav-item.active {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
  box-shadow: inset 0 0 0 1px rgba(116, 111, 182, .06);
}

.nav-icon {
  width: 22px !important;
  font-size: 15px !important;
  opacity: .88;
}

.sidebar-footer {
  margin: 0 22px 22px !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--st-line) !important;
}

.sidebar-date {
  color: #77849a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.main-content {
  margin-left: calc(var(--sidebar-w) + 40px) !important;
  max-width: none !important;
  min-height: 100vh;
  padding: 28px 36px 42px !important;
  background: transparent !important;
}

.page {
  max-width: 1480px;
}

.page-header,
#page-tempo .page-header,
.rev-page-header {
  align-items: center !important;
  margin-bottom: 24px !important;
  gap: 16px !important;
}

.page-title,
#page-tempo .page-title,
#page-revisao .page-title {
  color: var(--st-ink) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.page-subtitle,
#page-tempo .page-subtitle,
#page-revisao .page-subtitle {
  color: var(--st-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin-top: 5px !important;
}

.card,
.stat-card,
.bq-filters-sticky,
.bq-progress,
.grafico-card,
.modelo-card,
.ranking-card,
.sim-card,
.erro-card,
.redacao-card,
.repertorio-card,
.cronograma-wrap,
.rev-interval-card,
.rev-list-panel,
.rev-row-card,
.rev-content-card,
.hist-section,
.timer-summary-bar,
.timer-card {
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(234, 237, 245, .95) !important;
  box-shadow: var(--st-shadow-sm) !important;
}

.card,
.bq-filters-sticky,
.bq-progress,
.grafico-card,
.modelo-card,
.ranking-card,
.cronograma-wrap,
.rev-interval-card,
.rev-list-panel,
.hist-section,
.timer-summary-bar {
  border-radius: var(--st-radius-lg) !important;
}

.stat-card,
.sim-card,
.erro-card,
.redacao-card,
.repertorio-card,
.rev-row-card,
.rev-content-card,
.timer-card {
  border-radius: var(--st-radius-md) !important;
}

.card:hover,
.stat-card:hover,
.sim-card:hover,
.erro-card:hover,
.redacao-card:hover,
.repertorio-card:hover,
.timer-card:hover {
  box-shadow: var(--st-shadow) !important;
  transform: translateY(-2px);
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--st-line) !important;
  padding: 20px 24px !important;
}

.card-header h3,
.hist-title,
.rev-interval-title {
  color: var(--st-ink) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.card-body {
  padding: 24px !important;
}

.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 22px !important;
  margin-bottom: 30px !important;
}

.stat-card {
  min-height: 148px;
  padding: 24px 26px !important;
  align-items: flex-start !important;
  flex-direction: column;
  gap: 18px !important;
}

.stat-card::before {
  display: none !important;
}

.stat-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: var(--st-purple-soft) !important;
  color: var(--st-purple-dark) !important;
  font-size: 18px !important;
}

.stat-card:nth-child(2n) .stat-icon {
  background: var(--st-mint-soft) !important;
  color: var(--st-mint-dark) !important;
}

.stat-card.warn .stat-icon,
.stat-card:nth-child(3n) .stat-icon {
  background: var(--st-rose) !important;
  color: var(--st-rose-dark) !important;
}

.stat-value {
  color: var(--st-ink) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.stat-label {
  color: var(--st-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.timer-card-btn,
.hist-toggle-btn,
.rev-tab,
.bq-chip,
.ranking-filter-btn,
.tab-btn,
.tab,
.btn-icon,
button[class*="btn"] {
  border-radius: 999px !important;
}

.btn-primary,
#btnNovaMateriaTimer,
.timer-card-btn,
.rev-header-actions .btn-primary,
.rev-interval-actions .btn-primary {
  background: linear-gradient(135deg, #8fb8d7, var(--st-purple)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(116, 111, 182, .22) !important;
  font-weight: 800 !important;
}

.btn-primary:hover,
#btnNovaMateriaTimer:hover,
.timer-card-btn:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(155, 92, 246, .28) !important;
}

.btn-secondary,
.rev-header-actions .btn-secondary,
.rev-interval-actions .btn-secondary {
  background: #fff !important;
  color: var(--st-purple-dark) !important;
  border: 1px solid var(--st-line-strong) !important;
  box-shadow: var(--st-shadow-xs) !important;
  font-weight: 800 !important;
}

.btn-danger {
  background: var(--st-rose) !important;
  color: var(--st-rose-dark) !important;
  border: 1px solid rgba(167, 82, 98, .12) !important;
}

.btn-icon {
  background: var(--st-surface-soft) !important;
  color: var(--st-muted) !important;
  border: 1px solid transparent !important;
}

.btn-icon:hover {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple-dark) !important;
}

.form-group input,
.form-group select,
.form-group textarea,
.bq-search-row input,
.rev-filter-row select,
.rev-form-grid input,
.rev-form-grid select,
.rev-form-grid textarea,
.rev-subject-form input,
.timer-modal-input,
.crono-modal-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea {
  background: #fff !important;
  border: 1px solid var(--st-line-strong) !important;
  border-radius: var(--st-radius-sm) !important;
  color: var(--st-ink) !important;
  box-shadow: none !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.bq-search-row input:focus,
.rev-filter-row select:focus,
.rev-form-grid input:focus,
.rev-form-grid select:focus,
.rev-form-grid textarea:focus,
.rev-subject-form input:focus,
.timer-modal-input:focus,
.crono-modal-input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
select:focus,
textarea:focus {
  border-color: var(--st-purple-mid) !important;
  box-shadow: 0 0 0 4px rgba(155, 92, 246, .13) !important;
  outline: none !important;
}

.form-group label,
.form-section-title,
.bq-filter-label,
.rev-form-grid span {
  color: var(--st-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

.tabs,
.rev-tabs {
  border: 0 !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.tab,
.tab-btn,
.rev-tab,
.ranking-filter-btn,
.hist-toggle-btn {
  min-height: 34px;
  padding: 8px 15px !important;
  background: transparent !important;
  color: #738096 !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.tab.active,
.tab-btn.active,
.rev-tab.active,
.ranking-filter-btn.active,
.hist-toggle-btn.active {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
}

.rev-tab.active::after {
  display: none !important;
}

.hist-toggle,
.ranking-filter,
.bq-chips {
  background: var(--st-surface-soft);
  border-radius: 999px;
}

.hist-toggle {
  gap: 2px !important;
  padding: 4px !important;
  border: 0 !important;
}

.bq-chip {
  border: 0 !important;
  background: transparent !important;
  color: #748096 !important;
  font-weight: 800 !important;
}

.bq-chip.active,
.bq-chip:hover {
  background: #fff !important;
  color: var(--st-purple) !important;
  box-shadow: var(--st-shadow-xs);
}

.bq-chip-facil.active {
  color: var(--st-mint-dark) !important;
  background: var(--st-mint-soft) !important;
}

.bq-chip-medio.active {
  color: var(--st-amber-dark) !important;
  background: var(--st-amber) !important;
}

.bq-chip-dificil.active {
  color: var(--st-rose-dark) !important;
  background: var(--st-rose) !important;
}

.list-item,
.sim-card,
.erro-card,
.redacao-card,
.repertorio-card,
.modelo-card,
.ranking-row,
.bq-question-card,
.bq-area-card,
.materias-table tbody tr,
.rev-row-card,
.rev-content-card {
  background: #fff !important;
  border-color: var(--st-line) !important;
}

.list-item:hover,
.ranking-row:hover,
.bq-question-card:hover,
.rev-row-card:hover {
  background: #fff !important;
  box-shadow: var(--st-shadow-xs) !important;
}

.empty-state,
.rev-empty,
.rev-empty-subjects,
.timer-empty {
  background: rgba(255, 255, 255, .76) !important;
  border: 1px dashed var(--st-line-strong) !important;
  border-radius: var(--st-radius-md) !important;
  color: var(--st-muted) !important;
}

.modal,
.rev-modal,
#timerMateriaModal,
#histDayModal,
#slotEditorModal {
  background: rgba(45, 38, 58, .32) !important;
  backdrop-filter: blur(10px);
}

.modal-content,
.rev-modal-box,
.timer-modal-box,
.hist-det-box,
.crono-modal-box {
  background: #fff !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-radius-lg) !important;
  box-shadow: 0 34px 90px rgba(45, 38, 58, .18) !important;
  color: var(--st-ink) !important;
}

.modal-header,
.rev-modal-head {
  border-color: var(--st-line) !important;
}

.toast,
.toast.success,
.toast.error {
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(45, 38, 58, .15) !important;
}

/* Tempo de estudo */
#page-tempo {
  --tempo-blue: var(--st-purple);
  --tempo-dark: #fff;
  --tempo-dark-2: var(--st-surface-soft);
  --tempo-line: var(--st-line);
}

#page-tempo .timer-summary-bar {
  min-height: 96px !important;
  padding: 24px 28px !important;
  color: var(--st-ink) !important;
}

#page-tempo .timer-summary-label {
  color: var(--st-muted) !important;
  font-size: 11px !important;
}

#page-tempo .timer-summary-value {
  color: var(--st-ink) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

#page-tempo .timer-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 18px !important;
}

#page-tempo .timer-card {
  min-height: 158px !important;
  padding: 18px !important;
  color: var(--st-ink) !important;
  overflow: hidden;
}

#page-tempo .timer-card::before {
  width: 5px !important;
  height: auto !important;
  inset: 0 auto 0 0 !important;
  border-radius: 999px;
  opacity: .95;
}

#page-tempo .timer-card-name,
#page-tempo .timer-card-time {
  color: var(--st-ink) !important;
}

#page-tempo .timer-card-name {
  font-size: 13px !important;
}

#page-tempo .timer-card-time {
  font-size: 30px !important;
}

#page-tempo .timer-card-del {
  color: var(--st-muted) !important;
}

#page-tempo .timer-card-del:hover {
  background: var(--st-surface-soft) !important;
  color: var(--st-rose-dark) !important;
}

#page-tempo .timer-card-btn {
  min-height: 38px !important;
  background: var(--card-color) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#page-tempo .timer-card-btn-stop {
  background: #ee6f7e !important;
}

#page-tempo .timer-card-active {
  border-color: color-mix(in srgb, var(--card-color) 35%, #fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-color) 18%, transparent), var(--st-shadow-sm) !important;
}

#page-tempo .hist-section {
  min-height: 300px !important;
  padding: 26px !important;
  color: var(--st-ink) !important;
}

#page-tempo .hist-title,
#page-tempo .hist-week-day,
#page-tempo .hist-det-date,
#page-tempo .hist-det-nome,
#page-tempo .hist-day-name,
#page-tempo .hist-det-total strong {
  color: var(--st-ink) !important;
}

#page-tempo .hist-legend-label,
#page-tempo .hist-week-label,
#page-tempo .hist-month-dow span,
#page-tempo .hist-day-total span,
#page-tempo .hist-dia-total-label,
#page-tempo .hist-day-time,
#page-tempo .hist-det-tempo,
#page-tempo .hist-det-total,
#page-tempo .hist-det-empty,
#page-tempo .hist-dia-empty {
  color: var(--st-muted) !important;
}

#page-tempo .hist-sq,
#page-tempo .hist-week-sq,
#page-tempo .hist-month-cell {
  background: rgba(155, 92, 246, var(--sq-opacity)) !important;
}

#page-tempo .hist-week-sq,
#page-tempo .hist-month-cell {
  border: 1px solid rgba(155, 92, 246, .2) !important;
  border-radius: 10px !important;
}

#page-tempo .hist-cell-hoje .hist-week-sq,
#page-tempo .hist-cell-hoje.hist-month-cell {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--st-purple) !important;
}

#page-tempo .hist-week-time {
  color: var(--st-purple) !important;
}

#page-tempo .hist-nav-btn,
#page-tempo .hist-nav-label {
  background: #fff !important;
  border: 1px solid var(--st-line-strong) !important;
  color: var(--st-ink) !important;
  border-radius: 999px !important;
}

#page-tempo .hist-nav-btn:hover:not(:disabled) {
  background: var(--st-purple-soft) !important;
  border-color: var(--st-purple-mid) !important;
  color: var(--st-purple-dark) !important;
}

#page-tempo .hist-day-total,
#page-tempo .hist-dia-total-row {
  border-bottom-color: var(--st-line) !important;
}

#page-tempo .hist-day-track,
#page-tempo .hist-det-bar-wrap {
  background: var(--st-surface-soft) !important;
}

#page-tempo .hist-month-cell {
  color: var(--st-ink) !important;
}

#page-tempo .hist-month-cell strong {
  color: var(--st-purple-dark) !important;
}

/* Revisoes */
#page-revisao {
  --rev-blue: var(--st-purple);
  --rev-border: var(--st-line);
  --rev-muted: var(--st-muted);
  --rev-soft: var(--st-surface-soft);
}

.rev-header-actions {
  gap: 10px !important;
}

.rev-header-actions .btn-primary,
.rev-header-actions .btn-secondary,
.rev-interval-actions .btn-primary,
.rev-interval-actions .btn-secondary {
  padding: 10px 16px !important;
}

.rev-interval-title {
  padding: 18px 22px !important;
  border-bottom-color: var(--st-line) !important;
}

.rev-interval-chip,
.rev-schedule-pill,
.rev-next-count,
.rev-subject-pill {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--st-surface-soft) !important;
  color: #67748a !important;
}

.rev-interval-chip input {
  border-radius: 10px !important;
}

.rev-list-panel {
  padding: 18px !important;
}

.rev-board-grid {
  gap: 14px !important;
}

.rev-row-card,
.rev-content-card {
  border-left-width: 5px !important;
  padding: 14px 16px !important;
}

.rev-row-title,
.rev-content-card strong {
  color: var(--st-ink) !important;
}

.rev-row-sub,
.rev-row-date,
.rev-progress-meta {
  color: var(--st-muted) !important;
}

.rev-progress-line {
  background: var(--st-surface-soft) !important;
}

.rev-check-wrap span {
  border-color: var(--st-line-strong) !important;
  border-radius: 6px !important;
}

.rev-check-wrap input:checked + span {
  border-color: var(--st-purple) !important;
  background: var(--st-purple) !important;
}

.rev-form-note {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple-dark) !important;
  border-radius: var(--st-radius-sm) !important;
}

/* Banco de questoes */
.bq-filters-sticky {
  top: 12px !important;
}

.bq-filter-row,
.bq-search-row {
  border-color: var(--st-line) !important;
  padding: 12px 18px !important;
}

.bq-progress {
  padding: 16px 20px !important;
}

.bq-prog-bar-wrap,
.progress-bar,
.materia-progress {
  background: var(--st-surface-soft) !important;
  border: 0 !important;
}

.bq-prog-bar-fill,
.progress-fill,
.materia-progress-fill {
  background: linear-gradient(90deg, var(--st-purple), var(--st-mint-dark)) !important;
}

/* Cronograma */
.cronograma-wrap,
.cronograma-container {
  background: #fff !important;
  border: 1px solid var(--st-line) !important;
  border-radius: var(--st-radius-lg) !important;
  box-shadow: var(--st-shadow-sm) !important;
}

.crono-cell,
.crono-header,
.crono-time,
.cronograma-table th,
.cronograma-table td {
  border-color: var(--st-line) !important;
}

.crono-cell {
  border-radius: 12px !important;
}

.crono-cell:hover {
  background: var(--st-purple-soft) !important;
}

.crono-cor-quick {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 1px var(--st-line-strong) !important;
}

/* Graficos e canvas */
.chart-card,
.grafico-card,
.chart-container {
  background: #fff !important;
  border-color: var(--st-line) !important;
  border-radius: var(--st-radius-lg) !important;
}

canvas {
  max-width: 100%;
}

/* Graficos 2026 */
.graph-shell {
  display: grid;
  gap: 18px;
}

.graph-tabs {
  align-items: center;
  flex-wrap: wrap;
}

.graph-content {
  display: grid;
  gap: 18px;
}

.graph-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.graph-model-control,
.graph-mode-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--st-muted);
  font-size: 11px;
  font-weight: 800;
}

.graph-model-control {
  flex-direction: column;
  align-items: flex-start;
  min-width: min(280px, 100%);
}

.graph-model-control span,
.graph-mode-control span {
  text-transform: uppercase;
  letter-spacing: .02em !important;
}

.graph-model-control select,
.graph-mode-control select {
  min-height: 34px;
  border: 1px solid var(--st-line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--st-ink);
  padding: 0 32px 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.graph-model-control select {
  width: 100%;
}

.graph-count {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  background: var(--st-surface-soft);
  color: var(--st-muted);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
}

.graph-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}

.graph-card-wide,
.graph-section-title,
.graph-empty {
  grid-column: 1 / -1;
}

.graph-card-wide .chart-container {
  min-height: 340px;
}

.graph-card .chart-container {
  min-height: 280px;
}

.graph-card-header {
  gap: 12px;
  flex-wrap: wrap;
}

.graph-section-title {
  margin: 8px 0 -2px;
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em !important;
}

.graph-empty {
  padding: 32px !important;
}

/* Configuracoes */
.color-preview,
input[type="color"] {
  border-radius: 12px !important;
  border-color: var(--st-line-strong) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar {
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 28px 28px 0 !important;
    transform: translateX(-105%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex !important;
    background: #fff !important;
    border: 1px solid var(--st-line) !important;
    border-radius: 16px !important;
    box-shadow: var(--st-shadow-sm) !important;
  }

  .main-content {
    margin-left: 0 !important;
    max-width: none !important;
    padding: 76px 16px 28px !important;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  }

  .stat-card {
    min-height: 130px;
  }
}

@media (max-width: 680px) {
  .page-header,
  #page-tempo .page-header,
  .rev-page-header {
    align-items: stretch !important;
  }

  .page-header > div,
  .page-header > button,
  .page-header > .rev-header-actions {
    width: 100%;
  }

  .btn-primary,
  .btn-secondary {
    justify-content: center;
  }

  #page-tempo .timer-summary-bar,
  #page-tempo .hist-header {
    align-items: stretch !important;
  }

  #page-tempo .timer-grid {
    grid-template-columns: 1fr !important;
  }

  .rev-board-grid,
  .grid-2col,
  .grid-3col,
  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  .card-body {
    padding: 18px !important;
  }
}

/* Dark mode */
.theme-toggle {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-surface-soft);
  color: var(--st-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 14px;
  font-size: 12px;
  font-weight: 800;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
  background: var(--st-purple-soft);
  color: var(--st-purple-dark);
}

.theme-toggle-switch {
  width: 42px;
  height: 26px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--st-line-strong);
  flex: 0 0 auto;
}

.theme-toggle-switch span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a974ff, var(--st-purple));
  box-shadow: 0 5px 12px rgba(155, 92, 246, .28);
  transition: transform .2s ease, background .2s ease;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --st-bg: #151923;
  --st-surface: #202534;
  --st-surface-soft: #273040;
  --st-surface-softer: #303749;
  --st-ink: #f5f7ff;
  --st-text: #d8deee;
  --st-muted: #a5afc4;
  --st-line: rgba(220, 230, 241, .12);
  --st-line-strong: rgba(220, 230, 241, .22);
  --st-purple: #b9c7ff;
  --st-purple-dark: #d3dcff;
  --st-purple-soft: #283050;
  --st-purple-mid: #7684c7;
  --st-mint: #9bdccf;
  --st-mint-dark: #9bdccf;
  --st-mint-soft: #173934;
  --st-rose: #40252d;
  --st-rose-dark: #ffc2cf;
  --st-amber: #3e311b;
  --st-amber-dark: #f6d79a;
  --st-shadow: 0 28px 80px rgba(0, 0, 0, .38);
  --st-shadow-sm: 0 14px 40px rgba(0, 0, 0, .28);
  --st-shadow-xs: 0 6px 18px rgba(0, 0, 0, .22);

  --bg: var(--st-bg);
  --surface: var(--st-surface);
  --surface-2: var(--st-surface-soft);
  --surface-3: var(--st-surface-softer);
  --surface-4: #33364b;
  --border: var(--st-line-strong);
  --border-soft: var(--st-line);
  --text-primary: var(--st-ink);
  --text-secondary: var(--st-text);
  --text-muted: var(--st-muted);
  --accent: var(--st-purple);
  --accent-dark: #9b73ef;
  --accent-soft: var(--st-purple-soft);
  --accent-mid: var(--st-purple-mid);
  --success: var(--st-mint-dark);
  --success-soft: var(--st-mint-soft);
  --warn: var(--st-amber-dark);
  --warn-soft: var(--st-amber);
  --danger: var(--st-rose-dark);
  --danger-soft: var(--st-rose);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--st-bg) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] body::before {
  background: linear-gradient(135deg, rgba(185, 199, 255, .1), rgba(155, 220, 207, .08) 48%, rgba(255, 194, 207, .06)) !important;
}

html[data-theme="dark"] .main-content {
  background: transparent !important;
}

html[data-theme="dark"] .sidebar {
  background: rgba(25, 27, 38, .92) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .brand-text,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] #page-tempo .page-title,
html[data-theme="dark"] #page-revisao .page-title,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .card-header h3,
html[data-theme="dark"] .hist-title,
html[data-theme="dark"] .rev-interval-title,
html[data-theme="dark"] .rev-row-title,
html[data-theme="dark"] .rev-content-card strong,
html[data-theme="dark"] #page-tempo .timer-card-name,
html[data-theme="dark"] #page-tempo .timer-card-time,
html[data-theme="dark"] #page-tempo .timer-summary-value,
html[data-theme="dark"] #page-tempo .hist-week-day,
html[data-theme="dark"] #page-tempo .hist-det-date,
html[data-theme="dark"] #page-tempo .hist-det-nome,
html[data-theme="dark"] #page-tempo .hist-day-name,
html[data-theme="dark"] #page-tempo .hist-det-total strong {
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .brand-text::after,
html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] #page-tempo .page-subtitle,
html[data-theme="dark"] #page-revisao .page-subtitle,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .sidebar-date,
html[data-theme="dark"] .rev-row-sub,
html[data-theme="dark"] .rev-row-date,
html[data-theme="dark"] .rev-progress-meta,
html[data-theme="dark"] #page-tempo .timer-summary-label,
html[data-theme="dark"] #page-tempo .hist-legend-label,
html[data-theme="dark"] #page-tempo .hist-week-label,
html[data-theme="dark"] #page-tempo .hist-month-dow span,
html[data-theme="dark"] #page-tempo .hist-day-total span,
html[data-theme="dark"] #page-tempo .hist-dia-total-label,
html[data-theme="dark"] #page-tempo .hist-day-time,
html[data-theme="dark"] #page-tempo .hist-det-tempo,
html[data-theme="dark"] #page-tempo .hist-det-total,
html[data-theme="dark"] #page-tempo .hist-det-empty,
html[data-theme="dark"] #page-tempo .hist-dia-empty {
  color: var(--st-muted) !important;
}

html[data-theme="dark"] .nav-item {
  color: #b5bdd4 !important;
}

html[data-theme="dark"] .nav-item:hover {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .nav-item.active {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .bq-filters-sticky,
html[data-theme="dark"] .bq-progress,
html[data-theme="dark"] .grafico-card,
html[data-theme="dark"] .modelo-card,
html[data-theme="dark"] .ranking-card,
html[data-theme="dark"] .sim-card,
html[data-theme="dark"] .erro-card,
html[data-theme="dark"] .redacao-card,
html[data-theme="dark"] .repertorio-card,
html[data-theme="dark"] .cronograma-wrap,
html[data-theme="dark"] .cronograma-container,
html[data-theme="dark"] .rev-interval-card,
html[data-theme="dark"] .rev-list-panel,
html[data-theme="dark"] .rev-row-card,
html[data-theme="dark"] .rev-content-card,
html[data-theme="dark"] .hist-section,
html[data-theme="dark"] .timer-summary-bar,
html[data-theme="dark"] .timer-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .bq-question-card,
html[data-theme="dark"] .bq-area-card,
html[data-theme="dark"] .list-item {
  background: rgba(25, 27, 38, .94) !important;
  border-color: var(--st-line) !important;
  box-shadow: var(--st-shadow-sm) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .bq-filter-row,
html[data-theme="dark"] .bq-search-row,
html[data-theme="dark"] .rev-interval-title,
html[data-theme="dark"] .sidebar-footer {
  border-color: var(--st-line) !important;
}

html[data-theme="dark"] .stat-icon {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] .stat-card:nth-child(2n) .stat-icon {
  background: var(--st-mint-soft) !important;
  color: var(--st-mint) !important;
}

html[data-theme="dark"] .stat-card.warn .stat-icon,
html[data-theme="dark"] .stat-card:nth-child(3n) .stat-icon {
  background: var(--st-rose) !important;
  color: var(--st-rose-dark) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .rev-header-actions .btn-secondary,
html[data-theme="dark"] .rev-interval-actions .btn-secondary,
html[data-theme="dark"] .hist-nav-btn,
html[data-theme="dark"] .hist-nav-label,
html[data-theme="dark"] #page-tempo .hist-nav-btn,
html[data-theme="dark"] #page-tempo .hist-nav-label {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--st-line-strong) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] .btn-icon {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--st-muted) !important;
}

html[data-theme="dark"] .btn-icon:hover {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .bq-search-row input,
html[data-theme="dark"] .rev-filter-row select,
html[data-theme="dark"] .rev-form-grid input,
html[data-theme="dark"] .rev-form-grid select,
html[data-theme="dark"] .rev-form-grid textarea,
html[data-theme="dark"] .rev-subject-form input,
html[data-theme="dark"] .timer-modal-input,
html[data-theme="dark"] .crono-modal-input,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--st-line-strong) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #818aa3 !important;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, .06);
  border-color: var(--st-line);
  color: var(--st-ink);
}

html[data-theme="dark"] .theme-toggle:hover {
  background: var(--st-purple-soft);
  color: var(--st-purple);
}

html[data-theme="dark"] .theme-toggle-switch {
  background: #10111a;
  box-shadow: inset 0 0 0 1px var(--st-line-strong);
}

html[data-theme="dark"] .theme-toggle-switch span {
  transform: translateX(16px);
  background: linear-gradient(135deg, #8eeadd, #b58cff);
}

html[data-theme="dark"] .tabs,
html[data-theme="dark"] .rev-tabs,
html[data-theme="dark"] .hist-toggle,
html[data-theme="dark"] .ranking-filter,
html[data-theme="dark"] .bq-chips {
  background: rgba(255, 255, 255, .045) !important;
}

html[data-theme="dark"] .tab.active,
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .rev-tab.active,
html[data-theme="dark"] .ranking-filter-btn.active,
html[data-theme="dark"] .hist-toggle-btn.active {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] .tab,
html[data-theme="dark"] .tab-btn,
html[data-theme="dark"] .rev-tab,
html[data-theme="dark"] .ranking-filter-btn,
html[data-theme="dark"] .hist-toggle-btn,
html[data-theme="dark"] .bq-chip {
  color: #aab3ca !important;
}

html[data-theme="dark"] .bq-chip.active,
html[data-theme="dark"] .bq-chip:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] .modal,
html[data-theme="dark"] .rev-modal,
html[data-theme="dark"] #timerMateriaModal,
html[data-theme="dark"] #histDayModal,
html[data-theme="dark"] #slotEditorModal {
  background: rgba(0, 0, 0, .56) !important;
}

html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .rev-modal-box,
html[data-theme="dark"] .timer-modal-box,
html[data-theme="dark"] .hist-det-box,
html[data-theme="dark"] .crono-modal-box {
  background: #191b26 !important;
  border-color: var(--st-line) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .rev-empty,
html[data-theme="dark"] .rev-empty-subjects,
html[data-theme="dark"] .timer-empty {
  background: rgba(255, 255, 255, .035) !important;
  border-color: var(--st-line-strong) !important;
  color: var(--st-muted) !important;
}

html[data-theme="dark"] .rev-interval-chip,
html[data-theme="dark"] .rev-schedule-pill,
html[data-theme="dark"] .rev-next-count,
html[data-theme="dark"] .rev-subject-pill,
html[data-theme="dark"] .rev-form-note {
  background: rgba(255, 255, 255, .06) !important;
  color: #c3c9dc !important;
}

html[data-theme="dark"] .rev-progress-line,
html[data-theme="dark"] .bq-prog-bar-wrap,
html[data-theme="dark"] .progress-bar,
html[data-theme="dark"] .materia-progress,
html[data-theme="dark"] #page-tempo .hist-day-track,
html[data-theme="dark"] #page-tempo .hist-det-bar-wrap {
  background: rgba(255, 255, 255, .075) !important;
}

/* Banco de questoes: alternativas retangulares.
   Mantem esta regra no fim para vencer button[class*="btn"]. */
.bq-alt-btn,
.alt-btn {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  line-height: 1.45 !important;
}

@media (max-width: 520px) {
  .bq-alt-btn,
  .alt-btn {
    border-radius: 9px !important;
    padding: 12px !important;
  }
}

html[data-theme="dark"] .crono-table thead th,
html[data-theme="dark"] .crono-hora-cell,
html[data-theme="dark"] .cronograma-table th {
  background: rgba(255, 255, 255, .055) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .crono-slot-cell,
html[data-theme="dark"] .crono-cell,
html[data-theme="dark"] .cronograma-table td {
  border-color: var(--st-line) !important;
}

html[data-theme="dark"] .crono-slot-cell[style*="255,255,255"],
html[data-theme="dark"] .crono-slot-cell[style*="#fff"],
html[data-theme="dark"] .crono-slot-cell:not([style]) {
  background: rgba(255, 255, 255, .035) !important;
  color: var(--st-muted) !important;
}

html[data-theme="dark"] #page-tempo .hist-sq,
html[data-theme="dark"] #page-tempo .hist-week-sq,
html[data-theme="dark"] #page-tempo .hist-month-cell {
  background: rgba(181, 140, 255, var(--sq-opacity)) !important;
  border-color: rgba(181, 140, 255, .28) !important;
}

html[data-theme="dark"] #page-tempo .hist-week-time,
html[data-theme="dark"] #page-tempo .hist-month-cell strong {
  color: var(--st-purple) !important;
}

html[data-theme="dark"] #page-tempo .hist-month-cell {
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .materias-table tbody tr:hover,
html[data-theme="dark"] .list-item:hover,
html[data-theme="dark"] .ranking-row:hover,
html[data-theme="dark"] .bq-question-card:hover,
html[data-theme="dark"] .rev-row-card:hover,
html[data-theme="dark"] .crono-cell:hover {
  background: rgba(255, 255, 255, .07) !important;
}

html[data-theme="dark"] .graph-model-control select,
html[data-theme="dark"] .graph-mode-control select {
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--st-line-strong) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] .graph-count {
  background: rgba(255, 255, 255, .055) !important;
  color: var(--st-muted) !important;
}

html[data-theme="dark"] #page-tempo .timer-summary-bar,
html[data-theme="dark"] #page-tempo .timer-card,
html[data-theme="dark"] #page-tempo .hist-section {
  background: rgba(25, 27, 38, .96) !important;
  border: 1px solid var(--st-line) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] #page-tempo .timer-card:hover {
  background: rgba(29, 32, 46, .98) !important;
  box-shadow: 0 22px 62px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] #page-tempo .timer-summary-label,
html[data-theme="dark"] #page-tempo .hist-legend-label,
html[data-theme="dark"] #page-tempo .hist-week-label,
html[data-theme="dark"] #page-tempo .hist-month-dow span {
  color: #a8b0c9 !important;
}

html[data-theme="dark"] #page-tempo .timer-summary-value,
html[data-theme="dark"] #page-tempo .timer-card-name,
html[data-theme="dark"] #page-tempo .timer-card-time,
html[data-theme="dark"] #page-tempo .hist-title,
html[data-theme="dark"] #page-tempo .hist-week-day,
html[data-theme="dark"] #page-tempo .hist-day-name,
html[data-theme="dark"] #page-tempo .hist-det-nome,
html[data-theme="dark"] #page-tempo .hist-det-date,
html[data-theme="dark"] #page-tempo .hist-det-total strong {
  color: var(--st-ink) !important;
}

html[data-theme="dark"] #page-tempo .timer-card-del {
  color: #a8b0c9 !important;
}

html[data-theme="dark"] #page-tempo .timer-card-del:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffb4c1 !important;
}

html[data-theme="dark"] #page-tempo .hist-toggle {
  background: rgba(255, 255, 255, .055) !important;
  border: 0 !important;
}

html[data-theme="dark"] #page-tempo .hist-toggle-btn {
  color: #a8b0c9 !important;
}

html[data-theme="dark"] #page-tempo .hist-toggle-btn.active {
  background: var(--st-purple-soft) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] #page-tempo .hist-nav-btn,
html[data-theme="dark"] #page-tempo .hist-nav-label {
  background: rgba(255, 255, 255, .055) !important;
  border-color: var(--st-line-strong) !important;
  color: var(--st-ink) !important;
}

html[data-theme="dark"] #page-tempo .hist-nav-btn:hover:not(:disabled) {
  background: var(--st-purple-soft) !important;
  border-color: var(--st-purple-mid) !important;
  color: var(--st-purple) !important;
}

html[data-theme="dark"] #page-tempo .hist-week-sq,
html[data-theme="dark"] #page-tempo .hist-month-cell {
  border-color: rgba(181, 140, 255, .32) !important;
  background: rgba(181, 140, 255, var(--sq-opacity)) !important;
}

html[data-theme="dark"] #page-tempo .hist-cell-hoje .hist-week-sq,
html[data-theme="dark"] #page-tempo .hist-cell-hoje.hist-month-cell {
  box-shadow: 0 0 0 2px rgba(25, 27, 38, .96) inset, 0 0 0 2px var(--st-purple) !important;
}

html[data-theme="dark"] #page-tempo .hist-week-time,
html[data-theme="dark"] #page-tempo .hist-month-cell strong {
  color: var(--st-purple) !important;
}

html[data-theme="dark"] #page-tempo .hist-day-total,
html[data-theme="dark"] #page-tempo .hist-dia-total-row {
  border-bottom-color: var(--st-line) !important;
}

html[data-theme="dark"] #page-tempo .hist-day-track,
html[data-theme="dark"] #page-tempo .hist-det-bar-wrap {
  background: rgba(255, 255, 255, .075) !important;
}