/* =============================================================
   FLOWLY — COMPONENTES OFICIAIS
   Cada classe tem UMA definição única.
   Ver docs/DESIGN-SYSTEM.md antes de editar.
   Depende de: _tokens.css
   ============================================================= */

/* =============================================================
   0. ÍCONES — utilitários de tamanho para Lucide
   Use no lugar de style="width: 18px; height: 18px;"
   ============================================================= */
.lucide-xs { width: 13px; height: 13px; }
.lucide-sm { width: 16px; height: 16px; }
.lucide-md { width: 18px; height: 18px; }

/* =============================================================
   0.1. TOOLBAR — divider e modificadores de toolbar-btn
   ============================================================= */
.toolbar-divider {
    width: 1px;
    background: var(--flowly-border-muted);
    margin: 0 4px;
    align-self: stretch;
}

.context-menu {
    position: absolute;
    z-index: var(--flowly-z-dropdown);
    display: none;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.1));
    border-radius: calc(10px * var(--flowly-radius-k));
    background: linear-gradient(var(--flowly-bg-overlay, rgba(12, 13, 18, 0.96)), var(--flowly-bg-overlay, rgba(12, 13, 18, 0.96))), var(--flowly-bg-body, #08090e);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.context-menu.show {
    display: flex;
}

#colorMenu.context-menu.show {
    display: grid !important;
}

.toolbar-btn {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: calc(7px * var(--flowly-radius-k));
    background: transparent;
    color: var(--flowly-text-secondary);
    transition: background 120ms ease, color 120ms ease;
}

.toolbar-btn:hover {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.07));
    color: var(--flowly-text-primary);
}

.toolbar-btn--danger {
    color: var(--flowly-accent-danger);
}

.toolbar-btn--danger:hover {
    background: rgb(var(--flowly-accent-danger-rgb) / 0.12);
}

/* =============================================================
   0.2. ÍCONE FECHAR — botão close (X) padrão de modais
   ============================================================= */

/* =============================================================
   1. FLOWLY-PANEL — painel padrão (base de qualquer card)
   ============================================================= */

/* =============================================================
   2. FLOWLY-PAGE-HEADER — cabeçalho padrão de toda view
   ============================================================= */
.flowly-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--flowly-space-4);
    flex-wrap: wrap;
    padding: var(--flowly-space-2) 0 var(--flowly-space-6);
    margin-bottom: var(--flowly-space-6);
    border-bottom: 1px solid var(--flowly-border-muted);
    position: relative;
}

.flowly-page-header__title {
    display: flex;
    flex-direction: column;
    gap: var(--flowly-space-1);
    flex: 1;
    min-width: 0;
}

.flowly-page-header__title h1 {
    font-family: var(--flowly-font-display);
    font-size: var(--flowly-text-2xl);
    font-weight: var(--flowly-weight-bold);
    letter-spacing: var(--flowly-letter-tight);
    color: var(--flowly-text-primary);
    line-height: var(--flowly-line-tight);
    transition: color 200ms ease;
}

.flowly-page-header__kicker {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: calc(10px * var(--flowly-text-k));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--flowly-accent-primary);
    margin-bottom: 8px;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
}
.flowly-page-header__kicker::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--flowly-accent-primary);
    box-shadow: 0 0 6px var(--flowly-accent-primary);
    /* Animação removida — o pulse constante poluía a vista (Kaleb pediu). */
}

.flowly-page-header__subtitle {
    font-size: var(--flowly-text-sm);
    color: var(--flowly-text-secondary);
    line-height: var(--flowly-line-snug);
}

.flowly-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--flowly-space-2);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .flowly-page-header {
        padding: var(--flowly-space-1) 0 var(--flowly-space-4);
        margin-bottom: var(--flowly-space-4);
    }
    .flowly-page-header__title h1 {
        font-size: var(--flowly-text-xl);
    }
    .flowly-page-header__actions {
        width: 100%;
    }
    .flowly-page-header::after { display: none; }
}

/* =============================================================
   3. FLOWLY-STAT-CARD — cartão de estatística
   ============================================================= */
.flowly-stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--flowly-space-2);
    padding: var(--flowly-space-4) var(--flowly-space-5);
    background: var(--flowly-bg-elevated);
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-lg);
    backdrop-filter: blur(var(--flowly-blur-panel));
    transition: transform var(--flowly-duration-base) var(--flowly-ease-out),
                border-color var(--flowly-duration-base) var(--flowly-ease-out);
    position: relative;
    overflow: hidden;
}

.flowly-stat-card:hover {
    border-color: var(--flowly-border-strong);
}

.flowly-stat-card__label {
    font-size: calc(11px * var(--flowly-text-k));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--flowly-text-tertiary);
    font-family: var(--flowly-font-main);
}

.flowly-stat-card__value {
    font-family: var(--flowly-font-display);
    font-size: var(--flowly-text-3xl);
    font-weight: var(--flowly-weight-bold);
    letter-spacing: var(--flowly-letter-tight);
    color: var(--flowly-text-primary);
    line-height: var(--flowly-line-tight);
}

.flowly-stat-card--success .flowly-stat-card__value { color: var(--flowly-accent-success); }
.flowly-stat-card--warning .flowly-stat-card__value { color: var(--flowly-accent-warning); }

.flowly-stat-card--primary .flowly-stat-card__value { color: var(--flowly-accent-primary); }

/* Semantic tint — border accent + neutral elevated background */
.flowly-stat-card--success { border-color: rgb(var(--flowly-accent-success-rgb) / 0.22); }
.flowly-stat-card--warning { border-color: rgb(var(--flowly-accent-warning-rgb) / 0.22); }

.flowly-stat-card--primary { border-color: rgb(var(--flowly-accent-primary-rgb) / 0.22); }

/* Delta chip — up/down indicator inside a stat card */

/* Inline variant — compacto, usado em strips horizontais */
.flowly-stat-card--inline {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--flowly-space-1);
    padding: var(--flowly-space-3) var(--flowly-space-4);
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
}
.flowly-stat-card--inline:hover {
    border-color: transparent;
}
.flowly-stat-card--inline .flowly-stat-card__label {
    font-size: var(--flowly-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--flowly-letter-wide);
    font-weight: var(--flowly-weight-semibold);
}
.flowly-stat-card--inline .flowly-stat-card__value {
    font-size: var(--flowly-text-base);
    font-weight: var(--flowly-weight-semibold);
}

