/* ============================================================================
   ZIP LIFESTYLE — style.css  (app principal: index.html)
   ============================================================================
   ÍNDICE (ordem da fonte):
     1. TOKENS              :root + body.dark-mode (cores, tipografia, espaços)
     2. RESET / PWA fixes
     3. LAYOUT              body, .sidebar, .main, .mobile-header, .bottom-nav, .view
     4. AUTH                tela de login (.auth-banner / .auth-rings)
     5. WIDGETS / CARDS     .widget, .widget-special, hosts dos widgets
     6. CALENDÁRIO / HERO / ADD-SHEET / MODAIS
     7. CAMADAS "DESIGN SYSTEM" (histórico): ZIP DESIGN SYSTEM, PALETTE v4,
        DESIGN SYSTEM v5/v6 — overrides com !important empilhados ao longo do tempo.
     8. >>> BACKGROUND DO APP <<<  (NO FIM do arquivo) — ÚNICA fonte do FUNDO.

   ⚠️  FUNDO DO APP: para mudar a cor/textura do fundo, edite SOMENTE a seção
       "BACKGROUND DO APP" no FIM deste arquivo. Os tokens --bg-app/--bg-base
       são definidos só lá (de propósito, para vencer a cascata).
   ⚠️  NÃO REORDENAR regras deste arquivo: a cascata com !important é sensível;
       reordenar já quebrou o design antes (ver memória do projeto). Mudanças =
       editar no lugar ou acrescentar no fim.
   ============================================================================ */
:root {
    /* Colors - Zip Premium Design System (Light Mode) */
    /* --bg-app / --bg-base: ver "BACKGROUND DO APP" (única fonte, no fim do arquivo) */
    --bg-card: #ffffff;         /* Pure white cards for high contrast */
    --text-main: #1d1d1f;       /* Apple ink — quase-preto neutro */
    --text-sec: #6e6e73;        /* Cinza secundário neutro (Apple) */
    --primary: #4d7c0f;         /* Elegant dark lime green for readable text */
    --green-lime: #b3ff1a;      /* Zip brand neon lime — for badges/indicators */
    --lime: #b3ff1a;            /* Neon lime helper */
    --primary-hover: #1d1d1f;   /* Ink on hover */
    --primary-light: rgba(179, 255, 26, 0.15);
    --danger: #e8493f;
    --warning: #e6a000;
    --info: #0a84ff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow:    0 1px 2px rgba(0,0,0,0.03), 0 6px 20px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.06), 0 24px 56px rgba(0,0,0,0.08);
    --border-color: rgba(0, 0, 0, 0.07); /* Hairline outlines */
    --glass-blur: blur(20px) saturate(180%);
    --accent-blue: #0a84ff;
    --sidebar-width: 280px;
    --text-muted: #a1a1a6;

    /* Type scale — compacta e refinada */
    --text-xs: 0.68rem;
    --text-sm: 0.78rem;
    --text-base: 0.92rem;
    --text-lg: 1.05rem;
    --text-xl: 1.15rem;
    --text-2xl: 1.35rem;
    --text-3xl: 1.6rem;
    --text-4xl: 1.9rem;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Radius — curvas contínuas, suaves */
    --radius-sm: 10px;
    --radius-md: 13px;           /* Buttons & inputs */
    --radius-lg: 20px;           /* Cards */
    --radius-full: 99px;         /* Pills, avatars */
}

/* === PWA Mobile Fix === */
* {
  -webkit-tap-highlight-color: transparent;
}
button, [role="button"], .btn, a, .clickable,
[onclick], label {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, select {
  touch-action: auto;
  font-size: max(16px, 1em); /* previne zoom no iOS */
  -webkit-user-select: text;
  user-select: text;
}

body.dark-mode {
    /* Colors - Zip Premium Design System (Dark Mode) */
    /* --bg-app / --bg-base: ver "BACKGROUND DO APP" (única fonte, no fim do arquivo) */
    --bg-card: #1a1a1c;         /* Grafite neutro (Apple dark card) */
    --text-main: #f5f5f7;       /* Branco suave neutro */
    --text-sec: #98989d;        /* Cinza secundário neutro */
    --primary: #b3ff1a;         /* Zip brand neon lime */
    --primary-hover: #ffffff;
    --primary-light: rgba(179, 255, 26, 0.15);
    --border-color: rgba(255, 255, 255, 0.08); /* Hairline dark borders */
    --text-muted: #6e6e73;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow:    0 1px 3px rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 16px 44px rgba(0,0,0,0.40);
    --shadow-lg: 0 8px 28px rgba(0,0,0,0.45), 0 28px 64px rgba(0,0,0,0.50);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; /* General body copy in Inter */
    -webkit-tap-highlight-color: transparent;
}

/* Premium Typography Overrides */
h1, h2, h3, h4, h5, h6,
.brand-text,
.user-info .name,
.user-info span.name,
.community-card-info strong,
.cal-header,
.date-item .day-num,
.widget-title h4,
.todo-group-title,
.tpl-info h4,
.modal-header,
.tutorial-slide h3,
.settings-section-title,
.settings-row-info strong,
.empty-state h3,
.btn,
.btn-primary,
.btn-secondary {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.02em;
}

body {
    /* fundo (background) definido na seção "BACKGROUND DO APP", no fim do arquivo */
    color: var(--text-main);
    height: 100dvh;
    overflow: hidden;
    transition: background .3s, color .3s;
}

body.is-dragging .widget:not(.dragging) * {
    pointer-events: none !important;
}

.brand {
    margin-bottom: 20px;
    text-align: center;
}

.sidebar .brand {
    text-align: left;
    margin-bottom: 25px;
    padding-left: 5px;
}

.mobile-header .brand {
    margin-bottom: 0;
}

.brand-text-grad {
    display: none !important;
}

.fullscreen-overlay {
    display: flex;
    height: 100dvh;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    overflow-y: auto;
    background: var(--bg-app);
}

#authScreen {
    background: var(--bg-app) !important;
}

.auth-container {
    display: flex;
    width: 100%;
    max-width: 940px;
    max-height: 95vh;
    background: var(--bg-card) !important;
    border-radius: 28px;
    box-shadow: var(--shadow);
    font-size: 1.7rem;
    color: #ea580c;
    margin-bottom: 4px;
    border: 1px solid var(--border-color);
}

/* ===== BANNER INK — o "ambiente" ZIP (anéis concêntricos = logo) ===== */
.auth-banner {
    flex: 1.05;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    color: #fafaf7;
    padding: 46px 44px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

/* brilho lime sutil, atrás dos anéis, dá profundidade ao preto */
.auth-banner::before {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(163, 255, 18, 0.10) 0%, transparent 70%);
    bottom: -120px;
    right: -90px;
    border-radius: 50%;
    pointer-events: none;
}

.auth-banner::after { content: none; }

.auth-rings {
    position: absolute;
    top: 50%;
    right: -90px;
    width: 440px;
    height: 440px;
    transform: translateY(-50%);
    will-change: transform;
    animation: authRingBreath 7s ease-in-out infinite;
    pointer-events: none;
}

.auth-rings svg { width: 100%; height: 100%; display: block; }
.auth-ring { fill: none; }
.auth-ring.r1 { stroke: #a3ff12; stroke-width: 1.5; opacity: 0.16; }
.auth-ring.r2 { stroke: #a3ff12; stroke-width: 2; opacity: 0.34; }
.auth-ring.r3 { stroke: #fafaf7; stroke-width: 6; opacity: 0.92; }
.auth-ring-core { fill: #a3ff12; }

@keyframes authRingBreath {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50%      { transform: translateY(-50%) scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-rings { animation: none; }
}

.auth-eyebrow {
    position: relative;
    z-index: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a3ff12;
}

.auth-banner-content { position: relative; z-index: 1; max-width: 17ch; }

.auth-banner-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}

.auth-banner-sub {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(250, 250, 247, 0.62);
    margin: 0;
    max-width: 28ch;
}

.auth-banner-foot {
    position: relative;
    z-index: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: rgba(250, 250, 247, 0.38);
}

/* marca (anéis) no topo do form — aparece sobretudo no mobile, onde o banner some */
.auth-form-mark { display: none; margin-bottom: 22px; }
.auth-form-mark svg { width: 40px; height: 40px; display: block; }

.auth-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: var(--text-main);
}

.auth-form-area {
    flex: 1;
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    background: var(--bg-card) !important;
    position: relative;
    z-index: 10;
}

.auth-form-area h2 {
    color: var(--text-main) !important;
}

.auth-form-area label,
.auth-form-area p.subtitle {
    color: var(--text-sec) !important;
}

.auth-switch {
    margin-top: 25px;
    font-size: .95rem;
    color: var(--text-sec);
    cursor: pointer;
    text-align: center;
    transition: .2s;
}

.auth-switch:hover {
    color: var(--text-main);
}

.auth-switch span {
    color: var(--primary);
    font-weight: 800;
}

.input-with-icon {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 11;
}

.input-with-icon i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 13;
    color: var(--text-sec);
}

.input-with-icon input {
    padding-left: 45px !important;
    width: 100%;
    box-sizing: border-box !important;
    position: relative;
    z-index: 12;
}

#appContainer {
    display: none;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

#appContainer.active {
    display: flex;
}

.mobile-header {
    display: none !important;
}

/* ============================================================
           SIDEBAR REDESIGN — compact, professional, collapsible
        ============================================================ */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-base);  /* Pure solid background */
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10002;
    height: 100dvh;
    overflow: hidden;
    transition: transform .3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translate3d(-100%, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.12);
    will-change: transform;
}

.sidebar.open {
    transform: translate3d(0, 0, 0);
}

/* ---- Logo / Brand (desktop top) ---- */
.sidebar-brand {
    padding: 12px 20px 6px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-logo {
    height: 38px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}


/* ---- Hero nav card (Meu LifeStyle) ---- */
.community-card {
    margin: 4px 16px 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s ease;
}

.community-card:hover {
    border-color: var(--text-main);
    background: var(--bg-base);
}

.community-card.active {
    background: var(--text-main);
    color: var(--bg-base);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

.community-card.active .main-icon {
    color: var(--primary) !important;
}

.community-card.active .community-card-info span {
    color: var(--text-sec);
    opacity: 0.8;
}

.community-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.community-card-info strong {
    font-size: 0.95rem;
    font-weight: 800;
}

.community-card-info span {
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-sec);
}

.community-card i.main-icon {
    font-size: 1.4rem;
    margin-right: 12px;
    color: var(--text-main);
}

/* ---- Scrollable nav section ---- */
.sidebar-menu-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.sidebar-menu-wrapper::-webkit-scrollbar {
    display: none;
}

/* Section label */
.menu-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-sec);
    opacity: 0.5;
    padding: 16px 8px 6px;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    list-style: none;
}

.menu-link {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    color: var(--text-sec);
    text-decoration: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
    font-weight: 600;
    font-size: .95rem;
    border: 1px solid transparent;
}

.menu-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    transition: color .2s;
}

.menu-link:hover {
    background: var(--bg-app);
    color: var(--text-main);
}

/* Option A — Minimalist Ink active links */
.menu-link.active {
    background: #0d0d0d;
    color: #ffffff;
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.menu-link.active i {
    color: var(--primary) !important;
}

body.dark-mode .menu-link.active {
    background: #ffffff;
    color: #0d0d0d;
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .menu-link.active i {
    color: #0d0d0d !important;
}

/* ---- Fixed footer zone ---- */
.sidebar-footer {
    flex-shrink: 0;
    padding: 12px 16px 20px;
    border-top: 1px solid var(--border-color);
}

.support-card-sidebar {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
    margin-bottom: 6px;
}

.support-card-sidebar:hover {
    border-color: var(--text-main);
    background: var(--bg-base);
}

.support-card-sidebar .title {
    font-weight: 700;
    color: var(--text-main);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.support-card-sidebar .title i {
    color: #25d366;
    font-size: 1.2rem;
}

.support-card-sidebar .subtitle {
    font-size: 0.72rem;
    color: var(--text-sec);
}

.mobile-only {
    display: none !important;
}

.desktop-only {
    display: flex;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    will-change: opacity;
}

.sidebar-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    width: 100%;
    background: var(--bg-app);
}

.sidebar .user-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 20px !important;
    padding: 12px;
    border-radius: 18px;
    background: var(--bg-app);
    cursor: pointer;
    transition: all .3s ease;
    border: 1px solid var(--border-color);
}

.user-badge:hover {
    border-color: var(--primary);
    background: var(--bg-base);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid var(--bg-app);
    background: #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
}

.user-info span.name {
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info span.city {
    font-size: .75rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cal-wrapper {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    padding: 0;
    transition: .3s;
    z-index: 100;
    width: 100%;
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px clamp(16px, 3vw, 32px) 10px;
    font-weight: 900;
    color: var(--text-main);
    font-size: var(--text-xl);
    letter-spacing: -0.5px;
}

.cal-header button {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
    color: var(--text-sec);
    padding: 8px 16px;
    transition: all .2s;
}

.cal-header button:hover {
    color: var(--primary);
    background: var(--primary-light);
    border-color: var(--primary);
}

.date-picker {
    display: flex;
    overflow-x: auto;
    padding: 8px clamp(16px, 3vw, 32px) 8px;
    gap: 8px;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    scroll-behavior: smooth;
}

.date-picker::-webkit-scrollbar {
    display: none;
}

.date-picker.active-drag {
    cursor: grabbing;
    scroll-behavior: auto;
}

.date-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 68px;
    cursor: pointer;
    padding: 8px 6px;
    border-radius: var(--radius-md);
    color: var(--text-sec);
    font-weight: 600;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    background: var(--bg-base);
    position: relative;
    font-size: var(--text-sm);
}

.date-item .day-num {
    font-size: var(--text-base);
    font-weight: 900;
    line-height: 1.2;
}

/* "Today" indicator dot */
.date-item.today::after {
    content: '';
    position: absolute;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-main);
    opacity: 0.6;
}

.date-item.active.today::after {
    background: #0d0d0d !important;
    opacity: 0.9 !important;
}


@media (hover: hover) {
    .date-item:hover {
        background: var(--bg-app);
        color: var(--text-main);
        border-color: var(--text-main);
        transform: translateY(-2px);
    }
}

/* Option A — Vibrant Lime Glow Active Day */
.date-item.active {
    background: var(--green-lime) !important;
    color: #0d0d0d !important;
    box-shadow: 0 10px 25px rgba(163, 255, 18, 0.35);
    transform: translateY(-6px) scale(1.04);
    border-color: transparent;
    font-weight: 800;
}

body.dark-mode .date-item.active {
    box-shadow: 0 10px 28px rgba(163, 255, 18, 0.5);
}

/* Calendar Status Icons */
.date-item .status-icon-bolt {
    color: var(--primary);
}

.date-item .status-icon-done {
    color: var(--primary);
}

.date-item .status-icon-pending {
    color: #000000;
}

body.dark-mode .date-item .status-icon-pending {
    color: #ffffff !important;
}

.date-item .status-icon-future {
    color: #3b82f6;
    opacity: 0.8;
}

.date-item .status-icon-minus {
    color: var(--text-sec);
    opacity: 0.3;
}

/* All text and icons inside active item become pitch-black for maximum contrast */
.date-item.active i,
.date-item.active span,
.date-item.active .day-num {
    color: #0d0d0d !important;
    opacity: 1 !important;
}

.content-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: clamp(20px, 3vw, 48px) clamp(16px, 3vw, 40px);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

@media (min-width: 769px) {
    .content-scroll {
        padding-top: 10px;
    }
}

@media (max-width: 768px) {
    .content-scroll {
        padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px)) !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .content-scroll::-webkit-scrollbar {
        display: none !important;
    }
}

/* Styled scrollbars (webkit) — desktop only */
@media (min-width: 769px) {
    .content-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .content-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .content-scroll::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }

    .content-scroll::-webkit-scrollbar-thumb:hover {
        background: var(--text-sec);
        opacity: 0.4;
    }
}

.view {
    display: none;
    animation: fadeIn .4s ease-out;
}

.view.active {
    display: block;
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 2px;
}

.view-header h2 {
    font-size: var(--text-4xl);
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.view-header p {
    font-size: var(--text-sm);
    color: var(--text-sec);
    font-weight: 500;
    margin-top: 3px;
}

.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-glow {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0.2;
    }
}

@keyframes loading-slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(250%);
    }
}

.top-progress-container {
    width: 100%;
    background: var(--border-color);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.top-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d0d0d, var(--primary));
    transition: width .6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
    border-radius: 5px;
}

.btn-primary {
    background: #0d0d0d;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    background: #1a1a1a;
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

body.dark-mode .btn-primary {
    background: var(--green-lime) !important;
    color: #0d0d0d !important;
    box-shadow: 0 4px 15px rgba(163, 255, 18, 0.25) !important;
}

body.dark-mode .btn-primary:hover {
    background: #ffffff !important;
    color: #0d0d0d !important;
    box-shadow: 0 8px 28px rgba(255, 255, 255, 0.35) !important;
}

.btn-secondary {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.btn-secondary:hover {
    border-color: var(--text-main);
    background: var(--bg-app);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

body.dark-mode .btn-secondary:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-sec);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: .2s;
}

.btn-icon:hover {
    color: var(--text-main);
    background: var(--border-color);
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
    width: 100%;
}

.form-group label {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-sec);
    margin-bottom: 6px;
}

.form-control,
input[type="date"],
input[type="time"],
select {
    width: 100%;
    /* box-sizing + min-width:0 impedem que o padding (e a largura intrínseca do
       input[type=date] no mobile) estourem a largura do container e criem scroll
       horizontal na tela. */
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--bg-app);
    outline: none;
    transition: .3s;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

/* iOS/Safari dão ao input[type=date|time] uma largura intrínseca que estoura o
   container e cria scroll horizontal. appearance:none + min-width:0 deixam encolher.
   (Só date/time — NÃO select, que perderia a setinha nativa.) */
input[type="date"],
input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}

/* ============================================================
   NOVA TRANSAÇÃO — modal imersivo (ztx-)
   ============================================================ */
.modal-content.ztx-modal { padding: 0 !important; max-width: 420px; }
.ztx-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 4px; }
.ztx-head h3 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--text-main); letter-spacing: -.02em; }
.ztx-close { color: var(--text-sec); }

/* alternador Despesa / Receita */
.ztx-type { display: flex; gap: 8px; padding: 10px 22px 0; }
.ztx-type-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border-radius: 13px; border: 1.5px solid var(--border-color);
    background: var(--bg-app); color: var(--text-sec);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .9rem; cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
}
.ztx-type-btn.is-expense.active { background: rgba(192, 57, 43, .10); border-color: #C0392B; color: #C0392B; }
.ztx-type-btn.is-income.active { background: rgba(90, 148, 0, .12); border-color: var(--primary); color: var(--primary); }

/* valor grande e central */
.ztx-amount-wrap { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 24px 22px 16px; }
.ztx-currency { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--text-sec); }
.ztx-amount {
    border: none; background: transparent; outline: none; width: 100%; max-width: 240px; box-sizing: border-box;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 2.5rem; letter-spacing: -.03em;
    color: var(--text-main); text-align: center; padding: 0; -moz-appearance: textfield;
}
.ztx-amount::-webkit-outer-spin-button, .ztx-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ztx-amount::placeholder { color: var(--border-color); }

/* campos com ícone (descrição / data / categoria / conta) */
.ztx-fields { display: flex; flex-direction: column; gap: 10px; padding: 2px 22px 6px; }
.ztx-field {
    position: relative; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    border: 1px solid transparent; border-radius: 13px; background: rgba(120, 120, 128, 0.10);
    padding: 0 12px; overflow: hidden; transition: border-color .18s, background .18s;
}
.ztx-field:focus-within { border-color: var(--primary); background: rgba(120, 120, 128, 0.15); }
.ztx-field-ico { flex-shrink: 0; width: 20px; text-align: center; color: var(--text-sec); font-size: .9rem; }
.ztx-field input, .ztx-field select {
    flex: 1; min-width: 0; width: 100%; box-sizing: border-box;
    border: none; background: transparent !important; outline: none;
    font-family: 'Outfit', sans-serif; font-size: .95rem; color: var(--text-main);
    padding: 13px 0; -webkit-appearance: none; appearance: none;
}
.ztx-field select { padding-right: 20px; cursor: pointer; }
.ztx-field-caret { position: absolute; right: 13px; pointer-events: none; color: var(--text-sec); font-size: .68rem; }
/* O input[type=date] dentro do campo do modal precisa ficar TOTALMENTE liso
   (sem fundo/borda/sombra próprios) p/ não virar uma "caixa dentro da caixa".
   Especificidade reforçada (inclui body.dark-mode e :focus) p/ vencer as regras
   globais de input[type=date] (≈ linhas 9201/9212/15418). */
.ztx-field input[type="date"],
.ztx-field input[type="date"]:focus,
body.dark-mode .ztx-field input[type="date"],
body.dark-mode .ztx-field input[type="date"]:focus {
    min-width: 0; max-width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.ztx-field input[type="date"] { color-scheme: light; }
body.dark-mode .ztx-field input[type="date"] { color-scheme: dark; }
.ztx-field input[type="date"]::-webkit-datetime-edit { background: transparent; }
.ztx-field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

.btn-primary.ztx-save {
    margin: 10px 22px 22px; width: auto; padding: 15px; border-radius: 14px; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* Recorrência no modal de transação (B2) */
.ztx-repeat { display: flex; flex-direction: column; gap: 10px; padding: 0 22px 4px; }
.ztx-repeat-cfg { display: flex; gap: 10px; }
.ztx-field-sm { flex: 1; padding: 0 12px; }
.ztx-field-sm .ztx-field-lbl { flex-shrink: 0; font-size: .76rem; color: var(--text-sec); font-weight: 600; }
.ztx-field-sm input { text-align: right; }

/* Itens de transação: categoria colorida + selo de repetição */
.zff-item { cursor: pointer; }
.zff-item-cat { font-weight: 600; }
.zff-item-rep { font-size: .72em; opacity: .7; margin-left: 6px; }

.form-control:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus {
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(163, 255, 18, 0.1);
}

.challenge-pin-input {
    letter-spacing: 6px !important;
    font-weight: 800 !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    background: var(--bg-app) !important;
    color: var(--text-main) !important;
    border: 2px solid var(--border-color) !important;
    transition: all 0.3s ease !important;
}

.challenge-pin-input:focus {
    background: var(--bg-card) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(163, 255, 18, 0.1) !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-color);
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background-color: var(--primary);
}

input:checked+.slider:before {
    transform: translateX(24px);
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

@media (min-width: 500px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 1100px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
}

@media (min-width: 1500px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

/* ===== SKELETON LOADERS ===== */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--border-color) 25%,
        rgba(0,0,0,0.04) 50%,
        var(--border-color) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

body.dark-mode .skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.05) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.widget-skeleton {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    grid-column: span 1;
    min-height: 130px;
}

.widget-skeleton-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.widget-skeleton-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.widget-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-skeleton-line-title {
    height: 14px;
    width: 60%;
}

.widget-skeleton-line-sub {
    height: 11px;
    width: 40%;
}

.widget-skeleton-body {
    height: 12px;
    width: 80%;
}

.widget-skeleton-footer {
    height: 32px;
    border-radius: var(--radius-sm);
    margin-top: auto;
}

/* ===== END SKELETON LOADERS ===== */

.widget {
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);  /* Premium 20px card radius */
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    cursor: default;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: auto;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    min-width: 0;
}

body.dark-mode .widget {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.widget.late-habit {
    border: 2px solid #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

.widget input,
.widget textarea {
    user-select: text;
    -webkit-user-select: text;
}

@media (hover: hover) {
    .widget:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }
}

body.dark-mode .widget:hover {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.40),
        0 8px 24px rgba(0, 0, 0, 0.50),
        0 28px 52px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.widget.dragging {
    cursor: grabbing !important;
    opacity: 0.35 !important;
    border: 2px dashed var(--primary) !important;
    background: var(--primary-light) !important;
    box-shadow: none !important;
    transform: scale(0.98) !important;
    z-index: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Isolate Drag and Drop styling to the Drag Handle ONLY */
.drag-handle {
    cursor: grab !important;
    touch-action: none !important; /* Block scrolling when dragging on touch devices */
    padding: 10px !important;      /* Increase touch hit area */
    margin: -10px !important;     /* Offset padding to maintain original layout */
}

.drag-handle:active {
    cursor: grabbing !important;
}

.widget.drag-over {
    border: 2px dashed var(--primary) !important;
    box-shadow: 0 0 15px rgba(110, 200, 0, 0.2) !important;
    transform: scale(1.01) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Fix mobile drag polyfill ghost black borders/backgrounds */
.dnd-poly-dragged,
.dnd-poly-dragimage,
[class*="dnd-poly"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    background: #ffffff !important; /* Solid light background */
    border: 1.5px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: var(--radius-lg) !important;
    opacity: 0.95 !important;
}

body.dark-mode .dnd-poly-dragged,
body.dark-mode .dnd-poly-dragimage,
body.dark-mode [class*="dnd-poly"] {
    background: #1e1e1e !important; /* Solid dark background */
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Evita borda/foco preto ao tocar e arrastar cards no mobile */
.widget {
    outline: none !important;
}
.widget:focus,
.widget:active,
.widget:focus-visible {
    outline: none !important;
}

/* Evita que o iOS/Android arraste imagens/ícones individualmente (causa duplicação no topo direito) */
.widget i,
.widget img,
.widget a {
    -webkit-user-drag: none !important;
    user-drag: none !important;
}

.widget-special {
    border: none;
    color: #fff;
}

.widget-special .widget-actions-bottom {
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    padding-top: 8px;
    /* Não usar margin-top:auto — deixa o action bar colado ao conteúdo,
       evitando que fique solto na base de cards multi-row */
    margin-top: 0 !important;
}

/* Para cards especiais claros (c-blue, c-green, etc.), ajusta cor da borda do action bar */
.widget-special.c-blue .widget-actions-bottom,
.widget-special.c-green .widget-actions-bottom,
.widget-special.c-teal .widget-actions-bottom,
.widget-special.c-yellow .widget-actions-bottom,
.widget-special.c-purple .widget-actions-bottom,
.widget-special.c-red .widget-actions-bottom,
.widget-special.c-orange .widget-actions-bottom {
    border-top-color: var(--border-color) !important;
}

.widget-special .btn-icon-small,
.widget-special .drag-handle {
    color: rgba(255, 255, 255, 0.7);
}

.widget-special .btn-icon-small:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.widget-special-content {
    /* flex-grow em vez de height:100% — mantém o conteúdo no fluxo e deixa
       o action bar colado logo abaixo, sem ficar no fundo de cards altos */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}

.widget-special-content:hover {
    transform: scale(1.05);
}

.widget-special-content i {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.w-content-wrap {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

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

.widget-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: 0.3s;
}

.widget-title {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.widget-title h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 3px 0;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.widget-title p {
    font-size: 0.82rem;
    color: var(--text-sec);
    margin: 0;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-check-habit {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.btn-check-habit:hover {
    border-color: var(--text-sec);
}

.counter-controls {
    display: flex;
    align-items: center;
    background: var(--bg-app);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-color);
}

.counter-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.95rem;
}

.counter-btn:hover {
    background: var(--border-color);
    color: var(--text-main);
}

.counter-val {
    font-weight: 800;
    font-size: 0.95rem;
    width: 36px;
    text-align: center;
    color: var(--text-main);
}

.progress-bar {
    width: 100%;
    background: var(--bg-app);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.widget-actions-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    position: relative;
}

.btn-icon-small {
    background: transparent;
    border: none;
    color: var(--text-sec);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 0.9rem;
}

.btn-icon-small:hover {
    background: var(--bg-app);
    color: var(--text-main);
}

.widget.completed {
    opacity: 0.88;
    border-color: rgba(110, 200, 0, 0.25) !important;
    background: linear-gradient(180deg, var(--bg-base) 0%, rgba(163, 255, 18, 0.02) 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
}

body.dark-mode .widget.completed {
    border-color: rgba(163, 255, 18, 0.15) !important;
    background: linear-gradient(180deg, var(--bg-base) 0%, rgba(163, 255, 18, 0.01) 100%) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.widget.skipped {
    opacity: 0.85 !important;
    border: 2px dashed rgba(245, 158, 11, 0.4) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.02) 100%) !important;
    box-shadow: var(--shadow-sm) !important;
    animation: skipEntrance 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
    transition: all 0.3s ease !important;
}

body.dark-mode .widget.skipped {
    border-color: rgba(245, 158, 11, 0.25) !important;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.01) 100%) !important;
}

.widget.skipped .widget-icon,
.widget.skipped .counter-controls,
.widget.skipped h4 {
    opacity: 0.85;
}

/* Badge âmbar chique indicando que o hábito foi pulado */
.skipped-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(13, 13, 13, 0.07) !important;
    color: var(--text-main) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-family: 'Outfit', sans-serif;
}

body.dark-mode .skipped-badge {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #f3f4f6 !important;
}

@keyframes skipEntrance {
    0% { transform: scale(1); }
    50% { transform: scale(0.96) rotate(-0.5deg); }
    100% { transform: scale(0.98); }
}

@keyframes skipPop {
    0% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.3) rotate(18deg); }
    60% { transform: scale(0.85) rotate(-12deg); }
    100% { transform: scale(1) rotate(0); }
}

.btn-skip-habit-discrete.pop-anim {
    animation: skipPop 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-skip-habit-discrete.skipped i {
    transform: translateX(1px);
    transition: transform 0.2s ease;
}

.daily-textarea,
.global-textarea {
    width: 100%;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    resize: none;
    font-size: 16px;
    outline: none;
    color: var(--text-main);
    transition: 0.3s;
    font-family: 'Outfit', sans-serif;
    min-height: 70px;
    flex-grow: 1;
}

.daily-textarea:focus,
.global-textarea:focus {
    border-color: var(--primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.todo-group-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 25px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.todo-list-item:hover {
    border-color: var(--primary);
}

.todo-list-item.done {
    opacity: 0.6;
    background: transparent;
    border-style: dashed;
}

.todo-list-item.done .todo-text-content {
    text-decoration: line-through;
    color: var(--text-sec);
}

.todo-check-circle {
    font-size: 1.5rem;
    color: var(--text-sec);
    cursor: pointer;
    transition: 0.2s;
    margin-top: 2px;
}

.todo-check-circle.checked {
    color: #f59e0b;
}

.template-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 4px 5px 4px 4px;
    /* Fix clipping of borders on first item */
    scrollbar-width: thin;
}

.tpl-card {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

@media (hover: hover) {
    .tpl-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    .dark-mode .tpl-card:hover {
        background: #1e293b;
        border-color: var(--primary);
    }
}

/* Mobile active state instead of hover */
.tpl-card:active {
    border-color: var(--primary);
    transform: scale(0.98);
}

.tpl-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: var(--bg-app);
    color: var(--text-sec);
    transition: 0.3s;
}

.tpl-card:hover .tpl-icon-wrap {
    background: var(--primary-light);
    color: var(--primary);
}

.tpl-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tpl-info h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 2px 0;
}

.tpl-info p {
    font-size: 0.8rem;
    color: var(--text-sec);
    margin: 0;
}

.tpl-color-indicator {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid var(--bg-app);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.theme-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
    border: 3px solid transparent;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.theme-dot:hover {
    transform: scale(1.15);
}

.theme-dot.active {
    border-color: var(--text-main);
    transform: scale(1.2);
}

.modal-overlay {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease, pointer-events 0s 0.3s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modal-overlay.show {
    pointer-events: auto;
    transition: none;
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--bg-base);
    width: 100%;
    max-width: 480px;
    border-radius: 28px;
    padding: 32px;
    text-align: left;
    transform: scale(0.9) translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    scrollbar-width: thin;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.modal-overlay.show .modal-content {
    pointer-events: auto;
    transition: none;
    transform: scale(1) translateY(0);
}

/* Scrollbar do modal: fina, arredondada e RECUADA das bordas (sem setas e sem
   tocar nos cantos arredondados). Fica "dentro" do card de forma elegante. */
.modal-content::-webkit-scrollbar { width: 10px; }
.modal-content::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.modal-content::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.modal-content::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 99px;
    border: 3px solid transparent;       /* recua o thumb da borda via padding-box */
    background-clip: padding-box;
    min-height: 40px;
}
.modal-content::-webkit-scrollbar-thumb:hover { background: var(--text-sec); }
body.dark-mode .modal-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
body.dark-mode .modal-content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 1.4rem;
    font-weight: 800;
    flex-shrink: 0;
    color: var(--text-main);
    letter-spacing: -0.5px;
    
    /* Sticky Header Settings */
    position: sticky;
    top: -32px;
    margin-top: -32px;
    margin-left: -32px;
    margin-right: -32px;
    padding: 24px 32px 16px 32px;
    background: var(--bg-base);
    z-index: 100;
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}

.tutorial-carousel {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
    scroll-behavior: smooth;
}

.tutorial-slide {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease-in-out;
}

.tutorial-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(163, 255, 18, 0.15);
}

.tutorial-slide h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 10px;
}

.tutorial-slide p {
    font-size: 0.95rem;
    color: var(--text-sec);
    line-height: 1.5;
    padding: 0 10px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
    margin-bottom: 15px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: 0.3s;
    cursor: pointer;
}

.dot.active {
    background: var(--primary);
    width: 20px;
    border-radius: 4px;
}

.os-tab-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: var(--bg-app);
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
}

.os-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-sec);
    cursor: pointer;
    border-radius: 10px;
    transition: 0.3s;
}

.os-tab.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.install-step {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
    background: var(--bg-app);
    padding: 15px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.step-text {
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 500;
}

.step-text i {
    color: var(--primary);
    margin: 0 5px;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.color-picker,
.icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    justify-items: center;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-app);
    color: var(--text-main);
    margin-top: 5px;
    width: 100%;
}

.color-picker {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.icon-picker {
    max-height: 140px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.color-opt,
.icon-opt {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid transparent;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: .2s;
}

.color-opt:hover,
.icon-opt:hover {
    transform: scale(1.1);
}

.color-opt.selected,
.icon-opt.selected {
    border-color: var(--text-main);
    transform: scale(1.15);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.days-selector {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    margin-top: 5px;
}

.day-lbl {
    flex: 1;
    text-align: center;
    background: var(--border-color);
    border-radius: 10px;
    padding: 8px 0;
    font-size: .85rem;
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    transition: .2s;
    border: 1px solid transparent;
}

.day-lbl:hover {
    filter: brightness(0.9);
}

.day-check:checked+.day-lbl {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(163, 255, 18, 0.2);
}

.book-item,
.chal-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-app);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    transition: .2s;
}

.book-item:hover,
.chal-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.book-input {
    width: 65px;
    padding: 6px;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    outline: none;
    transition: .2s;
}

.book-input:focus {
    border-color: var(--primary);
}

#toastContainer {
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    right: 30px;
    z-index: 200000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--text-main);
    color: var(--bg-card);
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 600;
    opacity: 1;
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    white-space: normal;
    word-break: break-word;
    text-align: center;
    max-width: 100%;
    line-height: 1.4;
}

.toast.error {
    background: #ef4444;
    color: #fff;
}

.toast.success {
    background: var(--primary);
    color: #fff;
}

.resize-grid-btn {
    background: var(--bg-app);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    color: var(--text-main);
    font-weight: 800;
    font-size: 0.9rem;
}

.resize-grid-btn.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.resize-grid-btn:hover {
    border-color: var(--primary);
}


.stat-year-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.stat-year-lbl {
    width: 45px;
    font-weight: 800;
    color: var(--text-sec);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.stat-year-bar-wrap {
    flex-grow: 1;
    height: 12px;
    background: var(--bg-app);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
}

.stat-year-fill {
    height: 100%;
    border-radius: 6px;
    transition: 0.5s;
}

.stat-year-val {
    width: 50px;
    text-align: right;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-main);
}

.stat-nodata .stat-year-fill {
    background: #cbd5e1 !important;
}

.dark-mode .stat-nodata .stat-year-fill {
    background: #475569 !important;
}

.stat-nodata .stat-year-val {
    color: var(--text-sec);
    font-size: 0.8rem;
    font-weight: 600;
    width: 80px;
}

.pin-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 20px;
}

.pin-input {
    font-size: 2rem;
    letter-spacing: 15px;
    text-align: center;
    width: 200px;
    padding: 10px;
    background: var(--bg-app);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    outline: none;
    color: var(--text-main);
    transition: 0.3s;
    font-weight: 900;
    margin-bottom: 20px;
}

.pin-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(163, 255, 18, 0.1);
}

