/* ═══════════════════════════════════════════════════════
   CONCENTRARE — Design System
   ═══════════════════════════════════════════════════════ */

:root {
    --bg:            #edeee8;
    --surface:       #ffffff;
    --surface2:      #f4f5f0;
    --text-primary:  #2c2c2a;
    --text-secondary:#5a5a56;
    --text-muted:    #8a8a84;
    --accent:        #5a8f5e;
    --accent-hover:  #4a7a4e;
    --accent-soft:   #e8f2e9;
    --ring-bg:       #ddddd8;
    --border:        #e2e2dc;
    --shadow:        rgba(0,0,0,0.06);
    --shadow-md:     rgba(0,0,0,0.12);
    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
}

body.theme-dark {
    --bg:            #181b18;
    --surface:       #212421;
    --surface2:      #292d29;
    --text-primary:  #e4ebe4;
    --text-secondary:#a8b4a8;
    --text-muted:    #6a766a;
    --accent:        #7dba62;
    --accent-hover:  #6aab50;
    --accent-soft:   #1e2e1e;
    --ring-bg:       #333a33;
    --border:        #333a33;
    --shadow:        rgba(0,0,0,0.28);
    --shadow-md:     rgba(0,0,0,0.45);
}

/* ─── Reset & base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Nunito', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    min-height: 100dvh;
    overflow-x: hidden;
    transition: background .35s ease, color .35s ease;
}
.visually-hidden {
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; overflow:hidden;
    clip:rect(0,0,0,0); border:0;
}

/* ─── Meta diária ──────────────────────────────────── */
.daily-goal-fill {
    height:100%; background:var(--accent); transition:width .7s ease;
}
.daily-goal-fill.goal-reached { background:#4caf50; }

/* ─── Header ───────────────────────────────────────── */
.app-header {
    width:100%; max-width:1020px; margin:0 auto;
    padding:.9rem 1rem .5rem;
    display:flex; justify-content:space-between; align-items:center;
}
.app-title {
    font-size:1.35rem; font-weight:800;
    color:var(--text-primary); letter-spacing:.06em; margin:0;
}
.header-controls { display:flex; gap:.35rem; align-items:center; flex-shrink:0; }
.icon-btn {
    background:none; border:none;
    color:var(--text-secondary); cursor:pointer;
    font-size:1.2rem; width:36px; height:36px;
    border-radius:var(--r-sm);
    display:flex; align-items:center; justify-content:center;
    transition:color .2s, background .2s; flex-shrink:0;
}
.icon-btn:hover { color:var(--text-primary); background:var(--surface2); }

/* ─── Layout ───────────────────────────────────────── */
.content-wrapper {
    display: flex; gap: 1.25rem;
    width: 100%; max-width: 1020px;
    margin: 0 auto; padding: 0 1rem 2rem;
    align-items: flex-start;
    /* Necessário para fullscreen centering via align-items:center */
    min-height: calc(100dvh - 80px);
}

/* ─── Widget ───────────────────────────────────────── */
.widget {
    background:var(--surface);
    border-radius:var(--r-lg);
    padding:1.75rem 1.5rem;
    box-shadow:0 4px 24px var(--shadow);
    transition:background .35s ease;
    display:flex; flex-direction:column; align-items:center;
}
#pomodoro-container {
    flex: 0 0 auto;
    width: 360px;
    /* Garante que todos os filhos fiquem centrados */
    align-items: center;
}
.task-container     { flex:1 1 0; min-width:0; align-items:stretch; }

