:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-2:#f5f6f4;
  --ink:#111111;
  --border: var(--ink);
  --text:#111111;
  --text-muted:#4a4f4a;
  --text-faint:#7a807a;
  --green:#046a38;
  --green-soft:#e3f2e9;
  --red:#d7263d;
  --blue:#3fa9f5;
  --yellow:#f5b700;
  --shadow-off: 5px 5px 0 var(--ink);
  --shadow-off-sm: 3px 3px 0 var(--ink);
}
/* Identidade branca/preta/verde deliberada — página única de tema, sem variação dark */

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1,h2,h3{ font-family:"Baloo 2", ui-sans-serif, system-ui, sans-serif; text-wrap:balance; margin:0; color:var(--ink); }

a{ color:inherit; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

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

.shell{ max-width:1180px; margin:0 auto; padding:0 24px 96px; }

/* ---- Top bar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0 18px;
  border-bottom:3px solid var(--ink);
  margin-bottom:30px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand h1{ font-size:1.55rem; font-weight:700; letter-spacing:-.01em; }
.brand .mark{
  width:36px; height:36px; border-radius:9px;
  background:var(--green); color:#fff; border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.05rem;
}
.topbar-right{ display:flex; align-items:center; gap:12px; }
.lang-select{
  display:flex; align-items:center; gap:8px;
  padding:7px 14px 7px 11px; border-radius:999px;
  background:var(--surface); border:2px solid var(--ink);
  font-size:.85rem; color:var(--text); font-weight:500;
}
.flag{ font-size:1rem; }
.avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--yellow); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; color:var(--ink); font-weight:700;
  cursor:pointer; border-width:2px;
}
.logout-btn{
  background:var(--surface); border:2px solid var(--ink); border-radius:999px;
  padding:7px 14px; font-size:.82rem; font-weight:600; cursor:pointer;
}
.logout-btn:hover{ background:var(--surface-2); }

/* ---- Título centralizado do dashboard ---- */
.page-title{
  text-align:center; font-size:1.9rem; font-weight:700; margin:6px 0 30px;
}

/* ---- Section labels ---- */
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 12px; font-weight:500;
}

/* ---- KPI row ---- */
.kpi-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-bottom:34px;
}
.kpi{
  background:var(--surface); border:2.5px solid var(--ink); border-radius:14px;
  padding:18px 18px 16px; box-shadow:var(--shadow-off);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.kpi-label{ font-size:.8rem; color:var(--text-muted); font-weight:600; }
.kpi-icon{
  width:28px; height:28px; border-radius:8px; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}
.kpi-value{ font-size:1.75rem; font-weight:500; letter-spacing:-.01em; }
.kpi-value .unit{ font-size:1rem; color:var(--text-faint); margin-left:2px; }
.kpi-sub{ font-size:.78rem; color:var(--text-faint); }
.kpi-sub.up{ color:var(--green); font-weight:600; }

/* ---- Missões de hoje (checklist) ---- */
.quest-card{ margin-bottom:16px; }
.quest-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:12px; flex-wrap:wrap; }
.quest-points{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; border:2.5px solid var(--ink);
  background:var(--yellow); font-weight:700; font-size:.95rem;
  transition: transform .18s ease;
}
.quest-points.bump{ animation: bump .35s ease; }
@keyframes bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.quest-progress{
  height:10px; border-radius:999px; border:2px solid var(--ink);
  background:var(--surface-2); overflow:hidden; margin:14px 0 4px;
}
.quest-progress-fill{
  height:100%; background:var(--green); width:0%;
  transition: width .5s cubic-bezier(.34,1.56,.64,1);
}
.quest-progress-lbl{ font-size:.76rem; color:var(--text-faint); margin-bottom:4px; }
.quest-list{ display:flex; flex-direction:column; margin-top:10px; }
.quest-item{
  display:flex; align-items:center; gap:13px;
  padding:12px 4px; border-bottom:2px solid var(--surface-2);
  cursor:pointer; user-select:none;
}
.quest-item:last-child{ border-bottom:none; padding-bottom:2px; }
.quest-check{
  width:26px; height:26px; border-radius:7px; border:2.5px solid var(--ink);
  flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--surface); font-size:.9rem; font-weight:700; color:transparent;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
.quest-item.done .quest-check{ background:var(--green); color:#fff; transform:scale(1.05); }
.quest-item-body{ flex:1; min-width:0; }
.quest-item-title{ font-size:.9rem; font-weight:600; transition: color .15s ease; }
.quest-item.done .quest-item-title{ color:var(--text-faint); text-decoration:line-through; }
.quest-item-tag{
  display:inline-flex; align-items:center; gap:5px; margin-top:3px;
  font-size:.72rem; color:var(--text-faint); font-weight:500;
}
.quest-item-tag .dot{ width:7px; height:7px; }
.quest-item-pts{
  font-family:"IBM Plex Mono", monospace; font-size:.8rem; font-weight:600;
  color:var(--text-muted); flex:none;
}
.quest-item.done .quest-item-pts{ color:var(--green); }
.quest-empty{ font-size:.85rem; color:var(--text-faint); padding:10px 4px; }

/* ---- Two column: radar + streak ---- */
.split{
  display:grid; grid-template-columns:1.3fr 1fr; gap:16px;
  margin-bottom:16px;
}
.card{
  background:var(--surface); border:2.5px solid var(--ink); border-radius:16px;
  padding:22px; box-shadow:var(--shadow-off);
}
.card-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; gap:10px; flex-wrap:wrap; }
.card-head h2{ font-size:1.2rem; font-weight:600; }
.card-head .hint{ font-size:.78rem; color:var(--text-faint); }