.chal-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 800;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    #appContainer {
        flex-direction: column;
    }

    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 16px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border-color);
        position: relative;
        width: 100%;
        z-index: 1000;
        will-change: transform;
    }

    .main {
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: 100dvh;
        width: 100%;
        overflow: hidden;
        background: var(--bg-base);
    }

    .content-scroll {
        flex-grow: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        height: 100dvh;
        border-radius: 0;
        border-right: 1px solid var(--border-color);
        background: var(--bg-base);
        transform: translate3d(-100%, 0, 0);
        padding: 0;
        /* layout is handled by child flex items */
        z-index: 10002;
        box-shadow: 20px 0 50px rgba(0, 0, 0, 0.1);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .sidebar.open {
        transform: translate3d(0, 0, 0);
    }

    .sidebar-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 10, 10, 0.35) !important;
    }

    /* sidebar-footer always visible on mobile */
    .sidebar-footer {
        display: flex !important;
        flex-direction: column;
    }

    .auth-container {
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
        border: none;
    }

    .auth-form-area {
        padding: 40px 20px;
        overflow-y: auto;
    }

    .auth-form-area h2 {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .auth-banner {
        display: none !important;
    }

    .auth-form-mark {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    .menu {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
    }

    .menu-link {
        flex-direction: row;
        text-align: left;
        padding: 10px 12px;
        border-radius: 10px;
        transform: none !important;
    }

    .menu-link i {
        font-size: 1.15rem;
        padding: 0;
        width: 24px;
    }

    .menu-link span {
        font-size: 0.95rem;
        display: inline !important;
        font-weight: 600;
        opacity: 1;
    }

    .menu-link:hover {
        background: var(--bg-app);
        transform: none !important;
        color: var(--text-main);
    }

    .menu-link.active {
        background: var(--primary-light);
        color: var(--primary);
        box-shadow: none;
        transform: none !important;
    }

    .menu-link.active i {
        background: transparent;
        transform: none;
        color: var(--primary);
    }

    .dark-mode .menu-link.active i {
        background: transparent;
        color: var(--primary);
    }

    .grid {
        gap: 8px;
        grid-template-columns: repeat(2, 1fr);
    }

    .widget {
        padding: 10px 10px 8px;
        border-radius: 16px;
        gap: 6px;
        min-height: 88px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .widget-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-right: 46px;
    }

    .widget-icon {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
        border-radius: 9px;
    }

    .widget-title h4 {
        font-size: 0.82rem;
        margin-bottom: 1px;
        line-height: 1.2;
    }

    .widget-title p {
        font-size: 0.67rem;
        line-height: 1.3;
    }

    .widget-header-actions {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .btn-check-habit {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }

    .widget-actions-bottom {
        padding-top: 6px;
        border-top: none;
        opacity: 0.75;
    }

    .widget-actions-bottom>div {
        gap: 2px !important;
    }

    .btn-icon-small {
        width: 25px;
        height: 25px;
        font-size: 0.75rem;
        padding: 0;
    }

    .counter-btn {
        width: 30px;
        height: 30px;
    }

    .counter-controls {
        width: 100%;
        justify-content: space-between;
        padding: 4px;
    }

    .view-header {
        margin-bottom: 6px;
        padding: 2px 0;
    }

    .view-header h2 {
        font-size: 1.1rem !important;
    }

    .btn-primary,
    .btn-secondary {
        padding: 8px 14px;
        font-size: 0.88rem;
        border-radius: 10px;
    }

    .cal-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        border-top: none !important;
        display: none; /* escondido no Início; JS mostra em Hoje/Organização */
    }

    .cal-header {
        padding: 4px 14px 2px !important;
        margin-top: 0 !important;
        font-size: 0.88rem;
        font-weight: 700;
        margin-bottom: 0;
    }

    .cal-header button {
        padding: 4px 8px;
        font-size: 0.8rem;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .date-picker {
        padding: 4px 12px 10px;
        gap: 5px;
    }

    .date-item {
        min-width: 38px;
        height: 56px;
        padding: 5px 2px;
        border-radius: 10px;
        border-width: 1px;
    }

    .date-item .day-num {
        font-size: 0.88rem;
        font-weight: 900;
    }

    .date-item span {
        font-size: 0.55rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 1px;
        opacity: 0.7;
        letter-spacing: 0.4px;
    }

    .date-item.active {
        box-shadow: 0 4px 12px rgba(143, 214, 0, 0.25);
        transform: translateY(-1px) scale(1.02);
    }

    .modal-overlay {
        pointer-events: none;
        transition: pointer-events 0s 0.3s;
        align-items: flex-end;
        padding: 0;
    }

    .modal-content {
        max-height: 90dvh;
        padding: 16px 20px;
        border-radius: 24px 24px 0 0;
        width: 100%;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .modal-overlay.show .modal-content {
        pointer-events: auto;
        transition: none;
        transform: translateY(0) scale(1);
    }

    .modal-header {
        margin-bottom: 16px;
        font-size: 1.1rem;
        
        /* Sticky Mobile Settings */
        position: sticky;
        top: -16px;
        margin-top: -16px;
        margin-left: -20px;
        margin-right: -20px;
        padding: 16px 20px 10px 20px;
        background: var(--bg-base);
        z-index: 100;
        border-bottom: 1px solid var(--border-color);
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-group label {
        font-size: 0.88rem;
        margin-bottom: 4px;
    }

    .color-picker,
    .icon-picker {
        gap: 8px;
        padding: 8px;
        margin-top: 4px;
    }

    .days-selector {
        gap: 4px;
    }

    .day-lbl {
        padding: 6px 0;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .form-control,
    input[type="date"],
    input[type="time"],
    select {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .challenge-dates-row {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .challenge-dates-row .form-group {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        margin-bottom: 4px !important;
    }

    .color-opt,
    .icon-opt {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .auth-container {
        flex-direction: column;
        min-height: auto;
        max-width: 95%;
        border-radius: 20px;
        margin: auto;
    }

    .auth-banner {
        display: none;
    }

    .auth-form-area {
        padding: 30px 20px;
    }

    /* banner some no mobile → mostra a marca (anéis) no topo do form */
    .auth-form-mark {
        display: block;
    }

    #authTitle {
        font-size: 1.6rem !important;
    }

    .sidebar-brand {
        display: flex !important;
        padding-top: calc(24px + env(safe-area-inset-top, 20px));
        padding-bottom: 16px;
    }

    .sidebar .user-badge {
        margin-top: 12px;
    }
}

/* ================= DYNAMIC THEMES ================= */
.c-green .widget-icon {
    background: #ecfdf5;
    color: var(--primary);
}

.c-green .progress-fill {
    background: var(--primary);
}

.c-green.completed .btn-check-habit {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.c-green.completed .widget-icon {
    background: var(--primary);
    color: #fff;
}

.color-opt.c-green {
    background: var(--primary);
}

.c-blue .widget-icon {
    background: #eff6ff;
    color: #3b82f6;
}

.c-blue .progress-fill {
    background: #3b82f6;
}

.c-blue.completed .btn-check-habit {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.c-blue.completed .widget-icon {
    background: #3b82f6;
    color: #fff;
}

.color-opt.c-blue {
    background: #3b82f6;
}

.c-yellow .widget-icon {
    background: #fffbeb;
    color: #f59e0b;
}

.c-yellow .progress-fill {
    background: #f59e0b;
}

.c-yellow.completed .btn-check-habit {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.c-yellow.completed .widget-icon {
    background: #f59e0b;
    color: #fff;
}

.color-opt.c-yellow {
    background: #f59e0b;
}

.c-purple .widget-icon {
    background: #faf5ff;
    color: #8b5cf6;
}

.c-purple .progress-fill {
    background: #8b5cf6;
}

.c-purple.completed .btn-check-habit {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #fff;
}

.c-purple.completed .widget-icon {
    background: #8b5cf6;
    color: #fff;
}

.color-opt.c-purple {
    background: #8b5cf6;
}

.c-dark .widget-icon {
    background: #f3f4f6;
    color: #1f2937;
}

.c-dark .progress-fill {
    background: #1f2937;
}

.c-dark.completed .btn-check-habit {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}

.c-dark.completed .widget-icon {
    background: #1f2937;
    color: #fff;
}

.color-opt.c-dark {
    background: #1f2937;
}

.c-red .widget-icon {
    background: #fef2f2;
    color: #ef4444;
}

.c-red .progress-fill {
    background: #ef4444;
}

.c-red.completed .btn-check-habit {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

.c-red.completed .widget-icon {
    background: #ef4444;
    color: #fff;
}

.color-opt.c-red {
    background: #ef4444;
}

.c-orange .widget-icon {
    background: #fff7ed;
    color: #f97316;
}

.c-orange .progress-fill {
    background: #f97316;
}

.c-orange.completed .btn-check-habit {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

.c-orange.completed .widget-icon {
    background: #f97316;
    color: #fff;
}

.color-opt.c-orange {
    background: #f97316;
}

.c-teal .widget-icon {
    background: #f0fdfa;
    color: #14b8a6;
}

.c-teal .progress-fill {
    background: #14b8a6;
}

.c-teal.completed .btn-check-habit {
    background: #14b8a6;
    border-color: #14b8a6;
    color: #fff;
}

.c-teal.completed .widget-icon {
    background: #14b8a6;
    color: #fff;
}

.color-opt.c-teal {
    background: #14b8a6;
}

.c-pink .widget-icon {
    background: #fdf2f8;
    color: #ec4899;
}

.c-pink .progress-fill {
    background: #ec4899;
}

.c-pink.completed .btn-check-habit {
    background: #ec4899;
    border-color: #ec4899;
    color: #fff;
}

.c-pink.completed .widget-icon {
    background: #ec4899;
    color: #fff;
}

.color-opt.c-pink {
    background: #ec4899;
}

.c-indigo .widget-icon {
    background: #eef2ff;
    color: #6366f1;
}

.c-indigo .progress-fill {
    background: #6366f1;
}

.c-indigo.completed .btn-check-habit {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.c-indigo.completed .widget-icon {
    background: #6366f1;
    color: #fff;
}

.color-opt.c-indigo {
    background: #6366f1;
}

.c-lime .widget-icon {
    background: #f7fee7;
    color: #84cc16;
}

.c-lime .progress-fill {
    background: #84cc16;
}

.c-lime.completed .btn-check-habit {
    background: #84cc16;
    border-color: #84cc16;
    color: #fff;
}

.c-lime.completed .widget-icon {
    background: #84cc16;
    color: #fff;
}

.color-opt.c-lime {
    background: #84cc16;
}

.c-cyan .widget-icon {
    background: #ecfeff;
    color: #06b6d4;
}

.c-cyan .progress-fill {
    background: #06b6d4;
}

.c-cyan.completed .btn-check-habit {
    background: #06b6d4;
    border-color: #06b6d4;
    color: #fff;
}

.c-cyan.completed .widget-icon {
    background: #06b6d4;
    color: #fff;
}

.color-opt.c-cyan {
    background: #06b6d4;
}

.c-emerald .widget-icon {
    background: #ecfdf5;
    color: var(--primary);
}

.c-emerald .progress-fill {
    background: var(--primary);
}

.c-emerald.completed .btn-check-habit {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.c-emerald.completed .widget-icon {
    background: var(--primary);
    color: #fff;
}

.color-opt.c-emerald {
    background: var(--primary);
}

.c-fuchsia .widget-icon {
    background: #fdf4ff;
    color: #d946ef;
}

.c-fuchsia .progress-fill {
    background: #d946ef;
}

.c-fuchsia.completed .btn-check-habit {
    background: #d946ef;
    border-color: #d946ef;
    color: #fff;
}

.c-fuchsia.completed .widget-icon {
    background: #d946ef;
    color: #fff;
}

.color-opt.c-fuchsia {
    background: #d946ef;
}

.c-violet .widget-icon {
    background: #f5f3ff;
    color: #8b5cf6;
}

.c-violet .progress-fill {
    background: #8b5cf6;
}

.c-violet.completed .btn-check-habit {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #fff;
}

.c-violet.completed .widget-icon {
    background: #8b5cf6;
    color: #fff;
}

.color-opt.c-violet {
    background: #8b5cf6;
}

.c-rose .widget-icon {
    background: #fff1f2;
    color: #f43f5e;
}

.c-rose .progress-fill {
    background: #f43f5e;
}

.c-rose.completed .btn-check-habit {
    background: #f43f5e;
    border-color: #f43f5e;
    color: #fff;
}

.c-rose.completed .widget-icon {
    background: #f43f5e;
    color: #fff;
}

.color-opt.c-rose {
    background: #f43f5e;
}

.c-sky .widget-icon {
    background: #f0f9ff;
    color: #0ea5e9;
}

.c-sky .progress-fill {
    background: #0ea5e9;
}

.c-sky.completed .btn-check-habit {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.c-sky.completed .widget-icon {
    background: #0ea5e9;
    color: #fff;
}

.color-opt.c-sky {
    background: #0ea5e9;
}

.c-amber .widget-icon {
    background: #fffbeb;
    color: #f59e0b;
}

.c-amber .progress-fill {
    background: #f59e0b;
}

.c-amber.completed .btn-check-habit {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}

.c-amber.completed .widget-icon {
    background: #f59e0b;
    color: #fff;
}

.color-opt.c-amber {
    background: #f59e0b;
}

.dark-mode .widget-icon {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .widget.completed .widget-icon {
    color: #fff !important;
}

.widget-special.c-green {
    background: linear-gradient(135deg, #34d399, var(--primary));
    color: #fff;
}

.widget-special.c-blue {
    background: linear-gradient(135deg, #60a5fa, #2563eb);
    color: #fff;
}

.widget-special.c-yellow {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
}

.widget-special.c-purple {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    color: #fff;
}

.widget-special.c-dark {
    background: linear-gradient(135deg, #374151, #111827);
    color: #fff;
}

.widget-special.c-red {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
}

.widget-special.c-orange {
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: #fff;
}

.widget-special.c-teal {
    background: linear-gradient(135deg, #2dd4bf, #0f766e);
    color: #fff;
}

.widget-special.c-pink {
    background: linear-gradient(135deg, #f472b6, #db2777);
    color: #fff;
}

.widget-special.c-indigo {
    background: linear-gradient(135deg, #818cf8, #4f46e5);
    color: #fff;
}

.widget-special.c-lime {
    background: linear-gradient(135deg, #a3e635, #65a30d);
    color: #fff;
}

.widget-special.c-cyan {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    color: #fff;
}

.widget-special.c-emerald {
    background: linear-gradient(135deg, #34d399, var(--primary));
    color: #fff;
}

.widget-special.c-fuchsia {
    background: linear-gradient(135deg, #e879f9, #c026d3);
    color: #fff;
}

.widget-special.c-violet {
    background: linear-gradient(135deg, #a78bfa, #6d28d9);
    color: #fff;
}

.widget-special.c-rose {
    background: linear-gradient(135deg, #fb7185, #e11d48);
    color: #fff;
}

.widget-special.c-sky {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    color: #fff;
}

.widget-special.c-amber {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
}


/* --- FAB COMPONENT (with safe-area support) --- */
.fab-container {
    position: fixed;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    will-change: transform;
}

/* No mobile, começa escondido — JS mostra apenas em Hoje/Organização */
@media (max-width: 768px) {
    .fab-container {
        display: none;
    }
}

@media (min-width: 769px) {
    .fab-container {
        bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        right: 32px;
    }
}

.fab-main {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--primary);
    color: #0d0d0d;
    border: none;
    box-shadow:
        0 0 0 0 rgba(143, 214, 0, 0.4),
        0 8px 24px rgba(143, 214, 0, 0.45);
    font-size: 1.5rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.3s ease,
                background 0.2s;
    position: relative;
    animation: fab-pulse 2.8s ease-in-out infinite;
    will-change: transform, box-shadow;
}

@keyframes fab-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(143, 214, 0, 0.45), 0 8px 24px rgba(143, 214, 0, 0.4); }
    60%  { box-shadow: 0 0 0 12px rgba(143, 214, 0, 0), 0 8px 24px rgba(143, 214, 0, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(143, 214, 0, 0), 0 8px 24px rgba(143, 214, 0, 0.4); }
}

@media (min-width: 769px) {
    .fab-main {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
    }
}

.fab-main:hover {
    transform: scale(1.1);
    background: #0d0d0d;
    color: var(--primary);
    box-shadow: 0 12px 32px rgba(143, 214, 0, 0.5);
    animation: none;
}

.fab-container.active .fab-main {
    transform: rotate(45deg);
    background: #0d0d0d;
    color: var(--primary);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    animation: none;
}

.fab-container.active .fab-main:hover {
    transform: rotate(45deg) scale(1.08);
}

.fab-dropdown {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.96);
    transition: all 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

@media (min-width: 769px) {
    .fab-dropdown {
        bottom: 78px;
    }
}

.fab-container.active .fab-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.fab-tooltip {
    position: absolute;
    right: calc(100% + 14px);
    bottom: 50%;
    transform: translateY(50%) translateX(8px);
    background: var(--text-main);
    color: var(--bg-base);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.fab-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--text-main);
}

.fab-tooltip.show {
    opacity: 1;
    transform: translateY(50%) translateX(0);
}

.fab-action {
    background: var(--bg-base);
    color: var(--text-main);
    border: 1.5px solid var(--border-color);
    padding: 11px 18px 11px 14px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0,0,0,0.04);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.fab-action:hover {
    background: var(--primary);
    color: #0d0d0d;
    border-color: var(--primary);
    transform: translateX(-4px);
    box-shadow: 0 6px 20px rgba(143, 214, 0, 0.3);
}

.fab-action i {
    color: var(--primary);
    font-size: 1rem;
    transition: color 0.2s;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.fab-action:hover i {
    color: #0d0d0d;
}

/* Custom mobile overrides for Homepage FAB - matching Community publish FAB */
@media (max-width: 768px) {
    .fab-container {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        right: 16px !important;
        transition: bottom 0.3s ease !important;
    }
    .fab-main {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        background: #0d0d0d !important;
        color: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
        animation: none !important;
        font-size: 1.25rem !important;
    }
    body.dark-mode .fab-main {
        background: #ffffff !important;
        color: #0d0d0d !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    }
    .fab-container.active .fab-main {
        background: #0d0d0d !important;
        color: var(--primary) !important;
    }
    body.dark-mode .fab-container.active .fab-main {
        background: #ffffff !important;
        color: var(--primary) !important;
    }
    /* Adjust dropdown position since FAB button became 50px */
    .fab-dropdown {
        bottom: 60px !important;
    }
}

/* Large screen layout constraint */
@media (min-width: 1200px) {
    .content-scroll>* {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   EMPTY STATE — shown when widget grid is empty
============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    gap: 16px;
    animation: fadeIn .5s ease-out;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(163, 255, 18, 0.15);
}

.empty-state h3 {
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.empty-state p {
    font-size: var(--text-base);
    color: var(--text-sec);
    max-width: 280px;
    line-height: 1.5;
}

.empty-state .btn-primary {
    margin-top: 8px;
    padding: 14px 28px;
    font-size: var(--text-base);
}

/* ============================================================
   SKELETON LOADING
============================================================ */
@keyframes skeleton-shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg,
            var(--border-color) 25%,
            var(--bg-base) 50%,
            var(--border-color) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite ease-in-out;
    border-radius: 8px;
}

.skeleton-widget {
    border-radius: 20px;
    min-height: 160px;
    border: 1px solid var(--border-color);
}

/* ============================================================
   PROGRESS BAR — full-width header strip (no title)
============================================================ */
.view-progress-bar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px 14px;
    width: 100%;
}

@media (min-width: 769px) {
    .view-progress-bar-header {
        padding: 4px 2px 8px;
    }
}

/* Keep old pill class for any legacy uses */
.progress-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--bg-base);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    flex-shrink: 0;
    max-width: 180px;
}

/* ============================================================
   MOBILE MODAL BOTTOM SHEET
============================================================ */
@media (max-width: 768px) {
    .modal-overlay {
        pointer-events: none;
        transition: pointer-events 0s 0.3s;
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        border-radius: 24px 24px 0 0;
        max-height: 92dvh;
        width: 100%;
        max-width: 100%;
        transform: translateY(60px);
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* Bottom sheet drag handle */
    .modal-content::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 0 auto 12px;
        flex-shrink: 0;
    }

    .modal-overlay.show .modal-content {
        pointer-events: auto;
        transition: none;
        transform: translateY(0);
    }
}

/* ============================================================
   MOBILE HEADER — section title
============================================================ */
.mobile-header-title {
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
}

/* ============================================================
   SETTINGS VIEW — improved card layout
============================================================ */
.settings-section {
    background: var(--bg-card);
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.settings-section-title {
    font-size: var(--text-base);
    font-weight: 800;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section-title i {
    color: var(--primary);
    font-size: 1rem;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row-info strong {
    display: block;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-main);
}

.settings-row-info span {
    font-size: var(--text-sm);
    color: var(--text-sec);
    margin-top: 2px;
    display: block;
}

/* Mobile: compacta a tela de Ajustes p/ caber sem rolar e os botões do rodapé
   não ficarem sob o menu inferior fixo (#5). */
@media (max-width: 768px) {
    #view-layout .settings-section { padding: 15px 16px; margin-bottom: 12px; border-radius: 16px; }
    #view-layout .settings-section-title { margin-bottom: 10px; }
    #view-layout .settings-section > p { margin-bottom: 12px !important; }
    #view-layout .settings-row { padding: 9px 0; }
    #view-layout .settings-footer-minimal { gap: 2px; margin-top: 6px; padding: 4px 0 0; }
    #view-layout .settings-footer-link { padding: 8px 12px; }
    /* Garante respiro extra abaixo do último botão acima do menu inferior */
    #view-layout { padding-bottom: 12px; }
}

/* ============================================================
   MODERN LOADING SCREEN — Immersive Mesh Gradient
============================================================ */
.loader-screen {
    background: #ffffff !important;   /* Clean light background */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1000000;
    transition: opacity 0.3s ease-out;
    will-change: opacity;
}

body.dark-mode .loader-screen {
    background: #080808 !important;   /* Pure obsidian dark background to prevent light flash */
}

.loader-screen.fade-out {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.loader-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Minimalist Circular Spinner conforming to reference print */
.zip-spinner {
    width: 44px;
    height: 44px;
    border: 3.5px solid rgba(13, 13, 13, 0.05); /* very light trail */
    border-top: 3.5px solid var(--primary, #8fd600); /* signature yellow-green color */
    border-radius: 50%;
    animation: zip-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body.dark-mode .zip-spinner {
    border-color: rgba(255, 255, 255, 0.06);
    border-top-color: var(--primary, #b3ff1a);
}

@keyframes zip-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Elegant status message styling */
#loaderMessage {
    color: var(--text-sec) !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 5px 0 0 0;
    opacity: 0.85;
}

/* Custom Fixes */
* {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}



/* ============================================================
   TOAST NOTIFICATIONS
============================================================ */
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100010;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--bg-base);
    color: var(--text-main);
    padding: 14px 22px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-left: 5px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 280px;
    max-width: 400px;
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.3s;
    pointer-events: auto;
    animation: toast-in 0.5s forwards;
}

.toast.error {
    border-left-color: var(--danger);
}

.toast i {
    font-size: 1.2rem;
}

.toast.success i {
    color: #fff;
}

.toast.error i {
    color: #fff;
}

@keyframes toast-in {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    #toastContainer {
        top: 20px !important;
        bottom: auto !important;
        left: 20px;
        right: 20px;
        width: auto;
        max-width: none;
        transform: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        z-index: 1000010;
        pointer-events: none;
    }

    .toast {
        width: 100%;
        max-width: 450px;
        box-sizing: border-box;
        border-radius: 16px !important;
        background: var(--bg-card) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid var(--border-color) !important;
        color: var(--text-main) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        padding: 12px 18px !important;
        transform: translateY(-50px);
        animation: toast-in-mobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        gap: 12px;
        font-weight: 700;
        font-size: 0.9rem;
        pointer-events: auto;
    }

    .toast.success {
        border-left: 5px solid var(--primary) !important;
        background: var(--bg-card) !important;
        color: var(--text-main) !important;
    }

    .toast.error {
        border-left: 5px solid var(--danger) !important;
        background: var(--bg-card) !important;
        color: var(--text-main) !important;
    }

    .toast i {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .toast.success i {
        color: var(--primary) !important;
    }

    .toast.error i {
        color: var(--danger) !important;
    }
}

@keyframes toast-in-mobile {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ================= CUSTOM LOCAL PNG ICONS (CSS MASK) ================= */
.widget-img-icon {
    display: inline-block;
    width: 23px;
    height: 23px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    vertical-align: middle;
    transition: background-color 0.3s ease;
}

/* Tamanho específico de ícones no pick-selector de criação */
.icon-opt .widget-img-icon {
    width: 20px;
    height: 20px;
    background-color: currentColor;
}


/* ================================================================
   LEO WIZARD — Premium Onboarding Multi-Passo
   Design System: neon-lime light mode, bottom-sheet em mobile
   ================================================================ */

/* Overlay Custom */
#leoWizardModal {
    background: rgba(15, 23, 42, 0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0; /* Tiramos o padding no mobile para a bottom sheet ir até a borda */
}

/* Panel principal */
.leo-wizard-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 32px 32px 0 0;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 12px)) 20px;
    box-shadow: 0 -15px 40px rgba(15, 23, 42, 0.08);
    position: relative;
    max-height: 92dvh;
    overflow-y: hidden !important; /* Desativa rolagem vertical completamente */
    touch-action: none; /* Bloqueia gestos de puxar ou deslizar para baixo */
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

body.dark-mode .leo-wizard-panel {
    background: rgba(15, 23, 42, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.3);
}

@media (min-width: 769px) {
    #leoWizardModal {
        padding: 24px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .leo-wizard-panel {
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        padding: 36px 32px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
        max-height: 85vh;
    }
    body.dark-mode .leo-wizard-panel {
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
}

/* LEO Header */
.leo-wizard-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.leo-avatar-ring {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #b3ff1a), #84cc16);
    padding: 2px;
    box-shadow: 0 0 16px var(--primary-light, rgba(179, 255, 26, 0.25));
    display: flex;
    align-items: center;
    justify-content: center;
    animation: leoAvatarPulse 3s infinite ease-in-out;
}

@keyframes leoAvatarPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 16px var(--primary-light, rgba(179, 255, 26, 0.25));
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 24px var(--primary-light, rgba(179, 255, 26, 0.45));
    }
}

.leo-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #b3ff1a);
    font-size: 1.25rem;
}

body.dark-mode .leo-avatar-inner {
    background: #080808;
}

.leo-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leo-label {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    letter-spacing: -0.02em;
}

.leo-status {
    font-size: 0.78rem;
    color: var(--text-sec, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.leo-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--primary);
    animation: leoDotBlink 1.8s infinite ease-in-out;
}

@keyframes leoDotBlink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Progresso do LEO */
.leo-progress-track {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

body.dark-mode .leo-progress-track {
    background: rgba(255, 255, 255, 0.07);
}

.leo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #b3ff1a), #84cc16);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.leo-stepper-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}

.leo-stepper-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
}

.leo-stepper-dot-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    border: 2px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-sec);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.leo-stepper-dot-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-sec);
    white-space: nowrap;
    transition: color 0.3s ease;
    letter-spacing: 0.01em;
}

.leo-stepper-dot.active .leo-stepper-dot-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
    box-shadow: 0 0 0 4px var(--primary-light);
}

.leo-stepper-dot.active .leo-stepper-dot-label {
    color: var(--primary);
    font-weight: 800;
}

.leo-stepper-dot.done .leo-stepper-dot-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
}

.leo-stepper-connector {
    width: 28px;
    height: 2px;
    background: var(--border-color);
    margin-bottom: 22px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.leo-stepper-connector.done {
    background: var(--primary);
}

body.dark-mode .leo-stepper-dot-circle {
    background: var(--bg-base);
    border-color: rgba(255,255,255,0.12);
}

/* Transições fluidas de passos aceleradas por GPU */
.leo-step {
    display: none;
    opacity: 0;
    transform: translateY(16px) translateZ(0);
    flex-direction: column;
    gap: 20px;
    width: 100%;
    backface-visibility: hidden;
    perspective: 1000px;
}

.leo-step.active {
    display: flex;
    animation: leoStepFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes leoStepFadeIn {
    0% {
        opacity: 0;
        transform: translateY(16px) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

/* Bolha do LEO */
.leo-bubble-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.leo-msg-bubble {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.02);
    border-radius: 20px 20px 20px 4px;
    padding: 16px 20px;
    max-width: 95%;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-main, #0f172a);
    box-sizing: border-box;
}

body.dark-mode .leo-msg-bubble {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.015);
}

.leo-msg-bubble strong,
.leo-msg-bubble p strong {
    font-weight: 700;
    background: #1a2235;
    color: #b3ff1a !important;
    padding: 2px 7px;
    border-radius: 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin: 0 2px;
    display: inline;
}

/* Botões Custom */
.leo-btn-primary {
    width: 100%;
    background: var(--text-main, #0f172a);
    color: var(--bg-card, #ffffff);
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.leo-btn-primary:active {
    transform: scale(0.98);
}

/* Sem anel/borda verde de foco quando o card de notificações aparece (pré-seleção). */
.leo-btn-primary:focus,
.leo-btn-primary:focus-visible {
    outline: none !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}
body.dark-mode .leo-btn-primary:focus,
body.dark-mode .leo-btn-primary:focus-visible {
    box-shadow: 0 4px 16px rgba(179, 255, 26, 0.2);
}

body.dark-mode .leo-btn-primary {
    background: var(--primary, #b3ff1a);
    color: #0d0d0d;
    box-shadow: 0 4px 16px rgba(179, 255, 26, 0.2);
}

.leo-btn-primary i {
    font-size: 1.1rem;
}

.leo-btn-skip {
    width: 100%;
    background: transparent;
    color: var(--text-sec, #64748b);
    border: none;
    border-radius: 16px;
    padding: 12px 20px;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
    margin-top: -8px;
}

.leo-btn-skip:hover {
    color: var(--text-main, #0f172a);
}

/* Lista de Passos de Instalação */
.leo-install-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
}

.leo-install-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid rgba(0, 0, 0, 0.01);
    border-radius: 14px;
}

body.dark-mode .leo-install-step {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.01);
}

.leo-step-num {
    width: 24px;
    height: 24px;
    background: var(--text-main, #0f172a);
    color: var(--bg-card, #ffffff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

body.dark-mode .leo-step-num {
    background: var(--primary, #b3ff1a);
    color: #0d0d0d;
}

.leo-step-text {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-sec, #64748b);
}

.leo-step-text strong {
    color: var(--text-main, #0f172a);
    font-weight: 600;
}

/* Tabs de Seleção de Dispositivo (Minimalistas & Modernas) */
.leo-device-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 16px;
}

body.dark-mode .leo-device-tabs {
    background: rgba(255, 255, 255, 0.04);
}

.leo-device-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-sec, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.leo-device-tab.active {
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #0f172a);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

body.dark-mode .leo-device-tab.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main, #f3f4f6);
    box-shadow: none;
}

/* Preview de Notificação Lockscreen (Alta Fidelidade) */
.leo-preview-notif {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border-radius: 20px;
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: leoNotifFloat 4s infinite ease-in-out;
}

body.dark-mode .leo-preview-notif {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@keyframes leoNotifFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.leo-preview-header {
    display: flex;
    align-items: center;
    width: 100%;
}

.leo-preview-app-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--primary, #b3ff1a), #84cc16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-size: 0.65rem;
    margin-right: 8px;
}

.leo-preview-app-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leo-preview-time {
    font-size: 0.7rem;
    color: var(--text-sec, #64748b);
    margin-left: auto;
}

.leo-preview-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leo-preview-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.leo-preview-body {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-sec, #64748b);
}

/* Opções de Objetivo (Botões Minimalistas e Modernos) */
.leo-goal-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.leo-goal-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    gap: 16px;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.01);
}

.leo-goal-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary, #b3ff1a);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

body.dark-mode .leo-goal-btn:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.leo-goal-btn:active {
    transform: translateY(0) scale(0.98);
}

.leo-goal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.leo-goal-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.leo-goal-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.leo-goal-text span {
    font-size: 0.78rem;
    color: var(--text-sec, #64748b);
}

.leo-goal-arrow {
    color: var(--text-sec, #64748b);
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.leo-goal-btn:hover .leo-goal-arrow {
    transform: translateX(4px);
    color: var(--text-main, #0f172a);
}


/* ============================================================
   BOTTOM NAVIGATION (MOBILE/PWA ONLY)
============================================================ */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        display: grid;
        grid-template-columns: 0.8fr 1.2fr 1.1fr 1.2fr 0.8fr;
        align-items: center;
        padding: 3px 10px calc(5px + env(safe-area-inset-bottom, 0px)) 10px;
        height: calc(52px + env(safe-area-inset-bottom, 0px));
        z-index: 10001;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.04), 0 -6px 20px rgba(0,0,0,0.03);
        transition: background 0.3s;
        will-change: transform;
    }

    body.dark-mode .bottom-nav {
        background: rgba(16, 16, 18, 0.95);
        border-top-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 -1px 0 rgba(255,255,255,0.05), 0 -8px 24px rgba(0,0,0,0.3);
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--text-sec);
        text-decoration: none;
        cursor: pointer;
        width: 100%;
        height: 100%;
        min-width: 0;
        transition: color 0.2s ease;
        position: relative;
        border-radius: 10px;
        padding: 4px 2px;
        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-item i {
        font-size: 1.1rem;
        transition: transform 0.2s ease, color 0.2s ease;
        line-height: 1;
        width: 36px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        transition: background 0.25s ease, transform 0.2s ease, color 0.2s ease;
    }

    .bottom-nav-item span {
        font-size: 0.65rem;
        font-weight: 600;
        transition: color 0.2s ease, font-weight 0.2s ease;
        letter-spacing: 0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Active state: chip sutil ao redor do ícone — sem competir com a Ágora */
    .bottom-nav-item.active {
        color: var(--primary) !important;
    }

    .bottom-nav-item.active span {
        font-weight: 700;
    }

    .bottom-nav-item.active i {
        background: rgba(90,148,0,.10);
        border-radius: 12px;
        transform: none;
        filter: none;
    }

    body.dark-mode .bottom-nav-item.active i {
        background: rgba(179,255,26,.10);
    }

    .bottom-nav-item.active::after {
        display: none;
    }

    /* Ágora tab: destaque sutil — verde da marca persistente, sem pill */
    .bottom-nav-item.highlighted {
        position: relative;
        color: var(--primary) !important;
        -webkit-tap-highlight-color: transparent;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    /* Ícone SVG no botão highlighted: verde da marca sempre */
    .bottom-nav-item.highlighted .agora-icon-svg,
    .bottom-nav-item.highlighted i {
        color: var(--primary) !important;
        background: none !important;
        transform: none !important;
        transition: transform 0.18s ease;
    }

    .bottom-nav-item.highlighted span {
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--primary) !important;
    }

    .bottom-nav-item.highlighted::after {
        display: none !important;
    }

    .bottom-nav-item.highlighted:active {
        transform: scale(0.9);
    }

    .bottom-nav-item.highlighted.active {
        color: var(--primary) !important;
    }

    .bottom-nav-item.highlighted.active .agora-icon-svg,
    .bottom-nav-item.highlighted.active i {
        transform: scale(1.08) !important;
    }

    .bottom-nav-item.highlighted.active span {
        font-weight: 800;
    }

    /* Hide top menu hamburger button since navigation is now bottom bar based */
    .mobile-header button.btn-icon,
    .mobile-header button[onclick*="toggleMobileMenu"] {
        display: none !important;
    }

    /* Premium mobile notification badge styling */
    .bottom-nav-item {
        position: relative;
    }

    .bottom-nav-item .nav-badge {
        position: absolute;
        top: -6px;
        right: calc(50% - 24px); /* Perfect horizontal offset from icon center */
        background: #ff3b30;
        color: white;
        font-size: 0.65rem;
        font-weight: 900;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--bg-app, #ffffff);
        box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
        animation: navBadgePulse 2s infinite ease-in-out;
        z-index: 10;
        line-height: 1;
    }

    body.dark-mode .bottom-nav-item .nav-badge {
        border-color: #080808;
        box-shadow: 0 2px 8px rgba(255, 59, 48, 0.6);
    }

    @keyframes navBadgePulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
        100% {
            transform: scale(1);
        }
    }
}

/* ================= CARD FIXO DE NOTIFICAÇÕES ================= */
.widget-special.c-orange-gradient {
    background: linear-gradient(135deg, #ff7e40, #ff4b1f);
    color: #fff;
    box-shadow: 0 10px 20px rgba(255, 75, 31, 0.25);
    border: none;
    transition: all 0.3s ease;
}
.widget-special.c-orange-gradient button.btn-primary {
    transition: all 0.25s ease;
}
.widget-special.c-orange-gradient button.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
}
.bell-ringing-icon {
    animation: ringBell 2s ease-in-out infinite;
    display: inline-block;
}
@keyframes ringBell {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    60% { transform: rotate(0); }
}

/* ================= POPUP DE COMPARTILHAMENTO DE HÁBITO ================= */
.custom-share-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 210000;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-share-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.custom-share-modal-card {
    background: var(--bg-card, #ffffff);
    width: 100%;
    max-width: 420px;
    border-radius: 28px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color, #e2e8f0);
    transform: scale(0.9) translateY(30px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.custom-share-modal-overlay.active .custom-share-modal-card {
    transform: scale(1) translateY(0);
}

body.dark-mode .custom-share-modal-card {
    background: rgba(20, 20, 20, 0.9) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

.custom-share-modal-celebration {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.celebration-ring {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--primary-light);
    animation: pulseRing 2s infinite ease-in-out;
}

.celebration-icon-wrap {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #a3ff12);
    color: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 10px 25px rgba(143, 214, 0, 0.3);
    z-index: 1;
}

.trophy-pop {
    animation: popTrophy 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
}

@keyframes pulseRing {
    0% { transform: scale(0.95); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(0.95); opacity: 0.5; }
}

@keyframes popTrophy {
    0% { transform: scale(0.9) rotate(-8deg); }
    100% { transform: scale(1.1) rotate(8deg); }
}

.custom-share-modal-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-main, #0f172a);
    margin: 0;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.custom-share-modal-desc {
    font-size: 1rem;
    color: var(--text-main, #334155);
    line-height: 1.5;
    margin: 0;
    margin-bottom: 8px;
    font-weight: 500;
}

.custom-share-modal-subdesc {
    font-size: 0.86rem;
    color: var(--text-sec, #64748b);
    line-height: 1.45;
    margin: 0;
    margin-bottom: 24px;
    padding: 0 10px;
}

.custom-share-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.btn-share-confirm {
    width: 100%;
    padding: 14px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0d0d0d;
    background: linear-gradient(135deg, var(--primary), #a3ff12);
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(143, 214, 0, 0.2);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-share-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(143, 214, 0, 0.3);
    filter: brightness(1.05);
}

.btn-share-confirm:active {
    transform: translateY(0);
}

.btn-share-cancel {
    width: 100%;
    padding: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-sec, #64748b);
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

body.dark-mode .btn-share-cancel {
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-share-cancel:hover {
    background: var(--bg-app, #f8fafc);
    color: var(--text-main, #0f172a);
}

/* ============================================================
   IN-APP NOTIFICATIONS — floating, premium glassmorphism
   ============================================================ */
#appNotificationContainer {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 420px;
    pointer-events: none;
}

.app-notification {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    background: rgba(18, 18, 18, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 15px rgba(22, 163, 74, 0.15); /* Vibrant green glow */
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: appNotifSlideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-notification:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 20px rgba(22, 163, 74, 0.25);
}

.app-notif-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary, #22c55e), #15803d);
    color: #0d0d0d;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.app-notification.message .app-notif-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
}

.app-notification.like .app-notif-icon {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: #ffffff;
}

.app-notification.comment .app-notif-icon {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    color: #ffffff;
}

.app-notif-body {
    flex-grow: 1;
    overflow: hidden;
}

.app-notif-title {
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.2px;
    margin-bottom: 2px;
}

.app-notif-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-notif-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.app-notif-close:hover {
    color: #ffffff;
}

@keyframes appNotifSlideDown {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .mobile-header {
        display: none !important;
    }
}

/* ============================================================
   COMMUNITY PREVIEW WIDGET
============================================================ */
.widget-community-preview {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: clamp(16px, 3vw, 24px);
    padding-bottom: 12px; /* menos folga em branco logo após o carrossel (mantém pequena borda) */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.widget-community-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.widget-community-preview-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.3px;
    font-family: 'Outfit', sans-serif;
    overflow: hidden;
}

.widget-community-preview-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.widget-community-preview-title i {
    color: var(--primary);
    flex-shrink: 0;
}

/* ── Espaçamento UNIFORME entre os blocos do Início ──
   Cada bloco (comunidade, cards de ajuda, pomodoro) recebe a mesma folga inferior
   via o próprio container. :not(:empty) evita folga fantasma no desktop (onde a
   comunidade é renderizada na grade e estes containers ficam vazios). */
#homeCommunityPreview:not(:empty),
#homeHelpCards:not(:empty),
#homePomodoro:not(:empty) {
    margin-bottom: 12px;
}
#homeHelpCards:empty,
#homePomodoro:empty {
    display: none;
}

/* ── Cards de ajuda (Instalar/Notificações) como elemento do início ── */
#homeHelpCards .home-help-grid {
    margin: 0;
    width: 100%;
    grid-auto-rows: auto !important; /* cards compactos, sem o minmax(185px) padrão da grade */
}
#homeHelpCards .home-help-grid .widget-special {
    min-height: 0 !important;
}

/* ── Título da área de ferramentas do início ──
   Cabeçalho forte e neutro (deixa a home menos colorida), com um pequeno traço de
   acento à esquerda apenas como detalhe. */
.home-tools-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-main);
    margin: 6px 2px 14px;
    padding: 0;
}
.home-tools-title::before {
    content: '';
    width: 4px;
    height: 1.05em;
    flex-shrink: 0;
    border-radius: 99px;
    background: var(--primary);
}

/* ── Pomodoro como elemento fixo do início (não é mais widget de grade) ── */
.home-pomodoro-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm-b);
    overflow: hidden;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
.home-pomodoro-card .zpm-card {
    height: auto;
}

/* ── Botão "Ver meu progresso" no card de Sequência ── */
.streak-progress-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 8px;
    padding: 7px 8px;
    border-radius: 11px;
    border: 1.5px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
    position: relative;
    z-index: 1;
}
.streak-progress-btn i { font-size: 0.66rem; }
.streak-progress-btn:active {
    transform: scale(0.96);
    background: rgba(245, 158, 11, 0.2);
}
body.dark-mode .streak-progress-btn {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.35);
}
@media (max-width: 768px) {
    /* Correção definitiva do corte do botão:
       - Sequência (tem o botão a mais) assume ALTURA NATURAL → o botão sempre cabe.
       - Flow CRESCE para ocupar o resto da coluna → sem buraco entre os tiles.
       Nada depende de "caber na metade", então o overflow do card nunca corta. */
    .bento-tiles-col #bentoStreakTile {
        flex: 0 0 auto !important;
        padding: 14px 16px 16px !important;
    }
    .bento-tiles-col #bentoFlowTile {
        flex: 1 1 auto !important;
    }
    .bento-tiles-col #bentoStreakTile .bento-tile-val,
    .bento-tiles-col #bentoFlowTile .bento-tile-val {
        font-size: 38px !important;
    }
}

/* ============================================================
   TELA "MEU PROGRESSO" — sequência detalhada + estatísticas
   ============================================================ */
#view-progresso { padding-bottom: 40px; }

.prog-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 22px 16px 24px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(245,158,11,0.14), rgba(239,68,68,0.06));
    border: 1px solid rgba(245, 158, 11, 0.22);
}
.prog-hero-flame {
    font-size: 1.8rem;
    color: #f59e0b;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.4));
}
.prog-hero-num {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 3.4rem;
    line-height: 1;
    color: #b45309;
    letter-spacing: -0.04em;
}
body.dark-mode .prog-hero-num { color: #f59e0b; }
.prog-hero-lbl {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-sec);
}

.prog-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm-b);
    padding: 16px;
    margin-bottom: 16px;
}
.prog-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 14px;
}
.prog-section-title i { color: #f59e0b; }

/* Sequência por hábito */
.prog-habit-list { display: flex; flex-direction: column; gap: 8px; }
.prog-habit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
}
.prog-habit-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.prog-habit-streak {
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text-sec);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.prog-habit-streak.on { color: #ef4444; }
.prog-habit-streak i { font-size: 0.78rem; }
.prog-empty { text-align: center; color: var(--text-sec); font-size: 0.86rem; padding: 12px; }

/* Grade de semanas (heatmap) */
.prog-week-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 0.66rem;
    color: var(--text-sec);
    margin-bottom: 10px;
}
.prog-week-legend .prog-cell { width: 14px; height: 14px; cursor: default; }
.prog-weekdays {
    display: grid;
    grid-template-columns: 1fr repeat(7, 30px);
    gap: 6px;
    margin-bottom: 6px;
    padding-left: 0;
}
.prog-weekdays span {
    text-align: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-sec);
    grid-column: span 1;
}
.prog-weekdays span:first-child { grid-column: 1; }
.prog-weeks { display: flex; flex-direction: column; gap: 8px; }
.prog-week-row { display: flex; flex-direction: column; gap: 4px; }
.prog-week-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    color: var(--text-sec);
}
.prog-week-label { font-weight: 700; color: var(--text-main); }
.prog-week-now {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    padding: 1px 7px;
    border-radius: 99px;
}
.prog-week-count { margin-left: auto; font-weight: 600; }
.prog-week-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.prog-cell {
    aspect-ratio: 1 / 1;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-sec);
    background: var(--bg-app);
    border: 1px solid var(--border-color);
}
.prog-cell.l0 { background: var(--bg-app); }
.prog-cell.l1 { background: rgba(245, 158, 11, 0.22); color: #92400e; border-color: transparent; }
.prog-cell.l2 { background: rgba(245, 158, 11, 0.45); color: #78350f; border-color: transparent; }
.prog-cell.l3 { background: rgba(245, 158, 11, 0.7); color: #fff; border-color: transparent; }
.prog-cell.l4 { background: #f59e0b; color: #fff; border-color: transparent; }
.prog-cell.is-future { opacity: 0.4; color: var(--text-sec); }
.prog-cell.is-today { box-shadow: 0 0 0 2px #f59e0b; }

/* Título "Estatísticas" fora do card — acento laranja (diferente do verde das ferramentas) */
.prog-tools-title::before {
    background: #f59e0b;
}

/* Oculta o h4 interno do widget de stats quando renderizado na tela de progresso,
   pois o título agora vive fora do card (como .home-tools-title). */
.prog-stats-host .zstats > div:first-child h4,
.prog-stats-host .zstats > div:first-child > i {
    display: none;
}

/* Estatísticas integradas */
.prog-stats-host .widget-stats-host {
    background: transparent;
    padding: 0;
    border: none;
}

.widget-community-preview-link {
    font-size: var(--text-sm);
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.widget-community-preview-link:hover {
    opacity: 0.8;
    transform: translateX(3px);
}

.community-carousel-wrapper {
    position: relative;
    width: 100%;
}

.community-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-color, #e2e8f0);
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

body.dark-mode .community-scroll-btn {
    background: rgba(30, 41, 59, 0.95);
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.1);
}

.community-scroll-btn:hover {
    background: var(--primary);
    color: #0d0d0d;
    border-color: var(--primary);
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.community-scroll-btn.left {
    left: -10px;
}

.community-scroll-btn.right {
    right: -10px;
}

@media (max-width: 768px) {
    .community-scroll-btn {
        display: none !important;
    }
}

.community-posts-scroll-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 12px 16px;
    margin: -12px -16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.community-posts-scroll-row::-webkit-scrollbar {
    display: none;
}

.community-mini-post {
    flex: 0 0 270px;
    width: 270px;
    max-width: 270px;
    min-width: 270px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.community-mini-post-video-wrap {
    margin-top: 8px;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/9;
    border: 1px solid var(--border-color);
    background: #000;
}

.community-mini-post-video-wrap iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
}

body.dark-mode .community-mini-post {
    background: rgba(255, 255, 255, 0.015);
}

.community-mini-post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.community-mini-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.community-mini-post-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--primary);
}

.community-mini-post-author-name {
    font-size: var(--text-sm);
    font-weight: 750;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-mini-post-time {
    font-size: var(--text-xs);
    color: var(--text-sec);
    margin-left: auto;
    font-family: 'Inter', sans-serif;
}

.community-mini-post-content {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.45;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 38px;
    font-family: 'Inter', sans-serif;
}

.community-mini-post-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-xs);
    color: var(--text-sec);
    border-top: 1px dashed var(--border-color);
    padding-top: 8px;
    margin-top: auto;
    font-family: 'Inter', sans-serif;
}

.community-mini-post-action {
    display: flex;
    align-items: center;
    gap: 4px;
}

.community-mini-post-action i.active {
    color: #ec4899;
}

/* Flow Section Premium Redesign */
.flow-layout-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}


/* Responsive Helper Toggles */
.desktop-only {
    display: flex !important;
}
.mobile-only {
    display: none !important;
}


@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}

/* Premium Redesigned Flow Bento Grid Layout */
.flow-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 20px;
    width: 100%;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.flow-bento-stat-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 180px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flow-bento-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.flow-bento-stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(179, 255, 26, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

.flow-bolt-circle-glowing {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(179, 255, 26, 0.08);
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(179, 255, 26, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.flow-bento-stat-card:hover .flow-bolt-circle-glowing {
    transform: scale(1.05) rotate(10deg);
    box-shadow: 0 0 25px rgba(179, 255, 26, 0.35);
}

.flow-bolt-circle-glowing i {
    font-size: 2.2rem;
    color: var(--primary);
    filter: drop-shadow(0 0 6px var(--primary));
}

.flow-stat-label {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: 'Outfit', sans-serif !important;
}

.flow-personal-points-value {
    font-size: 3.6rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
    letter-spacing: -1.5px;
    font-family: 'Outfit', sans-serif !important;
}

.flow-stat-suffix {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.5px;
}

.flow-bento-info-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    min-height: 180px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flow-bento-info-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.flow-info-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.5px;
}

.flow-info-title i {
    color: var(--primary);
    font-size: 1.6rem;
}

.flow-info-description {
    color: var(--text-sec);
    font-size: 0.92rem;
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

.flow-badge-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.flow-badge-legend-pill {
    font-size: 0.76rem;
    font-weight: 750;
    padding: 6px 14px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.2px;
}

.flow-badge-legend-pill.pill-green {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.flow-badge-legend-pill.pill-red {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.flow-badge-legend-pill.pill-blue {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Responsiveness for bento grid */
@media (max-width: 900px) {
    .flow-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .flow-bento-stat-card,
    .flow-bento-info-card {
        padding: 24px;
        min-height: auto;
    }
    
    .flow-personal-points-value {
        font-size: 3.2rem;
    }
}



/* === Active Button State Premium === */
button:active, [role="button"]:active, .btn:active,
a:active, .clickable:active {
  transform: scale(0.96);
  opacity: 0.82;
  transition: transform 0.08s ease, opacity 0.08s ease;
}

/* ============================================================
   Twitter-like Dynamic Scroll Animation Layer (GPU Accelerated)
   ============================================================ */
@media (max-width: 768px) {
    .bottom-nav {
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s, opacity 0.5s !important;
        will-change: transform;
    }
    .bottom-nav.bottom-nav-hidden {
        /* Desloca em perfeita sintonia e pixel-sync com o menu inferior da comunidade */
        transform: translateY(calc(150px + env(safe-area-inset-bottom, 0px))) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .fab-container {
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s !important;
        will-change: transform;
    }
    .fab-container.fab-lowered {
        /* Desloca suavemente para baixo em 68px, posicionando-o perfeitamente em bottom: 16px + safe-area (sem sumir totalmente!) */
        transform: translateY(68px) !important;
    }
}

/* ============================================================
   ADD SHEET — sistema unificado de adição (Cards/Widgets/Desafios)
   Mobile: bottom sheet · Desktop (≥900px): modal centralizado
   ============================================================ */
.add-scrim {
    position: fixed;
    inset: 0;
    background: rgba(13, 13, 13, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100050;
}
.add-scrim.is-open { opacity: 1; pointer-events: auto; }

.add-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-base);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(.32, .72, 0, 1);
    z-index: 100060;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 88dvh;
    max-height: 88dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
    pointer-events: none;
    visibility: hidden;
}
.add-sheet.is-open {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.pc-only-label-spacer {
    display: none;
}

@media (min-width: 900px) {
    .add-sheet {
        left: 50% !important;
        right: auto !important;
        bottom: 0 !important;
        top: auto !important;
        width: min(1000px, 94vw) !important;
        height: 90vh !important;
        max-height: 90vh !important;
        border-radius: 32px 32px 0 0 !important;
        transform: translate(-50%, 100%) !important;
        opacity: 1 !important;
        transition: transform 0.45s cubic-bezier(.32, .72, 0, 1), visibility 0s 0.45s !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
    .add-sheet.is-open {
        transform: translate(-50%, 0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        transition: transform 0.45s cubic-bezier(.32, .72, 0, 1) !important;
    }
    
    /* Grid de modelos expandido para 4 colunas no Desktop */
    .add-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
    
    /* Layout premium de 2 colunas para formulários do Card/Widget no desktop */
    #wStep2 {
        display: grid;
        grid-template-columns: 1.15fr 1fr !important;
        gap: 0 32px !important;
        width: 100% !important;
        align-items: start !important;
    }
    #wSectionCustom {
        display: none !important;
    }
    .pc-only-label-spacer {
        display: block !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #timeGroup, #dateRangeGroup {
        gap: 6px !important;
    }
    #daysGroup {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 24px !important;
    }
    #daysGroup label {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.08em !important;
    }
    #daysGroup .days-selector {
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .w-step2-col-left {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: auto !important;
        align-self: start !important; /* Evita estiramento vertical e mantém o espaçamento entre Título e Detalhes intocado */
    }
    .w-step2-col-right {
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        align-self: start !important; /* Impede que o crescimento do lado direito afete o lado esquerdo */
    }
    .w-step2-col-left .form-control,
    .w-step2-col-right .reminder-toggle-row {
        height: 48px !important;
        border-radius: 24px !important; /* Cantos super arredondados idênticos de pílula */
        padding: 12px 20px !important;
        box-sizing: border-box !important;
        font-family: 'Outfit', sans-serif !important;
        font-size: 0.95rem !important;
    }
    #iconGroup {
        grid-column: 1 / span 2 !important;
        grid-row: 3 !important;
        margin-top: 12px !important; /* Espaçamento reduzido em relação às colunas de cima */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    #iconGroup label {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.08em !important;
    }
    #iconGroup .icon-picker {
        display: grid !important;
        grid-template-columns: repeat(10, 1fr) !important; /* 10 colunas para maior largura e sofisticação */
        gap: 12px !important;
        width: 100% !important;
        max-width: 700px !important; /* Barra de ícones ampliada */
        max-height: 250px !important; /* Altura ampliada */
        overflow-y: auto !important;
        scrollbar-width: none !important; /* Oculta a barra de rolagem no Firefox */
        justify-content: center !important;
        border-radius: 20px !important;
        padding: 16px !important;
    }
    #iconGroup .icon-picker::-webkit-scrollbar {
        display: none !important; /* Oculta a barra de rolagem no Chrome/Safari/Edge */
    }
    .w-step2-save-btn {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
        margin-top: 20px !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 350px !important; /* Botão de salvar no tamanho premium e perfeitamente centralizado */
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .w-step2-save-btn:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
    }
    .w-step2-save-btn:active {
        transform: translateY(0) !important;
    }
    
    /* Layout centralizado premium de coluna única quando o agendamento está oculto (ex: Biblioteca) */
    #wStep2.single-column-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    #wStep2.single-column-layout .w-step2-col-left {
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100% !important;
        max-width: 500px !important; /* Mesma largura centralizada premium do seletor de dias e ícones */
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    #wStep2.single-column-layout .w-step2-col-left .add-sheet-section-title {
        text-align: center !important;
        width: 100% !important;
    }
    #wStep2.single-column-layout .w-step2-col-left .form-group {
        width: 100% !important;
        align-items: center !important;
    }
    #wStep2.single-column-layout .w-step2-col-left label {
        text-align: center !important;
        width: 100% !important;
    }
    #wStep2.single-column-layout #iconGroup {
        margin-top: 24px !important; /* Aumenta ligeiramente para espaçar do título/campos centralizados */
    }
    
    /* Layout premium de 2 colunas para formulários de Desafios no desktop */
    #cStep2 {
        display: grid;
        grid-template-columns: 1.15fr 1fr !important;
        gap: 0 32px !important;
        width: 100% !important;
        align-items: start !important;
    }
    #cStep2 > *:nth-child(2) { grid-column: 1 !important; grid-row: 1 !important; }
    #cStep2 > *:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; }
    #cCustomTypeGroup { grid-column: 1 !important; grid-row: 3 !important; }
    #cPinGroup { grid-column: 1 !important; grid-row: 4 !important; }
    
    #cStep2 > *:nth-child(5) { grid-column: 2 !important; grid-row: 1 !important; }
    .challenge-dates-row { grid-column: 2 !important; grid-row: 2 !important; }
    #cGoalGroup { grid-column: 2 !important; grid-row: 3 !important; }
    #cStep2 button.btn-primary { 
        grid-column: 2 !important; 
        grid-row: 4 / span 2 !important; 
        align-self: end !important; 
        margin-top: 24px !important; 
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
}

.add-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    margin: 10px auto 0;
    opacity: 0.7;
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .add-sheet-handle { display: none; }
}

.add-sheet-head {
    padding: 14px 20px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.add-sheet-head h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: -0.6px;
    color: var(--text-main);
    margin: 0;
}
.add-sheet-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--bg-app) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-sec) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}
.add-sheet-close:hover {
    background: var(--border-color) !important;
    color: var(--text-main) !important;
    transform: rotate(90deg) scale(1.05) !important;
}

.add-sheet-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 16px 8px;
    background: var(--bg-base);
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .add-sheet-tabs { padding: 12px 24px 8px; }
}
.add-tab {
    flex: 1;
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-sec);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: 0.15s ease;
}
.add-tab:hover { color: var(--text-main); border-color: var(--text-main); }
.add-tab.active {
    background: #0d0d0d;
    color: #fff;
    border-color: #0d0d0d;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3);
}
.add-tab.active i { color: #a3ff12; }

.add-sheet-search {
    margin: 8px 20px 4px;
    padding: 9px 12px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .add-sheet-search { margin: 8px 24px 4px; }
}
.add-sheet-search i { color: var(--text-sec); font-size: 0.85rem; }
.add-sheet-search input {
    background: none;
    border: none;
    outline: none;
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-main);
    width: 100%;
}
.add-sheet-search input::placeholder { color: var(--text-sec); }

.add-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px 28px;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
    .add-sheet-body { padding: 16px 24px 32px; }
}

.add-cat-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-sec);
    opacity: 0.7;
    margin: 6px 0 8px;
    padding: 0 2px;
}

/* ===== Redesign do "+" : chips de categoria, herói, seções ===== */
.add-cat-chips {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 12px;
    margin: -4px 0 6px;
    background: var(--bg-card);
    scrollbar-width: none;
}
.add-cat-chips::-webkit-scrollbar { display: none; }
/* Desktop: os chips de grupo NÃO acompanham a rolagem (sticky) — ao rolar, o bar
   colado sobrepunha os itens/widgets do add-sheet com efeito estranho. */
@media (min-width: 769px) {
    .add-cat-chips { position: static !important; }
}
.add-cat-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-sec);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: 0.15s ease;
}
.add-cat-chip:hover { border-color: var(--text-main); color: var(--text-main); }
.add-cat-chip.active { background: #0d0d0d; color: #fff; border-color: #0d0d0d; }
.add-cat-chip i { font-size: 0.78rem; }

.add-hero {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    border: none;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #0d0d0d, #1f2937);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    transition: transform .15s ease;
}
.add-hero:hover { transform: translateY(-2px); }
.add-hero:active { transform: scale(0.99); }
.add-hero-ico {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    background: rgba(163,255,18,0.16); color: #a3ff12;
}
.add-hero-text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.add-hero-title { font-weight: 800; font-size: 1.02rem; letter-spacing: -0.2px; }
.add-hero-sub { font-size: 0.78rem; opacity: 0.78; line-height: 1.35; }
.add-hero-plus {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #a3ff12; color: #0d0d0d; font-size: 0.9rem;
}

.add-section-container { margin-bottom: 20px; }
.add-section-header { margin-bottom: 14px; }
.add-sec-sep { width: 100%; height: 1px; background: var(--border-color); margin-bottom: 18px; opacity: 0.7; }
.add-sug-label {
    font-size: 0.78rem; font-weight: 800; color: var(--text-sec);
    margin: 18px 0 10px; font-family: 'Outfit', sans-serif;
    text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.8;
}
.add-sug-list { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* ===== Ações rápidas do home (atalhos contextuais) ===== */
.home-quick-actions {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 2px;
    margin: 14px 0 4px;
    scrollbar-width: none;
}
.home-quick-actions::-webkit-scrollbar { display: none; }
.home-qa-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    transition: 0.15s ease;
    box-shadow: var(--shadow-sm);
}
.home-qa-chip:hover { transform: translateY(-2px); border-color: var(--text-main); }
.home-qa-chip:active { transform: scale(0.97); }
.home-qa-ico {
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.home-qa-chip.qa-wk .home-qa-ico { background: rgba(110,200,0,0.16); color: #3d5a00; }
.home-qa-chip.qa-st .home-qa-ico { background: rgba(99,102,241,0.14); color: #4f46e5; }
.home-qa-chip.qa-td .home-qa-ico { background: rgba(236,72,153,0.12); color: #db2777; }
.home-qa-chip.qa-fi .home-qa-ico { background: rgba(16,185,129,0.12); color: var(--primary); }
.home-qa-chip.qa-pm .home-qa-ico { background: rgba(239,68,68,0.12); color: #dc2626; }
.home-qa-chip.qa-add .home-qa-ico { background: #0d0d0d; color: #a3ff12; }

.add-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.add-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 900px) {
    .add-grid { grid-template-columns: repeat(3, 1fr); }
}

.add-tpl {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
    cursor: pointer;
    transition: 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    text-align: left;
    overflow: hidden;
    color: var(--text-main);
    width: 100%;
    font-family: inherit;
}
.add-tpl:hover { border-color: var(--text-main); transform: translateY(-2px); }
.add-tpl:active { transform: scale(0.98); }

.add-tpl .preview {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.add-tpl h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.2px;
    margin: 0;
    color: var(--text-main);
}
.add-tpl p {
    font-size: 0.72rem;
    color: var(--text-sec);
    line-height: 1.35;
    margin: 0;
}

.add-tpl .featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #0d0d0d;
    color: #a3ff12;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.58rem;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.add-sheet-config {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(.32, .72, 0, 1);
    display: flex;
    flex-direction: column;
    z-index: 10;
    border-radius: inherit;
    overflow: hidden;
}
.add-sheet-config.is-open { transform: translateX(0); }

.add-sheet-config-head {
    padding: 14px 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .add-sheet-config-head { padding: 18px 24px 14px; }
}
.add-sheet-config-head h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    flex: 1;
    color: var(--text-main);
    margin: 0;
}

.add-sheet-config-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
    .add-sheet-config-body { padding: 22px 24px 32px; }
}

.add-live-preview {
    background: var(--bg-app);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.add-live-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0d0d0d;
    color: #a3ff12;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.add-live-body { flex: 1; min-width: 0; }
.add-live-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-main);
}
.add-live-meta { font-size: 0.74rem; color: var(--text-sec); margin-top: 2px; }
.add-live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary, #6ec800);
    position: relative;
    flex-shrink: 0;
}
.add-live-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--primary, #6ec800);
    animation: addSheetPulse 1.8s infinite;
}
@keyframes addSheetPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(3); opacity: 0; }
}

/* ============================================================
   PATCH D — Sugeridos pra você (chips)
   ============================================================ */
.add-sug-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 4px 4px;
    margin: -6px -4px 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.add-sug-strip::-webkit-scrollbar { display: none; }
.add-sug-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    transition: 0.15s ease;
}
.add-sug-chip:hover { border-color: var(--text-main); transform: translateY(-1px); }
.add-sug-chip i { font-size: 0.72rem; color: var(--primary, #6ec800); }
.add-sug-chip.active {
    background: rgba(110, 200, 0, 0.15);
    border-color: #6ec800;
    color: #3a7a00;
}
.add-sug-chip.active i { color: #3a7a00; }
body.dark-mode .add-sug-chip.active {
    background: rgba(163, 255, 18, 0.12);
    border-color: #a3ff12;
    color: #a3ff12;
}
body.dark-mode .add-sug-chip.active i { color: #a3ff12; }


/* Section header row: icon + label + "Ver todos" */
.add-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 4px 0 10px;
}
.add-section-header .add-cat-label { flex: 1; margin: 0; }
.add-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    line-height: 1;
}
.add-section-ver-todos {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    color: var(--text-sec);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.15s ease;
    white-space: nowrap;
}
.add-section-ver-todos:hover { color: var(--text-main); }
.add-section-ver-todos i { font-size: 0.6rem; }

/* + button overlaid on each card */
.add-tpl { padding-bottom: 40px; }
.add-tpl-plus {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-base);
    color: var(--text-sec);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: 0.15s ease;
    flex-shrink: 0;
}
.add-tpl:hover .add-tpl-plus {
    border-color: var(--text-main);
    color: var(--text-main);
}

/* Bottom "Continue / Recomendado" cards */
.add-bottom-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.add-bottom-card {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.add-bottom-card:hover { border-color: var(--text-main); transform: translateY(-1px); }
.add-bottom-card:active { transform: scale(0.98); }
.add-bottom-card-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.add-bottom-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.add-bottom-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.add-bottom-card-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.add-bottom-card-info { flex: 1; min-width: 0; }
.add-bottom-card-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.add-bottom-card-sub {
    font-size: 0.68rem;
    color: var(--text-sec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.add-bottom-card-sub.accent { color: var(--primary, #6ec800); }
.add-bottom-card-arrow { color: var(--text-sec); font-size: 0.72rem; flex-shrink: 0; }

/* ============================================================
   PATCH E — Step 2 config pane visual overrides
   ============================================================ */
.add-sheet-config-body #wStep2,
.add-sheet-config-body #cStep2 {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.add-sheet-section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-main);
    opacity: 0.85;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--border-color);
    margin-top: 26px;
    margin-bottom: 14px;
}
.add-sheet-config-body .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

/* Mobile: reduz espaçamento no bloco Agendamento & Metas + centraliza botão salvar */
@media (max-width: 899px) {
    #wSectionSchedule {
        margin-top: 2px !important;
        margin-bottom: 4px !important;
    }
    #timeGroup,
    #dateRangeGroup {
        margin-bottom: 4px !important;
    }
    .w-step2-save-btn {
        align-self: center !important;
        width: 75% !important;
        max-width: 280px !important;
        margin-top: 4px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
.add-sheet-config-body .form-group label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sec);
}
.add-sheet-config-body .form-control {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 11px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.add-sheet-config-body .form-control:focus {
    border-color: var(--text-main);
    box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.06);
}
.add-sheet-config-body .days-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
}
#daysGroup label {
    text-align: center;
    width: 100%;
}
.add-sheet-config-body .day-lbl {
    flex: 1;
    max-width: 40px;
    max-height: 40px;
    padding: 10px 0;
    border-radius: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border-color);
    background: var(--bg-base);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text-sec);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.add-sheet-config-body .day-lbl:hover {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--bg-app);
}
.add-sheet-config-body .day-check:checked + .day-lbl {
    background: #0d0d0d;
    color: #b3ff1a;
    border-color: #0d0d0d;
    font-weight: 950;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: scale(1.06);
}
body.dark-mode .add-sheet-config-body .day-check:checked + .day-lbl {
    background: #ffffff;
    color: #0d0d0d;
    border-color: #ffffff;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15);
}
.add-sheet-config-body .icon-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-top: 0 !important;
    border: 1px solid var(--border-color) !important;
    padding: 10px !important;
}
.add-sheet-config-body .icon-picker > * {
    aspect-ratio: 1;
    border-radius: 12px !important;
    background: var(--bg-app) !important;
    border: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-main) !important;
    cursor: pointer;
    transition: 0.15s ease;
}
.add-sheet-config-body .icon-picker > *.selected,
.add-sheet-config-body .icon-picker > *.active {
    background: #0d0d0d !important;
    color: #a3ff12 !important;
    border-color: #0d0d0d !important;
}
.add-sheet-config-body button.btn-primary[onclick*="saveWidget"],
.add-sheet-config-body button.btn-primary[onclick*="saveChallenge"] {
    padding: 14px !important;
    border-radius: 14px !important;
    background: #0d0d0d !important;
    color: #fff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    border: none;
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.3);
    margin-top: 6px;
}
.add-sheet-config-body button.btn-primary[onclick*="saveWidget"] i,
.add-sheet-config-body button.btn-primary[onclick*="saveChallenge"] i {
    color: #a3ff12;
}

