/* DarkTask floating shell
   A single visual language for navigation, notices, content and utilities. */

:root {
  /* Bandas full-bleed do novo template (09/2026): a casca deixa de flutuar com
     folga e passa a colar nas bordas, dividida por hairline. A folga vira 0 no
     desktop; o celular ainda a reabre onde precisa. --- */
  --dt-shell-gap: 0px;
  --dt-sidebar-width: 272px;
  /* Canto reto: a regra que mais identifica o novo template (design system
     09/2026). Os nomes seguem existindo — quem os lê agora resolve para 0, e a
     casca inteira fica quadrada sem tocar em cada regra. Avatar e toggle usam
     50%/999px direto, então continuam redondos. Voltar ao arredondado é
     devolver os quatro valores. */
  --dt-radius-xs: 0px;
  --dt-radius-sm: 0px;
  --dt-radius-md: 0px;
  --dt-radius-lg: 0px;
  /* 28px, não 32px: no Chrome o desfoque de fundo muda de algoritmo acima de
     28px, e cada quadro composto passa a custar quatro vezes mais — medido em
     04/09/2026, com a tela do feed (21 vidros à vista) e um único pontinho
     pulsando, o processo de GPU do Chrome ia de 60% de um núcleo a 15%, e a
     GPU de 14% a 4%, só por este número. A diferença visual não existe. */
  --dt-blur: 28px;
  --dt-backdrop-blur: 16px;
  --dt-float-shadow: var(--shadow-2, none);
  --dt-sidebar-section-gap: 12px;
  --dt-sidebar-item-gap: 6px;

  /* A superfície do que é clicável.
     Branco a 10% é o que se enxerga sobre o fundo escuro; sobre o #F4F5F7 do
     tema claro ele desaparece, e ali o mesmo papel cabe a um preto de baixa
     opacidade. Os dois pares estão logo abaixo, por tema. */
  --dt-toque: rgba(255, 255, 255, .10);
  --dt-toque-forte: rgba(255, 255, 255, .16);
}

[data-dt-theme="light"] {
  --dt-toque: rgba(18, 20, 26, .05);
  --dt-toque-forte: rgba(18, 20, 26, .09);
}

html,
body {
  min-height: 100%;
  background: var(--bg, #050505);
}

.dt-app-root {
  background: transparent !important;
  isolation: isolate;
  padding-bottom: 164px;
  zoom: var(--dt-ui-zoom, 1);
}

.dt-app-root::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg);
}

/* Floating notice */
.dt-notice-host {
  position: sticky;
  top: var(--dt-shell-gap);
  z-index: 42;
  width: calc(100% - var(--dt-sidebar-width) - (var(--dt-shell-gap) * 3)) !important;
  margin: var(--dt-shell-gap) var(--dt-shell-gap) 0 calc(var(--dt-sidebar-width) + (var(--dt-shell-gap) * 2));
  pointer-events: none;
}

.dt-alert-surface {
  position: relative;
  /* 15% mais alta que os 42px originais, no mesmo passo da barra de mídia. */
  width: 100%;
  min-height: 48px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--dt-edge);
  border-radius: var(--dt-radius-md);
  background: var(--dt-surface-strong) !important;
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  pointer-events: auto;
}

/* Recipe shared by every primary surface — agora CHAPADA: papel sólido e fio de
   1px, sem vidro nem sombra, na língua do template. O toast segue com a mesma
   receita reta. */
.dt-alert-surface,
.dt-sidebar .dt-status-pill,
.dt-sidebar .dt-weather-button,
.dt-timeline-inner,
.dt-media-bar,
.dt-toast-notification {
  border: 1px solid var(--dt-edge) !important;
  border-radius: 0 !important;
  background: var(--surface-1) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dt-alert-content {
  position: relative;
  z-index: 1;
  min-height: 48px;
  padding: 8px 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* =========================================================================
   CABEÇALHO DO TOPO — banda de 72px fiel ao protótipo (DarkTask v2.dc.html):
   NEWS ao centro (rss + rótulo + ticker), e à direita o trilho de células de
   72px — engrenagem, sino e o relógio grande. Cor pelo tema (claro = papel).
   ========================================================================= */
.dt-topbar-host { pointer-events: auto !important; }
.dt-alert-surface.dt-topbar-band {
  display: flex;
  align-items: stretch;
  height: 72px;
  min-height: 72px;
  border: 0 !important;
  border-bottom: 1px solid var(--dt-edge) !important;
  border-radius: 0 !important;
  background: var(--surface-1) !important;
  overflow: hidden;
}
.dt-alert-content.dt-topbar-news {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0 24px;
  gap: 12px;
  cursor: pointer;
}
.dt-alert-content.dt-topbar-news:hover { background: var(--surface-2, var(--panel-2)); }
.dt-topbar-rss { display: inline-flex; flex: none; color: var(--muted); }
.dt-topbar-rss svg { width: 22px; height: 22px; }
.dt-topbar-newslabel {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--muted); line-height: 1;
}
.dt-topbar-rail {
  flex: none;
  display: flex; align-items: stretch;
  border-left: 1px solid var(--dt-edge);
}
.dt-topbar-cell {
  width: 72px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-right: 1px solid var(--dt-edge);
  background: transparent; color: var(--text); cursor: pointer;
}
.dt-topbar-cell:hover { background: var(--surface-2, var(--panel-2)); }
.dt-topbar-cell svg { width: 24px; height: 24px; }
.dt-topbar-bellslot { display: flex; align-items: stretch; }
.dt-topbar-clock {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0 20px; min-width: 132px;
}
.dt-topbar-date {
  font-size: 12px; color: var(--muted); letter-spacing: .2px;
  text-transform: capitalize; white-space: nowrap;
}
.dt-topbar-time {
  font-size: 26px; font-weight: 300; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; color: var(--text);
}
@media (max-width: 760px) {
  .dt-topbar-newslabel, .dt-topbar-date { display: none; }
  .dt-topbar-cell { width: 56px; }
  .dt-topbar-clock { min-width: 0; padding: 0 14px; }
  .dt-topbar-time { font-size: 20px; }
}

/* Item selecionado da sidebar: barra de 3px à esquerda (protótipo). A sombra é
   zerada globalmente, então a barra é um ::before, não um box-shadow. */
.dt-sidebar-nav-item { position: relative; }
.dt-sidebar-nav-item[aria-current="true"]::before,
.dt-sidebar-nav-item[aria-pressed="true"]::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--text-3, #9a9a9a);
}

/* Sidebar full-bleed: coluna colada à esquerda, só o fio à direita, papel
   sólido. Sem folga, sem canto, sem vidro — a coluna do template. */