.flowly-stat-strip {
    display: flex;
    align-items: stretch;
    gap: var(--flowly-space-1);
    padding: var(--flowly-space-2);
    background: var(--flowly-bg-elevated);
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-lg);
    backdrop-filter: blur(var(--flowly-blur-panel));
    flex-wrap: wrap;
}

/* =============================================================
   7. FLOWLY-PILL — pill / badge
   ============================================================= */

/* =============================================================
   8. FLOWLY-INPUT — input de formulário
   ============================================================= */
.flowly-input {
    width: 100%;
    padding: var(--flowly-space-3) var(--flowly-space-4);
    min-height: 44px;
    background: var(--flowly-bg-glass);
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-md);
    color: var(--flowly-text-primary);
    font-family: var(--flowly-font-main);
    font-size: var(--flowly-text-base);
    transition: border-color var(--flowly-duration-fast) var(--flowly-ease-out),
                background var(--flowly-duration-fast) var(--flowly-ease-out);
}

.flowly-input::placeholder {
    color: var(--flowly-text-tertiary);
}

.flowly-input:focus {
    outline: none;
    background: var(--flowly-bg-elevated);
    border-color: var(--flowly-border-active);
    box-shadow: 0 0 0 3px rgb(var(--flowly-accent-primary-rgb) / 0.12);
}

/* =============================================================
   9. FLOWLY-DIVIDER
   ============================================================= */

/* =============================================================
   10. FLOWLY-DELTA — badge de variação (+3.2% / -1.5%)
   Estilo dos KPIs das referências visuais.
   ============================================================= */

/* =============================================================
   11. FLOWLY-PRIORITY-CARD — card com top-border de prioridade
   Inspirado nos kanban cards das referências (LOW / URGENT / etc).
   ============================================================= */

/* =============================================================
   12. FLOWLY-KBD — atalho de teclado (estilo ⌘F das referências)
   ============================================================= */

/* =============================================================
   13. FLOWLY-SEARCH-INPUT — campo de busca com ícone e shortcut
   Estilo do search da sidebar das referências.
   ============================================================= */
.flowly-search {
    display: flex;
    align-items: center;
    gap: var(--flowly-space-2);
    padding: var(--flowly-space-2) var(--flowly-space-3);
    background: var(--flowly-bg-glass);
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-md);
    transition: border-color var(--flowly-duration-fast) var(--flowly-ease-out),
                background var(--flowly-duration-fast) var(--flowly-ease-out);
}

.flowly-search:focus-within {
    border-color: var(--flowly-border-active);
    background: var(--flowly-bg-elevated);
}

/* =============================================================
   14. FLOWLY-STAT-CARD-RICH — variante do stat-card com delta integrado
   Formato das KPIs das referências (Tasks completed / 158 / +3.2%).
   ============================================================= */

/* =============================================================
   15. FLOWLY-AVATAR — avatar circular com variantes empilhadas
   ============================================================= */
.flowly-avatar {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--flowly-radius-full);
    background: var(--flowly-bg-elevated);
    border: 2px solid var(--flowly-bg-body);
    font-size: var(--flowly-text-xs);
    font-weight: var(--flowly-weight-semibold);
    color: var(--flowly-text-primary);
    overflow: hidden;
    flex-shrink: 0;
}

.flowly-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flowly-avatar--sm { width: 22px; height: 22px; }

/* =============================================================
   16. FLOWLY-DOTTED — superfícies com borda tracejada (slots vazios)
   ============================================================= */

/* =============================================================
   17. FLOWLY-SEGMENTED — segmented control (tabs estilo "Overview / Team")
   ============================================================= */
.flowly-segmented {
    display: inline-flex;
    padding: 4px;
    background: var(--flowly-bg-glass);
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-md);
    gap: 2px;
}

.flowly-segmented__item {
    padding: var(--flowly-space-2) var(--flowly-space-4);
    border-radius: var(--flowly-radius-sm);
    font-size: var(--flowly-text-sm);
    font-weight: var(--flowly-weight-medium);
    color: var(--flowly-text-secondary);
    transition: background var(--flowly-duration-fast) var(--flowly-ease-out),
                color var(--flowly-duration-fast) var(--flowly-ease-out);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.flowly-segmented__item:hover {
    color: var(--flowly-text-primary);
}

.flowly-segmented__item.is-active {
    background: var(--flowly-bg-elevated-hover);
    color: var(--flowly-text-primary);
    box-shadow: var(--flowly-shadow-sm);
}

/* =============================================================
   18. FLOWLY-TOGGLE — switch binário (on/off) estilo iOS
   ============================================================= */

/* Checkbox nativo escondido (opcional — para use com <input type="checkbox">) */

/* =============================================================
   19. FLOWLY-TEXTAREA — textarea com DS styling
   ============================================================= */
.flowly-textarea {
    width: 100%;
    min-height: 88px;
    padding: var(--flowly-space-3) var(--flowly-space-4);
    background: var(--flowly-bg-glass);
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-md);
    color: var(--flowly-text-primary);
    font-family: var(--flowly-font-main);
    font-size: var(--flowly-text-base);
    line-height: var(--flowly-line-snug);
    resize: vertical;
    transition: border-color var(--flowly-duration-fast) var(--flowly-ease-out),
                background var(--flowly-duration-fast) var(--flowly-ease-out);
}

.flowly-textarea::placeholder {
    color: var(--flowly-text-tertiary);
}

.flowly-textarea:focus {
    outline: none;
    background: var(--flowly-bg-elevated);
    border-color: var(--flowly-border-active);
    box-shadow: 0 0 0 3px rgb(var(--flowly-accent-primary-rgb) / 0.12);
}

/* =============================================================
   20. FLOWLY-SELECT — select nativo com DS styling
   ============================================================= */