.legend-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.legend-item{
  display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--text);
  font-weight:500; padding:5px 10px 5px 8px; border-radius:999px; border:1.5px solid var(--ink);
}
.dot{ width:9px; height:9px; border-radius:50%; flex:none; border:1.5px solid var(--ink); }

/* streak card */
.streak-hero{ display:flex; align-items:center; gap:16px; margin:6px 0 20px; }
.streak-flame{
  width:56px; height:56px; border-radius:14px;
  background:var(--yellow); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; flex:none;
  animation: flicker 2.6s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.08) rotate(-3deg); }
}
.streak-num{ font-size:2.05rem; font-weight:500; line-height:1; }
.streak-num .unit{ font-size:.95rem; color:var(--text-faint); font-weight:400; }
.streak-caption{ font-size:.82rem; color:var(--text-muted); margin-top:3px; }

.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell{
  aspect-ratio:1; border-radius:5px; background:var(--surface-2);
  border:1.5px solid var(--ink);
  transform:scale(.4); opacity:0;
  animation: pop .3s ease forwards;
}
@keyframes pop{ to{ transform:scale(1); opacity:1; } }
.cal-lbl{ font-size:.64rem; color:var(--text-faint); text-align:center; font-family:"IBM Plex Mono",monospace; font-weight:500; }

/* ---- charts row ---- */
.charts-row{ display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; }
.chart-box{ position:relative; height:220px; margin-top:12px; }

/* ---- activities ---- */
.activity-list{ display:flex; flex-direction:column; }
.activity{
  display:flex; align-items:center; gap:14px;
  padding:13px 0; border-bottom:2px solid var(--surface-2);
  transition: transform .12s ease;
}
.activity:hover{ transform:translateX(3px); }
.activity:last-child{ border-bottom:none; padding-bottom:0; }
.activity-icon{
  width:38px; height:38px; border-radius:10px; flex:none;
  background:var(--surface); border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.activity-body{ flex:1; min-width:0; }
.activity-title{ font-size:.9rem; font-weight:600; }
.activity-meta{ font-size:.78rem; color:var(--text-faint); margin-top:2px; }
.activity-time{ font-size:.78rem; color:var(--text-faint); flex:none; font-weight:500; }

/* ---- FAB ---- */
.fab{
  position:fixed; right:28px; bottom:28px;
  display:flex; align-items:center; gap:9px;
  padding:15px 22px 15px 18px; border-radius:999px;
  background:var(--green); color:#fff;
  font-family:"Baloo 2"; font-weight:600; font-size:.95rem;
  box-shadow:4px 4px 0 var(--ink);
  border:2.5px solid var(--ink); cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fab:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
.fab:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--ink); }
.fab .plus{ font-size:1.2rem; line-height:1; }

/* ---- Modal: registrar meu dia ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(17,17,17,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:50;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background:var(--surface); border:2.5px solid var(--ink); border-radius:18px;
  box-shadow:8px 8px 0 var(--ink); padding:26px; max-width:440px; width:100%;
  max-height:88vh; overflow-y:auto;
}
.modal h2{ font-size:1.3rem; margin-bottom:16px; }
.modal-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.modal-field label{ font-size:.8rem; font-weight:600; color:var(--text-muted); }
.modal-field input, .modal-field select, .modal-field textarea{
  border:2px solid var(--ink); border-radius:9px; padding:9px 11px;
  font-family:inherit; font-size:.92rem; background:var(--surface); color:var(--text);
}
.modal-skills{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal-actions{ display:flex; gap:10px; margin-top:18px; }
.btn-primary{
  background:var(--green); color:#fff; border:2.5px solid var(--ink); border-radius:999px;
  padding:11px 18px; font-weight:700; cursor:pointer; flex:1;
  box-shadow:3px 3px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.btn-secondary{
  background:var(--surface); color:var(--text); border:2px solid var(--ink); border-radius:999px;
  padding:11px 18px; font-weight:600; cursor:pointer;
}
.modal-msg{ font-size:.82rem; margin-top:10px; }
.modal-msg.error{ color:var(--red); }
.modal-msg.success{ color:var(--green); }

@media (max-width: 880px){
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .split, .charts-row{ grid-template-columns:1fr; }
}

/* ---- Login page ---- */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
}
.login-card{
  width:100%; max-width:400px; background:var(--surface);
  border:2.5px solid var(--ink); border-radius:18px; padding:34px 28px;
  box-shadow:var(--shadow-off);
}
.login-sub{ text-align:center; color:var(--text-muted); font-size:.92rem; margin:0 0 24px; }
.login-form{ display:flex; flex-direction:column; gap:12px; }
.login-label{ font-size:.8rem; font-weight:600; color:var(--text-muted); }
.login-form input{
  border:2px solid var(--ink); border-radius:9px; padding:11px 13px;
  font-family:inherit; font-size:.95rem; margin-bottom:6px;
}
.login-msg{ text-align:center; font-size:.85rem; margin-top:16px; }
.login-msg.error{ color:var(--red); }
.login-msg.success{ color:var(--green); }
.login-hint{ text-align:center; font-size:.76rem; color:var(--text-faint); margin-top:18px; }