.dt-sidebar {
  position: fixed;
  z-index: 45;
  inset: 0 auto 0 0;
  width: var(--dt-sidebar-width) !important;
  max-width: none !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  overflow: visible;
  border: 0;
  border-right: 1px solid var(--dt-edge);
  border-radius: 0;
  background: var(--surface-1) !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dt-sidebar > a {
  width: 100%;
  min-height: 48px;
  margin: 0 !important;
  padding: 10px 8px 14px;
  border-bottom: 1px solid var(--dt-edge);
  justify-content: flex-start;
}

.dt-sidebar img[data-system-logo] {
  width: min(100%, 188px) !important;
  height: auto !important;
  max-width: 100% !important;
}

.dt-sidebar .dt-status-cluster {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 !important;
  padding: 6px;
  border: 1px solid var(--dt-edge);
  border-radius: var(--dt-radius-md);
  background: var(--dt-surface-strong) !important;
  box-shadow: none;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-sidebar .dt-status-pill,
.dt-sidebar .dt-weather-button {
  width: 100%;
  height: 58px !important;
  min-width: 0;
  padding: 0 11px !important;
  border: 0 !important;
  border-radius: var(--dt-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dt-sidebar .dt-datetime-status {
  display: flex !important;
  gap: 10px !important;
  padding: 0 7px 0 12px !important;
}

.dt-datetime-copy { flex: 1; min-width: 0; }

.dt-datetime-alarm {
  appearance: none;
  width: 38px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dt-edge) !important;
  border-radius: 11px;
  background: var(--dt-surface-hover) !important;
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.dt-datetime-alarm:hover,
.dt-datetime-alarm:focus-visible {
  color: var(--accent-text);
  border-color: var(--dt-edge-strong) !important;
  background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
  outline: none;
}

.dt-datetime-alarm:active { transform: scale(.96); }

.dt-sidebar .dt-weather-in-cluster {
  grid-column: 1 / -1;
  width: 100%;
  padding: 6px 0 0 !important;
  margin-top: 6px;
  border-top: 1px solid var(--dt-edge);
}

.dt-sidebar .dt-weather-popover {
  top: 0 !important;
  left: calc(100% + var(--dt-shell-gap)) !important;
  width: min(480px, calc(100vw - var(--dt-sidebar-width) - (var(--dt-shell-gap) * 4))) !important;
  padding: 24px !important;
  border: 1px solid var(--dt-edge) !important;
  border-radius: var(--dt-radius-md) !important;
  background: var(--dt-surface-strong) !important;
  box-shadow: var(--dt-float-shadow) !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

/* O blur do menu lateral cria um backdrop isolado. Enquanto o clima estiver
   aberto, transferimos o vidro do menu para um pseudo-elemento irmão para
   que o popover consiga desfocar a página real atrás dele. */
.dt-sidebar:has(.dt-weather-popover) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O cluster de data/clima também cria um contexto de backdrop. Ao abrir o
   popover, liberamos esse contexto para o vidro expandido desfocar a página. */
.dt-sidebar .dt-status-cluster:has(.dt-weather-popover) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dt-sidebar:has(.dt-weather-popover)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-sidebar .dt-weather-popover {
  background: transparent !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(150%) !important;
}

.dt-weather-popover-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.dt-weather-popover-actions button {
  appearance: none;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dt-edge) !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.dt-weather-popover-actions button:hover,
.dt-weather-popover-actions button:focus-visible {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
  outline: none;
}

.dt-weather-metrics,
.dt-weather-forecast-grid { gap: 12px !important; }
.dt-weather-metrics { margin-bottom: 18px !important; }
.dt-weather-metric { padding: 14px 16px !important; }
.dt-weather-forecast-card { padding: 14px 10px !important; }

.dt-weather-metric,
.dt-weather-forecast-card {
  border-color: var(--dt-edge) !important;
  background: var(--dt-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sidebar-item-gap);
  padding: 0;
}

.dt-sidebar-nav-item {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font: 400 12.5px/1.2 Inter, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.dt-sidebar-nav-item svg {
  flex: none;
  color: var(--faint);
  transition: color .16s ease;
}

.dt-sidebar-nav-item:hover,
.dt-sidebar-nav-item:focus-visible,
.dt-sidebar-nav-item[aria-pressed="true"],
.dt-sidebar-nav-item[aria-current="true"] {
  color: var(--text);
  border-color: var(--dt-edge);
  background: var(--dt-surface-hover);
  outline: none;
}

.dt-sidebar-nav-item:hover svg,
.dt-sidebar-nav-item:focus-visible svg,
.dt-sidebar-nav-item[aria-pressed="true"] svg,
.dt-sidebar-nav-item[aria-current="true"] svg {
  color: var(--accent-text);
}

.dt-sidebar-nav-item:active { transform: scale(.985); }
.dt-sidebar-nav-item:disabled {
  opacity: .68;
  cursor: not-allowed;
  transform: none !important;
}
.dt-sidebar-nav-item:disabled:hover {
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}
.dt-sidebar-nav-item:disabled:hover svg { color: var(--faint); }
.dt-sidebar-nav-soon small {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 7px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font: 300 8.5px/1 Inter, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
.dt-sidebar-spacer { flex: 1; min-height: var(--dt-sidebar-section-gap); }

.dt-sidebar .dt-save-indicator {
  align-self: flex-start;
  margin-inline: 4px;
}

.dt-sidebar-footer {
  order: 10;
  display: block;
  padding-top: var(--dt-sidebar-section-gap);
  border-top: 1px solid var(--dt-edge);
}

.dt-sidebar-userbox {
  min-height: 50px;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--dt-edge);
  border-radius: var(--dt-radius-sm);
  background: var(--dt-surface-strong);
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-sidebar-profile,
.dt-sidebar-settings {
  appearance: none;
  min-width: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.dt-sidebar-profile {
  width: 38px;
  height: 38px;
  padding: 2px;
  display: flex;
  align-items: center;
}

/* A engrenagem é 20% maior que o botão do perfil ao lado (38px viraram 46) e
   usa a cor de contraste em vez do cinza: ela é a única porta para tudo que se
   ajusta no app, e em cinza, do mesmo tamanho do vizinho, sumia no rodapé. */
.dt-sidebar-settings {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
}

.dt-sidebar-profile:hover,
.dt-sidebar-profile:focus-visible {
  background: var(--dt-surface-hover);
  outline: none;
}

/* Neon: o brilho sai da própria cor de contraste, em três camadas — o anel
   colado na borda, o halo curto e o estouro largo. O ícone ganha um
   drop-shadow próprio porque o box-shadow para na caixa do botão e deixaria o
   desenho apagado no meio do brilho. */
.dt-sidebar-settings:hover,
.dt-sidebar-settings:focus-visible {
  outline: none;
  background: var(--accent-weak);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 32%, transparent);
}
.dt-sidebar-settings:hover svg,
.dt-sidebar-settings:focus-visible svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 85%, transparent));
}

.dt-sidebar-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
}

.dt-mobile-menu-toggle { display: none; }

.dt-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dt-sidebar-profile-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dt-sidebar-profile-copy strong { overflow: hidden; color: var(--text); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.dt-sidebar-profile-copy small { color: var(--faint); font-size: 9.5px; }

/* Main canvas */
.dt-page-content,
.dt-page-tail {
  width: calc(100% - var(--dt-sidebar-width) - (var(--dt-shell-gap) * 3)) !important;
  max-width: none !important;
  margin-left: calc(var(--dt-sidebar-width) + (var(--dt-shell-gap) * 2)) !important;
  margin-right: var(--dt-shell-gap) !important;
}

.dt-page-content {
  padding-inline: clamp(2px, 1vw, 12px) !important;
}

.dt-page-content > div:first-child h1 {
  letter-spacing: -.035em !important;
}

.dt-tools-section { margin-bottom: 24px !important; }
.dt-tools-tabs,
.dt-tool-card {
  border-color: var(--dt-edge) !important;
  background: var(--dt-surface) !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

/* Timeline and media are independent floating surfaces. */
.dt-timeline-dock {
  position: fixed !important;
  z-index: 35;
  left: calc(var(--dt-sidebar-width) + (var(--dt-shell-gap) * 2)) !important;
  right: var(--dt-shell-gap) !important;
  bottom: var(--dt-shell-gap) !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

.dt-timeline-inner,
.dt-media-bar {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  border: 1px solid var(--dt-edge) !important;
  border-radius: var(--dt-radius-md) !important;
  background: var(--dt-surface-strong) !important;
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  pointer-events: auto;
}

.dt-timeline-inner { padding: 10px 16px 9px !important; }
/* 15% acima dos 42px que esta regra fixava: é ela que decide a altura real da
   barra, e não o valor declarado em app-polish.css. */
.dt-media-bar { min-height: 71px !important; height: 71px !important; padding: 0 !important; }
.dt-timeline-action { border-radius: 10px !important; }

/* One surface recipe across every structural box. */
:is(
  .dt-project-shell,
  .dt-task-card,
  .dt-darktask-card,
  .dt-tool-card,
  .dt-section-header,
  .dt-section-empty,
  .dt-empty-state,
  .dt-audio-note-panel,
  .dt-audio-row,
  .dt-hydration-card,
  .dt-profile-access,
  .dt-view-modal,
  .dt-task-editor,
  .dt-settings-modal,
  .dt-audit-modal,
  .dt-floating-modal,
  .dt-master-dialog,
  .dt-alarm-dialog,
  .dt-text-idea-dialog,
  .dt-audio-note-dialog,
  .dt-alert-recorder-dialog,
  .dt-alarm-row
) {
  border-color: var(--dt-edge) !important;
  border-radius: var(--dt-radius-md) !important;
  background: var(--dt-surface) !important;
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

:is(.dt-view-modal, .dt-task-editor, .dt-settings-modal, .dt-audit-modal, .dt-floating-modal, .dt-master-dialog, .dt-alarm-dialog, .dt-text-idea-dialog, .dt-audio-note-dialog, .dt-alert-recorder-dialog) {
  background: var(--dt-surface-strong) !important;
  border-color: var(--dt-edge) !important;
  box-shadow: var(--dt-float-shadow) !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

.dt-alarm-dialog {
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

.dt-alarm-dialog > header,
.dt-alarm-form,
.dt-alarm-scheduled { background: transparent !important; }

.dt-alarm-dialog :is(input, fieldset, .dt-alarm-days button, [data-alarm-close]) {
  border-color: var(--dt-edge) !important;
}

.dt-history-panel {
  height: calc(100vh - 40px) !important;
  margin: 20px !important;
  border: 1px solid var(--dt-edge) !important;
  border-radius: var(--dt-radius-lg) !important;
  background: var(--dt-surface-strong) !important;
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  overflow: hidden;
}

.dt-app-root :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
  border-color: var(--dt-edge) !important;
  border-radius: 12px !important;
  background: var(--dt-field) !important;
}

:is(#darklist-container, #socialmedia-container, #surveys-container) :is(
  .dl-hero,
  .dl-card,
  .dl-sidebar-box,
  .dl-item-row,
  .dl-editor-overview,
  .dl-modal-dialog,
  .sm-content,
  .sm-type-card,
  .sm-field-article,
  .sm-field-media,
  .sm-field-video
) {
  border-color: var(--dt-edge) !important;
  border-radius: var(--dt-radius-md) !important;
  background: var(--dt-surface) !important;
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

:is(#darklist-container, #socialmedia-container, #surveys-container) .dl-card:hover {
  border-color: var(--dt-edge) !important;
  background: var(--dt-surface-hover) !important;
}

:is(#darklist-container, #socialmedia-container, #surveys-container) :is(.dl-modal-dialog, .sm-content-overlay, .sm-settings-overlay, .sm-review-overlay) {
  border-color: var(--dt-edge) !important;
  background: var(--dt-surface-strong) !important;
  box-shadow: var(--dt-float-shadow) !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-modal-backdrop,
.dt-settings-overlay,
.dt-master-overlay,
.dt-alarm-overlay {
  background: transparent !important;
  backdrop-filter: blur(var(--dt-backdrop-blur)) saturate(115%) !important;
  -webkit-backdrop-filter: blur(var(--dt-backdrop-blur)) saturate(115%) !important;
}

/* As opções de reação da mídia moram DENTRO do card "Silenciar mídia no
   Modo Foco" e só aparecem com o silenciamento ligado; por isso não têm
   caixa própria, apenas uma linha separando do cabeçalho do card. */
.dt-focus-silence-options {
  margin: 13px 0 0;
  padding: 13px 0 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
}

.dt-focus-silence-options p {
  margin: 9px 2px 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.dt-project-shell { border-radius: var(--dt-radius-lg) !important; }
.dt-project-header { background: transparent !important; }
.dt-task-card { border-radius: var(--dt-radius-md) !important; }

/* Inline legacy panels now inherit the same translucent recipe instead of opaque blocks. */
.dt-app-root :is(
  .dt-project-shell,
  .dt-task-card,
  .dt-darktask-card,
  .dt-section-header,
  .dt-section-empty,
  .dt-empty-state,
  .dt-audio-note-panel,
  .dt-hydration-card
) :is([style*="background:var(--panel)"], [style*="background:var(--panel-2)"]) {
  border-color: var(--dt-edge) !important;
  background: var(--dt-surface-hover) !important;
}

:is(.dt-project-action, .dt-section-actions button, .dt-quick-action, .dt-media-station-btn, .dt-media-play-toggle) {
  border-radius: var(--dt-radius-xs) !important;
}

.dt-quick-actions {
  right: calc(var(--dt-shell-gap) + 2px) !important;
  bottom: 170px !important;
}

.dt-quick-action {
  border: 1px solid var(--dt-edge) !important;
  background: var(--dt-surface-strong) !important;
  box-shadow: var(--dt-float-shadow) !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-page-tail footer {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tipografia: mora em base.css. A regra que forçava peso 300 em todo
   elemento (e apagava títulos, botões e negrito) saiu em 12/09/2026. */

/* O negrito precisava ser mais pesado que o texto em volta — e estava MAIS
   LEVE. A regra acima usa `:where()`, que não pontua especificidade nenhuma,
   e por isso perdia para o `body *:not(.ti)` logo antes dela, que zera tudo em
   300. O resultado: `**assim**` saía num traço mais fino que o parágrafo, e
   parecia que a formatação não tinha funcionado.

   500 e não 700: o corpo do app é 300 e os títulos são 600. Um 700 no meio de
   um parágrafo é um degrau que não existe em nenhum outro lugar da interface. */

.ti,
.dt-tabler-icon {
  width: var(--dt-icon-width, 1em);
  min-width: var(--dt-icon-width, 1em);
  height: var(--dt-icon-height, 1em);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: 'tabler-icons' !important;
  font-size: var(--dt-icon-size, 1em) !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1 !important;
  speak: never;
}

.dt-sidebar-nav-item .ti { color: var(--faint); }
.dt-sidebar-nav-item:hover .ti,
.dt-sidebar-nav-item:focus-visible .ti,
.dt-sidebar-nav-item[aria-pressed="true"] .ti,
.dt-sidebar-nav-item[aria-current="true"] .ti { color: var(--accent-text); }

/* A receita de vidro que apagava o fundo de todo cartão, modal, campo e
   barra ([class*="-card"] e companhia) saiu em 12/09/2026. Superfície tem
   preenchimento (tokens.css); o vidro ficou para o fundo dos modais. */
body :is(.dt-modal-backdrop, .dt-settings-overlay, .dt-master-overlay, .dt-alarm-overlay, [class$="-overlay"], [class*="-overlay "]) {
  background: var(--scrim) !important;
  backdrop-filter: blur(var(--dt-backdrop-blur)) !important;
  -webkit-backdrop-filter: blur(var(--dt-backdrop-blur)) !important;
}

html:has(.dt-login-shell),
body:has(.dt-login-shell),
.dt-login-shell {
  background: var(--bg, #050505) !important;
  background-image: none !important;
}

/* Project sections: quiet hover and unboxed icons. */
.dt-section-header,
.dt-section-header:hover {
  background: transparent !important;
  border-color: var(--dt-edge) !important;
  box-shadow: none !important;
  transform: none !important;
}

.dt-section-header:hover { border-color: var(--dt-edge-strong) !important; }
.dt-section-toggle:hover { background: transparent !important; color: var(--text); }

.dt-section-icon,
.dt-section-actions {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dt-section-actions > button,
.dt-section-actions > button:hover,
.dt-section-actions > button + button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dt-section-actions > button:hover { color: var(--accent-text) !important; }
.dt-section-actions > button:last-child:hover { color: var(--danger) !important; }

/* Dark/Light final: nenhuma superficie projeta sombra. */
body *,
body *::before,
body *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

html body #dc-root *,
html body .dt-app-root *,
html body #dt-auth *,
html body .dl-modal-overlay *,
html body .dt-system-dialog-backdrop *,
html body .dt-onboarding-overlay *,
html body #dt-sino,
html body #dt-notif {
  box-shadow: none !important;
  text-shadow: none !important;
}


::selection {
  background: color-mix(in srgb, var(--accent, #FF3D81) 76%, #FCFCFC 8%);
  color: var(--on-accent, #050505);
}

::-moz-selection {
  background: var(--accent, #FF3D81);
  color: var(--on-accent, #050505);
}

/* Dez cores fixas, sem color picker.
 *
 * As dez ficam na mesma linha: quebradas em duas fileiras de cinco, a segunda
 * lia como um segundo grupo de cores, e não como a continuação do primeiro. A
 * fileira inteira mede 518px (10 x 38 + 9 x 12 + 30 de recuo) e cabe folgada
 * nos 880px de largura útil do conteúdo das Configurações. Só no celular, onde
 * não cabe, ela volta a ser cinco por linha. */
.dt-accent-options {
  display: grid;
  grid-template-columns: repeat(10, 38px);
  gap: 12px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--dt-edge);
  border-radius: var(--dt-radius-sm);
  background: transparent;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

.dt-accent-options button {
  appearance: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--dt-edge-strong);
  border-radius: 11px;
  background: var(--dt-swatch) !important;
  cursor: pointer;
  outline: 0;
}

.dt-accent-options button[aria-checked="true"] {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .dt-accent-options { grid-template-columns: repeat(5, 38px); }
}

/* Configuracoes com altura previsivel e rolagem interna. */
.dt-settings-modal {
  height: min(680px, calc(100dvh - 48px)) !important;
  max-height: calc(100dvh - 48px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.dt-settings-modal > div:last-child {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Modais dos espacos colaborativos e dialogos do sistema usam a mesma
   receita da barra de avisos: fundo sem cor, super blur e borda suave. */
.dl-modal-overlay,
.dt-system-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: transparent !important;
  backdrop-filter: blur(var(--dt-backdrop-blur)) saturate(115%) !important;
  -webkit-backdrop-filter: blur(var(--dt-backdrop-blur)) saturate(115%) !important;
}

.dl-modal-dialog,
.dt-system-dialog {
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--dt-edge-strong) !important;
  border-radius: var(--dt-radius-md) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text);
  box-shadow: none !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

.dl-system-modal-header,
.dt-system-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--dt-edge);
  background: transparent !important;
}

.dl-system-modal-header h3,
.dt-system-dialog h2 {
  margin: 0;
  color: var(--text);
  font: 400 17px/1.3 'Inter', sans-serif;
}

.dl-system-modal-body { padding: 20px; }
.dl-system-modal-body form { max-width: none !important; }

.dt-system-dialog { padding: 0 20px 20px; }
.dt-system-dialog > header { margin: 0 -20px 18px; }
.dt-system-dialog-message { margin: 0 0 22px; color: var(--muted); font: 400 13.5px/1.55 'Inter', sans-serif; }
.dt-system-dialog footer { display: flex; justify-content: flex-end; gap: 10px; }
.dt-system-dialog button { min-height: 40px; padding: 0 16px; border-radius: 11px; font: 400 13px 'Inter', sans-serif; cursor: pointer; }
.dt-system-dialog-cancel { border: 1px solid var(--dt-edge-strong); background: transparent; color: var(--text); }
.dt-system-dialog-confirm { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); }

/* Remove os azuis opacos ainda embutidos nos modulos antigos. */
:is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) :is(
  .dl-hero, .dl-card, .dl-tabs, .dl-item-row, .dl-sidebar-box,
  .dl-modal-dialog, form, input, textarea, select, details, summary,
  [style*="background:#"], [style*="background: #"],
  [style*="background:var(--panel"], [style*="background-color:var(--panel"]
) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--dt-edge) !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

:is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) :is(.dl-btn-primary, .dl-create-primary) {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border-color: var(--accent) !important;
}

:is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) :is(.dl-btn-secondary, .dl-btn-danger, .dl-quiet-action) {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--dt-edge-strong) !important;
}

:is(#darklist-container, #socialmedia-container, #surveys-container, .dl-modal-overlay) select option {
  background: #050505 !important;
  color: #F5F5F5 !important;
}

/* Menus compactos: Projeto e o componente de referencia. */
:is(.dt-project-actions, .dt-section-actions, .dt-task-actions) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--dt-edge) !important;
  border-radius: 11px !important;
  background: transparent !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

:is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button,
:is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button + button {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--muted) !important;
}

:is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:hover { color: var(--accent-text) !important; }
:is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:last-child:hover { color: var(--accent-text) !important; }

/* Clima: o botao de atualizar nao herda a largura dos CTAs do modulo. */
.dt-weather-popover button[title="Atualizar clima"] {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  flex: 0 0 28px !important;
  border: 1px solid var(--dt-edge) !important;
  background: transparent !important;
  color: var(--accent-text) !important;
}

html body #dc-root .dt-weather-popover,
html body .dt-app-root .dt-weather-popover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--dt-edge) !important;
  box-shadow: none !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%) !important;
}

/* Clima expandido: uma única moldura externa. As superfícies internas
   continuam organizando o conteúdo sem acumular contornos concêntricos. */
html body .dt-weather-popover .dt-weather-popover-head,
html body .dt-weather-popover .dt-weather-popover-heading,
html body .dt-weather-popover .dt-weather-popover-location,
html body .dt-weather-popover .dt-weather-popover-actions {
  border: 0 !important;
  box-shadow: none !important;
}

html body .dt-weather-popover .dt-weather-popover-head,
html body .dt-weather-popover .dt-weather-popover-heading,
html body .dt-weather-popover .dt-weather-popover-actions {
  background: transparent !important;
}

html body .dt-weather-popover .dt-weather-popover-location {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .dt-weather-popover .dt-weather-popover-actions button,
html body .dt-weather-popover button[title="Atualizar clima"] {
  border: 0 !important;
  box-shadow: none !important;
}

html body .dt-weather-popover .dt-weather-popover-actions button:hover,
html body .dt-weather-popover .dt-weather-popover-actions button:focus-visible {
  border: 0 !important;
}

/* Clima expandido: sensação térmica, umidade e os três dias de previsão
   ficam cada um em sua própria caixinha com contorno visível. */
html body .dt-weather-popover .dt-weather-metric,
html body .dt-weather-popover .dt-weather-forecast-card {
  border: 1px solid var(--dt-edge) !important;
  border-radius: var(--dt-radius-sm, 12px) !important;
  background: var(--dt-surface) !important;
}

/* Linha do tempo: rotinas retas e separacao visual exata de 1px. */
.dt-timeline-routine {
  border-radius: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--bg) !important;
  box-sizing: border-box !important;
  transform: none !important;
}

.dt-calendar-timeline-event { border-radius: 0 !important; box-shadow: none !important; }

/* O sino nunca compete com um modal aberto. */
body:has(.dt-modal-backdrop, .dt-settings-overlay, .dl-modal-overlay, .dt-system-dialog-backdrop) #dt-sino,
body:has(.dt-modal-backdrop, .dt-settings-overlay, .dl-modal-overlay, .dt-system-dialog-backdrop) #dt-notif,
body:has(.dt-modal-backdrop, .dt-settings-overlay, .dl-modal-overlay, .dt-system-dialog-backdrop) .dt-notice-host {
  z-index: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1180px) {
  :root { --dt-sidebar-width: 232px; }
  .dt-sidebar { padding-inline: 12px !important; }
  .dt-sidebar-nav-item { padding-inline: 10px; font-size: 12px; }
  .dt-media-spectrum-shell { display: none !important; }
}

@media (max-width: 900px) {
  :root { --dt-shell-gap: 10px; --dt-sidebar-width: 0px; }

  .dt-app-root { padding-bottom: 164px; }

  .dt-sidebar {
    inset: calc(10px + env(safe-area-inset-top)) 10px auto 10px;
    width: auto !important;
    height: 64px;
    padding: 7px !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    border-radius: 20px;
    overflow: hidden;
    transition: height .24s ease, padding .24s ease, border-radius .24s ease;
  }

  .dt-sidebar > .dt-status-cluster,
  .dt-sidebar > .dt-sidebar-nav,
  .dt-sidebar > .dt-sidebar-footer,
  .dt-sidebar > .dt-sidebar-spacer,
  .dt-sidebar > .dt-save-indicator { display: none !important; }

  .dt-sidebar > a {
    order: 1 !important;
    width: auto !important;
    max-width: calc(100% - 64px) !important;
    height: 50px;
    min-height: 50px;
    margin: 0 !important;
    margin-right: auto !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden;
    border: 0 !important;
  }

  .dt-sidebar > a img[data-system-logo] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    margin-right: auto !important;
  }

  .dt-mobile-menu-toggle {
    appearance: none;
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    order: 2 !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    flex: none;
    padding: 0;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-size: 0 !important;
    cursor: pointer;
  }

  .dt-sidebar.dt-topbar > .dt-mobile-menu-toggle:last-child {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    font-size: 0 !important;
  }

  .dt-sidebar:not(.is-mobile-open) > #dt-sino { display: none !important; }

  .dt-mobile-menu-icon {
    width: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .dt-mobile-menu-icon i {
    width: 100%;
    height: 1.5px;
    display: block;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }

  .dt-sidebar.is-mobile-open {
    height: min(78vh, 650px);
    padding: 14px !important;
    gap: var(--dt-sidebar-section-gap) !important;
    flex-direction: column;
    align-items: stretch !important;
    border-radius: var(--dt-radius-lg);
  }

  .dt-sidebar.is-mobile-open .dt-mobile-menu-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0;
    margin-left: 0 !important;
    font-size: 0 !important;
    background: var(--dt-surface-hover);
  }

  .dt-sidebar.dt-topbar.is-mobile-open > .dt-mobile-menu-toggle:last-child {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    font-size: 0 !important;
  }

  .dt-sidebar.is-mobile-open .dt-mobile-menu-icon i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .dt-sidebar.is-mobile-open .dt-mobile-menu-icon i:nth-child(2) { opacity: 0; }
  .dt-sidebar.is-mobile-open .dt-mobile-menu-icon i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  .dt-sidebar.is-mobile-open > a {
    order: 1 !important;
    width: calc(100% - 52px) !important;
    max-width: calc(100% - 52px) !important;
    min-height: 44px;
    height: 44px;
    padding: 2px 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--dt-edge);
  }

  .dt-sidebar.is-mobile-open > a img[data-system-logo] {
    width: auto !important;
    max-width: 180px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    margin-right: auto !important;
  }

  .dt-sidebar.is-mobile-open > .dt-status-cluster {
    order: 2 !important;
    width: 100%;
    display: grid !important;
  }

  .dt-sidebar.is-mobile-open .dt-datetime-status,
  .dt-sidebar.is-mobile-open .dt-weather-button {
    width: 100%;
    height: 58px !important;
  }

  .dt-sidebar.is-mobile-open > .dt-sidebar-nav {
    order: 3 !important;
    min-height: 0;
    display: flex !important;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    gap: var(--dt-sidebar-item-gap) !important;
    padding: 0 2px var(--dt-sidebar-item-gap) !important;
  }

  .dt-sidebar.is-mobile-open .dt-sidebar-nav-item {
    min-height: 44px;
    margin: 0 !important;
    padding-block: 10px !important;
    flex: none;
  }

  .dt-sidebar.is-mobile-open > .dt-sidebar-bottom-nav {
    order: 4 !important;
    flex: none !important;
    overflow-y: visible !important;
    padding: 0 2px !important;
  }

  .dt-sidebar.is-mobile-open > button:not(.dt-mobile-menu-toggle) {
    order: 5 !important;
    flex: none;
  }

  .dt-sidebar.is-mobile-open > #dt-sino { order: 5 !important; }

  .dt-sidebar.is-mobile-open > .dt-sidebar-footer {
    order: 6 !important;
    display: block !important;
    flex: none;
  }

  .dt-sidebar .dt-weather-popover {
    position: fixed !important;
    inset: calc(84px + env(safe-area-inset-top)) 10px auto 10px !important;
    width: auto !important;
    max-height: calc(100vh - 258px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .dt-sidebar:has(.dt-weather-popover) { overflow: visible; }

  .dt-notice-host,
  .dt-page-content,
  .dt-page-tail {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .dt-notice-host {
    top: calc(84px + env(safe-area-inset-top));
    margin-top: calc(84px + env(safe-area-inset-top));
  }
  .dt-page-content { padding-inline: 4px !important; }

  .dt-timeline-dock {
    position: fixed !important;
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 35 !important;
  }

  /* Quem rola no celular é só a trilha. O cabeçalho fica parado, com "LINHA DO
     TEMPO" numa ponta e "agora HH:MM · Add Rotina" na outra, como no desktop:
     empurrar os dois para fora da tela junto com as 24 horas escondia
     justamente a informação que não depende de rolagem. */
  .dt-timeline-inner { overflow: visible; }
  .dt-timeline-head { width: 100%; min-width: 0; flex-wrap: nowrap !important; }
  /* "agora HH:MM" e o botão vão para a outra ponta, como no desktop. O espaçador
     do template é escondido no celular por app-polish.css, então quem empurra é
     a margem automática. */
  .dt-timeline-head .dt-timeline-now { margin-left: auto !important; margin-right: 0 !important; }
  .dt-timeline-head .dt-timeline-action { margin-left: 8px; flex: none; }
  .dt-timeline-scroll {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .dt-timeline-scroll::-webkit-scrollbar { display: none; }
  .dt-timeline-track { min-width: 960px; }
  .dt-media-bar { overflow-x: auto !important; }
  .dt-quick-actions { right: 12px !important; bottom: 150px !important; }
  .dt-page-tail footer { padding-bottom: 158px !important; }

  .dt-toast-notification {
    bottom: calc(154px + env(safe-area-inset-bottom)) !important;
    width: max-content;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 560px) {
  .dt-alert-content { justify-content: flex-start; padding-left: 12px; padding-right: 46px; overflow: hidden; }
  .dt-alert-content > span { min-width: 0; }
  .dt-timeline-inner { padding-inline: 12px !important; }
  .dt-media-bar { gap: 8px !important; }
  .dt-media-volume { display: none !important; }
  .dt-weather-metrics { grid-template-columns: 1fr !important; }
  .dt-sidebar .dt-weather-popover { padding: 20px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-sidebar-nav-item,
  .dt-sidebar-profile,
  .dt-sidebar-settings,
  .dt-sidebar { transition: none; }
}

/* Linha do tempo, Social Media e feedbacks: refinamentos finais. */
.dt-toast-notification {
  z-index: 2147483000 !important;
  background: transparent !important;
  backdrop-filter: blur(var(--dt-blur)) saturate(145%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(145%) !important;
}

.sm-tab-count {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin-left: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 400 10px/1 Inter, sans-serif;
}
.dl-tab-btn.active .sm-tab-count {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: var(--accent-weak);
  color: var(--accent-text);
}

#socialmedia-container .sm-toolbar-end {
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
#socialmedia-container .sm-status-select {
  height: 40px;
  min-width: 190px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
}
#socialmedia-container .sm-status-select > span {
  font: 400 10px/1 Inter, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
#socialmedia-container .sm-status-select select {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: 400 12px/1 Inter, sans-serif;
  cursor: pointer;
}
#socialmedia-container .sm-status-select option {
  background: var(--bg-elev);
  color: var(--text);
}
#socialmedia-container .sm-toolbar-end .sm-search-field {
  margin: 0 !important;
}

#sm-content-overlay {
  align-items: flex-start !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
#sm-content-overlay .sm-content-dialog {
  max-height: none !important;
  margin: auto !important;
  overflow: visible !important;
}
#sm-content-overlay .sm-content-form {
  overflow: visible !important;
}
.sm-upload-progress {
  margin-top: 8px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.sm-upload-progress[hidden] { display: none !important; }
.sm-upload-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 400 11px/1.2 Inter, sans-serif;
}
.sm-upload-progress strong { color: var(--accent-text); font-weight: 400; }
.sm-upload-progress > i {
  height: 5px;
  margin-top: 8px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}
.sm-upload-progress > i > b {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
  transition: width .16s linear;
}

.dt-timeline-settings-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.dt-timeline-settings-options button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font: 400 11.5px/1.3 Inter, sans-serif;
  cursor: pointer;
}
.dt-timeline-settings-options button[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--accent-weak);
  color: var(--text);
}
.dt-timeline-settings-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: transparent;
}
.dt-timeline-settings-card + .dt-timeline-settings-card { margin-top: 14px; }
.dt-timeline-settings-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.dt-timeline-settings-heading h4 { margin: 0; color: var(--text); font: 400 16px/1.25 Inter, sans-serif; }
.dt-timeline-settings-heading p { margin: 4px 0 0; color: var(--muted); font: 400 12px/1.45 Inter, sans-serif; }
.dt-routine-settings-list { display: flex; flex-direction: column; gap: 8px; }
.dt-routine-settings-row {
  min-width: 0;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.dt-routine-settings-row > div { min-width: 0; flex: 1; }
.dt-routine-settings-row strong { display: block; overflow: hidden; color: var(--text); font: 400 13px/1.3 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.dt-routine-settings-row small { display: block; margin-top: 3px; color: var(--muted); font: 400 10.5px/1.3 Inter, sans-serif; }
.dt-routine-settings-row button,
.dt-timeline-settings-heading button {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: 400 11.5px/1 Inter, sans-serif;
  cursor: pointer;
}

.dt-timeline-head,
.dt-timeline-track {
  width: 100%;
  min-width: 100%;
}

@media (max-width: 900px) {
  #socialmedia-container .sm-toolbar-end {
    width: 100%;
    flex-wrap: wrap;
  }
  #socialmedia-container .sm-status-select { flex: 1 1 180px; }
  #socialmedia-container .sm-toolbar-end .sm-search-field { flex: 1 1 240px !important; }
  /* Só a trilha ganha largura de 24 horas; o cabeçalho acompanha a tela. */
  .dt-timeline-track {
    width: 960px;
    min-width: 960px;
    margin-inline: 0;
  }
}

@media (max-width: 560px) {
  .dt-timeline-settings-options { grid-template-columns: 1fr; }
  #socialmedia-container .sm-status-select,
  #socialmedia-container .sm-toolbar-end .sm-search-field { flex-basis: 100% !important; max-width: none !important; }
}

/* ==========================================================================
   DARK / LIGHT — camada temática final

   A cor de contraste NÃO pertence a esta camada. Ela é escolhida pela pessoa
   em Configurações e aplicada por applyTheme (app-fixes.js) diretamente em
   html, body e na raiz do app. Enquanto estes blocos declaravam
   `--accent: #FF3D81 !important`, um !important de folha de estilo vencia a
   variável inline: a cor escolhida ficava gravada na conta e visível no seletor,
   mas a interface inteira continuava rosa. Era o motivo de a cor exibida nunca
   bater com a selecionada.

   Mantenha aqui apenas o que não é configurável: fundo, texto, linhas e
   sombras. `--accent`, `--accent-2`, `--accent-weak`, `--on-accent`, `--ok` e
   `--danger` são responsabilidade do applyTheme.
   ========================================================================== */

/* As paletas moram em tokens.css desde 12/09/2026. Aqui fica só o
   color-scheme, que decide a cor dos controles nativos. */
[data-dt-theme="dark"], [data-dt-theme="graphite"] { color-scheme: dark; }
[data-dt-theme="light"] { color-scheme: light; }

html[data-dt-theme="light"],
html[data-dt-theme="light"] body,
body[data-dt-theme="light"],
[data-dt-theme="light"].dt-app-root {
  background-color: var(--bg, #F4F5F7) !important;
  color: var(--text, #121418) !important;
}

[data-dt-theme="light"] :is(.dt-topbar, .dt-sidebar, .dt-alert-bar, .dt-settings-modal, .dt-task-editor, .dt-view-modal) {
  border-color: var(--line-2) !important;
}

[data-dt-theme="light"] :is(button[role="switch"] > span, .dt-ai-toggle-knob) {
  background: var(--text) !important;
}

[data-dt-theme="light"] :is([style*="background:rgba(6,7,9,0.72)"], [style*="background:rgba(10,11,13,0.72)"]) {
  color: var(--text) !important;
}

[data-dt-theme="light"] select option,
body[data-dt-theme="light"] select option {
  background: #FCFCFC !important;
  color: #121418 !important;
}

/* A barra de avisos tinha variáveis escuras inline, que deixavam o texto
   quase branco sobre o fundo claro. No Light ela usa tinta escura dedicada. */
[data-dt-theme="light"] .dt-notice-host {
  --text: #171A1F !important;
  --muted: #444B54 !important;
  --faint: #727A84 !important;
  --tfg: #171A1F !important;
  --tlabel: #606873 !important;
  --tsub: #444B54 !important;
  --tsep: rgba(17,20,24,.07) !important;
}

[data-dt-theme="light"] .dt-alert-content { color: #171A1F !important; }

/* Nenhuma superfície clara usa branco absoluto. */
[data-dt-theme="light"] :is(
  [style*="background:#fff" i],
  [style*="background: #fff" i],
  [style*="background-color:#fff" i],
  [style*="background-color: #fff" i]
) { background-color: #FCFCFC !important; }

/* Autenticação acompanha o tema selecionado e o contraste ativo. */
html body #dt-auth {
  background: var(--bg, #050505) !important;
  color: var(--text, #F5F5F5) !important;
}

html body #dt-auth .dt-auth-card {
  background: transparent !important;
  border-color: var(--line-2) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html body #dt-auth :is(p.dt-auth-sub, label, button.dt-auth-link) { color: var(--muted) !important; }
html body #dt-auth .dt-auth-foot { color: var(--faint) !important; }

html body #dt-auth input {
  background: transparent !important;
  border-color: var(--line-2) !important;
  color: var(--text) !important;
}

html body #dt-auth input:focus {
  border-color: var(--accent) !important;
  outline: 1px solid var(--accent) !important;
  outline-offset: 1px;
}

html body #dt-auth button.dt-auth-go {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

html body #dt-auth :is(.dt-auth-msg.ok, .dt-auth-convite) {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent) !important;
  color: var(--accent-text) !important;
}

html body #dt-auth .dt-auth-msg.err {
  border-color: var(--line-2) !important;
  color: var(--text) !important;
}

/* Seletor compacto de tema em Aparência. */
.dt-theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
}

.dt-theme-options > button {
  min-width: 0;
  min-height: 70px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px;
  background: transparent !important;
  color: var(--muted);
  cursor: pointer;
}

.dt-theme-options > button[aria-checked="true"] {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

.dt-theme-preview {
  width: 58px;
  height: 38px;
  flex: none;
  padding: 7px;
  display: grid;
  grid-template-columns: 12px 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 4px;
  border: 1px solid rgba(127,127,127,.2);
  border-radius: 9px;
  overflow: hidden;
}

.dt-theme-preview.is-dark { background: #050505; }
.dt-theme-preview.is-graphite { background: #22252A; }
.dt-theme-preview.is-light { background: #F4F5F7; }
.dt-theme-preview i { display: block; border-radius: 3px; }
.dt-theme-preview i:first-child { grid-row: 1 / 3; background: color-mix(in srgb, var(--accent) 72%, transparent); }
.dt-theme-preview.is-dark i:not(:first-child) { background: rgba(255,255,255,.13); }
.dt-theme-preview.is-graphite i:not(:first-child) { background: rgba(255,255,255,.2); }
.dt-theme-preview.is-light i:not(:first-child) { background: rgba(17,20,24,.12); }

.dt-zoom-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
}

.dt-zoom-options > button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: 400 12.5px/1 Inter, sans-serif;
  cursor: pointer;
}

.dt-zoom-options > button:hover { color: var(--text); background: var(--accent-weak); }
.dt-zoom-options > button[aria-checked="true"] {
  border-color: var(--line);
  background: var(--accent-weak);
  color: var(--text);
}

/* Lista Compartilhável: todos os diálogos herdam o tema da aplicação e usam
   exatamente a mesma receita transparente/super-blur do restante do sistema. */
html body .dt-app-root .dl-modal-overlay {
  background: transparent !important;
  backdrop-filter: blur(var(--dt-backdrop-blur, 16px)) saturate(115%) !important;
  -webkit-backdrop-filter: blur(var(--dt-backdrop-blur, 16px)) saturate(115%) !important;
}

html body .dt-app-root .dl-modal-overlay .dl-modal-dialog {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%) !important;
  -webkit-backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%) !important;
}

html body .dt-app-root .dl-modal-overlay .dl-standard-modal-header,
html body .dt-app-root .dl-modal-overlay .dl-system-modal-header,
html body .dt-app-root .dl-modal-overlay .dl-modal-dialog > div:first-child {
  min-height: 58px;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  color: var(--text) !important;
}

html body .dt-app-root .dl-modal-overlay :is(.dl-standard-modal-body, .dl-standard-modal-form, .dl-system-modal-body) {
  padding: 20px !important;
  background: transparent !important;
}

html body .dt-app-root .dl-modal-overlay .dl-standard-modal-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

html body .dt-app-root .dl-modal-overlay :is(.dl-input, input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  min-height: 42px;
  border: 1px solid var(--line-2) !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

html body .dt-app-root .dl-modal-overlay textarea.dl-input { min-height: 88px; }

html body .dt-app-root .dl-modal-overlay :is(.dl-input, input, textarea, select):focus {
  border-color: var(--accent) !important;
  outline: 1px solid var(--accent) !important;
  outline-offset: 1px;
}

html body .dt-app-root .dl-modal-overlay input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
html body .dt-app-root .dl-modal-overlay input[type="number"]::-webkit-inner-spin-button,
html body .dt-app-root .dl-modal-overlay input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

html body .dt-app-root .dl-modal-overlay :is(.dl-btn-primary, .dl-btn-secondary, .dl-btn-danger) {
  min-height: 42px;
  padding: 0 16px !important;
  border-radius: 11px !important;
  font: 400 13px/1 'Inter', sans-serif !important;
}

html body .dt-app-root .dl-modal-overlay .dl-btn-primary {
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
}

html body .dt-app-root .dl-modal-overlay :is(.dl-btn-secondary, .dl-btn-danger) {
  border: 1px solid var(--line-2) !important;
  background: transparent !important;
  color: var(--text) !important;
}

html body .dt-app-root .dl-modal-overlay :is(.dl-btn-secondary, .dl-btn-danger):hover {
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
  background: var(--accent-weak) !important;
}

html body .dt-app-root .dl-modal-overlay .dl-btn-close-modal {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--muted) !important;
}

html body .dt-app-root .dl-modal-overlay .dl-btn-close-modal:hover { color: var(--accent-text) !important; }
html body .dt-app-root .dl-modal-overlay input[type="checkbox"] { accent-color: var(--accent); }

@media (max-width: 560px) {
  .dt-theme-options { grid-template-columns: 1fr; }
  html body .dt-app-root .dl-modal-overlay { padding: 10px !important; }
  html body .dt-app-root .dl-modal-overlay .dl-modal-dialog { border-radius: 15px !important; }
  html body .dt-app-root .dl-standard-modal-actions { flex-direction: column; }
}

/* Dica curta abaixo de um campo de formulário do Social Media. */
.sm-field-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--faint);
}

/* ==========================================================================
   Planejamentos do Social Media — a camada mensal entre projeto e conteúdos.
   Chips horizontais acima dos filtros; o selecionado delimita lista e números.
   ========================================================================== */
.sm-planning-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel);
}
.sm-planning-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 2px;
}
.sm-planning-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sm-planning-chip:hover { border-color: var(--accent); color: var(--text); }
.sm-planning-chip.active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--text);
}
.sm-planning-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  font-size: 10.5px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
}
.sm-planning-chip.active .sm-planning-count { border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-text); }
.sm-planning-edit {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 6px;
  color: var(--accent-text);
}
.sm-planning-edit:hover { background: var(--panel-2); }
.sm-planning-new { border-style: dashed; color: var(--faint); }
.sm-planning-new:hover { color: var(--accent-text); }
.sm-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
/* No celular a barra rola na horizontal em vez de empilhar chip por chip. */
@media (max-width: 640px) {
  .sm-planning-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sm-planning-bar::-webkit-scrollbar { display: none; }
  .sm-planning-chip { flex: none; white-space: nowrap; }
  .sm-planning-label { display: none; }
}