/* ============================================================
   PATCH G — Reminder toggle switch
   ============================================================ */
.add-sheet-config-body .reminder-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.add-sheet-config-body .reminder-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main);
}
.add-sheet-config-body .reminder-info i { color: var(--text-sec); font-size: 0.95rem; }
.add-sheet-config-body .reminder-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.add-sheet-config-body .reminder-switch input { opacity: 0; width: 0; height: 0; }
.add-sheet-config-body .reminder-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 24px;
    transition: 0.2s;
}
.add-sheet-config-body .reminder-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.add-sheet-config-body .reminder-switch input:checked + .reminder-slider { background: #0d0d0d; }
.add-sheet-config-body .reminder-switch input:checked + .reminder-slider::before { transform: translateX(18px); }

body.dark-mode .add-sheet-config-body .reminder-slider { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255,255,255,0.3); }
body.dark-mode .add-sheet-config-body .reminder-switch input:checked + .reminder-slider { background: var(--green-lime); border-color: var(--green-lime); }
body.dark-mode .add-sheet-config-body .reminder-switch input:checked + .reminder-slider::before { background: #000; }
.add-sheet-config-body #wTimeContainer {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.add-sheet-config-body #wTimeContainer .form-control { padding: 11px 12px; }

/* ============================================================
   DESKTOP FULLSCREEN & REFINED CALENDAR LARGURA TOTAL
   ============================================================ */
.cal-header-desktop {
    display: none !important;
}
.cal-header-mobile {
    display: flex !important;
}

@media (min-width: 769px) {
    /* Troca de cabeçalhos de calendário */
    .cal-header-desktop {
        display: flex !important;
    }
    .cal-header-mobile {
        display: none !important;
    }
    
    /* Calendário absoluto no Desktop para evitar qualquer Layout Shift ou quique no scroll */
    .cal-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        z-index: 100 !important;
        background: var(--bg-base) !important;
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease !important;
        width: 100% !important;
        transform: translateY(0) !important;
    }
    .cal-wrapper.cal-hidden {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        margin-top: 0 !important;
    }

    /* Container de conteúdo expandido para 100% da altura e compensado com padding-top */
    .content-scroll {
        padding-top: 120px !important; /* Altura natural do calendário + folga visual */
    }

    /* Cabeçalho Desktop em largura total */
    .cal-header.cal-header-desktop {
        position: relative;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 8px 16px 6px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Menu de 3 linhas alinhado verticalmente acima da seta esquerda */
    .cal-header .toggle-sidebar-btn {
        position: absolute;
        left: 10px;
        top: 6px;
        background: none;
        border: none;
        font-size: 1.4rem;
        color: var(--text-main);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 50%;
        transition: background 0.2s;
        z-index: 6;
    }
    .cal-header .toggle-sidebar-btn:hover {
        background: var(--border-color);
    }

    /* Dropdown de Mês Pill Clicável */
    .month-selector-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--bg-app);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        padding: 4px 14px;
        font-size: 0.88rem !important;
        font-weight: 800;
        color: var(--text-main);
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        user-select: none;
    }
    .month-selector-badge:hover {
        border-color: var(--primary);
        background: var(--bg-base);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }
    .month-selector-badge i {
        font-size: 0.75rem;
        color: var(--text-sec);
        transition: color 0.2s;
    }
    .month-selector-badge:hover i {
        color: var(--primary);
    }

    /* Day Picker em Largura Total com Efeito Fading */
    .date-picker-container {
        position: relative;
        width: 100% !important;
        display: flex;
        align-items: center;
        padding: 0;
    }
    
    /* Degradê transparente suave nas extremidades para fade-out dos cards */
    .date-picker-container::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 80px;
        background: linear-gradient(to right, var(--bg-base) 40%, transparent);
        z-index: 2;
        pointer-events: none;
    }
    .date-picker-container::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 80px;
        background: linear-gradient(to left, var(--bg-base) 40%, transparent);
        z-index: 2;
        pointer-events: none;
    }

    /* Setas flutuantes de navegação de dias */
    .date-scroll-btn {
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        color: var(--text-sec);
        font-size: 1rem;
        width: 38px;
        height: 38px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        z-index: 10;
        flex-shrink: 0;
        border-radius: 12px;
        position: absolute;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    .date-scroll-btn.left {
        left: 10px;
    }
    .date-scroll-btn.right {
        right: 10px;
    }
    .date-scroll-btn:hover {
        color: var(--text-main);
        background: var(--bg-app);
        border-color: var(--text-main);
        transform: scale(1.08);
    }
    .date-scroll-btn:active {
        transform: scale(0.95);
    }

    /* Compactação e Largura Total da lista de dias */
    .date-picker {
        width: 100% !important;
        max-width: none !important;
        padding: 4px 60px !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    .date-item {
        min-width: 42px !important;
        height: 50px !important;
        padding: 4px !important;
        border-radius: var(--radius-sm) !important;
        font-size: 0.72rem !important;
    }
    .date-item .day-num {
        font-size: 0.85rem !important;
        line-height: 1.1 !important;
    }
    .date-item.active {
        transform: translateY(-3px) scale(1.04) !important;
    }
    
    /* Contenção apenas para os widgets do dashboard e ocultação da barra de rolagem vertical */
    .content-scroll {
        max-width: 1280px !important;
        margin: 0 auto !important;
        width: 100% !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important;  /* IE/Edge */
    }
    .content-scroll::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }
    .cal-wrapper {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================
   ZIP LIFESTYLE PREMIUM CARD REDESIGN (GLASSMORPHISM & CLEAN CORES)
   ============================================================ */
.widget {
    border: 1px solid var(--border-color) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.015) !important;
    background: var(--bg-card) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

body.dark-mode .widget {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.widget:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.035) !important;
    border-color: var(--primary) !important;
}

body.dark-mode .widget:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35) !important;
    border-color: var(--primary) !important;
}

.widget.completed {
    opacity: 0.94 !important;
    border-color: rgba(163, 255, 18, 0.3) !important;
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(163, 255, 18, 0.015) 100%) !important;
    box-shadow: inset 0 0 16px rgba(163, 255, 18, 0.01), 0 8px 24px rgba(163, 255, 18, 0.02) !important;
}

body.dark-mode .widget.completed {
    border-color: rgba(163, 255, 18, 0.2) !important;
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(163, 255, 18, 0.01) 100%) !important;
    box-shadow: inset 0 0 16px rgba(163, 255, 18, 0.005), 0 12px 32px rgba(163, 255, 18, 0.04) !important;
}

.widget.late-habit {
    border: 1.5px solid #f87171 !important;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.08) !important;
}

.widget-special {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.015) !important;
    overflow: visible !important; /* Fixed icon hover cutoff */
}

