* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    transition: background-color 0.5s ease;
    min-height: 100vh;
    color: white;
    -webkit-text-size-adjust: 100%;
}

/* Evita scroll horizontal em dispositivos móveis (100vw no header pode causar sangria) */
html,
body {
    height: 100%;
    overflow: hidden;
}

/* Em telas menores, permitir scroll vertical do documento para evitar cortes */
@media (max-width: 820px), (max-height: 740px) {
    html,
    body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
}

/* Evita scroll do fundo quando um modal está aberto */
body.no-scroll {
    overflow: hidden;
}

/* Performance: backdrop-filter é caro; desliga durante modais */
body.modal-open .app-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Temas para diferentes modos */
/*
   Dark premium-like base: mantemos o body sempre escuro e usamos acentos na timer-section
   Em vez de trocar a cor de fundo global, agora só alteramos o gradiente interno do .timer-container e destaques.
*/
body.pomodoro-mode,
body.shortBreak-mode,
body.longBreak-mode {
    /* Fundo escuro inspirado na tela de planos */
    background: radial-gradient(1200px 600px at 50% -100px, #121826 10%, #0b0f19 60%), linear-gradient(180deg, #0b0f19, #111827);
    color: #e5e7eb;
}

/* ==== Brand (apenas cores, sem alterar medidas) ==== */
:root {
    --brand-gold: #f5c241;
    --brand-gold-hover: #e7b326;
    --brand-gold-border: rgba(245, 194, 65, 0.55);
    --brand-gold-shadow: 0 0 0 1px rgba(245, 194, 65, 0.35), 0 4px 14px -2px rgba(245, 194, 65, 0.25);
    --modal-bg: #141b24;
    --modal-bg-alt: #1b242f;
    --modal-border: #1f2a36;
    --modal-text: #d8e0e7;
    --modal-text-soft: #93a2b2;
    --color-premium-accent: #f3bc17;
    --color-premium-accent-hover: #ffd556;
    --color-admin-accent: #f3bc17;
    /* reutilizando por ora, facilita mudança futura */
    --fade-duration: 160ms;
    /* legado */
    /* Animações configuráveis */
    --anim-menu-duration: 260ms;
    --anim-modal-duration: 320ms;
    --anim-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-scale-initial: 0.985;
    /* Altura mínima de um item de tarefa para estabilizar layout da lista */
    --task-item-min-h: 56px;
    /* Altura mínima do timer (desktop) para nivelar colunas */
    --timer-min-h: 640px;
    /* reduz levemente para caber sem scroll e aproximar do tamanho do resumo */
    /* Paleta principal do timer (amarelo, azul, branco e cinza) */
    --timer-panel-bg: rgba(17, 24, 39, 0.88);
    --timer-ring-bg: rgba(255, 255, 255, 0.12);
    --timer-focus-primary: #f5c241;
    --timer-focus-shadow: drop-shadow(0 0 18px rgba(245, 194, 65, 0.35));
    --timer-short-primary: #4fa4ff;
    --timer-short-shadow: drop-shadow(0 0 18px rgba(79, 164, 255, 0.3));
    --timer-long-primary: #f8fafc;
    --timer-long-shadow: drop-shadow(0 0 18px rgba(248, 250, 252, 0.35));
    --timer-long-text: #0f172a;
    /* Alturas de layout */
    --footer-h: 46px;
}

/* PWA install button */
.install-btn {
    position: relative;
}

/* Modal: install help */
.install-dialog {
    max-width: 560px;
}

.install-device {
    font-size: 12px;
    color: #e2e8f0;
    font-weight: 900;
    letter-spacing: .2px;
    margin-bottom: 6px;
}

.install-status {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.install-steps {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 12px;
    padding: 12px;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.45;
}

.install-steps .muted {
    color: #94a3b8;
}

.install-steps ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.install-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

@media (max-width: 520px) {
    .install-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Settings modal - somente cores */
.settings-modal-content {
    background: var(--modal-bg);
    color: var(--modal-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--modal-border);
}

.settings-header h2 {
    color: var(--modal-text);
}

/* Ícone amarelo nos títulos dos modais */
.settings-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-header h2 i {
    color: var(--brand-gold);
}

/* Todos os ícones dentro dos modais (inclui tabs/headers/conteúdo) */
.settings-modal-content i {
    color: var(--brand-gold);
}

/* Exceção: em ABAS (tabs) dos modais, o ícone segue a cor do texto */
.settings-modal-content .friends-tabs i,
.settings-modal-content .reports-tabs i,
.settings-modal-content .account-tabs-nav i {
    color: currentColor;
}

/* Modal simples (Add Task) */
.modal-content i {
    color: var(--brand-gold);
}

/* Título do modal simples (ex.: Add Task) */
.modal-content h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-content h3 i {
    color: var(--brand-gold);
}

.settings-section h3 {
    color: var(--modal-text-soft);
}

.settings-divider {
    background: #1d2732;
}

.settings-group>label {
    color: var(--modal-text);
}

.time-input label {
    color: var(--modal-text-soft);
}

.time-input input {
    background: var(--modal-bg-alt);
    border-color: #2a3642;
    color: var(--modal-text);
}

.time-input input:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

.settings-toggle label {
    color: var(--modal-text);
}

.toggle {
    background: #233140;
    border: 1px solid #2f4254;
}

.toggle:checked {
    background: rgba(245, 194, 65, 0.45);
    border-color: var(--brand-gold-border);
}

.toggle::before {
    background: #fff;
}

.settings-group input[type="number"] {
    background: var(--modal-bg-alt);
    border-color: #2a3642;
    color: var(--modal-text);
}

.settings-group input[type="number"]:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

.settings-group select {
    background: var(--modal-bg-alt);
    border-color: #2a3642;
    color: var(--modal-text);
}

.settings-group select:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

.volume-control span {
    color: var(--modal-text-soft);
}

.settings-footer {
    border-top: 1px solid #1d2732;
}

.ok-btn {
    background: var(--brand-gold);
    color: #1a1f27;
    border: 1px solid var(--brand-gold-border);
    box-shadow: var(--brand-gold-shadow);
}

.ok-btn:hover {
    background: var(--brand-gold-hover);
}

.ok-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    filter: saturate(0.8);
}

/* Loading spinner no botão Salvar do modal Conta (e outros ok-btn) */
.ok-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.9;
    color: transparent !important;
}

.ok-btn.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #1a1f27;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: spin .8s linear infinite;
}

/* Overlay global (ex.: logout) */
.global-loading-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(1px);
    z-index: 2147483647;
}

.global-loading-overlay.is-open{
    display: flex;
}

.global-loading-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 18px;
    border-radius: 14px;
    background: rgba(17, 24, 39, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 18px 46px rgba(0,0,0,0.45);
    color: rgba(226, 232, 240, 0.92);
    min-width: 210px;
}

.global-loading-spinner{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 3px solid rgba(245, 194, 65, 0.28);
    border-top-color: rgba(245, 194, 65, 0.95);
    border-right-color: rgba(245, 194, 65, 0.95);
    animation: spin .8s linear infinite;
}

.global-loading-text{
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

@media (prefers-reduced-motion: reduce){
    .global-loading-spinner{ animation: none; }
}

/* Task modal */
.modal-content {
    background: var(--modal-bg);
    color: var(--modal-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--modal-border);
}

#taskInput {
    background: var(--modal-bg-alt);
    border-color: #2a3642;
    color: var(--modal-text);
}

#taskInput:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

#taskDescInput:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

.est-pomodoros label {
    color: var(--modal-text-soft);
}

.pomodoro-counter {
    background: var(--modal-bg-alt);
    border: 1px solid #2a3642;
}

.counter-btn {
    color: var(--modal-text-soft);
}

.counter-btn:hover {
    background: #233140;
    color: var(--modal-text);
}

/* Botões principais (cancel/save) - só cores */
.cancel-btn {
    background: #1f2a36;
    color: var(--modal-text-soft);
}

.cancel-btn:hover {
    background: #253241;
    color: var(--modal-text);
}

.save-btn {
    background: var(--brand-gold);
    color: #1a1f27;
    border: 1px solid var(--brand-gold-border);
    box-shadow: var(--brand-gold-shadow);
}

.save-btn:hover {
    background: var(--brand-gold-hover);
}

body.shortBreak-mode .save-btn,
body.longBreak-mode .save-btn {
    background: var(--brand-gold);
}

body.shortBreak-mode .save-btn:hover,
body.longBreak-mode .save-btn:hover {
    background: var(--brand-gold-hover);
}


/* Paleta de acentos dedicada (amarelo, azul, branco) */

/* Pequena borda luminosa para destacar container */
.timer-container {
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.container {
    max-width: 1920px;
    /* aumenta a largura útil da app-main */
    width: 99vw;
    /* ocupa mais da viewport, menos bordas laterais */
    margin: 0 auto;
    padding: 6px 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    /* sobe levemente o conteúdo principal */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Timer Settings Popover ===== */
.timer-popover {
    position: fixed;
    z-index: 1000;
    background: var(--modal-bg);
    color: var(--modal-text);
    border: 1px solid var(--modal-border);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04);
    width: 560px;
    max-width: calc(100vw - 24px);
    padding: 14px 14px 12px;
    display: none;
}

.timer-popover[hidden] {
    display: none;
}

.timer-popover.show {
    display: block;
}

.timer-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 10px;
    border-bottom: 1px solid #1d2732;
}

.timer-popover-header h3 {
    font-size: 16px;
    font-weight: 900;
    color: var(--modal-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.timer-popover-body {
    padding: 10px 4px;
}

.timer-popover-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #1d2732;
}

.timer-popover .time-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 16px;
}

.timer-popover .time-input label {
    color: var(--modal-text-soft);
    font-size: 12px;
    margin-bottom: 6px;
    display: block;
}

.timer-popover .settings-group>label {
    color: var(--modal-text);
    display: block;
    margin-bottom: 6px;
}

.timer-popover .num-input {
    background: var(--modal-bg-alt);
    border: 1px solid #2a3642;
    color: var(--modal-text);
    border-radius: 8px;
    padding: 8px 10px;
    height: 36px;
}

