:root{
  --preto:#141414; --vermelho:#E63B2E; --amarelo:#FFC72C; --creme:#F5EEE0; --azul:#2D5BE3; --verde:#24A05E; --roxo:#8a52d1;
  --cinza:#6d675e; --linha:#e3d9c6; --branco:#fffdf8;
  --r:18px;
  --fonte:"itc-avant-garde-gothic-pro","Poppins",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--creme);color:var(--preto);font-family:var(--fonte);font-size:15px;line-height:1.45;-webkit-tap-highlight-color:transparent}
body{padding-top:env(safe-area-inset-top);padding-bottom:calc(84px + env(safe-area-inset-bottom));min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit}
b,strong{font-weight:700}

/* ---------- layout ---------- */
.app{display:block}
header.top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px;max-width:1240px;margin:0 auto;gap:12px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:22px;letter-spacing:-.5px}
.logo .ast{color:var(--vermelho);font-size:32px;line-height:0;transform:translateY(5px)}
.logo small{display:block;font-weight:400;font-size:12px;color:var(--cinza);letter-spacing:0}
.logo img{height:34px}
.me{display:flex;align-items:center;gap:8px;font-size:13px}
.sync{font-size:11.5px;color:var(--cinza);display:flex;align-items:center;gap:5px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--amarelo);display:inline-block}
.dot.ok{background:var(--verde)} .dot.err{background:var(--vermelho)}
main{max-width:1240px;margin:0 auto;padding:4px 16px 30px}
h1{font-size:26px;font-weight:700;letter-spacing:-.6px;margin:6px 2px 14px;line-height:1.15}
h2{font-size:16.5px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.ast{color:var(--vermelho)}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pagehead h1{margin-bottom:8px}

/* ---------- nav ---------- */
nav.bottom{position:fixed;left:0;right:0;bottom:0;background:var(--preto);display:flex;justify-content:space-around;padding:7px 4px calc(7px + env(safe-area-inset-bottom));z-index:30}
nav.bottom button{color:#cfc7b8;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;padding:6px 8px;border-radius:14px;min-width:58px}
nav.bottom button svg{width:22px;height:22px}
nav.bottom button.on{color:var(--preto);background:var(--amarelo)}
nav.side{display:none}
@media(min-width:900px){
  body{padding-bottom:20px}
  nav.bottom{display:none}
  .app{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:1400px;margin:0 auto}
  .app>div{min-width:0}
  nav.side{display:flex;flex-direction:column;gap:4px;padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
  nav.side .logo{margin:0 8px 18px}
  nav.side button{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;font-size:14.5px;font-weight:500;text-align:left}
  nav.side button svg{width:19px;height:19px;flex:none}
  nav.side button:hover{background:var(--branco)}
  nav.side button.on{background:var(--preto);color:var(--creme)}
  nav.side .sep{height:1px;background:var(--linha);margin:8px 10px}
  nav.side .foot{margin-top:auto;font-size:12px;color:var(--cinza);padding:10px 8px}
  header.top .logo{display:none}
  header.top{justify-content:flex-end;padding-top:18px}
  main{padding:0 24px 40px}
}

/* ---------- cards ---------- */
.grid{display:grid;gap:14px}
@media(min-width:900px){.cols2{grid-template-columns:1fr 1fr}.cols3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--branco);border-radius:var(--r);padding:16px;border:1.5px solid var(--linha);position:relative;min-width:0}
.full{grid-column:1/-1}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-radius:var(--r);padding:15px 16px;position:relative;overflow:hidden;min-height:96px;text-align:left}
.stat b{display:block;font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-1px}
.stat span{font-size:12.5px;font-weight:500}
.stat::after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-18px;bottom:-22px;background:rgba(255,255,255,.2)}
.s1{background:var(--preto);color:var(--creme)} .s2{background:var(--azul);color:#fff}
.s3{background:var(--amarelo)} .s4{background:var(--verde);color:#fff} .s5{background:var(--vermelho);color:#fff}
.hero{background:var(--preto);color:var(--creme);border-radius:24px;padding:22px 20px;margin-bottom:14px;position:relative;overflow:hidden}
.hero h1{margin:0 0 4px;color:var(--creme);position:relative;z-index:1}
.hero p{font-size:14px;color:#d8cfbf;max-width:68%;position:relative;z-index:1}
.hero .c1{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:var(--vermelho)}
.hero .c2{position:absolute;right:50px;bottom:-26px;width:90px;height:42px;border-radius:99px;background:var(--amarelo)}
.hero .c3{position:absolute;right:28px;top:56px;color:var(--azul);font-size:56px;font-weight:700;line-height:1}

/* ---------- bits ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1.5px solid var(--preto);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:500;white-space:nowrap;background:var(--branco)}
.chip.on{background:var(--preto);color:var(--creme)}
.search{width:100%;border:1.5px solid var(--preto);background:var(--branco);border-radius:999px;padding:10px 18px;margin-bottom:10px;outline:none}
.tiny{font-size:11.5px;color:var(--cinza)}
.muted{color:var(--cinza)}
.late{color:var(--vermelho)!important;font-weight:700}
.empty{color:var(--cinza);font-size:14px;padding:8px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px}
.grow{flex:1;min-width:0}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:30px;height:30px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
.av.lg{width:44px;height:44px;font-size:16px}
.bar{height:9px;border-radius:99px;background:var(--creme);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--verde)}

.item{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--linha);width:100%;text-align:left}
.item:first-child{border-top:none}
.date-box{width:48px;flex:none;text-align:center;border-radius:14px;padding:6px 0;background:var(--creme);line-height:1.1}
.date-box b{display:block;font-size:18px}
.date-box span{font-size:10.5px;text-transform:uppercase;font-weight:700}
.date-box.hoje{background:var(--vermelho);color:#fff}
.lrow{display:flex;gap:12px;align-items:center;background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--r);padding:12px 14px;margin-bottom:9px;width:100%;text-align:left}
.lrow:hover{border-color:var(--preto)}
.lrow .right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;background:var(--preto);color:var(--creme);border:1.5px solid var(--preto);text-decoration:none;white-space:nowrap}
.btn.sec{background:var(--branco);color:var(--preto)}
.btn.red{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.btn.yel{background:var(--amarelo);border-color:var(--amarelo);color:var(--preto)}
.btn.grn{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.danger{background:var(--branco);color:var(--vermelho);border-color:var(--vermelho)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn:disabled{opacity:.5}
.fab{position:fixed;right:18px;bottom:calc(92px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:50%;background:var(--vermelho);color:#fff;font-size:30px;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.22);z-index:31}
@media(min-width:900px){.fab{bottom:30px;right:30px}}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;margin:4px 0 6px;color:var(--cinza)}

/* ---------- kanban ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:0 -16px;padding-left:16px;padding-right:16px}
@media(min-width:900px){.kanban{grid-auto-columns:minmax(196px,1fr);margin:0;padding-left:0;padding-right:0}}
.col{scroll-snap-align:start;background:#efe6d4;border-radius:20px;padding:10px;min-height:200px;display:flex;flex-direction:column;gap:8px}
.col.over{outline:2.5px dashed var(--preto)}
.colh{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:4px 6px 2px;font-weight:700;font-size:14px}
.colh .cnt{background:var(--branco);border-radius:99px;padding:1px 9px;font-size:12px}
.task{background:var(--branco);border-radius:15px;padding:11px 12px;border:1.5px solid transparent;text-align:left;width:100%;display:block;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.task:hover{border-color:var(--preto)}
.task.dragging{opacity:.4}
.task .t{font-weight:700;font-size:14px;margin-bottom:4px}
.task .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--cinza)}
.task .foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.prio{width:8px;height:8px;border-radius:50%;display:inline-block}
.mv{font-size:12px;font-weight:700;border:1.5px solid var(--linha);border-radius:99px;padding:2px 9px}

/* ---------- checklist ---------- */
.ck{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-top:1px solid var(--linha)}
.ck:first-child{border-top:none}
.ck input{width:20px;height:20px;accent-color:var(--verde);margin-top:1px;flex:none}
.ck span{flex:1;font-size:14px}
.ck.done span{text-decoration:line-through;color:var(--cinza)}
.ck .del{color:var(--cinza);font-size:16px;padding:0 4px}
.addline{display:flex;gap:8px;margin-top:8px}
.addline input{flex:1}

/* ---------- calendar ---------- */
.calgrid{display:none}
@media(min-width:900px){
  .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .callist{display:none}
}
.calgrid .wd{font-size:11.5px;font-weight:700;text-transform:uppercase;color:var(--cinza);padding:0 6px}
.calgrid .day{background:var(--branco);border-radius:14px;min-height:108px;padding:6px;border:1.5px solid var(--linha);display:flex;flex-direction:column;gap:3px;text-align:left}
.calgrid .day.out{opacity:.4}
.calgrid .day.hoje{border-color:var(--vermelho)}
.calgrid .day .n{font-size:12px;font-weight:700;display:flex;justify-content:space-between}
.calgrid .day .add{opacity:0;font-size:15px;line-height:1}
.calgrid .day:hover .add{opacity:1}
.ev{font-size:11px;border-radius:8px;padding:3px 6px;text-align:left;width:100%;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monthnav{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.monthnav b{font-size:17px;min-width:150px;text-align:center;text-transform:capitalize}
.circ{width:36px;height:36px;border-radius:50%;background:var(--branco);border:1.5px solid var(--preto);font-size:16px;display:grid;place-items:center;flex:none}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:rgba(20,20,20,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){.ov{align-items:center}}
.sheet{background:var(--creme);width:100%;max-width:660px;max-height:92vh;overflow:auto;border-radius:26px 26px 0 0;padding:18px 18px calc(24px + env(safe-area-inset-bottom))}
@media(min-width:700px){.sheet{border-radius:26px}}
.sheet h3{font-size:20px;font-weight:700;letter-spacing:-.4px}
.x{width:36px;height:36px;border-radius:50%;background:var(--branco);border:1.5px solid var(--preto);font-size:17px;flex:none}
label{display:block;font-size:12.5px;font-weight:700;margin:11px 0 4px}
label.inline{display:flex;align-items:center;gap:8px;font-weight:500;font-size:14px}
label.inline input{width:18px;height:18px;accent-color:var(--verde)}
.f{width:100%;border:1.5px solid var(--linha);background:var(--branco);border-radius:14px;padding:10px 13px;outline:none;min-height:44px}
.f:focus{border-color:var(--preto)}
textarea.f{min-height:96px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sec-t{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin:18px 0 8px;display:flex;align-items:center;gap:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px}
.kv dt{color:var(--cinza)} .kv dd{word-break:break-word}
.msg{background:var(--branco);border-radius:16px;padding:12px 14px;margin-bottom:8px;border:1.5px solid var(--linha)}
pre.txt{white-space:pre-wrap;font-family:inherit;font-size:13.5px;margin-top:6px;word-break:break-word}
pre.cut{max-height:4.4em;overflow:hidden}
.stchips{display:flex;flex-wrap:wrap;gap:6px}
.stchips button{border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;border:1.5px solid transparent;opacity:.55}
.stchips button.on{opacity:1;border-color:var(--preto)}
.tabs{display:flex;gap:6px;overflow-x:auto;margin:6px 0 14px;scrollbar-width:none}
.tabs button{padding:7px 14px;border-radius:999px;font-weight:700;font-size:13.5px;white-space:nowrap;border:1.5px solid var(--preto);background:var(--branco)}
.tabs button.on{background:var(--preto);color:var(--creme)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom));background:var(--preto);color:var(--creme);padding:10px 18px;border-radius:999px;font-size:13.5px;z-index:90;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.on{opacity:1}
.banner{background:var(--amarelo);border-radius:var(--r);padding:12px 16px;margin-bottom:14px;font-size:13.5px}
.file{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--linha)}
.file:first-child{border-top:none}
.fic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;color:#fff;overflow:hidden}
.fic img{width:100%;height:100%;object-fit:cover}
.drop{border:2px dashed var(--cinza);border-radius:var(--r);padding:18px;text-align:center;color:var(--cinza);font-size:14px;margin-bottom:12px}
.drop.over{border-color:var(--preto);background:var(--branco)}
.more{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:700px){.more{grid-template-columns:repeat(3,1fr)}}
.more button{background:var(--branco);border:1.5px solid var(--linha);border-radius:var(--r);padding:18px 14px;text-align:left;display:flex;flex-direction:column;gap:8px;font-weight:700}
.more button svg{width:26px;height:26px}
.more button span{font-weight:400;font-size:12px;color:var(--cinza)}
.money{font-variant-numeric:tabular-nums}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.login .box{background:var(--branco);border-radius:28px;padding:30px 24px;width:100%;max-width:380px;position:relative;z-index:1;border:1.5px solid var(--preto)}
.login .b1{position:absolute;width:260px;height:260px;border-radius:50%;background:var(--vermelho);top:-90px;right:-80px}
.login .b2{position:absolute;width:200px;height:80px;border-radius:99px;background:var(--amarelo);bottom:60px;left:-40px}
.login .b3{position:absolute;font-size:180px;font-weight:700;color:var(--azul);bottom:-60px;right:20px;line-height:1}