/* ==========================================================================
   Aniversário: a data no perfil, a contagem regressiva e a festa do dia.

   Vai no fim do arquivo de propósito. styles.css e app-polish.css carregam
   antes e têm blocos antigos com !important; regra nova de aparência que
   nasce no meio some sem aviso.
   ========================================================================== */

.dt-profile-birthline {
  margin-top: 3px;
  color: var(--accent-text);
  font-size: 12.5px;
}

/* O seletor à esquerda e o número à direita, na mesma caixa: a data é o que a
   pessoa mexe, a contagem é o que ela olha. Separar em dois cartões faria o
   número parecer um dado solto, sem origem à vista. */
.dt-birthday-box {
  margin: 0 0 22px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  align-items: center;
  gap: 16px;
  border: 1px solid var(--dt-edge, var(--line));
  border-radius: var(--dt-radius-sm, 14px);
  background: transparent;
  backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%);
}

.dt-birthday-field { min-width: 0; display: block; cursor: pointer; }
.dt-birthday-field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}
.dt-birthday-field > input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dt-birthday-field > input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
/* O indicador do calendário é um controle nativo do Chrome.
 *
 * O `invert(1)` que havia aqui vinha de quando a página não declarava
 * `color-scheme`. Hoje ela declara — dark, graphite e light cada um com o seu —
 * e o navegador já desenha o glifo na polaridade certa. Inverter de novo
 * pintava um glifo claro de escuro sobre um campo escuro: o botão existia e
 * ninguém o via.
 *
 * O hover também é do navegador, e é um retângulo cinza que não é a linguagem
 * do app. Aqui ele passa a usar a mesma superfície de toque do resto. */
