:root{
  --bg:#0a0c0e; --surface:#121517; --surface2:#171b1e; --surface3:#1e2327;
  --border:#242a2f; --border2:#2f373d;
  --text:#e9edf0; --text2:#97a0a8; --text3:#5c666e;
  --accent:#c6ff3d; --blue:#4d9fff; --violet:#a78bfa; --amber:#f5a524; --red:#f4515b;
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:max(28px,env(safe-area-inset-top)) 24px calc(80px + env(safe-area-inset-bottom));
}
.wrap{max-width:1240px;margin:0 auto}
button,input,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:#0a0c0e}
[hidden]{display:none !important}

/* ───────── marca ───────── */
.mark{display:flex;align-items:flex-end;gap:3px;height:26px}
.mark i{width:5px;background:var(--accent);border-radius:2px;display:block}
.mark i:nth-child(1){height:12px;opacity:.45}
.mark i:nth-child(2){height:19px;opacity:.72}
.mark i:nth-child(3){height:26px}
.mark.big{height:44px;gap:5px;justify-content:center;margin-bottom:20px}
.mark.big i{width:9px}
.mark.big i:nth-child(1){height:20px}
.mark.big i:nth-child(2){height:32px}
.mark.big i:nth-child(3){height:44px}

/* ───────── login ───────── */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:var(--bg);z-index:100}
.login-card{
  width:100%;max-width:380px;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:38px 30px 32px;
}
.login-card h1{font-size:24px;font-weight:660;letter-spacing:-.02em;margin-bottom:9px}
.login-card p{color:var(--text2);font-size:14px;line-height:1.6;margin-bottom:26px}
.gbtn{display:flex;justify-content:center;min-height:44px}
.login-msg{margin-top:18px;font-size:13px;line-height:1.55;color:var(--text3);min-height:18px}
.login-msg.erro{color:var(--red)}

/* ───────── header ───────── */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.brand{display:flex;align-items:center;gap:12px}
h1{font-size:22px;font-weight:650;letter-spacing:-.02em}
.date{font-size:13px;color:var(--text2);margin-top:1px}
.date::first-letter{text-transform:uppercase}
.tools{display:flex;gap:8px;align-items:center}
.tool{
  display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);color:var(--text2);
  font-size:13px;font-weight:500;transition:.15s;
}
.tool:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)}

/* ───────── selo de sync ───────── */
.sync{
  display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);
  font-size:12.5px;font-weight:500;color:var(--text3);white-space:nowrap;
}
.sync i{width:7px;height:7px;border-radius:50%;background:var(--text3);flex:none;transition:.2s}
.sync.ok i{background:var(--accent)}
.sync.salvando i{background:var(--blue);animation:pulsa 1s ease-in-out infinite}
.sync.off i{background:var(--amber)}
.sync.erro i{background:var(--red)}
@keyframes pulsa{50%{opacity:.25}}