/* =============================================================
   21. FLOWLY-CHOICE-GRID — grid de escolhas (theme picker, etc)
   Cada item vira botão. Ativo fica destacado.
   ============================================================= */

/* Variante swatches (apenas cor, sem label grande) */

/* =============================================================
   22. FLOWLY-CHECKBOX — checkbox customizado alinhado ao DS
   ============================================================= */

/* =============================================================
   23. FLOWLY-PROGRESS — barra de progresso linear
   ============================================================= */
.flowly-progress {
    width: 100%;
    height: 6px;
    background: var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-full);
    overflow: hidden;
}

.flowly-progress__fill {
    height: 100%;
    background: var(--flowly-accent-primary);
    border-radius: var(--flowly-radius-full);
    transition: width var(--flowly-duration-slow) var(--flowly-ease-out);
}

.flowly-progress--success .flowly-progress__fill { background: var(--flowly-accent-success); }
.flowly-progress--warning .flowly-progress__fill { background: var(--flowly-accent-warning); }
.flowly-progress--danger  .flowly-progress__fill { background: var(--flowly-accent-danger); }

/* --- Native controls usam a cor primária do Flowly (carregado via _components) --- */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--flowly-accent-primary);
}

/* Sobrescreve checkbox do Tailwind CDN no modal de auth e afins
   (Tailwind forms pinta o background:image azul por padrão — forçamos verde) */
input[type="checkbox"]:checked {
    background-color: var(--flowly-accent-primary) !important;
    border-color: var(--flowly-accent-primary) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgb(var(--flowly-accent-primary-rgb) / 0.2) !important;
    border-color: var(--flowly-accent-primary) !important;
}

/* =============================================================
   FLOWLY-BOTTOM-NAV — barra mobile fixa
   Zero dependência de Tailwind. Visível só em ≤768px (via _shell.css).
   ============================================================= */
.flowly-bottom-nav {
    /* Visibilidade controlada por _shell.css (display: none no desktop) */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--flowly-z-overlay);
    background: var(--flowly-bg-bottom-nav);
    backdrop-filter: blur(var(--flowly-blur-modal));
    -webkit-backdrop-filter: blur(var(--flowly-blur-modal));
    border-top: 1px solid var(--flowly-border-subtle);
    /* nav colado na borda inferior — sem espaço da safe-area (a pedido) */
    padding-bottom: 0;
}

.flowly-bottom-nav__inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: var(--flowly-mobile-nav-height);
    padding: 8px var(--flowly-space-2);
    gap: 6px;
}

/* =============================================================
   FLOWLY-QUICK-ADD — menu de adicao rapida (substitui hover:bg-[#333])
   ============================================================= */
.quick-add-option {
    transition: background var(--flowly-duration-fast) var(--flowly-ease-out),
                color var(--flowly-duration-fast) var(--flowly-ease-out);
}

.quick-add-option:hover {
    background: var(--flowly-bg-elevated-hover);
    color: var(--flowly-text-primary);
}

/* =============================================================
   FLOWLY-COLOR-SWATCH — paleta de cores inline (sem hex hardcoded)
   ============================================================= */
.flowly-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: var(--flowly-radius-full);
    cursor: pointer;
    border: 1px solid var(--flowly-border-subtle);
    transition: transform var(--flowly-duration-fast) var(--flowly-ease-out);
}

.flowly-color-swatch:hover { transform: scale(1.15); }

.flowly-color-swatch[data-color="default"] { background: var(--flowly-tag-gray); }
.flowly-color-swatch[data-color="blue"]    { background: var(--flowly-tag-blue); }
.flowly-color-swatch[data-color="green"]   { background: var(--flowly-tag-green); }
.flowly-color-swatch[data-color="yellow"]  { background: var(--flowly-tag-yellow); }
.flowly-color-swatch[data-color="red"]     { background: var(--flowly-tag-red); }
.flowly-color-swatch[data-color="orange"]  { background: var(--flowly-tag-orange); }
.flowly-color-swatch[data-color="pink"]    { background: var(--flowly-tag-pink); }
.flowly-color-swatch[data-color="purple"]  { background: var(--flowly-tag-purple); }
.flowly-color-swatch[data-color="brown"]   { background: var(--flowly-tag-brown); }

/* =============================================================
   TASK SYSTEM — .task-item, .checkbox-custom, .task-label
   Usado por todas as views (week, today, projects, etc.)
   ============================================================= */
.task-item {
    background: transparent;
    border: none;
    border-radius: calc(6px * var(--flowly-radius-k));
    padding: calc(7px + var(--flowly-density-pad)) 10px calc(7px + var(--flowly-density-pad)) 12px;
    margin: 0 0 2px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                padding-left 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.task-item::after {
    content: '';
    position: absolute;
    left: 2px; top: 50%;
    width: 2px; height: 0;
    background: var(--flowly-accent-primary);
    border-radius: 0 calc(2px * var(--flowly-radius-k)) calc(2px * var(--flowly-radius-k)) 0;
    transform: translateY(-50%);
    transition: height 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.task-item:hover {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.075));
    padding-left: 16px;
    box-shadow: inset 0 0 0 1px var(--flowly-border, rgba(255, 255, 255, 0.06));
}
.task-item:hover::after { height: 60%; }

/* Resposta imediata à pressão do clique — o feedback que faltava (a linha
   "confirma" na hora, antes mesmo do painel abrir). */
.task-item:active { background: var(--flowly-bg-glass-hover, rgba(255, 255, 255, 0.12)); transition: background 60ms ease; }

/* Foco por teclado — a linha já é focável (tabIndex=0) mas nada mostrava o foco. */
.task-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--flowly-accent-primary-rgb) / 0.55);
    border-radius: calc(6px * var(--flowly-radius-k));
}

/* Âncora visual do item cujo painel está aberto — o olho não se perde. */
/* z-index alto no item expandido: sem isto, as .task-item SEGUINTES (position:relative sem
   z-index) pintam por cima do painel na ordem do DOM — o texto das tarefas de baixo vazava
   através do painel flutuante. Elevar o item dono coloca ele (e o painel filho) acima dos
   irmãos posteriores. */
