@import url('../../assets/css/feedback-checklist.css?v=8');

:root {
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --text: #10243E;
  --muted: #5F6F82;
  --border: #D9E2EC;
  --accent: #184888;
  --accent-strong: #123A70;
  --accent-soft: #E7EEF7;
  --gold: #D4AF37;
  --gold-soft: #FFF7D6;
  --danger: #C83E4D;
  --success: #16815C;
  --shadow: 0 12px 34px rgba(11, 31, 59, 0.08);
  --sidebar: #FFFFFF;
}

:root[data-theme="dark"] {
  --bg: #07111F;
  --surface: #0D1B30;
  --surface-2: #13233A;
  --text: #F4F8FF;
  --muted: #A8B8CD;
  --border: #20344F;
  --accent: #4F7FB8;
  --accent-strong: #7FA6D1;
  --accent-soft: #142A44;
  --gold: #D4AF37;
  --gold-soft: #3A321A;
  --danger: #FF929C;
  --success: #76D9B0;
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  --sidebar: #081426;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #07111F;
    --surface: #0D1B30;
    --surface-2: #13233A;
    --text: #F4F8FF;
    --muted: #A8B8CD;
    --border: #20344F;
    --accent: #4F7FB8;
    --accent-strong: #7FA6D1;
    --accent-soft: #142A44;
    --gold: #D4AF37;
    --gold-soft: #3A321A;
    --danger: #FF929C;
    --success: #76D9B0;
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
    --sidebar: #081426;
  }
}


:root[data-theme="leila-mood"] {
  --bg: #fff6fa;
  --surface: #fffdfd;
  --surface-2: #fff0f6;
  --text: #402a36;
  --muted: #8b6879;
  --border: #f0d2df;
  --accent: #e85d9e;
  --accent-strong: #cb3f83;
  --accent-soft: #fde2ef;
  --danger: #d84c6a;
  --success: #5f9877;
  --shadow: 0 12px 32px rgba(193, 75, 128, 0.10);
  --sidebar: #fff9fc;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }

.loading-page,
.auth-page {
  display: grid;
  place-items: center;
  padding: 24px;
  min-height: 100vh;
}

.loading-card,
.auth-card {
  width: min(100%, 420px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.loading-card {
  padding: 30px;
  text-align: center;
}

.loading-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

.auth-card { padding: 34px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.auth-brand h1 { margin: 0; font-size: 26px; }
.auth-brand p { margin: 4px 0 0; color: var(--muted); }

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}

.auth-form { display: grid; gap: 16px; }

.auth-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
}

.auth-form input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  padding: 0 14px;
  outline: none;
}

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.auth-form .auth-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.auth-form .auth-remember input {
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  box-shadow: none;
}

.auth-form .auth-remember input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 750;
}

.button.primary {
  background: linear-gradient(135deg, #184888, #2563EB) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(24, 72, 136, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.button.primary:hover {
  background: linear-gradient(135deg, #1e58a6, #3b82f6) !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 72, 136, 0.28);
}
.button.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); border-radius: 12px; }

.auth-message {
  min-height: 20px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.auth-message.error { color: var(--danger); }
.auth-message.success { color: var(--success); }

.app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  z-index: 30;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-copy {
  display: grid;
  min-width: 0;
}

.brand-copy strong { font-size: 17px; }
.brand-copy small { color: var(--muted); font-size: 11px; }

.sidebar-close {
  display: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 28px;
}

.nav { display: grid; gap: 6px; }

.nav-link,
.nav-group-label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
}

.nav-link > span:not(.nav-icon):not(.nav-plan-badge) {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.nav-plan-badge {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent, #1d63ed) 12%, transparent);
  color: var(--accent, #1d63ed);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-link:hover,
.nav-sublink:hover {
  background: var(--surface-2);
  color: var(--text);
}

.nav-link.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-icon {
  width: 20px;
  text-align: center;
  font-size: 17px;
}

.nav-group { margin: 2px 0; }

.nav-submenu {
  display: grid;
  gap: 3px;
  margin: 2px 0 7px 42px;
}

.nav-sublink {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 15px;
}

.nav-sublink.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.sidebar-footer {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}

/* Modo Estudos: somente a lista de navegação rola; Ofensiva, usuário e Sair ficam fixos. */
.sidebar .nav-study {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.sidebar .sidebar-footer-study {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 12px;
  background: var(--sidebar);
  position: relative;
  z-index: 2;
}

.streak-mini,
.user-mini {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.streak-mini strong,
.user-copy strong {
  display: block;
  font-size: 13px;
}

.streak-mini small,
.user-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.user-mini,
.user-copy { min-width: 0; }

.user-copy strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.logout-button {
  min-height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 10px;
  font-weight: 700;
}

.logout-button:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  min-width: 0;
  padding: 28px 34px 48px;
}

.topbar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.menu-open {
  display: none;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 11px;
  line-height: 1;
  font-size: 20px;
}

.page-heading { min-width: 0; }

.page-heading .eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.15;
}

.page:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  max-width: 1320px;
  margin: 0 auto;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.metric-card,
.panel,
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.metric-card { padding: 18px; }

.metric-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.metric-value {
  display: block;
  margin-top: 10px;
  font-size: 27px;
  font-weight: 800;
}

.metric-helper {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.panel {
  padding: 20px;
  margin-top: 16px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-header h2,
.feature-card h2,
.feature-card h3 { margin: 0; }

.panel-header p,
.feature-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.placeholder {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.feature-card { padding: 22px; }

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.badge.accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.area-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.area-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
}

.area-row span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.settings-section {
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.setting-row {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.setting-row h2 { margin: 0; font-size: 17px; }
.setting-row p { margin: 0; color: var(--muted); line-height: 1.5; }

.theme-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.theme-option { position: relative; }

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option span {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  font-weight: 700;
}

.theme-option input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}


.theme-option.leila-preview span {
  gap: 2px;
  background: linear-gradient(135deg, #fff4f9, #fde2ef);
  border-color: #efbfd4;
  color: #b63f78;
}

.theme-option.leila-preview span strong,
.theme-option.leila-preview span small {
  display: block;
  line-height: 1.15;
}

.theme-option.leila-preview span small {
  font-size: 10px;
  font-weight: 650;
  color: #9c6780;
}

.theme-option.leila-preview input:checked + span {
  border-color: #e85d9e;
  background: #fde2ef;
  color: #cb3f83;
  box-shadow: 0 0 0 3px rgba(232, 93, 158, .12);
}

.inline-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
}

.sidebar-backdrop { display: none; }

.app-shell .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
.app-shell .main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { opacity: 0; }

body.app-ready .app-shell .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
body.app-ready .app-shell .main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { opacity: 1; }

@media (max-width: 980px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { grid-template-columns: 1fr; }

  .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
    position: fixed;
    left: 0;
    top: 0;
    width: min(86vw, 290px);
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow);
  }

  .sidebar-close,
  .menu-open {
    display: inline-grid;
    place-items: center;
  }

  body.sidebar-open .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { transform: translateX(0); }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(0, 0, 0, .36);
  }

  body.sidebar-open .sidebar-backdrop { display: block; }

  .main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { padding: 22px 20px 40px; }
}

@media (max-width: 680px) {
  .metric-grid,
  .feature-grid,
  .theme-options { grid-template-columns: 1fr; }

  .auth-card { padding: 26px 20px; }

  .main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* =========================================================
   LO-FI DOCMAP
   ========================================================= */

.sidebar-lofi {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.sidebar-lofi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sidebar-lofi-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 850;
}

.sidebar-lofi-toggle:hover {
  border-color: var(--accent);
}

.sidebar-lofi-copy {
  min-width: 0;
}

.sidebar-lofi-copy strong,
.sidebar-lofi-copy small {
  display: block;
}

.sidebar-lofi-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-lofi-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.sidebar-lofi-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.sidebar-lofi-volume input,
.lofi-volume input,
.lofi-progress input {
  width: 100%;
  accent-color: var(--accent);
}

.lofi-player {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.lofi-player-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lofi-main-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
  font-weight: 850;
}

.lofi-player-copy {
  min-width: 0;
}

.lofi-player-copy strong,
.lofi-player-copy small {
  display: block;
}

.lofi-player-copy strong {
  font-size: 15px;
}

.lofi-player-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.lofi-progress {
  display: grid;
  gap: 6px;
}

.lofi-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.lofi-volume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.lofi-loop-note {
  display: inline-flex;
  width: fit-content;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Mantém a atividade escolhida na Ambientação sem depender do fase3.css. */
.selected-activity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.selected-activity[hidden] {
  display: none;
}

.selected-activity h2 {
  margin: 0;
  font-size: 20px;
}

.selected-activity p {
  margin: 7px 0 0;
  color: var(--muted);
}

.compact-button {
  min-height: 40px;
  padding: 0 14px;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .menu-open {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 10px;
  }

  .selected-activity {
    align-items: flex-start;
    flex-direction: column;
  }
}



.sidebar-lofi-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0 9px;
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  font: inherit;
}

.lofi-track-picker {
  position: relative;
}

.lofi-track-picker select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 38px 0 12px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.lofi-track-picker::after {
  content: "⌄";
  position: absolute;
  right: 13px;
  bottom: 11px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

.sidebar-lofi-select {
  font-size: 10px;
  font-weight: 750;
}

.sidebar-lofi-select:focus,
.lofi-track-picker select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.lofi-track-picker {
  display: grid;
  gap: 7px;
}

.lofi-track-picker > span {
  font-size: 11px;
  font-weight: 800;
}

.lofi-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lofi-note-row small {
  color: var(--muted);
  font-size: 9px;
}



/* =========================================================
   TRAUBE — BRANDING FINAL
   ========================================================= */

/* ---------------------------------------------------------
   MENU LATERAL — LOGO POR TEMA
   --------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-logo-stack {
  position: relative;
  display: block;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
}

.brand-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition:
    transform .18s ease,
    opacity .18s ease;
}

/* Claro / padrão */
.brand-logo-light {
  display: block;
}

.brand-logo-dark,
.brand-logo-pink {
  display: none;
}

/* Escuro */
:root[data-theme="dark"] .brand-logo-light,
:root[data-theme="dark"] .brand-logo-pink {
  display: none;
}

:root[data-theme="dark"] .brand-logo-dark {
  display: block;
  filter:
    drop-shadow(
      0 4px 13px
      rgba(45, 160, 255, .22)
    );
}

/* Rosa / Pink Mood */
:root[data-theme="leila-mood"] .brand-logo-light,
:root[data-theme="leila-mood"] .brand-logo-dark {
  display: none;
}

:root[data-theme="leila-mood"] .brand-logo-pink {
  display: block;
  filter:
    drop-shadow(
      0 4px 13px
      rgba(232, 93, 158, .22)
    );
}

.brand:hover .brand-logo {
  transform: scale(1.05);
}

.brand-copy {
  display: grid;
  min-width: 0;
}

.brand-copy strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.brand-copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------------------------------------------------------
   LOGIN
   --------------------------------------------------------- */

.auth-card {
  width: min(100%, 440px);
  padding: 34px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
}

.auth-brand-logo {
  width: 96px;
  height: 96px;
  display: block;
  flex: 0 0 96px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.auth-brand-copy {
  min-width: 0;
}

.auth-brand h1 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.auth-brand p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   TELA DE CARREGAMENTO
   --------------------------------------------------------- */

.loading-logo {
  width: 125px;
  height: 125px;
  display: block;
  margin: 0 auto 14px;
  object-fit: contain;
  background: transparent;
  border: 0;
}

.loading-card strong {
  display: block;
  color: var(--text);
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -.02em;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */

@media (max-width: 700px) {
  .brand-logo-stack {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .brand-copy strong {
    font-size: 17px;
  }

  .auth-brand-logo {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }

  .auth-brand h1 {
    font-size: 24px;
  }
}


/* =========================================================
   TRAUBE — HOTFIX DE LOGO
   ========================================================= */

.brand-logo-single {
  position: static !important;
  inset: auto !important;

  display: block !important;

  width: 62px !important;
  height: 62px !important;

  flex: 0 0 62px;

  object-fit: contain;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  filter: none;

  transition:
    transform .18s ease,
    filter .18s ease;
}

.brand:hover
.brand-logo-single {
  transform: scale(1.05);
}

:root[data-theme="dark"]
.brand-logo-single {
  filter:
    drop-shadow(
      0 4px 13px
      rgba(45, 160, 255, .22)
    );
}

:root[data-theme="leila-mood"]
.brand-logo-single {
  filter:
    drop-shadow(
      0 4px 13px
      rgba(232, 93, 158, .22)
    );
}

@media (max-width: 700px) {

  .brand-logo-single {
    width: 54px !important;
    height: 54px !important;

    flex-basis: 54px;
  }

}


/* =========================================================
   FASE 12 — SIDEBAR RECOLHÍVEL
   ========================================================= */
.sidebar-top-actions { display:flex; align-items:center; gap:4px; }
.sidebar-collapse { width:32px; height:32px; display:inline-grid; place-items:center; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--muted); font-size:22px; line-height:1; }
.sidebar-collapse:hover { color:var(--text); border-color:var(--accent); }
.nav-group-label { width:100%; border:0; background:transparent; text-align:left; cursor:pointer; }
.nav-group-chevron { margin-left:auto; font-size:14px; transition:transform .16s ease; }
.nav-group.nav-group-collapsed .nav-group-chevron { transform:rotate(-90deg); }
.nav-group.nav-group-collapsed .nav-submenu { display:none; }
body.sidebar-collapsed .app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { grid-template-columns:82px minmax(0,1fr); }
body.sidebar-collapsed .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { padding-inline:10px; overflow-x:hidden; }
body.sidebar-collapsed .sidebar-top { display:grid; justify-items:center; }
body.sidebar-collapsed .brand { justify-content:center; }
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-link > span:not(.nav-icon),
body.sidebar-collapsed .nav-group-label .nav-label-text,
body.sidebar-collapsed .nav-group-label .nav-group-chevron,
body.sidebar-collapsed .nav-submenu,
body.sidebar-collapsed .sidebar-footer { display:none !important; }
body.sidebar-collapsed .brand-logo-single,
body.sidebar-collapsed .traube-theme-logo { width:52px !important; height:52px !important; flex-basis:52px !important; }
body.sidebar-collapsed .nav-link,
body.sidebar-collapsed .nav-group-label { justify-content:center; padding-inline:0; }
body.sidebar-collapsed .nav-icon { font-size:18px; }
@media (max-width:980px) {
  .sidebar-collapse { display:none; }
  body.sidebar-collapsed .app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) { grid-template-columns:1fr; }
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .nav-link > span:not(.nav-icon),
  body.sidebar-collapsed .nav-group-label .nav-label-text,
  body.sidebar-collapsed .nav-group-label .nav-group-chevron,
  body.sidebar-collapsed .sidebar-footer { display:initial !important; }
  body.sidebar-collapsed .nav-submenu { display:grid !important; }
  body.sidebar-collapsed .nav-group.nav-group-collapsed .nav-submenu { display:none !important; }
  body.sidebar-collapsed .nav-link,
  body.sidebar-collapsed .nav-group-label { justify-content:flex-start; padding:0 12px; }
}


/* =========================================================
   FASE 12.1 — SIDEBAR REBATÍVEL DE VERDADE
   ========================================================= */

.sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
.main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
.app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  transition:
    transform .20s ease,
    grid-template-columns .20s ease,
    opacity .20s ease;
}

.sidebar-desktop-toggle {
  position: fixed;
  left: 250px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;

  width: 34px;
  height: 54px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--border);
  border-left: 0;

  border-radius:
    0
    12px
    12px
    0;

  background: var(--sidebar);
  color: var(--text);

  box-shadow:
    4px 0 18px
    rgba(15, 23, 42, .08);

  font-size: 24px;
  line-height: 1;

  transition:
    left .20s ease,
    background .15s ease;
}

.sidebar-desktop-toggle:hover {
  background: var(--surface-2);
}

body.sidebar-hidden .app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  grid-template-columns:
    0
    minmax(0, 1fr)
    !important;
}

body.sidebar-hidden .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  transform:
    translateX(-100%);

  opacity: 0;

  pointer-events: none;
}

body.sidebar-hidden
.sidebar-desktop-toggle {
  left: 0;
}

body.sidebar-hidden
.main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  min-width: 0;
}

.nav-group-label {
  border: 0;
}

.nav-group-chevron {
  margin-left: auto;
  transition:
    transform .16s ease;
}

.nav-group.nav-group-collapsed
.nav-group-chevron {
  transform:
    rotate(-90deg);
}

.nav-group.nav-group-collapsed
.nav-submenu,
.nav-submenu[hidden] {
  display:
    none
    !important;
}

@media (max-width: 980px) {
  .sidebar-desktop-toggle {
    display: none !important;
  }

  body.sidebar-hidden
  .app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
    grid-template-columns:
      1fr
      !important;
  }

  body.sidebar-hidden
  .sidebar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================================================
   SIDEBAR V12.3 — BOTÃO HAMBÚRGUER NO TOPO
   ========================================================= */

.sidebar-desktop-toggle {
  position: fixed;
  top: 12px;
  left: 216px;
  transform: none;
  z-index: 110;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface);
  color: var(--text);

  box-shadow:
    0 4px 16px
    rgba(15, 23, 42, .08);

  font: inherit;
  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition:
    left .20s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

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

.sidebar-desktop-toggle > span {
  display: block;
  transform: translateY(-1px);
}

body.sidebar-hidden
.sidebar-desktop-toggle {
  left: 12px;
}

@media (max-width: 980px) {
  .sidebar-desktop-toggle {
    display: none !important;
  }
}

/* Reserva espaço para o botão ☰ dentro do topo do menu. */
@media (min-width: 981px) {
  .sidebar-top {
    padding-right: 48px;
  }

  body.sidebar-hidden .sidebar-top {
    padding-right: 0;
  }
}


/* =========================================================
   TRAUBE GOLD ACCENTS — uso seletivo, premium e acadêmico
   ========================================================= */
.streak-mini {
  --sidebar-streak-main: #f59e0b;
  --sidebar-streak-core: #fde68a;
  --sidebar-flame-size: 39px;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--sidebar-streak-main) 16%, var(--border));
  border-radius: 11px;
  background: var(--surface);
  box-shadow: none;
}

