/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #F9F8F6;
    color: #333F38;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem;
    padding-bottom: 3rem;
}

/* Header */
.header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinha os botões pelo topo do texto */
    margin-bottom: 2rem;
    gap: 2rem; /* Garante que o texto não colou nos botões em telas menores */
}

.apresentacao {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Espaço entre o título h1 e o parágrafo */
}

.app-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: #333F38;
    letter-spacing: -0.02em;
    margin: 0; /* Remove margens padrões do h1 */
}

.app-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #6E7A73; /* Tom de cinza agradável para leitura */
    margin: 0; /* Remove margens padrões do p */
}

.header-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0; /* Impede que os botões esmaguem ou diminuam de tamanho */
    margin-top: 0.25rem; /* Ajuste fino para alinhar visualmente com o primeiro h1 */
}

.icon-btn {
    background: white;
    border: 1px solid #E8E6E1;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: #6E7A73;
    transition: all 0.3s ease;
}

.icon-btn:hover {
    background: #F9F8F6;
    transform: rotate(15deg);
}

.settings-btn:hover {
    transform: rotate(45deg);
}

/* Welcome Modal */
.welcome-content {
    max-width: 600px;
    text-align: center;
}

.welcome-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 300;
    color: #333F38;
    margin-bottom: 1rem;
}

.welcome-description {
    color: #6E7A73;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* Addiction Banner */
.addiction-banner {
    background: linear-gradient(135deg, rgba(139, 168, 136, 0.1) 0%, rgba(139, 168, 136, 0.05) 100%);
    border: 2px solid #8BA888;
    border-radius: 1.5rem;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #333F38;
}

.banner-content i {
    font-size: 1.5rem;
    color: #8BA888;
}

.banner-change {
    background: white;
    border: 1px solid #E8E6E1;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6E7A73;
    transition: all 0.3s ease;
}

.banner-change:hover {
    background: #8BA888;
    color: white;
}

/* Hero Section */
.hero-section {
    margin-bottom: 2rem;
}

.counter-card {
    background: white;
    border-radius: 2rem;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(51, 63, 56, 0.04);
    border: 1px solid rgba(232, 230, 225, 0.5);
    margin-bottom: 1.5rem;
}

.counter-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #6E7A73;
    margin-bottom: 1rem;
}