.timer-popover .num-input:focus {
    outline: none;
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

.timer-popover .num-stepper {
    right: 8px;
}

.timer-popover .num-stepper button {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
}

.timer-popover .num-stepper button:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ===== Timer Config Modal (presets + personalizado) ===== */
.timer-config-content {
    /* Tamanho base (desktop) + limites por viewport (responsivo) */
    width: 840px;
    max-width: calc(100vw - 48px);
    height: min(900px, calc(100vh - 48px));
}

.timer-config-presets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.timer-preset-option {
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.timer-preset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.timer-preset-option:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 194, 65, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.timer-preset-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.timer-preset-title {
    font-weight: 900;
    color: var(--modal-text);
    letter-spacing: 0.2px;
}

.timer-preset-expand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    color: var(--modal-text-soft);
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

.timer-preset-expand:hover {
    border-color: rgba(245, 194, 65, 0.30);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.timer-preset-chevron {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform .14s ease;
}

.timer-preset-option.is-expanded .timer-preset-chevron {
    transform: rotate(180deg);
}

.timer-preset-details {
    margin-top: 10px;
    color: var(--modal-text-soft);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
}

.timer-preset-detail + .timer-preset-detail {
    margin-top: 2px;
}

.timer-preset-sub {
    color: var(--modal-text-soft);
    font-weight: 700;
    font-size: 12px;
    margin-left: auto;
}

.timer-preset-option:has(input[type="radio"]:checked) {
    border-color: rgba(245, 194, 65, 0.55);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.16);
    background: rgba(245, 194, 65, 0.06);
}

.timer-preset-option.is-checked {
    border-color: rgba(245, 194, 65, 0.55);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.16);
    background: rgba(245, 194, 65, 0.06);
}

.timer-custom-section {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timer-custom-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
}

.timer-interval-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 0 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
}

.timer-interval-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* Intervalo da Pausa Longa: inverte lados (título à esquerda, valor à direita) */
#timerIntervalRow .timer-custom-accordion-title {
    margin-left: 0;
    order: 1;
}

#timerIntervalRow .timer-custom-accordion-left {
    order: 2;
}

.timer-custom-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* (removido) destaque pesado do intervalo */

.timer-mode-title {
    font-weight: 900;
    color: var(--modal-text);
    font-size: 13px;
}

.timer-mode-meta {
    color: var(--modal-text-soft);
    font-weight: 800;
    font-size: 12px;
}

.timer-custom-row input[type="range"] {
    width: 100%;
}

/* Accordion do Personalizado */
.timer-custom-accordion {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.timer-custom-accordion:last-of-type {
    border-bottom: 0;
}

.timer-custom-accordion-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--modal-text);
    cursor: pointer;
    text-align: left;
}

.timer-custom-accordion-head:focus {
    outline: none;
}

.timer-custom-accordion-left {
    color: var(--modal-text-soft);
    font-weight: 800;
    font-size: 14px;
    min-width: 88px;
}

.timer-custom-accordion-value {
    font-weight: 900;
    color: var(--modal-text-soft);
}

.timer-custom-accordion-title {
    margin-left: auto;
    font-weight: 900;
    color: var(--modal-text);
}

.timer-custom-accordion-chevron {
    color: var(--modal-text-soft);
    transition: transform .14s ease;
}

.timer-custom-accordion.is-expanded .timer-custom-accordion-chevron {
    transform: rotate(180deg);
}

.timer-custom-accordion-body {
    padding: 6px 0 10px;
}

.timer-custom-accordion-body input[type="range"] {
    width: 100%;
}

.timer-custom-hint {
    margin-top: 10px;
    color: var(--modal-text-soft);
    font-size: 12px;
    font-weight: 700;
}

.timer-config-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timer-config-actions .btn {
    min-width: 120px;
}

@media (max-width: 520px) {
    .timer-custom-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    /* sobe a app-main aproximando do centro vertical */
    /* Cola a barra no topo da janela (compensa o padding-top do .container) */
    margin-top: -10px;
    /* padding interno do header vira o espaçamento primário da barra */
    padding: 10px 16px;
    /* Full-bleed: barra fora a fora, independente da largura do .container */
    position: relative;
    /* Garante que dropdowns do header (notificações/conta) sobreponham o conteúdo abaixo */
    z-index: 50;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Gap grande fazia o conteúdo "flutuar" e impedia encostar nas extremidades */
    gap: 12px;
    /* was 200px */
    /* Fundo bem transparente com efeito glass, sem perder o dark base */
    background: rgba(255, 255, 255, 0.04);
    /* Apenas borda inferior (sem topo/laterais) */
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

/* Novo logo como imagem (navbar) */
.logo-img {
    height: 40px;
    width: auto;
    display: block;
    filter: none;
}

/* Use quando o logo precisar ser forçado para branco (ex.: logo preto/transparente em fundo escuro) */
.logo-img.logo-img--invert {
    filter: brightness(0) invert(1);
}

nav {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    /* Garante que o nav "grude" à direita mesmo se novos elementos surgirem à esquerda */
    margin-left: auto;
}

/* Premium outlined nav button (index) */
.nav-btn.premium-outline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--brand-gold-border);
    color: var(--brand-gold);
    font-weight: 800;
    overflow: hidden;
    padding: 8px 12px;
}

.nav-btn.premium-outline i {
    margin-right: 0;
    font-size: 16px;
    transition: transform .42s var(--anim-ease-out), filter .42s var(--anim-ease-out);
    color: var(--brand-gold);
}

/* Texto começa oculto mas já com cor amarela para evitar repaint diferente */
.nav-btn.premium-outline .label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transform: translateX(8px);
    transition: max-width .42s var(--anim-ease-out), opacity .30s ease .05s, transform .42s var(--anim-ease-out);
    color: var(--brand-gold);
}

.nav-btn.premium-outline:hover {
    background: rgba(245, 194, 65, .12);
}

.nav-btn.premium-outline:hover i {
    transform: translateX(-6px) rotate(-12deg);
    filter: drop-shadow(0 2px 4px rgba(245, 194, 65, .45));
}

.nav-btn.premium-outline:hover .label {
    max-width: 140px;
    opacity: 1;
    transform: translateX(0);
    color: var(--brand-gold);
}

.nav-btn.premium-outline:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

/* CTA Premium (ranking): chama atenção + sem sublinhado */
.btn.premium-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 0;
    font-weight: 900;
    color: #111;
    background: linear-gradient(135deg, rgba(245, 194, 65, .95), rgba(255, 141, 64, .95));
    text-decoration: none !important;
    overflow: hidden;
    will-change: transform, box-shadow;
    box-shadow: 0 10px 26px rgba(245, 194, 65, .18);
    /* anima apenas quando não estiver em hover */
}

.btn.premium-cta,
.btn.premium-cta span {
    color: #111 !important;
}

.btn.premium-cta i {
    color: #111;
}

.btn.premium-cta::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -60%;
    width: 60%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    /* anima apenas quando não estiver em hover */
    pointer-events: none;
}

.btn.premium-cta:not(:hover) {
    animation: premiumCtaPulse 2.2s ease-in-out infinite;
}

.btn.premium-cta:not(:hover)::after {
    animation: premiumCtaShine 3.6s ease-in-out infinite;
}

.btn.premium-cta:hover {
    animation: none;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 14px 34px rgba(245, 194, 65, .28);
}

.btn.premium-cta:hover::after {
    animation: none;
    opacity: 0;
}

.btn.premium-cta:active {
    transform: translateY(0) scale(1);
}

.btn.premium-cta:focus-visible {
    outline: 2px solid rgba(245, 194, 65, .75);
    outline-offset: 3px;
}

@keyframes premiumCtaPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 26px rgba(245, 194, 65, .18);
    }
    50% {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 16px 36px rgba(245, 194, 65, .32);
    }
}

@keyframes premiumCtaShine {
    0% {
        opacity: 0;
        transform: translateX(0) skewX(-18deg);
    }
    10% {
        opacity: .55;
    }
    45% {
        opacity: 0;
        transform: translateX(320%) skewX(-18deg);
    }
    100% {
        opacity: 0;
        transform: translateX(320%) skewX(-18deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn.premium-cta {
        animation: none;
    }
    .btn.premium-cta::after {
        animation: none;
    }
}

/* Evita flicker do header antes do JS: esconde login/account até o app inicializar */
#loginLink,
#accountMenu {
    display: none;
}

#accountMenu[style*="display: block"] {
    z-index: 9999 !important;
    position: relative;
}

#loginLink[style*="display: inline-block"],
#loginLink[style*="display: block"] {
    display: initial;
}

/* Estado desabilitado e carregando dos botões do header */
.nav-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.nav-btn.is-loading {
    opacity: 0.8;
    cursor: progress;
}

/* Indicador de carregamento (loading dots) para espaços pequenos, ex.: nome da conta */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 20px;
}

.loading-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.25;
    animation: dots-blink 1.2s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dots-blink {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 1;
    }
}

.nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.nav-btn,
.nav-btn:link,
.nav-btn:visited {
    text-decoration: none;
}

.nav-btn i {
    margin-right: 6px;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Variante: apenas ícone, sem fundo visível */
.nav-icon {
    background: transparent !important;
    border: none !important;
    padding: 6px !important;
    /* área de clique mínima sem parecer botão */
    border-radius: 6px !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon i {
    margin-right: 0 !important;
    font-size: 16px;
    transition: color .18s ease, text-shadow .18s ease, transform .12s ease;
}

/* Hover minimalista: só o ícone muda de cor e ganha um leve brilho */
.nav-icon:hover {
    background: transparent !important;
}

.nav-icon:hover i {
    color: var(--color-premium-accent-hover);
    text-shadow: 0 0 8px rgba(255, 213, 86, 0.35);
    transform: translateY(-1px);
}

/* Clique: micro compressão do ícone */
.nav-icon:active i {
    transform: scale(0.92);
}

.nav-icon:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.35);
    outline-offset: 2px;
    border-radius: 6px;
}

/* =========================
   Central de Notificações
   ========================= */

.notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.notif-btn {
    position: relative;
}

.notif-badge {
    position: absolute;
    right: -4px;
    top: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.25);
    pointer-events: none;
}

.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 340px;
    max-width: 92vw;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    padding: 8px;
    display: none;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-6px) scale(var(--anim-scale-initial));
    transition: opacity var(--anim-menu-duration) var(--anim-ease-out), transform var(--anim-menu-duration) var(--anim-ease-out);
}

.notif-dropdown.pre-show {
    display: block;
}

.notif-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.notif-dropdown.closing {
    opacity: 0;
    transform: translateY(-6px) scale(var(--anim-scale-initial));
}

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 6px 10px 6px;
}

.notif-header-title {
    font-weight: 900;
    letter-spacing: .3px;
}

.notif-header-link {
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.78);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    padding: 6px 8px;
    border-radius: 8px;
}

.notif-header-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.92);
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(58vh, 520px);
    overflow: auto;
    padding: 4px;
}

.notif-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.notif-avatar {
    width: 44px;
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(252, 211, 77, 0.95);
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.95);
}

.notif-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(226, 232, 240, 0.72);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.85;
}

.notif-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    opacity: 1;
}

.notif-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.20);
}

.notif-close:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.notif-main {
    min-width: 0;
    flex: 1;
    /* Reserva espaço para o botão X (evita o texto "passar por baixo") */
    padding-right: 26px;
}

.notif-text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.25;
    word-break: break-word;
}

.notif-text strong {
    font-weight: 900;
    font-size: 14px;
}

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(226, 232, 240, 0.92);
}

