:root{
  --bg-1:#150D28;
  --bg-2:#1E1440;
  --surface:#271B4C;
  --surface-2:#312358;
  --surface-3:#3B2B69;
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.14);
  --text:#F5EFFF;
  --text-dim:#BBA9E3;
  --text-faint:#7C6DA1;
  --accent:#B296FF;
  --accent-strong:#8A5CF6;
  --accent-soft:rgba(178,150,255,0.14);
  --gold:#FFCF66;
  --danger:#FF7A8A;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:12px;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(circle at 10% -10%, rgba(178,150,255,0.18), transparent 42%),
    radial-gradient(circle at 100% 10%, rgba(255,207,102,0.07), transparent 38%),
    linear-gradient(165deg, var(--bg-1), var(--bg-2) 65%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  overflow-x:hidden;
}
button{font-family:inherit;}
.app{
  width:100%;
  max-width:480px;
  min-height:100vh;
  position:relative;
  display:flex;
  flex-direction:column;
}

/* ---------- Shared screen layout ---------- */
.screen{
  display:none;
  flex-direction:column;
  padding:26px 20px 0 20px;
  flex:1;
  animation:screenIn .28s ease both;
}
.screen.active{display:flex;}
@keyframes screenIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.eyebrow{
  font-family:var(--font-display);
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 6px;
}
.screen h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:25px;
  letter-spacing:-0.01em;
  margin:0 0 16px;
  display:flex;
  align-items:center;
  gap:9px;
}
#greetIcon{font-size:22px; line-height:1;}
.scroll-area{
  flex:1;
  overflow-y:auto;
  padding-bottom:150px;
  -webkit-overflow-scrolling:touch;
}
.scroll-area::-webkit-scrollbar{display:none;}

/* ---------- Date navigator ---------- */
.date-nav{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:0 0 6px;
}
.date-nav-btn{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s, transform .15s;
}
.date-nav-btn:active{transform:scale(0.88); background:var(--surface-2);}
.date-nav-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.date-nav-label{
  flex:1; text-align:center; cursor:pointer;
  font-family:var(--font-display); font-weight:600; font-size:13.5px;
  color:var(--text-dim); text-transform:capitalize;
  padding:8px 6px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.date-nav-label:active{background:var(--surface);}
.date-nav-label svg{width:13px; height:13px; stroke:var(--text-faint); fill:none; stroke-width:2;}

/* ---------- Progress ---------- */
.progress-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:16px 16px 14px;
  margin-bottom:18px;
}
.progress-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.progress-top .label{font-size:13px; color:var(--text-dim); font-weight:500;}
.progress-top .count{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text);}
.progress-track{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; width:0%; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .45s cubic-bezier(.4,0,.2,1);}
.progress-track.mini{height:6px;}

/* ---------- Category / muscle / reps chips ---------- */
.chip-row{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:14px; margin-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0;
  display:flex; align-items:center; gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--text-dim);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s;
}
.chip.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

/* ---------- Task rows (shared: Hoje / Rotina / Compras / Treino) ---------- */
.list{display:flex; flex-direction:column; gap:10px;}
.row-wrap{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--danger);
}
.row-delete{
  position:absolute; top:0; right:0; bottom:0; width:84px;
  display:flex; align-items:center; justify-content:center;
  background:var(--danger);
  border:none;
  color:#2b0a10;
  font-size:19px;
}
.row-content{
  position:relative;
  display:flex; align-items:center; gap:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 12px 14px 14px;
  touch-action:pan-y;
  will-change:transform;
}
.checkbox{
  flex-shrink:0; width:24px;height:24px; border-radius:50%;
  border:2px solid var(--accent); background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .15s;
}
.checkbox:active{transform:scale(0.88);}
.checkbox svg{width:13px;height:13px; opacity:0; transform:scale(0.5); transition:opacity .15s, transform .15s;}
.row-content.done .checkbox{background:linear-gradient(135deg,var(--accent),var(--accent-strong)); border-color:var(--accent-strong);}
.row-content.done .checkbox svg{opacity:1; transform:scale(1);}
.row-body{flex:1; min-width:0;}
.row-text{font-size:15.5px; line-height:1.35; color:var(--text); word-break:break-word;}
.row-content.done .row-text{color:var(--text-faint); text-decoration:line-through; text-decoration-color:var(--text-faint); opacity:.75;}
.row-meta{display:flex; gap:6px; align-items:center; margin-top:3px; font-size:12px; color:var(--text-faint);}
.row-meta .cat-icon{font-size:12px;}
.row-qty{
  flex-shrink:0; font-size:12px; color:var(--text-dim); background:var(--surface-2);
  padding:4px 9px; border-radius:999px; font-weight:500;
}
.row-x{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  border:none; background:transparent; color:var(--text-faint);
  font-size:13px; display:flex; align-items:center; justify-content:center;
  transition:background .18s, color .18s, transform .15s;
}
.row-x:active{transform:scale(0.85); background:rgba(255,122,138,0.14); color:var(--danger);}