.dt-birthday-field > input::-webkit-calendar-picker-indicator {
  padding: 3px;
  border-radius: 7px;
  opacity: .55;
  cursor: pointer;
  transition: opacity .16s ease, background-color .16s ease;
}

.dt-birthday-field > input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--dt-toque);
}

.dt-birthday-count {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line-2);
  text-align: right;
}
.dt-birthday-count strong {
  display: block;
  color: var(--accent-text);
  font: 400 40px/1 'JetBrains Mono', monospace;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.dt-birthday-count span {
  display: block;
  margin-top: 5px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .dt-birthday-box { grid-template-columns: minmax(0, 1fr); }
  .dt-birthday-count {
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-2);
    text-align: left;
  }
}

/* A festa do dia. O cartão é o mesmo vidro dos outros modais do app; o que
   muda é o número gigante da idade atrás do texto, na mesma ideia da marca
   d'água dos topos. */
.dt-birthday-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%);
  animation: dt-fade .2s ease;
}
.dt-birthday-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  padding: 30px 28px 26px;
  border: 1px solid var(--dt-edge-strong, var(--line-2));
  border-radius: var(--dt-radius-lg, 24px);
  background: var(--bg-elev);
  text-align: center;
  animation: dt-scaleIn .28s ease;
}
.dt-birthday-age {
  position: absolute;
  right: 14px;
  top: -34px;
  color: color-mix(in srgb, var(--accent) 12%, transparent);
  font: 800 clamp(96px, 22vw, 150px) 'Space Grotesk', sans-serif;
  letter-spacing: -.08em;
  pointer-events: none;
}
.dt-birthday-card h2 {
  position: relative;
  margin: 0 0 10px;
  color: var(--text);
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.dt-birthday-card p {
  position: relative;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.dt-birthday-card button {
  position: relative;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 13px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  cursor: pointer;
}


/* ==========================================================================
   Acordeão das agendas, em Configurações > Linha do tempo.

   O formulário de iCal tem dois campos largos, uma lista e quatro botões por
   agenda conectada. Aberto por padrão, ele empurrava as Rotinas — que são o
   que se edita toda semana — para fora da primeira tela. Agora as Rotinas vêm
   primeiro e as agendas ficam recolhidas atrás de uma linha só.
   ========================================================================== */

.dt-accordion { padding: 0; }

.dt-accordion-head {
  width: 100%;
  min-height: 62px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease;
}
.dt-accordion-head:hover,
.dt-accordion-head:focus-visible { background: var(--dt-surface-hover, var(--accent-weak)); outline: none; }

.dt-accordion-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dt-accordion-title { color: var(--text); font-size: 16px; line-height: 1.25; }
.dt-accordion-copy small { color: var(--muted); font-size: 12px; line-height: 1.45; }

.dt-accordion-chevron {
  flex: none;
  color: var(--faint);
  transition: transform .2s ease, color .16s ease;
}
.dt-accordion-head[aria-expanded="true"] .dt-accordion-chevron {
  transform: rotate(180deg);
  color: var(--accent-text);
}

.dt-accordion-body {
  padding: 2px 16px 16px;
  border-top: 1px solid var(--line);
  animation: dt-fade .22s ease;
}
/* O "Sincronizar tudo" morava no cabeçalho. Ali dentro do botão do acordeão
   ele viraria um botão dentro de outro, o que o HTML não permite. */
.dt-accordion-actions {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0;
}


/* Caixa "Instalar o app", em Configurações > Dados. Mesma linha do bloco de
   permissões logo abaixo: ícone, texto e ação, numa faixa só. */
.dt-install-card {
  margin-bottom: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--dt-edge, var(--line-2));
  border-radius: var(--dt-radius-sm, 14px);
  background: transparent;
  backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur, 28px)) saturate(135%);
}
.dt-install-icon { flex: none; display: inline-flex; color: var(--accent-text); }
.dt-install-copy { flex: 1; min-width: 0; }
.dt-install-copy strong { display: block; color: var(--text); font-size: 14px; }
.dt-install-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dt-install-btn {
  flex: none;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  cursor: pointer;
  transition: filter .16s ease;
}
.dt-install-btn:hover { filter: brightness(1.07); }
.dt-install-done {
  flex: none;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent-text);
  font-size: 11.5px;
}

@media (max-width: 520px) {
  .dt-install-card { flex-wrap: wrap; }
  .dt-install-copy { flex: 1 1 100%; order: 2; }
  .dt-install-btn { order: 3; width: 100%; }
}


/* ==========================================================================
   Celular: o menu com o logotipo desce para o rodapé.

   Ele nascia colado no topo, e no topo é onde o polegar não alcança em
   telefone grande. Agora a ordem de baixo para cima é: menu, linha do tempo,
   conteúdo — e a faixa de avisos ocupa o topo, que ficou livre.

   Todas as distâncias saem de --dt-mobile-bar-space. Mudar a altura da barra
   é mudar um número só; foi por espalhar 84, 150, 154 e 158 pelo arquivo que
   a versão anterior tinha quatro medidas que precisavam concordar e não
   concordavam.
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --dt-mobile-bar-h: 64px;
    /* a barra mais a folga que ela guarda para a linha do tempo */
    --dt-mobile-bar-space: 74px;
  }

  /* O menu recolhido, ancorado embaixo. Aberto, ele cresce para cima sozinho:
     com `inset: auto ... X ...` e altura definida, o topo é que se move. */
  .dt-sidebar {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
  }

  /* A linha do tempo sobe o tamanho exato da barra que passou a ficar embaixo
     dela. */
  .dt-timeline-dock {
    inset: auto 10px calc(10px + var(--dt-mobile-bar-space) + env(safe-area-inset-bottom)) 10px !important;
  }

  /* O topo ficou livre: a faixa de avisos ganha ele inteiro. */
  .dt-notice-host {
    top: calc(10px + env(safe-area-inset-top));
    margin-top: calc(10px + env(safe-area-inset-top));
  }

  /* Tudo que reservava espaço no rodapé passa a reservar também o da barra. */
  .dt-app-root { padding-bottom: calc(164px + var(--dt-mobile-bar-space)); }
  .dt-page-tail footer { padding-bottom: calc(158px + var(--dt-mobile-bar-space)) !important; }
  .dt-toast-notification {
    bottom: calc(154px + var(--dt-mobile-bar-space) + env(safe-area-inset-bottom)) !important;
  }

  /* O clima abre para o alto: o botão dele agora está embaixo, e um painel
     descendo a partir dali sairia da tela. Fica por cima do menu de propósito,
     porque é um detalhe pedido de dentro dele. */
  .dt-sidebar .dt-weather-popover {
    position: fixed !important;
    inset: calc(10px + env(safe-area-inset-top)) 10px auto 10px !important;
    z-index: 60 !important;
    max-height: calc(100vh - 30px - var(--dt-mobile-bar-space) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }

  /* ---- itens do menu, 15% maiores ------------------------------------- */
  /* 44px era o mínimo de alvo de toque, não um tamanho escolhido. Com o menu
     no rodapé ele passou a ser a navegação principal do celular, e ganhou
     corpo: 51px de altura (44 x 1,15) e a tipografia no mesmo passo. */
  .dt-sidebar.is-mobile-open .dt-sidebar-nav-item {
    min-height: 51px;
    padding-block: 11.5px !important;
    padding-inline: 14px;
    gap: 12.5px;
    font-size: 14.4px;
    border-radius: 15px;
  }
  .dt-sidebar.is-mobile-open .dt-sidebar-nav-item svg {
    width: 21px;
    height: 21px;
  }

  /* ---- clima e relógio, maiores e do mesmo tamanho --------------------- */
  /* Os dois cartões nasceram com alturas diferentes (58 e 50) e corpos de
     letra diferentes, e no menu aberto isso lia como dois componentes de
     famílias distintas. Agora dividem altura, recuo, raio e escala. */
  .dt-sidebar.is-mobile-open > .dt-status-cluster {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .dt-sidebar.is-mobile-open .dt-datetime-status,
  .dt-sidebar.is-mobile-open .dt-weather-button {
    width: 100%;
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
  }
  .dt-sidebar.is-mobile-open .dt-weather-in-cluster { width: 100%; }

  /* Os tamanhos de letra vêm de style inline no template, então a única forma
     de crescer é por !important. O gancho é o próprio valor inline, padrão já
     usado neste arquivo e em app-polish.css. */
  .dt-sidebar.is-mobile-open .dt-status-cluster [style*="font-size:8px"] { font-size: 9.5px !important; }
  .dt-sidebar.is-mobile-open .dt-status-cluster [style*="font-size:9px"] { font-size: 10.5px !important; }
  .dt-sidebar.is-mobile-open .dt-status-cluster [style*="font-size:11.5px"] { font-size: 13.5px !important; }
  .dt-sidebar.is-mobile-open .dt-status-cluster [style*="font-size:12px"] { font-size: 14px !important; }
  .dt-sidebar.is-mobile-open .dt-status-cluster [style*="font-size:15px"] { font-size: 18px !important; }
  /* Os filetes que separam as três colunas do clima acompanham a altura. */
  .dt-sidebar.is-mobile-open .dt-status-cluster [style*="height:22px"] { height: 28px !important; }
  .dt-sidebar.is-mobile-open .dt-datetime-icon { width: 21px !important; height: 21px !important; }
  .dt-sidebar.is-mobile-open .dt-weather-button > span:first-child svg { width: 23px !important; height: 23px !important; }
  .dt-sidebar.is-mobile-open .dt-datetime-alarm {
    width: 40px !important;
    height: 40px !important;
  }
}


/* ==========================================================================
   Listas de <select>: cor e fundo sempre declarados, e sempre do tema.

   A lista que o navegador abre num <select> é desenhada pelo sistema, não pela
   página: quando só a cor do texto é declarada e o fundo fica por conta do
   sistema, o resultado é texto branco sobre fundo branco em parte dos casos —
   o dropdown "todo branco". Havia regras de option espalhadas por três
   arquivos, cada uma cobrindo um módulo e algumas com cor fixa em vez de
   token, e sobrava sempre um <select> sem cobertura.

   Esta é a rede que pega todos: um par cor/fundo tirado do tema, com
   especificidade e !important suficientes para vencer as regras antigas. Como
   sai de token, o tema claro se resolve sozinho, sem regra própria.
   ========================================================================== */
html body select,
html body select option,
html body select optgroup {
  color: var(--text) !important;
  background-color: var(--bg-elev) !important;
}
/* O campo fechado continua transparente, para não virar um bloco sólido dentro
   de barras e cartões de vidro; só a lista aberta precisa de fundo. */
html body select { background-color: transparent !important; }
html body select option:checked,
html body select option:hover {
  background-color: var(--accent-weak) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   Os menus-pílula no celular

   O menu compacto de Projeto, Seção e Tarefa é um controle segmentado: pílula
   com borda, sem folga entre os botões. O desenho está certo, mas cada segmento
   media 32px — abaixo dos 40px que o dedo precisa, e diferente dos 40px dos
   botões soltos da mesma tela. Aqui a pílula cresce mantendo a forma, e o app
   inteiro passa a ter uma régua só para alvo de toque.
   ========================================================================== */

@media (max-width: 760px) {
  :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) {
    height: auto !important;
    padding: 3px !important;
    border-radius: 13px !important;
  }

  :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button,
  :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button + button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   Separador de seção da barra lateral

   "Ferramentas" agrupa os três módulos colaborativos. É um rótulo, não um
   item: sem fundo, sem clique, alinhado ao texto dos botões (ícone de 18px +
   gap de 10px ≈ 12px de padding + 28px até o rótulo).
   ========================================================================== */

.dt-sidebar-sep {
  display: block;
  margin: 16px 0 5px;
  padding-inline: 12px;
  color: var(--faint);
  font: 650 9.5px 'JetBrains Mono', monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  user-select: none;
}


/* =========================================================================
   TRAÇO É DADO, PREENCHIMENTO É BOTÃO
   =========================================================================

   Este arquivo desenhou o app inteiro por contorno: `--dt-surface` é
   transparente e todo elemento ganha `border: 1px solid var(--dt-edge)`. Num
   sistema assim, o botão e o parágrafo têm a mesma superfície, e a única
   diferença é o cursor — que não existe no celular.

   Daqui para baixo, o que se clica ganha um preenchimento leve, e o que só
   informa continua de traço. O hover acende a mesma superfície em vez de
   pintar a borda de acento, porque a borda deixou de ser o sinal.

   O que NÃO entra aqui, de propósito:
     - `.dl-btn-primary` e `.dl-create-primary`, que já são sólidos de acento;
     - `.dl-btn-danger`, que tem cor própria de perigo;
     - campos de formulário, que já têm superfície e não são ação;
     - caixas de leitura (`.dl-hero`, `.dtf-clima-metrica`, `.dtf-clima-dia`),
       que são justamente o outro lado da regra.
   ========================================================================= */

html body .dt-app-root :is(
  .dl-btn-secondary,
  .dl-quiet-action,
  .dl-btn-sm,
  .surv-btn-sm,
  .dl-btn-close-modal,
  .dl-btn-back,
  .dl-filter-btn,
  .dt-sidebar-nav-item,
  .dt-quick-action,
  .dt-project-action,
  .dt-media-station-btn,
  .dt-media-play-toggle,
  .dl-tab-btn,
  .dt-site-tab,
  .dtf-clima-btn
),
html body .dl-modal-overlay :is(
  .dl-btn-secondary,
  .dl-quiet-action,
  .dl-btn-sm,
  .surv-btn-sm,
  .dl-btn-close-modal,
  .dl-btn-back,
  .dl-filter-btn
) {
  background: var(--dt-toque) !important;
  border-color: transparent !important;
}

html body .dt-app-root :is(
  .dl-btn-secondary,
  .dl-quiet-action,
  .dl-btn-sm,
  .surv-btn-sm,
  .dl-btn-close-modal,
  .dl-btn-back,
  .dl-filter-btn,
  .dt-sidebar-nav-item,
  .dt-quick-action,
  .dt-project-action,
  .dt-media-station-btn,
  .dt-media-play-toggle,
  .dl-tab-btn,
  .dt-site-tab,
  .dtf-clima-btn
):hover,
html body .dl-modal-overlay :is(
  .dl-btn-secondary,
  .dl-quiet-action,
  .dl-btn-sm,
  .surv-btn-sm,
  .dl-btn-close-modal,
  .dl-btn-back,
  .dl-filter-btn
):hover {
  background: var(--dt-toque-forte) !important;
  border-color: transparent !important;
}

/* O item ativo da barra e a aba selecionada continuam sendo os de acento: eles
   dizem ONDE se está, e isso é mais forte do que dizer que se pode clicar. */
html body .dt-app-root .dt-sidebar-nav-item[aria-current="true"],
html body .dt-app-root .dt-sidebar-nav-item[aria-pressed="true"],
html body .dt-app-root :is(.dl-tab-btn, .dt-site-tab).active {
  background: var(--accent-weak) !important;
  border-color: color-mix(in srgb, var(--accent) 38%, transparent) !important;
}

/* Cartão de conteúdo que se abre com um clique. Ele é a exceção que confirma a
   regra: parece leitura, mas é porta. O preenchimento é o que diz isso. */
html body .dt-app-root :is(#darklist-container, #socialmedia-container, #surveys-container) :is(.dl-card, .surv-survey-card) {
  background: var(--dt-toque) !important;
  border-color: transparent !important;
}

html body .dt-app-root :is(#darklist-container, #socialmedia-container, #surveys-container) :is(.dl-card, .surv-survey-card):hover {
  background: var(--dt-toque-forte) !important;
}

/* Sem borda, o foco perde o sinal que tinha. Todo elemento desta lista precisa
   de anel próprio — senão quem navega por teclado fica sem saber onde está. */
html body .dt-app-root :is(
  .dl-btn-secondary, .dl-quiet-action, .dl-btn-sm, .surv-btn-sm,
  .dl-btn-close-modal, .dl-btn-back, .dl-filter-btn,
  .dt-sidebar-nav-item, .dt-quick-action, .dt-project-action,
  .dt-media-station-btn, .dt-media-play-toggle,
  .dl-tab-btn, .dt-site-tab, .dtf-clima-btn, .dl-card, .surv-survey-card
):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}


/* =========================================================================
   FILHO DE SUPERFÍCIE PREENCHIDA NÃO TEM VIDRO PRÓPRIO
   =========================================================================

   Mais acima neste arquivo, a receita de vidro alcança `[class*="-card"]` — e
   isso não pega só o cartão: pega `dl-card-title`, `dl-card-desc`,
   `dl-card-status`, `dl-card-footer`, todo filho que siga o padrão de nome.
   Cada um recebia `backdrop-filter: blur() saturate(135%)`.

   Enquanto o cartão era transparente isso não custava nada: o filho filtrava o
   fundo da página, que é liso, e o resultado era igual ao vizinho. Com o cartão
   preenchido, cada filho passou a re-saturar o preenchimento do pai — e apareceu
   como um retângulo mais claro atrás do título, da descrição e de cada linha de
   status. Era o defeito visível nos cartões do Social Media e das Pesquisas.

   O vidro é do recipiente. Quem está dentro dele herda o que já foi desenhado.
   ========================================================================= */

html body .dt-app-root :is(.dl-card, .surv-survey-card, .dtf-shortcut, .dl-btn-secondary, .dl-quiet-action, .dl-filter-btn, .dt-sidebar-nav-item, .dt-quick-action, .dt-kanban-card, .dt-task-card) * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* -------------------------------------------------------------------------
   O botão de sincronizar as agendas.

   Ele é um `<button>` sem classe dentro de `.dt-accordion-actions`, e ninguém
   nunca o desenhou: o que aparecia era o botão cru do navegador — fundo cinza
   do sistema, cantos do sistema, e o ícone colado no texto por falta de `gap`.
   Agora ele segue a mesma régua dos outros botões secundários do app.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-accordion-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 0 !important;
  border-radius: 10px;
  background: var(--dt-toque) !important;
  color: var(--text);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease;
}