.counter-value {
    font-family: 'Outfit', sans-serif;
    font-size: 5rem;
    font-weight: 300;
    color: #8BA888;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.counter-subtitle {
    font-size: 1rem;
    color: #6E7A73;
    font-weight: 500;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-item {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(51, 63, 56, 0.03);
    border: 1px solid rgba(232, 230, 225, 0.5);
}

.stat-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
    color: #333F38;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.75rem;
    color: #6E7A73;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Quote Section */
.quote-section {
    background: linear-gradient(135deg, #8BA888 0%, #769373 100%);
    border-radius: 2rem;
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.quote-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.quote-icon {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 1rem;
    display: block;
}

.quote-text {
    font-size: 1.1rem;
    color: white;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

/* Tip Section */
.tip-section {
    background: linear-gradient(135deg, rgba(217, 138, 127, 0.1) 0%, rgba(217, 138, 127, 0.05) 100%);
    border-radius: 2rem;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(217, 138, 127, 0.2);
}

.tip-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.tip-header i {
    font-size: 1.75rem;
    color: #D98A7F;
}

.tip-header h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333F38;
}

.tip-text {
    color: #333F38;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.btn-link {
    background: none;
    border: none;
    color: #D98A7F;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.btn-link:hover {
    gap: 0.75rem;
}

/* Action Section */
.action-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn {
    border: none;
    border-radius: 2rem;
    padding: 1rem 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn i {
    font-size: 1.25rem;
}

.btn-primary {
    background: #8BA888;
    color: white;
}

.btn-primary:hover {
    background: #769373;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 168, 136, 0.3);
}

.btn-secondary {
    background: white;
    color: #D98A7F;
    border: 2px solid #D98A7F;
}

.btn-secondary:hover {
    background: #D98A7F;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(217, 138, 127, 0.3);
}

.btn-small {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    margin-top: 1rem;
    background: #8BA888;
    color: white;
}

.btn-small:hover {
    background: #769373;
}

.btn-large {
    padding: 1.25rem 2rem;
    font-size: 1.05rem;
    width: 100%;
    margin-top: 1rem;
}

.btn-danger {
    background: #D98A7F;
    color: white;
    width: 100%;
}

.btn-danger:hover {
    background: #c67166;
}

/* Journal Section */
.journal-section,
.calendar-section,
.history-section {
    margin-bottom: 2rem;
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #333F38;
    margin-bottom: 1rem;
}

.journal-card {
    background: white;
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(51, 63, 56, 0.04);
    border: 1px solid rgba(232, 230, 225, 0.5);
}

#journalInput {
    width: 100%;
    border: 2px solid #E8E6E1;
    border-radius: 1.5rem;
    padding: 1rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    color: #333F38;
    background: #F9F8F6;
    resize: vertical;
    transition: all 0.3s ease;
}

#journalInput:focus {
    outline: none;
    border-color: #8BA888;
    background: white;
    box-shadow: 0 0 0 4px rgba(139, 168, 136, 0.1);
}

/* Calendar Grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    touch-action: pan-y;
}

.calendar-day {
    aspect-ratio: 1;
    border: none;
    font-family: inherit;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    font-size: 0.75rem;
    font-weight: 600;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.calendar-day:hover {
    transform: scale(1.1);
}

.day-clean {
    background: #8BA888;
    color: white;
}

.day-stumble {
    background: #D98A7F;
    color: white;
}

.day-empty {
    background: #E8E6E1;
    color: #6E7A73;
}

.calendar-legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.legend-clean {
    background: #8BA888;
}

.legend-stumble {
    background: #D98A7F;
}

.legend-empty {
    background: #E8E6E1;
}

.legend-text {
    font-size: 0.875rem;
    color: #6E7A73;
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    background: white;
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(51, 63, 56, 0.03);
    border: 1px solid rgba(232, 230, 225, 0.5);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.history-date {
    font-weight: 600;
    color: #333F38;
}

.history-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-clean {
    background: rgba(139, 168, 136, 0.15);
    color: #8BA888;
}

.badge-stumble {
    background: rgba(217, 138, 127, 0.15);
    color: #D98A7F;
}

.history-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #6E7A73;
    font-size: 0.95rem;
    line-height: 1.6;
}

.history-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6E7A73;
}

/* Tips Content */
.tips-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tip-category {
    background: #F9F8F6;
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #E8E6E1;
}

.tip-category h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #333F38;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tip-category h3 i {
    color: #8BA888;
}

.tip-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tip-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.tip-item i {
    color: #8BA888;
    font-size: 1.25rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.tip-item p {
    color: #6E7A73;
    line-height: 1.6;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 63, 56, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: 2rem;
    padding: 2.5rem;
    max-width: 500px;
    width: 100%;
    position: relative;
    animation: slideUp 0.3s ease;
    box-shadow: 0 20px 60px rgba(51, 63, 56, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-large {
    max-width: 700px;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #F9F8F6;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
    color: #6E7A73;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close:hover {
    background: #E8E6E1;
    transform: rotate(90deg);
}

.modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: #333F38;
    margin-bottom: 0.5rem;
}

.modal-description {
    color: #6E7A73;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.modal-celebration {
    text-align: center;
}

.celebration-icon {
    font-size: 4rem;
    color: #8BA888;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #333F38;
    margin-bottom: 0.5rem;
}

.form-select,
.form-input,
.form-group textarea {
    width: 100%;
    border: 2px solid #E8E6E1;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    color: #333F38;
    background: #F9F8F6;
    transition: all 0.3s ease;
}

.form-select:focus,
.form-input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #8BA888;
    background: white;
    box-shadow: 0 0 0 4px rgba(139, 168, 136, 0.1);
}

.form-group textarea {
    resize: vertical;
}

.settings-section {
    padding-top: 1rem;
    margin-bottom: 2rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #333F38;
    margin-bottom: 1rem;
}

.settings-info {
    background: #F9F8F6;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    color: #333F38;
    font-weight: 500;
}

.settings-warning {
    text-align: center;
    color: #D98A7F;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333F38;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 12px 40px rgba(51, 63, 56, 0.3);
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s ease;
}

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

.toast-icon {
    font-size: 1.5rem;
}

.toast-message {
    font-weight: 500;
}

/* Responsive */
@media (max-width: 640px) {
    .header{
    flex-direction: column-reverse;
    }
    .app-container {
        padding: 1rem;
    }

    .app-title {
        font-size: 1.5rem;
    }

    .counter-value {
        font-size: 4rem;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .action-section {
        grid-template-columns: 1fr;
    }

    .calendar-grid,
    .calendar-weekdays {
        gap: 0.35rem;
    }

    .modal-content {
        padding: 2rem 1.5rem;
    }

    .welcome-title {
        font-size: 2rem;
    }
}

@media (max-width: 400px) {
    .counter-value {
        font-size: 3rem;
    }

    .calendar-grid,
    .calendar-weekdays {
        gap: 0.25rem;
    }

    .calendar-day {
        font-size: 0.7rem;
    }
}


/* ---------- Acessibilidade e foco ---------- */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid #5E7F5B;
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

/* ---------- Calendário ---------- */
.day-mark {
    font-size: 0.6rem;
    font-weight: 700;
}

.calendar-day.day-disabled {
    opacity: 0.4;
    cursor: default;
}

.calendar-day.day-disabled:hover {
    transform: none;
}

/* ---------- Dicas (antes usavam variáveis CSS que não existiam) ---------- */
.tips-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tip-card {
    background-color: white;
    padding: 1.25rem;
    border-radius: 12px;
    border-left: 4px solid #8BA888;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 4px 16px rgba(51, 63, 56, 0.05);
}

.tip-card i {
    color: #8BA888;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.tip-card p {
    margin: 0;
    color: #333F38;
    line-height: 1.5;
}

/* ---------- Caixa de ajuda ---------- */
.help-box {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #F1F4EF;
    border: 1px solid #DDE5D9;
    border-radius: 12px;
    font-size: 0.9rem;
    color: #333F38;
}

.help-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-box ul {
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.help-note {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: #6E7A73;
}

/* ---------- Histórico, privacidade, modais e configurações ---------- */
.btn-delete-entry {
    background: none;
    border: none;
    color: #B94A3E;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
}

.privacy-eye-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 1.2rem;
}

.modal-small {
    max-width: 400px;
    text-align: center;
}

.day-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.settings-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* ---------- Calendário mensal ---------- */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.calendar-nav-center {
    text-align: center;
    flex: 1;
}

.calendar-month {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333F38;
}

.calendar-summary {
    font-size: 0.8rem;
    color: #6E7A73;
}

.calendar-nav-btn {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #E8E6E1;
    background: white;
    color: #333F38;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.calendar-nav-btn:hover:not(:disabled) {
    background: #F1F4EF;
    transform: scale(1.05);
}

.calendar-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6E7A73;
}

.calendar-blank {
    aspect-ratio: 1;
}

.calendar-day.day-today {
    outline: 2px solid #333F38;
    outline-offset: 2px;
}

.calendar-today-btn {
    display: block;
    margin: 0 auto 1rem;
}

/* Mobile app shell — desktop retains the original multi-section view */
.mobile-eyebrow { font-size: .68rem; font-weight: 800; letter-spacing: .16em; color: #789476; margin-bottom: 1rem; }
.eyebrow-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #D98A7F; vertical-align: middle; margin: 0 .45rem; }
.bottom-nav { display: none; }
.app-tab-content[hidden] { display: none !important; }
.tab-hidden { display: none !important; }
@media (max-width: 700px) {
  body { background: #F8F8F4; }
  .app-container { padding: max(24px, env(safe-area-inset-top)) 18px calc(112px + env(safe-area-inset-bottom)); max-width: 560px; }
  .header { gap: 12px; margin-bottom: 22px; align-items: start; }
  .app-title { font-size: 2.25rem; font-weight: 500; line-height: 1.1; }
  .app-description { font-size: .85rem; margin-top: 10px; line-height: 1.55; }
  .app-rules { display: none; }
  .compact-header .app-description { display: none; }
  .icon-btn { width: 42px; height: 42px; }
  .header-actions { gap: 6px; }
  .counter-card { padding: 2.4rem 1rem; border-radius: 26px; background: linear-gradient(155deg, #fff 30%, #F2F7F0); }
  .counter-value { font-size: clamp(5rem, 23vw, 7rem); font-weight: 500; letter-spacing: -.07em; }
  .counter-label { letter-spacing: .16em; font-size: .7rem; }
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-item { padding: 1.3rem .7rem; border-radius: 20px; }
  .stat-value { font-size: 1.7rem; }
  .stat-label { font-size: .67rem; }
  .quote-section, .tip-section, .journal-card { border-radius: 24px; padding: 1.5rem; }
  .action-section { gap: 10px; }
  .action-section .btn { padding: 1rem .5rem; font-size: .8rem; border-radius: 18px; min-height: 66px; flex-direction: column; gap: 5px; }
  .action-section .btn i { font-size: 1.35rem; }
  .section-title { font-size: 1.55rem; font-weight: 600; }
  .calendar-grid { gap: 4px; }
  .calendar-day { font-size: .7rem; border-radius: 10px; }
  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: rgba(255,255,255,.96); backdrop-filter: blur(18px); border-top: 1px solid #E8EDE6; justify-content: space-around; padding: 9px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 28px rgba(45,70,48,.05); }
  .nav-item { border: 0; background: transparent; color: #8C9B8D; font-family: inherit; font-size: .68rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 6px 7px; border-radius: 14px; cursor: pointer; }
  .nav-item i { font-size: 1.55rem; }
  .nav-item.active { color: #527C55; background: #EFF6ED; }
  .modal-content { max-height: 88dvh; overflow-y: auto; padding: 1.5rem; border-radius: 24px; }
}

/* Versão 2: onboarding e navegação desktop */
.header-actions { display: none !important; }
.desktop-sidebar { display: none; }
.onboarding-kicker { font-size: .72rem; letter-spacing: .13em; font-weight: 800; color: #739372; margin-bottom: 1rem; }
.onboarding-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin: 1.5rem 0; text-align: left; }
.onboarding-features span { padding: .9rem; border-radius: 14px; background: #f2f6ef; font-size: .8rem; display: flex; align-items: center; gap: .55rem; }
.onboarding-features i { color: #769373; font-size: 1.3rem; flex-shrink: 0; }
.onboarding-intro { font-weight: 650; margin: 1.3rem 0; text-align: left; }
.onboarding-privacy { color: #6E7A73; font-size: .78rem; margin-top: 1rem; }
.onboarding-content { max-width: 610px; text-align: left; }
.onboarding-content .welcome-title { font-size: clamp(1.9rem,5vw,2.6rem); }
.onboarding-content .welcome-description { font-size: .95rem; line-height: 1.6; }
.onboarding-content textarea.form-input { resize: vertical; min-height: 78px; }
#welcomeModal { overflow-y: auto; align-items: flex-start; padding: max(24px,4vh) 16px; }
#welcomeModal .modal-content { max-height: 92dvh; overflow-y: auto; }
@media (min-width: 701px) {
  .desktop-sidebar { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 252px; background: #fff; border-right: 1px solid #e8ede6; padding: 32px 18px; z-index: 400; }
  .sidebar-brand { display: flex; gap: 12px; align-items: center; padding: 8px 10px 36px; color: #333f38; }
  .sidebar-brand > i { font-size: 2rem; color: #789476; }
  .sidebar-brand strong, .sidebar-brand small { display: block; }
  .sidebar-brand strong { font-family: Outfit,sans-serif; font-size: 1.3rem; }
  .sidebar-brand small { color: #789476; font-size: .75rem; }
  .sidebar-links { display: flex; flex-direction: column; gap: 8px; }
  .sidebar-links .nav-item { display: flex; align-items: center; gap: 13px; border: none; background: transparent; color: #6e7a73; padding: 14px 15px; border-radius: 14px; font: 600 .95rem Manrope,sans-serif; text-align: left; cursor: pointer; }
  .sidebar-links .nav-item i { font-size: 1.35rem; }
  .sidebar-links .nav-item:hover, .sidebar-links .nav-item.active { background: #edf5eb; color: #527c55; }
  .sidebar-foot { margin-top: auto; color: #8c9b8d; font-size: .78rem; padding: 12px; }
  .app-container { margin-left: max(252px,calc((100vw - 800px + 252px)/2)); margin-right: auto; max-width: 800px; padding: 38px 32px; }
  .header { margin-bottom: 1.5rem; }
  .app-title { font-weight: 500; }
}
@media (max-width: 700px) {
  .onboarding-features { grid-template-columns: 1fr 1fr; }
  #welcomeModal .modal-content { padding: 1.5rem; }
}


/* METANOIA | Design system v3 */
:root { --forest:#122B23; --forest-2:#234A38; --sage:#8FAE91; --mint:#E8F2E8; --surface:#FFFFFF; --canvas:#F6F8F5; --ink:#20352B; --muted:#738579; --line:#E4EBE3; }
body { background:var(--canvas); color:var(--ink); }
.app-title { color:var(--forest); font-weight:650; letter-spacing:-.055em; }
.brand-period { color:#7EAB78; }
.brand-eyebrow { font-size:.69rem; font-weight:800; letter-spacing:.18em; color:#6D9275; margin-bottom:10px; }
.brand-eyebrow span { color:#D8A38C; margin:0 7px; }
.header { display:block; margin-bottom:2rem; }
.header .apresentacao { gap:0; }
.app-description { color:var(--muted); }
.counter-card,.stat-item,.journal-card,.history-item { border:1px solid var(--line); box-shadow:0 12px 34px rgba(25,59,37,.045); }
.counter-card { background:radial-gradient(circle at 85% 0%,#E5F4E3,transparent 54%),#fff; }
.counter-value { color:#2F794B; font-weight:550; }
.stat-value { color:var(--forest); }
.btn-primary,.btn-small { background:var(--forest-2); }
.btn-primary:hover,.btn-small:hover { background:#356B4D; }
.btn-secondary { border-color:#9BB9A0; color:var(--forest-2); }
.btn-secondary:hover { background:var(--forest-2); color:#fff; }
.quote-section { background:linear-gradient(130deg,#173D2D,#397552); }
.addiction-banner { border-color:#B5CEB5; background:#EDF4EC; }
.sidebar-brand { padding-bottom:36px; }
.brand-logo { width:44px;height:44px;border-radius:13px;object-fit:cover; }
.onboarding-brand { display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.16em;color:var(--forest);margin-bottom:1.4rem; }
.onboarding-brand img { border-radius:14px; }
.onboarding-kicker { color:#658B6B; }
.onboarding-content { border:1px solid var(--line); }
.onboarding-features span { background:#EDF4ED; }
.btn,.icon-btn,.nav-item,.calendar-day { transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease; }
@media(hover:hover){ .stat-item:hover,.history-item:hover { transform:translateY(-3px);box-shadow:0 18px 38px rgba(25,59,37,.09); } .btn:hover { transform:translateY(-2px); } }
.reveal-item { opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal-item.revealed { opacity:1;transform:translateY(0); }
.toast { background:#173A2B !important;color:white !important;display:flex;gap:12px;align-items:center;overflow:hidden;border-radius:18px !important;box-shadow:0 16px 45px rgba(17,46,30,.25) !important; }
.toast .toast-icon { color:#A3E3A0 !important;flex-shrink:0; }
.toast-copy { display:flex;flex-direction:column;gap:3px;min-width:0; }
.toast-copy strong { font-size:.9rem; }
.toast-message { color:#E3EEE4 !important;font-size:.78rem; }
#toastClose { background:none;border:0;color:#D9E9DA;font-size:1.5rem;cursor:pointer;margin-left:auto;padding:5px; }
.toast-timer { position:absolute;bottom:0;left:0;height:3px;width:100%;background:#A5DA9A;transform-origin:left; }
.toast.show .toast-timer { animation:toastProgress 4.4s linear forwards; }
.toast-warning { background:#50342E !important; }
.toast-warning .toast-timer { background:#F4B39E; }
@keyframes toastProgress { from { transform:scaleX(1); } to { transform:scaleX(0); } }
@media(min-width:701px){
.desktop-sidebar { background:linear-gradient(180deg,#122B23,#10271F);border:0; }
.sidebar-brand strong { color:white;letter-spacing:-.03em; }
.sidebar-brand small { color:#A8C7AD; }
.sidebar-links .nav-item { color:#C1D3C5; }
.sidebar-links .nav-item.active { background:#315D41;color:white; }
.sidebar-links .nav-item:hover { background:#244634;color:white; }
.sidebar-foot { color:#AAC4AD !important; }
}
@media(max-width:700px){ .brand-eyebrow { font-size:.62rem; } .app-title { font-size:2.5rem; } .bottom-nav { border-color:var(--line); } .nav-item.active { background:var(--mint);color:var(--forest-2); } }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important; } .reveal-item { opacity:1;transform:none; } }

/* Metanoia premium dashboard — interface inspirada na referência */
@media(min-width:701px){.desktop-sidebar{width:236px;padding:26px 16px}.app-container{margin:0 0 0 236px;max-width:none;width:calc(100% - 236px);padding:30px clamp(20px,3vw,52px)}.sidebar-brand{padding:10px 8px 42px}.sidebar-foot{background:linear-gradient(145deg,#254c38,#142d24);border:1px solid #3a6349;border-radius:18px;padding:22px 14px!important;line-height:1.7}.sidebar-links .nav-item{padding:13px 14px}}
.header{margin-bottom:22px}.brand-eyebrow{margin-bottom:4px}.app-title{font-size:clamp(1.8rem,3vw,2.55rem);font-weight:750}.app-description{font-size:.9rem}.inspiration-banner{min-height:185px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#112c22 0%,#203b32 48%,#bdab8a 100%);border-radius:24px;margin-bottom:20px;display:flex;align-items:center;padding:32px clamp(22px,4vw,55px);box-shadow:0 14px 34px #17352918}.banner-copy{position:relative;z-index:2;max-width:470px}.banner-line{display:block;width:52px;height:3px;background:#a5df8b;border-radius:5px;margin-bottom:16px}.banner-copy h2{color:#fff;font:750 clamp(1.8rem,3.2vw,2.8rem) Outfit,sans-serif;letter-spacing:-.04em}.banner-copy em{color:#a3db83}.banner-copy p{color:#e4eae2;line-height:1.65;max-width:400px}.banner-landscape{position:absolute;inset:0;overflow:hidden;z-index:0;opacity:.72}.sunrise{position:absolute;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#f9d9a6a8,transparent 70%);right:15%;top:-80px}.mountain{position:absolute;bottom:-30px;right:-10%;width:75%;height:140px;clip-path:polygon(0 100%,16% 58%,31% 75%,48% 20%,64% 68%,79% 37%,100% 100%)}.mountain-back{background:#48645a;opacity:.6;transform:translateY(-22px) scale(1.1)}.mountain-front{background:#142a25}.hero-section{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:20px}.counter-card{display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:28px;padding:24px 28px;text-align:left;margin-bottom:0;background:#fff}.streak-ring{--progress:0%;width:176px;height:176px;border-radius:50%;background:conic-gradient(#348444 var(--progress),#e4f4dd var(--progress));padding:12px;display:grid;place-items:center;transition:background 1s}.streak-ring-inner{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.streak-ring-inner i{font-size:1.4rem;color:#348444}.ring-number{font:800 3.5rem Outfit,sans-serif;line-height:1.1;color:#122b23}.streak-ring-inner span{font-size:.8rem;font-weight:700}.streak-details h2{font:700 1.35rem Outfit,sans-serif;color:#172d21}.streak-details p{font-size:.83rem;color:#718177;margin:5px 0 12px}.streak-details .counter-label,.streak-details .counter-value,.streak-details .counter-subtitle{display:none}.stats-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.stat-item{padding:15px 12px}.stat-value{font-size:1.5rem}.stat-label{letter-spacing:0;font-size:.66rem}.home-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:20px}.preview-card{min-width:0;background:white;border:1px solid var(--line);border-radius:24px;padding:23px;box-shadow:0 12px 34px #193b250b}.preview-card:last-child{grid-column:span 2}.preview-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.preview-title h2{font:700 1.05rem Outfit,sans-serif;display:flex;align-items:center;gap:9px}.preview-title h2 i{color:#39814b;font-size:1.4rem}.preview-link{background:none;border:0;color:#337447;cursor:pointer;font-weight:700;font-size:.75rem;white-space:nowrap}.home-calendar-preview .calendar-grid{margin:0}.home-calendar-preview .calendar-day{font-size:.7rem;pointer-events:none}.home-calendar-preview .calendar-weekdays{font-size:.67rem}.home-calendar-preview .calendar-nav{margin-bottom:10px}.milestone-track{display:flex;justify-content:space-between;gap:5px;position:relative;margin:28px 0 18px}.milestone-step{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.68rem;color:#78857b;flex:1;text-align:center;position:relative}.milestone-step:before{content:'';height:3px;background:#e1e9df;position:absolute;top:15px;left:-50%;width:100%;z-index:0}.milestone-step:first-child:before{display:none}.milestone-step.done:before{background:#4b9551}.milestone-dot{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#e8eee8;color:#718075;font-size:1.1rem}.milestone-step.done .milestone-dot{background:#398a48;color:#fff}.milestone-note{background:#eef7ed;border-radius:14px;padding:12px;color:#356f40;font-size:.81rem}.home-journal-preview{padding:16px;border-radius:15px;background:#f3f7f1;color:#53675a;font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}.quote-section{padding:20px 24px}.quote-icon{display:none}.quote-text{font-size:.93rem}.app-tab-content[hidden]{display:none!important}@media(max-width:1050px) and (min-width:701px){.home-preview-grid{grid-template-columns:1fr}.preview-card:last-child{grid-column:auto}.counter-card{grid-template-columns:145px 1fr}.streak-ring{width:145px;height:145px}}@media(max-width:700px){.inspiration-banner{min-height:180px;padding:23px}.banner-copy{max-width:85%}.banner-copy p{font-size:.83rem}.counter-card{grid-template-columns:125px 1fr;gap:13px;padding:19px 14px;border-radius:23px}.streak-ring{width:122px;height:122px;padding:9px}.ring-number{font-size:2.7rem}.streak-ring-inner span{font-size:.65rem}.streak-details h2{font-size:1.08rem}.streak-details p{font-size:.76rem}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.home-preview-grid{grid-template-columns:1fr}.preview-card:last-child{grid-column:auto}.preview-card{padding:18px}.app-container{padding-bottom:110px}}@media(prefers-reduced-motion:no-preference){.preview-card,.counter-card,.inspiration-banner{animation:premiumEnter .55s both}@keyframes premiumEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}

/* Metanoia v5 — dashboard focused on milestones and reflection */
.addiction-banner{display:none!important}
.inspiration-banner{min-height:265px;background-image:linear-gradient(90deg,rgba(7,28,21,.94) 0%,rgba(10,34,26,.78) 37%,rgba(10,34,26,.12) 78%),url('icons/metanoia-banner.webp');background-position:center,center 55%;background-size:cover,cover;padding:40px clamp(26px,5vw,66px);transition:transform .3s ease,box-shadow .3s ease}
.inspiration-banner:hover{box-shadow:0 22px 45px #132f242c}
.inspiration-banner .banner-copy{max-width:480px}
.inspiration-banner .banner-copy h2{font-size:clamp(2rem,3.6vw,3.2rem)}
.home-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-preview-grid .preview-card:last-child{grid-column:auto;background:linear-gradient(145deg,#fff3f0,#ffe9e5);border-color:#efc6c0}
.home-preview-grid .preview-card:last-child .preview-title h2,.home-preview-grid .preview-card:last-child .preview-title h2 i{color:#8f3d3c}
.home-preview-grid .preview-card:last-child .preview-link{color:#963f3c}
.home-preview-grid .preview-card:last-child .home-journal-preview{background:#fffaf9;color:#633e3b;border:1px solid #f2d5d0;min-height:104px}
#logStumbleBtn{color:#b34d4a;border-color:#d88b86;background:#fff}
#logStumbleBtn:hover,#logStumbleBtn:focus-visible{color:white!important;border-color:#ba4c49!important;background:#ba4c49!important;box-shadow:0 10px 24px #ba4c4933!important}
.preview-card{transition:transform .3s ease,box-shadow .3s ease}
.preview-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px #193b2515}
.milestone-step.done .milestone-dot{animation:milestonePop .45s cubic-bezier(.2,.9,.2,1.2) both}
@keyframes milestonePop{from{transform:scale(.75);opacity:.6}to{transform:scale(1);opacity:1}}
.react-enhancement-note{font-size:.75rem;color:#427349;margin-top:8px}
@media(max-width:850px){.home-preview-grid{grid-template-columns:1fr}.inspiration-banner{min-height:225px}}
@media(max-width:700px){.inspiration-banner{min-height:220px;padding:26px;background-position:center,62% center}.banner-copy{max-width:82%}.inspiration-banner .banner-copy h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.milestone-step.done .milestone-dot{animation:none}.preview-card{transition:none}}

.metanoia-setting-toggle {display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;color:#254936;margin:12px 0;}
.metanoia-setting-toggle input {width:21px;height:21px;accent-color:#286544;flex-shrink:0;}

/* Metanoia v7 — carrossel motivacional */
.inspiration-banner{min-height:265px;background-image:linear-gradient(90deg,rgba(8,32,23,.92) 0%,rgba(8,32,23,.75) 38%,rgba(8,32,23,.10) 85%),url('icons/metanoia-banner.webp');background-size:cover;background-position:center 52%}
.inspiration-banner .banner-copy{max-width:580px;width:100%}
.motivation-controls{display:flex;align-items:center;gap:12px;margin-top:24px}
.motivation-controls>button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;width:32px;height:32px;border-radius:50%;font-size:22px;cursor:pointer;display:grid;place-items:center;line-height:1;transition:background .2s,transform .2s}
.motivation-controls>button:hover{background:rgba(255,255,255,.3);transform:scale(1.06)}
.motivation-controls button:focus-visible{outline:3px solid #b4f49b;outline-offset:3px}
.motivation-dots{display:flex;align-items:center;gap:7px}
.motivation-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#ffffff70;cursor:pointer;transition:width .25s,background .25s}
.motivation-dot.active{width:25px;border-radius:6px;background:#a3db83}
@media(max-width:700px){.inspiration-banner{min-height:255px;background-position:62% center}.inspiration-banner .banner-copy{max-width:94%}.banner-copy h2{font-size:clamp(1.7rem,7vw,2.4rem)}.motivation-controls{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.motivation-dot,.motivation-controls>button{transition:none}}

/* Histórico agrupado por dia — Metanoia v8 */
.history-list { gap: 1.65rem; }
.history-day-group { display: flex; flex-direction: column; gap: .85rem; }
.history-day-heading { display:flex; align-items:center; gap:.6rem; margin:0; color:#234a38; font-family:'Outfit',sans-serif; font-size:1.14rem; font-weight:600; }
.history-day-heading i { color:#6e9b79; font-size:1.2rem; }
.history-day-entries { display:flex; flex-direction:column; gap:.85rem; padding-left:1.05rem; border-left:2px solid #c9decc; }
.history-day-entries .history-item { margin:0; padding:1.2rem 1.5rem; }
.history-entry-label { display:flex; align-items:center; gap:.7rem; }
.history-entry-time { color:#84958a; font-size:.8rem; }
@media(max-width:600px){ .history-day-entries{padding-left:.65rem;} .history-day-entries .history-item{padding:1rem;} }