.pill--new {
    border-color: rgba(252, 211, 77, 0.28);
    background: rgba(252, 211, 77, 0.14);
    color: rgba(252, 211, 77, 0.95);
}

.notif-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.notif-action-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-weight: 900;
}

.notif-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.notif-action-btn.accept {
    background: rgba(34, 197, 94, 0.20);
    border-color: rgba(34, 197, 94, 0.30);
}

.notif-action-btn.reject {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.30);
}

/* Account menu */
.account {
    position: relative;
}

.account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    color: #374151;
}

.account-avatar.initial {
    color: #1f2937;
}

.account-avatar .account-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 999px;
}

.account-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    width: 260px;
    max-width: 95vw;
    box-sizing: border-box;
    padding: 6px;
    display: none;
    z-index: 9999;
    opacity: 0;
    transform: translateY(-6px) scale(var(--anim-scale-initial));
    transition: opacity var(--anim-menu-duration) var(--anim-ease-out), transform var(--anim-menu-duration) var(--anim-ease-out);
}

.account-dropdown.pre-show {
    display: block;
}

.account-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.account-dropdown.closing {
    opacity: 0;
    transform: translateY(-6px) scale(var(--anim-scale-initial));
}

.account-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    position: relative;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #e2e8f0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}

/* Permite usar .account-item em links (ex.: Ajuda) sem perder o visual */
a.account-item {
    display: block;
    text-decoration: none;
}

.account-badge {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.25);
}

.account-item i {
    margin-right: 8px;
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.account-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Premium item destaque */
.account-item.premium {
    color: #d5841c;
    /* marrom dourado */
    background: linear-gradient(90deg, rgba(252, 211, 77, 0.18), rgba(251, 191, 36, 0.12));
    border: 1px solid rgba(217, 119, 6, 0.35);
}

.account-item.premium i {
    color: #d5841c;
}

.account-item.premium:hover {
    background: linear-gradient(90deg, rgba(252, 211, 77, 0.28), rgba(251, 191, 36, 0.22));
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.15);
}

/* Admin Area link style */
.account-item.admin-link {
    position: relative;
}

.account-item.admin-link i {
    color: var(--color-admin-accent);
}

.account-item.admin-link::after {
    border: 1px solid rgba(243, 188, 23, .18);
}

.account-item.admin-link:hover {
    background: rgba(243, 188, 23, .12);
}

.account-item.admin-link:focus-visible {
    outline: 2px solid var(--color-admin-accent);
}

.hidden {
    display: none !important;
}

/* =========================
   Modal de Amigos
   ========================= */

#friendsModal .settings-modal-content {
    width: 760px;
    height: min(85vh, 760px);
}

#blockedModal .settings-modal-content {
    width: 520px;
    height: min(70vh, 560px);
}

#friendsModal .settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#friendsModal .settings-footer .friends-action-btn {
    height: 36px;
}

#friendsModal .settings-footer .friends-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

#friendsModal .settings-footer .friends-action-btn:active {
    transform: translateY(0);
}

.friends-tabs {
    display: flex;
    gap: 8px;
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 14px;
}

.friends-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #94a3b8;
    font-weight: 900;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.friends-tab.active {
    background: linear-gradient(90deg, var(--brand-gold), var(--color-premium-accent-hover));
    color: #111827;
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

.friends-tab-badge {
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.friends-panel { display: block; }

.friends-search-wrap {
    position: relative;
}

.friends-search-spinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.friends-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.friends-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.friends-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.10);
    object-fit: cover;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.92);
}

.friends-avatar.initial {
    color: rgba(226, 232, 240, 0.92);
}

.friends-title {
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.friends-action-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.friends-action-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    line-height: 1;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.friends-action-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.friends-action-btn.primary {
    background: rgba(34, 197, 94, 0.20);
    border-color: rgba(34, 197, 94, 0.30);
}

.friends-action-btn.danger {
    background: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.30);
}

.friends-kebab-wrap {
    position: relative;
    flex: 0 0 auto;
}

.friends-kebab-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.friends-kebab-btn:hover {
    background: rgba(255, 255, 255, 0.09);
}

.friends-kebab-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 170px;
    z-index: 10000;
    padding: 6px;
    border-radius: 12px;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.friends-kebab-menu button {
    width: 100%;
    text-align: left;
    padding: 10px 10px;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
}

.friends-kebab-item-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.friends-kebab-item-icon svg {
    display: block;
}

.friends-kebab-menu button:hover {
    background: rgba(255, 255, 255, 0.08);
}

.friends-kebab-menu button.danger {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.friends-kebab-menu button.danger:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.28);
}

.friends-kebab-menu button.danger .friends-kebab-item-icon,
.friends-kebab-menu button.danger .friends-kebab-item-icon svg {
    color: inherit;
}

.friends-action-btn.loading {
    pointer-events: none;
    opacity: 0.85;
    position: relative;
    padding-right: 34px;
}

.friends-action-btn.loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: rgba(255,255,255,0.95);
    animation: spin 0.8s linear infinite;
}

/* Greeting block */
.account-greeting {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 8px;
}

.account-greeting .account-avatar {
    width: 28px;
    height: 28px;
    font-size: 13px;
    background: #e5e7eb;
    color: #374151;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.account-greeting .hello {
    color: #f8fafc;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
    display: block;
}

.account-greeting .email {
    color: #94a3b8;
    font-size: 12px;
    margin-top: 2px;
}

.account-greeting .greet-text .chip {
    margin-top: 6px;
}

/* Chips reutilizáveis */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    background: transparent;
}

/* Chip Premium outlined (ouro) */
.chip--premium {
    background: transparent;
    color: var(--brand-gold);
    border: 1px solid var(--brand-gold);
    box-shadow: none;
}

.chip--premium::before {
    content: "\f521";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 4px;
}

.chip--premium:hover {
    background: rgba(245, 194, 65, 0.12);
}

/* Chip Free/Starter outlined (branco) */
.chip--starter {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: none;
}

.chip--starter::before {
    content: "\f005";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 4px;
    opacity: 1;
}

/* Garantia: no modal de Conta o chip FREE deve ser branco */
#accountModal .chip--starter,
#accountModal .chip--starter::before {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Garantia: na aba Plano do modal de Conta, o chip PREMIUM deve ser amarelo (igual menu Conta) */
#accountModal .plan-chip-row .chip--premium,
#accountModal .plan-chip-row .chip--premium::before {
    color: var(--brand-gold) !important;
    opacity: 1 !important;
}

.chip--starter:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* Linha do plano no modal de conta */
.account-plan-row {
    margin-bottom: 8px;
}

/* Account modal refinements */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.account-section {
    padding-top: 8px;
}

.account-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Novo layout: avatar | linha | campos */
.profile-row {
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.profile-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.profile-right {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-v-sep {
    width: 1px;
    align-self: stretch;
    background: #eee;
    margin: 0 8px;
}

.profile-avatar {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    border: none;
}

.profile-avatar:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(186, 73, 73, .35), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-avatar.dragover {
    box-shadow: 0 0 0 3px rgba(76, 159, 80, .35), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.avatar-initial {
    font-weight: 900;
    font-size: 28px;
    color: #666;
}

.avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s ease;
}

.profile-avatar:hover .avatar-overlay,
.profile-avatar:focus .avatar-overlay,
.profile-avatar.dragover .avatar-overlay {
    opacity: 1;
}

.link-btn {
    background: transparent;
    border: none;
    color: #ba4949;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
}

.link-btn:hover {
    background: #fdeaea;
}

#accountPhotoRemove[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.muted {
    color: #888;
}

.small {
    font-size: 12px;
}

/* Account Plan section */
.account-plan .plan-chip-row {
    margin: 4px 0 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.account-plan .plan-state {
    margin-top: 8px;
}

.account-plan .plan-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
}

.account-plan .plan-card--premium {
    border-color: rgba(245, 194, 65, 0.22);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.account-plan .plan-title {
    font-size: 16px;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: .2px;
    margin-bottom: 8px;
}

.account-plan .plan-cancel-banner {
    margin: 8px 0 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(245, 194, 65, 0.28);
    background: rgba(245, 194, 65, 0.10);
    color: #fde68a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.account-plan .plan-desc {
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.45;
    margin: 0 0 10px;
}

.account-plan .plan-cta-row {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
}

.account-plan .plan-cta-row .btn.premium-cta {
    padding: 10px 16px;
}

.account-plan .plan-bullets {
    margin: 0 0 12px;
    padding-left: 18px;
    color: #e2e8f0;
    font-size: 13px;
}

.account-plan .plan-bullets li {
    margin: 6px 0;
}

.account-plan .plan-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 10px;
}

.account-plan .plan-hint {
    margin-top: 10px;
}

.account-plan .plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.account-plan .plan-grid.plan-grid--single {
    grid-template-columns: 1fr;
}

.account-plan .plan-col .label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}

.account-plan .plan-col .value {
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 700;
}

@media (max-width: 600px) {
    .account-plan .plan-grid {
        grid-template-columns: 1fr;
    }
}

/* Loading premium no botão "Gerenciar assinatura" (spinner central, sem sobrepor texto/ícone) */
#accountManageSubscription.is-loading {
    pointer-events: none;
    opacity: 0.9;
}

#accountManageSubscription .btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(245, 194, 65, 0.95);
    border-top-color: transparent;
    border-right-color: transparent;
    animation: spin .8s linear infinite;
}

/* Emula o visual do form de login dentro do modal */
.settings-modal-content .label {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}

.settings-modal-content .input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    /* var(--border) aproximado */
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    color: #333;
    background: #fff;
}

.settings-modal-content .input:focus {
    border-color: #fca5a5;
    /* var(--ring) aproximado */
    box-shadow: 0 0 0 4px rgba(252, 165, 165, .25);
}

@media (max-width: 600px) {
    .account-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-v-sep {
        display: none;
    }
}

/* Botão remover foto desabilitado */
#accountPhotoRemove[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* Main layout grid: Timer (left) | Tasks (right top) | Summary (right bottom) */
/* Área central (timer | tasks | summary) agora com altura controlada para evitar scroll vertical geral */
main.app-main {
    display: grid;
    grid-template-columns: minmax(390px, 560px) 1.2fr;
    grid-template-rows: 1fr;
    /* sem segunda linha (summary removido) */
    grid-template-areas: "timer tasks";
    gap: 20px 24px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    /* Área útil exatamente entre header e footer fixos */
    height: calc(100dvh - 160px - var(--footer-h));
    max-height: calc(100dvh - 160px - var(--footer-h));
    overflow: hidden;
    /* sem scroll */
}

/* Ajuste do container principal para distribuir espaço vertical corretamente */
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    flex: 0 0 auto;
}

.app-footer {
    flex: 0 0 auto;
}