html body .dt-app-root .dt-accordion-actions button:hover {
  background: var(--dt-toque-forte) !important;
}

html body .dt-app-root .dt-accordion-actions button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

html body .dt-app-root .dt-accordion-actions button svg {
  flex: none;
  color: var(--accent-text);
}


/* -------------------------------------------------------------------------
   Os dois modos automáticos de tema.

   Eles dividem UMA célula do seletor, ao lado do Light: são modos, não temas,
   e dar a cada um o tamanho de um tema faria a lista parecer ter cinco cores
   quando tem três. Sem prévia de cor, justamente porque a cor deles muda.
   ------------------------------------------------------------------------- */

.dt-theme-auto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

html body .dt-app-root .dt-theme-options .dt-theme-auto > button {
  min-width: 0;
  min-height: 70px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px;
  background: transparent !important;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
}

html body .dt-app-root .dt-theme-options .dt-theme-auto > button[aria-checked="true"] {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

html body .dt-app-root .dt-theme-options .dt-theme-auto > button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* O ícone acompanha o texto: apagado quando o modo não está escolhido, aceso
   quando está. É o mesmo sinal, em dois lugares. */
html body .dt-app-root .dt-theme-options .dt-theme-auto > button svg {
  flex: none;
  color: currentColor;
}


/* =========================================================================
   A TAREFA: ESCREVER, FORMATAR E LER
   ========================================================================= */

/* O rótulo e a barra de formatação dividem a mesma linha: a barra não merece
   uma linha só para ela, e o campo ganha essa altura de volta. */
.dt-task-text-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.dt-task-text-head > label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.dt-task-format { display: inline-flex; align-items: center; gap: 3px; }

html body .dt-app-root .dt-task-format > button {
  width: 28px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 7px;
  background: transparent !important;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

html body .dt-app-root .dt-task-format > button:hover {
  background: var(--dt-toque) !important;
  color: var(--text);
}

html body .dt-app-root .dt-task-format > button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px;
}

/* Os cinco botões de formatação ficam na mesma linha do rótulo "Descrição" e
   por isso são miúdos — 28x26 de desenho. O retângulo invisível leva cada um a
   34x32 de toque sem alargar a barra nem empurrar o rótulo. */
html body .dt-app-root .dt-task-format > button { position: relative; }
html body .dt-app-root .dt-task-format > button::after {
  content: '';
  position: absolute;
  inset: -3px;
}

.dt-task-format-sep {
  width: 1px;
  height: 15px;
  margin: 0 4px;
  background: var(--line-2);
}

/* O campo cresce com o texto, e o navegador faz a conta.
 *
 * A primeira tentativa media a altura no JS e escrevia em `style.height`. Não
 * funcionava: o componente redesenha a cada tecla e reescreve o atributo
 * `style` inteiro do campo, apagando a altura calculada — e a briga era
 * perdida por construção, não por timing.
 *
 * `field-sizing: content` entrega o mesmo resultado sem disputa nenhuma. Onde
 * não houver suporte, sobram o piso de 150px e a alça de arrastar, que é o
 * comportamento de antes e não incomoda ninguém. */
html body .dt-app-root .dt-task-editor textarea[name="title"] {
  field-sizing: content;
  min-height: 150px;
  max-height: 420px;
  line-height: 1.55;
  resize: vertical;
}

/* -------------------------------------------------------------------------
   Os três recursos, lado a lado.

   Empilhados, eles empurravam o campo de texto para cima e sobrava rolagem no
   modal inteiro. Em três colunas, a altura que eles ocupavam volta para onde
   faz falta: o texto.
   ------------------------------------------------------------------------- */

.dt-task-extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin: 18px 0;
}

html body .dt-app-root .dt-task-extra {
  min-width: 0;
  margin: 0 !important;
  padding: 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel) !important;
}

/* A prioritária é uma linha só; as outras duas são pilhas. */

/* Numa coluna estreita, a grade de anexos não cabe em 84px por célula. */
html body .dt-app-root .dt-task-extra-files [ref] {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important;
}

@media (max-width: 720px) {
  .dt-task-extras { grid-template-columns: 1fr; }
  html body .dt-app-root .dt-task-editor textarea[name="title"] { min-height: 120px; }
}

/* -------------------------------------------------------------------------
   A tarefa expandida.

   A primeira linha é o título; o resto é corpo. Antes tudo ia para o título,
   em 25px e sem quebra de linha — uma lista de seis itens virava um parágrafo
   corrido em corpo de manchete.
   ------------------------------------------------------------------------- */

.dt-view-corpo {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.dt-view-paragrafo { margin: 0 0 9px; }
.dt-view-paragrafo:last-child { margin-bottom: 0; }

/* Linha em branco no texto vira respiro, e não parágrafo vazio. */
.dt-view-respiro { display: block; height: 7px; }

.dt-view-corpo .dt-view-lista {
  margin: 0 0 10px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dt-view-corpo .dt-view-lista:last-child { margin-bottom: 0; }
.dt-view-corpo .dt-view-lista li::marker { color: var(--accent-text); }
.dt-view-corpo strong { color: var(--text); }
.dt-view-corpo s { opacity: .65; }


/* -------------------------------------------------------------------------
   As três caixas da tarefa, na medida certa.

   Sem as linhas de apoio, "Prioritária" e "Gravar nota" viraram uma linha só
   cada. As três passam a ter a mesma altura — top-alinhadas com alturas
   diferentes, a fileira lia como três coisas de importâncias diferentes, e é o
   contrário: são três recursos do mesmo nível.
   ------------------------------------------------------------------------- */

.dt-task-extras { align-items: stretch; }

html body .dt-app-root .dt-task-extra {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 104px;
}

/* A caixa de áudio É o botão. Ela ocupa a caixa inteira, sem tracejado dentro
   de tracejado: o retângulo já é o alvo. */
html body .dt-app-root .dt-task-extra-gatilho {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  text-align: left;
  cursor: pointer;
}

html body .dt-app-root .dt-task-extra-gatilho .dt-task-extra-icone {
  flex: none;
  color: var(--accent-text);
  display: inline-flex;
  transition: transform .16s ease;
}

html body .dt-app-root .dt-audio-note-panel.dt-task-extra:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line)) !important;
}

html body .dt-app-root .dt-audio-note-panel.dt-task-extra:hover .dt-task-extra-icone {
  transform: scale(1.12);
}

html body .dt-app-root .dt-task-extra-gatilho:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Com notas gravadas ou gravação em curso, a caixa deixa de ser só o botão: o
   gatilho sobe para cabeçalho e a lista ocupa o resto. */
html body .dt-app-root .dt-audio-note-panel.dt-task-extra { justify-content: flex-start; }
html body .dt-app-root .dt-audio-note-panel.dt-task-extra .dt-task-extra-gatilho { margin-bottom: 0; }
html body .dt-app-root .dt-audio-note-panel.dt-task-extra > *:not(.dt-task-extra-gatilho) { margin-top: 11px; }

/* Os arquivos: o rótulo saiu, e o que ficou é a área de soltar. Ela cresce
   para preencher a caixa, para as três terminarem na mesma linha. */
.dt-task-extra-topo { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 8px; }
.dt-task-extra-topo:empty { display: none; margin: 0; }

html body .dt-app-root .dt-task-extra-files { justify-content: center; }

html body .dt-app-root .dt-task-dropzone {
  align-content: center;
  margin-bottom: 0 !important;
  padding: 8px !important;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important;
  gap: 7px !important;
}

/* O alvo de anexar não precisa ser quadrado quando está sozinho: em coluna
   estreita, um quadrado de 58px sobra espaço em cima e embaixo. */
/* Sozinho na caixa, o alvo de anexar não precisa ser quadrado: em coluna
   estreita um quadrado de 158px comia a altura das três caixas de uma vez —
   era ele que empurrava a fileira para 230px. */
html body .dt-app-root .dt-task-dropzone > label {
  aspect-ratio: auto !important;
  min-height: 58px;
  padding: 9px 6px;
  gap: 4px !important;
  text-align: center;
  line-height: 1.15;
}

html body .dt-app-root .dt-task-dropzone > label span { font-size: 10px !important; }

/* O título da tarefa expandida agora é um elemento, e não texto solto. */
.dt-view-titulo strong { font-weight: inherit; color: var(--accent-text); }
.dt-view-titulo em { font-style: italic; }
.dt-view-titulo s { opacity: .6; }

/* A prioritária é a única das três que é uma LINHA: ícone, nome e interruptor
   lado a lado. A regra geral das caixas põe todas em coluna, e vem depois
   desta no arquivo — por isso a direção precisa ser reafirmada aqui, no fim,
   onde nada mais a sobrescreve. */
html body .dt-app-root .dt-task-extra.dt-task-extra-super {
  flex-direction: row;
  align-items: center;
  gap: 11px;
}

html body .dt-app-root .dt-task-extra-super > div:first-of-type { flex: 1; min-width: 0; }


/* =========================================================================
   SALVANDO, DENTRO DA CAIXA DE PERFIL

   A pílula de "Salvando…" aparecia solta acima do rodapé e empurrava a barra
   de perfil para baixo cada vez que o app gravava — um solavanco na barra
   lateral a cada tecla salva. Agora o aviso ocupa a própria caixa de perfil:
   a foto e o nome se apagam por um instante e, no lugar deles, passa o mesmo
   rastro de pixels que anda na barra de mídia enquanto há som no ar.
   ========================================================================= */

.dt-sidebar-userbox {
  position: relative;
  overflow: hidden;
}

/* O conteúdo se apaga sem sair do lugar: com display:none a caixa encolheria
   no meio da animação, que é justamente o solavanco que queríamos tirar. */
.dt-sidebar-userbox:has(> .dt-save-indicator[data-save-state="saving"]) > .dt-sidebar-profile,
.dt-sidebar-userbox:has(> .dt-save-indicator[data-save-state="saving"]) > .dt-sidebar-profile-copy,
.dt-sidebar-userbox:has(> .dt-save-indicator[data-save-state="saving"]) > .dt-sidebar-settings {
  /* A visibilidade sozinha não basta: styles.css declara "visibility: visible"
     com !important para TODO svg do tema escuro, e o ícone da engrenagem
     continuava pintado dentro de um botão escondido. A opacidade do pai é
     composta sobre a subárvore inteira e não tem como ser desfeita de dentro,
     então ela é que apaga de verdade; a visibilidade fica para tirar os botões
     do alcance de quem navega por teclado e leitor de tela. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html body .dt-app-root .dt-sidebar-userbox > .dt-save-indicator {
  position: absolute;
  inset: 0;
  /* `inset: 0` não basta aqui, e o motivo é sutil: a caixa de perfil é uma
     grade com `align-items: center`, e num contêiner de grade o alinhamento
     vence os deslocamentos de um filho posicionado. O resultado era uma faixa
     de 15px — a altura do texto — no meio de uma caixa de 58px, com o rastro
     de pixels espremido dentro dela. Com a medida dita, não há o que negociar. */
  width: 100%;
  height: 100%;
  align-self: stretch;
  justify-self: stretch;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  overflow: hidden;
}