.task-item.is-expanded {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.05));
    border-radius: calc(6px * var(--flowly-radius-k)) calc(6px * var(--flowly-radius-k)) 0 0;
    z-index: 50;
}

.task-item--project-mirror {
    border: 1px solid rgba(77, 107, 254, 0.18);
    border-radius: calc(10px * var(--flowly-radius-k));
    background: rgba(77, 107, 254, 0.04);
    padding: 8px 10px;
    gap: 10px;
    margin-bottom: 4px;
}

.task-item--project-mirror:hover { background: rgba(77, 107, 254, 0.06); }

.task-item.is-drop-target,
.task-item--project-mirror.is-drop-target {
    border-color: rgba(77, 107, 254, 0.46);
    background: rgba(77, 107, 254, 0.12);
    box-shadow: inset 0 0 0 1px rgba(77, 107, 254, 0.18);
}

/* Drop marker — barra fina no ponto de inserção (estilo Notion/Linear), animada.
   Pseudo-elemento próprio (opacity+scaleY) em vez de border: border-style não anima
   suavemente de none->solid, então o marker antes só "estalava" na tela a cada
   dragover (handleTaskItemDragOver reaplica a classe a cada tick do mouse). Absoluto
   também não mexe no box model do item nem empurra os vizinhos (a versão anterior
   usava margin pra abrir espaço — por isso não precisava mais da specificity alta
   contra o reset de border em views/today.css: sem border, sem conflito). */
.task-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: calc(2px * var(--flowly-radius-k));
    background: var(--flowly-accent-primary);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 120ms var(--flowly-ease-out, ease), transform 120ms var(--flowly-ease-out, ease);
    pointer-events: none;
}
.task-item.drag-above::before {
    top: -2px;
    opacity: 1;
    transform: scaleY(1);
}
.task-item.drag-below::before {
    bottom: -2px;
    opacity: 1;
    transform: scaleY(1);
}

/* Aninhar como filho — highlight accent preenchido (Notion-style) com scale */
.task-item.drag-into {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.12);
    outline: 2px solid rgb(var(--flowly-accent-primary-rgb) / 0.55);
    outline-offset: -1px;
    border-radius: calc(6px * var(--flowly-radius-k));
    box-shadow: 0 0 0 4px rgb(var(--flowly-accent-primary-rgb) / 0.08),
                inset 0 0 24px rgb(var(--flowly-accent-primary-rgb) / 0.06);
    transform: scale(1.005);
    transition: background 80ms ease, outline 80ms ease, transform 160ms var(--flowly-ease-out, ease);
}

/* Source da operação vira um "buraco" discreto no lugar de origem — quem se move
   é a imagem de arrasto (clone com sombra). Rotate aqui brigava com ela. */
.task-item.opacity-50 {
    opacity: 0.32;
    transition: opacity var(--flowly-duration-fast, 150ms) var(--flowly-ease-out, ease);
}

/* Imagem de arrasto (setFlowlyDragImage): clone opaco "levantado". Fica fora da
   tela; o browser só fotografa. Folga (padding) no frame pra sombra não ser cortada. */
.flowly-drag-image-frame {
    position: fixed;
    top: -2000px;
    left: 0;
    padding: 14px;
    pointer-events: none;
    z-index: -1;
}
.flowly-drag-image-frame .task-item.flowly-drag-image {
    background:
        linear-gradient(var(--flowly-bg-glass-strong, rgba(255, 255, 255, 0.06)), var(--flowly-bg-glass-strong, rgba(255, 255, 255, 0.06))),
        var(--flowly-bg-body, #08090e);
    border-radius: calc(8px * var(--flowly-radius-k));
    box-shadow: var(--flowly-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.4)), 0 0 0 1px var(--flowly-border, rgba(255, 255, 255, 0.08));
    opacity: 1;
    transform: none;
}
.flowly-drag-image-frame .task-item.flowly-drag-image::after,
.flowly-drag-image-frame .task-item.flowly-drag-image::before { display: none; }

/* Linha do ponto de soltura "abre" o espaço: o conteúdo do alvo desliza 3px pra
   longe dela. Nos filhos, não no item: mexer no box do item mudava a área de
   hit-test e o marcador piscava na borda (dragleave/dragover alternando). */
body.dragging-active .task-item > * {
    transition: transform var(--flowly-duration-fast, 150ms) var(--flowly-ease-out, ease);
}
body.dragging-active .task-item.drag-above > * { transform: translateY(3px); }
body.dragging-active .task-item.drag-below > * { transform: translateY(-3px); }

/* Dropzone de fim de lista: recuo (vira subtarefa) / saída animados por classe. */
.task-drop-zone {
    transition: margin-left var(--flowly-duration-fast, 150ms) var(--flowly-ease-out, ease),
                padding-left var(--flowly-duration-fast, 150ms) var(--flowly-ease-out, ease),
                border-color var(--flowly-duration-fast, 150ms) var(--flowly-ease-out, ease);
}
.task-drop-zone.is-indent {
    margin-left: 28px;
    padding-left: 8px;
    border-left: 2px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.2));
}
.task-drop-zone.is-outdent {
    border-left: 2px solid rgb(var(--flowly-accent-warning-rgb, 251 191 36) / 0.35);
}

/* Durante drag, cursor grab no item inteiro */
body.dragging-active .task-item {
    cursor: grabbing;
}
/* Item-fonte fica translúcido (classe opacity-50 aplicada pelo JS um tick
   depois do dragstart, pra capturar a drag-image ainda opaca). */

.task-item--project-mirror .checkbox-custom { opacity: 0.6; cursor: default; }

.task-item--project-anchor {
    border: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.1));
    border-radius: calc(10px * var(--flowly-radius-k));
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.02));
    padding: 8px 10px;
    gap: 10px;
    margin-bottom: 4px;
}

/* ── Project block header — alinhamento idêntico ao task-item ── */
.task-item--project-header {
    /* Mesmo layout exato do .task-item */
    padding: 4px 8px;
    gap: 8px;
    align-items: flex-start;
    cursor: grab;
    opacity: 0.92;
}
.task-item--project-header.is-dragging { opacity: 0.5; }