/* Painéis internos ocupam a altura da célula e gerenciam seus próprios overflows */
.timer-section {
    grid-area: timer;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.tasks-section {
    grid-area: tasks;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.summary-section {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 0;
}

/* Timer container fica fluido: usa clamp para não estourar viewport menor */
.timer-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

/* Lista de tarefas sem scroll interno (paginação controla a altura) */
.tasks-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: visible;
    overflow-x: hidden;
    padding-bottom: 8px;
}

.summary-card {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Em viewports baixas, reduzir o timer para caber sem scroll geral */
@media (max-height: 820px) {
    .timer-container {
        min-height: clamp(480px, 94vh, 640px);
    }
}

@media (max-height: 680px) {
    .timer-container {
        min-height: clamp(420px, 92vh, 560px);
    }
}

/* Timer Section */
.timer-section {
    text-align: center;
    margin-bottom: 20px;
    /* volta mais próximo do layout original */
    grid-area: timer;
}

.timer-container {
    background: var(--timer-panel-bg);
    border-radius: 16px;
    padding: 28px 28px 26px 28px;
    /* padding ajustado para mais equilíbrio interno */
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    min-height: 0;
    /* ocupa exatamente a altura disponível da célula */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    /* espaçamento vertical consistente entre blocos */
    position: relative;
}

.mode-buttons {
    display: inline-flex;
    background: rgba(10, 13, 22, 0.85);
    border-radius: 14px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    /* margin controlado pelo gap do container */
    /* Ocupar toda a largura do timer */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mode-btn {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    padding: 14px 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .14em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.mode-btn i {
    font-size: 14px;
    opacity: .95;
}


.mode-btn.active {
    background: linear-gradient(90deg, var(--brand-gold), var(--color-premium-accent-hover));
    color: #111827;
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

.mode-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08);
}

/* Bloco da barra de progresso circular do timer (proporção semelhante ao layout original) */
.timer-progress-wrap {
    position: relative;
    width: clamp(280px, 32vw, 360px);
    height: clamp(280px, 32vw, 360px);
    margin: 4px 0 0;
}

.progress-svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
    overflow: visible;
}

.progress-bg {
    fill: none;
    stroke: var(--timer-ring-bg);
    stroke-width: 8;
}

.progress-ring {
    fill: none;
    stroke: var(--brand-gold);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 345;
    stroke-dashoffset: 345;
    transition: stroke-dashoffset .35s linear, stroke .25s ease, filter .25s ease;
    filter: drop-shadow(0 0 20px rgba(245, 194, 65, .40));
}

.timer-display {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    font-size: clamp(56px, 8vw, 88px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, .35);
    padding: 6px;
}

/* Rótulo pequeno acima do tempo */
.mode-label {
    font-size: 18px;
    letter-spacing: .34em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: .95;
}

#timer,
.mode-label {
    transition: color .25s ease;
    color: var(--brand-gold);
}

/* Botão de ajustes dentro do círculo */
.timer-settings-inline {
    position: absolute;
    bottom: 34px;
    /* ajustado para o novo diâmetro */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 2;
}

.timer-settings-inline:hover {
    transform: translateX(-50%) translateY(-1px);
}

.timer-settings-inline:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* cores e halo da barra por modo */

/* Timer controls row: reset | start | next */
.timer-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 0;
    /* controlado pelo gap do container */
}

/* ==== Number inputs: remover spinners nativos e aplicar stepper custom ==== */
/* Remover setas nativas (WebKit) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remover setas nativas (Firefox) */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.num-field {
    position: relative;
    display: inline-block;
    width: 100%;
}

.num-input {
    width: 100%;
    padding-right: 36px;
}

.num-stepper {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.num-stepper button {
    width: 22px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.08);
}

.num-stepper button:hover {
    background: rgba(255, 255, 255, 0.14);
}

.num-stepper i {
    font-size: 10px;
    line-height: 1;
}


.circle-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: transparent;
    border: 2px solid var(--brand-gold);
    color: var(--brand-gold);
    cursor: pointer;
    transition: all .18s ease;
}

.circle-btn:hover {
    transform: translateY(-1px);
    background: rgba(245, 194, 65, 0.12);
}

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

.circle-btn.outline {
    background: transparent;
}

.start-btn {
    background: linear-gradient(180deg, rgba(245, 194, 65, 1), rgba(231, 179, 38, 1));
    border: 1px solid rgba(245, 194, 65, 0.55);
    color: #111827;
    padding: 16px 48px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .25s ease, color .25s ease, border-color .25s ease;
    box-shadow: 0 10px 30px -10px rgba(245, 194, 65, .6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.start-btn i {
    font-size: 18px;
    opacity: .95;
}

.start-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 32px -8px rgba(245, 194, 65, .75);
}

.start-btn:focus-visible {
    outline: 2px solid rgba(245, 194, 65, 0.75);
    outline-offset: 2px;
}

/* Corrige deslocamento horizontal no hover do botão de ajustes dentro do anel */
.circle-btn.timer-settings-inline:hover {
    transform: translateX(-50%) translateY(-1px);
}

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

/* pausa mantém tema amarelo */
.start-btn.pause {
    background: linear-gradient(180deg, rgba(245, 194, 65, .95), rgba(231, 179, 38, .95));
    color: #111827;
}

/* Dentro do modal de conta, o texto é maior; mantém o visual e evita quebrar layout */
#accountModal .account-plan #accountManageSubscription.start-btn {
    font-size: 16px;
    padding: 12px 18px;
    max-width: 100%;
    white-space: normal;
}