body.dark-mode .widget-special {
    background: rgba(22, 22, 24, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

.widget-special .widget-special-content h4 {
    font-family: var(--font-outfit) !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    background: linear-gradient(135deg, var(--text-main), var(--text-sec));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.widget-special .widget-special-content p {
    color: var(--text-sec) !important;
}

.widget-special .widget-actions-bottom {
    border-top: 1px dashed var(--border-color) !important;
}

.widget-special .btn-icon-small,
.widget-special .drag-handle {
    color: var(--text-sec) !important;
}

.widget-special .btn-icon-small:hover {
    background: var(--border-color) !important;
    color: var(--text-main) !important;
}

.widget-special.c-green { border-color: rgba(163, 255, 18, 0.25) !important; }
.widget-special.c-blue { border-color: rgba(59, 130, 246, 0.25) !important; }
.widget-special.c-yellow { border-color: rgba(245, 158, 11, 0.25) !important; }
.widget-special.c-purple { border-color: rgba(139, 92, 246, 0.25) !important; }
.widget-special.c-red { border-color: rgba(239, 68, 68, 0.25) !important; }
.widget-special.c-orange { border-color: rgba(249, 115, 22, 0.25) !important; }
.widget-special.c-teal { border-color: rgba(20, 184, 166, 0.25) !important; }

.widget-special .widget-special-content i {
    font-size: 1.6rem !important;
    margin-bottom: 12px !important;
    transition: transform 0.3s ease !important;
    background: linear-gradient(135deg, var(--primary), var(--text-sec));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.widget-special:hover .widget-special-content i {
    transform: scale(1.1) rotate(5deg) !important;
}

.widget-special.c-green .widget-special-content i { background: linear-gradient(135deg, #34d399, var(--primary)); -webkit-background-clip: text; }
.widget-special.c-blue .widget-special-content i { background: linear-gradient(135deg, #60a5fa, #2563eb); -webkit-background-clip: text; }
.widget-special.c-yellow .widget-special-content i { background: linear-gradient(135deg, #fbbf24, #d97706); -webkit-background-clip: text; }
.widget-special.c-purple .widget-special-content i { background: linear-gradient(135deg, #a78bfa, #7c3aed); -webkit-background-clip: text; }
.widget-special.c-red .widget-special-content i { background: linear-gradient(135deg, #f87171, #dc2626); -webkit-background-clip: text; }
.widget-special.c-orange .widget-special-content i { background: linear-gradient(135deg, #fb923c, #ea580c); -webkit-background-clip: text; }
.widget-special.c-teal .widget-special-content i { background: linear-gradient(135deg, #2dd4bf, #0f766e); -webkit-background-clip: text; }

#widget-notif-requirement,
#widget-install-pwa {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.015) !important;
    border-radius: 20px !important;
}

#widget-notif-requirement .widget-special-content h4,
#widget-install-pwa .widget-special-content h4 {
    color: var(--text-main) !important;
}

#widget-notif-requirement .widget-special-content p,
#widget-install-pwa .widget-special-content p {
    color: var(--text-sec) !important;
}

#widget-notif-requirement .btn-primary,
#widget-install-pwa .btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
}

#widget-notif-requirement .btn-primary:hover,
#widget-install-pwa .btn-primary:hover {
    background: var(--primary-hover) !important;
}

body.dark-mode .c-green .widget-icon { background: rgba(163, 255, 18, 0.12) !important; color: #34d399 !important; }
body.dark-mode .c-blue .widget-icon { background: rgba(59, 130, 246, 0.12) !important; color: #60a5fa !important; }
body.dark-mode .c-yellow .widget-icon { background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; }
body.dark-mode .c-purple .widget-icon { background: rgba(139, 92, 246, 0.12) !important; color: #a78bfa !important; }
body.dark-mode .c-red .widget-icon { background: rgba(239, 68, 68, 0.12) !important; color: #f87171 !important; }
body.dark-mode .c-orange .widget-icon { background: rgba(249, 115, 22, 0.12) !important; color: #fb923c !important; }
body.dark-mode .c-teal .widget-icon { background: rgba(20, 184, 166, 0.12) !important; color: #2dd4bf !important; }

/* === PROMINENT & MOTIVATIONAL CHECK HABIT BUTTON === */
.btn-check-habit {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0, 0, 0, 0.15) !important; /* Neutral grey — clearly "not done yet" */
    background: transparent !important;
    color: rgba(0, 0, 0, 0.12) !important; /* Nearly invisible icon — empty feel */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
}

body.dark-mode .btn-check-habit {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.1) !important;
}

.btn-check-habit:hover {
    transform: scale(1.15) !important;
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 12px rgba(77, 124, 15, 0.32) !important;
    opacity: 1 !important;
}

body.dark-mode .btn-check-habit:hover {
    box-shadow: 0 0 16px rgba(163, 255, 18, 0.4) !important;
}

.btn-check-habit.checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* === MOTIVATIONAL HABIT STREAK FIRE BADGE === */
.habit-streak-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #f97316 0%, #ff3d00 100%) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-family: var(--font-outfit) !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3) !important;
    animation: streakGlow 1.8s infinite alternate !important;
    /* Fica NO FLUXO, abaixo do nome (.widget-title é flex-column). Antes era
       position:absolute + left:50% + translateX(-50%), o que centralizava o badge
       sobre o card e, no mobile, COBRIA/substituía o nome do hábito. transform:none
       com !important vence o translateX(-50%) do keyframe streakGlow. */
    position: static !important;
    transform: none !important;
    align-self: flex-start !important;
    margin: 4px 0 0 !important;
    z-index: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Na LISTA de hábitos do mobile (aba Hoje), o badge é inline dentro do <h5> e
   deve ser SUTIL (cinza + foguinho), não a pílula laranja — que aparecia colada/
   sobre o nome. Neutraliza o estilo de pílula só neste contexto. */
.habit-list-item .habit-streak-badge {
    background: none !important;
    color: var(--text-sec) !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    margin: 0 0 0 6px !important;
    align-self: auto !important;
    vertical-align: middle;
}
.habit-list-item .habit-streak-badge i { color: #ef4444 !important; }

body.dark-mode .habit-streak-badge {
    background: linear-gradient(135deg, #f97316 0%, #ff4b1f 100%) !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.45) !important;
}

@keyframes streakGlow {
    from { 
        box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3);
        transform: translateX(-50%) scale(1);
    }
    to { 
        box-shadow: 0 5px 16px rgba(255, 61, 0, 0.55);
        transform: translateX(-50%) scale(1.06);
    }
}

/* === GRID LAYOUT DYNAMIC FLOW & BUG FIXES === */
.w-content-wrap {
    overflow: visible !important; /* Fixed icon hover cutoff globally */
}

.grid {
    grid-template-rows: auto;
    /* minmax: cada linha tem no mínimo 185px (suficiente para header com botões empilhados + action bar)
       e cresce automaticamente com conteúdo maior (notas, widgets multi-linha). */
    grid-auto-rows: minmax(185px, auto) !important;
}

.widget {
    height: 100% !important; /* Forces widgets to fill grid cells perfectly */
}

/* === CLEAN & COLLAPSIBLE ACTION BUTTONS (ELLIPSIS MENU) === */
.btn-actions-trigger {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-card) !important;
    color: var(--text-sec) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 0.95rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.btn-actions-trigger:hover {
    background: var(--bg-app) !important;
    color: var(--text-main) !important;
    border-color: var(--text-sec) !important;
    transform: scale(1.08) !important;
}

.widget-actions-group {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.widget-actions-menu {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    padding: 6px 10px !important;
    border-radius: 16px !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 40px !important;
    transform: scale(0.9) !important;
    transform-origin: bottom right !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 10005 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

body.dark-mode .widget-actions-menu {
    background: rgba(22, 22, 24, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4) !important;
}

.widget-actions-menu.show {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
}

/* === CONSISTENT RED TRASH BINS === */
.btn-delete-widget,
.widget-actions-menu i.fa-trash,
.widget-actions-menu .btn-icon-small[onclick*="deleteWidget"],
.widget-actions-bottom button[onclick*="deleteWidget"] {
    color: #ef4444 !important;
}

.btn-delete-widget:hover,
.widget-actions-menu i.fa-trash:hover,
.widget-actions-bottom button[onclick*="deleteWidget"]:hover {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

/* === SKIP BUTTON BELOW CHECK (HEADER FLEX COLUMN) === */
/* Desktop: header-actions em-fluxo (flex-shrink:0 + título flex-grow:1 empurra para a direita) */
/* NÃO usar position:absolute no desktop — os cantos arredondados (radius:20px) causam overflow visual */

.widget-header-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.btn-skip-habit-discrete {
    font-size: 0.85rem !important;
    opacity: 0.6 !important;
    color: var(--text-sec) !important;
    background: rgba(13, 13, 13, 0.04) !important;
    border: 1px solid rgba(13, 13, 13, 0.06) !important;
    cursor: pointer !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
}

body.dark-mode .btn-skip-habit-discrete {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.btn-skip-habit-discrete:hover {
    opacity: 1 !important;
    color: var(--text-main) !important;
    background: rgba(13, 13, 13, 0.06) !important;
    border-color: rgba(13, 13, 13, 0.16) !important;
    transform: scale(1.08) !important;
}

body.dark-mode .btn-skip-habit-discrete:hover {
    color: #f3f4f6 !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

/* "Pulado" = estado neutro/pausado (ink), distinto do lime que é "concluído" */
.btn-skip-habit-discrete.skipped {
    opacity: 1 !important;
    color: var(--text-main) !important;
    background: rgba(13, 13, 13, 0.07) !important;
    border-color: rgba(13, 13, 13, 0.18) !important;
    box-shadow: 0 2px 8px rgba(13, 13, 13, 0.08) !important;
}

body.dark-mode .btn-skip-habit-discrete.skipped {
    color: #f3f4f6 !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.btn-finance-eye {
    font-size: 0.8rem !important;
    opacity: 0.85 !important;
    color: var(--text-sec) !important;
    background: var(--border-color) !important;
    border: none !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 9 !important;
}

.btn-finance-eye:hover {
    opacity: 1 !important;
    background: var(--border-color) !important;
    color: var(--text-main) !important;
    transform: translateX(-50%) scale(1.15) !important;
}

/* Alta visibilidade no modo escuro */
body.dark-mode .btn-finance-eye {
    color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .btn-finance-eye:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.25) !important;
}

/* === SETTINGS — REDESIGNED SECTIONS === */

/* Sair da Conta — compact row card */
.settings-exit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.settings-exit-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.settings-exit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-exit-icon i {
    color: #ef4444;
    font-size: 1.1rem;
}

.settings-exit-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.settings-exit-text span {
    font-size: 0.78rem;
    color: var(--text-sec);
}

.btn-exit-account {
    background: rgba(239, 68, 68, 0.07);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-exit-account:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.35);
    transform: scale(1.03);
}

/* Settings footer — minimalist bottom links */
.settings-footer-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 0 8px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.settings-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-sec);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    padding: 4px 14px;
    border-radius: 20px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    opacity: 0.7;
}

.settings-footer-link:hover {
    opacity: 1;
    background: var(--bg-card);
    color: var(--text-main);
}

.settings-footer-link i {
    font-size: 0.9rem;
    opacity: 0.85;
}

.settings-footer-link.admin-link {
    color: var(--primary);
}

.settings-footer-link.admin-link:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.settings-footer-link.exit-link {
    color: var(--text-sec);
}

.settings-footer-link.exit-link:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

@media (min-width: 768px) {
    .settings-footer-minimal {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 10px;
    }
    .settings-footer-link.admin-link {
        flex-basis: 100%;
        justify-content: center;
        margin-top: 4px;
    }
}

/* ════════════════════════════════════════════════════════
   ZIP UI v2 — Melhorias de Design e Experiência Mobile
════════════════════════════════════════════════════════ */

/* Dark Mode: fundo controlado pela seção "BACKGROUND DO APP" (fim do arquivo). */

/* --- Widget: Completion Burst Animation --- */
@keyframes widgetCompletionBurst {
    0%   { box-shadow: 0 0 0 0 rgba(143, 214, 0, 0.65); }
    40%  { box-shadow: 0 0 0 22px rgba(143, 214, 0, 0); transform: scale(1.025); }
    100% { box-shadow: 0 0 0 0 rgba(143, 214, 0, 0); transform: scale(1); }
}

.widget.completing {
    animation: widgetCompletionBurst 0.65s cubic-bezier(0.4, 0, 0.6, 1);
}

/* --- Progress Bar: Mais fina e com glow neon --- */
.top-progress-container {
    height: 4px !important;
    background: var(--border-color) !important;
    border-radius: 99px !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.top-progress-fill {
    border-radius: 99px !important;
    background: linear-gradient(90deg, var(--primary), var(--green-lime)) !important;
}

body.dark-mode .top-progress-fill {
    box-shadow: 0 0 10px rgba(179, 255, 26, 0.55) !important;
}

/* --- Modal: Bordas Tipadas por Contexto --- */
.modal-content.modal-info    { border-top: 3px solid var(--info) !important; }
.modal-content.modal-success { border-top: 3px solid var(--primary) !important; }
.modal-content.modal-danger  { border-top: 3px solid var(--danger) !important; }

.modal-icon-typed {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

.modal-content.modal-info    .modal-icon-typed { background: rgba(59, 130, 246, 0.1); color: var(--info); }
.modal-content.modal-success .modal-icon-typed { background: var(--primary-light); color: var(--primary); }
.modal-content.modal-danger  .modal-icon-typed { background: rgba(239, 68, 68, 0.1); color: var(--danger); }

/* --- Streak Ring: Anel SVG ao redor do Avatar --- */
.avatar-ring-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.avatar-ring-wrap .user-avatar {
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    position: relative;
    z-index: 1;
}

.avatar-streak-ring {
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 2;
}

.avatar-ring-track {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 2.5;
}

.avatar-ring-fill {
    fill: none;
    stroke: var(--green-lime);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 48;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode .avatar-ring-fill {
    stroke: var(--primary);
    filter: drop-shadow(0 0 4px rgba(179, 255, 26, 0.5));
}

/* --- Flow Badge na Sidebar --- */
.sidebar-flow-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-light);
    padding: 2px 7px;
    border-radius: 99px;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.sidebar-flow-badge i {
    font-size: 0.6rem;
}

/* --- Streak Chip no Header Mobile --- */
.header-streak-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 99px;
    padding: 5px 11px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #f97316;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.header-streak-chip:hover,
.header-streak-chip:active {
    background: rgba(249, 115, 22, 0.18);
}

.header-streak-chip i { font-size: 0.7rem; }

/* --- Bottom Nav: Pill Indicator Deslizante --- */
@media (max-width: 768px) {
    .bottom-nav-pill {
        position: absolute;
        top: 6px;
        height: 36px;
        background: rgba(90, 148, 0, 0.1);
        border-radius: 99px;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        z-index: 0;
    }

    body.dark-mode .bottom-nav-pill {
        background: rgba(179, 255, 26, 0.1);
    }

    .bottom-nav-item {
        position: relative;
        z-index: 1;
    }

}

/* --- Landing: Avatar Stack Social Proof --- */
.lp-social-proof {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.lp-avatar-stack {
    display: flex;
}

.lp-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}

.lp-av:first-child { margin-left: 0; }

.lp-av-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.lp-av-2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
.lp-av-3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.lp-av-4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
.lp-av-5 { background: linear-gradient(135deg, #fa709a, #fee140); }

.lp-sp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-sp-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.lp-sp-sub {
    font-size: 11px;
    color: var(--muted);
}

.lp-stars { color: #f59e0b; font-size: 11px; letter-spacing: 1px; }

/* --- Landing: Urgency Bar no CTA --- */
.cta-urgency-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.cta-urgency-bar-bg {
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    overflow: hidden;
}

.cta-urgency-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 99px;
    transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-urgency-label {
    font-size: 12.5px;
    font-weight: 700;
    opacity: 0.72;
}

/* --- Mobile: Tap Targets Mínimos (WCAG 2.5.5) --- */
@media (max-width: 768px) {
    .btn-icon-small {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* --- Acessibilidade: Focus Visível --- */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}


/* ================================================================
   ██████ ZIP LIFESTYLE — DESIGN UPGRADE v2
   ================================================================ */

/* ── DAILY HERO CARD ──────────────────────────────────────────── */
.daily-hero-card {
    background: linear-gradient(148deg, #0d0d0d 0%, #141414 55%, #0e1c08 100%);
    border-radius: 20px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 16px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    animation: heroEntrance 0.5s cubic-bezier(0.4,0,0.2,1) both;
}

@media (min-width: 900px) {
    .daily-hero-card {
        margin-bottom: 20px;
    }
}
@media (min-width: 1100px) {
    .daily-hero-card {
        margin-bottom: 22px;
    }
}
@media (min-width: 1500px) {
    .daily-hero-card {
        margin-bottom: 24px;
    }
}

@keyframes heroEntrance {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* glow verde canto superior direito */
.daily-hero-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(143,214,0,0.18) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

/* glow azul canto inferior esquerdo */
.daily-hero-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-left {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.hero-greeting-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--green-lime);
    margin-bottom: 3px;
    font-family: 'Outfit', sans-serif;
}

.hero-name-text {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-date-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
    margin-bottom: 10px;
}

.hero-motivation-msg {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.48);
    font-style: italic;
    line-height: 1.4;
}

.hero-right {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.hero-ring-wrap {
    position: relative;
    width: 76px;
    height: 76px;
}

.hero-ring-svg {
    width: 76px;
    height: 76px;
    transform: rotate(-90deg);
    display: block;
}

.hero-ring-track {
    stroke: rgba(255,255,255,0.08);
    stroke-width: 5;
    fill: none;
}

.hero-ring-fill {
    stroke: var(--green-lime);
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 5px rgba(143,214,0,0.5));
}

.hero-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.hero-pct-val {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -1px;
}

.hero-pct-sym {
    font-family: 'Outfit', sans-serif;
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--green-lime);
    align-self: flex-start;
    margin-top: 5px;
}

body.dark-mode .daily-hero-card {
    background: linear-gradient(148deg, #080808 0%, #0f0f0f 55%, #0a1406 100%);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(143,214,0,0.03);
}

@media (max-width: 768px) {
    .daily-hero-card {
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 10px !important;
        gap: 10px;
    }
    .hero-name-text { font-size: 1.3rem; letter-spacing: -1px; }
    .hero-greeting-label { font-size: 0.58rem; letter-spacing: 1.5px; }
    .hero-motivation-msg { display: none; }
    .hero-ring-wrap { width: 62px; height: 62px; }
    .hero-ring-svg  { width: 62px; height: 62px; }
    .hero-pct-val   { font-size: 1.1rem; }
}

/* ── ESCONDER BARRA DE PROGRESSO ORIGINAL (anel do hero substituiu) ── */
.view-progress-bar-header {
    display: none !important;
}

/* ── WIDGET COLOR ACCENT — faixa colorida no topo de cada card ── */
.widget.c-green   { border-top: 2px solid var(--primary) !important; }
.widget.c-emerald { border-top: 2px solid var(--primary) !important; }
.widget.c-blue    { border-top: 2px solid #3b82f6 !important; }
.widget.c-sky     { border-top: 2px solid #0ea5e9 !important; }
.widget.c-indigo  { border-top: 2px solid #6366f1 !important; }
.widget.c-yellow  { border-top: 2px solid #f59e0b !important; }
.widget.c-amber   { border-top: 2px solid #d97706 !important; }
.widget.c-purple  { border-top: 2px solid #8b5cf6 !important; }
.widget.c-violet  { border-top: 2px solid #7c3aed !important; }
.widget.c-red     { border-top: 2px solid #ef4444 !important; }
.widget.c-rose    { border-top: 2px solid #f43f5e !important; }
.widget.c-orange  { border-top: 2px solid #f97316 !important; }
.widget.c-teal    { border-top: 2px solid #14b8a6 !important; }
.widget.c-cyan    { border-top: 2px solid #06b6d4 !important; }
.widget.c-pink    { border-top: 2px solid #ec4899 !important; }
.widget.c-fuchsia { border-top: 2px solid #d946ef !important; }
.widget.c-lime    { border-top: 2px solid #84cc16 !important; }
.widget.c-dark    { border-top: 2px solid #374151 !important; }

/* ── WIDGET COMPLETED — estado visual claro e satisfatório ── */
.widget.completed {
    opacity: 1 !important;
    border-color: rgba(110,200,0,0.22) !important;
    background: linear-gradient(160deg, var(--bg-card) 0%, rgba(143,214,0,0.04) 100%) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03) !important;
}

body.dark-mode .widget.completed {
    border-color: rgba(163,255,18,0.15) !important;
    background: linear-gradient(160deg, var(--bg-card) 0%, rgba(163,255,18,0.025) 100%) !important;
}

.widget.completed .widget-title h4 {
    color: var(--text-sec) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(0,0,0,0.18);
    text-decoration-thickness: 1.5px;
}

body.dark-mode .widget.completed .widget-title h4 {
    text-decoration-color: rgba(255,255,255,0.18);
}

/* Pop animation no check ── */
@keyframes checkPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    65%  { transform: scale(0.88); }
    100% { transform: scale(1); }
}
.btn-check-habit.pop-anim {
    animation: checkPop 0.38s cubic-bezier(0.4,0,0.2,1);
}

/* ── MOBILE HEADER — identidade mais forte ── */
@media (max-width: 768px) {
    .mobile-header {
        background: var(--bg-base) !important;
        border-bottom: 1px solid var(--border-color) !important;
        height: 54px !important;
        padding: 0 14px !important;
    }
    .mobile-header-title {
        font-size: 1.05rem !important;
        font-weight: 900 !important;
        letter-spacing: -0.5px !important;
    }

    /* Flow chip mais premium no header */
    .header-streak-chip {
        background: #0d0d0d !important;
        color: var(--green-lime) !important;
        border-color: rgba(143,214,0,0.3) !important;
        font-weight: 800 !important;
        padding: 4px 10px 4px 8px !important;
        border-radius: 20px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important;
    }
    body.dark-mode .header-streak-chip {
        background: rgba(143,214,0,0.12) !important;
        color: var(--green-lime) !important;
        border-color: rgba(143,214,0,0.2) !important;
    }
}

/* ── BOTTOM NAV — Ágora tab: sem pill, sem background ── */
@media (max-width: 768px) {
    .bottom-nav-item.highlighted:not(.active) {
        background: none !important;
        box-shadow: none !important;
    }
}

/* ── FAB — label hint no desktop ── */
@media (min-width: 769px) {
    .fab-main::after {
        content: 'Adicionar';
        position: absolute;
        right: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--text-main);
        color: var(--bg-base);
        font-family: 'Outfit', sans-serif;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 5px 12px;
        border-radius: 20px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        transform: translateY(-50%) translateX(6px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .fab-main:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}


/* ════════════════════════════════════════════════════════════════
   ZIP DESIGN UPGRADE v2.1
   1. Remove % do hero  2. Cor unificada  3. Cards + Calendário
   ════════════════════════════════════════════════════════════════ */

/* ── 1. REMOVE símbolo % do anel de progresso ── */
.hero-pct-sym { display: none !important; }

/* ── 2. OCULTAR botão do seletor de cor dos widgets ── */
[onclick*="openWidgetColorModal"],
.btn-icon-small[title="Cor"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   3. SISTEMA DE COR UNIFICADO
   Ícones monocromáticos neutros; concluído usa acento verde limão
   ══════════════════════════════════════════════════════════════ */
.widget:not(.widget-special) .widget-icon {
    background: rgba(13,13,13,0.065) !important;
    color: #2d3748 !important;
}
body.dark-mode .widget:not(.widget-special) .widget-icon {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.82) !important;
}

/* Ícone concluído — acento lime */
.widget:not(.widget-special).completed .widget-icon {
    background: rgba(90,148,0,0.1) !important;
    color: var(--primary) !important;
    opacity: 1 !important;
}
body.dark-mode .widget:not(.widget-special).completed .widget-icon {
    background: rgba(179,255,26,0.1) !important;
    color: var(--green-lime) !important;
}

/* Barras de progresso — sempre lime primário */
.widget .progress-fill { background: var(--primary) !important; }
body.dark-mode .widget .progress-fill { background: var(--green-lime) !important; }

/* Check concluído — preto sólido (light) / lime (dark) */
.widget:not(.widget-special).completed .btn-check-habit {
    background: #0d0d0d !important;
    border-color: #0d0d0d !important;
    color: #fff !important;
}
body.dark-mode .widget:not(.widget-special).completed .btn-check-habit {
    background: var(--green-lime) !important;
    border-color: var(--green-lime) !important;
    color: #0d0d0d !important;
}

/* Título do hábito concluído — cinza leve + tachado animado */
.widget:not(.widget-special).completed .widget-title h4 {
    color: var(--text-sec) !important;
    text-decoration: none !important;
    position: relative;
    display: inline-block;
}
.widget:not(.widget-special).completed .widget-title h4::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform-origin: left;
    animation: strikeThrough 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.dark-mode .widget:not(.widget-special).completed .widget-title h4 {
    text-decoration: none !important;
}

@keyframes strikeThrough {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════════════
   4. CARD REDESIGN — branco puro flutuando sobre o bege
   ══════════════════════════════════════════════════════════════ */
.widget:not(.widget-special) {
    background: #ffffff !important;
    border: none !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.04),
        0 4px 18px rgba(0,0,0,0.07) !important;
    border-radius: 18px !important;
}
body.dark-mode .widget:not(.widget-special) {
    background: rgba(22,22,22,0.97) !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    box-shadow:
        0 2px 10px rgba(0,0,0,0.45),
        0 1px 3px rgba(0,0,0,0.2) !important;
    border-top: none !important;
}
@media (hover: hover) {
    .widget:not(.widget-special):hover {
        box-shadow:
            0 2px 8px rgba(0,0,0,0.06),
            0 10px 32px rgba(0,0,0,0.1) !important;
        transform: translateY(-3px) !important;
    }
}

/* Widget-special (Finance, Stats, Planner) — mantém gradiente, melhora sombra */
.widget-special {
    border: none !important;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.14),
        0 1px 4px rgba(0,0,0,0.06) !important;
    border-radius: 18px !important;
}

/* Alerta de hábito atrasado */
.widget.late-habit:not(.widget-special) {
    border: 1.5px solid rgba(239,68,68,0.28) !important;
    box-shadow: 0 4px 16px rgba(239,68,68,0.08) !important;
}

/* Título limpo e bold */
.widget:not(.widget-special) .widget-title h4 {
    color: #1a1a1a !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
}
body.dark-mode .widget:not(.widget-special) .widget-title h4 {
    color: var(--text-main) !important;
}

/* Strip inferior — quase invisível, aparece no hover */
.widget-actions-bottom {
    border-top: 1px solid rgba(0,0,0,0.048) !important;
    opacity: 0.5;
    transition: opacity 0.2s !important;
}
.widget:hover .widget-actions-bottom { opacity: 1; }
body.dark-mode .widget-actions-bottom {
    border-top-color: rgba(255,255,255,0.048) !important;
}

/* Ícone unificado — tamanho refinado */
.widget-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   5. CALENDÁRIO REDESIGN — pills flutuantes, sem bordas
   ══════════════════════════════════════════════════════════════ */
.cal-wrapper {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.055) !important;
}
body.dark-mode .cal-wrapper {
    background: var(--bg-base) !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
}

/* Cabeçalho do mês — tipografia mais forte */
.cal-header-mobile {
    padding: 8px 14px 3px !important;
}
.cal-header-mobile span,
#calMonthTextMobile {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.6px !important;
    color: var(--text-main) !important;
}
.cal-header-desktop {
    padding-bottom: 6px !important;
}
.cal-month-nav-btn {
    background: transparent !important;
    border: none !important;
    color: var(--text-sec) !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
}

/* Pills — sem borda, fundo transparente */
.date-item {
    border: none !important;
    background: transparent !important;
    border-radius: 12px !important;
    transition: background 0.15s, transform 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
@media (hover: hover) {
    .date-item:hover {
        background: rgba(0,0,0,0.052) !important;
        border: none !important;
        transform: translateY(-1px) !important;
        color: var(--text-main) !important;
    }
    body.dark-mode .date-item:hover {
        background: rgba(255,255,255,0.06) !important;
    }
}

/* Dia ativo — pílula preta (light) / lime (dark) */
.date-item.active {
    background: #0d0d0d !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;
    transform: translateY(-4px) scale(1.03) !important;
    border: none !important;
}
body.dark-mode .date-item.active {
    background: var(--green-lime) !important;
    color: #0d0d0d !important;
    box-shadow: 0 6px 20px rgba(163,255,18,0.38) !important;
}

/* Texto e ícones dentro do dia ativo */
.date-item.active i,
.date-item.active span,
.date-item.active .day-num {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.dark-mode .date-item.active i,
body.dark-mode .date-item.active span,
body.dark-mode .date-item.active .day-num {
    color: #0d0d0d !important;
}

/* Ponto de "hoje" */
.date-item.today::after { background: var(--primary) !important; opacity: 0.75 !important; }
.date-item.active.today::after { background: rgba(255,255,255,0.82) !important; opacity: 1 !important; }
body.dark-mode .date-item.active.today::after { background: rgba(0,0,0,0.55) !important; opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════
   6. MOBILE REFINEMENTS — máxima usabilidade touch
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Grid com mais respiro */
    .grid { gap: 10px !important; }

    /* Content area com padding balanceado (bottom controlado pela regra de clearance do bottom-nav) */
    .content-scroll { padding-top: 10px !important; padding-right: 12px !important; padding-left: 12px !important; }

    /* Cards mobile arredondados e sem borda */
    .widget:not(.widget-special) { border-radius: 16px !important; }
    .widget-special              { border-radius: 16px !important; }

    /* Calendário mobile — pills menores e limpas */
    .date-item {
        min-width: 42px !important;
        height: 56px !important;
        border-radius: 10px !important;
    }
    .date-item.active {
        transform: translateY(-3px) scale(1.025) !important;
        box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
    }

    /* Ícone menor no mobile */
    .widget-icon {
        width: 30px !important;
        height: 30px !important;
        border-radius: 8px !important;
        font-size: 0.86rem !important;
    }

    /* Botão de check — target mínimo confortável */
    .btn-check-habit {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.88rem !important;
    }
}

/* Celulares muito pequenos — 2 colunas menores */
@media (max-width: 380px) {
    .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ── Textarea das notas diárias: branco com borda definida ── */
.daily-textarea,
.global-textarea {
    background: #ffffff !important;
    border: 1.5px solid rgba(0,0,0,0.14) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
}
.daily-textarea:focus,
.global-textarea:focus {
    background: #ffffff !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(90,148,0,0.12), inset 0 1px 2px rgba(0,0,0,0.03) !important;
}
body.dark-mode .daily-textarea,
body.dark-mode .global-textarea {
    background: rgba(20,20,20,0.95) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* ── Ícone radar Agora: sidebar desktop ─────────────────────── */
#deskNavCommunity .agora-radar-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: currentColor;
    flex-shrink: 0;
}
.menu-link.active #deskNavCommunity .agora-radar-icon,
#deskNavCommunity.active .agora-radar-icon {
    color: var(--primary) !important;
}

/* ── ÁGORA no DESKTOP: ícones azuis (tema comunidade) + pulso ──────────
   Sidebar, botão "Ágora" do header e o radar do card "Acesse a comunidade". */
@keyframes agoraPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0)); }
    50%      { transform: scale(1.12); filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.55)); }
}
@media (min-width: 769px) {
    #deskNavCommunity .agora-radar-icon,
    #deskNavCommunity.active .agora-radar-icon,
    .header-agora-btn svg,
    .widget-community-preview-title svg {
        color: #2563eb !important;
        animation: agoraPulse 2.2s ease-in-out infinite;
        will-change: transform;
    }
    body.dark-mode #deskNavCommunity .agora-radar-icon,
    body.dark-mode #deskNavCommunity.active .agora-radar-icon,
    body.dark-mode .header-agora-btn svg,
    body.dark-mode .widget-community-preview-title svg {
        color: #60a5fa !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    #deskNavCommunity .agora-radar-icon,
    .header-agora-btn svg,
    .widget-community-preview-title svg { animation: none !important; }
}

/* Ícone radar bottom nav index: sizing */
.bottom-nav-item.highlighted .agora-radar-icon {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--primary) !important;
}

/* ── BOTTOM NAV — Ágora (highlighted): reset do ícone para não herdar chip ── */
@media (max-width: 768px) {
    .bottom-nav-pill { display: none !important; }

    .bottom-nav-item.highlighted i {
        background: none !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   ██ ZIP DESIGN SYSTEM v3 — Warm Precision
   Depth · Atmosphere · Material Elevation
   ═══════════════════════════════════════════════════════════════════ */


/* Fundo do app: ver seção "BACKGROUND DO APP" (única fonte, no fim do arquivo). */

/* ── Widget cards ────────────────────────────────────────────── */
.widget:not(.widget-special) {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.dark-mode .widget:not(.widget-special) {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-color) !important;
}
@media (hover: hover) {
    .widget:not(.widget-special):hover {
        box-shadow: var(--shadow-md) !important;
        transform: translateY(-3px) !important;
    }
}

/* Widget-special (Finance, Stats, Planner) */
.widget-special {
    box-shadow: var(--shadow) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
}


/* ── Stagger de entrada dos cards ───────────────────────────── */
@keyframes zipCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.grid > * {
    animation: zipCardIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.grid > *:nth-child(1)  { animation-delay: 0.04s; }
.grid > *:nth-child(2)  { animation-delay: 0.09s; }
.grid > *:nth-child(3)  { animation-delay: 0.14s; }
.grid > *:nth-child(4)  { animation-delay: 0.19s; }
.grid > *:nth-child(5)  { animation-delay: 0.24s; }
.grid > *:nth-child(6)  { animation-delay: 0.29s; }
.grid > *:nth-child(7)  { animation-delay: 0.34s; }
.grid > *:nth-child(8)  { animation-delay: 0.38s; }
.grid > *:nth-child(9)  { animation-delay: 0.42s; }
.grid > *:nth-child(10) { animation-delay: 0.46s; }
@media (max-width: 768px) { .grid > * { animation-duration: 0.3s; } }
@media (prefers-reduced-motion: reduce) { .grid > * { animation: none !important; } }

/* ── Settings section ────────────────────────────────────────── */
.settings-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-lg) !important;
}
body.dark-mode .settings-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}
.settings-row {
    border-radius: 12px !important;
    transition: background 0.15s !important;
}
.settings-row:hover { background: rgba(0,0,0,0.025) !important; }
body.dark-mode .settings-row:hover { background: rgba(255,255,255,0.025) !important; }

/* ── Botões: press animation tátil ──────────────────────────── */
.btn-primary:active  { transform: scale(0.97) !important; transition-duration: 0.08s !important; }
.btn-secondary:active { transform: scale(0.97) !important; transition-duration: 0.08s !important; }
.btn-check-habit:active { transform: scale(0.9) !important; transition-duration: 0.08s !important; }
.fab-main:active { transform: scale(0.92) !important; }
.btn-icon:active { transform: scale(0.9) !important; }

/* ── Botão primário: identidade Zip (preto/lime) ────────────── */
.btn-primary {
    background: #0d0d0d !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.08) !important;
    border-radius: 14px !important;
}
.btn-primary:hover {
    background: #1a1a1a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.1) !important;
    color: var(--green-lime) !important;
}
body.dark-mode .btn-primary {
    background: var(--green-lime) !important;
    color: #0d0d0d !important;
    box-shadow: 0 4px 16px rgba(143,214,0,0.28) !important;
}
body.dark-mode .btn-primary:hover {
    background: #a3f500 !important;
    box-shadow: 0 8px 24px rgba(143,214,0,0.4) !important;
    color: #0d0d0d !important;
    transform: translateY(-2px) !important;
}

/* ── Form inputs: refined across app ───────────────────────── */
.form-control, input[type="date"], input[type="time"], select {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
}
.form-control:focus, input[type="date"]:focus, input[type="time"]:focus, select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(90,148,0,0.13), inset 0 1px 2px rgba(0,0,0,0.04) !important;
    background: #ffffff !important;
}
body.dark-mode .form-control,
body.dark-mode input[type="date"],
body.dark-mode input[type="time"],
body.dark-mode select {
    background: rgba(20,20,20,0.9) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35) !important;
}
body.dark-mode .form-control:focus,
body.dark-mode input[type="date"]:focus {
    border-color: var(--green-lime) !important;
    box-shadow: 0 0 0 3px rgba(179,255,26,0.13) !important;
}

/* ── Modal content: elevated ────────────────────────────────── */
.modal-content {
    box-shadow: var(--shadow-lg) !important;
}

/* ── Hero card ───────────────────────────────────────────────── */
.daily-hero-card {
    box-shadow: var(--shadow-md) !important;
}

/* ── Cal wrapper: clean separator ───────────────────────────── */
.cal-wrapper {
    box-shadow: 0 1px 0 rgba(0,0,0,0.055), 0 4px 16px rgba(0,0,0,0.04) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ██ ZIP PALETTE v4 — Green-White Canvas · Border Depth
   ═══════════════════════════════════════════════════════════════════ */

/* ── 2. DOT-GRID removido — fundo do app agora é chapado (ver "BACKGROUND DO APP", no fim) ─ */

/* ── 3. CARD BORDERS: definição visual sem ser pesado ─────────── */
/* Widgets normais */
.widget:not(.widget-special) {
    border: 1px solid rgba(0,60,0,0.1) !important;
}
body.dark-mode .widget:not(.widget-special) {
    border: 1px solid rgba(80,200,40,0.1) !important;
}
/* Settings section */
.settings-section {
    border: 1px solid rgba(0,60,0,0.08) !important;
}
body.dark-mode .settings-section {
    border: 1px solid rgba(80,200,40,0.08) !important;
}
/* Modais */
.modal-content {
    border: 1px solid rgba(0,60,0,0.08) !important;
}
body.dark-mode .modal-content {
    border: 1px solid rgba(80,200,40,0.08) !important;
}
/* Sidebar */
.sidebar {
    border-right: 1px solid rgba(0,60,0,0.1) !important;
}
body.dark-mode .sidebar {
    border-right: 1px solid rgba(80,200,40,0.08) !important;
}
/* Cal wrapper */
.cal-wrapper {
    border-bottom: 1px solid rgba(0,60,0,0.08) !important;
}
body.dark-mode .cal-wrapper {
    border-bottom-color: rgba(80,200,40,0.07) !important;
}

/* ── 4. BLUE REMOVAL: substituição cirúrgica ─────────────────── */

/* Calendário — ícone de dias futuros (era azul #3b82f6) */
.date-item .status-icon-future {
    color: #5a9040 !important;  /* sage-verde discreto */
    opacity: 0.7 !important;
}


/* Hero card: blue glow inferior → verde suave */
.daily-hero-card::after {
    background: radial-gradient(circle, rgba(46,125,0,0.07) 0%, transparent 65%) !important;
}

/* Mobile header — nav separator */
.mobile-header {
    border-bottom-color: rgba(0,60,0,0.08) !important;
}

/* ── 5. COMUNIDADE — ícone Ágora: verde marca, sem pill ───── */
@media (max-width: 768px) {
    .bottom-nav-item.highlighted,
    .bottom-nav-item.highlighted.active {
        background: none !important;
        box-shadow: none !important;
        color: var(--primary) !important;
    }
    .bottom-nav-item.highlighted .agora-radar-icon,
    .bottom-nav-item.highlighted i,
    .bottom-nav-item.highlighted span {
        color: var(--primary) !important;
        opacity: 1 !important;
    }
}

/* ── 5b. ÁGORA = tema AZUL da comunidade ──────────────────────────────
   O item Ágora do menu inferior usa o azul Ágora (#2563eb / #60a5fa no escuro)
   em vez do verde da marca — ícone-radar (currentColor), texto e um leve brilho
   azul como "efeito". `#bnCommunity` (ID) vence as regras `.highlighted` acima. */
@media (max-width: 768px) {
    #bnCommunity,
    #bnCommunity.active,
    #bnCommunity span,
    #bnCommunity .agora-radar-icon,
    #bnCommunity i {
        color: #2563eb !important;
        opacity: 1 !important;
    }
    #bnCommunity .agora-radar-icon {
        filter: drop-shadow(0 0 5px rgba(37, 99, 235, 0.45));
    }
    body.dark-mode #bnCommunity,
    body.dark-mode #bnCommunity.active,
    body.dark-mode #bnCommunity span,
    body.dark-mode #bnCommunity .agora-radar-icon,
    body.dark-mode #bnCommunity i {
        color: #60a5fa !important;
    }
    body.dark-mode #bnCommunity .agora-radar-icon {
        filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.5));
    }
}

/* ── 6. ACENTO AZUL restante → verde em SVG / badges ─────────── */
/* Flow leaderboard chip e badges de info */
[class*="accent-blue"],
.stat-year-fill[style*="3b82f6"],
.accent-blue { color: var(--primary) !important; }

/* Botões de conectar Google — manter identidade Google (deixar) */
/* Demais: garantir que --info e --accent-blue são verde */
.toast.info { background: var(--primary) !important; color: #fff !important; }


/* ============================================================
   LAYOUT WIDGET OVERFLOW & SIZING CORRECTIONS
   Ensures all single-row widgets fit flawlessly within 155px
============================================================ */

/* 1. Alerts & Installation Widgets: snug spacing and original white card backgrounds with theme green buttons/icons */
#widget-notif-requirement,
#widget-install-pwa {
    overflow: hidden !important;
    padding: 10px 14px !important; /* snugs card itself, bypassing standard 24px padding */
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
}

body.dark-mode #widget-notif-requirement,
body.dark-mode #widget-install-pwa {
    background: rgba(22, 22, 24, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

#widget-notif-requirement .widget-special-content,
#widget-install-pwa .widget-special-content {
    padding: 0 !important; /* clean double padding helper */
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#widget-notif-requirement .widget-special-content i,
#widget-install-pwa .widget-special-content i {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
    margin-top: 2px !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--primary) !important;
    color: var(--primary) !important;
}

#widget-notif-requirement .widget-special-content h4,
#widget-install-pwa .widget-special-content h4 {
    font-size: 0.95rem !important;
    margin-bottom: 2px !important;
    margin-top: 0 !important;
    color: var(--text-main) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-main) !important;
}

#widget-notif-requirement .widget-special-content p,
#widget-install-pwa .widget-special-content p {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
    color: var(--text-sec) !important;
}

#widget-notif-requirement .btn-primary,
#widget-install-pwa .btn-primary {
    width: 100% !important;
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
    margin-top: auto !important;
    border-radius: var(--radius-md) !important;
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(110, 166, 3, 0.2) !important;
}

#widget-notif-requirement .btn-primary:hover,
#widget-install-pwa .btn-primary:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(110, 166, 3, 0.3) !important;
}

/* 2. Community Preview: exact 1-row proportion & no cut-off cards */
.widget-community-preview {
    padding: 10px 14px !important;
    gap: 8px !important;
    height: 155px !important;
    box-sizing: border-box !important;
}

.widget-community-preview-header {
    margin-bottom: 0 !important;
}

.community-carousel-wrapper {
    margin-top: 0 !important;
    height: 98px !important;
    display: flex !important;
    align-items: center !important;
}

.community-posts-scroll-row {
    height: 100% !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Premium Compact Carousel Card Sizing */
.community-mini-post {
    flex: 0 0 252px !important;
    width: 252px !important;
    max-width: 252px !important;
    min-width: 252px !important;
    height: 82px !important;
    padding: 8px 10px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.community-mini-post-author {
    gap: 6px !important;
}

.community-mini-post-avatar {
    width: 22px !important;
    height: 22px !important;
}

.community-mini-post-author-name {
    font-size: 0.78rem !important;
    max-width: 120px !important;
}

.community-mini-post-time {
    font-size: 0.7rem !important;
}

.community-mini-post-content {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    min-height: auto !important;
    height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

.community-mini-post-actions {
    padding-top: 4px !important;
    margin-top: 0 !important;
    gap: 8px !important;
    font-size: 0.72rem !important;
}

/* === WIDGET DE AVISO SOLITÁRIO — centralizado quando apenas um dos dois está visível === */
/* Na grade ≥2 colunas, ocupa a linha inteira mas se centraliza com largura de 1 coluna */
@media (min-width: 500px) {
    .widget-solo-warning {
        grid-column: 1 / -1 !important;
        justify-self: center !important;
        width: calc(50% - 8px) !important; /* ~1 coluna em grade de 2 colunas */
    }
}

@media (max-width: 768px) {
    .widget-solo-warning {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 1100px) {
    .widget-solo-warning {
        width: calc(33.333% - 14.667px) !important; /* ~1 coluna em grade de 3 colunas */
    }
}

@media (min-width: 1500px) {
    .widget-solo-warning {
        width: calc(25% - 18px) !important; /* ~1 coluna em grade de 4 colunas */
    }
}

/* === DAILY-NOTE DESKTOP — textarea cresce para preencher o card full-width === */
.widget[style*="grid-column: 1 / -1"] .daily-textarea,
.widget[style*="grid-column: 1 / -1"] .global-textarea {
    min-height: 160px !important;
    flex-grow: 1 !important;
}

/* === DAILY-NOTE MOBILE — tamanho reduzido (1 coluna, 2 linhas da grade) === */
@media (max-width: 499px) {
    #widget-daily-note-col .daily-textarea {
        min-height: 120px !important;
    }
}

/* ================================================================
   ██████ ZIP LIFESTYLE — DIREÇÃO B · BENTO/DASHBOARD REDESIGN
   ================================================================ */


/* ── Rótulo eyebrow (mono uppercase) ───────────────────────────── */
.zm-eyebrow {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-sec);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}


/* ── BENTO HERO ─────────────────────────────────────────────────── */
.home-bento-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 13px;
    margin-bottom: 4px;
}

/* Tile escuro (anel) */
.bento-ring-tile {
    background: #0d0d0d;
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 18px 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--lime);
    min-height: 140px;
}

.bento-ring-tile .hero-ring-svg .hero-ring-track {
    stroke: rgba(255, 255, 255, 0.14) !important;
}

.bento-ring-tile .hero-ring-svg .hero-ring-fill {
    stroke: var(--lime) !important;
    filter: drop-shadow(0 0 6px rgba(163, 255, 18, 0.55)) !important;
}

.bento-ring-tile .hero-pct-val {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.bento-ring-tile .hero-pct-sym {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.6em !important;
}

.bento-ring-tag {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
    display: block;
}

.bento-ring-mid {
    display: flex;
    align-items: center;
    justify-content: center; /* anel centralizado — "Hoje" ocupa só uma linha, sobra espaço */
    gap: 16px;
}

/* Anel maior dentro do tile "Hoje" (sobra espaço com o título de uma linha) */
.bento-ring-tile .hero-ring-wrap,
.bento-ring-tile .hero-ring-svg {
    width: 96px !important;
    height: 96px !important;
}
/* O glow neon do anel (drop-shadow no traço) era CLIPADO pela caixa quadrada do
   SVG (overflow:hidden é o padrão do user-agent p/ <svg>), formando um quadrado
   verde que destoava do preto. overflow:visible deixa o brilho sair circular —
   o card (.bento-ring-tile) já tem overflow:hidden arredondado que o contém. */
.bento-ring-tile .hero-ring-svg {
    overflow: visible !important;
}
.bento-ring-tile .hero-pct-val {
    font-size: 22px !important;
}

.bento-ring-stats {
    display: flex;
    flex-direction: column;
    gap: 12px; /* dois blocos: hábitos + tarefas */
}
.bento-ring-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bento-ring-done {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.04em;
    color: #fff;
    line-height: 1;
}

.bento-ring-label {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Inter', sans-serif;
}

.bento-ring-tile .hero-motivation-msg {
    font-size: 10px !important;
    color: rgba(255, 255, 255, 0.38) !important;
    font-style: italic;
    line-height: 1.4;
    margin-top: 10px;
}

/* ── Chips de navegação na ring tile ── */
.ring-tile-nav-chips {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}
.ring-chips-label {
    font-size: 0.56rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    display: block;
    text-align: center;
}
.ring-chips-row {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}
.ring-nav-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 22px;
    background: rgba(163, 255, 18, 0.14);
    border: 1.5px solid rgba(163, 255, 18, 0.45);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.7);
    font-size: 0.68rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(163,255,18,0.08);
}
.ring-nav-chip i {
    font-size: 0.64rem;
    color: #ffffff;
}
.ring-nav-chip:hover {
    background: rgba(163, 255, 18, 0.24);
    border-color: rgba(163, 255, 18, 0.65);
}
.ring-nav-chip:active {
    background: rgba(163, 255, 18, 0.3);
    color: #ffffff;
    border-color: rgba(163, 255, 18, 0.7);
    transform: scale(0.94);
}

/* Chips são exclusivos do mobile — ocultos no desktop */
@media (min-width: 769px) {
    .ring-tile-nav-chips {
        display: none !important;
    }
}

/* Coluna direita: tiles claros */
.bento-tiles-col {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.bento-stat-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 15px;
    flex: 1;
    box-shadow: var(--shadow-sm-b);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}

.bento-stat-tile.accent {
    background: rgba(90, 148, 0, 0.10);
    border-color: transparent;
}

.bento-tile-tag {
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 5px;
}

.bento-tile-val {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.04em;
    color: var(--text-main);
    line-height: 1;
}

.bento-tile-val small {
    font-size: 13px;
    color: var(--text-sec);
    font-weight: 600;
}

/* ── SECTION LABELS ─────────────────────────────────────────────── */
.home-sec-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
}

.home-sec-line {
    flex: 1;
    height: 1px;
    background: var(--border-hair);
}

.home-sec-act {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
}

.home-sec-act:hover {
    color: var(--primary-hover);
}

/* ── Alça de reordenar grupos (ao lado do nome) ─────────────────── */
.sec-drag-handle {
    background: none;
    border: none;
    padding: 4px 6px;
    margin-left: 2px;
    color: var(--text-sec);
    cursor: grab;
    font-size: 0.82rem;
    line-height: 1;
    border-radius: 7px;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.sec-drag-handle:hover {
    opacity: 1;
    color: var(--primary);
    background: rgba(90, 148, 0, 0.10);
}
.sec-drag-handle:active { cursor: grabbing; }
body.dark-mode .sec-drag-handle:hover { background: rgba(155, 219, 31, 0.12); }

/* ── Modo Reorganizar Grupos (overlay + cards arrastáveis) ──────── */
body.greorder-open { overflow: hidden; user-select: none; -webkit-user-select: none; }

.greorder-layer {
    position: fixed;
    inset: 0;
    z-index: 100030;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.greorder-layer.show { opacity: 1; }

.greorder-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.6);
    /* sem backdrop-filter: blur — recalcular o blur a cada frame do arraste
       derruba o desempenho no desktop (dashboard inteiro atrás). */
}

.greorder-panel {
    position: absolute;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

/* Desktop: painel central (modo foco em 1 coluna) */
.greorder-layer.is-desktop .greorder-panel {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
    width: min(440px, 92vw);
    max-height: 80vh;
    border-radius: 22px;
    border: 1px solid var(--border-color);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s;
}
.greorder-layer.is-desktop.show .greorder-panel { transform: translate(-50%, -50%); opacity: 1; }

/* Mobile: bottom sheet */
.greorder-layer.is-mobile .greorder-panel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 85vh;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.greorder-layer.is-mobile.show .greorder-panel { transform: translateY(0); }

.greorder-grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--border-color); margin: 0 auto 14px; }
.greorder-head { padding: 16px 18px 10px; flex-shrink: 0; }
.greorder-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.greorder-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.2rem; margin: 0; color: var(--text-main); }
.greorder-sub { font-size: 0.78rem; color: var(--text-sec); margin: 3px 0 0; }
.greorder-x {
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 50%;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-sec); flex-shrink: 0;
}

.greorder-list { flex: 1; overflow-y: auto; padding: 6px 14px; -webkit-overflow-scrolling: touch; }
.greorder-foot {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0; border-top: 1px solid var(--border-color); background: var(--bg-app);
}
.greorder-done {
    width: 100%; padding: 14px; border-radius: 14px; font-weight: 800; font-size: 1rem; border: none;
    background: var(--text-main); color: var(--bg-card); cursor: pointer; font-family: 'Outfit', sans-serif;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

.greorder-card {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; margin-bottom: 8px;
    background: var(--bg-card); border: 1px solid var(--border-color); cursor: grab; user-select: none;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s, border-color 0.18s, background 0.18s, opacity 0.18s;
}
.greorder-card:active { cursor: grabbing; }
.greorder-card.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(90, 148, 0, 0.18);
    animation: greorderPop 0.4s ease;
}
@keyframes greorderPop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.greorder-card.dragging {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    background: var(--app-canvas, #eef1f5);
    opacity: 0.92;
    z-index: 5;
    transition: none;          /* segue o ponteiro sem atraso (transform inline) */
    will-change: transform;
}
body.dark-mode .greorder-card.dragging { background: rgba(255, 255, 255, 0.06); }
.greorder-chip-emoji { font-size: 0.95rem; line-height: 1; }
.greorder-handle { color: var(--text-sec); opacity: 0.45; font-size: 0.9rem; flex-shrink: 0; }
.greorder-badge {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(90, 148, 0, 0.12); color: var(--primary); font-size: 1rem;
}
body.dark-mode .greorder-badge { background: rgba(155, 219, 31, 0.14); }
.greorder-name {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text-main);
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.greorder-preview { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.greorder-chip {
    width: 26px; height: 26px; border-radius: 8px; background: var(--bg-app); border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--text-sec);
}
.greorder-chip img { width: 15px; height: 15px; object-fit: contain; }
.greorder-more { color: var(--text-sec); font-weight: 800; font-size: 0.95rem; margin-left: 2px; }
.greorder-ph {
    border-radius: 14px; margin-bottom: 8px;
    border: 2px dashed var(--primary); background: rgba(90, 148, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
    .greorder-card, .greorder-panel, .greorder-layer { transition: none; animation: none; }
}

/* ── WIDGET CARDS — direção B ───────────────────────────────────── */
.widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm-b) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Sobrescreve a sombra hover para algo mais sutil em B */
@media (hover: hover) {
    .widget:hover {
        box-shadow: var(--shadow-md-b) !important;
        transform: translateY(-2px);
    }
}

/* Widgets especiais (finance, stats, etc.) mantêm fundo escuro sem borda */
.widget.widget-special {
    border: none !important;
}

/* Ícone do widget: usa a cor da categoria, não inverte ao concluir */
.widget .widget-icon {
    border-radius: 13px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 17px;
    flex-shrink: 0;
}

/* Check button estilo B — verde sobre claro */
.btn-check-habit {
    background: transparent;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: transparent;
    transition: all 0.15s ease;
    flex-shrink: 0;
    cursor: pointer;
}

.btn-check-habit.checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

/* Override de botão de pular removido para evitar conflitos */

/* Grid mobile: 2 colunas, sem altura mínima forçada por linha */
@media (max-width: 768px) {
    #widgetsGrid.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        grid-auto-rows: auto !important;
    }
}

/* ── ADD SHEET — visual B ───────────────────────────────────────── */
.add-sheet {
    background: var(--bg-app) !important;
    border-radius: 26px 26px 0 0 !important;
}

.add-sheet-head {
    background: var(--bg-app) !important;
}

.add-sheet-head h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.add-sheet-search {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    margin-bottom: 0;
}

.add-tpl {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
}

.add-tpl:hover,
.add-tpl:active {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-md-b) !important;
    transform: translateY(-2px);
}

.add-section-header .add-cat-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -0.03em;
    color: var(--text-main);
    opacity: 1;
}

/* Live preview no step 2 — preto com lime */
.add-live-preview {
    background: #0d0d0d !important;
    border-radius: 18px !important;
    border: none !important;
}

.add-live-preview .add-live-title {
    color: #fff !important;
}

.add-live-preview .add-live-meta {
    color: rgba(255, 255, 255, 0.55) !important;
}

.add-live-ico {
    background: var(--lime) !important;
    color: #0d0d0d !important;
    border-radius: 13px !important;
}

.w-step2-save-btn {
    background: #0d0d0d !important;
    color: var(--lime) !important;
    border-radius: 15px !important;
}

/* ── DESKTOP — direção B ────────────────────────────────────────── */
@media (min-width: 769px) {
    .home-topbar {
        display: none !important;
    }
}

/* ── OVERRIDE HERO ANTIGO (substituído pelo bento) ──────────────── */
.daily-hero-card {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    animation: none !important;
    overflow: visible !important;
}

.daily-hero-card::before,
.daily-hero-card::after {
    display: none !important;
}

/* Hero ring no bento — tamanho ajustado */
.bento-ring-tile .hero-ring-wrap {
    width: 58px !important;
    height: 58px !important;
}

.bento-ring-tile .hero-ring-svg {
    width: 58px !important;
    height: 58px !important;
}

.bento-ring-tile .hero-ring-center {
    font-size: 0.7rem !important;
}

/* Progress bar dentro dos hábitos — gradiente verde */
.widget .progress-bar .progress-fill {
    background: linear-gradient(90deg, var(--primary), var(--green-lime)) !important;
}

/* Hábito completo — ícone NÃO inverte cor (spec B: mantém estilo neutro, só dimeia) */
.widget.c-dark.completed .widget-icon,
.widget.c-green.completed .widget-icon,
.widget.c-blue.completed .widget-icon,
.widget.c-teal.completed .widget-icon,
.widget.c-yellow.completed .widget-icon,
.widget.c-purple.completed .widget-icon,
.widget.c-red.completed .widget-icon,
.widget.c-orange.completed .widget-icon,
.widget.c-lime.completed .widget-icon,
.widget.c-pink.completed .widget-icon,
.widget.c-indigo.completed .widget-icon,
.widget.c-cyan.completed .widget-icon,
.widget.c-emerald.completed .widget-icon {
    background: rgba(13, 13, 13, 0.06) !important;
    color: var(--text-sec) !important;
    opacity: 0.7 !important;
}

/* Streak badge */
.habit-streak-badge {
    color: var(--green-dk);
    font-weight: 700;
    font-size: 11.5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Cal wrapper no mobile — integrar com topbar */
@media (max-width: 768px) {
    .cal-wrapper {
        background: #ffffff !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    body.dark-mode .cal-wrapper {
        background: var(--bg-base) !important;
    }

    .cal-header-mobile {
        color: var(--text-main) !important;
        font-size: 0.9rem !important;
        padding: 8px 20px 6px !important;
    }
}

/* ============ REDESIGNED WIDGET ELEMENTS ============ */

/* Library book virtual shelf and books */
/* Estante: wrapper relativo p/ posicionar as setas (desktop) */
.zlib-scroll-wrap {
    position: relative;
    margin-top: 14px;
}

.zlib-books {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-padding: 0 12px;
}
.zlib-books::-webkit-scrollbar { display: none; }

/* Cada livro da estante = clicável, com título pequeno embaixo */
.zbook-item {
    flex: 0 0 auto;
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.zbook-item:hover .zbook {
    transform: translateY(-3px);
    box-shadow: inset -6px 0 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.12);
}
.zbook-label {
    font-size: 0.62rem;
    line-height: 1.15;
    font-weight: 600;
    color: var(--text-sec);
    text-align: center;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zbook-item.add-item .zbook-label { color: var(--text-main); opacity: 0.55; }

.zbook {
    flex: 0 0 48px;
    width: 48px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, #d6cfc0, #c2b9a6);
    position: relative;
    overflow: hidden;
    box-shadow: inset -6px 0 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Barra de progresso de leitura na base da lombada (lime da marca) */
.zbook-prog {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: #a3ff12;
    box-shadow: 0 0 6px rgba(163, 255, 18, 0.6);
    border-radius: 0 2px 0 0;
}

/* Setas (somente desktop, aparecem ao passar o mouse) */
.zlib-arrow {
    display: none;
    position: absolute;
    top: 32px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition: opacity 0.18s ease, background 0.18s ease;
}
.zlib-arrow.left { left: -8px; }
.zlib-arrow.right { right: -8px; }
.zlib-arrow:hover { background: var(--text-main); color: var(--bg-card); }
@media (min-width: 769px) {
    .zlib-scroll-wrap:hover .zlib-arrow { opacity: 1; }
}

/* Destaque ao abrir um livro específico a partir do widget */
.book-item-highlight {
    animation: bookItemPulse 1.5s ease;
}
@keyframes bookItemPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(163, 255, 18, 0); }
    25% { box-shadow: 0 0 0 3px rgba(163, 255, 18, 0.55); }
}

.zbook::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.35);
}

.zbook.b2 {
    background: linear-gradient(135deg, #9ebb9e, #8ba48b);
}

.zbook.b3 {
    background: linear-gradient(135deg, #c1b0c1, #a392a3);
}

.zbook.add {
    background: transparent !important;
    border: 1.5px dashed var(--border-color);
    box-shadow: none;
    display: grid;
    place-items: center;
    color: var(--text-sec);
    font-size: 18px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    flex: 0 0 48px;
    width: 48px;
    height: 64px;
}

.zbook.add::before {
    background: var(--border-color);
    opacity: 0.5;
}

.zbook.add:hover {
    border-color: var(--text-main);
    color: var(--text-main);
}

/* Thin Habit Suggestions inside Add Sheet */
.add-sug-item-thin {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 14px;
    width: 100%;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
    color: var(--text-main);
    font-family: inherit;
    position: relative;
    box-sizing: border-box;
}

.add-sug-item-thin:hover {
    border-color: var(--primary);
    background: var(--primary-light-alpha, rgba(168, 85, 247, 0.04));
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.add-sug-item-thin:active {
    transform: scale(0.99);
}

.add-sug-item-thin .sug-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(58, 122, 0, 0.1);
    color: #3a7a00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

body.dark-mode .add-sug-item-thin .sug-icon {
    background: rgba(110, 200, 0, 0.2);
    color: #8ae41e;
}

.add-sug-item-thin .sug-info {
    flex: 1;
    min-width: 0;
}

.add-sug-item-thin .sug-info h5 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-main);
}

.add-sug-item-thin .sug-info p {
    font-size: 0.7rem;
    color: var(--text-sec);
    margin: 1px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-sug-item-thin .sug-plus {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-sec);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.add-sug-item-thin:hover .sug-plus {
    border-color: var(--text-main);
    color: var(--text-main);
    background: var(--text-main);
    color: var(--bg-card);
}

/* Home Section Header spacing inside grid */
.home-sec-label,
.grid .home-sec-label {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: flex !important;
    align-self: center;
    margin-top: 24px;
    margin-bottom: 8px;
}

/* Combined Habits row items for mobile */
.habit-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}
.habit-list-item .widget-icon { background: rgba(90,148,0,.12); color: var(--green-deep); }
body.dark-mode .habit-list-item .widget-icon { background: rgba(155,219,31,.14); color: var(--green); }

.habit-list-item:last-child {
    border-bottom: none;
}

.habit-list-item.completed {
    opacity: 0.75;
}

.habit-list-item.completed h5 {
    color: var(--text-sec) !important;
    position: relative;
    display: inline-block;
    text-decoration: none !important;
}

.habit-list-item.completed h5::after {
    content: '';
    position: absolute;
    left: 0;
    top: 52%;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transform-origin: left;
    animation: strikeThrough 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.habit-list-item .widget-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(13, 13, 13, 0.065) !important;
    color: var(--text-main) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07) !important;
}

body.dark-mode .habit-list-item .widget-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Ocultar cabeçalho estático: no mobile E no desktop (renderizado dinamicamente dentro do grid) */
#view-home > .home-sec-label {
    display: none !important;
}

/* Desktop grouped layout: rows auto-sized so section labels don't force 185px rows */
#widgetsGrid.has-sec-labels {
    grid-auto-rows: auto !important;
}
#widgetsGrid.has-sec-labels .widget {
    height: auto !important;
    min-height: 185px;
}

/* ── MOBILE SPACING POLISH ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* Gap between bento-hero and the widgets grid */
    .home-bento-hero {
        margin-bottom: 14px !important;
    }

    /* Tighter section labels inside the grid on mobile:
       - pouco espaço entre os cards de ajuda e o título do grupo (margin-top)
       - bem menos espaço entre o título e os cards do grupo (margin-bottom negativa puxa as linhas) */
    .grid .home-sec-label {
        margin-top: 8px !important;
        margin-bottom: -10px !important;
    }

    /* "Hoje" label sits directly after community/help widgets — even less top margin */
    #sec-label-Hoje {
        margin-top: 4px !important;
    }

    /* Community preview widget: no extra margin */
    .widget-community-preview {
        margin-top: 0 !important;
    }

    /* Reduce home-topbar bottom padding */
    .home-topbar {
        padding-bottom: 14px !important;
    }

    /* Daily note button: don't stretch to fill row, keep compact */
    .daily-note-btn-widget {
        align-self: start;
    }

    /* Warning widgets: keep their natural height (don't over-stretch) */
    .widget.widget-special {
        align-self: stretch;
    }
}

/* ── DAILY-NOTE BUTTON WIDGET (mobile) ──────────────────────────── */
.daily-note-btn-widget {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm-b);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 60px;
    display: flex;
    align-items: stretch;
}

.daily-note-btn-widget:active {
    transform: scale(0.98);
    box-shadow: none;
}

.daily-note-btn-widget:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md-b);
}

.daily-note-btn-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    width: 100%;
}

.daily-note-btn-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    /* Notas Diárias usa o laranja da identidade de Organização (alinha com os demais ícones). */
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

body.dark-mode .daily-note-btn-icon {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;
}

/* ============================================================
   REMOÇÃO DE WIDGETS NO MOBILE (× no canto) + EXCLUIR HÁBITO
   Só aparece no mobile; blocos fixos (Planner/Finanças) não recebem o botão
   (filtrado no JS). deleteWidget já pede confirmação antes de excluir.
   ============================================================ */
@media (max-width: 768px) {
    .widget,
    .daily-note-btn-widget { position: relative; }

    .widget-mob-remove {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(13, 13, 13, 0.06);
        color: var(--text-sec);
        font-size: 0.72rem;
        line-height: 1;
        padding: 0;
        z-index: 6;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.18s, color 0.18s, transform 0.12s;
    }
    .widget-mob-remove:active {
        transform: scale(0.9);
        background: rgba(239, 68, 68, 0.16);
        color: #ef4444;
    }
    /* OBS: os widgets avançados (treino/estudos/bíblia/pomodoro) têm classe
       `widget-special` mas usam card CLARO (host sobrescreve o fundo). Por isso o ×
       NÃO pode ser branco — fica branco-no-branco e some. Mantemos o × escuro no
       claro e claro no escuro, conforme o tema (e não a classe). */
    body.dark-mode .widget-mob-remove {
        background: rgba(255, 255, 255, 0.12);
        color: var(--text-sec);
    }

    /* No botão de Notas Diárias a setinha some e o × ocupa o lugar dela (à direita,
       centralizado) — antes o × ficava por cima da setinha. */
    .daily-note-btn-widget .daily-note-btn-arrow { display: none; }
    .daily-note-btn-widget .daily-note-btn-inner { padding-right: 40px; }
    .daily-note-btn-widget .widget-mob-remove {
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
    }
    .daily-note-btn-widget .widget-mob-remove:active { transform: translateY(-50%) scale(0.9); }
}

/* Botão discreto de excluir hábito nas linhas do mobile (combined-habits-list). */
.btn-habit-del-mob {
    border: none;
    background: transparent;
    color: var(--text-sec);
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.5;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.btn-habit-del-mob:active {
    opacity: 1;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.daily-note-btn-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.daily-note-btn-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    margin: 0;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.daily-note-btn-sub {
    font-size: 0.72rem;
    color: var(--text-sec);
    margin: 1px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.daily-note-btn-saved-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.daily-note-btn-arrow {
    color: var(--text-sec);
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-right: 2px;
}

.daily-note-btn-actions {
    flex-shrink: 0;
    margin-left: -2px;
}

/* Dark mode fix for daily note modal textarea */
body.dark-mode #dailyNoteTextarea {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
/* ── HABIT ORGANIZER BOTTOM SHEET ────────────────────────────────── */
.habit-org-sheet {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.habit-org-header {
    padding: 16px 18px 12px;
    flex-shrink: 0;
}

.habit-org-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px;
    -webkit-overflow-scrolling: touch;
}

.habit-org-footer {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-app);
}

.habit-org-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 14px;
    margin-bottom: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s, opacity 0.15s;
    touch-action: none;
    user-select: none;
}

.habit-org-item.dragging {
    opacity: 0.5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: scale(1.02);
    cursor: grabbing;
}

.habit-org-item.drag-over {
    border-color: var(--primary);
    background: rgba(90, 148, 0, 0.06);
}

.habit-org-grip {
    color: var(--text-sec);
    font-size: 0.85rem;
    opacity: 0.5;
    flex-shrink: 0;
    cursor: grab;
}

.habit-org-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(13,13,13,0.065);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

body.dark-mode .habit-org-icon {
    background: rgba(255,255,255,0.08);
}

.habit-org-name {
    flex: 1;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.habit-org-del {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.07);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.habit-org-del:active {
    background: rgba(239,68,68,0.18);
}

/* ── FINANCE WIDGET REDESIGN ─────────────────────────────────────── */
/* Finance widget host: dark background wins over the Direction-B .widget-special override */
.widget-special.widget-finance-host {
    background: linear-gradient(150deg, #0d0d0d 0%, #111827 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
    padding: 0 !important;
    gap: 0 !important;
}

.widget-finance-host .widget-actions-bottom {
    padding: 10px 16px 12px !important;
    margin-top: 0 !important;
    border-top-color: rgba(255,255,255,0.1) !important;
}

.widget-finance-host .w-content-wrap {
    overflow: visible !important;
}

/* Warning widgets: app-consistent dark palette */
#widget-notif-requirement,
#widget-install-pwa {
    background: linear-gradient(150deg, #0d0d0d 0%, #111827 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}

/* Solo warning: when only one of the two warning cards is shown, expand to full row */
.widget.widget-solo-warning {
    grid-column: span 2 !important;
}

/* Finance widget bottom action bar */
.widget-finance-host .widget-actions-bottom {
    padding: 10px 18px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    background: transparent !important;
}
.zfin-bottom-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.zfin-bottom-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.zfin-bottom-btn:active { background: rgba(255,255,255,0.16); }
/* Trash button on mobile (all non-Hoje widgets) */
.mob-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: none;
    border: 1px solid var(--border-color);
    color: var(--green-dk);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.mob-trash-btn:active {
    background: rgba(63,106,0,0.1);
    color: var(--green-dk);
}

.fin-widget-card {
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    cursor: pointer;
    min-height: 215px;
}

.fin-widget-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fin-widget-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

.fin-widget-eye {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: background 0.15s;
}

.fin-widget-eye:active {
    background: rgba(255,255,255,0.2);
}

.fin-widget-balance {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 0;
}

.fin-widget-balance span {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.75;
    margin-right: 1px;
}

.fin-widget-compare {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fin-widget-compare .up {
    color: #a3ff12;
    font-weight: 700;
}

.fin-widget-compare .down {
    color: #fca5a5;
    font-weight: 700;
}

.fin-widget-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 42px;
    padding: 0 2px;
    flex: 1;
}

.fin-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.fin-chart-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.fin-chart-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: rgba(163, 255, 18, 0.75);
    min-height: 3px;
    transition: height 0.3s ease;
}

.fin-chart-bar.empty {
    background: rgba(255,255,255,0.1);
}

.fin-chart-day {
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.fin-widget-footer {
    display: flex;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.fin-widget-footer-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fin-footer-label {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fin-footer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fin-footer-val {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    letter-spacing: -0.02em;
}

/* ── DESIGN POLISH ───────────────────────────────────────────────── */

/* Community: hide arrow buttons on mobile — touch scroll handles it */
@media (max-width: 768px) {
    .community-scroll-btn {
        display: none !important;
    }
    .community-posts-scroll-row {
        padding: 0 4px !important;
    }
}

/* Habit list items: tighter padding in compact mobile list */
@media (max-width: 768px) {
    .habit-list-item {
        padding: 11px 0 !important;
    }

    /* Slightly smaller check button inside the combined card list */
    #widget-combined-today .btn-check-habit {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.9rem !important;
    }

    #widget-combined-today .btn-skip-habit-discrete {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }
}

/* Combined today card: subtle left accent border */
#widget-combined-today {
    border-left: 3px solid var(--primary) !important;
}

/* Bento hero: slightly less tall on small phones */
@media (max-width: 380px) {
    .bento-ring-tile {
        min-height: 118px !important;
        padding: 14px 13px !important;
    }
    .bento-stat-tile {
        padding: 10px 12px !important;
    }
    .bento-tile-val {
        font-size: 22px !important;
    }
}

/* Organizer modal: smooth slide for the sheet */
#habitOrganizerModal.show .modal-content.habit-org-sheet {
    transform: translateY(0) !important;
}

/* Finance widget chart: uniform min-height for empty bars */
.fin-chart-bar.empty {
    height: 25% !important;
    opacity: 0.35 !important;
}

/* ── FINANCE WIDGET — zfin design (matches Redesenho backup) ─────── */
.zfin-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 220px;
}

/* Decorative concentric rings */
.zfin-rings {
    position: absolute;
    top: -70px; right: -60px;
    width: 200px; height: 200px;
    pointer-events: none;
    opacity: 0.55;
}
.zfin-rings span {
    position: absolute; inset: 0; margin: auto;
    border-radius: 50%;
    border: 1px solid rgba(163,255,18,0.20);
}
.zfin-rings span:nth-child(1){ width:60px;  height:60px;  }
.zfin-rings span:nth-child(2){ width:120px; height:120px; }
.zfin-rings span:nth-child(3){ width:190px; height:190px; }

.zfin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.zfin-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    gap: 7px;
}

.zfin-eye {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.7);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.zfin-eye:active { background: rgba(255,255,255,0.18); }

.zfin-saldo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 7vw, 2rem);
    letter-spacing: -0.04em;
    margin-top: 12px;
    line-height: 1;
    position: relative;
    z-index: 1;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zfin-saldo .zcent {
    color: rgba(255,255,255,0.5);
    font-size: 0.6em;
    font-weight: 600;
}

.zfin-saldo-lbl {
    font-size: 11.5px;
    color: rgba(255,255,255,0.5);
    margin-top: 5px;
    position: relative;
    z-index: 1;
}

.zfin-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 46px;
    margin: 16px 0 5px;
    position: relative;
    z-index: 1;
}
.zfin-bars .zfb {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: rgba(255,255,255,0.14);
    min-height: 4px;
}
.zfin-bars .zfb.up {
    background: linear-gradient(180deg, #a3ff12, #6ab800);
}
.zfin-bars .zfb.down {
    background: linear-gradient(0deg, #ff6b6b, #dc2626);
    align-self: flex-start;
    border-radius: 2px 2px 4px 4px;
}
.zfin-bars .zfb.today {
    box-shadow: 0 0 0 1.5px rgba(163,255,18,0.5);
}
.zfin-bars .zfb.down.today {
    box-shadow: 0 0 0 1.5px rgba(220,38,38,0.5);
}

.zfin-days {
    display: flex;
    gap: 5px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}
.zfin-days span {
    flex: 1;
    text-align: center;
    font-size: 9.5px;
    color: rgba(255,255,255,0.38);
    font-family: 'JetBrains Mono', monospace;
}

.zfin-split {
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.zfin-pill {
    flex: 1;
    background: rgba(255,255,255,0.07);
    border-radius: 13px;
    padding: 11px 13px;
}
.zfp-top {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-family: 'Inter', sans-serif;
}
.zfp-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.zfin-pill.inc .zfp-dot { background: #a3ff12; }
.zfin-pill.exp .zfp-dot { background: #ff6b6b; }
.zfp-val {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    margin-top: 4px;
    letter-spacing: -0.02em;
    color: #fff;
}

/* ── DESKTOP 2-COLUMN LAYOUT ──────────────────────────────────── */
.desk-dual-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.desk-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* Section labels inside desk-col span both columns */
.desk-col .home-sec-label {
    grid-column: 1 / -1 !important;
    margin-top: 24px !important;
    margin-bottom: 8px !important;
}

.desk-col .home-sec-label:first-child {
    margin-top: 0 !important;
}

/* Special widgets in desktop columns: span both columns */
.desk-col .widget-finance-host {
    grid-column: 1 / -1 !important;
}
.desk-col .widget-special.widget-todo-host {
    grid-column: 1 / -1 !important;
}
.desk-col .widget-special {
    grid-column: 1 / -1;
}

/* ── PLANNER WIDGET (ztodo) ────────────────────────────────────── */
.widget-special.widget-todo-host {
    background: linear-gradient(150deg, #0d0d0d 0%, #111827 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    padding: 0 !important;
    gap: 0 !important;
}
.widget-special.widget-todo-host .w-content-wrap {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.widget-special.widget-todo-host .widget-actions-bottom {
    display: none !important;
}
.ztodo-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 18px 16px;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.ztodo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ztodo-head-l {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ztodo-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: rgba(90, 148, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.dark-mode .ztodo-badge { background: rgba(155, 219, 31, 0.14); }
.ztodo-badge i { font-size: 1.1rem; color: var(--primary); }
.ztodo-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--text-main);
}
.ztodo-tag {
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.42);
    display: flex;
    align-items: center;
    gap: 5px;
}
.ztodo-tag i { color: #4ade80; }
.ztodo-head-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ztodo-gcal-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(66, 133, 244, 0.35);
    background: rgba(66, 133, 244, 0.12);
    color: #6badf8;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
}
.ztodo-gcal-btn.connected {
    border-color: rgba(74, 222, 128, 0.4);
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}
.ztodo-gcal-btn:hover { opacity: 0.7; }
/* .ztodo-access-btn: visual de .zbtn--soft/.zbtn--sm (_core.css). */
.ztodo-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ztodo-big {
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    letter-spacing: -0.02em;
}
.ztodo-total {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0;
}
.ztodo-sub {
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    margin-top: 5px;
}
.ztodo-circle-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}
.ztodo-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ztodo-ring-bg { stroke: rgba(255, 255, 255, 0.1); }
.ztodo-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.69rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}
.ztodo-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-bottom: 14px;
}
.ztodo-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    border-radius: 2px;
    transition: width 0.4s ease;
}
.ztodo-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    justify-content: flex-start;
}
.ztodo-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ztodo-item:last-child { border-bottom: none; }
.ztodo-chk {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.ztodo-item.done .ztodo-chk { color: #4ade80; }
.ztodo-time {
    font-size: 0.69rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    min-width: 34px;
}
.ztodo-text {
    flex: 1;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}
.ztodo-item.done .ztodo-text {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.28);
}
.ztodo-next-pill {
    font-size: 0.58rem;
    font-weight: 800;
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 4px;
    padding: 2px 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    white-space: nowrap;
}

.ztodo-footer {
    padding-top: 8px;
    margin-top: auto;
}
.ztodo-extra {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 600;
}
.ztodo-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.82rem;
    padding: 16px 0;
}

/* ── DESKTOP GREETING BAR ─────────────────────────────────────── */
.desk-greeting-bar {
    display: none;
}

@media (min-width: 769px) {
    .desk-greeting-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 0 12px;
    }
    .desk-greeting-text {
        font-family: 'Outfit', sans-serif;
        font-weight: 800;
        font-size: 2.2rem;
        letter-spacing: -0.04em;
        color: var(--text-main);
        margin: 0;
        line-height: 1.2;
    }
    .desk-greeting-highlight {
        background: var(--lime);
        color: #0d0d0d;
        padding: 2px 12px 4px;
        border-radius: 8px;
        display: inline-block;
        margin: 0 8px;
        vertical-align: baseline;
    }
    .desk-greeting-right {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }
    .desk-greeting-user {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 1.25;
    }
    .desk-greet-word {
        font-family: 'Outfit', sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .desk-greet-name {
        font-family: 'Outfit', sans-serif;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-main);
    }
    .desk-agora-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 18px 9px 14px;
        background: #0d0d0d;
        color: #ffffff;
        border: none;
        border-radius: 50px;
        font-family: 'Outfit', sans-serif;
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: opacity 0.15s, transform 0.12s;
    }
    .desk-agora-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    .desk-agora-btn:hover {
        opacity: 0.82;
        transform: translateY(-1px);
    }
    .desk-agora-btn:active {
        opacity: 1;
        transform: translateY(0);
    }
    /* Blocked notif banner: no X button on desktop */
    .notif-banner-close {
        display: none !important;
    }
    /* Bento hero hidden on desktop (only greeting + widgets visible) */
    .home-bento-hero {
        display: none !important;
    }
}

/* Mobile: show bento hero, hide greeting bar, hide blocked notification warning banner */
@media (max-width: 768px) {
    .desk-greeting-bar {
        display: none !important;
    }
    #blockedNotifBanner {
        display: none !important;
    }
}