/* Bloco de projeto com todas as tarefas do dia concluídas — esmaece igual tarefa concluída */
.task-item--project-header-done .task-project-header-icon { color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.25)); }
.task-item--project-header-done .task-project-header-meta { opacity: 0.5; }

/* Projeto com 1 tarefa só: vira praticamente uma "tag" — sem header chamativo.
   A tag inline "em Léo Soares" no nome da tarefa já carrega a info; o header
   só repete com um "0/1" minúsculo. Mantém estrutura (pra drag/mark) mas
   visualmente some. */
.task-item--project-header.is-single-task {
    padding: 2px 8px;
    opacity: 0.55;
}
.task-item--project-header.is-single-task .task-project-header-name,
.task-item--project-header.is-single-task .task-project-header-meta {
    font-size: calc(10.5px * var(--flowly-text-k));
    font-weight: 500;
    color: var(--flowly-text-tertiary);
}
.task-item--project-header.is-single-task .task-project-header-icon {
    width: 10px;
    height: 10px;
    opacity: 0.5;
}

/* ◆ fica no lugar exato do checkbox (16×16, mesmo offset) */
.task-project-header-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(10, 132, 255, 0.4);
    margin-top: 2px;
}

/* Grupo inline: nome + meta juntos à esquerda */
.task-project-header-name-group {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.task-project-header-name {
    font-size: calc(12px * var(--flowly-text-k));
    font-weight: 500;
    color: var(--flowly-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.task-project-header-meta {
    font-size: calc(11px * var(--flowly-text-k));
    font-weight: 500;
    color: var(--flowly-text-tertiary);
    white-space: nowrap;
    line-height: 1.4;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Grupo inline (rótulo agrupador estilo Notion): sem checkbox, ícone de pasta no */
/* lugar dele. Mesmo layout das tarefas normais (gap/align/padding herdados do */
/* .task-item + contexto dashboard) — só o peso do texto distingue como rótulo. */
.task-item--group {
    cursor: grab;
}
.task-item--group.is-dragging { opacity: 0.5; }

/* Ícone de pasta ocupa exatamente o espaço do checkbox (16px), pra o texto do */
/* grupo alinhar na mesma coluna do texto das tarefas. */
.task-group-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--flowly-text-tertiary);
}

.task-group-label {
    flex: 1;
    min-width: 0;
    /* Bloco de texto simples — NÃO flex. O .task-label no dashboard é flex com
       gap:12px (pro texto+metas das tarefas); como o texto do grupo é direto no
       label, esse flex+gap empurrava o texto pra direita. Forçar block cola o
       texto no ícone, igual às tarefas normais. */
    display: block !important;
    gap: 0 !important;
    /* Mesma fonte/cor das tarefas normais; só um passo de peso a mais (500) pra */
    /* ler como cabeçalho de grupo sem destoar. */
    font-size: var(--flowly-text-sm);
    line-height: 1.55;
    font-weight: 500;
    color: var(--flowly-text-primary, rgba(255, 255, 255, 0.85));
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* O .task-label tem um ::before (bolinha de cor 6px) que as tarefas escondem
   via .color-default. O group-label não tem essa classe, então a bolinha
   aparecia e empurrava o texto ~14px. Esconde no grupo. */
.task-group-label::before { display: none !important; }

/* Horário de conclusão ("· 13:51") — base movida do inline do JS pro CSS
   pra regra de zoom da Hoje (0.6em) conseguir vencer. */
.task-item .task-time {
    font-size: calc(11px * var(--flowly-text-k));
}

/* Palavra do dia — referência bíblica rotativa do hábito "Oração e Palavra" */
.task-daily-word {
    font-size: calc(11px * var(--flowly-text-k));
    font-style: italic;
    font-weight: 500;
    color: rgb(var(--flowly-accent-info-rgb) / 0.7);
    white-space: nowrap;
    margin-left: 2px;
    text-decoration: none;
    flex-shrink: 0;
}

/* Hábito pulado hoje ("não vou fazer") — linha presente mas fora da régua do
   dia: esmaecida, sem strike (strike = feito), tag "pulado" em warning. */
.task-item.is-skipped {
    opacity: 0.5;
}
.task-skip-meta {
    font-size: calc(11px * var(--flowly-text-k));
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--flowly-accent-warning);
    white-space: nowrap;
    flex-shrink: 0;
}

/* "Não vou treinar" na linha do treino — hover-reveal com texto (mais óbvio que
   só ícone). Pulado (.is-on) fica sempre visível (é o caminho de retomar). */
.task-workout-skip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 4px 8px;
    border: none;
    border-radius: var(--flowly-radius-sm, 8px);
    background: transparent;
    color: var(--flowly-text-tertiary);
    cursor: pointer;
    font-size: calc(12px * var(--flowly-text-k));
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.task-item.is-workout:hover .task-workout-skip { opacity: 1; }
.task-workout-skip:hover {
    color: var(--flowly-accent-warning);
    background: rgb(var(--flowly-accent-warning-rgb, 255 159 10) / 0.1);
}
.task-workout-skip.is-on {
    opacity: 1;
    color: var(--flowly-accent-warning);
}
/* Texto "pular" aparece no hover junto ao ícone */
.task-workout-skip::after {
    content: 'pular';
    font-size: calc(11px * var(--flowly-text-k));
    white-space: nowrap;
}

/* Sub-tasks do projeto — mesmo estilo de inlead (barra lateral, sem card) */
.task-item--project-mirror-sub {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-left: 28px !important;
    /* base .task-item has width:100% + box-sizing:border-box; the 28px margin would
       otherwise push the right edge past the parent and cause horizontal scroll on mobile. */
    width: calc(100% - 28px) !important;
    padding: 6px 8px 6px 12px !important;
    border-left: 2px solid var(--flowly-border, rgba(255, 255, 255, 0.08)) !important;
}

.task-item--project-anchor:hover { background: var(--flowly-bg-glass-hover, rgba(255, 255, 255, 0.04)); }
.task-item--project-anchor .checkbox-custom { opacity: 0.65; cursor: default; }

.task-project-anchor-checkbox {
    width: 16px; height: 16px; border-radius: calc(4px * var(--flowly-radius-k));
    border: 1.5px solid rgba(77, 107, 254, 0.45);
    background: rgba(77, 107, 254, 0.08);
    flex-shrink: 0; margin-top: 2px;
}

.task-project-anchor-body {
    min-width: 0; width: 100%;
    display: flex; flex-direction: column; gap: 2px; cursor: pointer;
}

.task-project-anchor-title {
    font-size: var(--flowly-text-sm); font-weight: 500;
    color: var(--flowly-text-primary, rgba(255, 255, 255, 0.92)); line-height: 1.45;
}

.task-project-anchor-meta {
    font-size: calc(11px * var(--flowly-text-k)); color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.46)); line-height: 1.4;
}