html body .dt-app-root .dt-sidebar-userbox > .dt-save-indicator[data-save-state="saving"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* O disquete e a palavra andam por cima do rastro, nunca por baixo. */
.dt-save-face {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

.dt-save-face .dt-save-spinner { display: inline-flex; }


/* =========================================================================
   A CONTAGEM DE SEGURANÇA

   Concluir uma tarefa já esperava cinco segundos antes de valer, com um
   "Desfazer" ao lado. Excluir passa a esperar do mesmo jeito, e as duas
   contagens dividem o mesmo desenho — trocar a cor é o bastante para dizer
   que uma arquiva e a outra apaga.
   ========================================================================= */

.dt-contagem {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.dt-contagem-relogio {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--dt-contagem-cor, var(--accent));
  color: var(--dt-contagem-cor, var(--accent));
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  animation: dt-pulse 1s steps(30) infinite;
}

.dt-contagem-texto {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* O "Desfazer" é botão de verdade e não pode se confundir com o aviso: ele
   ganha preenchimento, como todo alvo de clique neste app. */
html body .dt-app-root .dt-contagem-desfazer {
  flex: none;
  padding: 7px 13px;
  border-radius: 10px;
  border: 1px solid var(--dt-contagem-cor, var(--accent));
  background: color-mix(in srgb, var(--dt-contagem-cor, var(--accent)) 14%, transparent);
  color: var(--dt-contagem-cor, var(--accent));
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s ease;
}

html body .dt-app-root .dt-contagem-desfazer:hover {
  background: color-mix(in srgb, var(--dt-contagem-cor, var(--accent)) 26%, transparent);
}

html body .dt-app-root .dt-contagem-desfazer:focus-visible {
  outline: 2px solid var(--dt-contagem-cor, var(--accent));
  outline-offset: 2px;
}

/* Exclusão fala na cor do risco. */
.dt-contagem-risco { --dt-contagem-cor: var(--danger, #E5484D); }


/* =========================================================================
   O QUADRO KANBAN

   Quatro colunas numa folha que pode virar a tela inteira. Em telas estreitas
   as colunas não encolhem até virar tira: elas mantêm uma largura mínima e a
   fileira rola de lado, que é como um quadro se lê no celular.
   ========================================================================= */

/* O nome termina em -overlay de propósito: é assim que a receita de fundo da
   casa alcança o elemento. Um véu preto próprio aqui ficava bonito no tema
   escuro e sumia com o quadro no claro — texto escuro sobre fundo escurecido.
   Quem decide a cor do véu é o tema, num lugar só. */
.dt-kanban-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dt-fade .2s ease;
}

.dt-kanban-folha {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  height: min(720px, 88vh);
  overflow: hidden;
  border: 1px solid var(--dt-edge);
  border-radius: 22px;
  /* A folha do quadro é grande demais para ser só uma janela: o que estiver
     atrás dela aparece inteiro dentro de uma coluna vazia — um botão rosa da
     página de trás virava um borrão no meio do "Feito". Uma demão do próprio
     elevado do tema dá chão ao quadro sem tirar o vidro dele. */
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  box-shadow: var(--shadow);
  transition: max-width .22s ease, height .22s ease, border-radius .22s ease;
}

/* Tela cheia é tela cheia: o respiro em volta some junto com os cantos. */
.dt-kanban-overlay:has(> .dt-kanban-folha.e-cheia) { padding: 0; }

.dt-kanban-folha.e-cheia {
  max-width: none;
  height: 100%;
  border-radius: 0;
  border-width: 0;
}

/* ---- o cabeçalho ---- */

.dt-kanban-topo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--dt-edge);
}

.dt-kanban-topo-nome { min-width: 0; }

.dt-kanban-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-kanban-topo-nome h2 {
  margin: 2px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-kanban-topo-acoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

html body .dt-app-root .dt-kanban-botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 11px;
  border: 1px solid var(--accent);
  background: var(--accent-weak);
  color: var(--accent-text);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

html body .dt-app-root .dt-kanban-icone {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 0;
  background: var(--dt-toque);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

html body .dt-app-root .dt-kanban-icone:hover {
  background: var(--dt-toque-forte);
  color: var(--text);
}

html body .dt-app-root .dt-kanban-botao:focus-visible,
html body .dt-app-root .dt-kanban-icone:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- as colunas ---- */

.dt-kanban-colunas {
  flex: 1;
  min-height: 0;
  display: grid;
  /* As quatro colunas dividem a largura por igual e só saem para a rolagem
     lateral quando nem a menor medida legível cabe. Fixar uma largura mínima
     grande fazia o quadro rolar de lado num notebook, com espaço sobrando. */
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  padding: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
}

.dt-kanban-coluna {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--dt-edge);
  border-radius: 16px;
  scroll-snap-align: start;
  transition: border-color .15s ease, background .15s ease;
}

/* A coluna sob o cartão em viagem se acende: sem isso não dá para saber onde
   ele vai cair antes de largar. */
.dt-kanban-coluna.e-alvo {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Soltar no "Feito" não é o mesmo que mudar de coluna: começa uma contagem
   que conclui a tarefa. O realce dele precisava dizer isso — e não podia dizer
   pela cor, porque neste app --ok vale a mesma tinta do acento. Diz pela
   forma: o traço vira tracejado e engrossa. Funciona em qualquer tema. */
.dt-kanban-coluna.e-fim.e-alvo {
  border-style: dashed;
  border-width: 2px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.dt-kanban-coluna-topo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px 9px;
  border-bottom: 1px solid var(--dt-edge);
}

.dt-kanban-coluna-nome {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-kanban-coluna-conta {
  flex: none;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--dt-toque);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-align: center;
}

.dt-kanban-coluna.e-fim .dt-kanban-coluna-nome { color: var(--ok); }

.dt-kanban-pilha {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Centralizado, o aviso flutuava numa altura diferente em cada coluna e o
   olho não achava a linha de base do quadro. Ele começa onde o primeiro
   cartão começaria. */
.dt-kanban-vazio {
  margin: 0;
  padding: 18px 10px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

/* ---- os cartões ---- */

.dt-kanban-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: var(--dt-toque);
  cursor: grab;
  transition: border-color .15s ease, transform .12s ease, opacity .15s ease;
}

.dt-kanban-card:active { cursor: grabbing; }
.dt-kanban-card:hover { background: var(--dt-toque-forte); }

/* O cartão inteiro abre a tarefa, então ele também precisa de anel de foco
   para quem chega nele pelo teclado. */
html body .dt-app-root .dt-kanban-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dt-kanban-card.e-super { border-left: 3px solid var(--accent); }

/* O cartão em contagem para de ser arrastável e recua um passo: ele está de
   saída, e mexer nele agora só atrapalharia o "Desfazer". */
.dt-kanban-card.e-saindo { cursor: default; opacity: .82; }

/* O único botão do cartão, no canto superior esquerdo. */
html body .dt-app-root .dt-kanban-card-abrir {
  align-self: flex-start;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--dt-edge);
  background: var(--dt-toque-forte);
  color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

html body .dt-app-root .dt-kanban-card-abrir:hover {
  background: var(--accent-weak);
  color: var(--accent-text);
}

html body .dt-app-root .dt-kanban-card-abrir:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dt-kanban-card-titulo {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dt-kanban-marcas { display: flex; align-items: center; gap: 8px; }

.dt-kanban-marca {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--faint);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
}

.dt-kanban-marca.e-super { color: var(--accent-text); }

/* A contagem dentro do cartão: a mesma espera de cinco segundos das tarefas,
   no tamanho que cabe numa coluna. */
.dt-kanban-conta {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dt-kanban-conta-num {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--ok);
  color: var(--ok);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  animation: dt-pulse 1s steps(30) infinite;
}

.dt-kanban-conta-txt {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
}

html body .dt-app-root .dt-kanban-conta-desfazer {
  flex: none;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent-weak);
  color: var(--accent-text);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- as entradas do quadro ---- */

html body .dt-app-root .dt-acao-kanban {
  width: auto;
  gap: 6px;
  padding: 0 11px;
}

html body .dt-app-root .dt-acao-kanban > span {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

html body .dt-app-root .dt-secao-abrir-quadro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid var(--accent);
  background: var(--accent-weak);
  color: var(--accent-text);
  font-family: 'Manrope', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- telas estreitas ---- */

@media (max-width: 720px) {
  .dt-kanban-overlay { padding: 0; }
  .dt-kanban-folha { height: 100%; max-width: none; border-radius: 0; border-width: 0; }
  .dt-kanban-topo { padding: 12px 14px; }
  .dt-kanban-topo-acoes { gap: 6px; }
  /* No celular o rótulo do botão sai e sobra o "+": o cabeçalho tem que caber
     numa linha, e a ação continua legível pelo ícone. */
  .dt-kanban-botao > span { display: none; }
  html body .dt-app-root .dt-kanban-botao { padding: 8px 10px; }
  /* No celular uma coluna por vez ocupa a tela e o polegar passa para a
     seguinte: quatro colunas espremidas em 375px não são legíveis. */
  .dt-kanban-colunas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82vw; gap: 10px; padding: 10px; }
  html body .dt-app-root .dt-acao-kanban > span { display: none; }
  html body .dt-app-root .dt-acao-kanban { padding: 0; }
  html body .dt-app-root .dt-secao-abrir-quadro > span { display: none; }
}

/* -------------------------------------------------------------------------
   O preenchimento do quadro precisa do !important.

   A receita de vidro mais acima zera o fundo de meia dúzia de famílias de
   classe com `background: transparent !important` — e `[class*="-card"]` pega
   o cartão do quadro e o botão dentro dele pelo nome. Sem repetir a força
   aqui, o cartão nasceria invisível: só o texto solto sobre a coluna.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-kanban-card {
  background: var(--dt-toque) !important;
}

html body .dt-app-root .dt-kanban-card:hover {
  background: var(--dt-toque-forte) !important;
}

html body .dt-app-root .dt-kanban-card-abrir {
  background: var(--dt-toque-forte) !important;
}

html body .dt-app-root .dt-kanban-card-abrir:hover {
  background: var(--accent-weak) !important;
  color: var(--accent-text);
}

html body .dt-app-root .dt-secao-abrir-quadro {
  background: var(--accent-weak) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}


/* =========================================================================
   AS BARRAS DE AÇÃO: UM DESENHO SÓ

   Projeto, seção, cartão de tarefa e tarefa aberta oferecem as mesmas coisas
   — criar, concluir, editar, excluir — e ofereciam em quatro desenhos
   diferentes: botões de 30, 32, 34 e 36px, cantos de 9, 10 e 11px, uns
   soltos e outros em grupo, com três folhas de estilo disputando o mesmo
   seletor. O resultado era uma coleção de retângulos vazios de tamanhos
   parecidos, e o olho não achava a ação principal.

   Daqui em diante existe UMA barra, e ela vale nos quatro lugares:

   - a BARRA é a superfície preenchida, e o botão dentro dela é transparente
     até o ponteiro chegar. É o inverso do que estava — cada botão com traço
     próprio dentro de uma barra também traçada, moldura dentro de moldura;
   - 30px de alvo, canto de 8px, 3px de respiro. Um número só;
   - quem cria fala em acento. Quem apaga só fica vermelho quando o ponteiro
     encosta: vinte tarefas na tela seriam vinte pontos vermelhos disputando
     atenção com os títulos que importam.

   As três regras antigas continuam no styles.css e no app-polish.css porque
   alcançam grupos que não são destes quatro (rotinas, dias da semana). Este
   bloco vem depois e é mais específico, então é ele quem manda aqui.
   ========================================================================= */

html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--dt-toque) !important;
  box-shadow: none !important;
  overflow: visible !important;
  flex: none !important;
  /* A barra é preenchida: vidro aqui dentro re-satura o próprio preenchimento. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease !important;
}

/* O botão que carrega palavra não cabe no quadrado. */
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button.dt-acao-rotulo {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 12px 0 10px !important;
}

/* Um toque de acento no lugar de mais um cinza: sobre qualquer preenchimento
   neutro — a barra, o cartão, os dois empilhados — a cor do tema continua se
   distinguindo, e um branco sobre branco não continuaria. */
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:hover,
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:focus-visible {
  background: var(--accent-weak) !important;
  color: var(--accent-text) !important;
}

html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px !important;
}

/* Criar é a ação que se procura primeiro; ela já nasce em acento. */
html body .dt-app-root .dt-project-actions > button[data-action="new-task"] {
  color: var(--accent-text) !important;
}

/* Apagar espera o ponteiro para virar vermelho. */
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:is([title^="Excluir"], [aria-label^="Excluir"], [data-tooltip^="Excluir"]) {
  color: var(--muted) !important;
  background: transparent !important;
}
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:is([title^="Excluir"], [aria-label^="Excluir"], [data-tooltip^="Excluir"]):hover,
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:is([title^="Excluir"], [aria-label^="Excluir"], [data-tooltip^="Excluir"]):focus-visible {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 16%, transparent) !important;
}
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button:is([title^="Excluir"], [aria-label^="Excluir"], [data-tooltip^="Excluir"]):focus-visible {
  outline-color: var(--danger) !important;
}

/* Concluir é o desfecho da tarefa: verde, e só ele. */
html body .dt-app-root .dt-acao-concluir:hover,
html body .dt-app-root .dt-acao-concluir:focus-visible {
  color: var(--ok) !important;
  background: color-mix(in srgb, var(--ok) 16%, transparent) !important;
}
html body .dt-app-root .dt-acao-concluir:focus-visible { outline-color: var(--ok) !important; }

/* Continuar um rascunho é a única ação de um rascunho: ela vem acesa. */
html body .dt-app-root .dt-acao-seguir { color: var(--accent-text) !important; }

/* Prioritária ligada fica ligada à vista. */
html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > .dt-supertask-toggle[aria-pressed="true"] {
  color: var(--accent-text) !important;
  background: var(--accent-weak) !important;
}

/* Criar coisas e cuidar do projeto são dois assuntos; um fio separa os dois. */
.dt-acao-divisor {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--dt-edge-strong);
}

/* -------------------------------------------------------------------------
   O cartão da tarefa, preenchido.

   Ele era um retângulo de traço entre outros retângulos de traço — a lista
   inteira lia como uma grade de molduras vazias. Preenchido, cada tarefa vira
   um objeto com corpo, e a barra de ações sobe um degrau para não se dissolver
   dentro dele.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-task-card {
  border-color: transparent !important;
  background: var(--dt-toque) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .dt-app-root .dt-task-card :is(.dt-task-actions, .dt-project-actions) {
  background: var(--dt-toque-forte) !important;
}

.dt-task-footer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* -------------------------------------------------------------------------
   O rodapé da tarefa aberta.

   Ele era uma barra única com tudo dentro, do "Feito" ao "Excluir" — a mesma
   fileira para o que conclui e para o que apaga. Agora ele repete o cartão:
   as ações de desfecho à esquerda, as de manutenção à direita, e o espaço
   entre elas dizendo que não são a mesma coisa.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-view-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  box-shadow: none !important;
}

html body .dt-app-root .dt-view-actions > .dt-task-actions:last-child { margin-left: auto !important; }

/* -------------------------------------------------------------------------
   A seção que é um quadro.

   Ela não abre para baixo: abre o quadro. A linha inteira é o botão, então
   ela precisa parecer um — preenchimento, e o ícone das colunas em acento
   para dizer, antes do clique, que ali dentro é outro lugar.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-section-header[data-kanban="true"] .dt-section-toggle {
  border-radius: 11px;
  padding: 7px 11px;
  background: var(--dt-toque);
  transition: background .15s ease;
}

/* O !important é obrigatório: mais acima neste arquivo o hover de TODA seção
   é zerado com !important, e sem repetir a força aqui a linha do quadro seria
   a única superfície preenchida do app que não responde ao ponteiro. */
html body .dt-app-root .dt-section-header[data-kanban="true"] .dt-section-toggle:hover {
  background: var(--accent-weak) !important;
}

html body .dt-app-root .dt-section-header[data-kanban="true"] .dt-section-toggle:hover .dt-secao-seta {
  color: var(--accent-text);
  transform: translateX(2px);
}

/* A seta no fim da linha diz, antes do clique, que ali não se abre uma gaveta:
   troca-se de lugar. O preenchimento já dizia "clicável"; ela diz "para onde". */
.dt-secao-seta {
  flex: none;
  margin-left: auto;
  padding-left: 8px;
  display: inline-flex;
  color: var(--faint);
  transition: color .15s ease, transform .15s ease;
}

html body .dt-app-root .dt-section-header[data-kanban="true"] .dt-section-icon {
  color: var(--accent-text);
}

/* -------------------------------------------------------------------------
   Telas estreitas.

   As duas barras dividem a linha enquanto couberem e quebram inteiras quando
   não couberem — uma barra partida ao meio seria pior do que duas linhas. O
   "margin-left: auto" precisa sair junto, senão a segunda barra fica encostada
   na direita sozinha numa linha só dela.
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {
  html body .dt-app-root .dt-view-actions { flex-wrap: wrap !important; gap: 8px !important; }
  html body .dt-app-root .dt-view-actions > .dt-task-actions:last-child { margin-left: 0 !important; }
  html body .dt-app-root :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) > button.dt-acao-rotulo {
    padding: 0 10px 0 9px !important;
  }
}


/* =========================================================================
   O CÓDIGO DA TAREFA

   Ele repete, letra por letra, a régua da etiqueta da barra de mídia: mesma
   fonte, mesmo corpo, mesmo espacejamento. Não é enfeite — é o que faz um
   código parecer um código e não um pedaço do título. Ele fica sempre no
   mesmo canto, em toda tela onde a tarefa aparece.
   ========================================================================= */

.dt-codigo {
  display: block;
  margin-bottom: 8px;
  font: 400 9.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}

.dt-codigo-visor { margin-bottom: 10px; }

/* =========================================================================
   O EDITOR DE TAREFA

   Título e descrição são dois campos agora. Antes o título era a primeira
   linha do mesmo texto — o que funcionava até alguém apertar Enter cedo
   demais, e então uma tarefa escrita de um fôlego virava um título de seis
   linhas.
   ========================================================================= */

.dt-task-rotulo {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   A barra de formatação.

   Ela era um punhado de botões sem superfície flutuando ao lado do rótulo, do
   tamanho de um alvo de toque e com a aparência de um enfeite. Vira uma barra
   como as outras do app: preenchida, com o botão dentro dela acendendo ao
   passar o ponteiro.
   ------------------------------------------------------------------------- */

.dt-task-text-head { align-items: center; }

html body .dt-app-root .dt-task-format {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--dt-toque);
}

html body .dt-app-root .dt-task-format > button {
  width: 28px !important;
  height: 26px !important;
  min-width: 28px !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: 7px;
  background: transparent !important;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

html body .dt-app-root .dt-task-format > button:hover {
  background: var(--accent-weak) !important;
  color: var(--accent-text);
}

html body .dt-app-root .dt-task-format > button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}

.dt-task-format-sep {
  width: 1px;
  height: 14px;
  margin: 0 3px;
  background: var(--dt-edge-strong);
}

/* -------------------------------------------------------------------------
   Os recursos da tarefa.

   Prioritária e Gravar nota são uma linha cada: 60px bastam, e sobra altura
   para o texto. Os anexos descem para a linha de baixo e ocupam a largura do
   modal — eles são os únicos dos três que crescem com o uso.
   ------------------------------------------------------------------------- */

.dt-task-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }

html body .dt-app-root .dt-task-extra-super,
html body .dt-app-root .dt-audio-note-panel.dt-task-extra {
  min-height: 60px !important;
  padding: 0 14px !important;
}

/* O gatilho ocupa a caixa inteira e centraliza o que tem dentro: o ícone e a
   palavra ficam na mesma linha do meio, e não colados no topo. */