@media (min-width: 769px) {
    /* Compact list-like layout for desktop widgets (excluding special widgets like finance/stats/todo) */
    .desk-col .widget:not(.widget-special) {
        padding: 16px 18px !important;
        gap: 12px !important;
        border-radius: 18px !important;
        min-height: unset !important;
        height: auto !important;
        position: relative !important;
        box-shadow: 
            0 1px 2px rgba(0,0,0,0.02),
            0 4px 12px rgba(0,0,0,0.04) !important;
        border: 1px solid rgba(0, 60, 0, 0.07) !important;
    }
    
    body.dark-mode .desk-col .widget:not(.widget-special) {
        border-color: rgba(255, 255, 255, 0.05) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Premium sized icon matching redesenho index */
    .desk-col .widget:not(.widget-special) .widget-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
        font-size: 1.15rem !important;
    }
    
    /* Font size and layout of title & description */
    .desk-col .widget:not(.widget-special) .widget-title h4 {
        font-size: 0.95rem !important;
        margin-bottom: 2px !important;
    }
    .desk-col .widget:not(.widget-special) .widget-title p {
        font-size: 0.75rem !important;
    }
    
    /* Action check and skip button sizes */
    .desk-col .widget:not(.widget-special) .btn-check-habit {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
    }
    .desk-col .widget:not(.widget-special) .btn-skip-habit-discrete {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.85rem !important;
    }
    
    /* Hover scale adjustment for compact cards */
    .desk-col .widget:not(.widget-special):hover {
        transform: translateY(-2px) !important;
        box-shadow: 
            0 2px 4px rgba(0,0,0,0.03),
            0 8px 24px rgba(0,0,0,0.08) !important;
    }
    
    /* Hide trash button on desktop widgets */
    .widget .mob-trash-btn {
        display: none !important;
    }
    
    /* Position streak badge absolutely at bottom right for a clean single-row list layout */
    .desk-col .widget:not(.widget-special) .widget-actions-bottom {
        position: absolute !important;
        bottom: 8px !important;
        right: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }
    .desk-col .widget:not(.widget-special) .widget-actions-bottom {
        display: none !important;
    }
    /* Streak badge: no desktop fica ABAIXO do nome, no fluxo normal da coluna
       (.widget-title é flex-column). Antes era position:absolute + left:50% (vindo
       da regra base do badge), o que o centralizava no card — deixando a distância
       até o nome inconsistente conforme o tamanho do título ("Hábito" colado, "Ler"
       afastado). Voltando ao fluxo + align-self:flex-start, padroniza embaixo/à esquerda. */
    .widget .widget-title .habit-streak-badge {
        position: static !important;
        left: auto !important;
        transform: none !important;
        align-self: flex-start !important;
        margin: 4px 0 0 !important;
        font-size: 0.68rem !important;
        padding: 2px 7px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
    }

    /* Finance widget desktop row span and stretching */
    .desk-col .widget-finance-host {
        grid-row: span 2 !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .desk-col .widget-finance-host .w-content-wrap {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    /* Planner widget desktop row span and stretching */
    .desk-col .widget-special.widget-todo-host {
        grid-row: span 2 !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .desk-col .widget-special.widget-todo-host .w-content-wrap {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Notas Diárias desktop row span and stretching */
    .desk-col .widget-daily-note-host {
        grid-row: span 2 !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .desk-col .widget-daily-note-host .w-content-wrap {
        flex-grow: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .desk-col .widget-daily-note-host textarea {
        flex-grow: 1 !important;
        height: auto !important;
        min-height: 120px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   STATISTICS WIDGET – HEATMAP, RING & KPIs
   ══════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────── */
.zstats {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Top Row: Ring + KPIs ───────────────────────────────────────── */
.zstats-top {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ── SVG Progress Ring ─────────────────────────────────────────── */
.zring-wrap {
    position: relative;
    width: 78px;
    height: 78px;
    flex-shrink: 0;
}

.zring-wrap svg circle:last-child {
    transition: stroke-dashoffset 0.6s cubic-bezier(.4, 0, .2, 1);
}

.zring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.zrv {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-main);
    line-height: 1;
}

.zrs {
    font-size: 7px;
    color: var(--text-sec);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 2px;
    text-transform: uppercase;
}

/* ── KPI Cards ─────────────────────────────────────────────────── */
.zstats-kpis {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
}

.zkpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.zk-l {
    font-size: 0.82rem;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
}

.zk-v {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-main);
}

/* ── Monthly Heatmap Grid ──────────────────────────────────────── */
.zheat {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 8px;
}

.zheat-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.zheat-cell:hover {
    transform: scale(1.15);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Heatmap Color Levels (Light Mode) ─────────────────────────── */
.zheat-cell.l0 {
    background: var(--bg-card-sec, #f0f0f0);
    color: var(--text-sec);
}

.zheat-cell.l1 {
    background: #fde68a;
    color: #92400e;
}

.zheat-cell.l2 {
    background: #fbbf24;
    color: #78350f;
}

.zheat-cell.l3 {
    background: #f59e0b;
    color: #fff;
}

.zheat-cell.l4 {
    background: #d97706;
    color: #fff;
}

/* ── Heatmap Color Levels (Dark Mode) ──────────────────────────── */
[data-theme="dark"] .zheat-cell.l0 {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-sec);
}

[data-theme="dark"] .zheat-cell.l1 {
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
}

[data-theme="dark"] .zheat-cell.l2 {
    background: rgba(245, 158, 11, 0.35);
    color: #fbbf24;
}

[data-theme="dark"] .zheat-cell.l3 {
    background: rgba(245, 158, 11, 0.55);
    color: #fff;
}

[data-theme="dark"] .zheat-cell.l4 {
    background: rgba(245, 158, 11, 0.80);
    color: #fff;
}

/* ── Stats Navigation Buttons ──────────────────────────────────── */
.stats-nav-btn {
    background: none;
    border: none;
    color: var(--text-sec);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.stats-nav-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .stats-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ── More Info Button ──────────────────────────────────────────── */
.stats-info-btn {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px 14px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-sec);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.stats-info-btn:hover {
    color: var(--text-main);
    border-color: var(--text-sec);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

[data-theme="dark"] .stats-info-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Stats widget host desktop sizing ──────────────────────────── */
@media (min-width: 769px) {
    .desk-col .widget-stats-host {
        grid-column: span 2;
    }
}

/* Stats widget: sempre com fundo card claro e borda visível, independente da cor */
.widget.widget-stats-host {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.07),
        0 4px 14px rgba(0, 0, 0, 0.09),
        0 18px 36px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
body.dark-mode .widget.widget-stats-host {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.30),
        0 4px 14px rgba(0, 0, 0, 0.40),
        0 18px 36px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Add sheet desktop: sem scrollbar visível */
.add-sheet-body::-webkit-scrollbar { display: none; }
.add-sheet-body { scrollbar-width: none; }

/* ═══════════════════════════════════════════════════════════════
   TODO MODAL (tdm-*) — redesign completo
   ═══════════════════════════════════════════════════════════════ */
.tdm-sheet {
    width: 100%;
    max-width: 600px;
    height: 92dvh;
    margin: 0 auto;
    border-radius: 24px 24px 0 0;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tdm-header {
    background: var(--bg-card);
    padding: 20px 20px 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    flex-shrink: 0;
}
.tdm-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tdm-eyebrow {
    font-size: 0.63rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #22c55e;
}
.tdm-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tdm-gcal-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid rgba(66,133,244,0.28);
    background: rgba(66,133,244,0.07);
    color: #4285f4;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    white-space: nowrap;
}
.tdm-gcal-pill.connected {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.07);
    color: var(--text-main);
}
.tdm-g-letter {
    font-size: 0.78rem;
    font-weight: 900;
    color: #4285f4;
}
.tdm-gcal-pill.connected .tdm-g-letter { color: #22c55e; }
.tdm-sync-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px 3px;
    color: var(--text-sec);
    font-size: 0.68rem;
    margin-left: 2px;
}
.tdm-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--bg-app);
    color: var(--text-sec);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.tdm-day-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -0.03em;
    margin: 0 0 2px;
    line-height: 1.15;
}
.tdm-day-sub {
    font-size: 0.8rem;
    color: var(--text-sec);
    font-weight: 500;
    margin: 0 0 14px;
}
.tdm-week-strip {
    display: flex;
    gap: 2px;
    margin: 0 -20px;
    padding: 0 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tdm-week-strip::-webkit-scrollbar { display: none; }
.tdm-strip-day {
    flex: 1;
    min-width: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.tdm-strip-day:hover { background: var(--bg-app); }
.tdm-strip-day.today { background: #111827; }
.tdm-strip-lbl {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sec);
}
.tdm-strip-day.today .tdm-strip-lbl { color: rgba(255,255,255,0.55); }
.tdm-strip-num {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}
.tdm-strip-day.today .tdm-strip-num { color: #fff; }
.tdm-strip-dots {
    display: flex;
    gap: 3px;
    height: 5px;
    align-items: center;
}
.tdm-strip-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
}
body.dark-mode .tdm-strip-dot { background: rgba(255,255,255,0.2); }
.tdm-strip-dot.done { background: #22c55e; }
.tdm-strip-day.today .tdm-strip-dot { background: rgba(255,255,255,0.22); }
.tdm-strip-day.today .tdm-strip-dot.done { background: #4ade80; }
.tdm-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.tdm-section { display: flex; flex-direction: column; gap: 7px; }
.tdm-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    margin-bottom: 2px;
}
.tdm-section-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-sec);
    opacity: 0.55;
}
.tdm-section-count {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-sec);
    opacity: 0.45;
}
.tdm-task-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border-radius: 14px;
    padding: 12px 10px 12px 14px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: opacity 0.2s;
}
.tdm-task-card.done { opacity: 0.6; }
.tdm-task-card.google { padding-left: 18px; }
.tdm-google-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #4285f4;
    border-radius: 14px 0 0 14px;
}
.tdm-task-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s;
    font-size: 0.7rem;
    color: transparent;
}
.tdm-task-check.done {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}
.tdm-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tdm-task-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    display: block;
    word-break: break-word;
}
.tdm-task-card.done .tdm-task-title {
    text-decoration: line-through;
    color: var(--text-sec);
}
.tdm-task-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tdm-task-time {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-sec);
    display: flex;
    align-items: center;
    gap: 3px;
}
.tdm-task-gcal {
    font-size: 0.63rem;
    font-weight: 800;
    color: #4285f4;
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.04em;
}
.tdm-g-small { font-size: 0.68rem; font-weight: 900; }
.tdm-task-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-sec);
    opacity: 0.25;
    padding: 4px 2px;
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.tdm-task-del:hover { opacity: 0.6; }
.tdm-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    gap: 10px;
}
.tdm-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #ea580c;
    margin-bottom: 4px;
    border: 1px solid var(--border-color);
}
.tdm-empty-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text-main);
    margin: 0;
}
.tdm-empty-desc {
    font-size: 0.8rem;
    color: var(--text-sec);
    line-height: 1.55;
    margin: 0;
    max-width: 240px;
}
.tdm-empty-cta {
    margin-top: 4px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid rgba(234, 88, 12, 0.35);
    background: rgba(234, 88, 12, 0.08);
    color: #ea580c;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tdm-input-bar {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tdm-input-main {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tdm-input-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}
.tdm-input-text {
    flex: 1;
    border: none;
    background: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    outline: none;
    font-family: 'Outfit', sans-serif;
    padding: 0;
}
.tdm-input-text::placeholder { color: var(--text-sec); opacity: 0.55; }
.tdm-input-meta {
    display: flex;
    align-items: center;
    gap: 7px;
}
.tdm-meta-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-sec);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: all 0.15s;
    white-space: nowrap;
}
.tdm-meta-pill i { font-size: 0.68rem; }
.tdm-send-btn {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #111827;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
    transition: background 0.15s;
}
.tdm-send-btn:hover { background: #1f2937; }
body.dark-mode .tdm-send-btn { background: rgba(255,255,255,0.9); color: #111; }
@media (min-width: 769px) {
    #todoModal {
        align-items: center !important;
        padding: 20px !important;
    }
    .tdm-sheet {
        height: min(85dvh, 720px);
        border-radius: 20px;
        max-width: 500px;
        box-shadow: 0 24px 80px rgba(0,0,0,0.2);
    }
    .tdm-header { border-radius: 20px 20px 0 0; }
}

/* ============================================================
   LOGIN (authScreen) — correção de overflow horizontal no mobile.
   .fullscreen-overlay é display:flex, então .auth-container era um
   flex item com min-width:auto e não encolhia abaixo do conteúdo,
   ignorando max-width e estourando o viewport. min-width:0 resolve.
   No mobile o login vira full-bleed (padrão mais limpo p/ celular).
============================================================ */
@media (max-width: 768px) {
    #authScreen { padding: 0; }
    #authScreen .auth-container {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border: none;
        border-radius: 0;
        min-height: 100dvh;
    }
    #authScreen .auth-form-area { min-width: 0; }
    #authScreen .auth-form-area .input-with-icon,
    #authScreen .auth-form-area .form-control { min-width: 0; max-width: 100%; }
}