.streak-mini-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
}

.streak-mini-flame,
.streak-mini-snow {
  grid-area: 1 / 1;
}

.streak-mini-flame {
  width: var(--sidebar-flame-size, 43px);
  height: calc(var(--sidebar-flame-size, 43px) * 1.23);
  overflow: visible;
  color: var(--sidebar-streak-main);
  transform-origin: 50% 85%;
  filter: drop-shadow(0 4px 7px color-mix(in srgb, var(--sidebar-streak-main) 24%, transparent));
  animation: sidebarStreakFlamePulse 2.5s ease-in-out infinite;
}

.streak-mini-snow {
  display: none;
  color: #60a5fa;
  font-size: 45px;
  line-height: 1;
  filter: drop-shadow(0 5px 9px rgba(96,165,250,.22));
  animation: sidebarSnowPulse 2.8s ease-in-out infinite;
}

.streak-mini-core {
  fill: var(--sidebar-streak-core);
}

@keyframes sidebarStreakFlamePulse {
  0%,
  100% {
    transform:
      translateY(1px)
      scale(.97)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-2px)
      scale(1.035)
      rotate(1deg);
  }
}

@keyframes sidebarSnowPulse {
  0%,
  100% {
    transform: translateY(1px) scale(.97) rotate(-3deg);
  }

  50% {
    transform: translateY(-2px) scale(1.04) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .streak-mini-flame,
  .streak-mini-snow {
    animation: none;
  }
}

.streak-mini-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.streak-mini-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
}

.streak-mini-copy small {
  color: var(--sidebar-streak-main);
  font-size: 9.2px;
  font-weight: 850;
  line-height: 1.1;
}

.streak-mini[data-streak-tier="snow"] {
  --sidebar-streak-main: #60a5fa;
  --sidebar-streak-core: #bfdbfe;
  --sidebar-flame-size: 43px;
}

.streak-mini[data-streak-tier="snow"] .streak-mini-flame {
  display: none;
}

.streak-mini[data-streak-tier="snow"] .streak-mini-snow {
  display: block;
}

.streak-mini[data-streak-tier="1"] {
  --sidebar-streak-main: #f5a524;
  --sidebar-streak-core: #fde68a;
  --sidebar-flame-size: 43px;
}

.streak-mini[data-streak-tier="2"] {
  --sidebar-streak-main: #ff7a1a;
  --sidebar-streak-core: #ffd166;
  --sidebar-flame-size: 51px;
}

.streak-mini[data-streak-tier="3"] {
  --sidebar-streak-main: #ff4d2e;
  --sidebar-streak-core: #ffb347;
  --sidebar-flame-size: 59px;
}

.streak-mini[data-streak-tier="4"] {
  --sidebar-streak-main: #e43dff;
  --sidebar-streak-core: #ff9bf0;
  --sidebar-flame-size: 66px;
}

.streak-mini[data-streak-tier="5"] {
  --sidebar-streak-main: #7c4dff;
  --sidebar-streak-core: #c7b8ff;
  --sidebar-flame-size: 72px;
}

.streak-mini[data-streak-tier="6"] {
  --sidebar-streak-main: #169bff;
  --sidebar-streak-core: #8fddff;
  --sidebar-flame-size: 79px;
}

.badge.premium,
.badge.gold {
  background: var(--gold-soft);
  color: #8A6A08;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}

:root[data-theme="dark"] .badge.premium,
:root[data-theme="dark"] .badge.gold {
  color: #F2D66C;
}

/* =========================================================
   TIPOGRAFIA GLOBAL — RESTAURADA
   ========================================================= */
:root {
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--font-ui) !important;
}

.brand-copy strong,
.auth-brand h1,
.page-heading h1,
.loading-card strong {
  font-family: var(--font-ui) !important;
  font-style: normal !important;
}

/* TRAUBE — tipografia oficial em toda a interface.
   Exceções: conteúdo autoral editável e blocos técnicos/monospace. */
body :where(
  div, span, p, a, button, input, select, textarea, optgroup, option,
  label, small, strong, b, em, i, h1, h2, h3, h4, h5, h6,
  ul, ol, li, table, thead, tbody, tfoot, tr, th, td,
  nav, aside, header, footer, main, section, article, dialog, summary,
  fieldset, legend
) {
  font-family: var(--font-ui) !important;
}

body :where(code, pre, kbd, samp), body :where(code, pre, kbd, samp) *, body .admin-qf-prompt, body .admin-qf-board-master-text, body .admin-qf-review-import-body textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
}

body [contenteditable="true"],
body [contenteditable="true"] *,
body .note-editor-content,
body .note-editor-content *,
body .caderno-editor-content,
body .caderno-editor-content * {
  font-family: inherit !important;
}

/* TRAUBE — SIDEBAR GLOBAL */
.sidebar .brand .brand-copy strong {
  font-size: 20.7px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: -.02em !important;
}



/* TRAUBE — identidade do tema claro baseada no azul dos callouts */
:root,
:root[data-theme="light"] {
  --brand-light-blue: #184888;
}

:root[data-theme="light"] .brand-copy strong,
:root[data-theme="light"] .page-heading h1,
:root[data-theme="light"] .auth-brand h1,
:root[data-theme="light"] .loading-card strong,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 {
  color: var(--brand-light-blue) !important;
}


/* =========================================================
   TRAUBE — HIERARQUIA DE BOTÕES NO TEMA CLARO
   ========================================================= */