/* ---------- Confirm modal ---------- */
.confirm-backdrop{
  position:fixed; inset:0; background:rgba(10,6,22,0.65);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .22s; z-index:70;
}
.confirm-backdrop.show{opacity:1; pointer-events:auto;}
.confirm-card{
  width:100%; max-width:300px; background:var(--bg-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:22px 20px; text-align:center;
  transform:scale(0.9); transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.confirm-backdrop.show .confirm-card{transform:scale(1);}
.confirm-card p{font-size:14.5px; color:var(--text); margin:0 0 18px; line-height:1.5;}
.confirm-actions{display:flex; gap:10px;}
.confirm-actions button{
  flex:1; border:none; border-radius:999px; padding:11px; font-size:13.5px;
  font-family:var(--font-display); font-weight:600; cursor:pointer;
}
#confirmCancel{background:var(--surface); color:var(--text-dim); border:1px solid var(--line);}
#confirmOk{background:var(--danger); color:#2b0a10;}

.empty{
  text-align:center; color:var(--text-faint); font-size:14px;
  padding:70px 24px; line-height:1.6;
}
.empty .glyph{font-size:30px; display:block; margin-bottom:12px; color:var(--accent);}

/* ---------- Section header (Compras clear button) ---------- */
.section-actions{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.text-btn{
  background:none; border:none; color:var(--text-dim); font-size:13px; font-weight:600;
  padding:6px 4px; cursor:pointer;
}
.text-btn:active{opacity:.6;}
.text-btn.danger{color:var(--danger);}

/* ---------- Tab bar ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center;
  z-index:30;
  pointer-events:none;
}
.tabbar-inner{
  pointer-events:auto;
  width:100%; max-width:480px;
  display:flex;
  background:rgba(30,20,64,0.86);
  backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding:8px 4px calc(8px + var(--safe-bottom));
}
.tab-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:var(--text-faint);
  padding:6px 1px; cursor:pointer;
  transition:color .18s;
}
.tab-btn svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;}
.tab-btn span{font-size:10.2px; font-weight:600; font-family:var(--font-display);}
.tab-btn.active{color:var(--accent);}
.tab-btn.active svg{stroke:var(--accent);}

/* ---------- FAB ---------- */
.fab{
  position:fixed;
  right:calc(50% - 240px + 20px);
  bottom:calc(78px + var(--safe-bottom));
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  border:none; color:#170F2B; font-size:28px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px rgba(138,92,246,0.45);
  z-index:31;
  transition:transform .15s;
}
@media (max-width:480px){ .fab{ right:20px; } }
.fab:active{transform:scale(0.9);}
.fab.hidden{display:none;}

/* ---------- Bottom sheet ---------- */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(10,6,22,0.6);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:40;
}
.sheet-backdrop.show{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; justify-content:center;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  z-index:41;
  max-height:88vh;
}
.sheet.show{transform:translateY(0);}
.sheet-inner{
  width:100%; max-width:480px;
  background:var(--bg-2);
  border:1px solid var(--line-strong);
  border-bottom:none;
  border-radius:24px 24px 0 0;
  padding:14px 20px calc(24px + var(--safe-bottom));
  max-height:88vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sheet-handle{width:36px; height:4px; border-radius:999px; background:var(--line-strong); margin:0 auto 18px;}
.sheet-title{font-family:var(--font-display); font-weight:700; font-size:17px; margin:0 0 16px;}
.sheet input[type="text"], .sheet input[type="number"]{
  width:100%; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 14px; color:var(--text);
  font-size:15px; outline:none; margin-bottom:14px;
}
.sheet input[type="text"]:focus, .sheet input[type="number"]:focus{border-color:var(--accent);}
.sheet .field-label{font-size:12px; color:var(--text-faint); font-weight:600; margin:0 0 8px; text-transform:uppercase; letter-spacing:.06em;}
.cat-picker{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.cat-option{
  display:flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); color:var(--text-dim); font-size:13px; font-weight:500; cursor:pointer;
}
.cat-option.selected{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}
.sheet-submit{
  width:100%; border:none; border-radius:999px; padding:15px;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#170F2B; font-family:var(--font-display); font-weight:700; font-size:15px; cursor:pointer;
}
.sheet-submit:disabled{opacity:.4;}

/* ---------- Calendar sheet ---------- */
.cal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.cal-month-label{font-family:var(--font-display); font-weight:700; font-size:16px; text-transform:capitalize;}
.cal-nav-btn{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer;
}
.cal-nav-btn:active{transform:scale(0.88); background:var(--surface-2);}
.cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px;}
.cal-weekdays span{text-align:center; font-size:11px; color:var(--text-faint); font-weight:600;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:13.5px; color:var(--text-dim);
  background:transparent; border:none; cursor:pointer; position:relative;
}
.cal-day.muted{color:var(--text-faint); opacity:.35;}
.cal-day.today{color:var(--accent); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--accent);}
.cal-day.selected{background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#170F2B; font-weight:700; box-shadow:none;}
.cal-day .dot{position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--gold);}
.cal-day.selected .dot{background:#170F2B;}
.cal-today-btn{
  width:100%; margin-top:16px; border:none; border-radius:999px; padding:13px;
  background:var(--surface); color:var(--text-dim);
  font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer;
}
.cal-today-btn:active{opacity:.7;}

/* ---------- Resumo ---------- */
.stat-cards{display:flex; gap:10px; margin-bottom:20px;}
.stat-card{
  flex:1; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); padding:16px 14px; text-align:center;
}
.stat-card .num{font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--text);}
.stat-card .num.gold{color:var(--gold);}
.stat-card .lbl{font-size:11.5px; color:var(--text-faint); margin-top:4px;}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 16px; margin-bottom:16px;}
.panel h3{font-family:var(--font-display); font-size:14px; margin:0 0 14px; color:var(--text-dim); font-weight:600;}
.bars{display:flex; align-items:flex-end; gap:8px; height:90px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end;}
.bar-fill{width:100%; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,var(--accent),var(--accent-strong)); min-height:4px; transition:height .4s ease;}
.bar-col .day-lbl{font-size:10.5px; color:var(--text-faint);}
.heatmap{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.heat-cell{aspect-ratio:1; border-radius:6px; background:var(--surface-2); border:1px solid var(--line);}
.heat-cell.star{background:radial-gradient(circle at 35% 30%,#fff6da,var(--gold) 65%); border-color:transparent;}
.heat-cell.partial{background:var(--accent-soft); border-color:var(--accent);}

/* ---------- Treino ---------- */
.workout-total-line{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-dim); margin-bottom:16px;
}
.workout-total-line b{color:var(--gold); font-family:var(--font-display);}
.workout-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 16px 14px; margin-bottom:14px;
}
.workout-card-top{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px;}
.workout-mini-diagram{flex-shrink:0; width:64px; height:52px;}
.workout-mini-diagram svg{width:100%; height:100%;}
.workout-info{flex:1; min-width:0;}
.workout-name{font-family:var(--font-display); font-weight:700; font-size:15.5px; margin:0 0 4px;}
.workout-day-row{margin-bottom:6px;}
.workout-day-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; font-family:var(--font-display);
  color:var(--text-dim); background:var(--surface-2);
  padding:3px 9px; border-radius:999px;
}
.workout-day-tag.today{color:#170F2B; background:linear-gradient(135deg,var(--accent),var(--gold));}
.workout-muscles{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px;}
.workout-muscle-tag{
  font-size:10.5px; color:var(--accent); background:var(--accent-soft);
  padding:3px 8px; border-radius:999px; font-weight:600;
}
.workout-progress-row{display:flex; align-items:center; gap:8px;}
.workout-progress-row .progress-track{flex:1;}
.workout-progress-row .count{font-size:11.5px; color:var(--text-faint); font-family:var(--font-display); font-weight:600; white-space:nowrap;}
.workout-card-actions{display:flex; gap:6px; flex-shrink:0;}
.icon-btn{
  width:28px; height:28px; border-radius:50%; border:none; background:var(--surface-2);
  color:var(--text-faint); display:flex; align-items:center; justify-content:center; font-size:13px; cursor:pointer;
}
.icon-btn:active{transform:scale(0.88);}
.workout-exercises{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.add-exercise-btn{
  width:100%; border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm);
  background:transparent; color:var(--text-dim); font-size:13.5px; font-weight:600;
  padding:11px; cursor:pointer; font-family:var(--font-display);
}
.add-exercise-btn:active{background:var(--surface-2);}
.workout-last{font-size:11px; color:var(--text-faint); margin-top:8px;}

/* Body diagram (used in sheet picker + mini previews) */
.body-diagram-wrap{
  display:flex; flex-direction:column; align-items:center; margin-bottom:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 10px 6px;
}
.body-diagram-wrap svg{width:100%; max-width:260px; height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35));}
.workout-mini-diagram svg{filter:drop-shadow(0 2px 5px rgba(0,0,0,0.3));}
.body-diagram-caption{font-size:11px; color:var(--text-faint); text-align:center; margin-bottom:16px;}
.muscle-zone{fill:url(#skinGradient); stroke:rgba(255,255,255,0.05); stroke-width:0.6; transition:fill .18s, filter .18s;}
.muscle-zone.pickable{cursor:pointer;}
.muscle-zone.pickable:active{opacity:.85;}
.muscle-zone.active{fill:url(#muscleGradient); stroke:rgba(255,255,255,0.25); filter:drop-shadow(0 0 6px rgba(138,92,246,0.7));}
.muscle-outline{fill:url(#skinGradient); stroke:none;}
.muscle-figure-label{font-size:10px; fill:var(--text-faint); text-anchor:middle; font-family:var(--font-display); font-weight:600; letter-spacing:.06em; text-transform:uppercase;}

/* Reps picker (predefined values) */
.reps-picker{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.reps-option{
  padding:9px 15px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); color:var(--text-dim); font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:var(--font-display);
}
.reps-option.selected{background:var(--accent-soft); border-color:var(--accent); color:var(--accent);}

/* ---------- Celebration / modais em tela cheia ---------- */
.celebration{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(12,7,26,0.75); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:60; padding:24px;
}
.celebration.show{opacity:1; pointer-events:auto;}
.celebration-card{text-align:center; max-width:320px; transform:scale(0.85); transition:transform .35s cubic-bezier(.34,1.56,.64,1); position:relative;}
.celebration.show .celebration-card{transform:scale(1);}
.star-big{font-size:60px; display:block; margin-bottom:8px; filter:drop-shadow(0 0 22px rgba(255,207,102,0.6)); animation:pop .5s ease .08s both;}
@keyframes pop{0%{transform:scale(0) rotate(-30deg);}60%{transform:scale(1.15) rotate(6deg);}100%{transform:scale(1) rotate(0);}}
.celebration h2{font-family:var(--font-display); font-size:21px; margin:0 0 8px;}
.celebration p{color:var(--text-dim); font-size:13.5px; margin:0 0 20px; line-height:1.5;}
.celebration button{border:none; border-radius:999px; padding:12px 26px; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#170F2B; font-family:var(--font-display); font-weight:700; font-size:14px; cursor:pointer;}
.particle{position:absolute; border-radius:50%; pointer-events:none; animation:pfloat 1.6s ease-out forwards;}
@keyframes pfloat{0%{opacity:0; transform:translateY(0) scale(.4);}15%{opacity:1;}100%{opacity:0; transform:translateY(-120px) scale(1);}}

@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important;}}