/* ================= V4: HOME ENXUTA + FLUXO COM ETAPAS ================= */
.hero-date { margin-top: 2px; }
.hero-sub { margin-top: 30px; }
.sheet-main { padding-bottom: calc(var(--safe-b) + 110px); }

.menu { display: flex; flex-direction: column; background: var(--tile-bg); border-radius: 20px; padding: 4px 0; box-shadow: var(--card-shadow); margin-top: 4px; }
.menu-item, .switch-row, .day-opt { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-align: left; }
.menu-item + .menu-item { border-top: 1px solid var(--border); }
.menu-item > svg { width: 18px; height: 18px; color: var(--grey-450); flex: none; }
.menu-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--surface); display: grid; place-items: center; flex: none; color: var(--accent-icon); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.menu-ico svg { width: 18px; height: 18px; }
.menu-text { flex: 1; min-width: 0; }
.menu-text b { display: block; font-size: 16px; font-weight: 500; }
.menu-text small { display: block; font-size: 13px; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .btn svg { width: 18px; height: 18px; }

/* Sheets: dias, conquistas, ajustes */
.day-list { display: grid; gap: 10px; }
.day-opt { border: 1.5px solid var(--grey-150); border-radius: 18px; background: var(--white); }
.day-opt[aria-checked="true"] { border-color: var(--grey-950); }
.day-opt[aria-checked="true"] .theme-check { background: var(--grey-950); border-color: var(--grey-950); }
.day-opt[aria-checked="true"] .theme-check svg { opacity: 1; }
.day-badge { width: 48px; height: 48px; border-radius: 14px; background: var(--grey-50); display: grid; place-items: center; font-size: 15px; font-weight: 500; flex: none; }
.badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.badge { border-radius: 18px; background: var(--grey-50); padding: 16px 14px; text-align: center; color: var(--grey-400); }
.badge .badge-ico { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; background: var(--grey-100); }
.badge .badge-ico svg { width: 26px; height: 26px; }
.badge b { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.badge small { display: block; font-size: 12px; margin-top: 4px; line-height: 1.35; }
.badge.on { background: var(--white); color: var(--text-tertiary); box-shadow: 0 6px 20px -12px rgba(0,0,0,0.25); }
.badge.on .badge-ico { background: linear-gradient(140deg, #FFD27A, #FF9F45); color: #5A2E00; box-shadow: 0 6px 16px -6px rgba(255,140,40,0.6); }
.badge.on b { color: var(--text-primary); }
.badges.new .badge { animation: badgeIn 0.7s var(--spring) both; }
@keyframes badgeIn { from { opacity: 0; transform: scale(0.6) rotate(-6deg); } }
.set-group { margin-bottom: 22px; }
.switch-row { border-radius: 18px; background: var(--grey-50); }
.switch { margin-left: auto; width: 51px; height: 31px; border-radius: 999px; background: var(--grey-150); position: relative; transition: background 0.3s ease; flex: none; }
.switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: transform 0.35s var(--spring); }
.switch-row[aria-checked="true"] .switch { background: #34C759; }
.switch-row[aria-checked="true"] .switch i { transform: translateX(20px); }
.confirm-text { font-size: 16px; line-height: 1.5; color: var(--text-secondary); margin: -4px 0 22px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sheet-media video, .sheet-media img { height: 100%; width: auto; max-height: 230px; }
.sheet-media.has-video, .media-card.has-video { background: #FFFFFF; }

/* Player: barra segmentada */
.seg-progress { display: flex; gap: 4px; height: 6px; margin: -2px 0 6px; }
.seg-progress span { position: relative; background: var(--grey-150); border-radius: 3px; overflow: hidden; }
.seg-progress i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent); border-radius: 3px; transition: width 0.7s var(--spring); }

.view { display: none; flex-direction: column; gap: 12px; }
.player[data-phase="intro"] .view-intro, .player[data-phase="countdown"] .view-intro { display: flex; animation: fadeIn 0.35s ease; }
.player[data-phase="work"] .view-work, .player[data-phase="done"] .view-work { display: flex; animation: fadeIn 0.35s ease; }
.player[data-phase="rest"] .view-rest { display: flex; animation: fadeIn 0.35s ease; }
.media-card video { height: 100%; width: 100%; object-fit: contain; }

.intro-card { background: var(--surface); border-radius: 22px; padding: 18px 18px 16px; box-shadow: var(--card-shadow); }
.intro-kicker { font-size: 13px; color: var(--text-tertiary); }
.intro-name { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin: 4px 0 2px; }
.intro-card .tags { margin: 12px 0 0; }
.start-btn { position: relative; overflow: hidden; height: 58px; font-size: 17px; }
.start-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--prep, 0%); background: rgba(255,255,255,0.18); transition: width 0.12s linear; }
.start-btn span { position: relative; }
.prep { opacity: 0.75; font-variant-numeric: tabular-nums; }
.intro-actions { display: flex; justify-content: space-between; padding: 0 4px; }
.intro-actions .link-btn svg { width: 15px; height: 15px; }

/* Série em andamento: sinal ao vivo e tique por segundo */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--timer-muted); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #FF453A; animation: livePulse 1s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255,69,58,0.55); } 100% { box-shadow: 0 0 0 9px rgba(255,69,58,0); } }
.set-time.tick { animation: tickIn 0.22s var(--ease-out); }
@keyframes tickIn { from { transform: translateY(5px); opacity: 0.55; } to { transform: none; opacity: 1; } }
.player.paused .set-time { animation: none; opacity: 0.4; }
.player.paused .live i { background: #FFD60A; animation: none; }
.player.paused .live { color: #FFD60A; }
.player.paused .pause-btn { background: #fff; color: #000; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.steppers { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--timer-track); }
.steppers .stepper { border-top: 0; padding-top: 0; grid-template-columns: 48px 1fr 48px; }
.steppers .step-btn { width: 48px; height: 48px; border-radius: 15px; font-size: 24px; }
.steppers .step-val span { font-size: 32px; }
.steppers .step-val small { margin-top: 4px; }
#w-done { height: 58px; font-size: 17px; }
.btn svg { width: 19px; height: 19px; }

/* Overlays */
.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.overlay.show { opacity: 1; pointer-events: auto; }
.countdown { background: rgba(10,10,12,0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; text-align: center; }
.count-ring { width: 210px; height: 210px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,0.18); margin: 0 auto; transition: border-color 0.3s ease, background 0.3s ease; }
.count-ring span { font-size: 96px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.count-ring span.pop { animation: pop 0.8s var(--spring); }
@keyframes pop { 0% { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.countdown.go .count-ring { border-color: #34C759; background: rgba(52,199,89,0.15); }
.countdown.go .count-ring span { font-size: 56px; color: #34C759; }
.countdown p { margin-top: 22px; font-size: 17px; color: rgba(255,255,255,0.75); }

.done-toast { background: rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.toast-card { width: 100%; max-width: 340px; background: var(--white); border-radius: 28px; padding: 28px 24px 22px; text-align: center; transform: scale(0.9); transition: transform 0.45s var(--spring); }
.done-toast.show .toast-card { transform: scale(1); }
.check-anim { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: #34C759; color: #fff; transform: scale(0); }
.done-toast.show .check-anim { animation: checkIn 0.6s var(--spring) 0.05s both; }
@keyframes checkIn { to { transform: scale(1); } }
.check-anim svg { width: 36px; height: 36px; }
.toast-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.toast-card p { font-size: 15px; color: var(--text-secondary); margin-top: 6px; }
.mini-progress { height: 6px; border-radius: 3px; background: var(--grey-100); margin: 18px 0 10px; overflow: hidden; }
.mini-progress i { display: block; height: 100%; width: 0; background: #34C759; border-radius: 3px; transition: width 0.9s var(--spring) 0.2s; }
.toast-card small { font-size: 13px; color: var(--text-tertiary); }

.achievement { background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 31; }
.ach-card { position: relative; width: 100%; max-width: 340px; background: var(--white); border-radius: 30px; padding: 34px 24px 22px; text-align: center; overflow: hidden; transform: translateY(30px) scale(0.92); transition: transform 0.55s var(--spring); }
.achievement.show .ach-card { transform: none; }
.ach-burst { position: absolute; left: 50%; top: 78px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,170,60,0.18) 0deg 10deg, transparent 10deg 20deg); animation: spin 14s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
.ach-ico { position: relative; width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: linear-gradient(140deg, #FFD27A, #FF9F45); color: #5A2E00; box-shadow: 0 12px 30px -10px rgba(255,140,40,0.7); }
.achievement.show .ach-ico { animation: medal 0.9s var(--spring); }
@keyframes medal { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.1) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
.ach-ico svg { width: 44px; height: 44px; }
.ach-card small { position: relative; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #E08A1E; }
.ach-card h3 { position: relative; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; }
.ach-card p { position: relative; font-size: 15px; line-height: 1.45; color: var(--text-secondary); margin: 8px 0 22px; }
.ach-card .btn { position: relative; }