/* Mobile Admin layout — Side-by-side buttons */
@media (max-width: 768px) {
    body.is-admin-session .sidebar-auth-group {
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    body.is-admin-session .sidebar-auth-group a {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        padding: 8px 6px !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    body.is-admin-session .sidebar-auth-group a i {
        font-size: 0.95rem !important;
        width: auto !important;
        margin-right: 0 !important;
    }
    body.is-admin-session .settings-footer-admin-row {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    body.is-admin-session .settings-footer-admin-row button {
        flex: 1 !important;
        justify-content: center !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        padding: 8px 6px !important;
        gap: 6px !important;
        margin: 0 !important;
    }
    body.is-admin-session .settings-footer-admin-row button i {
        font-size: 0.95rem !important;
        width: auto !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   WIDGET DE LEITURA BÍBLICA (.zbible-card & #bibleModal)
============================================================ */
.widget-bible-host {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 0 !important;
    gap: 0 !important;
}

.widget-bible-host .w-content-wrap {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.widget-bible-host .widget-actions-bottom {
    display: none !important;
}

.zbible-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
    position: relative;
    gap: 12px;
}

.zbible-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.zbible-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.zbible-icon-box {
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.065);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #2d3748;
}

body.dark-mode .zbible-icon-box {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
}

.zbible-titles {
    display: flex;
    flex-direction: column;
}

.zbible-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    font-family: 'Outfit', sans-serif;
}

.zbible-meta {
    font-size: 0.75rem;
    color: var(--text-sec);
    margin-top: 2px;
}

.zbible-progress-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zbible-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-main);
    font-weight: 600;
}

.zbible-progress-pct {
    font-weight: 700;
    color: var(--text-main);
}

.zbible-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

body.dark-mode .zbible-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

.zbible-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.zbible-quick-read {
    background: rgba(90,148,0,.07);
    border: 1px solid rgba(90,148,0,.22);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.dark-mode .zbible-quick-read {
    background: rgba(155,219,31,.08);
    border-color: rgba(155,219,31,.22);
}

.zbible-quick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zbible-quick-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--green-deep);
}
body.dark-mode .zbible-quick-title { color: var(--primary); }

.zbible-quick-select {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 6px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    outline: none;
}

body.dark-mode .zbible-quick-select {
    background: var(--bg-app);
}

.zbible-chapters-scroll-container {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    position: relative;
}

.zbible-scroll-btn {
    display: none;
}

@media (min-width: 900px) {
    .zbible-scroll-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    .zbible-scroll-btn:hover {
        background: var(--bg-app);
        border-color: var(--text-main);
    }
}

.zbible-quick-chapters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    /* respiro vertical/horizontal p/ o hover (scale) das bolinhas não ser cortado */
    padding: 4px 3px;
    scrollbar-width: none;
    scroll-behavior: smooth;
    width: 100%;
}

.zbible-quick-chapters::-webkit-scrollbar {
    display: none;
}

.zbible-chapter-badge {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.zbible-chapter-badge:hover {
    background: rgba(90,148,0,.12);
    border-color: rgba(90,148,0,.32);
    color: var(--green-deep);
    transform: scale(1.05);
}
body.dark-mode .zbible-chapter-badge:hover {
    background: rgba(155,219,31,.14);
    border-color: rgba(155,219,31,.34);
    color: var(--primary);
}

.zbible-chapter-badge.read {
    background: rgba(90,148,0,.14) !important;
    border-color: rgba(90,148,0,.36) !important;
    color: var(--green-deep) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}
body.dark-mode .zbible-chapter-badge.read {
    background: rgba(155,219,31,.16) !important;
    border-color: rgba(155,219,31,.36) !important;
    color: var(--primary) !important;
}

.zbible-chapter-badge.read:hover {
    background: rgba(90,148,0,.22) !important;
    border-color: rgba(90,148,0,.46) !important;
}
body.dark-mode .zbible-chapter-badge.read:hover {
    background: rgba(155,219,31,.24) !important;
}

.zbible-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

/* .zbible-btn-open: visual de .zbtn--soft (_core.css); só o hook de flex.
   .zbible-btn-menu: visual de .zbtn-icon (_core.css). */
.zbible-btn-open { flex: 1; }

/* MODAL BÍBLIA (#bibleModal) */
#bibleModal .modal-content {
    max-width: 650px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: var(--bg-card);
    border-radius: 24px;
    border: 1px solid var(--border-color);
}

.bible-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.bible-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bible-modal-header h3 i {
    color: var(--primary);
}

.bible-overall-stats {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
}

.bible-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bible-stats-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
}

.bible-stats-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
}

.bible-stats-pct {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary);
}

.bible-tabs {
    display: flex;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 16px;
}

.bible-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bible-tab-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
}

.bible-tab-btn.active {
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
}

.bible-books-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}

.bible-book-row {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.bible-book-row.expanded {
    border-color: rgba(163, 255, 18, 0.4);
}

.bible-book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.bible-book-header:hover {
    background: rgba(255, 255, 255, 0.02);
}

.bible-book-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bible-book-chevron {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.bible-book-row.expanded .bible-book-chevron {
    transform: rotate(180deg);
}

.bible-book-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-main);
}

.bible-book-progress-text {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.bible-book-row.completed .bible-book-progress-text {
    color: var(--primary);
    background: rgba(163, 255, 18, 0.1);
    border-color: rgba(163, 255, 18, 0.2);
}

.bible-book-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.bible-book-action-btn {
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bible-book-action-btn:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
}

.bible-book-action-btn.mark-all {
    color: var(--primary);
    border-color: rgba(163, 255, 18, 0.3);
    background: rgba(163, 255, 18, 0.05);
}

.bible-book-action-btn.mark-all:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.bible-book-action-btn.clear-all {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
}

.bible-book-action-btn.clear-all:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
}

.bible-chapters-wrapper {
    display: none;
    padding: 0 18px 18px;
    border-top: 1px dashed var(--border-color);
    background: rgba(0, 0, 0, 0.05);
}

.bible-book-row.expanded .bible-chapters-wrapper {
    display: block;
}

.bible-chapters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.bible-chapter-btn {
    height: 42px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    border-style: solid;
}

.bible-chapter-btn:hover {
    border-color: var(--primary);
    background: rgba(163, 255, 18, 0.05);
    transform: translateY(-1px);
}

.bible-chapter-btn.read {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(163, 255, 18, 0.3);
}

.bible-chapter-btn.read:hover {
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 480px) {
    .bible-chapters-grid {
        grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
        gap: 6px;
    }
    .bible-chapter-btn {
        height: 36px;
        font-size: 0.8rem;
    }
    .bible-book-actions {
        display: none; /* Esconder ações rápidas em telas muito pequenas para poupar espaço */
    }
}

/* ==========================================================================
   NOVO PAINEL CENTRAL (DESIGN PREMIUM & ORGANIZAÇÃO DE CÓDIGO)
   ========================================================================== */

/* 1. CABEÇALHO HERO RESPONSIVO UNIFICADO */
.home-header-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 8px 6px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.header-hero-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.header-hero-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-sec);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.8;
}

.header-hero-greeting {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-hero-greet-word {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-sec);
    letter-spacing: -0.02em;
}

.header-hero-name {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.02em;
}

.header-hero-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-hero-logo {
    height: 32px;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .header-hero-logo {
        height: 28px;
    }
}

/* Botão de engrenagem (Ajustes) no header do início — substitui o logo ZIP */
.header-hero-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-sec);
    font-size: 1.05rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.header-hero-settings:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: rotate(40deg);
}
.header-hero-settings:active {
    transform: scale(0.9) rotate(40deg);
}

/* Cabeçalho de Ajustes com botão de retorno (mobile) */
.view-header-settings {
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-back-btn {
    display: none; /* desktop usa a sidebar; botão só no mobile */
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 1.05rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--shadow-sm);
    transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.settings-back-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.settings-back-btn:active {
    transform: scale(0.9);
}
@media (max-width: 768px) {
    /* Só o BOTÃO de voltar acompanha a rolagem: ele flutua fixo no topo-esquerdo
       (o .mobile-header fica oculto no mobile), sem levar junto a faixa branca do
       cabeçalho. top/left espelham o padding do .content-scroll (10px / 12px)
       para o botão flutuante casar com a posição de repouso. */
    .settings-back-btn {
        display: inline-flex;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 12px;
        z-index: 90;
    }
    /* O botão saiu do fluxo (fixed): o título "Ajustes" continua à direita e
       reserva espaço à esquerda, evitando sobreposição com o botão flutuante.
       min-height/padding-top alinham o título ao botão de 42px. */
    .view-header-settings {
        justify-content: flex-end;
        padding-left: 50px;
        padding-top: env(safe-area-inset-top, 0px);
        min-height: 42px;
    }
}

.header-hero-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--primary);
    box-shadow: 0 0 0 3px rgba(90, 148, 0, 0.15), var(--shadow-sm);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

body.dark-mode .header-hero-avatar {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(179, 255, 26, 0.12), var(--shadow-sm);
}

.header-hero-avatar:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 0 0 5px rgba(90, 148, 0, 0.22), var(--shadow-sm);
}

body.dark-mode .header-hero-avatar:hover {
    box-shadow: 0 0 0 5px rgba(179, 255, 26, 0.18), var(--shadow-sm);
}

.header-hero-avatar:active {
    transform: scale(0.94);
    box-shadow: 0 0 0 3px rgba(90, 148, 0, 0.3), var(--shadow-sm);
}

body.dark-mode .header-hero-avatar:active {
    box-shadow: 0 0 0 3px rgba(179, 255, 26, 0.25), var(--shadow-sm);
}

/* Botão Ágora na Topbar Desktop */
.header-agora-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.header-agora-btn:hover {
    background: var(--text-main);
    color: var(--bg-card);
    border-color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Ocultar elementos mobile no PC e vice-versa */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* 2. CALENDÁRIO E PICKER DE DATAS SUAVE (FUNDO OPACO NO DESKTOP PARA EVITAR TRANSPARÊNCIA) */
.cal-wrapper {
    background: var(--bg-card) !important; /* Fundo opaco para que os widgets não apareçam por baixo ao rolar */
    border-bottom: 1.5px solid var(--border-color) !important;
    margin-bottom: 8px;
    z-index: 1010 !important; /* Garante que flutue por cima dos widgets ao rolar */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    position: relative;
}

body.dark-mode .cal-wrapper {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
}

@media (min-width: 769px) {
    /* No desktop, o calendário usa position: absolute, então precisamos garantir que ele cubra o fundo e fique visível com z-index alto */
    .cal-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1010 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    }
    
    body.dark-mode .cal-wrapper {
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    }
}

.cal-header {
    padding: 8px 16px 4px !important;
}

.month-selector-badge {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    padding: 8px 16px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: var(--text-main) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.month-selector-badge:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.date-picker {
    padding: 8px 16px !important;
    gap: 10px !important;
}

/* Estilo Premium para Date-Item */
.date-item {
    min-width: 48px !important;
    height: 64px !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.date-item span {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

.date-item strong {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

/* Indicador de Hoje */
.date-item.today::after {
    background: var(--primary) !important;
    width: 5px !important;
    height: 5px !important;
    opacity: 1 !important;
    bottom: 5px !important;
}

/* Novo visual do dia ativo no calendário (Sutil e elegante) */
.date-item.active {
    background: var(--text-main) !important;
    color: var(--bg-card) !important;
    border-color: var(--text-main) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-4px) scale(1.02) !important;
}

body.dark-mode .date-item.active {
    background: var(--primary) !important;
    color: #0b0c0e !important;
    border-color: var(--primary) !important;
    box-shadow: 0 10px 24px rgba(179, 255, 26, 0.3) !important;
}

.date-item.active::after {
    background: var(--bg-card) !important;
}

body.dark-mode .date-item.active::after {
    background: #0b0c0e !important;
}

.date-item.active i,
.date-item.active span,
.date-item.active strong,
.date-item.active .day-num {
    color: inherit !important;
    opacity: 1 !important;
}

/* 3. BENTO HERO RESPONSIVO & GLASSMORPHISM */
.home-bento-hero {
    display: grid !important; /* Força exibição no Desktop também! */
    grid-template-columns: 1.25fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 8px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 769px) {
    .home-bento-hero {
        grid-template-columns: 1.5fr 1fr;
        max-width: 100%;
    }
}

/* Ring Tile Premium */
.bento-ring-tile {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-top: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.15) !important;
    padding: 24px !important;
    border-radius: var(--radius-lg) !important;
    min-height: 150px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body.dark-mode .bento-ring-tile {
    background: linear-gradient(135deg, #13151a 0%, #0b0c0e 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

.bento-ring-tag {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.bento-ring-tile .hero-ring-svg .hero-ring-fill {
    stroke: var(--green-lime) !important;
    filter: drop-shadow(0 0 8px rgba(179, 255, 26, 0.5)) !important;
}

.bento-ring-tile .hero-pct-val {
    font-size: 18px !important;
}

.bento-ring-done {
    font-size: 22px !important;
    color: #ffffff !important;
}

.bento-ring-label {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 600;
}

.bento-ring-tile .hero-motivation-msg {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.8rem !important;
    font-weight: 500;
    margin-top: 12px !important;
}

/* Stat Tiles Col */
.bento-tiles-col {
    gap: 14px !important;
}

.bento-stat-tile {
    background: var(--bg-card) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px 20px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-stat-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow) !important;
    border-color: var(--text-main) !important;
}

body.dark-mode .bento-stat-tile:hover {
    border-color: var(--primary) !important;
}

.bento-stat-tile.accent {
    background: var(--bg-card) !important; /* Remover background verde chapado antigo */
}

.bento-tile-tag {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-sec) !important;
}

.bento-tile-val {
    font-size: 28px !important;
    font-weight: 900 !important;
}

/* 4. REFINAMENTO DE CARDS E GRADE DE WIDGETS */
.grid {
    padding: 4px 8px 20px !important;
    gap: 20px !important;
}

.widget {
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 20px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: var(--bg-card) !important;
}

.widget:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow) !important;
    border-color: var(--text-main) !important;
}

body.dark-mode .widget:hover {
    border-color: var(--primary) !important;
}

/* Check button com pop animation suave */
.btn-check-habit {
    border: 2px solid var(--border-color) !important;
    width: 38px !important;
    height: 38px !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-check-habit:hover {
    transform: scale(1.08);
    border-color: var(--text-main) !important;
}

.btn-check-habit.checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

body.dark-mode .btn-check-habit.checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #0b0c0e !important;
}

.btn-skip-habit-discrete {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-sec);
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-skip-habit-discrete:hover {
    color: var(--text-main);
    border-color: var(--text-sec);
    background: rgba(0, 0, 0, 0.02);
}

.btn-skip-habit-discrete.skipped {
    background: var(--border-color);
    color: var(--text-main);
    border-color: var(--text-sec);
}

/* Combined Habits List (Mobile) */
.combined-habits-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.habit-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    transition: all 0.25s ease;
}

.habit-list-item:hover {
    border-color: var(--text-main);
}

body.dark-mode .habit-list-item:hover {
    border-color: var(--primary);
}

.habit-list-item.completed {
    background: rgba(179, 255, 26, 0.04);
    border-color: rgba(90, 148, 0, 0.2);
}

body.dark-mode .habit-list-item.completed {
    background: rgba(179, 255, 26, 0.04);
    border-color: rgba(179, 255, 26, 0.2);
}

/* 5. SEÇÕES DE TÍTULOS (HOJE, DESAFIOS, ETC.) */
.home-sec-label {
    margin: 24px 0 12px !important;
    padding: 0 8px;
}

.home-sec-line {
    background: var(--border-color) !important;
    opacity: 0.6;
}

.zm-eyebrow {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-sec) !important;
}

.home-sec-act {
    font-size: 10px !important;
    font-weight: 700;
}

/* 6. CORREÇÕES E REDESENHO DO WIDGET DE LEITURA BÍBLICA (.widget-bible-host) */
.widget-bible-host {
    padding: 24px !important; /* Aumenta padding do card principal para tamanho padrão */
    gap: 16px !important;
}

.widget-bible-host .zbible-card {
    padding: 0 !important; /* Remove preenchimento interno redundante */
    gap: 16px !important;
}

.widget-bible-host .zbible-title {
    font-size: 1.1rem !important; /* Aumenta tamanho do título para 1.1rem para alinhar com outros widgets */
    font-weight: 800 !important; /* Estilo Outfit extra negrito */
    font-family: 'Outfit', sans-serif !important;
}

.widget-bible-host .zbible-icon-box {
    width: 44px !important; /* Padroniza com .widget-icon dos outros widgets */
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.3rem !important;
    background: rgba(77, 124, 15, 0.12) !important;
    color: var(--primary) !important;
}

body.dark-mode .widget-bible-host .zbible-icon-box {
    background: rgba(155, 219, 31, 0.14) !important;
    color: var(--primary) !important;
}

.widget-bible-host .zbible-quick-read {
    border-radius: 16px !important;
    padding: 12px 14px !important;
    gap: 10px !important;
}

.widget-bible-host .zbible-chapter-badge {
    width: 36px !important; /* Aumenta o tamanho dos botões de capítulo */
    height: 36px !important;
    font-size: 0.85rem !important; /* Aumenta tamanho do texto */
    border-radius: 50% !important;
}

/* Botões da Bíblia: visual unificado por .zbtn--soft (abrir) e .zbtn-icon (config). */

/* ============================================================
   ZIP DESIGN SYSTEM v5 — Standardization and Hover Fixes
   ============================================================ */

/* 1. STANDARDIZED BORDERS AND SHADOWS FOR WIDGETS AND CARDS */
.widget,
.widget-special,
.widget-community-preview,
.flow-leaderboard-card {
    border: 2px solid rgba(0, 60, 0, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

body.dark-mode .widget,
body.dark-mode .widget-special,
body.dark-mode .widget-community-preview,
body.dark-mode .flow-leaderboard-card {
    border: 2px solid rgba(80, 200, 40, 0.18) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 2. REMOVE ALL HOVER JUMP/DEPTH/SCALE ANIMATIONS (STATIC CARDS) */
.widget:hover,
.widget-special:hover,
.widget-community-preview:hover,
.flow-leaderboard-card:hover,
.widget:not(.widget-special):hover,
.desk-col .widget:not(.widget-special):hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 60, 0, 0.15) !important;
}

body.dark-mode .widget:hover,
body.dark-mode .widget-special:hover,
body.dark-mode .widget-community-preview:hover,
body.dark-mode .flow-leaderboard-card:hover,
body.dark-mode .widget:not(.widget-special):hover,
body.dark-mode .desk-col .widget:not(.widget-special):hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(80, 200, 40, 0.18) !important;
}

/* 3. PLANNER WIDGET (ztodo) — LIGHT THEME AND DARK THEME ALIGNMENT */
.widget-special.widget-todo-host {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 2px solid rgba(0, 60, 0, 0.15) !important;
    box-shadow: var(--shadow) !important;
}

.ztodo-tag {
    color: var(--text-sec) !important;
}

.ztodo-tag i {
    color: var(--primary) !important;
}

.ztodo-big {
    color: var(--text-main) !important;
}

.ztodo-total {
    color: var(--text-muted) !important;
}

.ztodo-sub {
    color: var(--text-sec) !important;
}

.ztodo-pct {
    color: var(--text-main) !important;
}

.ztodo-ring-bg {
    stroke: var(--border-color) !important;
}

.ztodo-ring-fill {
    stroke: var(--primary) !important;
}

.ztodo-bar {
    background: var(--border-color) !important;
}

.ztodo-bar-fill {
    background: var(--primary) !important;
}

.ztodo-item {
    border-bottom: 1px solid var(--border-color) !important;
}

.ztodo-chk {
    color: var(--text-sec) !important;
}

.ztodo-item.done .ztodo-chk {
    color: var(--primary) !important;
}

.ztodo-time {
    color: var(--text-sec) !important;
}

.ztodo-text {
    color: var(--text-main) !important;
}