/* Current Task */
.current-task {
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    /* usa gap vertical */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pomo-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pomo-dot {
    width: 10px;
    height: 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: transparent;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.pomo-dot.done {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
}

.pomo-dot.todo {
    opacity: .9;
}

.pomo-dot:hover {
    transform: scale(1.05);
}

.task-sep {
    opacity: .5;
}

.task-name {
    font-weight: 900;
}

/* Accent colors applied inside timer-section for circular buttons */
/* (removido) variações por modo: tudo permanece amarelo */

/* Tasks Section */
.tasks-section {
    /* mesmo fundo do timer para destacar os limites do painel */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-top: 0;
    /* alinha o topo das Tarefas com o topo do Timer */
    margin-bottom: 0;
    /* evita deslocar o alinhamento da linha inferior */
    display: flex;
    flex-direction: column;
    position: relative;
    /* para overlay absoluto */
    grid-area: tasks;
    min-height: 0;
    /* garante que a célula do grid possa comprimir sem estourar */
    overflow: hidden;
    /* proteção extra contra overflow visual */
}

/* Indicador de scroll interno da lista de tarefas (sem scrollbar nativa) */


.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(36, 39, 48, 0%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 10px;
}

/* Lock inline para limite de tarefas (Free / Convidado) */
.tasks-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Título do componente de tarefas (com ícone) */
.tasks-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0;
    text-transform: uppercase;
}

.tasks-title i {
    color: var(--brand-gold);
}

/* Ícones do componente de tarefas (abas, botões, lista) */
.tasks-section i {
    color: var(--brand-gold);
}

.tasks-gate-inline {
    display: inline-flex;
    align-items: center;
}

.tasks-limit-lock {
    background: transparent;
    border: none;
    color: var(--brand-gold);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}

.tasks-limit-lock:hover {
    background: rgba(245, 194, 65, 0.12);
}

.tasks-limit-lock:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

/* Abas de filtro de tarefas */
.tasks-tabs {
    display: flex;
    gap: 6px;
    background: rgba(10, 13, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 9px;
    padding: 6px;
}

.tasks-tab {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.tasks-tab i {
    color: currentColor;
    opacity: .9;
}

.tasks-tab.active {
    background: linear-gradient(90deg, var(--brand-gold), var(--color-premium-accent-hover));
    color: #111827;
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

.tasks-menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.tasks-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tasks-list {
    margin-bottom: 15px;
    /* Mantém espaço reservado equivalente a 3 itens, evitando que a paginação suba
       quando houver poucas tarefas na página atual */
    min-height: calc(var(--task-item-min-h) * 3 + 16px);
    /* 3 itens + 2 gaps de 8px */
    max-height: none;
    overflow-y: visible;
    /* sem scroll interno */
    overflow-x: hidden;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
}


/* Empty state para lista de tarefas */
.tasks-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Preenche toda a área disponível da lista quando não há tarefas */
    height: 100%;
    min-height: calc(var(--task-item-min-h) * 4 + 24px);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #9fb0c6;
    text-align: center;
    padding: 16px;
}

.tasks-empty .msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.tasks-empty .msg .title {
    font-weight: 900;
    color: #e2e8f0;
}

.tasks-empty .msg .hint {
    font-size: 13px;
    opacity: .9;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s, opacity .22s ease, transform .22s ease;
    min-height: var(--task-item-min-h);
    position: relative;
    padding-left: 52px;
    /* reserva espaço para o handle esquerdo curvo (left 8 + width 29 + folga) */
}

/* Weekly Summary (right bottom) */
.summary-section {
    grid-area: summary;
    min-height: 0;
    overflow: hidden;
}

.summary-card {
    /* mesmo fundo do timer para destacar os limites do painel */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 14px 0 14px;
    /* zera o padding inferior: eixo do gráfico encosta no fundo do card */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    /* removido max-width e centralização para usar toda a área disponível */
    overflow: hidden;
    /* impede conteúdo de ultrapassar o cartão */
    max-height: none;
    /* deixa a altura ser apenas a do conteúdo */
    margin-top: -4px;
    /* puxa levemente o card para cima para alinhar com o timer */
}

.summary-title {
    font-weight: 900;
    letter-spacing: .3px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wrapper gerado via JS */
.weekly-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* Novo layout: barras à esquerda, métricas empilhadas à direita */
.summary-card .weekly-summary {
    display: grid;
    grid-template-columns: 1fr 195px;
    /* microajuste: coluna de métricas um pouco mais estreita para dar mais respiro ao gráfico */
    grid-template-rows: 1fr auto;
    /* barras ocupam o espaço flexível */
    grid-template-areas:
        "bars metrics"
        "labels metrics";
    column-gap: 14px;
}

.summary-card .weekly-summary .weekly-bars {
    grid-area: bars;
}

.summary-card .weekly-summary .weekly-labels {
    grid-area: labels;
}

.summary-card .weekly-summary .summary-metrics {
    grid-area: metrics;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: flex-start;
}

/* Cards de métricas (Total e Média) */
.summary-metrics {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.summary-metric {
    flex: 1 1 120px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-metric .metric-label {
    font-size: 11px;
    opacity: .80;
    font-weight: 700;
    letter-spacing: .25px;
}

.summary-metric .metric-value {
    font-weight: 800;
    font-size: 15px;
}

/* Gráfico de barras (7 dias) */
.weekly-bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 10px;
    height: auto;
    /* preenche o espaço disponível do card */
    min-height: 92px;
    /* garante legibilidade mínima */
    padding: 2px 6px 0 6px;
    background-image: repeating-linear-gradient(to top,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 28px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.bar {
    width: 22px;
    /* barra mais estreita */
    max-width: 55%;
    background: var(--brand-gold);
    border: 1px solid var(--brand-gold-border);
    box-shadow: var(--brand-gold-shadow);
    border-radius: 6px 6px 4px 4px;
    transition: height .25s ease;
}

.bar-value {
    font-size: 11px;
    opacity: .95;
    font-weight: 700;
    line-height: 1;
}

/* Linha de rótulos dos dias abaixo do gráfico */
.weekly-labels {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-top: 2px;
    /* aproxima labels do gráfico menor */
    padding: 0 6px 0 6px;
    /* garante que a base das labels alinhe com o fundo do card */
}

.summary-card>*:last-child {
    margin-bottom: 0;
}

.weekly-labels .label {
    text-align: center;
    font-size: 11px;
    opacity: .75;
    font-weight: 700;
    letter-spacing: .25px;
}

.feature-gate--inline {
    position: static;
    inset: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 8px;
    margin-bottom: 10px;
    display: none;
}

.feature-gate--inline .feature-gate__mini {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    text-align: left;
    width: 100%;
}

.feature-gate--inline .feature-gate__mini .feature-gate__text {
    flex: 1;
}

@media (max-width: 980px) {
    main.app-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "timer" "tasks";
        height: auto;
        max-height: none;
    }

    .timer-container {
        min-height: 420px;
    }

    .timer-progress-wrap {
        width: clamp(240px, 60vw, 300px);
        height: clamp(240px, 60vw, 300px);
    }
}

/* Removido breakpoint >1600px para manter largura original das tarefas */

.task-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.task-item.active {
    /* Mantém destaque sutil, sem contorno (igual ao estilo clean das outras abas) */
    background: rgba(255, 255, 255, 0.16);
    border: none;
    box-shadow: none;
}

/* Skeletons de tarefas */
.task-item.skeleton {
    position: relative;
    overflow: hidden;
    cursor: default;
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

/* Skeleton genérico (shimmer) para dados remotos */
@keyframes skel-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skel {
    display: inline-block;
    height: 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.15s ease-in-out infinite;
    vertical-align: middle;
}
.skel.sm { height: 10px; border-radius: 7px; }
.skel.lg { height: 14px; border-radius: 9px; }
.skel.w-20 { width: 20%; }
.skel.w-35 { width: 35%; }
.skel.w-45 { width: 45%; }
.skel.w-60 { width: 60%; }
.skel.w-80 { width: 80%; }
.skel.w-100 { width: 100%; }
.skel.block { display: block; }

/* Conta: input em loading (ex.: nickname vindo do backend) */
#accountModal .input-wrap.loading input.input {
    color: transparent;
    caret-color: transparent;
    background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.06) 63%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.15s ease-in-out infinite;
}

/* Ranking: skeleton rows */
.ranking-row.skeleton {
    position: relative;
    overflow: hidden;
}
.ranking-row.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transform: translateX(-100%);
    animation: task-skeleton 1.15s infinite;
    pointer-events: none;
}
.ranking-row.skeleton .ranking-pos,
.ranking-row.skeleton .ranking-points,
.ranking-row.skeleton .ranking-name .nick,
.ranking-row.skeleton .ranking-name .meta {
    color: transparent;
}

.task-item.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    transform: translateX(-100%);
    animation: task-skeleton 1.2s infinite;
}

.task-skel-left,
.task-skel-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-skel-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.task-skel-line {
    height: 10px;
    width: 160px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
}

.task-skel-badge {
    height: 12px;
    width: 50px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
}

@keyframes task-skeleton {
    0% {
        transform: translateX(-100%);
    }

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

.task-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.task-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}

/* Preview do check no hover (não marca, só feedback visual) */
.task-checkbox:hover {
    border-color: rgba(34, 197, 94, 0.95);
}

.task-checkbox:hover::before {
    content: '✓';
    position: absolute;
    color: #22c55e;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.85;
}

.task-checkbox.completed::before {
    content: '✓';
    position: absolute;
    color: #22c55e;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.task-checkbox.completed {
    border-color: rgba(34, 197, 94, 0.95);
    background: rgba(34, 197, 94, 0.20);
}

.task-info {
    display: flex;
    flex-direction: column;
}

/* Descrição com clamp de 2 linhas */
.task-info .task-desc {
    color: #9fb0c6;
    font-size: 12px;
    opacity: .95;
    margin-top: 4px;
    max-width: 68ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-name {
    font-weight: 500;
}

.task-name.completed {
    text-decoration: line-through;
    opacity: 0.7;
}

.task-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Drag handle à esquerda (rail com pontinhos) */
.task-drag-handle {
    position: absolute;
    left: 1px;
    top: 0;
    bottom: 0;
    width: 20px;
    border-radius: 5px 1px 1px 5px;
    /* curva acompanha o canto do card */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.089), rgba(255, 255, 255, 0.068));
    border: 0.5px solid rgba(255, 255, 255, 0.055);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    cursor: grab;
    opacity: .90;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.task-drag-handle:active {
    cursor: grabbing;
}

.task-drag-handle::before {
    content: '';
    position: absolute;
    inset: 8px 7px;
    /* ajusta respiro interno p/ largura 29px */
    background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1.1px, transparent 1.1px);
    background-size: 6px 8px;
    /* colunas x linhas de pontos */
    background-repeat: repeat;
    opacity: .9;
}

.task-item:hover .task-drag-handle {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.12));
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.task-item.dragging .task-drag-handle {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.16));
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Indicadores de inserção (acima/abaixo) durante DnD */
.task-item.drag-over-top {
    box-shadow: inset 0 3px 0 0 var(--brand-gold, rgba(255, 255, 255, .35));
}

.task-item.drag-over-bottom {
    box-shadow: inset 0 -3px 0 0 var(--brand-gold, rgba(255, 255, 255, .35));
}

.task-pomodoros {
    font-size: 14px;
    opacity: 0.8;
}

.task-menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    opacity: 0.7;
}

.task-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* Dropdown do menu de tarefa */
.task-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.task-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 160px;
    padding: 6px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    display: none;
    z-index: 1001;
    /* Ao portalizar, JS aplica position:fixed e z-index maior */
}

.task-menu.open .task-menu-dropdown {
    display: block;
}

.task-menu-item {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #e2e8f0;
    font-weight: 600;
    font-size: 13px;
}

.task-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.task-menu-item.danger {
    color: #fca5a5;
}

.task-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.12);
}

/* Ícones no menu das tarefas */
.task-menu-item i {
    margin-right: 8px;
    opacity: .9;
}

/* Estado visual de conclusão com spinner e fade-out suave */
.task-item.completing {
    opacity: 0.75;
    cursor: progress;
}

.task-item.completing .task-checkbox {
    border-color: rgba(255, 255, 255, 0.35);
}

/* Oculta o checkmark durante o loading */
.task-item.completing .task-checkbox.completed::before {
    display: none;
}

.task-item.completing .task-checkbox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.task-item.fade-out {
    opacity: 0;
    transform: translateY(-4px);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Visual de DnD */
.task-item.dragging {
    opacity: .6;
}

.task-item.drag-over {
    outline: 2px dashed rgba(255, 255, 255, .35);
    outline-offset: 2px;
}

.add-task-btn {
    background: none;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    color: white;
    padding: 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.add-task-btn i {
    color: currentColor;
    margin-right: 6px;
}

.add-task-btn:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.plus-icon {
    font-size: 20px;
}

/* Stats Section */
.stats-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 3px;
}

/* Paginação de tarefas */
.tasks-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.page-btn {
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #e5e7eb;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.page-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.page-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.page-btn.active {
    background: linear-gradient(90deg, var(--brand-gold), var(--color-premium-accent-hover));
    color: #111827;
    border-color: var(--brand-gold-border);
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

/* Footer */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin-left: 0;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999;
}

.app-footer__inner {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.app-footer__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.app-footer__center {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.app-footer__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.app-footer__rightGroup {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.app-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.app-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    transition: transform .15s ease, filter .15s ease;
}

.app-footer__social-icon {
    height: 26px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.app-footer__social-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

@media (max-width: 600px) {
    .app-footer__center {
        font-size: 12px;
        white-space: normal;
        line-height: 1.2;
    }

    .app-footer__social-link {
        padding: 0;
    }

    .app-footer__social-icon {
        height: 22px;
        width: auto;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity var(--anim-modal-duration) var(--anim-ease-out);
    will-change: opacity;
}

/* Settings Modal */
.settings-modal {
    padding: 20px;
}

.settings-modal-content {
    background: var(--modal-bg);
    border-radius: 8px;
    width: 640px;
    max-width: 95vw;
    /* Altura fixa responsiva para evitar "pular" ao trocar de aba */
    height: min(84vh, 680px);
    color: var(--modal-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--modal-border);
    /* Mantém header e footer fixos e rolagem apenas no corpo */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Conta: modal um pouco maior para reduzir scroll */
#accountModal .settings-modal-content {
    width: 760px;
    max-width: 96vw;
    height: min(90vh, 760px);
}

/* Conta: ícone do campo e-mail sempre verde e 100% opaco */
#accountModal #accountEmailWrap .input-info {
    opacity: 1 !important;
    color: #22c55e !important;
}

#accountModal #accountEmailWrap .input-info .info-icon {
    opacity: 1 !important;
}

/* Força o círculo + glifo (i/✓) do e-mail em verde mesmo com CSS inline */
#accountModal #accountEmailWrap .info-icon {
    color: #22c55e !important;
    border-color: #22c55e !important;
}

/* Conta: campo de e-mail desativado (somente leitura) + linha verde quando confirmado */
#accountModal #accountEmailWrap input.input[readonly] {
    cursor: default;
    caret-color: transparent;
    color: #6b7280;
    background: #f9fafb;
}

#accountModal #accountEmailWrap.is-confirmed input.input {
    border-color: rgba(34, 197, 94, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}

#accountModal #accountEmailWrap.is-confirmed input.input:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22) !important;
}

#accountModal #accountEmailWrap .input-info:hover {
    filter: drop-shadow(0 2px 10px rgba(34, 197, 94, 0.35));
}

#accountModal #accountEmailWrap .input-info:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}

/* Conta: ícone do e-mail (check verde quando confirmado) */
#accountModal #accountEmailWrap .check-glyph { display: none; }
#accountModal #accountEmailWrap.is-confirmed .input-info { color: #22c55e; }
#accountModal #accountEmailWrap.is-confirmed .info-glyph { display: none; }
#accountModal #accountEmailWrap.is-confirmed .check-glyph { display: inline-flex; }

/* Tooltip em portal (overlay) para não ser cortado por overflow/scroll interno */
body.tooltip-portal-enabled #accountModal .input-wrap.has-info .input-tooltip {
    display: none !important;
}