:root,
:root[data-theme="light"] {
  --brand-light-blue: #184888;
  --button-primary: linear-gradient(135deg, #184888, #2563EB);
  --button-primary-hover: linear-gradient(135deg, #1e58a6, #3b82f6);
  --button-secondary-bg: #FFFFFF;
  --button-secondary-border: #184888;
  --button-secondary-text: #184888;
  --button-success: #16815C;
  --button-warning: #D89B24;
  --button-danger: #C83E4D;
  --button-neutral-bg: #F1F5F9;
  --button-neutral-text: #5F6F82;
}

:root[data-theme="light"] .button.primary,
:root[data-theme="light"] .primary-action {
  background: linear-gradient(135deg, #184888, #2563EB) !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 12px;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(24, 72, 136, 0.22);
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

:root[data-theme="light"] .button.primary:hover,
:root[data-theme="light"] .primary-action:hover {
  background: linear-gradient(135deg, #1e58a6, #3b82f6) !important;
  border: none !important;
  border-color: transparent !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(24, 72, 136, 0.28);
}

:root[data-theme="light"] .button.secondary {
  background: var(--button-secondary-bg) !important;
  border-color: var(--button-secondary-border) !important;
  color: var(--button-secondary-text) !important;
}

:root[data-theme="light"] .button.success,
:root[data-theme="light"] .success-action {
  background: var(--button-success) !important;
  border-color: var(--button-success) !important;
  color: #fff !important;
}

:root[data-theme="light"] .button.warning,
:root[data-theme="light"] .warning-action {
  background: var(--button-warning) !important;
  border-color: var(--button-warning) !important;
  color: #fff !important;
}

:root[data-theme="light"] .button.danger,
:root[data-theme="light"] .danger-action,
:root[data-theme="light"] button.danger {
  background: var(--button-danger) !important;
  border-color: var(--button-danger) !important;
  color: #fff !important;
}

:root[data-theme="light"] .button.neutral {
  background: var(--button-neutral-bg) !important;
  border-color: var(--border) !important;
  color: var(--button-neutral-text) !important;
}


/* =========================================================
   TRAUBE — PWA MOBILE: CRONOGRAMA + ESTATÍSTICAS
   Layout específico do app instalado em telas pequenas.
   ========================================================= */
@media (max-width: 760px) {
  .pwa-standalone body[data-page="cronograma"] .main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
  .pwa-standalone body[data-page="estatisticas"] .main:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
    padding: 12px 10px 28px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .topbar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
  .pwa-standalone body[data-page="estatisticas"] .topbar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
    min-height: 48px !important;
    gap: 9px !important;
    margin-bottom: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .menu-open,
  .pwa-standalone body[data-page="estatisticas"] .menu-open {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .page-heading .eyebrow,
  .pwa-standalone body[data-page="estatisticas"] .page-heading .eyebrow {
    font-size: 7.5px !important;
    letter-spacing: .065em !important;
  }

  .pwa-standalone body[data-page="cronograma"] .page-heading h1,
  .pwa-standalone body[data-page="estatisticas"] .page-heading h1 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  /* ---------- CRONOGRAMA ---------- */
  .pwa-standalone body[data-page="cronograma"] .schedule-stack {
    gap: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .schedule-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .summary-card {
    min-height: 72px !important;
    padding: 10px 11px !important;
    border-radius: 12px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .summary-card span {
    font-size: 7.5px !important;
    letter-spacing: .035em !important;
  }

  .pwa-standalone body[data-page="cronograma"] .summary-card strong {
    margin-top: 5px !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .pwa-standalone body[data-page="cronograma"] .schedule-add-hub,
  .pwa-standalone body[data-page="cronograma"] .import-box,
  .pwa-standalone body[data-page="cronograma"] .manual-panel,
  .pwa-standalone body[data-page="cronograma"] .base-schedule-panel,
  .pwa-standalone body[data-page="cronograma"] .planner-panel,
  .pwa-standalone body[data-page="cronograma"] .overdue-organizer,
  .pwa-standalone body[data-page="cronograma"] .deck-panel,
  .pwa-standalone body[data-page="cronograma"] .theme-library-panel {
    padding: 12px !important;
    border-radius: 13px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .schedule-add-hub-head,
  .pwa-standalone body[data-page="cronograma"] .import-header,
  .pwa-standalone body[data-page="cronograma"] .planner-header,
  .pwa-standalone body[data-page="cronograma"] .deck-header,
  .pwa-standalone body[data-page="cronograma"] .theme-library-head {
    gap: 8px !important;
  }

  .pwa-standalone body[data-page="cronograma"] h2 {
    font-size: 16px !important;
    line-height: 1.15 !important;
  }

  .pwa-standalone body[data-page="cronograma"] p,
  .pwa-standalone body[data-page="cronograma"] .import-help {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  .pwa-standalone body[data-page="cronograma"] .badge {
    min-height: 22px !important;
    margin-bottom: 8px !important;
    padding: 0 7px !important;
    font-size: 7px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .schedule-add-tabs {
    width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .schedule-add-tab {
    min-height: 31px !important;
    padding: 0 5px !important;
    font-size: 8px !important;
    border-radius: 7px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .import-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .drop-file {
    min-height: 105px !important;
    padding: 12px !important;
    border-radius: 11px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .drop-file strong {
    font-size: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .drop-file small,
  .pwa-standalone body[data-page="cronograma"] .mode-option small {
    font-size: 8px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .mode-card {
    gap: 6px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .mode-option span {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .mode-option strong {
    font-size: 10px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-panel {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-header {
    min-width: 640px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-nav {
    min-width: 270px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-nav button {
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 8px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .week-planner {
    width: 100% !important;
    min-width: 720px !important;
    margin-top: 9px !important;
    border-radius: 11px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-day {
    min-height: 235px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-day-header {
    min-height: 36px !important;
    padding: 0 7px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-day-header span {
    font-size: 7px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-day-header strong {
    width: 22px !important;
    height: 22px !important;
    font-size: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .planner-day-body {
    gap: 5px !important;
    padding: 5px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .topic-card {
    padding: 7px 28px 7px 7px !important;
    border-radius: 8px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .topic-card h3 {
    font-size: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .topic-meta,
  .pwa-standalone body[data-page="cronograma"] .topic-action {
    font-size: 7px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .overdue-organizer {
    gap: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .reorganize-actions .button {
    min-height: 34px !important;
    font-size: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .theme-library-controls {
    margin-top: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .theme-library-controls input,
  .pwa-standalone body[data-page="cronograma"] .theme-filter-menu-toggle {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .theme-library-meta,
  .pwa-standalone body[data-page="cronograma"] #theme-selected-count {
    font-size: 8px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .theme-library-row,
  .pwa-standalone body[data-page="cronograma"] .theme-library-row.with-selection {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .pwa-standalone body[data-page="cronograma"] .theme-library-actions {
    grid-column: 1 / -1 !important;
    gap: 5px !important;
  }

  /* ---------- ESTATÍSTICAS ---------- */
  .pwa-standalone body[data-page="estatisticas"] .stats-page {
    gap: 9px !important;
    padding-bottom: 26px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-hero,
  .pwa-standalone body[data-page="estatisticas"] .stats-summary-box,
  .pwa-standalone body[data-page="estatisticas"] .stats-block {
    padding: 11px !important;
    border-radius: 13px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-hero {
    gap: 10px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-hero h2 {
    font-size: 18px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-hero p {
    margin-top: 5px !important;
    font-size: 9px !important;
    line-height: 1.38 !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-range {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 2px !important;
    padding: 3px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-range button {
    min-height: 30px !important;
    padding: 0 4px !important;
    font-size: 7.5px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-tabs-shell {
    padding: 3px !important;
    border-radius: 11px !important;
    overflow-x: auto !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-tabs {
    min-width: 520px !important;
    grid-template-columns: repeat(5, minmax(100px, 1fr)) !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-tab {
    min-height: 34px !important;
    font-size: 8px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-summary-card {
    min-height: 84px !important;
    padding: 9px !important;
    border-radius: 10px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-summary-card span,
  .pwa-standalone body[data-page="estatisticas"] .stats-kicker {
    font-size: 7px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-summary-card strong {
    margin-top: 5px !important;
    font-size: 18px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-summary-card small {
    font-size: 7.5px !important;
    line-height: 1.28 !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-block-grid {
    gap: 8px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-section-head h3 {
    font-size: 13px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-section-head p {
    font-size: 8px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .metric-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .metric-mini {
    padding: 8px !important;
    border-radius: 9px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .metric-mini span,
  .pwa-standalone body[data-page="estatisticas"] .metric-mini small {
    font-size: 7px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .metric-mini strong {
    font-size: 15px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .chart-box {
    min-height: 190px !important;
    margin-top: 9px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .chart-box.compact {
    min-height: 165px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-table {
    font-size: 8px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .stats-table th,
  .pwa-standalone body[data-page="estatisticas"] .stats-table td {
    padding: 7px 6px !important;
  }

  .pwa-standalone body[data-page="estatisticas"] .insight {
    padding: 9px !important;
    font-size: 8px !important;
  }
}


/* =========================================================
   TRAUBE — FILE INPUT PREMIUM
   Melhora visual global para "Escolher arquivo"
   ========================================================= */
input[type="file"] {
  max-width: 100%;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  line-height: 1.35;
}

input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: 10px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 94%, var(--accent-soft)),
      color-mix(in srgb, var(--surface-2) 88%, var(--accent-soft))
    );
  color: var(--accent);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .01em;
  cursor: pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease,
    box-shadow .16s ease;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow:
    0 4px 12px
    color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}

input[type="file"]::file-selector-button:active {
  transform: translateY(0);
  box-shadow: none;
}

input[type="file"]:focus-visible {
  outline: none;
}

input[type="file"]:focus-visible::file-selector-button {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px
    color-mix(in srgb, var(--accent) 14%, transparent);
}

@supports selector(::-webkit-file-upload-button) {
  input[type="file"]::-webkit-file-upload-button {
    min-height: 36px;
    margin-right: 10px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
    border-radius: 10px;
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface) 94%, var(--accent-soft)),
        color-mix(in srgb, var(--surface-2) 88%, var(--accent-soft))
      );
    color: var(--accent);
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
  }
}

.file-picker-shell,
.upload-file-shell {
  border-radius: 12px;
}

@media (max-width: 760px) {
  input[type="file"] {
    font-size: 9px;
  }

  input[type="file"]::file-selector-button {
    min-height: 34px;
    margin-right: 8px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 8.5px;
  }

  @supports selector(::-webkit-file-upload-button) {
    input[type="file"]::-webkit-file-upload-button {
      min-height: 34px;
      margin-right: 8px;
      padding: 0 11px;
      border-radius: 9px;
      font-size: 8.5px;
    }
  }
}

/* LOGIN — força logo transparente */
.auth-page .auth-brand-logo {
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   TRAUBE — PATTERN DE FUNDO GLOBAL
   Símbolos inclinados com fileiras intercaladas.
   ========================================================= */

:root {
  --traube-pattern-image: url("../img/logos/logo-icone-original.png?v=pattern4");
  --traube-pattern-size: 138px;
  --traube-pattern-opacity: 0.020;
}

:root[data-theme="dark"] {
  --traube-pattern-image: url("../img/logos/logo-icone-azul-claro.png?v=pattern4");
  --traube-pattern-opacity: 0.028;
}

:root[data-theme="leila-mood"] {
  --traube-pattern-image: url("../img/logos/logo-icone-rosa-escuro.png?v=pattern4");
  --traube-pattern-opacity: 0.024;
}

/* Login mantém o padrão um pouco mais presente, como na versão aprovada. */
body.auth-page {
  --traube-pattern-size: 112px;
  --traube-pattern-opacity: 0.032;
}

:root[data-theme="dark"] body.auth-page {
  --traube-pattern-opacity: 0.040;
}

:root[data-theme="leila-mood"] body.auth-page {
  --traube-pattern-opacity: 0.034;
}

body {
  position: relative;
  isolation: isolate;
}

/* Duas camadas deslocadas criam as fileiras intercaladas. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  background-image: var(--traube-pattern-image);
  background-repeat: repeat;
  background-size:
    var(--traube-pattern-size)
    var(--traube-pattern-size);
  transform: rotate(-8deg) scale(1.08);
  transform-origin: center;
}

body::before {
  background-position: 0 0;
  opacity: var(--traube-pattern-opacity);
}

body::after {
  background-position:
    calc(var(--traube-pattern-size) / 2)
    calc(var(--traube-pattern-size) / 2);
  opacity: var(--traube-pattern-opacity);
}

/* Mantém o conteúdo acima do pattern sem alterar o layout.
   O pattern fica em z-index 0 dentro do stacking context do body.
   Antes ele usava z-index -1 e podia ficar atrás do próprio fundo do body,
   desaparecendo em Safari/PWA e após algumas alterações de layout. */
body > .app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
body > .auth-card,
body > .loading-card,
body > main,
body > header,
body > footer {
  position: relative;
  z-index: 1;
}

.app-shell:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)),
.auth-card,
.loading-card {
  position: relative;
  z-index: 1;
}

/* A exportação do caderno nunca deve capturar o fundo decorativo. */
.notebook-pdf-export-host::before,
.notebook-pdf-export-host::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --traube-pattern-size: 118px;
    --traube-pattern-opacity: 0.017;
  }

  body.auth-page {
    --traube-pattern-size: 96px;
    --traube-pattern-opacity: 0.028;
  }

  :root[data-theme="dark"] body.auth-page {
    --traube-pattern-opacity: 0.036;
  }

  :root[data-theme="leila-mood"] body.auth-page {
    --traube-pattern-opacity: 0.030;
  }
}



/* =========================================================
   TRAUBE — CENTRAL GLOBAL DE NOTIFICAÇÕES
   ========================================================= */

.topbar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)) {
  position: relative;
}

.traube-notifications {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
  z-index: 140;
}

.traube-notification-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.traube-notification-toggle:hover,
.traube-notification-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.traube-notification-toggle:active {
  transform: scale(.96);
}

.qs-simulations-help {
  display: block;
  width: 124px;
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.qs-simulations-help:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.traube-notification-toggle svg {
  width: 24.7px;
  height: 24.7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.traube-notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #d84b4b;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.traube-notification-badge[hidden] {
  display: none !important;
}

.traube-notification-panel {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  width: min(370px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 100px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  box-shadow:
    0 18px 50px rgba(15, 23, 42, .16),
    0 2px 8px rgba(15, 23, 42, .06);
}

.traube-notification-panel[hidden] {
  display: none !important;
}

.traube-notification-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 61px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background:
    color-mix(
      in srgb,
      var(--accent) 3%,
      var(--surface)
    );
}

.traube-notification-head strong,
.traube-notification-head small {
  display: block;
}

.traube-notification-head strong {
  font-size: 13px;
  font-weight: 880;
}

.traube-notification-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.traube-notification-read-all {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 9px;
  font-weight: 820;
  white-space: nowrap;
}

.traube-notification-read-all[hidden] {
  display: none !important;
}

.traube-notification-list {
  max-height: min(470px, calc(100vh - 195px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.traube-notification-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background 130ms ease;
}

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

.traube-notification-item.unread {
  background:
    color-mix(
      in srgb,
      var(--accent) 5.5%,
      var(--surface)
    );
}

.traube-notification-item.unread:hover {
  background:
    color-mix(
      in srgb,
      var(--accent) 8%,
      var(--surface)
    );
}

.traube-notification-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid
    color-mix(
      in srgb,
      var(--accent) 18%,
      var(--border)
    );
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}

.traube-notification-copy {
  min-width: 0;
}

.traube-notification-copy strong,
.traube-notification-copy span,
.traube-notification-copy small {
  display: block;
}

.traube-notification-copy strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traube-notification-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.traube-notification-copy small {
  margin-top: 5px;
  color:
    color-mix(
      in srgb,
      var(--muted) 82%,
      transparent
    );
  font-size: 8px;
  font-weight: 720;
}

.traube-notification-unread-dot {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.traube-notification-empty,
.traube-notification-loading {
  min-height: 128px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 22px;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
}

.traube-notification-empty strong {
  color: var(--text);
  font-size: 11px;
}

.traube-notification-empty span {
  max-width: 240px;
  line-height: 1.45;
}

.traube-notification-footer {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 9px;
  font-weight: 830;
  text-decoration: none;
}

.traube-notification-footer:hover {
  background: var(--accent-soft);
}

@media (max-width: 760px) {
  .traube-notifications {
    margin-left: auto;
  }

  .traube-notification-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .traube-notification-panel {
    position: fixed;
    top:
      calc(
        env(safe-area-inset-top)
        + 58px
      );
    right: 10px;
    left: 10px;
    width: auto;
    max-height:
      calc(
        100dvh
        - env(safe-area-inset-top)
        - 76px
      );
    border-radius: 14px;
  }

  .traube-notification-list {
    max-height:
      calc(
        100dvh
        - env(safe-area-inset-top)
        - 190px
      );
  }
}

.nav-icon-settings{display:inline-grid;place-items:center;overflow:hidden;border-radius:5px}.nav-icon-settings img{display:block;width:18px;height:18px;object-fit:cover;border-radius:4px}


/* Questões e Simulados — selects arredondados do Novo Simulado */
.qs-extraction-settings .qs-field{position:relative}
.qs-extraction-settings select{
  width:100%;
  min-height:50px;
  appearance:none;
  -webkit-appearance:none;
  padding:0 44px 0 14px;
  border:1px solid color-mix(in srgb,var(--border) 86%,var(--accent) 14%);
  border-radius:13px;
  background:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 19px) 22px/5px 5px no-repeat,
    linear-gradient(135deg,var(--muted) 50%,transparent 50%) calc(100% - 14px) 22px/5px 5px no-repeat,
    var(--surface);
  color:var(--text);
  box-shadow:0 1px 2px rgba(0,0,0,.035);
  font:inherit;
  font-size:13px;
  font-weight:650;
  outline:none;
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.qs-extraction-settings select:hover{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--border));
  background-color:color-mix(in srgb,var(--surface) 96%,var(--accent) 4%);
}
.qs-extraction-settings select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft),0 8px 24px rgba(0,0,0,.06);
}
.qs-extraction-settings select option{
  background:var(--surface);
  color:var(--text);
  font-weight:600;
}
@media(max-width:620px){
  .qs-extraction-settings select{min-height:48px;border-radius:12px;font-size:13px}
}


/* =========================================================
   TRAUBE — DIÁLOGOS GLOBAIS
   ========================================================= */
.traube-global-dialog{
  width:min(430px,calc(100vw - 28px));
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--text);
  overflow:visible;
}
.traube-global-dialog::backdrop{
  background:rgba(10,18,32,.48);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.traube-global-dialog-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--border) 88%,var(--accent) 12%);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(15,23,42,.22),0 4px 16px rgba(15,23,42,.08);
}
.traube-global-dialog-icon{
  width:42px;height:42px;display:grid;place-items:center;
  border-radius:13px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:17px;font-weight:900;
}
.traube-global-dialog-copy{min-width:0;padding-top:1px}
.traube-global-dialog-eyebrow{
  display:block;margin-bottom:3px;color:var(--accent);
  font-size:8px;font-weight:900;letter-spacing:.14em;
}
.traube-global-dialog-title{
  margin:0;color:var(--text);font-size:16px;font-weight:900;line-height:1.25;
}
.traube-global-dialog-message{
  margin:7px 0 0;color:var(--muted);font-size:11px;line-height:1.55;
  white-space:pre-line;
}
.traube-global-dialog-prompt{
  grid-column:1/-1;display:grid;gap:6px;color:var(--muted);
  font-size:9px;font-weight:800;
}
.traube-global-dialog-prompt[hidden]{display:none!important}
.traube-global-dialog-input{
  width:100%;min-height:42px;padding:0 12px;
  border:1px solid var(--border);border-radius:11px;
  background:var(--surface);color:var(--text);font:inherit;font-size:12px;outline:none;
}
.traube-global-dialog-input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.traube-global-dialog-actions{
  grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px;
}
.traube-global-dialog-actions .button{min-width:92px}
@media(max-width:520px){
  .traube-global-dialog-card{grid-template-columns:36px minmax(0,1fr);padding:17px;gap:11px}
  .traube-global-dialog-icon{width:36px;height:36px;border-radius:11px}
  .traube-global-dialog-actions{display:grid;grid-template-columns:1fr 1fr}
  .traube-global-dialog-actions .button{width:100%}
}


/* AGENDA v15 — controles alinhados e ação em largura total */
body[data-page="dashboard"] .calendar-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

body[data-page="dashboard"] .calendar-controls-row {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="dashboard"] .calendar-controls-row .segmented-control,
body[data-page="dashboard"] .calendar-controls-row .calendar-nav {
  display: flex;
  align-items: stretch;
  margin: 0;
}

body[data-page="dashboard"] .calendar-controls-row .segmented-control button,
body[data-page="dashboard"] .calendar-controls-row .calendar-nav button {
  min-height: 36px;
}

body[data-page="dashboard"] .calendar-add-event {
  display: block;
  width: 100%;
  min-height: 36px;
  margin: 0;
  text-align: center;
}

@media (max-width: 700px) {
  body[data-page="dashboard"] .calendar-actions,
  body[data-page="dashboard"] .calendar-controls-row {
    width: 100%;
  }

  body[data-page="dashboard"] .calendar-controls-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="dashboard"] .calendar-controls-row .segmented-control,
  body[data-page="dashboard"] .calendar-controls-row .calendar-nav {
    width: 100%;
  }

  body[data-page="dashboard"] .calendar-controls-row .segmented-control button,
  body[data-page="dashboard"] .calendar-controls-row .calendar-nav button {
    flex: 1 1 0;
    min-width: 0;
  }
}


/* =========================================================
   TRAUBE — CALENDÁRIO
   ========================================================= */
.traube-calendar{
  position:fixed;
  z-index:100000;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--border) 84%,var(--accent) 16%);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 97%,var(--accent) 3%);
  color:var(--text);
  box-shadow:0 22px 60px rgba(15,23,42,.20),0 4px 14px rgba(15,23,42,.08);
  user-select:none;
}
.traube-calendar[hidden]{display:none!important}
.traube-calendar-head{
  display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:7px;margin-bottom:11px;
}
.traube-calendar-head strong{
  text-align:center;text-transform:capitalize;font-size:12px;font-weight:900;
}
.traube-calendar-head button{
  width:34px;height:34px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font:inherit;font-size:19px;cursor:pointer;
}
.traube-calendar-head button:hover{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent);
}
.traube-calendar-weekdays,.traube-calendar-days{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.traube-calendar-weekdays{margin-bottom:5px}
.traube-calendar-weekdays span{
  text-align:center;color:var(--muted);font-size:7.5px;font-weight:900;text-transform:uppercase;
}
.traube-calendar-days button{
  aspect-ratio:1;border:0;border-radius:9px;background:transparent;color:var(--text);
  font:inherit;font-size:10px;font-weight:750;cursor:pointer;
}
.traube-calendar-days button:hover{
  background:var(--accent-soft);color:var(--accent);
}
.traube-calendar-days button.is-today{
  box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);
}
.traube-calendar-days button.is-selected{
  background:var(--accent);color:var(--surface);box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 25%,transparent);
}
.traube-calendar-foot{
  display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
.traube-calendar-foot button{
  border:0;background:transparent;color:var(--accent);font:inherit;font-size:9px;font-weight:900;cursor:pointer;
}
input[type="date"]{
  cursor:pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.72;
  cursor:pointer;
}
@media(max-width:520px){
  .traube-calendar{padding:12px;border-radius:15px}
  .traube-calendar-days button{font-size:11px}
}


/* Calendário TRAUBE — acabamento visual do tema */
.traube-calendar{
  border-radius:18px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  font-family:inherit!important;
  border:1px solid color-mix(in srgb,var(--border) 78%,var(--accent) 22%)!important;
  box-shadow:0 20px 55px color-mix(in srgb,var(--text) 16%,transparent)!important;
  overflow:hidden;
}
.traube-calendar,
.traube-calendar button,
.traube-calendar span,
.traube-calendar strong{
  font-family:inherit!important;
}
.traube-calendar-head{
  margin:-13px -13px 11px;
  padding:13px 13px 10px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  border-bottom:1px solid var(--border);
}
.traube-calendar-head strong{
  color:var(--text);
  font-size:12px;
  font-weight:900;
}
.traube-calendar-head button{
  border-radius:10px!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  color:var(--accent)!important;
}
.traube-calendar-head button:hover{
  background:var(--accent-soft)!important;
  border-color:var(--accent)!important;
}
.traube-calendar-weekdays span{
  color:var(--muted)!important;
  font-size:8px!important;
  letter-spacing:.03em;
}
.traube-calendar-days button{
  border-radius:10px!important;
  color:var(--text)!important;
  background:transparent!important;
}
.traube-calendar-days button:hover{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
}
.traube-calendar-days button.is-today{
  color:var(--accent)!important;
  box-shadow:inset 0 0 0 1.5px var(--accent)!important;
}
.traube-calendar-days button.is-selected{
  background:var(--accent)!important;
  color:var(--surface)!important;
  box-shadow:0 5px 13px color-mix(in srgb,var(--accent) 28%,transparent)!important;
}
.traube-calendar-foot{
  margin:11px -13px -13px;
  padding:10px 13px 12px;
  background:color-mix(in srgb,var(--accent) 4%,var(--surface));
  border-top:1px solid var(--border);
}
.traube-calendar-foot button{
  padding:6px 8px;
  border-radius:8px;
  color:var(--accent)!important;
  font-weight:900;
}
.traube-calendar-foot button:hover{
  background:var(--accent-soft);
}

.traube-global-dialog-icon{
  overflow:hidden;
  padding:7px;
}
.traube-global-dialog-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Calendário dentro de modal: mantém o picker acima do conteúdo do dialog */
dialog[open] > .traube-calendar{
  z-index:2147483647!important;
}
dialog[open]{
  overflow:visible!important;
}

/* Calendário responsivo: não permitir min-content dos botões expandir a grade. */
.traube-calendar{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:calc(100vw - 24px)!important;
}
.traube-calendar .traube-calendar-weekdays,
.traube-calendar .traube-calendar-days{
  display:grid!important;
  width:100%;
  min-width:0!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
}
.traube-calendar .traube-calendar-weekdays span{
  min-width:0!important;
  overflow:hidden;
}
.traube-calendar .traube-calendar-days button,
body[data-page="cronograma"] .traube-calendar .traube-calendar-days button{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  width:100%!important;
  padding:0!important;
  aspect-ratio:1;
  border:0!important;
}
@media(max-width:520px){
  .traube-calendar{padding:10px!important;}
  .traube-calendar .traube-calendar-head{margin:-10px -10px 8px!important;padding:10px!important;}
  .traube-calendar .traube-calendar-foot{margin:8px -10px -10px!important;padding:8px 10px!important;}
  .traube-calendar .traube-calendar-days,
  .traube-calendar .traube-calendar-weekdays{gap:3px!important;}
}


/* TRAUBE — seletor de hora do Adicionar evento */
.traube-time-picker{
  position:fixed;
  z-index:100001;
  padding:13px;
  border:1px solid color-mix(in srgb,var(--border) 80%,var(--accent) 20%);
  border-radius:18px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 22px 60px rgba(15,23,42,.20),0 4px 14px rgba(15,23,42,.08);
  font-family:inherit;
  user-select:none;
}
.traube-time-picker[hidden]{display:none!important}
.traube-time-picker-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-13px -13px 12px;padding:13px;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  border-bottom:1px solid var(--border);
}
.traube-time-picker-head strong{font-size:12px;font-weight:900}
.traube-time-picker-head button{
  width:30px;height:30px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface);color:var(--muted);font:inherit;font-size:17px;cursor:pointer
}
.traube-time-picker-body{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:9px
}
.traube-time-picker-body label{display:grid;gap:5px}
.traube-time-picker-body label span{
  color:var(--muted);font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.04em
}
.traube-time-picker-body select{
  width:100%;min-height:48px;padding:0 12px;
  border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);color:var(--text);
  font:inherit;font-size:16px;font-weight:850;text-align:center;outline:none;cursor:pointer
}
.traube-time-picker-body select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
.traube-time-separator{
  padding-bottom:12px;color:var(--accent);font-size:21px;font-weight:900
}
.traube-time-quick{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:11px
}
.traube-time-quick button{
  min-height:34px;border:1px solid var(--border);border-radius:9px;
  background:var(--surface-2);color:var(--text);font:inherit;font-size:9px;font-weight:800;cursor:pointer
}
.traube-time-quick button:hover{
  border-color:var(--accent);background:var(--accent-soft);color:var(--accent)
}
.traube-time-picker-foot{
  display:grid;grid-template-columns:auto auto 1fr;gap:7px;margin:12px -13px -13px;padding:10px 13px 12px;
  border-top:1px solid var(--border);background:color-mix(in srgb,var(--accent) 4%,var(--surface))
}
.traube-time-picker-foot button{
  min-height:34px;padding:0 10px;border:0;border-radius:9px;background:transparent;
  color:var(--accent);font:inherit;font-size:9px;font-weight:900;cursor:pointer
}
.traube-time-picker-foot button.primary{
  justify-self:end;background:linear-gradient(135deg, #184888, #2563EB);color:#fff;border-radius:12px;border:none;min-width:86px
}
#event-time{cursor:pointer}
#event-time::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer}
@media(max-width:520px){
  .traube-time-picker{padding:12px;border-radius:15px}
  .traube-time-picker-quick{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Logo exclusiva dos popups: nunca herdar dimensões das logos de fundo/tema */
#traube-global-dialog .traube-global-dialog-icon{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  overflow:hidden!important;
  padding:7px!important;
}
#traube-global-dialog .traube-global-dialog-logo{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:28px!important;
  height:28px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:28px!important;
  max-height:28px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  transform:none!important;
  opacity:1!important;
  pointer-events:none!important;
}


/* LOGIN — pattern de logos reforçado */
body.auth-page{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg);
  --traube-pattern-size:112px;
  --traube-pattern-opacity:.045;
}
body.auth-page::before,
body.auth-page::after{
  content:"";
  position:fixed;
  inset:-14%;
  z-index:0;
  pointer-events:none;
  background-image:var(--traube-pattern-image);
  background-repeat:repeat;
  background-size:var(--traube-pattern-size) var(--traube-pattern-size);
  transform:rotate(-8deg) scale(1.08);
  transform-origin:center;
}
body.auth-page::before{
  background-position:0 0;
  opacity:var(--traube-pattern-opacity);
}
body.auth-page::after{
  background-position:calc(var(--traube-pattern-size)/2) calc(var(--traube-pattern-size)/2);
  opacity:var(--traube-pattern-opacity);
}
body.auth-page>.auth-card{
  position:relative;
  z-index:1;
}
:root[data-theme="dark"] body.auth-page{
  --traube-pattern-opacity:.055;
}
:root[data-theme="leila-mood"] body.auth-page{
  --traube-pattern-opacity:.048;
}


/* =========================================================
   TRAUBE — CABEÇALHO/CARD SUPERIOR GLOBAL v53
   Referência geométrica: card "Anotações"
   ========================================================= */
:root{
  --traube-page-title-card-min-height: auto;
  --traube-page-title-card-pad-y: 12px;
  --traube-page-title-card-pad-x: 18px;
  --traube-page-title-card-radius: 14px;
}

/* Mantém a geometria dos cards superiores igual entre as páginas. */
.traube-page-spotlight,
.daily-hero,
.stats-hero,
.flash-top-spotlight,
.qs-v17-top{
  box-sizing:border-box!important;
  min-height:var(--traube-page-title-card-min-height)!important;
  padding:var(--traube-page-title-card-pad-y) var(--traube-page-title-card-pad-x)!important;
  border-radius:var(--traube-page-title-card-radius)!important;
  margin-bottom: 12px !important;
}

/* O cabeçalho superior ocupa sempre a mesma largura útil. */
.topbar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)){
  width:100%!important;
  box-sizing:border-box!important;
}

/* Timer + sino + perfil: posição controlada exclusivamente por traube-brand-v5.css. */

/* Iniciais com o mesmo peso visual aprovado. */
.traube-profile-toggle,
.user-avatar{
  font-weight:950!important;
  letter-spacing:-.045em!important;
}

@media(max-width:700px){
  :root{
    --traube-page-title-card-min-height: auto;
    --traube-page-title-card-pad-y: 10px;
    --traube-page-title-card-pad-x: 14px;
  }
}


/* TRAUBE v54 — cards/callouts superiores: azul oficial da marca apenas no tema claro */
:root[data-theme="light"]{
  --traube-top-callout-blue:#184888;
}
:root[data-theme="light"] .traube-page-spotlight,
:root[data-theme="light"] .daily-hero,
:root[data-theme="light"] .stats-hero,
:root[data-theme="light"] .flash-top-spotlight,
:root[data-theme="light"] .qs-v17-top,
:root[data-theme="light"] .error-cat-spotlight{
  background:var(--ui-frame-bg, linear-gradient(135deg, #102C57 0%, #184888 50%, #2563EB 100%))!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#fff!important;
}
:root[data-theme="light"] .traube-page-spotlight::before,
:root[data-theme="light"] .traube-page-spotlight::after,
:root[data-theme="light"] .daily-hero::before,
:root[data-theme="light"] .daily-hero::after,
:root[data-theme="light"] .stats-hero::before,
:root[data-theme="light"] .stats-hero::after,
:root[data-theme="light"] .flash-top-spotlight::before,
:root[data-theme="light"] .flash-top-spotlight::after,
:root[data-theme="light"] .qs-v17-top::before,
:root[data-theme="light"] .qs-v17-top::after,
:root[data-theme="light"] .error-cat-spotlight::before,
:root[data-theme="light"] .error-cat-spotlight::after{
  display:none!important;
  content:none!important;
}
:root[data-theme="light"] .traube-page-spotlight h1,
:root[data-theme="light"] .traube-page-spotlight h2,
:root[data-theme="light"] .traube-page-spotlight h3,
:root[data-theme="light"] .traube-page-spotlight p,
:root[data-theme="light"] .traube-page-spotlight small,
:root[data-theme="light"] .daily-hero h1,
:root[data-theme="light"] .daily-hero h2,
:root[data-theme="light"] .daily-hero h3,
:root[data-theme="light"] .daily-hero p,
:root[data-theme="light"] .daily-hero small,
:root[data-theme="light"] .stats-hero h1,
:root[data-theme="light"] .stats-hero h2,
:root[data-theme="light"] .stats-hero h3,
:root[data-theme="light"] .stats-hero p,
:root[data-theme="light"] .stats-hero small,
:root[data-theme="light"] .flash-top-spotlight h1,
:root[data-theme="light"] .flash-top-spotlight h2,
:root[data-theme="light"] .flash-top-spotlight h3,
:root[data-theme="light"] .flash-top-spotlight p,
:root[data-theme="light"] .flash-top-spotlight small,
:root[data-theme="light"] .qs-v17-top h1,
:root[data-theme="light"] .qs-v17-top h2,
:root[data-theme="light"] .qs-v17-top h3,
:root[data-theme="light"] .qs-v17-top p,
:root[data-theme="light"] .qs-v17-top small,
:root[data-theme="light"] .error-cat-spotlight h1,
:root[data-theme="light"] .error-cat-spotlight h2,
:root[data-theme="light"] .error-cat-spotlight h3,
:root[data-theme="light"] .error-cat-spotlight p,
:root[data-theme="light"] .error-cat-spotlight small{
  color:#fff!important;
}


/* Fallback de primeiro paint: ausência de data-theme é o tema claro. */
:root:not([data-theme="dark"]):not([data-theme="leila-mood"]):not([data-theme="pink"]):not([data-theme="rosa"]) .traube-page-spotlight,
:root:not([data-theme="dark"]):not([data-theme="leila-mood"]):not([data-theme="pink"]):not([data-theme="rosa"]) .daily-hero,
:root:not([data-theme="dark"]):not([data-theme="leila-mood"]):not([data-theme="pink"]):not([data-theme="rosa"]) .stats-hero,
:root:not([data-theme="dark"]):not([data-theme="leila-mood"]):not([data-theme="pink"]):not([data-theme="rosa"]) .flash-top-spotlight,
:root:not([data-theme="dark"]):not([data-theme="leila-mood"]):not([data-theme="pink"]):not([data-theme="rosa"]) .qs-v17-top,
:root:not([data-theme="dark"]):not([data-theme="leila-mood"]):not([data-theme="pink"]):not([data-theme="rosa"]) .error-cat-spotlight{
  background:var(--ui-frame-bg, linear-gradient(135deg, #102C57 0%, #184888 50%, #2563EB 100%))!important;
  border-color:rgba(255,255,255,.14)!important;
  color:#fff!important;
}


/* TRAUBE v55 — cards/callouts superiores também unificados no tema escuro */
:root[data-theme="dark"] .traube-page-spotlight,
:root[data-theme="dark"] .daily-hero,
:root[data-theme="dark"] .stats-hero,
:root[data-theme="dark"] .flash-top-spotlight,
:root[data-theme="dark"] .qs-v17-top,
:root[data-theme="dark"] .error-cat-spotlight,
body.theme-dark .traube-page-spotlight,
body.theme-dark .daily-hero,
body.theme-dark .stats-hero,
body.theme-dark .flash-top-spotlight,
body.theme-dark .qs-v17-top,
body.theme-dark .error-cat-spotlight{
  background:var(--ui-frame-bg, linear-gradient(135deg, #091A33 0%, #102C57 50%, #184888 100%))!important;
  border-color:rgba(255,255,255,0.14)!important;
  color:#fff!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
}

:root[data-theme="dark"] .traube-page-spotlight h1,
:root[data-theme="dark"] .traube-page-spotlight h2,
:root[data-theme="dark"] .traube-page-spotlight h3,
:root[data-theme="dark"] .traube-page-spotlight p,
:root[data-theme="dark"] .traube-page-spotlight small,
:root[data-theme="dark"] .daily-hero h1,
:root[data-theme="dark"] .daily-hero h2,
:root[data-theme="dark"] .daily-hero h3,
:root[data-theme="dark"] .daily-hero p,
:root[data-theme="dark"] .daily-hero small,
:root[data-theme="dark"] .stats-hero h1,
:root[data-theme="dark"] .stats-hero h2,
:root[data-theme="dark"] .stats-hero h3,
:root[data-theme="dark"] .stats-hero p,
:root[data-theme="dark"] .stats-hero small,
:root[data-theme="dark"] .flash-top-spotlight h1,
:root[data-theme="dark"] .flash-top-spotlight h2,
:root[data-theme="dark"] .flash-top-spotlight h3,
:root[data-theme="dark"] .flash-top-spotlight p,
:root[data-theme="dark"] .flash-top-spotlight small,
:root[data-theme="dark"] .qs-v17-top h1,
:root[data-theme="dark"] .qs-v17-top h2,
:root[data-theme="dark"] .qs-v17-top h3,
:root[data-theme="dark"] .qs-v17-top p,
:root[data-theme="dark"] .qs-v17-top small,
:root[data-theme="dark"] .error-cat-spotlight h1,
:root[data-theme="dark"] .error-cat-spotlight h2,
:root[data-theme="dark"] .error-cat-spotlight h3,
:root[data-theme="dark"] .error-cat-spotlight p,
:root[data-theme="dark"] .error-cat-spotlight small{
  color:#fff!important;
}


/* v56 — alinhamento global entre controles superiores e callout de título */
@media (min-width:981px){
  body:not([data-page="dashboard"]) .topbar:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)){
    min-height:26px!important;
    height:26px!important;
    margin-bottom:14px!important;
  }
}


/* v2026.09.29 — switches/segmented controls maiores em todo o TRAUBE */
:root{
  --traube-switch-font-size: 16px;
  --traube-switch-height: 46px;
  --traube-switch-pad-x: 21px;
  --traube-switch-radius: 10px;
}

/* Caderno de Erros */
.error-main-tabs,
.error-tabs,
.error-state-switch{
  min-height: 56px !important;
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 14px !important;
}
.error-main-tab,
.error-tab,
.error-state-switch > button{
  min-height: var(--traube-switch-height) !important;
  height: var(--traube-switch-height) !important;
  padding: 0 var(--traube-switch-pad-x) !important;
  border-radius: var(--traube-switch-radius) !important;
  font-size: var(--traube-switch-font-size) !important;
  line-height: 1.15 !important;
}

/* Flashcards */
.flash-tabs{
  min-height: 58px !important;
  padding: 7px !important;
  gap: 7px !important;
  border-radius: 16px !important;
}
.flash-tab{
  min-height: 46px !important;
  padding: 0 22px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}
.library-scope-tabs{
  gap: 24px !important;
}
.library-scope-tab{
  min-height: 46px !important;
  padding: 0 7px 13px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* Questões e Simulados */
.qs-mode-tabs{
  min-height: 56px !important;
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 14px !important;
}
.qs-mode-tab{
  min-height: 46px !important;
  padding: 0 21px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* Anotações / Caderno */
.notebook-tabs{
  min-height: 56px !important;
  gap: 12px !important;
}
.notebook-tab{
  min-height: 46px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* Estatísticas */
.stats-tabs-shell,
.stats-range{
  padding: 6px !important;
  gap: 6px !important;
  border-radius: 13px !important;
}
.stats-tab,
.stats-range button{
  min-height: 46px !important;
  padding: 0 20px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* Cronograma e outros segmented controls reutilizados */
.schedule-add-tabs,
.segmented-control{
  min-height: 46px !important;
  padding: 5px !important;
  gap: 5px !important;
  border-radius: 12px !important;
}
.schedule-add-tab,
.segmented-control > button{
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* Famílias de switch/tab usadas em páginas auxiliares */
.mode-tabs,
.view-tabs,
.section-tabs,
.page-tabs,
.scope-tabs,
.switch-group,
.view-switch,
.mode-switch{
  min-height: 46px !important;
  padding: 5px !important;
  gap: 5px !important;
}
.mode-tab,
.view-tab,
.section-tab,
.page-tab,
.scope-tab,
.switch-group > button,
.view-switch > button,
.mode-switch > button{
  min-height: 44px !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* PWA: mantém usável sem encolher a tipografia dos switches */
@media (max-width: 700px){
  .error-main-tab,
  .error-tab,
  .error-state-switch > button,
  .flash-tab,
  .library-scope-tab,
  .qs-mode-tab,
  .notebook-tab,
  .stats-tab,
  .stats-range button,
  .schedule-add-tab,
  .segmented-control > button,
  .mode-tab,
  .view-tab,
  .section-tab,
  .page-tab,
  .scope-tab,
  .switch-group > button,
  .view-switch > button,
  .mode-switch > button{
    font-size: 16px !important;
  }
}


/* v2026.09.29 — alinhamento global de conteúdo em botões */
button,
.button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"]{
  text-align:center !important;
  vertical-align:middle !important;
}

/* Botões base: centraliza texto/ícone sem alterar largura definida pelo componente */
button:not(.icon-only):not([aria-label]):not(.sidebar-desktop-toggle):not(.traube-notification-toggle):not(.traube-profile-toggle):not(.error-home-action):not(.flash-home-action),
.button:not(.icon-only),
[role="button"]:not(.icon-only){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Conteúdo interno também fica centrado */
button:not(.icon-only) > span,
button:not(.icon-only) > strong,
button:not(.icon-only) > small,
.button:not(.icon-only) > span,
.button:not(.icon-only) > strong,
.button:not(.icon-only) > small,
[role="button"]:not(.icon-only) > span,
[role="button"]:not(.icon-only) > strong,
[role="button"]:not(.icon-only) > small{
  text-align:center !important;
}

/* Switches/tabs segmentados */
.error-main-tab,
.error-tab,
.error-state-switch > button,
.flash-tab,
.library-scope-tab,
.qs-mode-tab,
.notebook-tab,
.stats-tab,
.stats-range button,
.schedule-add-tab,
.segmented-control > button,
.mode-tab,
.view-tab,
.section-tab,
.page-tab,
.scope-tab,
.switch-group > button,
.view-switch > button,
.mode-switch > button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

/* Ícones em botões acompanham o centro visual */
button svg,
.button svg,
[role="button"] svg{
  flex:0 0 auto;
  vertical-align:middle;
}

/* Evita desalinhamento causado por line-height herdado */
button,
.button,
[role="button"]{
  line-height:1.2 !important;
}


/* v2026.09.29b — tipografia global reforçada para switches/tabs */
:is(
  .error-main-tab,
  .error-tab,
  .error-state-switch > button,
  .error-review-action-switch > button,
  .flash-tab,
  .library-scope-tab,
  .qs-mode-tab,
  .notebook-tab,
  .stats-tab,
  .stats-range > button,
  .schedule-add-tab,
  .segmented-control > button,
  .mode-tab,
  .view-tab,
  .section-tab,
  .page-tab,
  .scope-tab,
  .switch-group > button,
  .view-switch > button,
  .mode-switch > button,
  [role="tablist"] > button,
  [role="tablist"] [role="tab"]
){
  font-size:16px!important;
  font-weight:400!important;
  line-height:1.15!important;
}

@media(max-width:700px){
  :is(
    .error-main-tab,
    .error-tab,
    .error-state-switch > button,
    .error-review-action-switch > button,
    .flash-tab,
    .library-scope-tab,
    .qs-mode-tab,
    .notebook-tab,
    .stats-tab,
    .stats-range > button,
    .schedule-add-tab,
    .segmented-control > button,
    .mode-tab,
    .view-tab,
    .section-tab,
    .page-tab,
    .scope-tab,
    .switch-group > button,
    .view-switch > button,
    .mode-switch > button,
    [role="tablist"] > button,
    [role="tablist"] [role="tab"]
  ){
    font-size:15px!important;
  }
}


/* v2026.09.29c — subtítulo curto acima dos títulos dos cards, padrão Cronograma */
.traube-page-spotlight-label{
  position:relative;
  z-index:2;
  display:block;
  margin:0 0 6px;
  color:rgba(255,255,255,.76)!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1.1!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
:root[data-theme="dark"] .traube-page-spotlight-label,
body.theme-dark .traube-page-spotlight-label{
  color:rgba(255,255,255,.68)!important;
}
@media(max-width:700px){
  .traube-page-spotlight-label{
    margin-bottom:5px!important;
    font-size:9px!important;
  }
}


/* v2026.09.29d — frase curta abaixo dos títulos dos cards */
.traube-page-spotlight-helper{
  position:relative;
  z-index:2;
  display:block;
  margin-top:7px;
  max-width:720px;
  color:rgba(255,255,255,.78)!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
@media(max-width:700px){
  .traube-page-spotlight-helper{
    margin-top:6px!important;
    font-size:10px!important;
  }
}


/* v2026.09.29e — box de título automático em todas as abas do modo Trabalho */
body[data-page^="trabalho_"] .traube-work-page-spotlight{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  height:138px;
  min-height:138px!important;
  margin:0 0 14px;
  padding:24px 28px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:15px!important;
  background:var(--ui-frame-bg, linear-gradient(135deg, #102C57 0%, #184888 50%, #2563EB 100%))!important;
  color:#fff;
  box-shadow:0 10px 30px rgba(17,65,130,.12);
}
body[data-page^="trabalho_"] .traube-work-page-spotlight::after,
body[data-page^="trabalho_"] .traube-work-page-spotlight::before{
  display:none!important;
  content:none!important;
}
body[data-page^="trabalho_"] .traube-work-page-spotlight .traube-page-spotlight-copy{
  position:relative;
  z-index:2;
  min-width:0;
}
body[data-page^="trabalho_"] .traube-work-page-spotlight .traube-page-spotlight-copy > strong{
  display:block;
  margin:0;
  color:inherit;
  font-size:32px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.8px;
}
@media(max-width:700px){
  body[data-page^="trabalho_"] .traube-work-page-spotlight{
    height:118px;
    min-height:118px!important;
    padding:20px!important;
  }
  body[data-page^="trabalho_"] .traube-work-page-spotlight .traube-page-spotlight-copy > strong{
    font-size:27px;
  }
}


/* v2026.09.29f — teste do box de título no Dashboard Estudo */
body[data-page="dashboard"] .traube-dashboard-spotlight{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  height:138px;
  min-height:138px!important;
  margin:0 0 14px;
  padding:24px 28px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:15px!important;
  background:var(--ui-frame-bg, linear-gradient(135deg, #102C57 0%, #184888 50%, #2563EB 100%))!important;
  color:#fff;
  box-shadow:0 10px 30px rgba(17,65,130,.12);
}
body[data-page="dashboard"] .traube-dashboard-spotlight::after,
body[data-page="dashboard"] .traube-dashboard-spotlight::before{
  display:none!important;
  content:none!important;
}
body[data-page="dashboard"] .traube-dashboard-spotlight .traube-page-spotlight-copy{
  position:relative;
  z-index:2;
  min-width:0;
}
body[data-page="dashboard"] .traube-dashboard-spotlight .traube-page-spotlight-copy > strong{
  display:block;
  margin:0;
  color:inherit;
  font-size:32px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.8px;
}
@media(max-width:700px){
  body[data-page="dashboard"] .traube-dashboard-spotlight{
    height:118px;
    min-height:118px!important;
    padding:20px!important;
  }
  body[data-page="dashboard"] .traube-dashboard-spotlight .traube-page-spotlight-copy > strong{
    font-size:27px;
  }
}


/* =========================================================
   v2026.09.29 — TODOS OS SWITCHES = CADERNO DE ERROS
   Referência única:
   callout 56px / padding 6px / gap 6px / radius 14px
   botão 46px / padding-x 21px / radius 10px
   fonte 16px / line-height 1.15
   ========================================================= */

:root{
  --traube-switch-font-size:15px;
  --traube-switch-height:46px;
  --traube-switch-pad-x:21px;
  --traube-switch-radius:10px;
  --traube-switch-shell-height:56px;
  --traube-switch-shell-padding:6px;
  --traube-switch-shell-gap:6px;
  --traube-switch-shell-radius:14px;
}

/* Todos os callouts/containers de switches */
.error-main-tabs,
.error-tabs,
.error-state-switch,
.flash-tabs,
.library-scope-tabs,
.qs-mode-tabs,
.notebook-tabs,
.stats-tabs-shell,
.stats-range,
.schedule-add-tabs,
.segmented-control,
.mode-tabs,
.view-tabs,
.section-tabs,
.page-tabs,
.scope-tabs,
.switch-group,
.view-switch,
.mode-switch{
  min-height:var(--traube-switch-shell-height)!important;
  padding:var(--traube-switch-shell-padding)!important;
  gap:var(--traube-switch-shell-gap)!important;
  border-radius:var(--traube-switch-shell-radius)!important;
}

/* Todos os botões internos dos switches */
.error-main-tab,
.error-tab,
.error-state-switch > button,
.flash-tab,
.library-scope-tab,
.qs-mode-tab,
.notebook-tab,
.stats-tab,
.stats-range > button,
.schedule-add-tab,
.segmented-control > button,
.mode-tab,
.view-tab,
.section-tab,
.page-tab,
.scope-tab,
.switch-group > button,
.view-switch > button,
.mode-switch > button{
  min-height:var(--traube-switch-height)!important;
  height:var(--traube-switch-height)!important;
  padding:0 var(--traube-switch-pad-x)!important;
  border-radius:var(--traube-switch-radius)!important;
  font-size:var(--traube-switch-font-size)!important;
  line-height:1.15!important;
  font-weight:400!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}

/* Mobile/PWA: mantém exatamente o mesmo padrão visual */
@media (max-width:700px){
  .error-main-tabs,
  .error-tabs,
  .error-state-switch,
  .flash-tabs,
  .library-scope-tabs,
  .qs-mode-tabs,
  .notebook-tabs,
  .stats-tabs-shell,
  .stats-range,
  .schedule-add-tabs,
  .segmented-control,
  .mode-tabs,
  .view-tabs,
  .section-tabs,
  .page-tabs,
  .scope-tabs,
  .switch-group,
  .view-switch,
  .mode-switch{
    min-height:var(--traube-switch-shell-height)!important;
    padding:var(--traube-switch-shell-padding)!important;
    gap:var(--traube-switch-shell-gap)!important;
    border-radius:var(--traube-switch-shell-radius)!important;
  }

  .error-main-tab,
  .error-tab,
  .error-state-switch > button,
  .flash-tab,
  .library-scope-tab,
  .qs-mode-tab,
  .notebook-tab,
  .stats-tab,
  .stats-range > button,
  .schedule-add-tab,
  .segmented-control > button,
  .mode-tab,
  .view-tab,
  .section-tab,
  .page-tab,
  .scope-tab,
  .switch-group > button,
  .view-switch > button,
  .mode-switch > button{
    min-height:var(--traube-switch-height)!important;
    height:var(--traube-switch-height)!important;
    padding:0 var(--traube-switch-pad-x)!important;
    border-radius:var(--traube-switch-radius)!important;
    font-size:var(--traube-switch-font-size)!important;
    line-height:1.15!important;
    font-weight:400!important;
  }
}


/* =========================================================
   v2026.09.29 — TIPOGRAFIA PRINCIPAL GLOBAL = 16PX
   Mantém hierarquia própria para títulos, métricas, badges,
   legendas auxiliares e microcopy.
   ========================================================= */

:root{
  --traube-body-font-size:16px;
}

/* Texto principal e navegação */
body,
p,
li,
td,
th,
label,
input,
select,
textarea,
button,
.button,
[role="button"],
.nav-link,
.nav-sublink,
.setting-row p,
.panel-header p,
.feature-card p,
.area-row,
.auth-form label,
.auth-message,
.inline-status{
  font-size:var(--traube-body-font-size)!important;
}

/* Conteúdo textual recorrente em cards e formulários */
.panel,
.feature-card,
.setting-row,
.selected-activity,
.error-question,
.error-answer-text,
.error-thought,
.error-library-card-ccq,
.error-library-detail-block div{
  font-size:var(--traube-body-font-size)!important;
}

/* Mantém títulos e indicadores com hierarquia visual própria */
h1,
h2,
h3,
h4,
h5,
h6,
.page-heading h1,
.metric-value,
.error-metric-card strong,
.error-ccq,
.traube-page-spotlight-copy > strong,
.brand-copy strong{
  font-size:revert;
}

/* Mantém microcopy/labels compactos menores que o corpo */
small,
.eyebrow,
.badge,
.metric-label,
.metric-helper,
.error-metric-card span,
.error-metric-card small,
.error-detail-label,
.error-library-field > span,
.error-library-card-meta,
.error-library-card-stats,
.error-library-detail-block span,
.traube-page-spotlight-label,
.traube-page-spotlight-helper,
.lofi-time,
.sidebar-lofi-copy small,
.lofi-loop-note{
  font-size:revert;
}

/* Mobile/PWA: mantém o mesmo tamanho base, sem encolher */
@media(max-width:700px){
  body,
  p,
  li,
  td,
  th,
  label,
  input,
  select,
  textarea,
  button,
  .button,
  [role="button"],
  .nav-link,
  .nav-sublink{
    font-size:var(--traube-body-font-size)!important;
  }
}


/* v2026.09.29 — força final: todos os switches em 15px */
:is(
  .error-main-tab,
  .error-tab,
  .error-state-switch > button,
  .error-review-action-switch > button,
  .flash-tab,
  .library-scope-tab,
  .qs-mode-tab,
  .notebook-tab,
  .stats-tab,
  .stats-range > button,
  .schedule-add-tab,
  .segmented-control > button,
  .mode-tab,
  .view-tab,
  .section-tab,
  .page-tab,
  .scope-tab,
  .switch-group > button,
  .view-switch > button,
  .mode-switch > button,
  [role="tablist"] > button,
  [role="tablist"] [role="tab"]
){
  font-size:15px!important;
}

@media(max-width:700px){
  :is(
    .error-main-tab,
    .error-tab,
    .error-state-switch > button,
    .error-review-action-switch > button,
    .flash-tab,
    .library-scope-tab,
    .qs-mode-tab,
    .notebook-tab,
    .stats-tab,
    .stats-range > button,
    .schedule-add-tab,
    .segmented-control > button,
    .mode-tab,
    .view-tab,
    .section-tab,
    .page-tab,
    .scope-tab,
    .switch-group > button,
    .view-switch > button,
    .mode-switch > button,
    [role="tablist"] > button,
    [role="tablist"] [role="tab"]
  ){
    font-size:15px!important;
  }
}


/* =========================================================
   v2026.09.29 — ALTURA GLOBAL = "REVISAR AGORA"
   Referência Caderno de Erros:
   botão 42px + container com 4px de padding
   ========================================================= */
:root{
  --traube-switch-height:42px;
  --traube-switch-shell-height:50px;
  --traube-switch-shell-padding:4px;
  --traube-switch-shell-gap:4px;
  --traube-switch-shell-radius:10px;
  --traube-switch-radius:7px;
}

/* Containers */
.error-main-tabs,
.error-tabs,
.error-state-switch,
.error-review-action-switch,
.flash-tabs,
.library-scope-tabs,
.qs-mode-tabs,
.notebook-tabs,
.stats-tabs-shell,
.stats-range,
.schedule-add-tabs,
.segmented-control,
.mode-tabs,
.view-tabs,
.section-tabs,
.page-tabs,
.scope-tabs,
.switch-group,
.view-switch,
.mode-switch,
[role="tablist"]{
  min-height:var(--traube-switch-shell-height)!important;
  height:auto!important;
  padding:var(--traube-switch-shell-padding)!important;
  gap:var(--traube-switch-shell-gap)!important;
  border-radius:var(--traube-switch-shell-radius)!important;
}

/* Botões */
.error-main-tab,
.error-tab,
.error-state-switch > button,
.error-review-action-switch > button,
.flash-tab,
.library-scope-tab,
.qs-mode-tab,
.notebook-tab,
.stats-tab,
.stats-range > button,
.schedule-add-tab,
.segmented-control > button,
.mode-tab,
.view-tab,
.section-tab,
.page-tab,
.scope-tab,
.switch-group > button,
.view-switch > button,
.mode-switch > button,
[role="tablist"] > button,
[role="tablist"] [role="tab"]{
  min-height:var(--traube-switch-height)!important;
  height:var(--traube-switch-height)!important;
  border-radius:var(--traube-switch-radius)!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Mobile/PWA mantém a mesma altura */
@media(max-width:700px){
  .error-main-tabs,
  .error-tabs,
  .error-state-switch,
  .error-review-action-switch,
  .flash-tabs,
  .library-scope-tabs,
  .qs-mode-tabs,
  .notebook-tabs,
  .stats-tabs-shell,
  .stats-range,
  .schedule-add-tabs,
  .segmented-control,
  .mode-tabs,
  .view-tabs,
  .section-tabs,
  .page-tabs,
  .scope-tabs,
  .switch-group,
  .view-switch,
  .mode-switch,
  [role="tablist"]{
    min-height:var(--traube-switch-shell-height)!important;
    padding:var(--traube-switch-shell-padding)!important;
  }

  .error-main-tab,
  .error-tab,
  .error-state-switch > button,
  .error-review-action-switch > button,
  .flash-tab,
  .library-scope-tab,
  .qs-mode-tab,
  .notebook-tab,
  .stats-tab,
  .stats-range > button,
  .schedule-add-tab,
  .segmented-control > button,
  .mode-tab,
  .view-tab,
  .section-tab,
  .page-tab,
  .scope-tab,
  .switch-group > button,
  .view-switch > button,
  .mode-switch > button,
  [role="tablist"] > button,
  [role="tablist"] [role="tab"]{
    min-height:var(--traube-switch-height)!important;
    height:var(--traube-switch-height)!important;
    font-size:15px!important;
  }
}


/* v2026.09.29 — BOTÕES VOLTAR = SWITCHES */
.traube-back-switch-btn{
  min-height:var(--traube-switch-height,42px)!important;
  height:var(--traube-switch-height,42px)!important;
  padding:0 var(--traube-switch-pad-x,21px)!important;
  border-radius:var(--traube-switch-radius,7px)!important;
  font-size:15px!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}
@media(max-width:700px){
  .traube-back-switch-btn{
    min-height:var(--traube-switch-height,42px)!important;
    height:var(--traube-switch-height,42px)!important;
    font-size:15px!important;
  }
}


/* =========================================================
   TRAUBE v2026.09.29 — DASHBOARD COMO RÉGUA GLOBAL
   Geometria de referência do Dashboard:
   margem lateral 28px / card 138px / padding 24x28 / raio 15px
   ========================================================= */
:root{
  --traube-dashboard-gutter:28px;
  --traube-dashboard-title-height:138px;
  --traube-dashboard-title-pad-y:24px;
  --traube-dashboard-title-pad-x:28px;
  --traube-dashboard-title-radius:15px;
  --traube-dashboard-title-gap:14px;
}

/* Cards de título das páginas usam exatamente a geometria do Dashboard. */
body:not([data-page="dashboard"]) :is(
  .traube-page-spotlight,
  .traube-work-page-spotlight,
  .daily-hero,
  .stats-hero,
  .flash-top-spotlight,
  .qs-v17-top,
  .error-cat-spotlight,
  .schedule-top-spotlight
){
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:var(--traube-dashboard-title-height)!important;
  min-height:var(--traube-dashboard-title-height)!important;
  max-height:var(--traube-dashboard-title-height)!important;
  margin-top:0!important;
  margin-right:0!important;
  margin-bottom:var(--traube-dashboard-title-gap)!important;
  margin-left:0!important;
  padding:var(--traube-dashboard-title-pad-y) var(--traube-dashboard-title-pad-x)!important;
  border-radius:var(--traube-dashboard-title-radius)!important;
}

/* O primeiro card começa na mesma linha útil do Dashboard. */
@media(min-width:981px){
  body:not([data-page="dashboard"]) .page:where(:not(body[data-ui-nav="v2"], body[data-ui-nav="v2"] *)){
    box-sizing:border-box!important;
  }
  body:not([data-page="dashboard"]) .page > :is(
    .traube-page-spotlight,
    .traube-work-page-spotlight,
    .daily-hero,
    .stats-hero,
    .flash-top-spotlight,
    .qs-v17-top,
    .error-cat-spotlight,
    .schedule-top-spotlight
  ){
    width:100%!important;
  }
}

/* Mobile mantém a proporção já aprovada do próprio Dashboard. */
@media(max-width:700px){
  :root{
    --traube-dashboard-gutter:20px;
    --traube-dashboard-title-height:118px;
    --traube-dashboard-title-pad-y:20px;
    --traube-dashboard-title-pad-x:20px;
  }
  body:not([data-page="dashboard"]) :is(
    .traube-page-spotlight,
    .traube-work-page-spotlight,
    .daily-hero,
    .stats-hero,
    .flash-top-spotlight,
    .qs-v17-top,
    .error-cat-spotlight,
    .schedule-top-spotlight
  ){
    height:var(--traube-dashboard-title-height)!important;
    min-height:var(--traube-dashboard-title-height)!important;
    max-height:var(--traube-dashboard-title-height)!important;
    padding:var(--traube-dashboard-title-pad-y) var(--traube-dashboard-title-pad-x)!important;
  }
}


/* =========================================================
   TRAUBE v2026.09.29 — TIPOGRAFIA ÚNICA DOS CARDS DE TÍTULO
   Um único padrão para eyebrow + título + helper.
   ========================================================= */
:root{
  --traube-title-eyebrow-size:10px;
  --traube-title-main-size:32px;
  --traube-title-helper-size:11px;
  --traube-title-eyebrow-gap:6px;
  --traube-title-helper-gap:7px;
  --traube-title-eyebrow-weight:850;
  --traube-title-main-weight:900;
  --traube-title-helper-weight:650;
}

/* Bloco textual interno */
:is(
  .traube-page-spotlight,
  .traube-work-page-spotlight,
  .traube-dashboard-spotlight,
  .daily-hero,
  .stats-hero,
  .flash-top-spotlight,
  .qs-v17-top,
  .error-cat-spotlight,
  .schedule-top-spotlight
) :is(
  .traube-page-spotlight-copy,
  .daily-hero-copy,
  .stats-hero-copy,
  .flash-top-spotlight-copy,
  .qs-v17-top-copy,
  .error-cat-spotlight-copy,
  .schedule-top-spotlight-copy
){
  color:#fff!important;
}

/* Texto acima do título */
:is(
  .traube-page-spotlight-label,
  .schedule-top-spotlight-label,
  .daily-hero .eyebrow,
  .stats-hero .eyebrow,
  .flash-top-spotlight .eyebrow,
  .qs-v17-top .eyebrow,
  .error-cat-spotlight .eyebrow,
  .traube-page-spotlight .eyebrow
){
  display:block!important;
  margin:0 0 var(--traube-title-eyebrow-gap)!important;
  color:#fff!important;
  opacity:1!important;
  font-size:var(--traube-title-eyebrow-size)!important;
  font-weight:var(--traube-title-eyebrow-weight)!important;
  line-height:1.1!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* Título principal */
:is(
  .traube-page-spotlight-copy > strong,
  .traube-page-spotlight [data-page-title],
  .traube-work-page-spotlight [data-page-title],
  .traube-dashboard-spotlight [data-page-title],
  .daily-hero h1,
  .daily-hero h2,
  .stats-hero h1,
  .stats-hero h2,
  .flash-top-spotlight h1,
  .flash-top-spotlight h2,
  .qs-v17-top h1,
  .qs-v17-top h2,
  .error-cat-spotlight h1,
  .error-cat-spotlight h2,
  .schedule-top-spotlight h1,
  .schedule-top-spotlight h2
){
  display:block!important;
  margin:0!important;
  color:#fff!important;
  opacity:1!important;
  font-size:var(--traube-title-main-size)!important;
  font-weight:var(--traube-title-main-weight)!important;
  line-height:1.08!important;
  letter-spacing:-.8px!important;
}

/* Texto abaixo do título */
:is(
  .traube-page-spotlight-helper,
  .schedule-top-spotlight-helper,
  .daily-hero .hero-helper,
  .stats-hero .hero-helper,
  .flash-top-spotlight .hero-helper,
  .qs-v17-top .hero-helper,
  .error-cat-spotlight .hero-helper,
  .traube-page-spotlight .hero-helper
){
  display:block!important;
  margin:var(--traube-title-helper-gap) 0 0!important;
  max-width:720px!important;
  color:#fff!important;
  opacity:1!important;
  font-size:var(--traube-title-helper-size)!important;
  font-weight:var(--traube-title-helper-weight)!important;
  line-height:1.3!important;
  letter-spacing:0!important;
  text-transform:none!important;
}

/* Garante branco também para elementos simples dentro do card de título */
:is(
  .traube-page-spotlight,
  .traube-work-page-spotlight,
  .traube-dashboard-spotlight,
  .daily-hero,
  .stats-hero,
  .flash-top-spotlight,
  .qs-v17-top,
  .error-cat-spotlight,
  .schedule-top-spotlight
) :is(h1,h2,h3,strong,p,small,span){
  color:#fff;
}

/* Mobile/PWA: mesma hierarquia em todas as páginas */
@media(max-width:700px){
  :root{
    --traube-title-eyebrow-size:9px;
    --traube-title-main-size:27px;
    --traube-title-helper-size:10px;
    --traube-title-eyebrow-gap:5px;
    --traube-title-helper-gap:6px;
  }
}


/* =========================================================
   TRAUBE LOGIN — fundo branco texturizado com logos repetidas
   Correção v2026-09-29
   ========================================================= */
body.auth-page{
  background:#fff !important;
  --traube-pattern-image:url("../img/logos/logo-icone-original.png?v=login-pattern-20260929");
  --traube-pattern-size:96px;
  --traube-pattern-opacity:.038;
}
body.auth-page::before,
body.auth-page::after{
  display:block !important;
  content:"" !important;
  background-color:transparent !important;
  background-image:var(--traube-pattern-image) !important;
  background-repeat:repeat !important;
  background-size:var(--traube-pattern-size) var(--traube-pattern-size) !important;
  pointer-events:none !important;
}
body.auth-page::before{
  background-position:0 0 !important;
  opacity:var(--traube-pattern-opacity) !important;
}
body.auth-page::after{
  background-position:48px 48px !important;
  opacity:var(--traube-pattern-opacity) !important;
}
body.auth-page>.auth-card{
  position:relative;
  z-index:2;
}

/* =========================================================
   v2026.09.29 — SWITCH GLOBAL OFICIAL
   Espelha exatamente o Caderno de Erros v18.18
   ========================================================= */
:root{
  --traube-switch-height:40px;
  --traube-switch-shell-height:50px;
  --traube-switch-shell-padding:4px;
  --traube-switch-shell-gap:4px;
  --traube-switch-shell-radius:10px;
  --traube-switch-radius:7px;
  --traube-switch-font-size:16px;
  --traube-switch-font-weight:400;
  --traube-switch-pad-x:17px;
}
.error-main-tabs,.error-tabs,.error-state-switch,.error-review-action-switch,.flash-tabs,.flash-review-action-switch,.library-scope-tabs,.qs-mode-tabs,.notebook-tabs,.stats-tabs-shell,.stats-range,.schedule-add-tabs,.segmented-control,.mode-tabs,.view-tabs,.section-tabs,.page-tabs,.scope-tabs,.switch-group,.view-switch,.mode-switch,[role="tablist"]{
  box-sizing:border-box!important;
  min-height:50px!important;height:50px!important;
  padding:4px!important;gap:4px!important;border-radius:10px!important;
  align-items:center!important;
}
.error-main-tab,.error-tab,.error-state-switch button,.error-review-action-switch button,.flash-tab,.flash-review-action-switch button,.library-scope-tab,.qs-mode-tab,.notebook-tab,.stats-tab,.stats-range>button,.schedule-add-tab,.segmented-control>button,.mode-tab,.view-tab,.section-tab,.page-tab,.scope-tab,.switch-group>button,.view-switch>button,.mode-switch>button,[role="tablist"]>button,[role="tablist"] [role="tab"]{
  box-sizing:border-box!important;
  min-height:40px!important;height:40px!important;
  padding:0 17px!important;margin:0!important;
  border-radius:7px!important;
  font-size:16px!important;font-weight:400!important;line-height:1!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}
@media(max-width:700px){
  .error-main-tab,.error-tab,.error-state-switch button,.error-review-action-switch button,.flash-tab,.flash-review-action-switch button,.library-scope-tab,.qs-mode-tab,.notebook-tab,.stats-tab,.stats-range>button,.schedule-add-tab,.segmented-control>button,.mode-tab,.view-tab,.section-tab,.page-tab,.scope-tab,.switch-group>button,.view-switch>button,.mode-switch>button,[role="tablist"]>button,[role="tablist"] [role="tab"]{font-size:15px!important;font-weight:400!important}
}

/* =========================================================
   v2026.09.29 — TIPOGRAFIA GLOBAL OFICIAL
   Referência: Resumo / Esta semana — Questões e Simulados
   ========================================================= */
:root{--traube-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html,body,button,input,select,textarea,option,h1,h2,h3,h4,h5,h6,p,span,small,strong,b,label,a,div,section,article,aside,nav,header,footer,table,thead,tbody,tr,th,td,ul,ol,li{
  font-family:var(--traube-font)!important;
}
button,input,select,textarea{font-family:var(--traube-font)!important}

/* v2026.09.29 — eyebrows/kickers leves no padrão TRAUBE */
.qs-home-kicker,.qs-home-eyebrow,.error-home-eyebrow,.flash-top-spotlight-label,.eyebrow,[class*="eyebrow"],[class*="kicker"]{
  font-family:var(--traube-font)!important;
  font-weight:400!important;
  letter-spacing:.07em!important;
}


/* TRAUBE v16.13 — tipografia única global.
   A referência oficial é a tipografia usada em Questões do dia / subtítulo.
   Esta regra fica por último para neutralizar fontes locais antigas. */
:root{--font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
html,body,body *,button,input,select,textarea,optgroup,option{font-family:var(--font-ui)!important}
body [contenteditable="true"],body [contenteditable="true"] *,body .note-editor-content,body .note-editor-content *{font-family:var(--font-ui)!important}
body :where(code,pre,kbd,samp),body :where(code,pre,kbd,samp) *{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace!important}

/* =========================================================
   v2026.10.02 — SCROLLBAR GLOBAL TRAUBE
   Referência visual: scrollbar dos decks de Flashcards
   ========================================================= */
html,
body,
body *{
  scrollbar-width:thin;
  scrollbar-color:var(--accent) var(--surface-2);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar{
  width:8px;
  height:8px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track{
  background:var(--surface-2);
  border-radius:8px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb{
  background:var(--accent);
  border-radius:8px;
}



/* =========================================================
   v2026.10.02 — LISTAS CLICÁVEIS / DROPDOWNS NO PADRÃO TRAUBE
   ========================================================= */
.traube-site-select{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-height:42px!important;
  padding:0 40px 0 12px!important;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border))!important;
  border-radius:10px!important;
  background:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%) calc(100% - 17px) 18px/5px 5px no-repeat,
    linear-gradient(135deg,var(--muted) 50%,transparent 50%) calc(100% - 12px) 18px/5px 5px no-repeat,
    var(--surface)!important;
  color:var(--text)!important;
  box-shadow:0 2px 8px color-mix(in srgb,var(--text) 4%,transparent)!important;
  cursor:pointer!important;
  outline:none!important;
  transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease!important;
}
.traube-site-select:hover{
  border-color:color-mix(in srgb,var(--accent) 48%,var(--border))!important;
  background-color:color-mix(in srgb,var(--surface) 96%,var(--accent) 4%)!important;
}
.traube-site-select:focus,
.traube-site-select:focus-visible{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft),0 8px 20px color-mix(in srgb,var(--text) 6%,transparent)!important;
}
.traube-site-select option,
.traube-site-select optgroup{
  background:var(--surface)!important;
  color:var(--text)!important;
  font-weight:600!important;
}
.traube-site-list{
  box-sizing:border-box!important;
  padding:6px!important;
  border:1px solid color-mix(in srgb,var(--accent) 15%,var(--border))!important;
  border-radius:11px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  box-shadow:0 14px 34px color-mix(in srgb,#000 12%,transparent)!important;
  overflow:auto!important;
  z-index:1000!important;
}
.traube-site-list>[role="option"],
.traube-site-list>[role="menuitem"],
.traube-site-list>button,
.traube-site-list>a,
.traube-site-list>label{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:34px!important;
  padding:7px 9px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:var(--text)!important;
  text-align:left!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.25!important;
  cursor:pointer!important;
}
.traube-site-list>[role="option"]:hover,
.traube-site-list>[role="menuitem"]:hover,
.traube-site-list>button:hover,
.traube-site-list>a:hover,
.traube-site-list>label:hover{
  background:var(--accent-soft)!important;
  color:var(--accent)!important;
}
.traube-site-list>[aria-selected="true"],
.traube-site-list>[aria-checked="true"],
.traube-site-list>.active,
.traube-site-list>.selected{
  background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important;
  color:var(--accent)!important;
  font-weight:800!important;
}
.traube-site-list[hidden]{display:none!important}
@media(max-width:700px){
  .traube-site-select{min-height:44px!important;border-radius:10px!important}
  .traube-site-list{border-radius:12px!important;padding:7px!important}
  .traube-site-list>[role="option"],
  .traube-site-list>[role="menuitem"],
  .traube-site-list>button,
  .traube-site-list>a,
  .traube-site-list>label{min-height:40px!important;padding:9px 10px!important}
}


/* TRAUBE v2026.10.04 — tipografia global mais leve em botões e callouts.
   Exceções visuais: Flashcards, Questões e Simulados e Caderno de Erros mantêm
   seus pesos próprios onde o destaque faz parte do design. */
body:not([data-page="flashcards"]):not([data-page="questoes"]):not([data-page="erros"]) button,
body:not([data-page="flashcards"]):not([data-page="questoes"]):not([data-page="erros"]) .button,
body:not([data-page="flashcards"]):not([data-page="questoes"]):not([data-page="erros"]) [role="button"]{
  font-weight:400!important;
}
body:not([data-page="flashcards"]):not([data-page="questoes"]):not([data-page="erros"]) :is(.metric-card,.panel,.feature-card,.callout,[class*="callout"]) :is(h1,h2,h3,h4,h5,h6,strong,b,.metric-label,.metric-value){
  font-weight:400!important;
}



/* TRAUBE SCROLLBAR — THUMB ONLY v1 — 2026-10-04 */
/* Scrollbar global: sem setas, sem trilho/fundo — apenas a barra móvel. */
*{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--accent) 70%,transparent) transparent;
}

*::-webkit-scrollbar{
  width:8px;
  height:8px;
  background:transparent;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

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

*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--accent) 72%,transparent)!important;
  border:0!important;
  border-radius:999px!important;
  min-height:34px;
}

*::-webkit-scrollbar-thumb:hover{
  background:var(--accent)!important;
}

/* Mantém o padrão também nas listas internas do sidebar. */
#sidebar .nav::-webkit-scrollbar,
#sidebar .nav-study::-webkit-scrollbar,
#sidebar .nav-work::-webkit-scrollbar{
  width:7px!important;
}

#sidebar .nav::-webkit-scrollbar-track,
#sidebar .nav-study::-webkit-scrollbar-track,
#sidebar .nav-work::-webkit-scrollbar-track{
  background:transparent!important;
}

#sidebar .nav::-webkit-scrollbar-button,
#sidebar .nav-study::-webkit-scrollbar-button,
#sidebar .nav-work::-webkit-scrollbar-button{
  display:none!important;
  width:0!important;
  height:0!important;
}


/* =========================================================
   TRAUBE GLOBAL — TRUE THUMB-ONLY SCROLLBAR v2026.10.05
   Todas as áreas roláveis usam somente o thumb.
   Trilho/cantos/botões são transparentes e não reservam faixa no layout.
   ========================================================= */
html,
body,
body *{
  scrollbar-width:thin!important;
  scrollbar-color:color-mix(in srgb,var(--accent) 58%,transparent) transparent!important;
  scrollbar-gutter:auto!important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar{
  width:7px!important;
  height:7px!important;
  background:transparent!important;
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-track-piece,
body *::-webkit-scrollbar-track,
body *::-webkit-scrollbar-track-piece{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
body *::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--accent) 58%,transparent)!important;
  background-color:color-mix(in srgb,var(--accent) 58%,transparent)!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
  min-height:28px!important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
body *::-webkit-scrollbar-thumb:hover{
  background:color-mix(in srgb,var(--accent) 76%,transparent)!important;
  background-color:color-mix(in srgb,var(--accent) 76%,transparent)!important;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
body *::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:single-button,
body::-webkit-scrollbar-button:single-button,
body *::-webkit-scrollbar-button:single-button,
html::-webkit-scrollbar-button:double-button,
body::-webkit-scrollbar-button:double-button,
body *::-webkit-scrollbar-button:double-button{
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  background:transparent!important;
  border:0!important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
body *::-webkit-scrollbar-corner,
html::-webkit-resizer,
body::-webkit-resizer,
body *::-webkit-resizer{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}


/* TRAUBE SCROLLBAR — NO ARROW BUTTONS HARD LOCK v2026.10.05
   Remove qualquer botão/seta nativa de scrollbar em TODA área rolável. */
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
body *::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:single-button,
body::-webkit-scrollbar-button:single-button,
body *::-webkit-scrollbar-button:single-button,
html::-webkit-scrollbar-button:double-button,
body::-webkit-scrollbar-button:double-button,
body *::-webkit-scrollbar-button:double-button,
html::-webkit-scrollbar-button:vertical,
body::-webkit-scrollbar-button:vertical,
body *::-webkit-scrollbar-button:vertical,
html::-webkit-scrollbar-button:horizontal,
body::-webkit-scrollbar-button:horizontal,
body *::-webkit-scrollbar-button:horizontal,
html::-webkit-scrollbar-button:vertical:decrement,
html::-webkit-scrollbar-button:vertical:increment,
body::-webkit-scrollbar-button:vertical:decrement,
body::-webkit-scrollbar-button:vertical:increment,
body *::-webkit-scrollbar-button:vertical:decrement,
body *::-webkit-scrollbar-button:vertical:increment,
html::-webkit-scrollbar-button:horizontal:decrement,
html::-webkit-scrollbar-button:horizontal:increment,
body::-webkit-scrollbar-button:horizontal:decrement,
body::-webkit-scrollbar-button:horizontal:increment,
body *::-webkit-scrollbar-button:horizontal:decrement,
body *::-webkit-scrollbar-button:horizontal:increment,
html::-webkit-scrollbar-button:start,
html::-webkit-scrollbar-button:end,
body::-webkit-scrollbar-button:start,
body::-webkit-scrollbar-button:end,
body *::-webkit-scrollbar-button:start,
body *::-webkit-scrollbar-button:end{
  -webkit-appearance:none!important;
  appearance:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}