/* Extraído de css/_components.css (carrega logo depois dele — mesma posição na cascata). */
/* =============================================================
   EMPTY STATE ILUSTRATIVO
   ============================================================= */
.flowly-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    color: var(--flowly-text-tertiary);
    border-radius: calc(14px * var(--flowly-radius-k));
    border: 1px dashed var(--flowly-border-subtle);
    background:
        radial-gradient(circle at 50% 0%, rgb(var(--flowly-accent-primary-rgb) / 0.05) 0%, transparent 60%);
    animation: flowly-empty-in 540ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes flowly-empty-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.flowly-empty--sm { padding: 24px 16px; }
.flowly-empty--lg { padding: 60px 32px; }

.flowly-empty__art {
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    color: var(--flowly-accent-primary);
    opacity: 0.7;
    transition: opacity 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.flowly-empty--sm .flowly-empty__art { width: 56px; height: 56px; margin-bottom: 10px; }
.flowly-empty--lg .flowly-empty__art { width: 120px; height: 120px; margin-bottom: 24px; opacity: 0.85; }
.flowly-empty__art svg { width: 100%; height: 100%; display: block; }
.flowly-empty:hover .flowly-empty__art {
    opacity: 1;
    transform: translateY(-2px);
}

.flowly-empty__title {
    font-family: var(--flowly-font-display);
    font-size: calc(14px * var(--flowly-text-k));
    font-weight: 700;
    color: var(--flowly-text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}
.flowly-empty--lg .flowly-empty__title { font-size: calc(18px * var(--flowly-text-k)); }

.flowly-empty__hint {
    font-size: calc(12px * var(--flowly-text-k));
    color: var(--flowly-text-secondary);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}
.flowly-empty--lg .flowly-empty__hint { font-size: calc(13px * var(--flowly-text-k)); }

.flowly-empty__action {
    margin-top: 14px;
}
.flowly-empty__action button,
.flowly-empty__action .btn {
    font-family: inherit;
    font-size: calc(12px * var(--flowly-text-k));
    font-weight: 700;
    padding: 9px 18px;
    border-radius: calc(10px * var(--flowly-radius-k));
    border: none;
    background: linear-gradient(135deg, var(--flowly-accent-primary), rgb(var(--flowly-accent-primary-rgb) / 0.85));
    color: #000;
    cursor: pointer;
    box-shadow: 0 4px 12px rgb(var(--flowly-accent-primary-rgb) / 0.3);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
}
.flowly-empty__action button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgb(var(--flowly-accent-primary-rgb) / 0.45);
}
.flowly-empty__action button:active {
    transform: translateY(0) scale(0.98);
}