html body .dt-app-root .dt-audio-note-panel.dt-task-extra { justify-content: center; }
html body .dt-app-root .dt-task-extra-gatilho { min-height: 58px; align-items: center; }

/* Com nota gravada ou gravação em curso a caixa deixa de ser só o botão e
   volta a crescer. */
html body .dt-app-root .dt-audio-note-panel.dt-task-extra:has(> *:not(.dt-task-extra-gatilho)) {
  min-height: 60px !important;
  padding: 13px 14px !important;
  justify-content: flex-start;
}
html body .dt-app-root .dt-audio-note-panel.dt-task-extra:has(> *:not(.dt-task-extra-gatilho)) .dt-task-extra-gatilho {
  min-height: 0;
}

/* -------------------------------------------------------------------------
   Os anexos: uma moldura só.

   Eram três encaixadas — a do recurso, a de soltar e a do botão de anexar —, e
   nenhuma das de dentro dizia nada que a de fora já não dissesse. Ficou a
   tracejada, que é a única com significado: aqui se solta arquivo.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-task-extra-files {
  grid-column: 1 / -1;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: block !important;
}

html body .dt-app-root .dt-task-dropzone {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 84px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  transition: border-color .15s ease, background .15s ease;
}

html body .dt-app-root .dt-task-dropzone:hover { border-color: var(--dt-edge-strong); }

/* Cada anexo é um quadrado de tamanho fixo; sem isso a grade antiga voltaria
   a esticar um único arquivo pela largura toda do modal. */
html body .dt-app-root .dt-task-dropzone > div {
  flex: none;
  width: 72px;
  aspect-ratio: 1;
}

/* O botão de anexar não tem moldura própria: ele mora dentro da tracejada. */
html body .dt-app-root .dt-task-anexar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 0;
  border-radius: 10px;
  /* Sem caixa: a moldura tracejada em volta já é o alvo, e um retângulo
     preenchido dentro dela seria a terceira borda encaixada — de novo. O que
     fica é o convite escrito, e ele acende inteiro quando o ponteiro chega. */
  background: transparent;
  color: var(--muted);
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease;
}

html body .dt-app-root .dt-task-anexar:hover { color: var(--accent-text); }

.dt-task-extra-topo { margin-bottom: 8px; }

@media (max-width: 720px) {
  .dt-task-extras { grid-template-columns: 1fr; }
}

/* =========================================================================
   O CARTÃO DO QUADRO GANHA IDENTIDADE

   Código no topo, ao lado do botão; quem criou e quando o cartão andou pela
   última vez no pé, no menor corpo que ainda se lê. São informações de
   consulta: elas não podem competir com o título, que é o que se procura ao
   varrer uma coluna.
   ========================================================================= */

.dt-kanban-card-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.dt-kanban-card-topo .dt-codigo { margin: 0; flex: 1; min-width: 0; }

.dt-kanban-card-pe {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--dt-edge);
}

.dt-kanban-autor {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
}

/* O corte com reticências precisa acontecer no elemento que tem o texto. No
   contêiner flex ele não acontece: o nome simplesmente sumia pela borda, sem
   as reticências que avisam que há mais. */
.dt-kanban-autor > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-kanban-autor > img,
.dt-kanban-autor > i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}

.dt-kanban-autor > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dt-toque-forte);
  color: var(--muted);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
}

.dt-kanban-movido {
  flex: none;
  font: 400 9.5px/1 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  color: var(--faint);
}


/* A caixa de anexos é, antes de tudo, um lugar para soltar arquivo. O que
   estiver dentro dela fica no meio, que é para onde se arrasta. */
html body .dt-app-root .dt-task-dropzone { justify-content: center; }


/* -------------------------------------------------------------------------
   A assinatura no cartão da tarefa é só o rosto.

   O nome dizia, em toda tarefa da lista, a mesma coisa: que foi a pessoa que
   está olhando quem criou. Numa coluna de vinte cartões isso é vinte vezes a
   mesma informação ocupando meia linha. O rosto basta para reconhecer, e o
   nome continua no title para quem precisar conferir.
   ------------------------------------------------------------------------- */

.dt-task-card .dt-assinatura-nome { display: none; }
.dt-task-card .dt-assinatura { padding: 2px; gap: 0; }

/* =========================================================================
   O TOPO DO CARTÃO, E AS PRIORITÁRIAS

   O cartão da prioritária era outra peça: outro tamanho, outro tipo, um
   cronômetro no canto, sem descrição, sem ações e com um efeito de inclinação
   que nenhum outro cartão do app tem. Duas gramáticas para a mesma coisa —
   uma tarefa. Agora é o MESMO cartão, com a mesma medida e o mesmo
   comportamento; o que distingue a prioritária é o brilho, não o desenho.
   ========================================================================= */

.dt-card-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  min-width: 0;
}

/* A etiqueta do topo não empurra nada: o código é curto, o nome do projeto
   cede primeiro e a hora fica encostada na direita. */
.dt-card-topo .dt-codigo { margin: 0; flex: none; }

.dt-card-topo .dt-codigo-projeto {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
}

.dt-card-topo .dt-card-editada { margin-left: auto; }

/* -------------------------------------------------------------------------
   O brilho da prioritária.

   É o mesmo efeito da barra de avisos — as mesmas quatro camadas de poeira de
   pixels, na mesma cor de contraste. Só a varredura fica de fora: naquela
   barra ela é um degradê largo atravessando a linha inteira, e num cartão
   pequeno o mesmo movimento vira um vulto passando atrás do texto.
   ------------------------------------------------------------------------- */

.dt-brilho-sem-varredura::before { display: none !important; }

html body .dt-app-root .dt-task-card.e-prioritaria {
  position: relative;
  overflow: hidden;
}

/* O brilho passa POR TRÁS do conteúdo, nunca por cima. */
html body .dt-app-root .dt-task-card.e-prioritaria > *:not(.dt-alert-glow) {
  position: relative;
  z-index: 1;
}

/* Na tarefa aberta a mesma linha do topo: o código à esquerda, a última edição
   encostada na direita — o mesmo lugar em que o cartão fechado a mostra. */
.dt-codigo-visor { margin-bottom: 10px; }

/* Ela não arrasta, então não pode oferecer a mão de arrastar: o cursor de
   agarrar prometia um gesto que não existe nessa lista. */
html body .dt-app-root .dt-task-card.e-prioritaria { cursor: default; }

/* =========================================================================
   O CAMPO DE DESCRIÇÃO, EDITÁVEL DE VERDADE

   Ele mostra a formatação sem mostrar os marcadores, porque não há marcadores
   na tela: o texto vira HTML ao abrir o editor e volta a ser texto a cada
   tecla. A seleção, o cursor, o desfazer e o corretor são os do navegador.
   ========================================================================= */

.dt-task-campo-rico {
  position: relative;
  margin-bottom: 18px;
}

html body .dt-app-root .dt-task-rico {
  min-height: 168px;
  max-height: 380px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  cursor: text;
}

html body .dt-app-root .dt-task-rico:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

/* Um elemento editável não tem placeholder: o texto de exemplo é desenhado
   por cima do vazio, e sai de cena assim que houver qualquer conteúdo. */
html body .dt-app-root .dt-task-rico[data-vazio="true"]::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  color: var(--faint);
  pointer-events: none;
}

/* As marcações desenhadas dentro do campo seguem a régua da tarefa aberta:
   o que se vê escrevendo é o que se verá depois de salvar. */
html body .dt-app-root .dt-task-rico b,
html body .dt-app-root .dt-task-rico strong { font-weight: 500; color: var(--text); }
html body .dt-app-root .dt-task-rico i,
html body .dt-app-root .dt-task-rico em { font-style: italic; }
html body .dt-app-root .dt-task-rico s,
html body .dt-app-root .dt-task-rico strike,
html body .dt-app-root .dt-task-rico del { opacity: .6; }

html body .dt-app-root .dt-task-rico ul,
html body .dt-app-root .dt-task-rico ol {
  margin: 0;
  padding-left: 22px;
}

html body .dt-app-root .dt-task-rico li { margin: 0; }
html body .dt-app-root .dt-task-rico li::marker { color: var(--accent-text); }

/* O texto selecionado precisa continuar legível: aqui não há camada nenhuma
   por baixo, então vale o realce normal do app. */
html body .dt-app-root .dt-task-rico::selection,
html body .dt-app-root .dt-task-rico *::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--text);
}


/* =========================================================================
   GRAVANDO

   Enquanto a nota está sendo gravada, a caixa inteira vira o aviso: vermelha,
   pulsando, com o microfone piscando. Antes o sinal era um pontinho de 11px
   dentro de uma faixa que aparecia embaixo do botão — fácil de não ver, e o
   microfone continua ligado enquanto ninguém percebe.
   ========================================================================= */

@keyframes dt-gravando-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 42%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 0%, transparent); }
}

@keyframes dt-mic-pisca {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.92); }
}

html body .dt-app-root .dt-audio-note-panel[data-gravando="true"] {
  border-color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 13%, transparent) !important;
  animation: dt-gravando-pulso 1.6s ease-out infinite;
}

/* O gatilho sai de cena: enquanto grava, a caixa não é mais o botão de gravar. */
.dt-audio-note-panel[data-gravando="true"] .dt-task-extra-gatilho { display: none !important; }

.dt-gravando {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
}

.dt-gravando-mic {
  flex: none;
  display: inline-flex;
  color: var(--danger);
  animation: dt-mic-pisca 1.1s ease-in-out infinite;
}

.dt-gravando-tempo {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
  letter-spacing: .02em;
}

html body .dt-app-root .dt-gravando-ok {
  flex: none;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .16s ease;
}

html body .dt-app-root .dt-gravando-ok:hover { filter: brightness(1.08); }

html body .dt-app-root .dt-gravando-x {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
  cursor: pointer;
  transition: background .15s ease;
}

html body .dt-app-root .dt-gravando-x:hover {
  background: color-mix(in srgb, var(--danger) 30%, transparent);
}

html body .dt-app-root :is(.dt-gravando-ok, .dt-gravando-x):focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* Quem prefere menos movimento na tela não perde o aviso: sem a pulsação, a
   cor e o texto continuam dizendo que o microfone está ligado. */
@media (prefers-reduced-motion: reduce) {
  html body .dt-app-root .dt-audio-note-panel[data-gravando="true"] { animation: none; }
  .dt-gravando-mic { animation: none; }
}

/* -------------------------------------------------------------------------
   A caixa do projeto ganha corpo.

   Ela era um retângulo de traço com nada dentro, e a lista de projetos lia
   como uma grade de molduras vazias — o mesmo que já tinha acontecido com os
   cartões de tarefa. Preenchida, cada projeto vira um objeto; o traço sai,
   porque com os dois a caixa fica com duas bordas dizendo a mesma coisa.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-project-shell {
  border-color: transparent !important;
  background: rgba(255, 255, 255, .05) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* No tema claro o branco a 5% desaparece sobre o fundo claro; ali o mesmo
   papel cabe à tinta escura, como em todo o resto do app. */
[data-dt-theme="light"] html body .dt-app-root .dt-project-shell,
html body .dt-app-root[data-dt-theme="light"] .dt-project-shell {
  background: rgba(18, 20, 26, .05) !important;
}


/* O cartão do quadro nunca cresce além do que tem dentro. A pilha é uma coluna
   flexível, e basta alguém dar um flex-grow a um cartão para ele esticar até o
   fim da coluna com o conteúdo empoleirado no topo. */
html body .dt-app-root .dt-kanban-card { flex: none; }


/* =========================================================================
   OS QUATRO TOPOS, NO MESMO COMPASSO

   Produtividade, Social Media, Checklist e Pesquisas usam a mesma peça — o
   `.dl-hero` — mas só três delas moram dentro dos contêineres antigos
   (#darklist, #socialmedia, #surveys), e é lá que a receita de vidro deste
   arquivo alcança. A Produtividade fica fora deles, então continuava com o
   degradê opaco e o canto de 24px que as outras já tinham perdido: mesma peça,
   dois acabamentos, e a diferença aparecia toda vez que se trocava de tela.

   O que estava fora de compasso, medido:

     - fundo: #0A0A0A opaco na Produtividade, vidro nas outras três;
     - canto: 24px contra 18px;
     - respiro embaixo: 18px na Produtividade, zero nas outras;
     - lado direito: centralizado com 18px de folga contra alinhado embaixo
       com 20px.

   O corpo da marca d'água continua diferente em cada tela, e isso é de
   propósito: PRODUTIVIDADE tem 13 letras contra as 6 de SOCIAL, e o que faz as
   quatro se parecerem não é o tamanho da letra — é a fatia do canto que a
   palavra ocupa.
   ========================================================================= */

html body .dt-app-root .dt-prod-hero.dl-hero {
  border-color: var(--dt-edge) !important;
  border-radius: var(--dt-radius-md) !important;
  background: var(--dt-surface) !important;
  background-image: none !important;
  box-shadow: var(--dt-float-shadow);
  backdrop-filter: blur(var(--dt-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--dt-blur)) saturate(135%);
}

/* O respiro embaixo do topo é o mesmo nas quatro. Nas telas com menu de abas
   quem o dava era o menu; onde não há menu, não havia respiro nenhum. */
html body .dt-app-root .dl-hero,
:is(#darklist-container, #socialmedia-container, #surveys-container) .dl-hero {
  margin-bottom: 18px;
}

/* O lado direito segue a mesma régua nas quatro: encostado embaixo, na linha
   de base do título, com a mesma folga entre a métrica e os botões. */
html body .dt-app-root .dt-prod-hero .dl-hero-side {
  align-items: flex-end;
  gap: 20px;
}


/* =========================================================================
   O CHECKLIST GANHA CORPO

   A lista de itens era uma pilha de linhas soltas sobre o fundo da página:
   `background: var(--panel)` não pinta nada neste app — `--panel` é
   transparente — então cada item ficava marcado só por um traço de 7,2%, e
   com oito itens a tela virava um pautado. O item é onde se age; ele precisa
   parecer isso.

   Agora há duas camadas: um recipiente de traço, que diz "aqui é a lista", e
   dentro dele as faixas preenchidas, uma por item — a mesma gramática do
   resto do app (traço é dado, preenchimento é botão).

   E os três estados deixaram de ser palavras escritas dentro de pílulas.
   Viraram quadrados de canto arredondado com ícone e cor, como o menu das
   tarefas — só que maiores, porque no celular esses três eram a coisa mais
   difícil de acertar da tela inteira. O nome de cada um continua no `title` e
   no `aria-label`; o `aria-pressed` continua dizendo qual está ligado.
   ========================================================================= */

html body .dt-app-root #darklist-container .dl-itens-caixa {
  padding: 10px;
  border: 1px solid var(--dt-edge);
  border-radius: 18px;
}

html body .dt-app-root #darklist-container .dl-itens-caixa > #dl-items-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html body .dt-app-root #darklist-container .dl-item-row {
  display: flex;
  /* O `.dl-item-row` do styles.css é uma coluna. Sem dizer a direção aqui, a
     linha continuava empilhada: outra propriedade, outra cascata. */
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background: var(--dt-toque) !important;
  transition: background-color .16s ease;
}

html body .dt-app-root #darklist-container .dl-item-row:hover {
  border-color: transparent !important;
  background: var(--dt-toque-forte) !important;
}

html body .dt-app-root #darklist-container .dl-item-row .dl-drag-handle {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--faint);
  cursor: grab;
}

html body .dt-app-root #darklist-container .dl-item-corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* O campo é o texto do item: sem moldura própria, ele deixa de competir com a
   faixa que já o contém. A moldura volta quando o cursor entra nele. */
html body .dt-app-root #darklist-container .dl-item-corpo .dl-item-input {
  width: 100%;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font: 500 13.5px 'Manrope', sans-serif;
}

html body .dt-app-root #darklist-container .dl-item-corpo .dl-item-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px !important;
}

html body .dt-app-root #darklist-container .dl-item-corpo .dl-item-input.e-riscado {
  color: var(--muted) !important;
  text-decoration: line-through;
}

html body .dt-app-root #darklist-container .dl-item-quando {
  font: 400 9.5px 'JetBrains Mono', monospace;
  letter-spacing: .05em;
  color: var(--faint);
}

html body .dt-app-root #darklist-container .dl-item-acoes {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

html body .dt-app-root #darklist-container .dl-item-acoes .dl-status-buttons {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 6px !important;
}

/* O quadrado. Maior que o do menu das tarefas de propósito: 40px de lado
   contra 32, porque aqui o dedo decide o estado de um item. */
html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--dt-toque) !important;
  color: var(--muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status:hover {
  transform: none !important;
  background: var(--dt-toque-forte) !important;
}

html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}

/* A cor de cada botão é a do status no catálogo (api/list_types.php), que o
   JS escreve em --dl-cor. Estas duas regras substituíram três que nomeavam
   .confirmado, .desistencia e .ausente: só o Checklist tinha esses nomes, e
   uma lista de Livros ou de Compras ficava com os botões todos cinza. */