.ztodo-item.done .ztodo-text {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

.ztodo-extra {
    color: var(--text-sec) !important;
}

.ztodo-empty {
    color: var(--text-sec) !important;
}

/* Dark mode overrides for Planner widget */
body.dark-mode .widget-special.widget-todo-host {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 2px solid rgba(80, 200, 40, 0.18) !important;
    box-shadow: var(--shadow) !important;
}

body.dark-mode .ztodo-tag {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .ztodo-tag i {
    color: var(--green-lime) !important;
}

body.dark-mode .ztodo-big {
    color: #fff !important;
}

body.dark-mode .ztodo-total {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .ztodo-sub {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .ztodo-pct {
    color: #fff !important;
}

body.dark-mode .ztodo-ring-bg {
    stroke: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .ztodo-ring-fill {
    stroke: var(--primary) !important;
}

body.dark-mode .ztodo-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .ztodo-bar-fill {
    background: var(--primary) !important;
}

body.dark-mode .ztodo-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .ztodo-chk {
    color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .ztodo-item.done .ztodo-chk {
    color: var(--green-lime) !important;
}

body.dark-mode .ztodo-time {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .ztodo-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode .ztodo-item.done .ztodo-text {
    color: rgba(255, 255, 255, 0.35) !important;
}

body.dark-mode .ztodo-extra {
    color: rgba(255, 255, 255, 0.4) !important;
}

body.dark-mode .ztodo-empty {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================
   ZIP DESIGN SYSTEM v6 — Icons and Spacing Standardization
   ============================================================ */

/* 1. STANDARDIZED WIDGET ICONS SIZING & SPACING */
.widget-icon,
.widget-bible-host .zbible-icon-box,
.widget-workout-host .zwk-icon-box,
.desk-col .widget:not(.widget-special) .widget-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.widget-icon svg,
.widget-icon i,
.widget-bible-host .zbible-icon-box svg,
.widget-bible-host .zbible-icon-box i,
.widget-workout-host .zwk-icon-box svg,
.widget-workout-host .zwk-icon-box i {
    width: 20px !important;
    height: 20px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    fill: currentColor !important;
}

@media (max-width: 768px) {
    .widget-icon,
    .widget-bible-host .zbible-icon-box,
    .widget-workout-host .zwk-icon-box,
    .desk-col .widget:not(.widget-special) .widget-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .widget-icon svg,
    .widget-icon i,
    .widget-bible-host .zbible-icon-box svg,
    .widget-bible-host .zbible-icon-box i,
    .widget-workout-host .zwk-icon-box svg,
    .widget-workout-host .zwk-icon-box i {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
        margin: 0 !important;
    }
}

/* ── CORES DE ÍCONE POR GRUPO ─────────────────────────────────────────
   Hoje (hábitos + Leitura Bíblica) = verde (mantido). Organização = laranja,
   Finanças = amarelo, Desafios = vermelho. Alvo: o "badge"/ícone de cada widget. */
/* Organização — laranja (Biblioteca, Notas Diárias, Tarefas) */
.widget-library-host .widget-icon,
.widget-daily-note-host .widget-icon,
.widget-todo-host .ztodo-badge {
    background: rgba(249, 115, 22, 0.14) !important;
    color: #f97316 !important;
}
.widget-library-host .widget-icon i,
.widget-daily-note-host .widget-icon i,
.widget-todo-host .ztodo-badge i { color: #f97316 !important; }
/* Finanças — amarelo */
.widget-finance-host .zfn-badge {
    background: rgba(234, 179, 8, 0.16) !important;
    color: #ca8a04 !important;
}
.widget-finance-host .zfn-badge i { color: #ca8a04 !important; }
/* Desafios — vermelho (badge de tipo + cadeado do estado bloqueado) */
.widget-challenge-host .chal-badge {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}
.widget-challenge-host .chal-badge i,
.widget-challenge-host .widget-challenge-lock i { color: #ef4444 !important; }

/* 2. STANDARDIZED HEADER SPACING FOR WIDGETS */
.widget-header,
.habit-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.widget-title {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

.widget-title h4,
.widget-title h5 {
    margin: 0 !important;
    line-height: 1.25 !important;
}

/* 3. MOBILE MINIMALIST HABITS LIST (PRINT 4) */
@media (max-width: 768px) {
    /* Remove gaps between list items */
    .combined-habits-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    /* Turn individual items into clean list rows (no individual borders/shadows/backgrounds) */
    .habit-list-item {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 12px 4px !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-shadow: none !important;
    }
    
    /* Remove border from last item */
    .habit-list-item:last-child {
        border-bottom: none !important;
    }
    
    /* Make completed state clean on mobile without bordered/solid background boxes */
    .habit-list-item.completed {
        background: transparent !important;
        border-color: transparent !important;
    }
    
    body.dark-mode .habit-list-item.completed {
        background: transparent !important;
        border-color: transparent !important;
    }
}

/* ============================================================
   DESAFIOS — sem efeito flutuante no hover (igual aos demais widgets)
   ------------------------------------------------------------
   O card de desafio é o único widget registrado renderizado como `.widget`
   puro (sem `.widget-special`), então pegava a regra
   `.widget:not(.widget-special):hover { transform: translateY(...) }`.
   Esta regra (mais específica + por último na cascata) garante que ele
   fique estático no hover, como os outros cards.
   ============================================================ */
.widget.widget-challenge-host:hover,
.desk-col .widget.widget-challenge-host:hover,
body.dark-mode .widget.widget-challenge-host:hover,
body.dark-mode .desk-col .widget.widget-challenge-host:hover {
    transform: none !important;
}

/* ============================================================
   PIN — campos não são senhas reais. Evita o pop-up de "salvar senha"
   do navegador (eram type="password"); o mascaramento visual é mantido
   via text-security em vez do tipo password.
   ============================================================ */
.challenge-pin-input,
.pin-input-widget {
    -webkit-text-security: disc;
    text-security: disc;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  BACKGROUND DO APP — ÚNICA FONTE DE VERDADE                           ║
   ║  ------------------------------------------------------------------   ║
   ║  Para mudar o FUNDO do app (cor do canvas / textura), edite SOMENTE   ║
   ║  esta seção. Ela fica por último no arquivo de propósito, para vencer ║
   ║  qualquer camada anterior. Hoje: canvas CINZA-AZULADO CLARO, liso     ║
   ║  (cards brancos destacam por contraste + sombra).                     ║
   ║  • Cor do fundo: troque --app-canvas (claro e escuro).                ║
   ║  • Textura: defina background-image no bloco `body, .main` abaixo.    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* Tokens de SUPERFÍCIE (NÃO são o canvas): usados por inputs, caixas internas,
   sidebar (--bg-base) e calendário (--bg-card). Mantidos claros/escuros de
   propósito — mexer aqui afeta esses elementos, NÃO o fundo do app. */
:root {
    --bg-app:  #f5f5f7;   /* superfícies internas claras (inputs, caixas) — tema claro */
    --bg-base: #ffffff;   /* sidebar (desktop) — tema claro */
}
body.dark-mode {
    --bg-app:  #101012;   /* superfícies internas — tema escuro */
    --bg-base: #161618;   /* sidebar — tema escuro */
}

/* ───────────────────────────────────────────────────────────────────────────
   O CANVAS (fundo atrás dos cards): CINZA-AZULADO CLARO, liso. Os cards brancos
   destacam pelo contraste + sombra. Pintado em `body` + `.main` (não no token
   --bg-app, p/ não afetar superfícies internas). Calendário (--bg-card),
   sidebar (--bg-base) e menu inferior (cor própria) NÃO usam isto → preservados.
   • Cor do fundo: troque --app-canvas (claro e escuro).
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    --app-canvas: #f2f2f4;   /* cinza neutro claro do canvas (Apple) — tema claro */
}
body.dark-mode {
    --app-canvas: #0a0a0b;   /* neutro escuro do canvas — tema escuro */
}
body,
body.dark-mode,
.main {
    background-color: var(--app-canvas) !important;
    background-image: none !important;   /* fundo liso, sem textura */
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  CARD SYSTEM — padrão ÚNICO de todos os cards do painel               ║
   ║  Superfície neutra + borda hairline + sombra suave + raio --radius-lg  ║
   ║  Para reestilizar TODOS os cards, edite --bg-card / --shadow /         ║
   ║  --border-color / --radius-lg no :root acima.                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* `#widgetsGrid .widget` (especificidade de ID) cobre cards comuns E especiais,
   mobile e desktop — vence regras antigas sem reordenar nada. */
#widgetsGrid .widget,
#widget-community-preview {
    background: var(--bg-card) !important;
    background-image: none !important;        /* remove gradientes antigos */
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius-lg) !important;
}

/* ── Cards-ÂNCORA escuros (texto claro) ────────────────────────────────────
   Superfície escura única para os cards que têm texto branco/lime:
   o hero "PROGRESSO" e os cards de AVISO (Notificações / Instalar). Sem isso,
   o card system os deixava brancos e o texto sumia. */
:root { --card-dark-bg: linear-gradient(165deg, #1d1d20 0%, #121214 100%); }

/* PROGRESSO (anel) = card-âncora escuro; mantém a faixa lime no topo como
   assinatura, só alinha a superfície/raio/sombra ao sistema. (.daily-hero-card
   é a versão legada do hero — coberta também, por garantia.) */
.bento-ring-tile,
.daily-hero-card,
body.dark-mode .daily-hero-card {
    background: var(--card-dark-bg) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}
/* `#id.widget` (1,1,0) empata com `#widgetsGrid .widget` e vence por vir depois —
   funciona em mobile e desktop, dentro ou fora do grid. */
#widget-notif-requirement.widget,
#widget-install-pwa.widget {
    background: var(--card-dark-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

/* ── Tiles Sequência/Flow = padrão neutro dos cards ── */
.bento-stat-tile,
.bento-stat-tile.accent {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}
.bento-stat-tile:hover {
    transform: none !important;
    box-shadow: var(--shadow) !important;
    border-color: var(--border-color) !important;
}

/* ══ BENTO TILES — Redesign: identidade própria por tile ═══════════════ */

#bentoStreakTile,
#bentoFlowTile {
    position: relative !important;
    overflow: hidden !important;
    flex: 1 !important;
    justify-content: space-between !important;
    padding: 16px 16px !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, opacity 0.12s ease !important;
}
#bentoStreakTile .bento-tile-tag,
#bentoFlowTile .bento-tile-tag {
    font-size: 0.82rem !important;
}
#bentoStreakTile .bento-tile-val small,
#bentoFlowTile .bento-tile-val small {
    font-size: 16px !important;
}

/* ── Tile Sequência: tema âmbar / fogo ── */
#bentoStreakTile {
    background: rgba(245, 158, 11, 0.07) !important;
    border: 2px solid rgba(245, 158, 11, 0.22) !important;
    border-top: 3px solid #f59e0b !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12), var(--shadow) !important;
}
body.dark-mode #bentoStreakTile {
    background: rgba(245, 158, 11, 0.09) !important;
    border: 2px solid rgba(245, 158, 11, 0.2) !important;
    border-top: 3px solid #f59e0b !important;
}
#bentoStreakTile::before {
    content: '\f06d';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -10px;
    right: 4px;
    font-size: 70px;
    color: #f59e0b;
    opacity: 0.13;
    line-height: 1;
    pointer-events: none;
}
#bentoStreakTile .bento-tile-tag {
    color: rgba(180, 110, 5, 0.9) !important;
    font-weight: 800 !important;
}
body.dark-mode #bentoStreakTile .bento-tile-tag {
    color: rgba(245, 158, 11, 0.8) !important;
}
#bentoStreakTile .bento-tile-val {
    font-size: 44px !important;
    color: #b45309 !important;
    line-height: 1 !important;
    position: relative;
    z-index: 1;
}
body.dark-mode #bentoStreakTile .bento-tile-val {
    color: #f59e0b !important;
}

/* ── Tile Flow: tema verde / raio ── */
#bentoFlowTile {
    background: rgba(90, 148, 0, 0.08) !important;
    border: 2px solid rgba(90, 148, 0, 0.24) !important;
    border-top: 3px solid var(--primary) !important;
    box-shadow: 0 4px 16px rgba(90, 148, 0, 0.12), var(--shadow) !important;
    cursor: pointer;
}
body.dark-mode #bentoFlowTile {
    background: rgba(179, 255, 26, 0.07) !important;
    border: 2px solid rgba(179, 255, 26, 0.18) !important;
    border-top: 3px solid var(--primary) !important;
    box-shadow: 0 4px 16px rgba(100, 200, 0, 0.14), var(--shadow) !important;
}
#bentoFlowTile::before {
    content: '\f0e7';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -10px;
    right: 6px;
    font-size: 70px;
    color: var(--primary);
    opacity: 0.1;
    line-height: 1;
    pointer-events: none;
}
#bentoFlowTile .bento-tile-tag {
    color: var(--primary) !important;
    font-weight: 800 !important;
}
#bentoFlowTile .bento-tile-val {
    font-size: 44px !important;
    color: var(--primary) !important;
    line-height: 1 !important;
    position: relative;
    z-index: 1;
}
#bentoFlowTile:active {
    transform: scale(0.96) !important;
    opacity: 0.82 !important;
}

/* ── Container do carrossel no mobile home ── */
#homeCommunityPreview {
    margin-top: 13px;
}
#homeCommunityPreview .widget-community-preview {
    grid-column: unset !important;
}

/* ── Esconder scrollbar em todos os containers no mobile ── */
@media (max-width: 800px) {
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    *::-webkit-scrollbar {
        display: none !important;
    }
}

/* ── MEGA NAV: ocultar grade legada + quick-actions + sec-label no mobile ── */
@media (max-width: 800px) {
    #view-home .home-sec-label,
    #view-home #widgetsGrid,
    #view-home .home-quick-actions,
    #view-home #homeQuickActions { display: none !important; }

    /* views de tab mobile: sem padding extra no topo */
    #view-hoje, #view-organizacao { padding-top: 0; }
    /* .active apenas: sem isso, o seletor ID (#view-financas) tem especificidade maior que .view
       e anula o display:none do .view base, fazendo o conteúdo de finanças vazar em outras telas */
    #view-financas.active { display: flex; flex-direction: column; min-height: 0; }
    #view-financas #financasViewContent { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* Nas tabs dedicadas, remover a altura mínima forçada de 185px por linha do grid.
       O cabeçalho de seção ocupa uma linha inteira e seria forçado a 185px — causa o gap gigante.
       Os widgets têm conteúdo suficiente para definir sua própria altura. */
    #widgetsGridHoje,
    #widgetsGridOrganizacao {
        grid-auto-rows: auto !important;
    }

    /* Cabeçalho de seção: margem mínima nas tabs dedicadas */
    #widgetsGridHoje .home-sec-label,
    #widgetsGridOrganizacao .home-sec-label {
        margin-top: 2px;
        margin-bottom: 0;
    }

    /* Widgets normais precisam de altura mínima explícita (sem o minmax do grid-auto-rows).
       Exclui widget-special (cards de notif/instalar) que têm conteúdo compacto. */
    #widgetsGridHoje .widget:not(.widget-special),
    #widgetsGridOrganizacao .widget:not(.widget-special) {
        min-height: 185px;
    }

    /* Finance tab: layout de largura total — remove as camadas de padding do content-scroll e do zfs-body */
    .content-scroll:has(#view-financas.active) {
        padding: 0 !important;
    }
    #financasViewContent.zfs-body {
        padding: 0;
        padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }
    /* No mobile, a aba Finanças reusa o FAB padrão persistente (.fab-container),
       que tem posição idêntica aos outros menus, aparece instantâneo e acompanha
       o menu inferior ao rolar. O .zfs-fab re-renderizado da view fica oculto aqui
       para não duplicar. (No desktop, o #fsWidget .zfs-fab segue normal.) */
    #financasViewContent .zfs-fab {
        display: none !important;
    }
    body.dark-mode #financasViewContent .zfs-fab {
        background: var(--neon);
        color: #0d0d0d;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ZIP DESIGN SYSTEM v7 — "QUIET PREMIUM" (Apple minimal)               ║
   ║  ------------------------------------------------------------------   ║
   ║  Camada final de refinamento: tipografia menor e mais precisa,        ║
   ║  superfícies neutras, hairlines, acento lime usado com parcimônia.    ║
   ║  Padrão do arquivo: acrescentada NO FIM para vencer a cascata.        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── 7.0 Render de texto ─────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── 7.1 Eyebrows: de mono "techy" para uppercase discreto ───────────── */
.zm-eyebrow,
.header-hero-date,
.home-sec-act {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    opacity: 1 !important;
}
.home-sec-act { color: var(--text-sec) !important; }
.home-sec-act:hover { color: var(--text-main) !important; }

/* ── 7.2 Header da home: saudação menor e mais elegante ──────────────── */
.header-hero-greet-word {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: var(--text-sec) !important;
    letter-spacing: -0.01em !important;
}
.header-hero-name {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
.header-hero-settings {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
}
.header-hero-avatar {
    width: 34px !important;
    height: 34px !important;
}
.mobile-header-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* ── 7.3 Bento hero: âncora escura limpa, sem faixa lime ─────────────── */
.bento-ring-tile,
#widgetsGrid .bento-ring-tile {
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--radius-lg) !important;
}
.ring-chips-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.55rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    color: rgba(255, 255, 255, 0.32) !important;
}
.ring-nav-chip {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    color: #f5f5f7 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0 !important;
    padding: 8px 12px !important;
    border-radius: 99px !important;
    transition: background 0.18s ease, transform 0.18s ease;
}
.ring-nav-chip:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.12) !important; }
.ring-nav-chip i { color: var(--lime) !important; font-size: 0.66rem; }
.hero-pct-val { font-weight: 700 !important; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bento-ring-done { font-weight: 700 !important; letter-spacing: -0.02em; }

/* ── 7.4 Tiles Sequência / Flow: fundos tingidos com identidade ───────
   Card com lavagem de cor da métrica (âmbar = Sequência · verde = Flow),
   borda fina tingida, marca d'água sutil e tag/número na cor — versão
   refinada do design clássico, nas novas proporções + modo escuro. ───── */
#bentoStreakTile,
body.dark-mode #bentoStreakTile {
    border-radius: var(--radius-lg) !important;
}
#bentoStreakTile {
    background: rgba(245, 158, 11, 0.14) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-top: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12), var(--shadow-sm) !important;
}
body.dark-mode #bentoStreakTile {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.30) !important;
    border-top: 1px solid rgba(245, 158, 11, 0.30) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12), var(--shadow-sm) !important;
}
#bentoFlowTile,
body.dark-mode #bentoFlowTile {
    border-radius: var(--radius-lg) !important;
}
#bentoFlowTile {
    background: rgba(90, 148, 0, 0.14) !important;
    border: 1px solid rgba(90, 148, 0, 0.35) !important;
    border-top: 1px solid rgba(90, 148, 0, 0.35) !important;
    box-shadow: 0 4px 14px rgba(90, 148, 0, 0.12), var(--shadow-sm) !important;
}
body.dark-mode #bentoFlowTile {
    background: rgba(179, 255, 26, 0.13) !important;
    border: 1px solid rgba(179, 255, 26, 0.28) !important;
    border-top: 1px solid rgba(179, 255, 26, 0.28) !important;
    box-shadow: 0 4px 14px rgba(120, 220, 0, 0.12), var(--shadow-sm) !important;
}
/* marca d'água: presente, porém sutil (menor e mais leve que a antiga) */
#bentoStreakTile::before {
    content: '\f06d' !important;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -8px;
    right: 4px;
    font-size: 56px;
    color: #f59e0b;
    opacity: 0.10;
    line-height: 1;
    pointer-events: none;
}
#bentoFlowTile::before {
    content: '\f0e7' !important;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -8px;
    right: 6px;
    font-size: 56px;
    color: var(--primary);
    opacity: 0.09;
    line-height: 1;
    pointer-events: none;
}
/* tag + ícone na cor da métrica */
#bentoStreakTile .bento-tile-tag,
body.dark-mode #bentoStreakTile .bento-tile-tag {
    color: #b45309 !important;
    font-weight: 600 !important;
    font-size: 0.6rem !important;
    gap: 6px !important;
}
body.dark-mode #bentoStreakTile .bento-tile-tag { color: #fbbf24 !important; }
#bentoStreakTile .bento-tile-tag i { color: #e08700 !important; font-size: 0.72rem !important; }
body.dark-mode #bentoStreakTile .bento-tile-tag i { color: #f59e0b !important; }
#bentoFlowTile .bento-tile-tag,
body.dark-mode #bentoFlowTile .bento-tile-tag {
    color: #4d7c0f !important;
    font-weight: 600 !important;
    font-size: 0.6rem !important;
    gap: 6px !important;
}
body.dark-mode #bentoFlowTile .bento-tile-tag { color: var(--lime) !important; }
#bentoFlowTile .bento-tile-tag i { color: #5a9400 !important; font-size: 0.72rem !important; }
body.dark-mode #bentoFlowTile .bento-tile-tag i { color: var(--lime) !important; }
/* número na cor da métrica — Sequência âmbar */
#dailyHeroCard #bentoStreakTile .bento-tile-val,
.bento-tiles-col #bentoStreakTile .bento-tile-val,
body.dark-mode #bentoStreakTile .bento-tile-val {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #c2410c !important;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}
body.dark-mode #dailyHeroCard #bentoStreakTile .bento-tile-val,
body.dark-mode .bento-tiles-col #bentoStreakTile .bento-tile-val {
    color: #fbbf24 !important;
}
/* número na cor da métrica — Flow verde */
#dailyHeroCard #bentoFlowTile .bento-tile-val,
.bento-tiles-col #bentoFlowTile .bento-tile-val,
body.dark-mode #bentoFlowTile .bento-tile-val {
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    color: #4d7c0f !important;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}
body.dark-mode #dailyHeroCard #bentoFlowTile .bento-tile-val,
body.dark-mode .bento-tiles-col #bentoFlowTile .bento-tile-val {
    color: var(--lime) !important;
}
#bentoStreakTile .bento-tile-val small,
#bentoFlowTile .bento-tile-val small {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    letter-spacing: 0 !important;
}
/* CTA da sequência: mais destacado */
.streak-progress-btn,
body.dark-mode .streak-progress-btn {
    background: rgba(245, 158, 11, 0.25) !important;
    border: 1.5px solid rgba(245, 158, 11, 0.40) !important;
    color: #b45309 !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    border-radius: 99px !important;
    padding: 7px 10px !important;
}
body.dark-mode .streak-progress-btn {
    color: #fbbf24 !important;
    background: rgba(245, 158, 11, 0.28) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
}
.streak-progress-btn:active { background: rgba(245, 158, 11, 0.18) !important; }
.streak-progress-btn i { color: inherit !important; }

/* ── 7.5 Títulos de seção: sem barra verde, escala contida ───────────── */
.home-tools-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 10px 2px 12px !important;
}
.home-tools-title::before { content: none !important; }
.home-sec-label { margin: 24px 0 12px !important; }

/* ── 7.6 Calendário: pills compactas, dia ativo em "ink" ─────────────── */
.date-item {
    min-width: 46px !important;
    height: 58px !important;
    padding: 6px 4px !important;
    border-radius: 13px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-base) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
.date-item span {
    font-size: 0.56rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.date-item strong,
.date-item .day-num {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
    .date-item:hover {
        transform: none !important;
        border-color: var(--text-muted) !important;
        background: var(--bg-base) !important;
    }
}
.date-item.active {
    background: #1d1d1f !important;
    color: #ffffff !important;
    border-color: #1d1d1f !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
    transform: none !important;
    font-weight: 600 !important;
}
.date-item.active i,
.date-item.active span,
.date-item.active strong,
.date-item.active .day-num {
    color: #ffffff !important;
}
.date-item.active.today::after { background: var(--lime) !important; }
body.dark-mode .date-item.active {
    background: #f5f5f7 !important;
    border-color: #f5f5f7 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
body.dark-mode .date-item.active i,
body.dark-mode .date-item.active span,
body.dark-mode .date-item.active strong,
body.dark-mode .date-item.active .day-num {
    color: #1d1d1f !important;
}
body.dark-mode .date-item.active.today::after { background: #1d1d1f !important; }
.cal-header-mobile,
.cal-header-mobile span,
#calMonthTextMobile,
#calMonthText {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* ── 7.7 Bottom nav: vidro fosco, acento contido ─────────────────────── */
@media (max-width: 768px) {
    .bottom-nav {
        background: rgba(255, 255, 255, 0.84) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
        box-shadow: none !important;
    }
    body.dark-mode .bottom-nav {
        background: rgba(16, 16, 18, 0.82) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .bottom-nav-item { color: var(--text-muted); }
    .bottom-nav-item i { font-size: 1rem; }
    .bottom-nav-item span {
        font-size: 0.58rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em;
    }
    .bottom-nav-item.active { color: var(--text-main) !important; }
    .bottom-nav-item.active span { font-weight: 600 !important; }
    .bottom-nav-item.active i { background: none !important; }
    body.dark-mode .bottom-nav-item.active i { background: none !important; }
    .bottom-nav-pill {
        background: rgba(0, 0, 0, 0.055) !important;
        top: 8px !important;
        height: 32px !important;
    }
    body.dark-mode .bottom-nav-pill { background: rgba(255, 255, 255, 0.09) !important; }
    .bottom-nav-item .nav-badge {
        min-width: 16px !important;
        height: 16px !important;
        font-size: 0.56rem !important;
        font-weight: 700 !important;
        border-width: 1.5px !important;
        box-shadow: none !important;
    }
    /* Ágora mantém o lime — é O acento da barra */
    .bottom-nav-item.highlighted span { font-weight: 600 !important; }
}

/* ── 7.8 Cards promo (Ativar Alertas / Instalar App) ─────────────────── */
#widget-notif-requirement h4,
#widget-install-pwa h4 {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
#widget-notif-requirement p,
#widget-install-pwa p {
    font-size: 0.68rem !important;
    opacity: 0.6 !important;
}
#widget-notif-requirement i.fa-solid,
#widget-install-pwa i.fa-solid {
    font-size: 1.05rem !important;
}
#widget-notif-requirement button,
#widget-install-pwa button {
    border-radius: 99px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
    letter-spacing: 0 !important;
}

/* ── 7.9 FAB: menor, ink no claro / lime no escuro ───────────────────── */
.fab-main {
    width: 52px !important;
    height: 52px !important;
    background: #1d1d1f !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22) !important;
    animation: none !important;
}
.fab-main:hover {
    background: #000000 !important;
    color: #ffffff !important;
    transform: scale(1.05);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28) !important;
}
body.dark-mode .fab-main {
    background: var(--lime) !important;
    color: #0d0d0d !important;
    box-shadow: 0 6px 24px rgba(179, 255, 26, 0.25) !important;
}
body.dark-mode .fab-main:hover { background: #c4ff47 !important; color: #0d0d0d !important; }
.fab-container.active .fab-main {
    background: #1d1d1f !important;
    color: #ffffff !important;
}
body.dark-mode .fab-container.active .fab-main {
    background: var(--lime) !important;
    color: #0d0d0d !important;
}

/* ── 7.10 Widgets: títulos e ícones mais contidos ────────────────────── */
.widget-title h4 {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.widget-title .icon,
.widget-title i {
    font-size: 0.9rem !important;
}

/* ── 7.11 Comunidade (preview da home) ───────────────────────────────── */
.widget-community-preview-title {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
}
/* No mobile o ícone-radar da comunidade também é azul (no desktop já é, via @min-width:769px). */
@media (max-width: 768px) {
    .widget-community-preview-title svg { color: #2563eb !important; }
    body.dark-mode .widget-community-preview-title svg { color: #60a5fa !important; }
}
.widget-community-preview-link {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--text-sec) !important;
}
.community-mini-post {
    border-radius: 14px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* ── 7.12 Overlays: profundidade com blur, não com escuridão ─────────── */
.modal-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ── 7.13 Botões: peso e tracking contidos ───────────────────────────── */
.btn,
.btn-primary,
.btn-secondary {
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}

/* ── 7.14 Banner de progresso topo (quando visível) ──────────────────── */
#tpText { font-weight: 700 !important; }

/* ── 7.15 DESKTOP: hero "Hoje" compacto em 3 colunas ──────────────────
   O tile escuro era um bloco gigante meio vazio. Agora: linha única de
   3 cards de mesma altura — [Hoje | Sequência | Flow]. O Pomodoro deixa
   de ser card solto e vira widget da seção Ferramentas (via app.js). ── */
@media (min-width: 769px) {
    .home-bento-hero {
        /* tile escuro menos largo → conteúdo preenche sem sobrar vão à direita */
        grid-template-columns: 1.35fr 1fr 1fr !important;
        gap: 14px !important;
        padding: 0 !important;
        align-items: stretch !important;
        margin-bottom: 20px !important;
    }
    /* quebra a coluna interna: Sequência e Flow viram células do grid */
    .bento-tiles-col { display: contents !important; }

    /* HOJE — anel maior + conteúdo distribuído preenchem o tile escuro */
    .bento-ring-tile {
        min-height: 124px !important;
        padding: 18px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }
    .bento-ring-mid {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 22px !important;
    }
    .bento-ring-tile .hero-ring-wrap,
    .bento-ring-tile .hero-ring-svg {
        width: 100px !important;
        height: 100px !important;
    }
    .bento-ring-tile .hero-pct-val { font-size: 23px !important; }
    .bento-ring-done { font-size: 30px !important; }
    .bento-ring-label { font-size: 12.5px !important; }
    /* CTAs "comece por aqui" exibidos também no desktop */
    .bento-ring-tile .ring-tile-nav-chips { 
        display: flex !important; 
        margin-top: 14px !important;
    }
    .bento-ring-tile .ring-chips-row {
        flex-direction: row !important;
        gap: 12px !important;
    }
    .bento-ring-tile .ring-nav-chip {
        flex: 1;
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
    }
    .bento-ring-tile .hero-motivation-msg { display: none !important; }

    /* SEQUÊNCIA / FLOW — número grande preenche a altura (antes 28px deixava vazio) */
    .bento-stat-tile,
    #bentoStreakTile,
    #bentoFlowTile {
        min-height: 124px !important;
        height: auto !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 18px 20px !important;
    }
    .bento-stat-tile:hover { transform: none !important; }
    /* número da métrica ocupa o card (vence a specificity dos 28px anteriores) */
    #dailyHeroCard #bentoStreakTile .bento-tile-val,
    #dailyHeroCard #bentoFlowTile .bento-tile-val,
    .bento-tiles-col #bentoStreakTile .bento-tile-val,
    .bento-tiles-col #bentoFlowTile .bento-tile-val {
        font-size: 42px !important;
        line-height: 0.95 !important;
    }
    #bentoStreakTile .bento-tile-tag,
    #bentoFlowTile .bento-tile-tag { font-size: 0.7rem !important; }
    /* No desktop o botão "Ver progresso" da Sequência é oculto (só mobile), então o
       número caía no rodapé deixando o card "cru". Centraliza tag+número nos DOIS
       tiles para preencher igual ao Flow. */
    #bentoStreakTile,
    #bentoFlowTile { justify-content: center !important; gap: 10px !important; }
    /* Marca d'água (foguinho/raio) bem maior no desktop — preenche mais o card */
    #bentoStreakTile::before,
    #bentoFlowTile::before {
        font-size: 132px !important;
        bottom: -24px !important;
    }
    #bentoStreakTile::before { right: -10px !important; opacity: 0.13 !important; }
    #bentoFlowTile::before   { right: -6px !important;  opacity: 0.12 !important; }
    /* Pomodoro do início vira widget do grid (Ferramentas) — o card solto
       e o título "Ferramentas de produtividade" saem do desktop */
    .home-tools-title { display: none !important; }
    #homePomodoro { display: none !important; }
}

/* ── 7.16 DESAFIOS (mobile): card proporcional ao conteúdo ────────────
   O card de desafio é um `.widget` simples (sem `.widget-special`), então herdava
   o `min-height:185px` das tabs e ficava grande e vazio (sobretudo no estado
   bloqueado por PIN). Aqui: altura segue o conteúdo, conteúdo centralizado e a
   barra de ações (vazia nos desafios) sai para não deixar hairline solta. */
@media (max-width: 768px) {
    #widgetsGridHoje .widget.widget-challenge-host,
    #widgetsGridOrganizacao .widget.widget-challenge-host {
        min-height: 0 !important;
        padding: 16px !important;
    }
    .widget-challenge-host .w-content-wrap {
        justify-content: center !important;
        height: auto !important;
    }
    .widget-challenge-host .widget-actions-bottom {
        display: none !important;
    }
    /* estado bloqueado: ocupa a largura e respira melhor */
    .widget-challenge-host .widget-challenge-lock {
        padding: 2px 0 !important;
    }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  ZIP V8 — "SINAL VIVO" (movimento + atmosfera)                        ║
   ║  ------------------------------------------------------------------   ║
   ║  Fase 1+2 do PLANO-DESIGN-V8: tokens de movimento, entrada            ║
   ║  orquestrada, anel vivo, Dia Fechado, skeleton, washes por hora.      ║
   ║  Regra: só transform/opacity animam; reduced-motion desliga tudo.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── V8.1 Tokens de movimento ────────────────────────────────────────── */
:root {
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-tap: 120ms;
    --dur-ui: 240ms;
    --dur-page: 420ms;
    --dur-hero: 900ms;
}

/* ── V8.2 Entrada orquestrada da home (só na janela de boot) ─────────── */
@keyframes v8Rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
body.v8-boot #view-home .home-header-hero { animation: v8Rise .5s var(--ease-out) both; }
body.v8-boot #view-home .home-bento-hero  { animation: v8Rise .55s var(--ease-out) .07s both; }
body.v8-boot #view-home #homeCommunityPreview { animation: v8Rise .55s var(--ease-out) .14s both; }
body.v8-boot #view-home #homeHelpCards    { animation: v8Rise .55s var(--ease-out) .20s both; }
body.v8-boot #view-home .home-tools-title,
body.v8-boot #view-home #homePomodoro     { animation: v8Rise .55s var(--ease-out) .26s both; }
body.v8-boot #view-home #widgetsGrid      { animation: v8Rise .6s var(--ease-out) .30s both; }

/* troca de view: fade curto (sem transform — preserva fixed/sticky internos) */
@keyframes v8ViewIn { from { opacity: 0; } to { opacity: 1; } }
.view.active { animation: v8ViewIn var(--dur-ui) var(--ease-out); }

/* ── V8.3 Anel vivo: desenha no load, acende no Dia Fechado ─────────── */
.bento-ring-tile .hero-ring-svg .hero-ring-fill {
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36; /* nasce vazio; o JS leva ao valor → transição anima */
    transition: stroke-dashoffset var(--dur-hero) var(--ease-out), filter .4s ease;
}
@keyframes v8DayClosed {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}
.bento-ring-tile.day-complete {
    animation: v8DayClosed .7s var(--ease-spring);
    box-shadow: 0 0 0 1px rgba(179, 255, 26, 0.28), 0 10px 34px rgba(140, 220, 0, 0.20), var(--shadow) !important;
}
.bento-ring-tile.day-complete .hero-ring-svg .hero-ring-fill {
    filter: drop-shadow(0 0 9px rgba(179, 255, 26, 0.85)) !important;
}
.bento-ring-tile.day-complete .bento-ring-tag::after {
    content: ' · dia fechado';
    color: var(--lime);
    letter-spacing: 0.09em;
}

/* ── V8.4 Skeleton da home (loader) ──────────────────────────────────── */
.loader-screen .sk-home {
    width: min(420px, 88vw);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}
.sk {
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.055);
    border-radius: 14px;
}
body.dark-mode .sk { background: rgba(255, 255, 255, 0.06); }
.sk::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: v8Shimmer 1.4s ease infinite;
}
body.dark-mode .sk::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
@keyframes v8Shimmer { to { transform: translateX(100%); } }
.sk-eyebrow { height: 10px; width: 88px; border-radius: 6px; }
.sk-title   { height: 22px; width: 200px; border-radius: 8px; margin-bottom: 4px; }
.sk-row     { display: flex; gap: 12px; }
.sk-hero    { flex: 1.5; height: 150px; border-radius: 20px; }
.sk-col     { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.sk-tile    { flex: 1; border-radius: 20px; }
.sk-card    { height: 92px; border-radius: 20px; }
.sk-card-sm { height: 64px; }
.sk-msg {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ── V8.5 Washes atmosféricos por hora (sutil, quase subliminar) ─────── */
body.tod-morning .main {
    background-image: radial-gradient(720px 300px at 50% -90px, rgba(255, 176, 56, 0.055), transparent 62%) !important;
}
body.tod-night .main {
    background-image: radial-gradient(720px 300px at 50% -90px, rgba(99, 110, 245, 0.05), transparent 62%) !important;
}
body.dark-mode.tod-morning .main {
    background-image: radial-gradient(720px 300px at 50% -90px, rgba(255, 176, 56, 0.06), transparent 62%) !important;
}
body.dark-mode.tod-night .main {
    background-image: radial-gradient(720px 300px at 50% -90px, rgba(120, 130, 255, 0.07), transparent 62%) !important;
}

/* ── V8.6 Dark↔light: revelação circular (View Transitions API) ─────── */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
::view-transition-new(root) {
    clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 0%));
    animation: v8VtReveal .5s var(--ease-out) forwards;
}
@keyframes v8VtReveal {
    to { clip-path: circle(160vmax at var(--vt-x, 50%) var(--vt-y, 0%)); }
}

/* ── V8.7 Tato: squash sutil em cards interativos ────────────────────── */
.widget:active,
.bento-stat-tile:active {
    transform: scale(0.985);
    transition: transform var(--dur-tap) var(--ease-out);
}