.tooltip-portal {
    position: fixed;
    width: min(360px, calc(100vw - 80px));
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(2, 6, 23, .96);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .2px;
    z-index: 2005;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

.tooltip-portal.show {
    opacity: 1;
    transform: translateY(0);
}

.tooltip-portal strong { color: #f8fafc; }
.tooltip-portal ul { margin: 6px 0 0 16px; padding: 0; }
.tooltip-portal li { margin: 4px 0; }

.tooltip-portal::before {
    content: '';
    position: absolute;
    right: 18px;
    top: -6px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: rgba(2, 6, 23, .96);
    border-left: 1px solid rgba(255, 255, 255, .10);
    border-top: 1px solid rgba(255, 255, 255, .10);
}

/* Tons do tooltip portal */
.tooltip-portal.is-success {
    background: rgba(6, 95, 70, .96); /* emerald-800 */
    border-color: rgba(34, 197, 94, .30);
}
.tooltip-portal.is-success::before {
    background: rgba(6, 95, 70, .96);
    border-left-color: rgba(34, 197, 94, .30);
    border-top-color: rgba(34, 197, 94, .30);
}

.tooltip-portal.is-warning {
    background: rgba(113, 63, 18, .96); /* amber-800 */
    border-color: rgba(245, 194, 65, .35);
}
.tooltip-portal.is-warning::before {
    background: rgba(113, 63, 18, .96);
    border-left-color: rgba(245, 194, 65, .35);
    border-top-color: rgba(245, 194, 65, .35);
}

/* Fallback (sem portal/JS): tooltip inline verde quando confirmado */
#accountModal #accountEmailWrap.is-confirmed .input-tooltip {
    background: rgba(6, 95, 70, .96);
    border-color: rgba(34, 197, 94, .30);
}
#accountModal #accountEmailWrap.is-confirmed .input-tooltip::before {
    background: rgba(6, 95, 70, .96);
    border-left-color: rgba(34, 197, 94, .30);
    border-top-color: rgba(34, 197, 94, .30);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 0;
    border-bottom: 1px solid #1d2732;
    margin-bottom: 20px;
}

/* Modal: Configurações do Timer (um pouco mais compacto para evitar scroll) */
#timerConfigModal .settings-header {
    padding: 16px 24px 0;
    margin-bottom: 12px;
}

.settings-header h2 {
    font-size: 18px;
    font-weight: bold;
    color: var(--modal-text);
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #94a3b8;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.settings-body {
    padding: 0 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* necessário para rolagem funcionar em flex containers */
    -webkit-overflow-scrolling: touch;
}

/* Modal: Configurações do Timer */
#timerConfigModal .settings-body {
    padding-top: 14px;
    padding-bottom: 18px;
    /* Volta o scroll interno no modal do timer */
    overflow-y: auto;
}

/* Modal: Configurações do Timer (footer fixo com ações) */
#timerConfigModal .timer-config-actions {
    margin-top: 0;
    padding: 18px 28px calc(22px + env(safe-area-inset-bottom));
    padding-left: calc(28px + env(safe-area-inset-left));
    padding-right: calc(28px + env(safe-area-inset-right));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--modal-bg);
    flex: 0 0 auto;
}

#timerConfigModal .timer-config-actions {
    gap: 12px;
}

#timerConfigModal .timer-config-actions .btn {
    min-width: 132px;
}

.settings-section {
    margin-bottom: 20px;
    padding-bottom: 4px;
}

.settings-section h3 {
    font-size: 14px;
    font-weight: bold;
    color: var(--modal-text-soft);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-divider {
    height: 1px;
    background: #1d2732;
    margin: 20px 0;
}

.settings-group {
    margin-bottom: 16px;
}

.settings-group>label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--modal-text);
}

.time-inputs {
    display: flex;
    gap: 12px;
}

.time-input {
    flex: 1;
    text-align: center;
}

.time-input label {
    display: block;
    font-size: 12px;
    color: var(--modal-text-soft);
    margin-bottom: 4px;
}

.time-input input {
    width: 100%;
    padding: 8px;
    border: 1px solid #2a3642;
    background: var(--modal-bg-alt);
    color: var(--modal-text);
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.settings-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.settings-toggle label {
    font-weight: 500;
    color: var(--modal-text);
}

.toggle {
    width: 50px;
    height: 26px;
    background: #233140;
    border: 1px solid #2f4254;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    outline: none;
    appearance: none;
}

.toggle:checked {
    background: rgba(245, 194, 65, 0.45);
    border-color: var(--brand-gold-border);
}

.toggle::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle:checked::before {
    transform: translateX(24px);
}

.toggle:checked::before {
    transform: translateX(24px);
}

.settings-group input[type="number"] {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid #2a3642;
    border-radius: 6px;
    text-align: center;
    background: var(--modal-bg-alt);
    color: var(--modal-text);
}

.settings-group select {
    padding: 8px 12px;
    border: 1px solid #2a3642;
    border-radius: 6px;
    background: var(--modal-bg-alt);
    color: var(--modal-text);
    cursor: pointer;
    min-width: 120px;
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.volume-control input[type="range"] {
    flex: 1;
}

.volume-control span {
    min-width: 30px;
    text-align: center;
    font-size: 14px;
    color: var(--modal-text-soft);
}

.settings-footer {
    padding: 20px 24px;
    border-top: 1px solid #1d2732;
    display: flex;
    justify-content: flex-end;
}

.btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--modal-text);
    border-radius: 8px;
}

.btn.ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Botão outlined premium (padrão do sistema): borda dourada + fundo amarelo translúcido */
.btn.premium-outline {
    background: rgba(245, 194, 65, 0.14);
    border: 1px solid rgba(245, 194, 65, 0.55);
    color: var(--brand-gold);
    box-shadow: 0 6px 18px -10px rgba(245, 194, 65, 0.55);
}

/* Alguns estilos do modal podem sobrescrever a cor do botão; força o amarelo no escopo do modal */
#accountModal .btn.premium-outline,
#accountModal .btn.premium-outline i,
#accountModal .btn.premium-outline span {
    color: var(--brand-gold) !important;
}

.btn.premium-outline:hover {
    background: rgba(245, 194, 65, 0.20);
    filter: brightness(1.02);
}

.btn.premium-outline:active {
    background: rgba(245, 194, 65, 0.16);
}

.btn.premium-outline:focus-visible {
    outline: 2px solid rgba(245, 194, 65, 0.75);
    outline-offset: 2px;
}

.danger-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #2a1b1b;
    border: 1px solid #5a2a2a;
    border-radius: 10px;
    padding: 12px;
}

.danger-title {
    font-weight: 800;
    color: #fecaca;
}

.danger-desc {
    color: #fca5a5;
    font-size: 13px;
}

.danger-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 800;
}

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

/* Danger modal (ação crítica) */
.danger-modal .settings-header h2 {
    color: #fecaca;
}

.danger-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.danger-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #2a1b1b;
    border: 1px solid #5a2a2a;
    border-radius: 10px;
    padding: 12px;
}

.danger-item-title {
    font-weight: 900;
    color: #fecaca;
    display: flex;
    align-items: center;
    gap: 8px;
}

.danger-item-desc {
    color: #fca5a5;
    font-size: 13px;
}

.danger-item .danger-btn {
    flex-shrink: 0;
}

/* Danger modal: botão Fechar com estilo primário amarelo */
#dangerClose {
    background: var(--brand-gold) !important;
    color: #1a1f27 !important;
    border: 1px solid var(--brand-gold-border) !important;
    box-shadow: var(--brand-gold-shadow) !important;
    font-weight: 900;
}

#dangerClose:hover {
    background: var(--brand-gold-hover) !important;
}

.ok-btn {
    background: var(--brand-gold);
    color: #1a1f27;
    border: 1px solid var(--brand-gold-border);
    box-shadow: var(--brand-gold-shadow);
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 900;
}

.ok-btn:hover {
    background: var(--brand-gold-hover);
}

.modal.pre-show {
    display: flex;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal .settings-modal-content,
.modal .modal-content {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(var(--anim-scale-initial));
    transition: opacity var(--anim-modal-duration) var(--anim-ease-out), transform var(--anim-modal-duration) var(--anim-ease-out);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.modal.show .settings-modal-content,
.modal.show .modal-content {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.modal.closing {
    opacity: 0;
}

.modal.closing .settings-modal-content,
.modal.closing .modal-content {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(var(--anim-scale-initial));
}

@media (prefers-reduced-motion: reduce) {
    .account-dropdown {
        transition: none;
        transform: none;
    }

    .modal .settings-modal-content,
    .modal .modal-content {
        transition: none;
        transform: none;
    }
}

.modal-content {
    background: var(--modal-bg);
    border-radius: 8px;
    padding: 24px;
    width: 90%;
    max-width: 460px;
    color: var(--modal-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--modal-border);
    /* Altura fixa menor para modal de tarefa */
    height: min(75vh, 480px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-content h3 {
    margin-bottom: 20px;
    font-size: 18px;
}

/* =========================
   Payment feedback modal
   ========================= */
.pf-modal .pf-content{
    height: auto;
    min-height: 220px;
    max-height: min(70vh, 420px);
}

.pf-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom: 14px;
}

.pf-icon{
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.pf-head-text{ display:flex; flex-direction:column; gap:2px; }

.pf-title{
    margin:0;
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 18px;
}

.pf-subtitle{
    color:#94a3b8;
    font-size: 12.5px;
    letter-spacing: .2px;
}

.pf-status{
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 800;
    color:#e2e8f0;
}

.pf-details{
    margin-top: 10px;
    font-size: 12.5px;
    color:#94a3b8;
    line-height: 1.45;
}

.pf-actions{
    margin-top: 18px;
    display:flex;
    justify-content:flex-end;
}

.pf-actions .ok-btn[disabled]{
    opacity: .75;
    cursor: not-allowed;
    filter: saturate(.9);
}

.pf-spinner{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 3px solid rgba(226, 232, 240, .25);
    border-top-color: rgba(226, 232, 240, .95);
    animation: pf-spin .9s linear infinite;
}

@keyframes pf-spin { to { transform: rotate(360deg); } }

.pf-modal.pf-success .pf-icon{
    background: rgba(16,185,129, .14);
    border-color: rgba(16,185,129, .28);
}

.pf-modal.pf-error .pf-icon{
    background: rgba(239,68,68, .12);
    border-color: rgba(239,68,68, .26);
}

.pf-icon i{
    font-size: 22px;
}

.pf-modal.pf-success .pf-icon i{
    color: #10b981;
    animation: pf-pop .42s ease-out both;
}

.pf-modal.pf-error .pf-icon i{
    color: #ef4444;
    animation: pf-pop .42s ease-out both;
}

@keyframes pf-pop{
    0% { transform: scale(.75); opacity: .2; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
    .pf-spinner{ animation: none; }
    .pf-modal.pf-success .pf-icon i,
    .pf-modal.pf-error .pf-icon i{ animation: none; }
}

#taskInput {
    width: 100%;
    padding: 12px;
    border: 2px solid #2a3642;
    background: var(--modal-bg-alt);
    color: var(--modal-text);
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
}

#taskInput:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

body.shortBreak-mode #taskInput:focus {
    border-color: #4c9f50;
}

body.longBreak-mode #taskInput:focus {
    border-color: #217ca3;
}

.est-pomodoros {
    margin-bottom: 20px;
}

.est-pomodoros label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--modal-text-soft);
}

.pomodoro-counter {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--modal-bg-alt);
    padding: 8px 12px;
    border: 1px solid #2a3642;
    border-radius: 6px;
    width: fit-content;
}

