:root{
  --bg:#0a0a0a;
  --bg-card:#141414;
  --bg-card-2:#1c1c1c;
  --linha:#262626;
  --texto:#f5f5f5;
  --texto-2:#a3a3a3;
  --texto-3:#737373;
  --laranja:#F26B1D;
  --verde:#22C55E;
  --amarelo:#FACC15;
  --vermelho:#EF4444;
  --azul:#60A5FA;
  --rosa:#F472B6;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bot:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.4; overscroll-behavior-y:none;}
body{padding-top:calc(120px + var(--safe-top)); padding-bottom:calc(80px + var(--safe-bot));}

button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select,textarea{font-family:inherit; font-size:16px;}

/* TOPBAR */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--linha);
  padding:calc(12px + var(--safe-top)) 16px 12px;
}
.topbar-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.logo{font-weight:800; letter-spacing:.5px; font-size:18px;}
.logo span{color:var(--laranja);}
.ano-progresso{font-size:13px; color:var(--texto-2); font-weight:600;}

.filtro-pessoa{display:flex; gap:6px; background:var(--bg-card); padding:4px; border-radius:12px;}
.fp-btn{flex:1; padding:8px 6px; border-radius:8px; font-size:13px; font-weight:600; color:var(--texto-2);}
.fp-btn.ativo{background:var(--laranja); color:#fff;}

/* MAIN */
main{max-width:600px; margin:0 auto;}
.tela{display:none; padding:16px;}
.tela.ativa{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* HOME — HERO */
.hero{
  background:linear-gradient(135deg, #1c1c1c 0%, #141414 100%);
  border:1px solid var(--linha); border-radius:20px; padding:24px;
  text-align:center; margin-bottom:20px;
}
.hero-numero{font-size:64px; font-weight:800; line-height:1; color:var(--laranja);}
.hero-label{color:var(--texto-2); margin-top:8px; margin-bottom:20px; font-size:14px;}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.hero-stats > div{background:rgba(255,255,255,.04); padding:10px 6px; border-radius:12px;}
.hero-stats strong{display:block; font-size:22px; font-weight:700;}
.hero-stats span{font-size:11px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.5px;}

.titulo-secao{font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--texto-3); margin:24px 0 12px; font-weight:700;}
.titulo-tela{font-size:26px; font-weight:800; margin:8px 0 20px;}
.sub{color:var(--texto-2); margin:-12px 0 16px; font-size:14px;}

/* CATEGORIAS GRID */
.categorias-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.cat-card{
  background:var(--bg-card); border:1px solid var(--linha); border-radius:16px;
  padding:16px; text-align:left; position:relative; overflow:hidden;
  transition:transform .15s;
}
.cat-card:active{transform:scale(.97);}
.cat-card .cat-emoji{font-size:24px; display:block; margin-bottom:6px;}
.cat-card .cat-nome{font-weight:700; font-size:14px; margin-bottom:4px;}
.cat-card .cat-info{font-size:11px; color:var(--texto-3);}
.cat-card .cat-bar{
  position:absolute; left:0; bottom:0; height:3px; background:var(--laranja);
}

/* PROXIMOS PRAZOS */
.proximos-prazos{display:flex; flex-direction:column; gap:8px;}
.prazo-item{
  display:flex; gap:12px; align-items:center;
  background:var(--bg-card); border:1px solid var(--linha);
  border-radius:12px; padding:12px;
}
.prazo-data{
  width:48px; flex-shrink:0; text-align:center;
  background:var(--bg-card-2); border-radius:10px; padding:6px 0;
}
.prazo-data .dia{font-size:18px; font-weight:800; line-height:1;}
.prazo-data .mes{font-size:10px; color:var(--texto-3); text-transform:uppercase;}
.prazo-info{flex:1; min-width:0;}
.prazo-titulo{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prazo-cat{font-size:11px; color:var(--texto-3); margin-top:2px;}
.prazo-dono{
  font-size:10px; padding:3px 6px; border-radius:6px;
  text-transform:uppercase; letter-spacing:.5px; font-weight:700; flex-shrink:0;
}

/* CATEGORIA — RESUMO */
.voltar{color:var(--laranja); font-weight:600; padding:8px 0; font-size:14px; margin-bottom:8px;}
.cat-resumo{
  background:var(--bg-card); border:1px solid var(--linha);
  border-radius:14px; padding:14px; margin-bottom:16px;
  display:flex; justify-content:space-around; text-align:center;
}
.cat-resumo > div strong{display:block; font-size:20px; font-weight:800;}
.cat-resumo > div span{font-size:11px; color:var(--texto-3); text-transform:uppercase;}

/* OBJETIVOS LISTA */
.objetivos-lista{display:flex; flex-direction:column; gap:10px;}
.obj-card{
  background:var(--bg-card); border:1px solid var(--linha);
  border-radius:14px; padding:14px; transition:transform .15s;
  position:relative; overflow:hidden;
}
.obj-card:active{transform:scale(.98);}
.obj-card .obj-card-header{display:flex; justify-content:space-between; align-items:start; gap:8px; margin-bottom:6px;}
.obj-card .dono-tag{
  font-size:10px; padding:3px 8px; border-radius:6px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; flex-shrink:0;
}
.dono-tag.juliana{background:rgba(244,114,182,.15); color:var(--rosa);}
.dono-tag.wylle{background:rgba(96,165,250,.15); color:var(--azul);}
.dono-tag.casal{background:rgba(242,107,29,.15); color:var(--laranja);}
.obj-card-titulo{font-size:15px; font-weight:600; line-height:1.3;}
.obj-card-meta{display:flex; gap:10px; align-items:center; margin-top:10px; font-size:12px;}
.status-pill{padding:3px 8px; border-radius:6px; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.5px;}
.status-pill.fazendo{background:rgba(250,204,21,.15); color:var(--amarelo);}
.status-pill.feito{background:rgba(34,197,94,.15); color:var(--verde);}
.status-pill.standby{background:rgba(115,115,115,.2); color:var(--texto-2);}
.status-pill.desistimos{background:rgba(239,68,68,.15); color:var(--vermelho);}
.tarefas-count{color:var(--texto-3); font-size:12px;}
.prazo-mini{color:var(--texto-2); font-size:12px; margin-left:auto;}

.obj-card.feito .obj-card-titulo{text-decoration:line-through; color:var(--texto-3);}

/* TELA OBJETIVO */
.obj-header{margin-bottom:20px;}
.obj-dono{font-size:11px; padding:4px 10px; border-radius:6px; display:inline-block;
  font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}
.obj-dono.juliana{background:rgba(244,114,182,.15); color:var(--rosa);}
.obj-dono.wylle{background:rgba(96,165,250,.15); color:var(--azul);}
.obj-dono.casal{background:rgba(242,107,29,.15); color:var(--laranja);}
.obj-titulo{font-size:24px; font-weight:800; margin:0 0 16px; outline:none; line-height:1.25;}
.obj-titulo:focus{background:rgba(255,255,255,.04); padding:6px; border-radius:8px;}
.obj-meta{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.campo label{display:block; font-size:11px; color:var(--texto-3); text-transform:uppercase; margin-bottom:4px; letter-spacing:.5px; font-weight:700;}
.campo select, .campo input{
  width:100%; background:var(--bg-card); border:1px solid var(--linha); border-radius:10px;
  padding:10px 12px; color:var(--texto); -webkit-appearance:none; appearance:none;
  font-weight:600;
}
.campo select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a3a3a3' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}

/* TAREFAS LISTA */
.tarefas-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;}
.tarefa-item{
  background:var(--bg-card); border:1px solid var(--linha); border-radius:12px;
  padding:12px; display:flex; align-items:center; gap:12px;
}
.tarefa-check{
  width:22px; height:22px; border:2px solid var(--linha); border-radius:7px;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:all .15s;
}
.tarefa-check.feito{background:var(--verde); border-color:var(--verde);}
.tarefa-check.feito::after{content:"✓"; color:#fff; font-weight:800; font-size:14px;}
.tarefa-titulo{flex:1; font-size:14px; outline:none;}
.tarefa-titulo:focus{background:rgba(255,255,255,.04); padding:4px; border-radius:6px;}
.tarefa-item.feito .tarefa-titulo{text-decoration:line-through; color:var(--texto-3);}
.tarefa-prazo{font-size:11px; color:var(--texto-3);}
.tarefa-del{color:var(--texto-3); font-size:18px; padding:4px 8px;}

.nova-tarefa{display:flex; gap:8px; margin-top:14px;}
.nova-tarefa input{
  flex:1; background:var(--bg-card); border:1px solid var(--linha);
  border-radius:10px; padding:12px; color:var(--texto);
}
.nova-tarefa button{
  width:46px; background:var(--laranja); border-radius:10px; color:#fff;
  font-size:24px; font-weight:700;
}
.btn-excluir{
  width:100%; margin-top:30px; padding:14px; background:rgba(239,68,68,.1);
  color:var(--vermelho); border-radius:10px; font-weight:600;
}

/* SEMANA */
.semana-lista{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.semana-item{
  background:var(--bg-card); border:1px solid var(--linha); border-radius:12px;
  padding:14px;
}
.semana-pessoa{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px;}
.semana-titulo{font-size:14px; outline:none;}
.semana-acoes{display:flex; gap:6px; margin-top:10px;}
.semana-acoes button{
  font-size:11px; padding:6px 10px; border-radius:6px; background:var(--bg-card-2);
  color:var(--texto-2); font-weight:600;
}
.semana-acoes button.ativo{background:var(--verde); color:#fff;}

/* CONQUISTAS */
.conquistas-lista{display:flex; flex-direction:column; gap:8px;}
.conquista-item{
  background:linear-gradient(135deg, rgba(34,197,94,.08) 0%, var(--bg-card) 100%);
  border:1px solid rgba(34,197,94,.2); border-radius:12px; padding:14px;
  display:flex; gap:10px; align-items:start;
}
.conquista-item .ico-troféu{font-size:18px; flex-shrink:0;}

/* FAB */
.btn-fab{
  position:fixed; bottom:calc(96px + var(--safe-bot)); right:20px; z-index:40;
  width:56px; height:56px; border-radius:28px; background:var(--laranja);
  color:#fff; font-size:30px; font-weight:300;
  box-shadow:0 8px 24px rgba(242,107,29,.4);
}
.btn-fab:active{transform:scale(.94);}

/* BOTTOM NAV */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:rgba(10,10,10,.95); backdrop-filter:blur(20px);
  border-top:1px solid var(--linha);
  display:flex; padding:8px 0 calc(8px + var(--safe-bot));
}
.nav-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px; color:var(--texto-3); font-size:10px; font-weight:600;
}
.nav-btn .ico{font-size:22px;}
.nav-btn.ativo{color:var(--laranja);}