/* Checkbox */
.checkbox-custom {
    appearance: none;
    width: 16px; height: 16px;
    border: 1.5px solid var(--flowly-border-strong, rgba(255, 255, 255, 0.25));
    border-radius: calc(4px * var(--flowly-radius-k));
    cursor: pointer; flex-shrink: 0;
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 2px; background: transparent;
    position: relative;
}

.checkbox-custom:hover { border-color: var(--flowly-border-strong, rgba(255, 255, 255, 0.45)); }
.checkbox-custom:active { transform: scale(0.88); }

.checkbox-custom:checked {
    background: var(--flowly-accent-primary);
    border-color: var(--flowly-accent-primary);
}
/* Pop e traço só no clique (classe posta pelo onchange): amarrados ao :checked,
   replayavam em toda linha concluída a cada re-render. */
.checkbox-custom.is-just-checked:checked {
    animation: checkbox-fill 0.34s var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
/* Anel que se espalha ao marcar. */
.checkbox-custom.is-just-checked:checked::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: calc(8px * var(--flowly-radius-k));
    border: 2px solid var(--flowly-accent-primary);
    pointer-events: none;
    animation: checkbox-ring 0.5s var(--flowly-ease-out, ease-out) both;
}
/* Desmarcar: o preenchimento recolhe (em vez de sumir seco). */
.checkbox-custom.is-just-unchecked:not(:checked) {
    animation: checkbox-unfill 0.22s var(--flowly-ease-out, ease-out) both;
}

/* check riscado numa volta animada — em vez de aparecer de uma vez, ele
   desenha o check de cima pra baixo. O pseudo-elemento mantém a forma
   original do V e a máscara revela progressivamente. */
.checkbox-custom:checked::after {
    content: '';
    display: block;
    width: 4px; height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    margin: 2px auto 0;
    transform: rotate(45deg) scale(1);
}
.checkbox-custom.is-just-checked:checked::after {
    animation: checkbox-tick 0.26s var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 0.12s both;
}

/* Desmarcar: o risco recolhe da direita pra esquerda e o texto volta a acender. */
.task-item.is-uncompleting .task-label, .task-item.is-done.is-uncompleting .task-label { color: var(--flowly-text-primary, inherit); transition: color var(--flowly-duration-base) var(--flowly-ease-out); }
.task-item.is-uncompleting .task-content-span {
    background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 0 1.5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: task-strike-erase 0.2s var(--flowly-ease-out, ease-out) both;
}
@keyframes task-strike-erase {
    from { background-size: 100% 1.5px; }
    to   { background-size: 0 1.5px; }
}
.task-content-span { transition: color var(--flowly-duration-base) var(--flowly-ease-out); }

/* Risco que corre da esquerda pra direita enquanto a conclusão "assenta". */
.task-item.is-completing .task-content-span {
    color: var(--flowly-task-done-text, rgba(255, 255, 255, 0.45));
    background: linear-gradient(currentColor, currentColor) no-repeat 0 55% / 100% 1.5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: task-strike-draw 0.26s var(--flowly-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
    transition: color 0.2s ease;
}
@keyframes task-strike-draw {
    from { background-size: 0 1.5px; }
    to   { background-size: 100% 1.5px; }
}

/* Preenche de fora pra dentro (sombra interna crescendo), com pop de mola. */
@keyframes checkbox-fill {
    0%   { background-color: transparent; border-style: solid; box-shadow: inset 0 0 0 0 var(--flowly-accent-primary); transform: scale(0.84); }
    55%  { background-color: transparent; box-shadow: inset 0 0 0 8px var(--flowly-accent-primary); transform: scale(1.12); }
    100% { background-color: var(--flowly-accent-primary); box-shadow: inset 0 0 0 8px var(--flowly-accent-primary); transform: scale(1); }
}
@keyframes checkbox-ring {
    0%   { opacity: 0.55; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes checkbox-unfill {
    0%   { background-color: transparent; border-style: solid; border-color: var(--flowly-accent-primary); box-shadow: inset 0 0 0 8px var(--flowly-accent-primary); transform: scale(0.92); }
    100% { background-color: transparent; box-shadow: inset 0 0 0 0 var(--flowly-accent-primary); transform: scale(1); }
}
@keyframes checkbox-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}
@keyframes checkbox-tick {
    0%   { opacity: 0; clip-path: inset(100% 0 0 0); }
    60%  { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Collapse button */
.task-collapse-btn {
    min-width: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 3px; margin-left: 4px;
    color: var(--flowly-text-tertiary, rgba(255,255,255,0.38)); flex-shrink: 0;
    border: none; background: transparent; cursor: pointer;
    font-size: calc(11px * var(--flowly-text-k)); font-weight: 700;
    transition: color 0.15s ease, transform 0.15s ease;
}

.task-collapse-btn:hover { color: var(--flowly-accent-info); }
.task-collapse-btn span  { font-size: var(--flowly-text-2xs); opacity: 0.8; }

/* Task label */
.task-label {
    font-size: var(--flowly-text-sm); line-height: 1.55;
    color: var(--flowly-task-label-color, rgba(255, 255, 255, 0.85));
    width: 100%; cursor: text; transition: color 0.35s ease, opacity 0.35s ease;
}

.task-item-timer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-left: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--flowly-task-timer-color, rgba(255, 255, 255, 0.36));
    line-height: 1;
    flex: 0 0 auto;
    vertical-align: middle;
    opacity: 0.64;
    transform: none;
    transition: opacity 120ms ease,
                color 120ms ease;
}

.task-item:hover .task-item-timer-btn,
.task-item:focus-within .task-item-timer-btn,
.task-item-timer-btn.is-running {
    opacity: 0.94;
}

.task-item-timer-btn:hover,
.task-item-timer-btn.is-running {
    background: transparent;
    color: var(--flowly-accent-primary);
}

.task-item-timer-btn svg,
.task-item-timer-btn i {
    width: 11px !important;
    height: 11px !important;
    stroke: currentColor;
}

/* Task com timer ativo */
.task-item.timer-running {
    background: rgb(var(--flowly-accent-warning-rgb) / 0.1);
    border-radius: calc(6px * var(--flowly-radius-k));
    box-shadow: inset 3px 0 0 var(--flowly-accent-warning);
}
.task-item.timer-running .task-label {
    color: var(--flowly-text-primary, rgba(255, 255, 255, 0.97));
}
.task-item.timer-running .task-timer-meta,
.task-item.timer-running .task-item-timer-btn {
    color: var(--flowly-accent-warning);
    opacity: 1;
}

.task-label[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.2));
    font-style: normal;
}