.counter-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--modal-text-soft);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.counter-btn:hover {
    background: #233140;
    color: var(--modal-text);
}

#pomodoroCount {
    font-weight: bold;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    /* Mantém os botões na base do modal de tarefa */
    margin-top: auto;
}

.cancel-btn,
.save-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.cancel-btn {
    background: #f5f5f5;
    color: #666;
}

.cancel-btn:hover {
    background: #e0e0e0;
}

.save-btn {
    background: #ba4949;
    color: white;
}

.save-btn:hover {
    background: #a03d3d;
}

body.shortBreak-mode .save-btn {
    background: #4c9f50;
}

body.shortBreak-mode .save-btn:hover {
    background: #3d8040;
}

body.longBreak-mode .save-btn {
    background: #217ca3;
}

body.longBreak-mode .save-btn:hover {
    background: #1b6583;
}

.save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Loading spinner no botão Salvar do modal de tarefa */
.save-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.9;
    color: transparent !important;
}

.save-btn.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* usa branco fixo para garantir visibilidade mesmo com color transparente */
    border: 2px solid #0d0c29;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: spin .8s linear infinite;
}

/* Disabled states durante operações assíncronas */
.cancel-btn[disabled],
.counter-btn[disabled],
#taskInput[disabled] {
    pointer-events: none;
    opacity: .6;
}

/* Reports modal */
.reports-tabs {
    display: flex;
    gap: 8px;
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}

.reports-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: .3px;
}

.reports-tab i {
    margin-right: 6px;
}

.reports-tab.active {
    background: linear-gradient(90deg, var(--brand-gold), var(--color-premium-accent-hover));
    color: #111827;
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

.reports-tab.locked {
    position: relative;
    cursor: pointer;
}

.reports-tab.locked:hover {
    filter: brightness(1.05);
}

.reports-tab.locked[data-tooltip]::before {
    white-space: nowrap;
}

/* Ícone de cadeado nas abas e botões bloqueados */
.lock-ico {
    margin-right: 6px;
    opacity: .9;
}

.reports-tab.locked .lock-ico,
.reports-segment-btn.locked .lock-ico {
    color: var(--brand-gold);
}

.reports-section-title {
    font-size: 14px;
    color: var(--modal-text-soft);
    font-weight: 800;
    margin: 16px 0 8px;
    padding-top: 8px;
    border-top: 1px solid #1d2732;
}

.reports-note {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 12px;
}

.reports-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 8px 0 16px;
}

.reports-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 10px;
    padding: 12px;
}

.reports-card--muted {
    background: #1a2432;
    border: 1px solid rgba(255, 255, 255, .08);
}

.reports-card-icon {
    font-size: 20px;
}

.reports-card-value {
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
}

.reports-card-label {
    color: #9fb0c6;
    font-size: 12px;
}

.reports-period {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.reports-segment {
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 4px;
}

.reports-segment-btn {
    background: transparent;
    border: none;
    padding: 6px 10px;
    border-radius: 16px;
    cursor: pointer;
    color: #94a3b8;
    font-weight: 700;
}

.reports-segment-btn.active {
    background: linear-gradient(90deg, var(--brand-gold), var(--color-premium-accent-hover));
    color: #111827;
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

.reports-segment-btn.locked {
    position: relative;
    cursor: pointer;
    /* clicável para abrir upsell */
}

/* Banner minimalista de upsell dentro do Summary */
.reports-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #121a28;
    border: 1px dashed rgba(245, 194, 65, .35);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 8px;
}

.reports-upsell .txt {
    color: #e5e7eb;
    font-size: 12px;
    opacity: .92;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reports-upsell .txt i {
    color: var(--brand-gold);
}

.reports-upsell .cta {
    background: var(--brand-gold);
    color: #111827;
    border: 1px solid var(--brand-gold-border);
    box-shadow: var(--brand-gold-shadow);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    text-decoration: none;
}

.reports-upsell .cta:hover {
    background: var(--brand-gold-hover);
}

/* Tooltips ricos (com HTML) */
.has-tooltip {
    position: relative;
}

.has-tooltip .tooltip-rich {
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translate(-50%, 100%);
    background: #111;
    color: #fff;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 6px;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6);
    z-index: 40;
    white-space: normal;
    text-align: center;
    max-width: 280px;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.has-tooltip .tooltip-rich::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -60%);
    width: 10px;
    height: 10px;
    background: #111;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.has-tooltip:hover .tooltip-rich,
.has-tooltip:focus-visible .tooltip-rich {
    opacity: 1;
    transform: translate(-50%, 100%) translateY(2px);
}

.has-tooltip.force-open .tooltip-rich {
    opacity: 1;
    transform: translate(-50%, 100%) translateY(2px);
    pointer-events: auto;
}

.tasks-limit-lock .tooltip-rich {
    width: 200px;
    max-width: 200px;
}

.tooltip-rich .gold {
    color: var(--brand-gold);
    font-weight: 900;
}

.reports-range-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-btn {
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #94a3b8;
}

.range-btn i {
    pointer-events: none;
}

.range-label {
    min-width: 60px;
    text-align: center;
    color: var(--modal-text-soft);
}

.reports-chart {
    height: 200px;
    border-left: 1px solid #1d2732;
    border-bottom: 1px solid #1d2732;
    margin: 12px 0 8px;
    background: repeating-linear-gradient(to top, transparent 0px, transparent 19px, rgba(255, 255, 255, 0.05) 20px);
}

.reports-panel.hidden {
    display: none;
}

/* Ranking (novo conteúdo do reportsModal) */
#reportsModal .settings-modal-content {
    width: min(780px, 96vw);
    height: min(92vh, 760px);
}

#reportsModal .settings-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#reportsModal .reports-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

#reportsModal .ranking-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

#reportsModal .ranking-me,
#reportsModal .reports-note {
    flex: 0 0 auto;
}

.ranking-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ranking-mine {
    background: #1a2432;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 140px;
    text-align: right;
}

.ranking-mine .label {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.ranking-mine .value {
    color: #e2e8f0;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 4px;
}

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ranking-scroll {
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    /* padding maior para o pequeno zoom do Top 3 não ser clipado */
    padding: 12px 10px;
    margin-bottom: 10px;
}

/* Scrollbar suave (WebKit) */
.ranking-scroll::-webkit-scrollbar {
    width: 10px;
}

.ranking-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.0);
    background-clip: padding-box;
}

.ranking-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.20);
    background-clip: padding-box;
}

.ranking-me {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(20, 27, 36, 0.0), rgba(20, 27, 36, 0.75) 18%, rgba(20, 27, 36, 0.92));
    padding-top: 10px;
}

.ranking-me .ranking-row {
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.ranking-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 10px 12px;
    transform: translateZ(0);
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease;
    width: 100%;
    box-sizing: border-box;
}

/* Destaque Top 3 (fundo + pequeno zoom) */
.ranking-row.top1 {
    background: linear-gradient(90deg, rgba(245, 194, 65, 0.18), rgba(255, 255, 255, 0.04));
    border-color: rgba(245, 194, 65, 0.28);
    transform: scale(1.02);
    box-shadow: 0 12px 26px rgba(0,0,0,0.28);
}

.ranking-row.top2 {
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.14), rgba(255, 255, 255, 0.04));
    border-color: rgba(226, 232, 240, 0.20);
    transform: scale(1.015);
    box-shadow: 0 10px 22px rgba(0,0,0,0.24);
}

.ranking-row.top3 {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.16), rgba(255, 255, 255, 0.04));
    border-color: rgba(245, 158, 11, 0.22);
    transform: scale(1.01);
    box-shadow: 0 9px 20px rgba(0,0,0,0.22);
}

.ranking-row.me {
    background: rgba(245, 194, 65, 0.10);
    border-color: rgba(245, 194, 65, 0.22);
}

.ranking-pos {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .08);
    color: #e2e8f0;
}

.ranking-pos.gold {
    background: rgba(245, 194, 65, 0.16);
    border-color: rgba(245, 194, 65, 0.35);
    color: var(--brand-gold);
}

.ranking-pos.silver {
    background: rgba(226, 232, 240, 0.10);
    border-color: rgba(226, 232, 240, 0.22);
    color: #e2e8f0;
}

.ranking-pos.bronze {
    background: rgba(217, 119, 6, 0.14);
    border-color: rgba(217, 119, 6, 0.28);
    color: #f59e0b;
}

.ranking-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ranking-name .nick {
    font-weight: 900;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-name .meta {
    font-size: 12px;
    color: #94a3b8;
}

.ranking-points {
    text-align: right;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: .2px;
}

.ranking-empty {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 14px 12px;
    color: #94a3b8;
    font-size: 13px;
}

@media (max-width: 600px) {
    .ranking-top {
        flex-direction: column;
        align-items: stretch;
    }
    .ranking-mine {
        width: 100%;
        text-align: left;
    }

    .ranking-scroll {
        max-height: 46vh;
    }

    #reportsModal .ranking-scroll {
        max-height: none;
    }
}

@media (max-width: 600px) {
    .reports-cards {
        grid-template-columns: 1fr;
    }
}

/* Altura consistente dos modais em telas pequenas */
@media (max-width: 600px) {
    .settings-modal-content {
        width: 96vw;
        height: 88vh;
        max-height: 88vh;
    }

    .settings-modal-content {
        height: 92vh;
        max-height: 92vh;
    }

    .modal-content {
        width: 94vw;
        height: min(86vh, 520px);
    }
}