html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status.dl-status-cor:hover {
  color: var(--dl-cor, var(--muted)) !important;
}
html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-excluir:hover { color: var(--danger) !important; }

/* Ligado: a cor toma a caixa inteira, e um anel interno segura a forma sem
   devolver a borda que a regra de preenchimento tirou. */
html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status.dl-status-cor.active {
  background: color-mix(in srgb, var(--dl-cor, var(--muted)) 20%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-cor, var(--muted)) 46%, transparent) !important;
  color: var(--dl-cor, var(--muted)) !important;
}
/* A câmera acesa (o item já tem foto) segue a mesma família, na cor de
   acento, porque foto não é status: é anexo. */
html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-foto.tem-foto {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) !important;
  color: var(--accent-text) !important;
}

/* O ícone precisa aparecer inteiro: a regra de tamanho zero acima é para o
   texto que possa sobrar, nunca para o desenho. */
html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* O vidro é do recipiente: sem isto cada filho da faixa preenchida
   re-satura o preenchimento do pai e vira um retângulo mais claro. */
html body .dt-app-root #darklist-container :is(.dl-item-row, .dl-itens-caixa) * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* No celular a faixa quebra em duas linhas e os quadrados crescem: com o
   polegar, 40px ainda é apertado. */
@media (max-width: 760px) {
  html body .dt-app-root #darklist-container .dl-item-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  html body .dt-app-root #darklist-container .dl-item-corpo { flex: 1 1 100%; }
  html body .dt-app-root #darklist-container .dl-item-acoes {
    width: 100%;
    justify-content: space-between;
  }
  html body .dt-app-root #darklist-container .dl-item-acoes .dl-status-buttons { gap: 8px !important; }
  html body .dt-app-root #darklist-container .dl-item-acoes .dl-btn-status {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
  }
}

html body .dt-app-root #darklist-container .dl-itens-vazio {
  padding: 30px 16px;
  border: 1px dashed var(--dt-edge);
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}


/* =========================================================================
   AMBIENTE COMPARTILHADO

   Três peças novas, e nenhuma inventa desenho: o botão de compartilhar é um
   `.dt-env-card-action` como os outros dois do cartão; a faixa de gente usa o
   mesmo preenchimento de tudo que se clica; e o modal segue a régua dos outros
   diálogos do app.

   A faixa fica logo abaixo do título do ambiente aberto porque a pergunta que
   ela responde — quem está aqui dentro comigo — vem antes de qualquer projeto.
   ========================================================================= */

html body .dt-app-root .dt-amb-gente {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

html body .dt-app-root .dt-amb-gente-criador {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: var(--dt-toque);
}

html body .dt-app-root .dt-amb-gente-criador > span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

html body .dt-app-root .dt-amb-gente-criador strong {
  font: 650 12.5px "Manrope", sans-serif;
  color: var(--text);
}

html body .dt-app-root .dt-amb-gente-criador small {
  font: 600 8.5px "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

html body .dt-app-root .dt-amb-gente-traco {
  width: 1px;
  height: 20px;
  background: var(--dt-edge);
}

html body .dt-app-root .dt-amb-gente-vazio {
  font-size: 11.5px;
  color: var(--faint);
}

/* O componente da pessoa: retrato, nome e o X. Dois alvos dentro de uma casca
   só, porque são duas ações diferentes — ver e tirar. */
html body .dt-app-root .dt-amb-pessoa {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  background: var(--dt-toque);
  overflow: hidden;
}

html body .dt-app-root .dt-amb-pessoa-abrir,
html body .dt-app-root .dt-amb-pessoa-sair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 12px "Manrope", sans-serif;
  cursor: pointer;
}

html body .dt-app-root .dt-amb-pessoa-abrir:hover { color: var(--text); background: var(--dt-toque-forte); }

html body .dt-app-root .dt-amb-pessoa-sair {
  padding: 5px 10px 5px 6px;
  color: var(--faint);
}

html body .dt-app-root .dt-amb-pessoa-sair:hover { color: var(--danger); background: var(--dt-toque-forte); }

html body .dt-app-root :is(.dt-amb-pessoa-abrir, .dt-amb-pessoa-sair):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

html body .dt-app-root .dt-amb-foto {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

html body .dt-app-root .dt-amb-gente-criador .dt-amb-foto { width: 24px; height: 24px; }

html body .dt-app-root .dt-amb-foto-letra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dt-toque-forte);
  color: var(--muted);
  font: 700 9px "Manrope", sans-serif;
  font-style: normal;
}

/* O selo do cartão de um ambiente que não é meu. */
html body .dt-app-root .dt-amb-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: var(--dt-toque);
  color: var(--muted);
  font: 500 10.5px "Manrope", sans-serif;
}

html body .dt-app-root .dt-amb-selo .dt-amb-foto { width: 16px; height: 16px; }

/* -------------------------------------------------------------------------
   A ESPERA PELA APROVAÇÃO

   Uma tarefa que o participante marcou como feita não some da lista: ela fica
   com esta faixa, dizendo há quanto tempo espera. O tempo é o que faz a espera
   virar um incômodo produtivo — sem ele, "aguardando" é um estado sem prazo.
   ------------------------------------------------------------------------- */

html body .dt-app-root .dt-amb-espera {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 7px 9px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

html body .dt-app-root .dt-amb-espera-selo {
  font: 700 8.5px "JetBrains Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

html body .dt-app-root .dt-amb-espera-quem {
  flex: 1;
  /* Zero deixava o texto encolher até virar reticências e sumir com a hora,
     que é justamente o que a faixa existe para dizer. Com um mínimo, ele
     quebra para a linha de baixo em vez de desaparecer. */
  min-width: 96px;
  font-size: 10.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .dt-app-root .dt-amb-espera-acoes { display: inline-flex; gap: 6px; }

html body .dt-app-root .dt-amb-espera-acoes > button {
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--dt-toque);
  color: var(--muted);
  font: 600 11px "Manrope", sans-serif;
  cursor: pointer;
}

html body .dt-app-root .dt-amb-aprovar:hover { background: var(--dt-toque-forte); color: var(--ok, #70d6a0); }
html body .dt-app-root .dt-amb-rejeitar:hover { background: var(--dt-toque-forte); color: var(--danger); }
html body .dt-app-root .dt-amb-desfazer:hover { background: var(--dt-toque-forte); color: var(--text); }

html body .dt-app-root .dt-amb-espera-acoes > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   O MODAL
   ------------------------------------------------------------------------- */

.dt-amb-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(var(--dt-backdrop-blur)) saturate(115%);
  -webkit-backdrop-filter: blur(var(--dt-backdrop-blur)) saturate(115%);
}

.dt-amb-dialogo {
  width: min(620px, 100%);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dt-edge);
  border-radius: 20px;
  background: var(--bg-elev, #0A0A0A);
  color: var(--text);
  overflow: hidden;
}

.dt-amb-dialogo > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--dt-edge);
}

.dt-amb-eyebrow {
  display: block;
  font: 650 9px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  color: var(--faint);
}

.dt-amb-dialogo h2 {
  margin: 5px 0 0;
  font: 600 21px "Space Grotesk", sans-serif;
  letter-spacing: -.02em;
}

html body .dt-app-root .dt-amb-fechar,
.dt-amb-fechar {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 11px;
  background: var(--dt-toque);
  color: var(--muted);
  cursor: pointer;
}

.dt-amb-fechar:hover { background: var(--dt-toque-forte); color: var(--text); }

.dt-amb-corpo { padding: 18px 20px 22px; overflow-y: auto; }

.dt-amb-convidar label {
  display: block;
  margin-bottom: 7px;
  font: 600 11.5px "Manrope", sans-serif;
  color: var(--muted);
}

.dt-amb-linha { display: flex; gap: 8px; }

.dt-amb-linha input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--dt-edge);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: 500 13.5px "Manrope", sans-serif;
}

.dt-amb-linha input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.dt-amb-dica {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
}

.dt-amb-erro {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
  font-size: 12.5px;
}

.dt-amb-chave {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--dt-toque);
}

.dt-amb-chave-titulo { font: 650 12px "Manrope", sans-serif; }

.dt-amb-chave code {
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--dt-toque);
  font: 400 11px "JetBrains Mono", monospace;
  color: var(--muted);
  word-break: break-all;
}

.dt-amb-chave small { font-size: 10.5px; color: var(--faint); }

.dt-amb-secao { margin-top: 22px; }

.dt-amb-secao h3 {
  margin: 0 0 10px;
  font: 600 13px "Space Grotesk", sans-serif;
}

.dt-amb-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.dt-amb-lista li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 13px;
  background: var(--dt-toque);
}

.dt-amb-lista li.e-foco { box-shadow: inset 0 0 0 1px var(--accent); }

.dt-amb-lista-nome {
  flex: 1;
  min-width: 130px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12.5px "Manrope", sans-serif;
}

.dt-amb-lista-meta { font: 400 10px "JetBrains Mono", monospace; color: var(--faint); }

.dt-amb-lista-acao {
  padding: 6px 11px;
  border: 0;
  border-radius: 9px;
  background: var(--dt-toque);
  color: var(--muted);
  font: 600 11.5px "Manrope", sans-serif;
  cursor: pointer;
}

.dt-amb-lista-acao:hover { background: var(--dt-toque-forte); color: var(--text); }
.dt-amb-lista-acao.e-risco:hover { color: var(--danger); }

.dt-amb-escopo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 11px "Manrope", sans-serif;
  color: var(--faint);
}

.dt-amb-escopo select {
  height: 34px;
  max-width: 210px;
  padding: 0 9px;
  border: 1px solid var(--dt-edge);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: 500 12px "Manrope", sans-serif;
}

@media (max-width: 620px) {
  .dt-amb-linha { flex-direction: column; }
  .dt-amb-lista li { align-items: stretch; }
  .dt-amb-escopo { width: 100%; }
  .dt-amb-escopo select { flex: 1; max-width: none; }
}


/* -------------------------------------------------------------------------
   O QUE O PARTICIPANTE NÃO PODE NEM TENTAR

   O runtime reescreve o `style` de cada elemento a cada desenho, então
   esconder botão por botão em JavaScript durava até o próximo render. A marca
   fica no `<body>`, que não é desenhado por template, e as regras abaixo se
   ancoram nela.

   Excluir some sempre: o participante nunca exclui nada. Criar e editar somem
   quando o escopo dele é menor que o ambiente — nesse caso o projeto e a seção
   inteiros estão fora do alcance, e oferecer o botão seria prometer um erro.

   O reconhecimento é pelo `aria-label`, e não pelo `title`: o tooltips.js move
   o title para `data-tooltip` assim que a tela monta.
   ------------------------------------------------------------------------- */

body[data-amb-espelho] :is(.dt-project-actions, .dt-section-actions, .dt-task-actions) button:is(
  [aria-label^="Excluir"],
  [data-tooltip^="Excluir"],
  [title^="Excluir"],
  [aria-label^="Arquivar"],
  [data-tooltip^="Arquivar"],
  [title^="Arquivar"]
) {
  display: none !important;
}

body[data-amb-espelho]:not([data-amb-espelho="env"]) .dt-project-actions,
body[data-amb-espelho]:not([data-amb-espelho="env"]) .dt-section-actions {
  /* O grupo inteiro, e não só os botões: a moldura vazia ficava no lugar
     deles, como uma barra de ação sem nenhuma ação dentro. */
  display: none !important;
}

/* O ambiente que não é meu não se renomeia nem se apaga a partir do topo.

   Arquivar entra na mesma lista: ele mexe no `status`, e status é o único
   campo que o servidor nunca aceita de um participante. O botão funcionaria
   na tela e não gravaria nada — pior do que não existir. */
body[data-amb-espelho] .dt-env-open-actions .dt-env-card-action {
  display: none !important;
}


/* =========================================================================
   SEM ZEBRADO, E SEM TRAÇO EM QUEM JÁ TEM PREENCHIMENTO

   O zebrado nasceu quando as caixas eram todas de contorno: alternar o fundo
   era o único jeito de dizer onde uma terminava e a outra começava. Com o
   preenchimento, ele passou a ser uma segunda resposta para uma pergunta que
   já tinha resposta — e uma resposta que muda de cor sem que nada tenha
   mudado no conteúdo. Duas caixas iguais devem parecer iguais.

   Junto sai o traço de quem já tem corpo. Borda e preenchimento dizem a mesma
   coisa ("aqui começa uma caixa"), e usar os dois deixa o contorno visível
   como uma linha a mais dentro de um desenho que já estava resolvido. A regra
   da casa continua valendo do outro lado: quem NÃO tem preenchimento mantém o
   traço, porque ali ele é a única coisa que separa.
   ========================================================================= */

/* Os projetos: a alternância também trazia a borda de volta em um a cada
   dois, o que fazia metade da lista parecer de um jeito e metade de outro. */
html body .dt-app-root .dt-project-list > .dt-project-shell:nth-child(even) {
  background: rgba(255, 255, 255, .05) !important;
  border-color: transparent !important;
}

[data-dt-theme="light"] html body .dt-app-root .dt-project-list > .dt-project-shell:nth-child(even),
html body .dt-app-root[data-dt-theme="light"] .dt-project-list > .dt-project-shell:nth-child(even) {
  background: rgba(18, 20, 26, .05) !important;
}

/* O acordeão do Social Media: um preenchimento só, o mesmo de todo cartão
   clicável do app, e o hover que já existe para dizer que responde ao toque. */
html body .dt-app-root .sm-accordion-card,
html body .dt-app-root .sm-accordion-card.sm-zebra-even,
html body .dt-app-root .sm-accordion-card.sm-zebra-odd,
html[data-dt-theme="light"] body .dt-app-root .sm-accordion-card.sm-zebra-even,
html[data-dt-theme="light"] body .dt-app-root .sm-accordion-card.sm-zebra-odd {
  background: var(--dt-toque) !important;
  border: 1px solid transparent !important;
}

/* O toque responde só no cabeçalho, que é o que abre e fecha: com o corpo
   na mesma cor do cartão, um hover no cartão inteiro acenderia o texto que a
   pessoa está lendo. */
html body .dt-app-root .sm-accordion-card:has(> .sm-accordion-header:hover) {
  background: var(--dt-toque-forte) !important;
  border-color: transparent !important;
}

/* O cartão em revisão continua se anunciando pela cor de acento — ali a borda
   não é decoração de caixa, é estado. */
html body .dt-app-root .sm-accordion-card.sm-em-revisao {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent) !important;
}

/* As demais superfícies preenchidas do app largam o contorno pelo mesmo
   motivo. A lista é explícita de propósito: um seletor amplo apagaria também
   o traço de quem vive só dele. */
html body .dt-app-root :is(
  .dt-task-card,
  .dt-project-shell,
  .dt-section-header,
  .dt-kanban-card,
  .dl-card,
  .surv-survey-card,
  .dtf-shortcut,
  .dl-item-row,
  .dt-dashboard-card
) {
  border-color: transparent !important;
}


/* =========================================================================
   DIÁLOGO É PARA LER

   O diálogo do Social Media era transparente com desfoque por cima: sobre a
   página lisa isso passa, mas sobre uma foto o desfoque devolve as manchas de
   cor da imagem, e o texto some dentro delas. Foi o que aconteceu no "Arte
   final" aberto sobre a arte.

   Desfocar não é o mesmo que cobrir. O que se lê precisa de fundo próprio, e
   os painéis de custo do Checklist já tinham chegado a essa conclusão antes —
   esta é a mesma decisão, estendida a todos os diálogos.
   ========================================================================= */

/* Os cinco vão num `:is()` só, e não numa lista de seletores.
   Numa lista, cada um vale pelo próprio peso, e `.dl-modal-overlay` sozinho
   perde para as duas regras de vidro que já existem neste arquivo — uma delas
   com id no seletor. Dentro do `:is()`, o peso é o do argumento mais forte e
   vale para todos, que é o que faz o fundo finalmente pegar nos cinco. */
html body :is(
  .dl-modal-overlay,
  #sm-content-overlay,
  #sm-share-overlay,
  #sm-settings-overlay,
  #sm-review-overlay
) .dl-modal-dialog {
  background: var(--bg-elev, #0A0A0A) !important;
  background-color: var(--bg-elev, #0A0A0A) !important;
  border-color: transparent !important;
  /* Sem isto, um filho com vidro próprio volta a filtrar a página por trás do
     fundo que acabamos de dar — e o buraco reabre no meio do diálogo. */
  isolation: isolate;
}

html body :is(.dl-modal-overlay, #sm-content-overlay, #sm-share-overlay, #sm-settings-overlay, #sm-review-overlay) .dl-modal-dialog * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* O cabeçalho e o rodapé do diálogo continuam se separando do corpo, mas por
   uma linha só — não por uma cor de fundo diferente. */
html body :is(.dl-modal-overlay, #sm-content-overlay, #sm-share-overlay, #sm-settings-overlay, #sm-review-overlay) .dl-modal-dialog > div:first-child {
  background: transparent !important;
  border-bottom: 1px solid var(--dt-edge) !important;
}