/* .task-completed: classe JS no span de texto. O line-through vem do pai
   (.task-item.is-done .task-label) — não duplicar aqui pra evitar a regra
   cascade gerar "line-through line-through" que browsers desenham como
   DOIS traços paralelos (parece strikethrough+underline). */
.task-completed {
    color: var(--flowly-task-done-text, rgba(255, 255, 255, 0.45));
}

.task-label[contenteditable="true"] {
    outline: none;
    background: rgb(var(--flowly-accent-primary-rgb) / 0.08);
    border-radius: calc(3px * var(--flowly-radius-k)); padding: 0 3px;
    box-shadow: 0 0 0 1.5px rgb(var(--flowly-accent-primary-rgb) / 0.25);
}

/* Color dot system */
.task-label.color-default { --task-color: transparent; }
.task-label.color-blue    { --task-color: var(--flowly-accent-info); }
.task-label.color-green   { --task-color: var(--flowly-accent-success); }
.task-label.color-yellow  { --task-color: var(--flowly-tag-yellow); }
.task-label.color-orange  { --task-color: var(--flowly-accent-warning); }
.task-label.color-red     { --task-color: var(--flowly-accent-danger); }
.task-label.color-purple  { --task-color: var(--flowly-accent-purple); }

.task-label::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--task-color, transparent);
    margin-right: 6px; vertical-align: middle; flex-shrink: 0;
}

.task-label.color-default::before { display: none; }

/* Color fallback for non-label elements */
.color-blue:not(.task-label)   { color: var(--flowly-accent-info); }
.color-green:not(.task-label)  { color: var(--flowly-accent-success); }
.color-yellow:not(.task-label) { color: var(--flowly-tag-yellow); }
.color-orange:not(.task-label) { color: var(--flowly-accent-warning); }
.color-red:not(.task-label)    { color: var(--flowly-accent-danger); }
.color-purple:not(.task-label) { color: var(--flowly-accent-purple); }

/* Drag handle — visível no hover, sutil mas claro */
.drag-handle {
    flex-shrink: 0;
    width: 14px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; cursor: grab;
    color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.4));
    margin-right: 2px;
    transition: opacity 140ms ease, color 100ms ease;
    order: -1;
    border-radius: calc(3px * var(--flowly-radius-k));
}

.task-item:hover .drag-handle,
.task-item:focus-within .drag-handle,
.task-item--project-header:hover .drag-handle { opacity: 0.6; }
.drag-handle:hover { opacity: 1 !important; color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.85)); background: var(--flowly-bg-glass-strong, rgba(255,255,255,0.05)); }
.drag-handle:active { cursor: grabbing; }

/* Quick task input */
.quick-task-input {
    background: transparent; border: none;
    padding: 6px 8px; color: var(--flowly-text-primary, #fff);
    width: 100%; outline: none;
    font-size: var(--flowly-text-sm); font-family: inherit;
}

.quick-task-input::placeholder { color: var(--flowly-text-tertiary, rgba(255, 255, 255, 0.3)); }

.quick-task-container {
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.02));
    border: 1px dashed var(--flowly-border, rgba(255, 255, 255, 0.08));
    border-radius: calc(8px * var(--flowly-radius-k)); padding: 4px 8px;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.quick-task-container:hover {
    background: var(--flowly-bg-glass-hover, rgba(255, 255, 255, 0.04));
    border-color: var(--flowly-border-strong, rgba(255, 255, 255, 0.14));
}

.quick-task-container:focus-within {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.05);
    border: 1px solid rgb(var(--flowly-accent-primary-rgb) / 0.35);
}

.quick-task-stub {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; margin: 4px 0 6px;
    border-radius: calc(8px * var(--flowly-radius-k));
    border: 1px dashed var(--flowly-border-subtle, rgba(255, 255, 255, 0.08));
    background: var(--flowly-bg-glass, rgba(255, 255, 255, 0.015));
    color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.38));
    font-size: calc(12px * var(--flowly-text-k)); cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    user-select: none;
}

.quick-task-stub:hover {
    background: rgb(var(--flowly-accent-primary-rgb) / 0.06);
    border-color: rgb(var(--flowly-accent-primary-rgb) / 0.28);
    color: var(--flowly-text-secondary, rgba(255, 255, 255, 0.72));
}

.quick-task-stub__icon { width: 13px; height: 13px; stroke-width: 2; opacity: 0.8; }

/* Modal overlay */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(var(--flowly-blur-modal));
    -webkit-backdrop-filter: blur(var(--flowly-blur-modal));
    display: none;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s; z-index: 9999;
}

.modal-overlay.show { display: flex; opacity: 1; pointer-events: all; }