/* Responsividade */
@media (max-width: 600px) {
    .container {
        padding: 16px;
    }

    header {
        /* Mantém o mesmo visual glass, só ajusta o espaçamento para telas menores */
        padding: 8px 12px;
        margin-bottom: 25px;
        gap: 8px;
        /* was 100px */
        border-radius: 0;
        /* Compensa o padding-top: 16px do .container em mobile */
        margin-top: -16px;
    }

    .logo {
        font-size: 18px;
    }

    .logo-img {
        height: 32px;
    }

    .timer-container {
        padding: 25px 20px;
        width: 100%;
        max-width: 360px;
        /* evita overflow em telas < 360px e usa 100% quando menor */
    }

    .timer-display {
        font-size: 70px;
    }

    .timer-settings-inline {
        bottom: 26px;
    }

    .nav-btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    .mode-btn {
        padding: 10px 12px;
        font-size: 12px;
    }

    .start-btn {
        padding: 12px 32px;
        font-size: 16px;
    }

    footer {
        font-size: 12px;
        padding: 10px 15px;
    }

    /* Tasks header mobile: organiza em 2 linhas
       1ª linha: busca (flexível) + menu (fixo)
       2ª linha: abas ocupando 100% da largura */
    .tasks-header {
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 8px;
        align-items: flex-start;
    }

    .tasks-header>div {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }

    /* Override do width inline (140px) para permitir que a busca expanda/contraia */
    #tasksSearch {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }

    .tasks-menu-btn {
        order: 2;
        flex: 0 0 auto;
    }

    /* Abas descem e ocupam toda a linha */
    .tasks-tabs {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
    }

    .tasks-tab {
        width: 100%;
        text-align: center;
        padding: 8px 10px;
    }
}

/* Em telas muito estreitas (ex.: 360px para baixo), quebra as abas em 2 colunas */
@media (max-width: 380px) {
    .tasks-tabs {
        grid-template-columns: 1fr 1fr;
    }
}

/* ================= FINAL MODAL OVERRIDES (non-destructive) ================= */
/* Mantém estilos anteriores; apenas ajusta aparência para o layout do print (barra dourada, títulos, cores de seções) */

/* Barra superior dourada fina no settings modal */
.settings-modal-content {
    position: relative;
}

.settings-modal-content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--brand-gold);
}

/* Headings de seção em dourado + ícones (se houver) */
.settings-section h3 {
    color: var(--brand-gold) !important;
    letter-spacing: .5px;
}

/* Divisória mais forte usando mesma família de cor */
.settings-divider {
    background: linear-gradient(90deg, rgba(245, 194, 65, 0.65), rgba(245, 194, 65, 0.08)) !important;
    height: 2px;
}

/* Labels de grupos mantendo contraste suave */
.settings-group>label {
    color: var(--modal-text) !important;
}

/* Inputs: borda clara ao focar e cantos fiéis ao original */
.time-input input,
.settings-group input[type="number"],
.settings-group select,
#taskInput {
    transition: border-color .18s, box-shadow .18s;
}

.time-input input:focus,
.settings-group input[type="number"]:focus,
.settings-group select:focus,
#taskInput:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 2px rgba(245, 194, 65, 0.25);
}

/* Toggle: track escuro + estado ativo dourado */
.toggle {
    background: #233140 !important;
    border: 1px solid #2f4254 !important;
}

.toggle:checked {
    background: rgba(245, 194, 65, 0.55) !important;
    border-color: var(--brand-gold-border) !important;
}

.toggle::before {
    background: #fff !important;
}

/* Botões de ação primários (save / ok) – mantém largura e padding originais */
.save-btn,
.ok-btn {
    background: var(--brand-gold) !important;
    color: #1a1f27 !important;
    border: 1px solid var(--brand-gold-border) !important;
    box-shadow: var(--brand-gold-shadow) !important;
}

.save-btn:hover,
.ok-btn:hover {
    background: var(--brand-gold-hover) !important;
}

/* Botão cancel: mais discreto porém coerente com o dark */
.cancel-btn {
    background: #1f2a36 !important;
    color: var(--modal-text-soft) !important;
    border: 1px solid #273544 !important;
}

.cancel-btn:hover {
    background: #253241 !important;
    color: var(--modal-text) !important;
}

/* Task modal counters */
.pomodoro-counter {
    background: var(--modal-bg-alt) !important;
    border: 1px solid #2a3642 !important;
}

.counter-btn {
    color: var(--modal-text-soft) !important;
}

.counter-btn:hover {
    background: #233140 !important;
    color: var(--modal-text) !important;
}

/* Ajuste do texto suave dentro do modal */
.settings-modal-content,
.modal-content {
    color: var(--modal-text);
}

.settings-modal-content p,
.modal-content p,
.settings-modal-content span {
    color: var(--modal-text-soft);
}

/* Exceções: badges e elementos que precisam de alto contraste */
.settings-modal-content span.friends-tab-badge {
    color: #ffffff;
}

.settings-modal-content strong {
    color: var(--modal-text);
}

/* Garantir que antigos backgrounds brancos de modais não reapareçam por ordem */
.modal-content {
    background: var(--modal-bg) !important;
}

/* Fim overrides */

/* Fade-in animação ao revelar admin */
.account-item.admin-link.fade-in {
    animation: fadeInAdmin var(--fade-duration) ease-out;
}

@keyframes fadeInAdmin {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

/* Tooltip custom */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translate(-50%, -100%);
    background: #111;
    color: #fff;
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6);
    z-index: 20;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #111;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    z-index: 20;
}

/* Variante: posicionar o balão abaixo e permitir múltiplas linhas (para mensagens mais explicativas) */
[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before {
    top: auto;
    bottom: -6px;
    transform: translate(-50%, 100%);
    white-space: normal;
    text-align: center;
    max-width: 260px;
    line-height: 1.25;
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
    top: auto;
    bottom: -6px;
    transform: translate(-50%, 50%);
    /* triângulo apontando para cima (quando tooltip fica abaixo) */
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

/* ====== Feature Gate (overlay Premium nas Tarefas) ====== */
/* Gate cobre toda a área de tarefas, com leve escurecimento e blur para pré-visualização */
.feature-gate {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 8px;
    z-index: 10;
    pointer-events: all;
}

/* Versão compacta e discreta do gate */
.feature-gate__mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(17, 24, 39, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
}

.feature-gate__mini i.fa-lock {
    color: var(--brand-gold);
    opacity: .95;
    font-size: 18px;
    margin-bottom: 2px;
}

.feature-gate__text {
    font-size: 12px;
    color: #e5e7eb;
    opacity: .92;
}

.gate-btn {
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #e5e7eb;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.gate-btn.primary {
    background: var(--brand-gold);
    color: #111827;
    border: 1px solid var(--brand-gold-border);
    box-shadow: var(--brand-gold-shadow);
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 900;
}

.gate-btn.primary i {
    color: #111827;
}

/* Cadeado central do gate overlay */
.gate-lock {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(255, 255, 255, .12);
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-gold);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}

.gate-lock:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.gate-lock i {
    font-size: 20px;
}

/* Tooltip rica dentro do gate: permite clique no link */
.feature-gate .tooltip-rich {
    pointer-events: auto;
}

.tooltip-rich a.gold {
    color: var(--brand-gold);
    font-weight: 900;
    text-decoration: underline;
}

/* ====== Checkout: Banner de espera (Payment Link) ====== */
.wait-banner {
    display: none;
    align-items: center;
    gap: 8px;
    background: #121a28;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e5e7eb;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 12px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.wait-banner.show { display: flex; }
.wait-banner .status { font-weight: 800; letter-spacing: .3px; }
.wait-banner .btn { margin-left: auto; }

@media (max-width: 600px) {
    .feature-gate__mini {
        transform: scale(.98);
    }
}

/* ======= Auth Gate Modal (overlay de login/cadastro na Home) ======= */
.auth-gate {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2100;
    padding: 16px;
}

.auth-gate.show {
    display: flex;
}

.auth-dialog {
    background: #0f172a;
    width: 100%;
    max-width: 520px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.auth-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    gap: 8px;
    align-items: center;
}

.auth-header h2 i {
    color: var(--brand-gold, #f59e0b);
}

.auth-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
    font-weight: 700;
}

.auth-close:hover {
    color: #e5e7eb;
}

.auth-tabs {
    display: flex;
    gap: 6px;
    background: #132032;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
    margin: 12px auto 0 auto;
}

.auth-tab {
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #94a3b8;
    font-weight: 800;
    letter-spacing: .3px;
}

.auth-tab.active {
    background: linear-gradient(90deg, var(--brand-gold, #f59e0b), #ffd556);
    color: #111827;
    box-shadow: 0 2px 10px -4px rgba(245, 194, 65, .35);
}

.auth-body {
    padding: 16px;
}

.auth-panel.hidden {
    display: none;
}

.auth-actions {
    margin-top: 8px;
}

.auth-info {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 8px;
}

/* Polimento do formulário do Auth Gate (inputs, labels, erros) */
.auth-gate .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.auth-gate .form-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #94a3b8;
}

.auth-gate .form-input {
    background: #1e293b;
    border: 1px solid rgba(247, 189, 0, 0.753);
    border-radius: 10px;
    padding: 12px 14px;
    color: #e2e8f0;
    font-size: 14px;
    font-family: inherit;
}

.auth-gate .form-input:focus {
    outline: none;
    border-color: var(--brand-gold, #f59e0b);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .25);
}

.auth-gate .field-error {
    font-size: 11px;
    margin-top: 4px;
    color: #f97316;
    font-weight: 600;
}

/* Botões primários/CTA compartilhados na Home */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
}

.btn:link,
.btn:visited {
    text-decoration: none;
}

.btn.primary,
.cta {
    background: linear-gradient(90deg, var(--brand-gold, #f59e0b), #fbbf24);
    color: #111827;
    border-color: rgba(245, 158, 11, .6);
    box-shadow: 0 4px 14px -4px rgba(245, 158, 11, .35);
}

.btn.primary:hover,
.cta:hover {
    filter: brightness(1.07);
}

.btn:disabled,
.cta:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== Settings: gates para usuários não-premium (lock por seção) ===== */
.settings-section.locked-section {
    position: relative;
    opacity: .85;
}

.settings-section.locked-section .settings-lock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-gold);
    background: rgba(245, 194, 65, .12);
    border: 1px solid var(--brand-gold-border);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(245, 194, 65, .12);
    position: relative;
    z-index: 7;
}

.settings-section.locked-section .settings-lock i {
    color: var(--brand-gold);
}

.settings-section.locked-section .settings-lock[data-tooltip] {
    outline: none;
}

.settings-section.locked-section .settings-lock-overlay {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    z-index: 5;
    /* acima dos inputs */
    background: transparent;
    /* clicável para upsell */
}

/* Novo marcador simples com cadeado ao lado do título (para substituir o chip quando preferir) */
.settings-section.locked-section .lock-marker {
    position: relative;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.settings-section.locked-section .lock-marker i.fa-lock {
    color: var(--brand-gold);
}

/* Desativa interação visualmente sem esconder completamente */
.settings-section.locked-section input,
.settings-section.locked-section select,
.settings-section.locked-section button.toggle {
    pointer-events: none;
}

/* Opcional: estilo mais suave de disabled para não parecer quebrado */
.settings-section.locked-section .settings-group,
.settings-section.locked-section .settings-toggle {
    filter: grayscale(.1);
}