/* ───────── stats ───────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 17px}
.stat-lbl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.stat-val{font-size:27px;font-weight:680;letter-spacing:-.03em;margin:7px 0 3px;font-variant-numeric:tabular-nums}
.stat-val small{font-size:15px;font-weight:500;color:var(--text3);letter-spacing:0}
.stat-sub{font-size:12px;color:var(--text2)}
.bar{height:3px;background:var(--surface3);border-radius:2px;margin-top:11px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px;background:var(--accent);transition:width .45s cubic-bezier(.4,0,.2,1)}
.stat.fire .stat-val{color:var(--amber)}

/* ───────── adicionar ───────── */
.add{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 12px;margin-bottom:22px;transition:border-color .15s;
}
.add:focus-within{border-color:var(--border2)}
.add-in{flex:1 1 240px;min-width:0;background:none;border:none;outline:none;font-size:16px;padding:6px 4px}
.add-in::placeholder{color:var(--text3)}
.seg{display:flex;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:3px}
.seg button{padding:6px 11px;border-radius:6px;font-size:12.5px;font-weight:560;color:var(--text3);transition:.14s;white-space:nowrap}
.seg button:hover{color:var(--text2)}
.seg button.on{background:var(--surface3);color:var(--text)}
.seg button.on[data-t="d"]{color:var(--accent)}
.seg button.on[data-t="w"]{color:var(--blue)}
.seg button.on[data-t="m"]{color:var(--violet)}
.seg button.on[data-t="o"]{color:var(--amber)}
.when{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:8px 10px;font-size:13px;outline:none;color:var(--text2)}
.when:focus{border-color:var(--border2)}
.go{padding:9px 17px;border-radius:9px;background:var(--accent);color:#0a0c0e;font-size:13.5px;font-weight:650;transition:.15s}
.go:hover{filter:brightness(1.08)}
.go:active{transform:translateY(1px)}

/* ───────── board ───────── */
.board{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px;align-items:start}
.col{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.col-h{display:flex;align-items:center;gap:9px;padding:14px 17px 12px;border-bottom:1px solid var(--border)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.col-t{font-size:12px;font-weight:660;letter-spacing:.08em;text-transform:uppercase}
.col-n{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--text3);background:var(--surface3);padding:2px 8px;border-radius:20px;font-variant-numeric:tabular-nums}
.list{padding:6px}

/* ───────── tarefa ───────── */
.task{display:flex;align-items:flex-start;gap:11px;padding:10px 11px;border-radius:9px;transition:background .13s}
.task:hover{background:var(--surface2)}
.box{flex:none;width:19px;height:19px;margin-top:1px;border-radius:6px;border:1.5px solid var(--border2);display:grid;place-items:center;transition:.16s}
.box:hover{border-color:var(--text3)}
.box svg{width:11px;height:11px;stroke:#0a0c0e;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:scale(.4);transition:.18s cubic-bezier(.34,1.56,.64,1)}
.task.done .box{background:var(--accent);border-color:var(--accent)}
.task.done .box svg{opacity:1;transform:scale(1)}
.body{flex:1;min-width:0}
.title{font-size:14.5px;line-height:1.45;word-break:break-word;outline:none;border-radius:4px}
.title[contenteditable="true"]{background:var(--surface3);box-shadow:0 0 0 2px var(--border2);padding:1px 5px;margin:-1px -5px}
.task.done .title{color:var(--text3);text-decoration:line-through;text-decoration-color:var(--text3)}
.meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.chip{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2.5px 7px;border-radius:5px;background:var(--surface3);color:var(--text3)}
.chip.d{color:var(--accent);background:rgba(198,255,61,.10)}
.chip.w{color:var(--blue);background:rgba(77,159,255,.11)}
.chip.m{color:var(--violet);background:rgba(167,139,250,.12)}
.chip.o{color:var(--amber);background:rgba(245,165,36,.11)}
.chip.late{color:var(--red);background:rgba(244,81,91,.12)}
.del{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--text3);opacity:0;transition:.14s}
.task:hover .del{opacity:1}
.del:hover{background:rgba(244,81,91,.13);color:var(--red)}
.del svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.rule{height:1px;background:var(--border);margin:7px 11px}

/* ───────── vazio ───────── */
.empty{padding:26px 17px 30px;text-align:center;color:var(--text3);font-size:13px}
.blank{grid-column:1/-1;background:var(--surface);border:1px dashed var(--border2);border-radius:var(--r);padding:52px 24px;text-align:center}
.blank h2{font-size:17px;font-weight:600;margin-bottom:7px}
.blank p{color:var(--text2);font-size:14px;max-width:430px;margin:0 auto 20px;line-height:1.6}
.blank button{padding:10px 18px;border-radius:9px;border:1px solid var(--border2);background:var(--surface2);font-size:13.5px;font-weight:560;transition:.15s}
.blank button:hover{border-color:var(--text3);background:var(--surface3)}

/* ───────── histórico ───────── */
.hist{margin-top:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px 18px 17px}
.hist-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.hist-t{font-size:11px;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.hist-s{font-size:12px;color:var(--text2);text-align:right}
.days{display:flex;gap:5px;align-items:flex-end;height:52px}
.day{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;position:relative}
.day em{width:100%;max-width:34px;border-radius:4px;background:var(--accent);min-height:3px;transition:.3s;font-style:normal}
.day span{font-size:9.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.day.today em{box-shadow:0 0 0 1.5px var(--accent),0 0 0 3.5px var(--bg)}
.day.today span{color:var(--text)}
.day:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--surface3);border:1px solid var(--border2);color:var(--text);
  padding:5px 9px;border-radius:7px;font-size:11.5px;white-space:nowrap;z-index:5;pointer-events:none;
}

/* ───────── rodapé ───────── */
.rodape{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px;font-size:12.5px;color:var(--text3)}
.link{color:var(--text3);text-decoration:underline;text-underline-offset:3px;font-size:12.5px}
.link:hover{color:var(--text2)}

/* ───────── toast ───────── */
.toast{
  position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,80px);
  background:var(--surface3);border:1px solid var(--border2);color:var(--text);
  padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:500;
  opacity:0;transition:.28s cubic-bezier(.34,1.4,.64,1);z-index:200;max-width:calc(100vw - 32px);text-align:center;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:1000px){ .board{grid-template-columns:1fr} .stats{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  body{padding:max(18px,env(safe-area-inset-top)) 14px calc(60px + env(safe-area-inset-bottom))}
  .stats{gap:9px} .stat{padding:13px 14px} .stat-val{font-size:23px}
  .top{gap:12px} .tools{width:100%;justify-content:space-between}
  .add{gap:8px} .seg{flex:1;justify-content:space-between} .seg button{flex:1;padding:8px 6px}
  .when{flex:1} .go{flex:1;padding:11px 17px}
  .task{padding:12px 11px}                 /* alvo de toque maior */
  .box{width:22px;height:22px}
  .del{opacity:.55}                        /* sem hover no celular */
}