/* ─── Mode buttons (pill tabs) ─────────────────────── */
.mode-buttons-container {
    display: flex;
    gap: 3px;
    margin-bottom: 1.5rem;
    background: var(--surface2);
    border-radius: 99px;
    padding: 3px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mode-buttons-container::-webkit-scrollbar { display: none; }

.mode-btn {
    flex: 1 1 0;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    padding: .42rem .5rem;
    border-radius: 99px;
    cursor: pointer;
    font-size: .84rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
    font-family: inherit;
    text-align: center;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mode-btn:focus,
.mode-btn:focus-within,
.mode-btn:active,
.mode-btn:hover {
    outline: none;
    box-shadow: none;
    border: none;
}
.mode-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.mode-btn.active {
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 1px 6px var(--shadow-md);
}
.mode-btn.active:focus,
.mode-btn.active:active {
    outline: none;
    box-shadow: 0 1px 6px var(--shadow-md);
}
.mode-btn-custom {
    flex: 0 0 auto;
}

/* ─── Timer ring ───────────────────────────────────── */
.timer-container {
    position: relative;
    /* Responsivo: máx 210px, nunca menor que 160px, ideal 60% do container */
    width: clamp(160px, 60%, 210px);
    aspect-ratio: 1;
    margin: 0 auto 1.1rem;
    flex-shrink: 0;
}
.progress-ring {
    transform: rotate(-90deg);
    display: block; /* elimina espaço inline fantasma */
    width: 100%;
    height: 100%;
}
.progress-ring-bg { fill:none; stroke:var(--ring-bg); transition:stroke .35s; }
.progress-ring-fg {
    fill: none;
    /* BUG 6 FIX: usa variável local do container em vez de inline style */
    stroke: var(--ring-color, var(--accent));
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke .35s;
}
.timer-display {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    /* Escala com o container: min 3rem, ideal 18% do ring (clamp(160→210)), max 4.4rem */
    font-size: clamp(3rem, 9vw, 4.4rem);
    font-weight: 800; color: var(--text-primary);
    letter-spacing: -.02em; line-height: 1;
    transition: color .35s; user-select: none;
    white-space: nowrap;
}

/* ─── Session note ─────────────────────────────────── */
.session-note-wrap { width: 100%; margin-bottom: .8rem; }
.session-note-input {
    width:100%; border:1.5px dashed var(--border);
    background:transparent; color:var(--text-primary);
    padding:.38rem .75rem; border-radius:var(--r-sm);
    font-size:.8rem; font-family:inherit; outline:none;
    text-align:center; transition:border-color .2s, border-style .2s;
}
.session-note-input:focus { border-color:var(--accent); border-style:solid; }
.session-note-input::placeholder { color:var(--text-muted); opacity:.7; }

/* ─── Control buttons — INICIAR sempre centrado ─────
   O botão INICIAR e o grupo pause/stop/next são
   alternados via .hidden; como ambos estão num
   flex container centralizador, sempre ficam centrados.
   O fullscreen foi movido para o header.
   ──────────────────────────────────────────────────── */
.control-buttons-container {
    display:flex; gap:.65rem;
    margin-bottom:1.1rem;
    justify-content:center; align-items:center;
    width:100%; min-height:50px;
}
.control-btn {
    border-radius:var(--r-sm); border:none;
    font-size:.95rem; font-weight:700; font-family:inherit;
    color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .18s, transform .12s;
    flex-shrink:0;
    outline:none;
    -webkit-tap-highlight-color:transparent;
}
.control-btn:active { transform:scale(.95); }

.start-btn {
    background:var(--accent);
    padding:.72rem 2.4rem; gap:.45rem;
    font-size:.98rem; letter-spacing:.06em;
    border-radius:99px;
}
.start-btn:hover    { background:var(--accent-hover); }
.start-btn:disabled { background:var(--ring-bg); color:var(--text-muted); cursor:not-allowed; }

.pause-btn, .stop-btn, .next-btn {
    width:46px; height:46px; padding:0;
    font-size:1.3rem; border-radius:50%;
}
.pause-btn         { background:#5c6bc0; }
.pause-btn:hover   { background:#3f51b5; }
.stop-btn          { background:#ef5350; }
.stop-btn:hover    { background:#e53935; }
.next-btn          { background:#78909c; }
.next-btn:hover    { background:#607d8b; }

/* fullscreen agora vive no header como icon-btn normal */
.hidden { display:none !important; }

/* ─── Ambient sound ────────────────────────────────── */
.ambient-sound-control {
    display:flex; align-items:center; gap:.6rem;
    width:100%; margin-bottom:1.1rem; color:var(--text-secondary);
}
.ambient-sound-control .bi { font-size:1.2rem; opacity:.65; flex-shrink:0; }
.ambient-sound-control .form-select {
    flex:1; min-width:0;
    background:var(--surface2); border-color:var(--border);
    color:var(--text-primary); font-weight:600; font-size:.84rem;
    border-radius:var(--r-sm);
}
.ambient-sound-control .form-select:focus {
    border-color:var(--accent);
    box-shadow:0 0 0 .2rem rgba(90,143,94,.2);
}

/* ─── YouTube mini-player flutuante ────────────────── */
#youtube-player-container {
    /* Posição fixa na parte inferior direita da tela */
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1050;
    width: 300px;
    max-width: calc(100vw - 2rem);
}

#yt-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 32px var(--shadow-md);
    overflow: hidden;
    transition: box-shadow .25s ease;
}
#yt-panel:hover { box-shadow: 0 12px 40px var(--shadow-md); }

/* Botão de toggle — sempre visível no topo do painel */
#yt-toggle-btn {
    width: 100%;
    display: flex; align-items: center; gap: .55rem;
    padding: .6rem .9rem;
    background: var(--surface2);
    border: none; border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer; font-family: inherit;
    font-size: .8rem; font-weight: 700;
    transition: background .15s, color .15s;
    text-align: left;
}
#yt-toggle-btn:hover { background: var(--accent-soft); color: var(--accent); }
#yt-toggle-btn .bi { font-size: 1rem; flex-shrink: 0; color: var(--accent); }

/* Corpo com iframe — animação de abrir/fechar */
#yt-body {
    overflow: hidden;
    max-height: 200px;
    transition: max-height .3s ease, opacity .3s ease;
    opacity: 1;
}
#yt-body.collapsed {
    max-height: 0;
    opacity: 0;
}

#youtube-player { width: 100%; height: 170px; display: block; }

/* Mobile: painel ligeiramente menor */
@media (max-width: 480px) {
    #youtube-player-container {
        bottom: .65rem;
        right: .65rem;
        width: 260px;
    }
    #youtube-player { height: 148px; }
}

/* ─── Counters & finish time ───────────────────────── */
.counters-container {
    display:flex; gap:1.5rem; margin-top:auto;
    color:var(--text-muted); font-size:.82rem; font-weight:700;
}
.finish-time-display {
    font-size:.76rem; font-weight:600;
    color:var(--text-muted); margin-top:.2rem;
    min-height:.9rem; letter-spacing:.02em; text-align:center;
}

/* ─── Task widget ──────────────────────────────────── */
.task-header {
    display:flex; align-items:center; gap:.5rem;
    margin-bottom:.85rem; width:100%; flex-wrap:wrap;
}
.task-header h3 {
    font-size:1.05rem; font-weight:800;
    color:var(--text-primary); margin:0;
}
#task-summary {
    font-size:.78rem; color:var(--text-muted);
    font-weight:700; margin-right:auto;
}
.clear-btn {
    background:none; border:none; color:var(--text-muted);
    font-size:.76rem; font-weight:700; cursor:pointer;
    font-family:inherit; display:flex; align-items:center;
    gap:.25rem; transition:color .2s; white-space:nowrap;
    padding:.15rem .35rem; border-radius:var(--r-sm);
}
.clear-btn:hover { color:#ef5350; background:#fde8e820; }

/* ─── Task list ────────────────────────────────────── */
.task-list {
    width:100%; list-style:none; padding:0; margin:0 0 .65rem;
    max-height:290px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.task-list li {
    display:flex; align-items:center;
    padding:.65rem .35rem; gap:0;
    border-bottom:1px solid var(--border);
    animation:fadeIn .3s ease forwards;
    border-radius:var(--r-sm);
    transition:background .15s;
}
.task-list li:hover      { background:var(--surface2); }
.task-list li.fading-out { animation:fadeOut .28s ease forwards; }
.task-list li.dragging   { opacity:.4; background:var(--surface2); }
.task-list li.active-task {
    background:var(--accent-soft);
    border-left:3px solid var(--accent);
    padding-left:.45rem;
}
.task-list li:last-child { border-bottom:none; }

.task-list input[type="checkbox"] {
    flex-shrink:0; margin-right:.65rem;
    width:17px; height:17px; accent-color:var(--accent); cursor:pointer;
}

/* tag dot */
li .tag-dot { width:7px; height:7px; flex-shrink:0; margin-right:6px; }
li .tag-dot-none { opacity:0; }

.task-text-wrap {
    flex:1; min-width:0;
    display:flex; flex-direction:column; gap:3px;
}
.task-text {
    font-size:.88rem; color:var(--text-primary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    cursor:pointer; transition:color .2s;
}
.task-text.completed { text-decoration:line-through; color:var(--text-muted); }

.task-progress-bar {
    height:3px; background:var(--ring-bg);
    border-radius:99px; overflow:hidden;
}
.task-progress-fill {
    height:100%; background:var(--accent);
    border-radius:99px; transition:width .4s ease;
}
.task-progress-done { background:var(--text-muted); opacity:.45; }

.task-controls {
    display:flex; align-items:center; gap:.15rem;
    margin-left:.4rem; flex-shrink:0;
}
.task-pomodoro-count {
    font-weight:700; font-size:.74rem;
    color:var(--text-muted); min-width:30px; text-align:right;
}
.set-active-task-btn, .edit-task-btn, .delete-task-btn {
    background:none; border:none; cursor:pointer;
    font-size:.95rem; padding:.2rem .3rem;
    border-radius:6px; color:var(--text-muted);
    line-height:1; transition:color .15s, background .15s;
}
.set-active-task-btn:hover, .edit-task-btn:hover { color:var(--accent); background:var(--accent-soft); }
.active-task .set-active-task-btn { color:var(--accent); }
.delete-task-btn:hover { color:#ef5350; background:#fde8e830; }
body.theme-dark .delete-task-btn:hover { background:#3a181820; }

/* ─── Task form ────────────────────────────────────── */
.task-form {
    width:100%; display:flex; gap:.5rem;
    margin-top:.2rem; align-items:flex-end;
}
.task-form .form-group { display:flex; flex-direction:column; gap:.18rem; }
.task-form .task-input-group { flex:1; min-width:0; }
.task-form label {
    font-size:.72rem; font-weight:700; color:var(--text-muted);
    padding-left:.35rem; letter-spacing:.03em;
}
.task-form input {
    width:100%; border:1.5px solid var(--border);
    background:var(--surface2); color:var(--text-primary);
    padding:.44rem .75rem; border-radius:var(--r-sm);
    font-family:inherit; font-size:.88rem;
    transition:border-color .2s; outline:none;
}
.task-form input:focus { border-color:var(--accent); }
.task-form input#task-pomodoro-estimate { width:60px; text-align:center; padding-left:.3rem; padding-right:.3rem; }
.task-form button[type="submit"] {
    flex-shrink:0; width:36px; height:36px;
    background:var(--accent); border:none; color:#fff;
    border-radius:var(--r-sm); cursor:pointer;
    font-size:1.1rem; display:flex; align-items:center; justify-content:center;
    transition:background .2s; align-self:flex-end;
}
.task-form button[type="submit"]:hover { background:var(--accent-hover); }

/* ─── Tag selector ─────────────────────────────────── */
.tag-selector {
    display:flex; align-items:center; gap:4px;
    width:100%; padding:.5rem .2rem 0;
    flex-wrap:wrap;
}
.tag-selector-label {
    font-size:.68rem; font-weight:800; color:var(--text-muted);
    letter-spacing:.06em; margin-right:2px; flex-shrink:0;
}
.tag-btn {
    background:none; border:2px solid transparent;
    border-radius:50%; padding:2px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s;
}
.tag-btn.active { border-color:var(--accent); }
.tag-dot { display:block; width:14px; height:14px; border-radius:50%; }
.tag-dot-none   { background:var(--border); }
.tag-dot-green  { background:#5a8f5e; }
.tag-dot-purple { background:#7f77dd; }
.tag-dot-amber  { background:#ef9f27; }
.tag-dot-coral  { background:#d85a30; }
.tag-dot-blue   { background:#378add; }

/* ─── Animations ───────────────────────────────────── */
@keyframes fadeIn  { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeOut { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.95);height:0;padding:0;margin:0;overflow:hidden} }

@keyframes flash-effect { 50%{box-shadow:0 0 0 12px rgba(90,143,94,.22)} }
.timer-ended-flash { animation:flash-effect .9s ease-out; }

@keyframes modeSwitch {
    0%  {opacity:0;transform:translate(-50%,-50%) scale(.88)}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.timer-display.mode-transition { animation:modeSwitch .26s ease-out forwards; }

@keyframes celebrate {
    0%  {box-shadow:0 0 0 0   rgba(90,143,94,0)}
    30% {box-shadow:0 0 0 20px rgba(90,143,94,.28)}
    70% {box-shadow:0 0 0 36px rgba(90,143,94,.10)}
    100%{box-shadow:0 0 0 48px rgba(90,143,94,0)}
}
#pomodoro-container.celebrating { animation:celebrate 1.4s ease-out forwards; }

/* ─── Modais ───────────────────────────────────────── */
.modal-content {
    background:var(--surface); color:var(--text-primary);
    border:1px solid var(--border); border-radius:var(--r-lg);
}
.modal-header, .modal-footer { border-color:var(--border); }
.btn-close { filter:none; }
body.theme-dark .btn-close { filter:invert(1); }
/* ─── Form controls — override Bootstrap em todo lugar ─
   Garante que background/color sigam nosso design system
   mesmo fora de modais (ex: campos de modos customizados) */
.form-control, .form-select {
    background-color: var(--surface2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.form-control:focus, .form-select:focus {
    background-color: var(--surface2) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 .2rem rgba(90,143,94,.2) !important;
}
.form-control::placeholder { color: var(--text-muted); opacity: .75; }
.form-check-input:checked  { background-color: var(--accent); border-color: var(--accent); }

/* Labels e textos dos formulários */
.modal .form-label, .form-label {
    font-size: .84rem; font-weight: 700; color: var(--text-secondary);
}
.modal h6 {
    font-size: .76rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin-bottom: .7rem;
}
.modal hr { border-color: var(--border); margin: .9rem 0; }

/* ─── Info modal: Pomodoro ─────────────────────────── */
.pomodoro-info-hero {
    background:var(--accent-soft); border-radius:var(--r-md);
    padding:1.1rem 1.25rem; margin-bottom:1.1rem;
    display:flex; align-items:flex-start; gap:.9rem;
}
.pomodoro-info-hero .hero-tomato { font-size:2.4rem; line-height:1; flex-shrink:0; }
.pomodoro-info-hero h5 { margin:0 0 .2rem; font-weight:800; color:var(--text-primary); font-size:1rem; }
.pomodoro-info-hero p  { margin:0; font-size:.84rem; color:var(--text-secondary); line-height:1.5; }

.pomodoro-cycle-steps {
    display:flex; gap:.4rem; align-items:center;
    justify-content:center; flex-wrap:wrap; margin:.9rem 0;
}
.cycle-step {
    display:flex; flex-direction:column; align-items:center; gap:3px;
    background:var(--surface2); border-radius:var(--r-md);
    padding:.65rem .8rem; min-width:72px; text-align:center;
    flex:1 1 60px; max-width:100px;
}
.cycle-step .step-icon  { font-size:1.35rem; line-height:1; }
.cycle-step .step-label { font-size:.72rem; font-weight:700; color:var(--text-secondary); }
.cycle-step .step-time  { font-size:.67rem; color:var(--text-muted); }
.cycle-arrow { color:var(--text-muted); font-size:1rem; flex-shrink:0; }

.pomodoro-tips { list-style:none; padding:0; margin:0; }
.pomodoro-tips li {
    display:flex; gap:.65rem; align-items:flex-start;
    padding:.55rem 0; border-bottom:1px solid var(--border);
    font-size:.86rem; line-height:1.5;
}
.pomodoro-tips li:last-child { border-bottom:none; }
.pomodoro-tips li .tip-icon { font-size:1rem; flex-shrink:0; margin-top:2px; }

/* ─── Stats modal ──────────────────────────────────── */
.stats-label {
    font-size:.7rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-muted);
}
.stats-value { font-size:1.9rem; font-weight:800; color:var(--accent); line-height:1.1; }
.stats-extra-row {
    display:grid; grid-template-columns:1fr 1fr; gap:.75rem;
    margin:-.2rem 0 1rem;
}
.stats-value-sm {
    min-height:1.6rem; font-size:1rem; font-weight:800;
    color:var(--text-primary); line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stats-chart-title {
    font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-muted); margin-bottom:.45rem;
}

/* ─── Fullscreen mode ──────────────────────────────── */
body.fullscreen-mode .task-container       { display:none !important; }
body.fullscreen-mode .content-wrapper  {
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
    padding-top: 0;
    padding-bottom: 0;
}
body.fullscreen-mode #pomodoro-container   { width:min(400px, 92%); flex:none; }
body.fullscreen-mode .app-header           { display:none; }
/* ─── Responsive ───────────────────────────────────── */

/* Tablet / small desktop → empilha verticalmente */
@media (max-width: 820px) {
    .content-wrapper {
        flex-direction:column; align-items:center;
        padding:0 .875rem 1.75rem; gap:1rem;
    }
    #pomodoro-container {
        width:100%; max-width:420px; flex:none;
    }
    .task-container {
        width:100%; max-width:420px; flex:none;
    }
}

/* Telemóvel grande */
@media (max-width: 480px) {
    .app-header        { padding:.75rem .875rem .4rem; }
    .app-title         { font-size:1.1rem; }
    .icon-btn          { width:32px; height:32px; font-size:1.1rem; }
    .header-controls   { gap:.2rem; }

    .content-wrapper   { padding:0 .75rem 1.5rem; }
    .widget            { padding:1.25rem 1rem; border-radius:var(--r-md); }

    /* Mode tabs: fonte menor mas ainda scroll horizontal */
    .mode-btn          { font-size: .78rem; }

    /* Timer menor */
    .timer-display     { font-size: clamp(2.8rem, 8.5vw, 3.8rem); }

    /* Botões de controle */
    .start-btn         { padding:.65rem 1.8rem; font-size:.9rem; }
    .pause-btn, .stop-btn, .next-btn { width:42px; height:42px; font-size:1.2rem; }

    /* Nota de sessão ocupa largura total */
    .session-note-wrap { max-width:100%; }

    /* Formulário de tarefa em duas linhas */
    .task-form         { flex-wrap:wrap; gap:.45rem; }
    .task-form .task-input-group { flex:1 1 100%; }
    .task-form .form-group:not(.task-input-group) { flex:1; }
    .task-form input#task-pomodoro-estimate { width:100%; }

    /* Menos altura na lista */
    .task-list         { max-height:220px; }

    /* Contadores menores */
    .counters-container { gap:.9rem; font-size:.76rem; }
}

/* Telemóvel pequeno */
@media (max-width: 360px) {
    .app-title         { font-size:.95rem; letter-spacing:.02em; }
    .mode-btn          { font-size: .72rem; }
    .timer-display     { font-size: clamp(2.5rem, 8vw, 3.4rem); }
    .start-btn         { padding:.6rem 1.4rem; font-size:.85rem; }
    .widget            { padding:1.1rem .8rem; }
    .task-list         { max-height:190px; }
    /* Esconde texto do título no header muito pequeno */
    .header-controls   { gap:.15rem; }
    .icon-btn          { width:30px; height:30px; font-size:1rem; }
}

/* Mobile */
@media (max-width: 820px) {
}
@media (max-width: 480px) {
}

/* Streak badge (mantido no header) */
.streak-badge {
    font-size: .78rem;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: 99px;
    cursor: default;
}

/* ─── Focus bar (streak + meta) ────────────────────── */
.focus-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    background: var(--surface2);
    border-radius: var(--r-md);
    padding: .35rem .5rem;
    margin-top: .65rem;
}

.focus-bar-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    padding: .3rem .7rem;
    border-radius: var(--r-sm);
    transition: background .15s;
    text-decoration: none;
    color: inherit;
}
.focus-bar-btn:hover { background: var(--surface); }
.focus-bar-btn.streak-zero { opacity: .45; }

.focus-bar-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.focus-bar-value {
    font-size: .88rem;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 14px;
    text-align: center;
}
.focus-bar-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.focus-bar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 .1rem;
}

/* Goal dentro da focus-bar */
.focus-bar-goal {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    flex: 1;
    min-width: 0;
}
.focus-bar-goal-bar {
    flex: 1;
    min-width: 40px;
    height: 5px;
    background: var(--ring-bg);
    border-radius: 99px;
    overflow: hidden;
}

/* Streak badge mantém compatibilidade (agora é só o número) */
.streak-badge {
    font-size: .88rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* Mobile: focus-bar compacta */
@media (max-width: 480px) {
    .focus-bar-btn { padding: .25rem .5rem; }
    .focus-bar-label { display: none; }
    .focus-bar-value { font-size: .82rem; }
}

/* ═══════════════════════════════════════════════════
   STATS MODAL — Tabs + Conquistas + Ranking
   ═══════════════════════════════════════════════════ */

/* ─── Tabs ───────────────────────────────────────── */
.stats-tabs {
    display: flex;
    gap: 2px;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.stats-tab {
    background: none;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: .55rem .85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.stats-tab.active  { color: var(--accent); border-bottom-color: var(--accent); }
.stats-tab:hover:not(.active) { color: var(--text-secondary); }

.stats-pane        { display: none; }
.stats-pane.active { display: block; }

/* ─── Conquistas ─────────────────────────────────── */
.achievements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.achievements-count-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    display: block;
}
.achievements-count-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent);
}
.achievements-progress-wrap { flex: 1; }
.achievements-progress-bg {
    height: 6px;
    background: var(--ring-bg);
    border-radius: 99px;
    overflow: hidden;
}
.achievements-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    transition: width .5s ease;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .5rem;
}
.badge-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: .7rem .4rem .5rem;
    border-radius: var(--r-md);
    text-align: center;
    transition: transform .15s;
    cursor: default;
    border: 1px solid transparent;
}
.badge-card:hover { transform: scale(1.04); }

.badge-unlocked {
    background: var(--surface2);
    border-color: var(--border);
}
.badge-locked {
    background: var(--surface2);
    opacity: .35;
    filter: grayscale(.9);
}
.badge-icon  { font-size: 1.6rem; line-height: 1; }
.badge-name  { font-size: .68rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.badge-date  { font-size: .6rem; color: var(--text-muted); }

/* Toast de conquista */
.badge-toast {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 20px var(--shadow-md);
    min-width: 240px;
}
.badge-toast-icon  { font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.badge-toast-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.badge-toast-name  { font-size: .9rem; font-weight: 800; color: var(--text-primary); }
.badge-toast-desc  { font-size: .75rem; color: var(--text-secondary); }

/* ─── Ranking Semanal ────────────────────────────── */
.weekly-rank-summary {
    background: var(--accent-soft);
    border-radius: var(--r-md);
    padding: .75rem 1rem;
    margin-bottom: .9rem;
}
.rank-position-label {
    font-size: .95rem;
    font-weight: 800;
    color: var(--text-primary);
    display: block;
    margin-bottom: .2rem;
}
.rank-current-summary {
    font-size: .8rem;
    color: var(--text-secondary);
    margin: 0;
}
.rank-up   { color: #4caf50; font-weight: 700; }
.rank-down { color: #ef5350; font-weight: 700; }
.rank-same { color: var(--text-muted); font-weight: 700; }
.rank-now-badge {
    font-size: .6rem;
    background: var(--accent);
    color: #fff;
    padding: 1px 5px;
    border-radius: 99px;
    vertical-align: middle;
    margin-left: 4px;
}

.weekly-ranking-list { display: flex; flex-direction: column; gap: .55rem; }

.rank-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem .75rem;
    border-radius: var(--r-md);
    background: var(--surface2);
    border: 1px solid transparent;
    transition: border-color .15s;
}
.rank-row.rank-current {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.rank-medal {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
    min-width: 22px;
    text-align: center;
}
.rank-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.rank-header-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.rank-week-label { font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.rank-total { font-size: .82rem; font-weight: 800; color: var(--accent); white-space: nowrap; }

.rank-bar-wrap {
    height: 4px;
    background: var(--ring-bg);
    border-radius: 99px;
    overflow: hidden;
}
.rank-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 99px;
    transition: width .4s ease;
    opacity: .75;
}
.rank-current .rank-bar-fill { opacity: 1; }

.rank-minibar {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 28px;
    margin-top: 2px;
}
.rank-mini-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    height: 100%;
    justify-content: flex-end;
}
.rank-mini-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    min-height: 3px;
}
.rank-mini-label {
    font-size: .48rem;
    color: var(--text-muted);
    font-weight: 700;
}

/* ── Tag filter ── */
        .tag-filter-bar { display:flex; gap:4px; align-items:center; margin-bottom:.5rem; flex-wrap:wrap; }
        .tag-filter-btn { background:none; border:1.5px solid var(--border); border-radius:99px; padding:2px 10px; font-size:.76rem; font-weight:700; cursor:pointer; color:var(--text-muted); transition:all .15s; font-family:inherit; }
        .tag-filter-btn.active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
        /* ── Task time estimate ── */
        .task-time-estimate { font-size:.74rem; color:var(--text-muted); font-weight:600; }
        /* ── Session timeline ── */
        .session-timeline { max-height:200px; overflow-y:auto; }
        .session-row { display:flex; align-items:flex-start; gap:.5rem; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.82rem; }
        .session-row:last-child { border-bottom:none; }
        .session-icon { font-size:1rem; flex-shrink:0; }
        .session-body { flex:1; min-width:0; display:flex; flex-direction:column; }
        .session-task { font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .session-note-text { font-size:.76rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .session-time { font-size:.72rem; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
        /* ── Swipe delete ── */
        .task-list li { transition:transform .2s ease; }
        .task-list li.swipe-delete { transform:translateX(-100%) !important; opacity:0; }
        /* ── Mode colors ── */
        :root { --mode-break-color:#378add; --mode-break-soft:#e6f0fb; --mode-long-color:#7f77dd; --mode-long-soft:#eeedfe; }
        body.theme-dark { --mode-break-color:#60a5e0; --mode-break-soft:#0d1e30; --mode-long-color:#a57fdd; --mode-long-soft:#1e1630; }
        /* ── Micro-animações botão iniciar ── */
        @keyframes btn-pulse { 0%{box-shadow:0 0 0 0 rgba(90,143,94,.4)} 70%{box-shadow:0 0 0 10px rgba(90,143,94,0)} 100%{box-shadow:0 0 0 0 rgba(90,143,94,0)} }
        .start-btn:not(:disabled):active { animation:btn-pulse .4s ease-out; }
        @keyframes icon-bounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-3px)} }
        .start-btn:hover .bi { animation:icon-bounce .3s ease; }
        /* ── Onboarding ── */
        #onboarding-overlay .ob-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9990; }
        #onboarding-overlay .ob-tooltip { position:fixed; z-index:9995; background:var(--surface,#fff); border:1px solid var(--border,#e0e0da); border-radius:14px; padding:1.1rem 1.25rem; max-width:270px; box-shadow:0 8px 32px rgba(0,0,0,.18); }
        .ob-tooltip strong { display:block; font-size:1rem; font-weight:800; margin-bottom:.4rem; color:var(--text-primary,#2c2c2a); }
        .ob-tooltip p { font-size:.85rem; color:var(--text-secondary,#5a5a56); margin:.3rem 0 .8rem; line-height:1.5; }
        .ob-footer { display:flex; justify-content:space-between; align-items:center; }
        .ob-btn-skip { background:none; border:none; color:var(--text-muted,#8a8a84); font-size:.8rem; cursor:pointer; font-family:inherit; }
        .ob-btn-next { background:var(--accent,#5a8f5e); color:#fff; border:none; border-radius:99px; padding:.4rem 1.1rem; font-size:.85rem; font-weight:700; cursor:pointer; font-family:inherit; }
        .ob-dots { display:flex; gap:5px; justify-content:center; margin-top:.6rem; }
        .ob-dot { width:6px; height:6px; border-radius:50%; background:var(--border,#e0e0da); }
        .ob-dot.active { background:var(--accent,#5a8f5e); }

/* ═══════════════════════════════════════════════════
   CELEBRAÇÃO + CONFETTI
   ═══════════════════════════════════════════════════ */

#celebration-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    pointer-events: none;
    animation: celebration-in .3s ease-out forwards;
}
#celebration-overlay.celebration-fade-out {
    animation: celebration-out .35s ease-in forwards;
}

@keyframes celebration-in  { from { opacity:0 } to { opacity:1 } }
@keyframes celebration-out { from { opacity:1 } to { opacity:0 } }

.celebration-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    animation: celebration-pop .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes celebration-pop {
    from { transform: scale(.4); opacity:0; }
    to   { transform: scale(1);  opacity:1; }
}

.celebration-number {
    font-size: 5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.celebration-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    letter-spacing: .04em;
}
.celebration-emoji {
    font-size: 2.5rem;
    animation: celebration-spin 1s ease infinite;
}
@keyframes celebration-spin {
    0%,100% { transform: rotate(-8deg) scale(1); }
    50%      { transform: rotate(8deg) scale(1.15); }
}

/* Partículas de confetti */
.confetti-particle {
    position: absolute;
    top: -10px;
    animation: confetti-fall linear forwards;
    border-radius: 2px;
}
@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   ANIMAÇÕES DO ANEL
   ═══════════════════════════════════════════════════ */

/* Entrada suave ao iniciar */
@keyframes ring-entry-anim {
    0%   { stroke-dashoffset: var(--ring-full); opacity: .3; }
    100% { stroke-dashoffset: var(--ring-full); opacity: 1; }
}
.progress-ring-fg.ring-entry {
    animation: ring-entry-anim .5s ease-out forwards;
}

/* Flash de preenchimento ao concluir */
@keyframes ring-complete-anim {
    0%   { stroke-dashoffset: 0; stroke: var(--ring-color, var(--accent)); opacity: 1; }
    50%  { stroke-dashoffset: 0; stroke: #fff; opacity: .9; }
    100% { stroke-dashoffset: 0; stroke: var(--ring-color, var(--accent)); opacity: 1; }
}
.progress-ring-fg.ring-complete {
    animation: ring-complete-anim .7s ease-in-out forwards;
}

/* ═══════════════════════════════════════════════════
   RESET CICLO BUTTON
   ═══════════════════════════════════════════════════ */

.counters-container {
    display: flex; gap: 1.5rem; margin-top: auto;
    color: var(--text-muted); font-size: .82rem; font-weight: 700;
    align-items: center;
}
.reset-cycle-btn {
    background: none; border: none;
    font-size: .9rem; color: var(--text-muted);
    cursor: pointer; padding: 2px 5px;
    border-radius: 6px; line-height: 1;
    transition: color .15s, background .15s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    opacity: .6;
}
.reset-cycle-btn:hover { color: var(--accent); background: var(--accent-soft); opacity: 1; }

/* ═══════════════════════════════════════════════════
   HEATMAP DE ATIVIDADE
   ═══════════════════════════════════════════════════ */

.heatmap-wrap {
    user-select: none;
    padding: .25rem 0;
}

.heatmap-months {
    display: grid;
    gap: 2px;
    margin-bottom: 3px;
    padding-left: 34px; /* alinha com a grade */
}
.heatmap-month {
    font-size: .64rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: .03em;
}

.heatmap-body {
    display: flex;
    gap: 4px;
}

.heatmap-day-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}
.heatmap-day-labels span {
    font-size: .58rem;
    color: var(--text-muted);
    height: 11px;
    line-height: 11px;
    width: 22px;
    text-align: right;
    padding-right: 3px;
}

.heatmap-grid {
    display: grid;
    grid-auto-flow: column;
    gap: 2px;
    grid-template-rows: repeat(7, 11px);
}

.heatmap-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.heatmap-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    cursor: default;
    transition: opacity .15s;
}
.heatmap-cell:hover { opacity: .75; }

/* Níveis de intensidade */
.heatmap-cell.level-0 { background: var(--ring-bg); }
.heatmap-cell.level-1 { background: var(--accent); opacity: .30; }
.heatmap-cell.level-2 { background: var(--accent); opacity: .55; }
.heatmap-cell.level-3 { background: var(--accent); opacity: .78; }
.heatmap-cell.level-4 { background: var(--accent); opacity: 1;    }

.heatmap-today {
    outline: 1.5px solid var(--accent);
    outline-offset: 1px;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: .6rem;
    padding-left: 26px;
    font-size: .65rem;
    color: var(--text-muted);
}
.heatmap-legend .heatmap-cell { cursor: default; }

/* Responsive: heatmap menor no mobile */
@media (max-width: 480px) {
    .heatmap-cell          { width: 9px; height: 9px; }
    .heatmap-grid          { grid-template-rows: repeat(7, 9px); }
    .heatmap-day-labels span { height: 9px; line-height: 9px; }
}