/* ── V8.0 Acessibilidade: reduced-motion desliga o decorativo ────────── */
@media (prefers-reduced-motion: reduce) {
    body.v8-boot #view-home .home-header-hero,
    body.v8-boot #view-home .home-bento-hero,
    body.v8-boot #view-home #homeCommunityPreview,
    body.v8-boot #view-home #homeHelpCards,
    body.v8-boot #view-home .home-tools-title,
    body.v8-boot #view-home #homePomodoro,
    body.v8-boot #view-home #widgetsGrid,
    .view.active,
    .bento-ring-tile.day-complete,
    .sk::after { animation: none !important; }
    .bento-ring-tile .hero-ring-svg .hero-ring-fill { transition: none; }
}

/* ── V8.8 (F3) Mapa do semestre — heatmap GitHub-style ───────────────── */
.hm-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.hm-scroll::-webkit-scrollbar { display: none; }
.hm-months { display: flex; gap: 3px; margin-bottom: 5px; }
.hm-m {
    width: 12px;
    flex: none;
    font-size: 0.56rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow: visible;
    white-space: nowrap;
}
.hm-grid { display: flex; gap: 3px; width: max-content; }
.hm-col { display: flex; flex-direction: column; gap: 3px; }
.hm-c {
    width: 12px;
    height: 12px;
    border-radius: 3.5px;
    display: block;
    background: rgba(13, 30, 5, 0.07);
}
body.dark-mode .hm-c { background: rgba(255, 255, 255, 0.07); }
.hm-c.l1 { background: rgba(90, 148, 0, 0.25); }
.hm-c.l2 { background: rgba(90, 148, 0, 0.45); }
.hm-c.l3 { background: rgba(90, 148, 0, 0.70); }
.hm-c.l4 { background: #5a9400; }
body.dark-mode .hm-c.l1 { background: rgba(179, 255, 26, 0.20); }
body.dark-mode .hm-c.l2 { background: rgba(179, 255, 26, 0.40); }
body.dark-mode .hm-c.l3 { background: rgba(179, 255, 26, 0.65); }
body.dark-mode .hm-c.l4 { background: var(--lime); box-shadow: 0 0 6px rgba(179, 255, 26, 0.35); }
.hm-c.hm-today { outline: 1.5px solid var(--text-main); outline-offset: 1px; }
.hm-c.hm-future { opacity: 0.35; }
.hm-legend { margin-top: 10px; }
.hm-legend .hm-c { width: 10px; height: 10px; }

/* ── V8.9 (F3) Faíscas — conquistas estilo "pin de lapela" ───────────── */
.sparks-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.spark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px 12px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    text-align: center;
}
.spark-medal {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: var(--bg-app);
    color: var(--text-muted);
}
.spark-name {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
.spark-progress {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.spark:not(.on) { opacity: 0.55; }
.spark:not(.on) .spark-medal { filter: grayscale(1); }
.spark.on.spark-amber .spark-medal {
    background: rgba(245, 158, 11, 0.14);
    color: #e08700;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.28);
}
body.dark-mode .spark.on.spark-amber .spark-medal { color: #f59e0b; }
.spark.on.spark-lime .spark-medal {
    background: rgba(90, 148, 0, 0.12);
    color: #5a9400;
    box-shadow: 0 0 16px rgba(140, 220, 0, 0.25);
}
body.dark-mode .spark.on.spark-lime .spark-medal {
    background: rgba(179, 255, 26, 0.13);
    color: var(--lime);
}
.spark.on .spark-progress { color: #5a9400; }
body.dark-mode .spark.on .spark-progress { color: var(--lime); }

/* ── V8.10 (F3) Anel de streak no avatar — sempre VERDE da marca (identidade) ── */
.header-hero-avatar {
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--primary) !important;
    transition: border-color .3s ease, box-shadow .3s ease;
}
/* Já fez algo hoje → mesmo verde com um brilho sutil de "vivo". */
.header-hero-avatar.streak-live {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(90, 148, 0, 0.20), 0 0 12px rgba(90, 148, 0, 0.22);
}
body.dark-mode .header-hero-avatar.streak-live {
    border-color: var(--lime) !important;
    box-shadow: 0 0 0 2px rgba(179, 255, 26, 0.22), 0 0 12px rgba(179, 255, 26, 0.30);
}
/* "Em risco" deixou de existir como laranja — fica no verde da marca. */
.header-hero-avatar.streak-risk {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(90, 148, 0, 0.15);
}

/* ============================================================
   CALENDÁRIO ROLA JUNTO COM O CONTEÚDO — MOBILE (Hoje/Organização)
   No mobile o .cal-wrapper é movido (por JS: placeCalendar() em app.js)
   para DENTRO do .content-scroll, como primeiro filho. Assim ele sobe
   naturalmente ao rolar — gradual, 1:1, sem redimensionar a área de
   rolagem e sem "bounce"/salto. Aqui só garantimos full-bleed (cancelando
   o padding do scroller) e que nenhum resíduo do mecanismo antigo o afete.
   No DESKTOP o calendário continua sendo irmão em .main (placeCalendar o
   devolve), preservando o comportamento absolute + cal-hidden de lá.
   Camada final = vence as regras anteriores de .cal-wrapper no mobile.
   ============================================================ */
@media (max-width: 768px) {
    .content-scroll > .cal-wrapper {
        position: static !important;
        /* full-bleed: width:auto + margens negativas que cancelam o padding do
           .content-scroll (top:10 / lados:12 no mobile). Com width:100% o
           elemento mantinha a largura cheia e só deslizava p/ a esquerda,
           cortando a borda direita — por isso width:auto. */
        width: auto !important;
        margin: -10px -12px 10px -12px !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
    }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v7.2 — PROFUNDIDADE & DEFINIÇÃO                                       ║
   ║  Tira o aspecto "lavado": bordas visíveis, sombra com presença e       ║
   ║  campos de input recuados (inset). Mantém minimalismo + identidade.    ║
   ║  Acrescentado NO FIM de propósito (vence a cascata, sem reordenar).    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* 1) Hairlines visíveis (antes eram quase invisíveis: 7%/8%). */
:root {
    --border-color: rgba(0, 0, 0, 0.09);
    --border-strong: rgba(0, 0, 0, 0.14);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow:    0 1px 2px rgba(0,0,0,0.06), 0 7px 20px rgba(0,0,0,0.08);
}
body.dark-mode {
    --border-color: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.18);
}

/* 2) Cards/widgets ganham presença: sombra de contato + ambiente difusa.
   A sombra vale para TODOS (claro ou escuro). A borda nítida escura só nos
   cards CLAROS (os `.widget-special` têm fundo escuro e borda própria). */
#widgetsGrid .widget,
.widget,
#widget-community-preview,
.daily-note-btn-widget {
    box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(0,0,0,0.085) !important;
}
#widgetsGrid .widget:not(.widget-special),
.widget:not(.widget-special),
#widget-community-preview,
.daily-note-btn-widget {
    border: 1px solid rgba(0, 0, 0, 0.11) !important;
}
body.dark-mode #widgetsGrid .widget,
body.dark-mode .widget,
body.dark-mode #widget-community-preview,
body.dark-mode .daily-note-btn-widget {
    box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 14px 32px rgba(0,0,0,0.50) !important;
}
body.dark-mode #widgetsGrid .widget:not(.widget-special),
body.dark-mode .widget:not(.widget-special),
body.dark-mode #widget-community-preview,
body.dark-mode .daily-note-btn-widget {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* 3) Campos de input "recuados" — leem como caixa DENTRO do card. */
.form-control,
input[type="date"], input[type="time"], select, textarea,
.daily-textarea {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ztx-field { box-shadow: none; }
.form-control:focus,
input[type="date"]:focus, input[type="time"]:focus,
select:focus, textarea:focus, .daily-textarea:focus {
    border-color: var(--primary);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(90, 148, 0, 0.16);
}
body.dark-mode .form-control,
body.dark-mode input[type="date"], body.dark-mode input[type="time"],
body.dark-mode select, body.dark-mode textarea, body.dark-mode .daily-textarea,
body.dark-mode .ztx-field {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}
body.dark-mode .form-control:focus,
body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(179, 255, 26, 0.18);
}

/* 4) Fim da "seleção fantasma" ao tocar/rolar no mobile: o app não é mais
   selecionável (feel de app), exceto campos de texto e balões do Leo. */
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"], .leo-bubble, .selectable {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v7.3 — DEFINIÇÃO+ : bordas mais fortes, canvas levemente mais escuro, ║
   ║  check destacado e toque limpo (sem realce "grudado").                 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Hairlines globais mais presentes (0.09 → 0.13). Cobre cards, calendário (.date-item),
   chips, Leo (--leo-hair herda de --border-color), add-sheet (.tpl-card) e comunidade. */
:root {
    --border-color: rgba(0, 0, 0, 0.13);
    --border-strong: rgba(0, 0, 0, 0.18);
    --app-canvas: #e8e8ec;            /* canvas um tico mais escuro → os cards brancos saltam */
}
body.dark-mode {
    --border-color: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.22);
}

/* Cards: borda um pouco acima do hairline geral, pra "descolar" bem do fundo. */
#widgetsGrid .widget:not(.widget-special),
.widget:not(.widget-special),
#widget-community-preview,
.daily-note-btn-widget {
    border: 1px solid rgba(0, 0, 0, 0.14) !important;
}
body.dark-mode #widgetsGrid .widget:not(.widget-special),
body.dark-mode .widget:not(.widget-special),
body.dark-mode #widget-community-preview,
body.dark-mode .daily-note-btn-widget {
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Menu inferior: divisória superior mais nítida. */
@media (max-width: 768px) {
    .bottom-nav { border-top: 1px solid rgba(0, 0, 0, 0.12) !important; }
    body.dark-mode .bottom-nav { border-top: 1px solid rgba(255, 255, 255, 0.14) !important; }
}

/* Botão de CHECK do hábito: anel bem mais visível (estava apagado). */
.btn-check-habit {
    border: 2.5px solid rgba(0, 0, 0, 0.24);
    background: var(--bg-app);
}
body.dark-mode .btn-check-habit {
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.05);
}

/* ── TOQUE LIMPO no mobile ──────────────────────────────────────────────
   1) tap-highlight sempre transparente (reforço).
   2) foco por toque/mouse não desenha contorno (mantém foco do TECLADO).
   3) hover não "gruda" no touch (reset dos alvos de toque citados). */
* { -webkit-tap-highlight-color: transparent !important; }
:focus:not(:focus-visible) { outline: none !important; }
@media (hover: none) {
    .btn-check-habit:hover { border-color: rgba(0, 0, 0, 0.24); }
    body.dark-mode .btn-check-habit:hover { border-color: rgba(255, 255, 255, 0.30); }
    .counter-btn:hover { background: transparent; color: var(--text-sec); }
    .btn-skip-habit-discrete:hover, .btn-habit-del-mob:hover,
    .widget-mob-remove:hover, .tpl-card:hover {
        transform: none;
        filter: none;
    }
    .fab-main:hover {
        transform: none;
        background: var(--primary);
        color: #0d0d0d;
        box-shadow: 0 0 0 0 rgba(143, 214, 0, 0.4), 0 8px 24px rgba(143, 214, 0, 0.45);
        animation: fab-pulse 2.8s ease-in-out infinite;
    }
    .fab-container.active .fab-main:hover { transform: rotate(45deg); }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  v7.4 — MODO ESCURO refinado: menos "neon", superfícies mais limpas.   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* O lime puro (#b3ff1a) cansava nos fills grandes (botões, FAB, barras, checks).
   Um lime levemente mais suave mantém a identidade sem "queimar" a tela. */
body.dark-mode {
    --primary: #a3e635;
    --green-lime: #a3e635;
    --lime: #a3e635;
    --primary-light: rgba(163, 230, 53, 0.14);
}

/* FAB: pulso/brilho verde mais contido no escuro. */
@keyframes fab-pulse-dark {
    0%   { box-shadow: 0 0 0 0 rgba(120, 180, 0, 0.30), 0 8px 20px rgba(120, 180, 0, 0.25); }
    60%  { box-shadow: 0 0 0 12px rgba(120, 180, 0, 0), 0 8px 20px rgba(120, 180, 0, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(120, 180, 0, 0), 0 8px 20px rgba(120, 180, 0, 0.25); }
}
body.dark-mode .fab-main { animation: fab-pulse-dark 2.8s ease-in-out infinite; }
body.dark-mode .fab-main:hover { box-shadow: 0 10px 26px rgba(120, 180, 0, 0.32); }

/* barra de progresso dos hábitos: verde mais sóbrio no escuro (era neon). */
body.dark-mode .progress-fill,
body.dark-mode .zwk-progress-fill,
body.dark-mode .zpm-bar > span {
    background: linear-gradient(90deg, #7bbf2e, #a3e635) !important;
}

/* Sequência (Progresso): hero LIMPO no escuro — antes virava um marrom "lavado". */
body.dark-mode .prog-hero {
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0) 72%),
        var(--bg-card);
    border: 1px solid rgba(245, 158, 11, 0.32);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40);
}
/* tile de Sequência da home: um tico mais de presença/contraste no escuro. */
body.dark-mode #bentoStreakTile {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.30) !important;
}

/* Lista de tarefas: removida do Início a pedido (não deve aparecer na home).
   Mantida no DOM/JS para reuso futuro (ex.: aba Hoje), porém oculta. */
.home-tasks { display: none !important; }

/* ████████████████████████████████████████████████████████████████████████████
   MEGA UPDATE DESKTOP (v8.2.0) — menu fixo liquid glass + layout por seções
   ----------------------------------------------------------------------------
   TUDO daqui pra baixo é EXCLUSIVO de desktop (min-width:769px). Nada afeta o
   mobile (que continua intacto em @media max-width:768px e nos paths isMobile).
   Vem no FIM do arquivo de propósito: vence por ordem de origem as regras
   desktop anteriores (calendário absoluto, centralização, etc.).
   ████████████████████████████████████████████████████████████████████████████ */
@media (min-width: 769px) {

    /* ---- Layout raiz: sidebar vira COLUNA fixa real; main preenche o resto ---- */
    #appContainer { --leo-w: 400px; }

    .sidebar {
        position: relative !important;     /* participa do flex-row, não sobrepõe */
        transform: none !important;        /* sempre visível (ignora .open) */
        left: auto; top: auto; bottom: auto;
        height: 100dvh;
        flex-shrink: 0;
        z-index: 30;
        /* ---- LIQUID GLASS ADAPTATIVO (claro) ---- */
        background:
            radial-gradient(135% 80% at 12% -8%, rgba(179, 255, 26, 0.16), transparent 56%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.52) 100%) !important;
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
        border-right: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow:
            inset -1px 0 0 rgba(0, 0, 0, 0.04),
            inset 1px 1px 0 rgba(255, 255, 255, 0.55),
            16px 0 44px -22px rgba(15, 23, 42, 0.22);
    }
    body.dark-mode .sidebar {
        background:
            radial-gradient(135% 80% at 12% -8%, rgba(179, 255, 26, 0.13), transparent 56%),
            linear-gradient(180deg, rgba(42, 42, 48, 0.70) 0%, rgba(20, 20, 24, 0.50) 100%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow:
            inset -1px 0 0 rgba(255, 255, 255, 0.05),
            inset 1px 1px 0 rgba(255, 255, 255, 0.06),
            16px 0 48px -22px rgba(0, 0, 0, 0.65);
    }

    /* O overlay e o botão hambúrguer não existem mais no desktop */
    .sidebar-overlay { display: none !important; }
    .sidebar-brand .btn-icon { display: none !important; }          /* "x" de fechar */
    .cal-header-desktop .toggle-sidebar-btn { display: none !important; } /* 3 linhas */

    /* ---- Itens de menu: pílula de vidro com brilho verde da marca ---- */
    .menu-section-label { opacity: 0.6; }
    .sidebar .menu-link:hover {
        background: rgba(127, 127, 127, 0.10);
        color: var(--text-main);
    }
    .sidebar .menu-link.active {
        background: linear-gradient(180deg, rgba(179, 255, 26, 0.22), rgba(179, 255, 26, 0.08)) !important;
        color: var(--text-main) !important;
        border: 1px solid rgba(179, 255, 26, 0.55) !important;
        border-radius: 14px !important;
        box-shadow:
            0 8px 22px -8px rgba(143, 214, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    }
    .sidebar .menu-link.active i { color: var(--green-deep, #3f6212) !important; }
    body.dark-mode .sidebar .menu-link.active {
        background: linear-gradient(180deg, rgba(179, 255, 26, 0.20), rgba(179, 255, 26, 0.06)) !important;
        color: #ffffff !important;
        border: 1px solid rgba(179, 255, 26, 0.45) !important;
        box-shadow:
            0 8px 26px -8px rgba(143, 214, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    }
    body.dark-mode .sidebar .menu-link.active i { color: var(--lime, #b3ff1a) !important; }

    /* Tiles internos translúcidos para combinar com o vidro */
    .sidebar .user-badge {
        background: rgba(127, 127, 127, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(8px);
    }
    body.dark-mode .sidebar .user-badge { border-color: rgba(255, 255, 255, 0.07); }
    .sidebar .support-card-sidebar {
        background: rgba(127, 127, 127, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.45);
    }
    body.dark-mode .sidebar .support-card-sidebar { border-color: rgba(255, 255, 255, 0.07); }
    .sidebar-footer { border-top-color: rgba(127, 127, 127, 0.18); }

    /* ---- Conteúdo full-bleed: acaba a centralização, preenche a tela ---- */
    .content-scroll {
        padding: 26px clamp(22px, 2.6vw, 46px) 56px !important;
    }
    .content-scroll > * {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* A grade legada do Início ficou vestigial (widgets moram em Hoje/Org/Finanças).
       Esconde a grade + skeletons + sec-label + quick-actions também no desktop
       (no mobile já era escondida pela regra "MEGA NAV"). */
    #view-home #widgetsGrid,
    #view-home > .home-sec-label,
    #view-home .home-quick-actions,
    #view-home #homeQuickActions { display: none !important; }

    /* Pomodoro agora é o MESMO card fixo do Início no desktop (igual mobile) —
       reverte o antigo ocultamento (quando ele era widget do grid). */
    #view-home .home-tools-title { display: flex !important; }
    #view-home #homePomodoro { display: block !important; }

    /* ---- Calendário: volta ao fluxo normal (não-absoluto), só em Hoje/Org ---- */
    .cal-wrapper {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important;
        transform: none !important;
        height: auto !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .cal-wrapper.cal-hidden { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }

    /* ---- Grades das seções: multi-coluna imersiva que preenche a largura ----
       minmax(420px) → 2 colunas nos tamanhos comuns (1280–1600), 3+ em telas
       largas. Os spans inline (span 2 = "linha cheia no grid mobile de 2 col)
       são neutralizados: cada card ocupa UMA trilha de largura legível. */
    #widgetsGridHoje.grid,
    #widgetsGridOrganizacao.grid {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
        grid-auto-rows: auto !important;
        grid-auto-flow: row;
        gap: 20px !important;
        align-content: start;
        align-items: start;   /* cada card com altura natural (não estica p/ a linha) */
    }
    #widgetsGridHoje.grid > *:not(.home-sec-label),
    #widgetsGridOrganizacao.grid > *:not(.home-sec-label) {
        grid-column: auto !important;
        grid-row: auto !important;
        width: auto !important;
        min-width: 0;
    }
    #widgetsGridHoje .home-sec-label,
    #widgetsGridOrganizacao .home-sec-label {
        grid-column: 1 / -1 !important;
        margin-top: 4px !important;
    }

    /* ===========================================================
       FINANÇAS no desktop: dashboard de 2 colunas que preenche a largura
       (no mobile continua a coluna única de 600px do .zff)
       =========================================================== */
    #financasViewContent { max-width: none !important; margin: 0 !important; }
    #financasViewContent .zff {
        max-width: none !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 24px;                 /* + respiro vertical e espaçamento padronizado */
        align-content: start;
        padding: 6px 2px 28px;
    }
    /* respiro extra antes da seção de Transações (última, largura cheia) */
    #financasViewContent .zff > .zff-sec:last-child { margin-top: 6px; }
    /* títulos de seção com espaçamento consistente */
    #financasViewContent .zff-sec-h { margin-bottom: 14px; }
    /* Linhas que ocupam a largura toda */
    #financasViewContent .zff > .zff-hero,
    #financasViewContent .zff > .zff-accounts,
    #financasViewContent .zff > .zff-summary,
    #financasViewContent .zff > .zff-sec:last-child { grid-column: 1 / -1; }
    /* Hero vira um cartão arredondado (em vez de banner colado no topo) */
    #financasViewContent .zff-hero {
        border-radius: var(--radius-lg, 20px);
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.25);
    }
    /* 4 indicadores lado a lado */
    #financasViewContent .zff-summary { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    /* Os dois gráficos (Gastos no mês / Por categoria) ficam lado a lado */
    #financasViewContent .zff > .zff-sec { padding: 0; }
    #financasViewContent .zff-panel { height: 100%; }

    /* ===========================================================
       INÍCIO: grid de 2 colunas. O conteúdo PREENCHE a coluna esquerda
       (1fr) e o chat do Leo fica numa coluna fixa à direita — MAIS CURTO
       (~meio da tela) e fixo (sticky) ao rolar. Sem sobreposição.
       =========================================================== */
    #view-home.view { position: relative; }
    #view-home.view.active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--leo-w);
        column-gap: clamp(20px, 2vw, 32px);
        align-items: start;
        align-content: start;
        min-height: 100%;           /* preenche a altura visível p/ ancorar o Leo embaixo */
        position: relative;
        padding-right: 0;
    }
    /* todo o conteúdo na coluna 1 (preenche a largura disponível) */
    #view-home.view.active > *:not(#homeAside) { grid-column: 1; min-width: 0; }

    /* Evita o "flash": antes de o JS mover Pomodoro/Leo para a coluna direita,
       eles ficam ocultos (senão aparecem por instantes na coluna do conteúdo,
       com tamanho errado). Quando entram no #homeAside, deixam de ser filhos
       diretos de #view-home e voltam a aparecer já na posição/altura certas. */
    #view-home.view.active > #homePomodoro,
    #view-home.view.active > #leoHome { display: none !important; }

    /* 7.1 — coluna direita FIXA: Pomodoro (topo) + Leo (preenche embaixo).
       A coluna 2 do grid fica reservada; o #homeAside flutua sobre ela. */
    #view-home.view.active > #homeAside {
        position: fixed;
        top: 14px;                  /* alinha o topo (Pomodoro) à borda superior, mesmo respiro do bottom/right */
        right: 14px;
        bottom: 14px;
        width: var(--leo-w);
        display: flex;
        flex-direction: column;
        gap: 14px;
        z-index: 38;
    }
    #homeAside > #homePomodoro { flex: 0 0 auto; }
    #homeAside .home-pomodoro-card { width: 100%; }
    #homeAside > #leoHome.leo-home {
        flex: 1 1 auto;
        min-height: 0;
        position: static;
        width: auto;
        margin: 0 !important;
        z-index: 38;
    }

    /* Conteúdo preenche a largura toda no desktop: remove o teto de 1280px
       centralizado (que deixava margens em branco e afastava o conteúdo do
       menu lateral) — vale p/ Início, Finanças, Hoje e Organização. */
    .content-scroll {
        max-width: none !important;
        margin: 0 !important;
    }
    #homeAside > #leoHome.leo-home .leo-dock {
        height: 100% !important;             /* preenche o espaço abaixo do Pomodoro */
        max-height: none !important;
        box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.30);
    }
    body.dark-mode #homeAside > #leoHome.leo-home .leo-dock {
        box-shadow: 0 24px 64px -22px rgba(0, 0, 0, 0.7);
    }
    /* "Ferramentas de produtividade" some no desktop (o Pomodoro foi p/ a coluna direita) */
    #view-home .home-tools-title { display: none !important; }

    /* Ponto 6: tira a logo da ZIP no topo do menu e o anel de progresso
       ao redor do avatar do perfil (só desktop; mobile fica intacto). */
    .sidebar-brand { display: none !important; }
    .sidebar .avatar-streak-ring { display: none !important; }
    /* um respiro no topo já que a logo saiu */
    .sidebar .user-badge { margin-top: 14px; }

    /* Pontos 2/3: o "+" (FAB) começa OCULTO no desktop, igual ao mobile.
       O JS (nav) o exibe apenas em Hoje/Organização/Finanças. No Início o
       chat do Leo o substitui — antes ele aparecia e sobrepunha o "enviar". */
    .fab-container { display: none; }

    /* ---- Lista de tarefas de hoje (Início, desktop) ---- */
    .home-tasks {
        display: block;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg, 20px);
        padding: 18px 20px;
        box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.25);
    }
    .home-tasks-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .home-tasks-count {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--text-sec);
        font-variant-numeric: tabular-nums;
    }
    .home-tasks-list { display: flex; flex-direction: column; gap: 6px; }
    .home-task-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        background: rgba(127, 127, 127, 0.04);
        transition: background 0.15s ease;
    }
    .home-task-item:hover { background: rgba(127, 127, 127, 0.08); }
    .home-task-chk {
        flex-shrink: 0;
        width: 22px; height: 22px;
        border-radius: 50%;
        border: 2px solid var(--border-color);
        background: transparent;
        color: #fff;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        font-size: 0.68rem;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    .home-task-item.done .home-task-chk {
        background: var(--green-lime, #84cc16);
        border-color: var(--green-lime, #84cc16);
    }
    .home-task-text {
        flex: 1; min-width: 0;
        font-size: 0.92rem;
        color: var(--text-main);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .home-task-item.done .home-task-text { text-decoration: line-through; color: var(--text-sec); }
    .home-task-flag { color: #f59e0b; font-size: 0.75rem; flex-shrink: 0; }
    .home-task-time { font-size: 0.78rem; color: var(--text-sec); font-variant-numeric: tabular-nums; flex-shrink: 0; }
    .home-tasks-empty {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 22px; color: var(--text-sec); text-align: center;
    }
    .home-tasks-empty i { font-size: 1.6rem; opacity: 0.5; }
    .home-tasks-empty p { margin: 0; font-size: 0.9rem; }
    .home-tasks-add {
        margin-top: 12px;
        width: 100%;
        padding: 10px;
        border-radius: 12px;
        border: 1px dashed var(--border-color);
        background: transparent;
        color: var(--text-sec);
        font-weight: 600;
        font-size: 0.86rem;
        cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .home-tasks-add:hover { background: rgba(127, 127, 127, 0.06); color: var(--text-main); }

    /* ---- FAB com contraste forte (agora há conteúdo atrás dele) ---- */
    .fab-main {
        background: var(--lime, #b3ff1a) !important;
        color: #0d0d0d !important;
        box-shadow:
            0 12px 30px -8px rgba(0, 0, 0, 0.28),
            0 0 0 5px rgba(255, 255, 255, 0.65) !important;
        animation: none !important;
    }
    body.dark-mode .fab-main {
        box-shadow:
            0 12px 32px -8px rgba(0, 0, 0, 0.6),
            0 0 0 5px rgba(20, 20, 24, 0.6) !important;
    }
    .fab-main:hover {
        background: #0d0d0d !important;
        color: var(--lime, #b3ff1a) !important;
        transform: scale(1.08);
    }
}

/* Itens novos do menu fixo (Hoje/Org/Finanças + rótulos) — só no DESKTOP.
   No mobile a navegação dessas seções é a bottom-nav, então o menu lateral
   (slide-in) permanece EXATAMENTE como antes. */
@media (min-width: 769px) {
    .nav-mob-only { display: none !important; }
}
@media (max-width: 768px) {
    .nav-desk-only { display: none !important; }
}

/* ████████████████████████████████████████████████████████████████████████████
   AJUSTE DE PROPORÇÕES — DESKTOP COMPACTO (v8.2.4)
   Tudo mais enxuto/minimalista, proporcional à tela, mostrando mais info.
   Exclusivo de desktop (min-width:769px) — mobile permanece intacto.
   ████████████████████████████████████████████████████████████████████████████ */
@media (min-width: 769px) {

    /* ---- Sidebar mais estreita e minimalista ---- */
    #appContainer { --sidebar-width: 226px; }

    .sidebar .user-badge {
        margin: 10px 10px 8px !important;
        padding: 8px 9px !important;
        gap: 9px;
        border-radius: 13px;
    }
    .sidebar .avatar-ring-wrap,
    .sidebar .avatar-ring-wrap .user-avatar,
    .sidebar .user-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }
    .sidebar .user-info span.name { font-size: 0.82rem !important; }
    .sidebar .user-info .city,
    .sidebar .sidebar-flow-badge { font-size: 0.66rem !important; }

    .sidebar .menu-section-label { font-size: 0.6rem !important; padding: 11px 8px 3px !important; letter-spacing: 0.8px; }
    .sidebar .menu { gap: 2px; }
    .sidebar .menu-link { padding: 8px 11px !important; font-size: 0.85rem !important; gap: 10px; border-radius: 10px; }
    .sidebar .menu-link i { font-size: 0.95rem !important; width: 18px !important; }
    .sidebar .support-card-sidebar { padding: 9px 11px !important; }
    .sidebar .support-card-sidebar .title { font-size: 0.8rem; }
    .sidebar .support-card-sidebar .subtitle { font-size: 0.66rem; }

    /* ---- Calendário superior reduzido ---- */
    .cal-wrapper { padding-top: 8px !important; padding-bottom: 4px !important; }
    .cal-header-desktop { padding: 4px 0 2px !important; }
    .month-selector-badge { padding: 5px 12px !important; font-size: 0.82rem !important; }
    .date-picker { padding: 2px 50px !important; gap: 4px !important; }
    .date-item {
        min-width: 36px !important;
        height: 42px !important;
        border-radius: 9px !important;
        padding: 3px !important;
    }
    .date-item span { font-size: 0.52rem !important; letter-spacing: 0.2px; line-height: 1.1; }
    .date-item strong { font-size: 0.8rem !important; font-weight: 800; line-height: 1.15; }
    .date-item.active { transform: translateY(-2px) scale(1.02) !important; }

    /* ---- Conteúdo do Início mais compacto ---- */
    .content-scroll { padding: 16px clamp(14px, 1.4vw, 22px) 34px !important; }
    #view-home.view.active { column-gap: clamp(16px, 1.5vw, 24px); }

    .home-header-hero { margin-bottom: 10px !important; }
    .header-hero-name,
    .header-hero-greet-word { font-size: 1.3rem !important; }
    /* foto de perfil removida do header (o perfil já é editável pelo menu lateral) */
    .header-hero-avatar { display: none !important; }

    .home-bento-hero { gap: 10px !important; margin-bottom: 12px !important; }
    .bento-ring-tile { padding: 13px 14px !important; min-height: 112px !important; }
    .bento-ring-tile .hero-ring-wrap,
    .bento-ring-tile .hero-ring-svg { width: 72px !important; height: 72px !important; }
    .bento-ring-tile .hero-pct-val { font-size: 17px !important; }
    .bento-stat-tile { padding: 13px 14px !important; }
    .bento-tile-val { font-size: 1.65rem !important; }
    .bento-ring-done { font-size: 0.95rem !important; }

    .home-tools-title { font-size: 0.98rem !important; margin: 6px 0 8px !important; }

    /* lista de tarefas mais compacta */
    .home-tasks { padding: 13px 15px !important; border-radius: 16px; }
    .home-tasks-list { gap: 5px; }
    .home-task-item { padding: 8px 11px !important; gap: 10px; }
    .home-task-text { font-size: 0.85rem !important; }
    .home-task-chk { width: 20px !important; height: 20px !important; }

    /* Finanças: esconde o FAB próprio (preto) — o "+" global verde já cobre
       a ação de lançar transação, evitando dois botões "+" sobrepostos. */
    .zfs-fab { display: none !important; }

    /* Finanças mais compacto/minimalista no desktop */
    #financasViewContent .zff-hero { padding: 14px 20px 15px !important; }
    #financasViewContent .zff-balance-val { font-size: clamp(1.9rem, 3vw, 2.4rem) !important; line-height: 1 !important; }
    #financasViewContent .zff-balance-val .c { font-size: 1.1rem !important; }
    #financasViewContent .zff-stat { padding: 10px 13px !important; }
    #financasViewContent .zff-stat-val { font-size: 1.05rem !important; }
    #financasViewContent .zff-panel { padding: 13px !important; }
    #financasViewContent .zff-acc-card { padding: 10px 13px !important; }
    #financasViewContent .zff-item { padding: 7px 0 !important; }
    #financasViewContent .zff-item-ico { width: 30px !important; height: 30px !important; font-size: .75rem !important; }

    /* ---- Leo colado no canto inferior, gap pequeno e proporcional (lateral = inferior) ---- */
    #view-home > #leoHome.leo-home {
        right: 14px !important;
        bottom: 14px !important;
    }
}

/* ============================================================
   B1 — ROTINA (aba Hoje): visualização dos hábitos do usuário.
   Substitui a grade crua de hábitos. Vale p/ mobile e desktop.
   ============================================================ */
/* Os hábitos personalizados aparecem no #hojeRotina; a grade do Hoje mostra
   apenas os widgets especiais (ex.: Leitura Bíblica). */

.hoje-rotina {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 20px);
    padding: 16px 18px 18px;
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.22);
}
.rotina-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rotina-head-r { display: flex; align-items: center; gap: 10px; }
.rotina-count { font-size: 0.8rem; font-weight: 700; color: var(--text-sec); font-variant-numeric: tabular-nums; }
.rotina-manage {
    width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-sec); cursor: pointer; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.rotina-manage:hover { background: rgba(127, 127, 127, 0.08); color: var(--text-main); }

.rotina-list { display: flex; flex-direction: column; gap: 8px; }
.rotina-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px; border-radius: 14px;
    border: 1px solid var(--border-color); background: rgba(127, 127, 127, 0.035);
    transition: background .15s, opacity .15s;
}
.rotina-item.done { opacity: .62; }
.rotina-item.skipped { opacity: .5; }
.rotina-ico {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(90, 148, 0, .12); color: var(--green-deep, #3f6212); font-size: .95rem;
}
.rotina-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rotina-name { font-weight: 600; font-size: .95rem; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rotina-item.done .rotina-name { text-decoration: line-through; }
.rotina-skip-tag { font-size: .66rem; font-weight: 700; color: var(--text-sec); background: rgba(127, 127, 127, .14); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.rotina-streak { font-size: .74rem; font-weight: 700; color: #f59e0b; }
.rotina-check {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid rgba(127, 127, 127, 0.45); background: rgba(127, 127, 127, 0.08);
    color: var(--text-sec);
    cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .8rem; transition: all .15s;
}
/* dica de check sempre visível (não fica "apagado"/vazio); some quando concluído vira sólido */
.rotina-check i { opacity: .4; transition: opacity .15s; }
.rotina-check:hover { border-color: var(--green-deep, #3f6212); background: rgba(132, 204, 22, 0.14); color: var(--green-deep, #3f6212); }
.rotina-check:hover i { opacity: .9; }
.rotina-check.checked { background: var(--green-lime, #84cc16); border-color: var(--green-lime, #84cc16); color: #fff; }
.rotina-check.checked i { opacity: 1; }
.rotina-del {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
    border: none; background: transparent; color: var(--text-sec); cursor: pointer;
    opacity: 0.5; font-size: .82rem; display: inline-flex; align-items: center; justify-content: center; transition: all .15s;
}
.rotina-del:hover { opacity: 1; color: #ef4444; background: rgba(239, 68, 68, 0.10); }
.rotina-counter { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rotina-counter button {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-color);
    background: transparent; color: var(--text-main); cursor: pointer; font-size: .72rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.rotina-counter span { min-width: 38px; text-align: center; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.rotina-add {
    margin-top: 12px; width: 100%; padding: 11px; border-radius: 12px;
    border: 1px dashed var(--border-color); background: transparent; color: var(--text-sec);
    font-weight: 600; font-size: .88rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .15s;
}
.rotina-add:hover { background: rgba(127, 127, 127, 0.06); color: var(--text-main); }
.rotina-empty { text-align: center; padding: 30px 16px; }
.rotina-empty-ico { font-size: 2rem; color: var(--green-lime, #84cc16); margin-bottom: 12px; }
.rotina-empty h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--text-main); }
.rotina-empty p { font-size: .9rem; color: var(--text-sec); margin: 0 auto 16px; max-width: 360px; line-height: 1.5; }
.rotina-empty-cta { display: inline-flex; align-items: center; gap: 8px; }

.bible-books-list::-webkit-scrollbar { display: none; }
.bible-books-list { scrollbar-width: none; -ms-overflow-style: none; }

.hoje-rotina { margin-bottom: 30px !important; }

.hoje-help-widgets-top {
    grid-column: 1 / -1;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.help-card-notif.solo, .help-card-install.solo {
    grid-column: 1 / -1 !important;
}

/* Fix for profile save button in dark mode */
body.dark-mode #btnSaveProfile {
    background: var(--green-lime) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* Banner de Notificações Bloqueadas */
.blocked-notif-banner {
    margin: 0 0 24px 0;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 16px;
    color: #ef4444;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
    line-height: 1.4;
    cursor: pointer;
}

.blocked-notif-banner i.fa-bell-slash {
    font-size: 1.25rem;
    margin-top: 2px;
}

.blocked-notif-banner > div {
    flex-grow: 1;
}

.blocked-notif-banner strong {
    font-weight: 800;
    margin-right: 6px;
}

.notif-banner-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.notif-banner-close:hover {
    opacity: 1;
}

body.dark-mode .blocked-notif-banner {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

@media (min-width: 1025px) {
    body[data-active-view="home"] .blocked-notif-banner {
        /* Restringe a largura no desktop APENAS na tela Início para alinhar com o painel central e não sobrepor o pomodoro */
        width: calc(100% - var(--leo-w) - clamp(16px, 1.5vw, 24px));
        margin-right: 0;
    }
}