.modal-content {
    /* Overlay flutuante: token dedicado, imune ao override inline do theme-ai
       (elevated-hover vira glass 0.05 e o painel sumia — scrim fazia o fundo). */
    background: var(--flowly-bg-overlay, rgba(18, 19, 26, 0.92));
    border: 1px solid var(--flowly-border-subtle);
    border-radius: var(--flowly-radius-lg); padding: 28px;
    width: 90%; max-width: 400px;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    box-shadow: var(--flowly-shadow-xl);
    transform: scale(0.95);
    transition: transform var(--flowly-duration-base) var(--flowly-ease-out), opacity var(--flowly-duration-base) var(--flowly-ease-out);
}

.modal-overlay.show .modal-content { transform: scale(1); }

/* =============================================================
   FLOWLY-SHELL — wrapper de view com padding próprio
   (usado por views que não herdaram diretamente .app-main)
   ============================================================= */
.flowly-shell {
    padding: 28px 32px 48px;
    min-height: 100%;
    width: 100%;
    max-width: var(--flowly-shell-max);
    margin: 0 auto;
}
.flowly-shell--wide {
    max-width: var(--flowly-shell-max-wide);
}

@media (max-width: 768px) {
    .flowly-shell { padding: 16px 16px 40px; }
}

/* =============================================================
   FLOWLY-PAGE-HEADER — sub-elementos flat (Settings)
   ============================================================= */
.flowly-page-header-left  { flex: 1; min-width: 0; }
.flowly-page-actions      { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.flowly-page-kicker {
    font-size: var(--flowly-text-2xs); font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--flowly-accent-primary); margin-bottom: 4px;
}
.flowly-page-title {
    font-family: var(--flowly-font-display); font-size: calc(clamp(24px, 3.5vw, 38px) * var(--flowly-text-k));
    font-weight: var(--flowly-weight-black); letter-spacing: -0.05em; color: var(--flowly-text-primary);
    margin: 0 0 4px; line-height: 1.1;
}
.flowly-page-subtitle {
    font-size: var(--flowly-text-sm); color: var(--flowly-text-secondary); margin: 0; line-height: var(--flowly-line-base);
}

/* =============================================================
   FLOWLY-SOFT-PILL — tag/badge leve
   ============================================================= */

/* =============================================================
   BTN-INLINE — variante inline de botão
   ============================================================= */
/* =============================================================
   DESIGN SYSTEM — GUIA DE VIEWS
   ─────────────────────────────────────────────────────────────
   Como criar uma nova view no Flowly:

   HTML mínimo:
     <div class="flowly-shell flowly-shell--wide">
       <header class="flowly-page-header">
         <div class="flowly-page-header-left">
           <div class="flowly-page-kicker">SEÇÃO</div>
           <h1 class="flowly-page-title">Nome da View</h1>
           <p class="flowly-page-subtitle">Descrição breve.</p>
         </div>
         <div class="flowly-page-actions">
           <!-- botões de ação aqui -->
         </div>
       </header>

       <!-- KPIs (4, 3 ou 2 colunas) -->
       <div class="flowly-kpi-grid">
         <div class="flowly-stat-card flowly-stat-card--primary">…</div>
       </div>

       <!-- Seção com card padrão -->
       <div class="flowly-card">
         <div class="flowly-card__header">
           <span class="flowly-card__label">TÍTULO DA SEÇÃO</span>
           <span class="flowly-badge">badge</span>
         </div>
         <div class="flowly-card__body">
           <!-- conteúdo -->
         </div>
       </div>
     </div>

   Registrar a view:
     1. Adicionar <div id="minhaView" class="hidden"> no index.html
     2. Adicionar 'minhaView' no array views[] em navigation-runtime.js
     3. Adicionar botão no sidebar (index.html) com data-flowly-view="minha"
     4. Adicionar no btnMap em navigation-runtime.js: minha: 'btnMinha'
     5. Adicionar case no renderView() em view-runtime.js ou dispatcher.js
   ============================================================= */

/* ---- FLOWLY-EMPTY-STATE — estado vazio padrão ---- */
.flowly-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--flowly-space-12) var(--flowly-space-8);
    text-align: center;
    gap: var(--flowly-space-3);
    border-radius: var(--flowly-radius-lg);
    border: 1px dashed var(--flowly-border-subtle);
    background: linear-gradient(180deg,
        var(--flowly-bg-glass, rgba(255, 255, 255, 0.02)) 0%,
        var(--flowly-bg-glass, rgba(255, 255, 255, 0.01)) 100%);
    position: relative;
    overflow: hidden;
}
.flowly-empty-state::before {
    content: "";
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgb(var(--flowly-accent-primary-rgb) / 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.flowly-empty-state__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--flowly-bg-glass, rgba(255, 255, 255, 0.06)), var(--flowly-bg-glass, rgba(255, 255, 255, 0.02)));
    border: 1px solid var(--flowly-border, rgba(255, 255, 255, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--flowly-accent-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 var(--flowly-bg-glass-strong, rgba(255, 255, 255, 0.05));
}
.flowly-empty-state__icon i, .flowly-empty-state__icon svg {
    width: 24px;
    height: 24px;
}
.flowly-empty-state__title {
    font-size: calc(17px * var(--flowly-text-k));
    font-weight: 600;
    color: var(--flowly-text-primary);
    margin-top: 8px;
}
.flowly-empty-state__desc {
    font-size: var(--flowly-text-sm);
    color: var(--flowly-text-tertiary);
    max-width: 320px;
    line-height: 1.55;
}

/* =============================================================
   SOMBRAS DA ABA VISUAL — só entram fora do padrão (Suave não leva
   atributo, então o visual padrão não muda). theme-ai grava
   <html data-flowly-shadow="flat|float">.
   ============================================================= */
html[data-flowly-shadow="flat"] :is(.flowly-stat-card, .analytics-card, .goal-card, .kanban-card, .watch-card, .wk-card, .settings-card-shell, .an-stats) {
    box-shadow: none;
}
html[data-flowly-shadow="float"] :is(.flowly-stat-card, .analytics-card, .goal-card, .kanban-card, .watch-card, .wk-card, .settings-card-shell, .an-stats) {
    box-shadow: var(--flowly-shadow-md);
}
html[data-flowly-shadow="float"] :is(.flowly-stat-card, .analytics-card, .goal-card, .kanban-card, .watch-card, .wk-card):hover {
    box-shadow: var(--flowly-shadow-lg);
}